Bug 1478894 - Part 3: Render the Rule toolbar in the new rule view. r=pbro
authorGabriel Luong <gabriel.luong@gmail.com>
Tue, 08 Jan 2019 15:58:11 -0500
changeset 510084 14f25dba162461533a1c2b007fe75dcf86a73d39
parent 510083 90d4b7df4ef5fa006aba0bb39fcb7d457f28353d
child 510085 6c61f3dce0d0953e8dea6bb444cddfa8fe39251b
push id10547
push userffxbld-merge
push dateMon, 21 Jan 2019 13:03:58 +0000
treeherdermozilla-beta@24ec1916bffe [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1478894
milestone66.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1478894 - Part 3: Render the Rule toolbar in the new rule view. r=pbro
devtools/client/inspector/rules/components/ClassListPanel.js
devtools/client/inspector/rules/components/PseudoClassPanel.js
devtools/client/inspector/rules/components/RulesApp.js
devtools/client/inspector/rules/components/SearchBox.js
devtools/client/inspector/rules/components/Toolbar.js
devtools/client/inspector/rules/components/moz.build
new file mode 100644
--- /dev/null
+++ b/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;
new file mode 100644
--- /dev/null
+++ b/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;
--- a/devtools/client/inspector/rules/components/RulesApp.js
+++ b/devtools/client/inspector/rules/components/RulesApp.js
@@ -13,16 +13,17 @@ const {
 } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 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");
 
 const SHOW_PSEUDO_ELEMENTS_PREF = "devtools.inspector.show_pseudo_elements";
 
 class RulesApp extends PureComponent {
   static get propTypes() {
@@ -138,16 +139,17 @@ class RulesApp extends PureComponent {
     }
 
     return (
       dom.div(
         {
           id: "sidebar-panel-ruleview",
           className: "theme-sidebar inspector-tabpanel",
         },
+        Toolbar({}),
         dom.div(
           {
             id: "ruleview-container",
             className: "ruleview",
           },
           dom.div(
             {
               id: "ruleview-container-focusable",
new file mode 100644
--- /dev/null
+++ b/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;
new file mode 100644
--- /dev/null
+++ b/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;
--- a/devtools/client/inspector/rules/components/moz.build
+++ b/devtools/client/inspector/rules/components/moz.build
@@ -1,13 +1,17 @@
 # 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/.
 
 DevToolsModules(
+    'ClassListPanel.js',
     'Declaration.js',
     'Declarations.js',
+    'PseudoClassPanel.js',
     'Rule.js',
     'Rules.js',
     'RulesApp.js',
+    'SearchBox.js',
     'Selector.js',
     'SourceLink.js',
+    'Toolbar.js',
 )