mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-22 17:55:50 +00:00
Bug 1478894 - Part 3: Render the Rule toolbar in the new rule view. r=pbro
This commit is contained in:
parent
d9298a9ad2
commit
c5848de16a
36
devtools/client/inspector/rules/components/ClassListPanel.js
Normal file
36
devtools/client/inspector/rules/components/ClassListPanel.js
Normal file
@ -0,0 +1,36 @@
|
||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
"use strict";
|
||||
|
||||
const { PureComponent } = require("devtools/client/shared/vendor/react");
|
||||
const dom = require("devtools/client/shared/vendor/react-dom-factories");
|
||||
|
||||
const { getStr } = require("../utils/l10n");
|
||||
|
||||
class ClassListPanel extends PureComponent {
|
||||
static get propTypes() {
|
||||
return {};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
dom.div(
|
||||
{
|
||||
id: "ruleview-class-panel",
|
||||
className: "ruleview-reveal-panel",
|
||||
},
|
||||
dom.input({
|
||||
className: "devtools-textinput add-class",
|
||||
placeholder: getStr("rule.classPanel.newClass.placeholder"),
|
||||
}),
|
||||
dom.div({ className: "classes" },
|
||||
dom.p({ className: "no-classes" }, getStr("rule.classPanel.noClasses"))
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = ClassListPanel;
|
@ -0,0 +1,57 @@
|
||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
"use strict";
|
||||
|
||||
const { PureComponent } = require("devtools/client/shared/vendor/react");
|
||||
const dom = require("devtools/client/shared/vendor/react-dom-factories");
|
||||
|
||||
class PseudoClassPanel extends PureComponent {
|
||||
static get propTypes() {
|
||||
return {};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
dom.div(
|
||||
{
|
||||
id: "pseudo-class-panel",
|
||||
className: "ruleview-reveal-panel",
|
||||
},
|
||||
dom.label({},
|
||||
dom.input({
|
||||
id: "pseudo-hover-toggle",
|
||||
checked: false,
|
||||
tabIndex: -1,
|
||||
type: "checkbox",
|
||||
value: ":hover",
|
||||
}),
|
||||
":hover"
|
||||
),
|
||||
dom.label({},
|
||||
dom.input({
|
||||
id: "pseudo-active-toggle",
|
||||
checked: false,
|
||||
tabIndex: -1,
|
||||
type: "checkbox",
|
||||
value: ":active",
|
||||
}),
|
||||
":active"
|
||||
),
|
||||
dom.label({},
|
||||
dom.input({
|
||||
id: "pseudo-focus-toggle",
|
||||
checked: false,
|
||||
tabIndex: -1,
|
||||
type: "checkbox",
|
||||
value: ":focus",
|
||||
}),
|
||||
":focus"
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = PseudoClassPanel;
|
@ -18,6 +18,7 @@ const { connect } = require("devtools/client/shared/vendor/react-redux");
|
||||
const Accordion = createFactory(require("devtools/client/inspector/layout/components/Accordion"));
|
||||
const Rule = createFactory(require("./Rule"));
|
||||
const Rules = createFactory(require("./Rules"));
|
||||
const Toolbar = createFactory(require("./Toolbar"));
|
||||
|
||||
const { getStr } = require("../utils/l10n");
|
||||
const Types = require("../types");
|
||||
@ -143,6 +144,7 @@ class RulesApp extends PureComponent {
|
||||
id: "sidebar-panel-ruleview",
|
||||
className: "theme-sidebar inspector-tabpanel",
|
||||
},
|
||||
Toolbar({}),
|
||||
dom.div(
|
||||
{
|
||||
id: "ruleview-container",
|
||||
|
35
devtools/client/inspector/rules/components/SearchBox.js
Normal file
35
devtools/client/inspector/rules/components/SearchBox.js
Normal file
@ -0,0 +1,35 @@
|
||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
"use strict";
|
||||
|
||||
const { PureComponent } = require("devtools/client/shared/vendor/react");
|
||||
const dom = require("devtools/client/shared/vendor/react-dom-factories");
|
||||
|
||||
const { getStr } = require("../utils/l10n");
|
||||
|
||||
class SearchBox extends PureComponent {
|
||||
static get propTypes() {
|
||||
return {};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
dom.div({ className: "devtools-searchbox has-clear-btn" },
|
||||
dom.input({
|
||||
id: "ruleview-searchbox",
|
||||
className: "devtools-filterinput devtools-rule-searchbox",
|
||||
placeholder: getStr("rule.filterStyles.placeholder"),
|
||||
type: "search",
|
||||
}),
|
||||
dom.button({
|
||||
id: "ruleview-searchinput-clear",
|
||||
className: "devtools-searchinput-clear",
|
||||
})
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = SearchBox;
|
119
devtools/client/inspector/rules/components/Toolbar.js
Normal file
119
devtools/client/inspector/rules/components/Toolbar.js
Normal file
@ -0,0 +1,119 @@
|
||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
"use strict";
|
||||
|
||||
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
|
||||
const dom = require("devtools/client/shared/vendor/react-dom-factories");
|
||||
|
||||
const SearchBox = createFactory(require("./SearchBox"));
|
||||
|
||||
loader.lazyGetter(this, "ClassListPanel", function() {
|
||||
return createFactory(require("./ClassListPanel"));
|
||||
});
|
||||
loader.lazyGetter(this, "PseudoClassPanel", function() {
|
||||
return createFactory(require("./PseudoClassPanel"));
|
||||
});
|
||||
|
||||
const { getStr } = require("../utils/l10n");
|
||||
|
||||
class Toolbar extends PureComponent {
|
||||
static get propTypes() {
|
||||
return {};
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
// Whether or not the class panel is expanded.
|
||||
isClassPanelExpanded: false,
|
||||
// Whether or not the pseudo class panel is expanded.
|
||||
isPseudoClassPanelExpanded: false,
|
||||
};
|
||||
|
||||
this.onClassPanelToggle = this.onClassPanelToggle.bind(this);
|
||||
this.onPseudoClassPanelToggle = this.onPseudoClassPanelToggle.bind(this);
|
||||
}
|
||||
|
||||
onClassPanelToggle(event) {
|
||||
event.stopPropagation();
|
||||
|
||||
this.setState(prevState => {
|
||||
const isClassPanelExpanded = !prevState.isClassPanelExpanded;
|
||||
const isPseudoClassPanelExpanded = isClassPanelExpanded ?
|
||||
false : prevState.isPseudoClassPanelExpanded;
|
||||
|
||||
return {
|
||||
isClassPanelExpanded,
|
||||
isPseudoClassPanelExpanded,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
onPseudoClassPanelToggle(event) {
|
||||
event.stopPropagation();
|
||||
|
||||
this.setState(prevState => {
|
||||
const isPseudoClassPanelExpanded = !prevState.isPseudoClassPanelExpanded;
|
||||
const isClassPanelExpanded = isPseudoClassPanelExpanded ?
|
||||
false : prevState.isClassPanelExpanded;
|
||||
|
||||
return {
|
||||
isClassPanelExpanded,
|
||||
isPseudoClassPanelExpanded,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
isClassPanelExpanded,
|
||||
isPseudoClassPanelExpanded,
|
||||
} = this.state;
|
||||
|
||||
return (
|
||||
dom.div(
|
||||
{
|
||||
id: "ruleview-toolbar-container",
|
||||
className: "devtools-toolbar",
|
||||
},
|
||||
dom.div({ id: "ruleview-toolbar" },
|
||||
SearchBox({}),
|
||||
dom.div({ id: "ruleview-command-toolbar" },
|
||||
dom.button({
|
||||
id: "ruleview-add-rule-button",
|
||||
className: "devtools-button",
|
||||
title: getStr("rule.addRule.tooltip"),
|
||||
}),
|
||||
dom.button({
|
||||
id: "pseudo-class-panel-toggle",
|
||||
className: "devtools-button" +
|
||||
(isPseudoClassPanelExpanded ? " checked" : ""),
|
||||
onClick: this.onPseudoClassPanelToggle,
|
||||
title: getStr("rule.togglePseudo.tooltip"),
|
||||
}),
|
||||
dom.button({
|
||||
id: "class-panel-toggle",
|
||||
className: "devtools-button" +
|
||||
(isClassPanelExpanded ? " checked" : ""),
|
||||
onClick: this.onClassPanelToggle,
|
||||
title: getStr("rule.classPanel.toggleClass.tooltip"),
|
||||
})
|
||||
)
|
||||
),
|
||||
isClassPanelExpanded ?
|
||||
ClassListPanel({})
|
||||
:
|
||||
null,
|
||||
isPseudoClassPanelExpanded ?
|
||||
PseudoClassPanel({})
|
||||
:
|
||||
null
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Toolbar;
|
@ -3,11 +3,15 @@
|
||||
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
DevToolsModules(
|
||||
'ClassListPanel.js',
|
||||
'Declaration.js',
|
||||
'Declarations.js',
|
||||
'PseudoClassPanel.js',
|
||||
'Rule.js',
|
||||
'Rules.js',
|
||||
'RulesApp.js',
|
||||
'SearchBox.js',
|
||||
'Selector.js',
|
||||
'SourceLink.js',
|
||||
'Toolbar.js',
|
||||
)
|
||||
|
Loading…
Reference in New Issue
Block a user