Bug 1478894 - Part 3: Render the Rule toolbar in the new rule view. r=pbro

devtools/client/inspector/rules/components/ClassListPanel.js

@@ -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;

devtools/client/inspector/rules/components/PseudoClassPanel.js

@@ -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;

devtools/client/inspector/rules/components/RulesApp.js

@@ -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",

devtools/client/inspector/rules/components/SearchBox.js

@@ -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;

devtools/client/inspector/rules/components/Toolbar.js

@@ -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;

devtools/client/inspector/rules/components/moz.build

@@ -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',
 )