Bug 1308260 - Part 7: Display a list of grid container elements and checkbox to toggle the grid highlighter for each grid in the CSS grid layout panel. r=jryans
authorGabriel Luong <gabriel.luong@gmail.com>
Tue, 29 Nov 2016 19:33:04 +0800
changeset 324692 7055689115a4ba815bdfca60af0cf1958939001b
parent 324691 892a0318ffbe197aa1342c93b5ff78715fab2a7b
child 324693 664ac68c497e4a93a1fba73d2d9fb75b197aad7c
push id24
push usermaklebus@msu.edu
push dateTue, 20 Dec 2016 03:11:33 +0000
reviewersjryans
bugs1308260
milestone53.0a1
Bug 1308260 - Part 7: Display a list of grid container elements and checkbox to toggle the grid highlighter for each grid in the CSS grid layout panel. r=jryans
devtools/client/inspector/layout/components/App.js
devtools/client/inspector/layout/components/Grid.js
devtools/client/inspector/layout/components/GridList.js
devtools/client/inspector/layout/components/moz.build
devtools/client/inspector/layout/layout.js
devtools/client/inspector/layout/types.js
devtools/client/locales/en-US/layout.properties
devtools/client/themes/layout.css
--- a/devtools/client/inspector/layout/components/App.js
+++ b/devtools/client/inspector/layout/components/App.js
@@ -15,16 +15,17 @@ const Types = require("../types");
 const { getStr } = require("../utils/l10n");
 
 const App = createClass({
 
   displayName: "App",
 
   propTypes: {
     grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
+    onToggleGridHighlighter: PropTypes.func.isRequired,
   },
 
   mixins: [ addons.PureRenderMixin ],
 
   render() {
     return dom.div(
       {
         id: "layout-container",
--- a/devtools/client/inspector/layout/components/Grid.js
+++ b/devtools/client/inspector/layout/components/Grid.js
@@ -1,42 +1,51 @@
 /* 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 { addons, createClass, DOM: dom, PropTypes } =
+const { addons, createClass, createFactory, DOM: dom, PropTypes } =
   require("devtools/client/shared/vendor/react");
 
+const GridList = createFactory(require("./GridList"));
+
 const Types = require("../types");
 const { getStr } = require("../utils/l10n");
 
 module.exports = createClass({
 
   displayName: "Grid",
 
   propTypes: {
     grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
+    onToggleGridHighlighter: PropTypes.func.isRequired,
   },
 
   mixins: [ addons.PureRenderMixin ],
 
   render() {
     let {
       grids,
+      onToggleGridHighlighter,
     } = this.props;
 
-    return dom.div(
-      {
-        id: "layout-grid-container",
-      },
-      !grids.length ?
-        dom.div(
-          {
-            className: "layout-no-grids"
-          },
-          getStr("layout.noGrids")
-        ) : null
-    );
+    return grids.length ?
+      dom.div(
+        {
+          id: "layout-grid-container",
+        },
+        GridList({
+          grids,
+          onToggleGridHighlighter,
+        })
+      )
+      :
+      dom.div(
+        {
+          className: "layout-no-grids",
+        },
+        getStr("layout.noGrids")
+      );
   },
 
 });
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/layout/components/GridList.js
@@ -0,0 +1,89 @@
+/* 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 { addons, createClass, DOM: dom, PropTypes } =
+  require("devtools/client/shared/vendor/react");
+
+const Types = require("../types");
+const { getStr } = require("../utils/l10n");
+
+module.exports = createClass({
+
+  displayName: "GridList",
+
+  propTypes: {
+    grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
+    onToggleGridHighlighter: PropTypes.func.isRequired,
+  },
+
+  mixins: [ addons.PureRenderMixin ],
+
+  onGridCheckboxClick({ target }) {
+    let {
+      grids,
+      onToggleGridHighlighter,
+    } = this.props;
+
+    onToggleGridHighlighter(grids[target.value].nodeFront);
+  },
+
+  render() {
+    let {
+      grids,
+    } = this.props;
+
+    return dom.div(
+      {
+        className: "layout-grid-list-container",
+      },
+      dom.span(
+        {},
+        getStr("layout.overlayMultipleGrids")
+      ),
+      dom.ul(
+        {
+          id: "layout-grid-list",
+        },
+        grids.map(grid => {
+          let { nodeFront } = grid;
+          let { displayName, attributes } = nodeFront;
+
+          let gridName = displayName;
+
+          let idIndex = attributes.findIndex(({ name }) => name === "id");
+          if (idIndex > -1 && attributes[idIndex].value) {
+            gridName += "#" + attributes[idIndex].value;
+          }
+
+          let classIndex = attributes.findIndex(({name}) => name === "class");
+          if (classIndex > -1 && attributes[classIndex].value) {
+            gridName += "." + attributes[classIndex].value.split(" ").join(".");
+          }
+
+          return dom.li(
+            {
+              key: grid.id,
+            },
+            dom.label(
+              {},
+              dom.input(
+                {
+                  type: "checkbox",
+                  value: grid.id,
+                  checked: grid.highlighted,
+                  onChange: this.onGridCheckboxClick,
+                }
+              ),
+              gridName
+            )
+          );
+        })
+      )
+    );
+  },
+
+});
+
--- a/devtools/client/inspector/layout/components/moz.build
+++ b/devtools/client/inspector/layout/components/moz.build
@@ -4,9 +4,10 @@
 # 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(
     'Accordion.css',
     'Accordion.js',
     'App.js',
     'Grid.js',
+    'GridList.js',
 )
--- a/devtools/client/inspector/layout/layout.js
+++ b/devtools/client/inspector/layout/layout.js
@@ -45,24 +45,40 @@ LayoutView.prototype = {
    * the redux store and adding the view into the inspector sidebar.
    */
   init: Task.async(function* () {
     if (!this.inspector) {
       return;
     }
 
     this.layoutInspector = yield this.inspector.walker.getLayoutInspector();
+    let store = this.store = Store();
 
-    let store = this.store = Store();
+    let app = App({
+
+      /**
+       * Handler for a change in the input checkboxes in the GridList component.
+       * Toggles on/off the grid highlighter for the provided grid container element.
+       *
+       * @param  {NodeFront} node
+       *         The NodeFront of the grid container element for which the grid
+       *         highlighter is toggled on/off for.
+       */
+      onToggleGridHighlighter: node => {
+        this.highlighters.toggleGridHighlighter(node);
+      },
+
+    });
+
     let provider = createElement(Provider, {
       store,
       id: "layoutview",
       title: INSPECTOR_L10N.getStr("inspector.sidebar.layoutViewTitle"),
       key: "layoutview",
-    }, App());
+    }, app);
 
     let defaultTab = Services.prefs.getCharPref("devtools.inspector.activeSidebar");
 
     this.inspector.addSidebarTab(
       "layoutview",
       INSPECTOR_L10N.getStr("inspector.sidebar.layoutViewTitle"),
       provider,
       defaultTab == "layoutview"
--- a/devtools/client/inspector/layout/types.js
+++ b/devtools/client/inspector/layout/types.js
@@ -10,17 +10,17 @@ const { PropTypes } = require("devtools/
  * A single grid container in the document.
  */
 exports.grid = {
 
   // The id of the grid
   id: PropTypes.number,
 
   // The grid fragment object of the grid container
-  gridFragments: PropTypes.object,
+  gridFragments: PropTypes.array,
 
   // Whether or not the grid highlighter is highlighting the grid
   highlighted: PropTypes.bool,
 
   // The node front of the grid container
   nodeFront: PropTypes.object,
 
 };
--- a/devtools/client/locales/en-US/layout.properties
+++ b/devtools/client/locales/en-US/layout.properties
@@ -8,8 +8,12 @@
 # devtools.layoutview.enabled to true.
 
 # LOCALIZATION NOTE (layout.header): The accordion header for the CSS Grid pane.
 layout.header=Grid
 
 # LOCALIZATION NOTE (layout.noGrids): In the case where there are no CSS grid
 # containers to display.
 layout.noGrids=No grids
+
+# LOCALIZATION NOTE (layout.overlayMultipleGrids): The header for the list of grid
+# container elements that can be highlighted in the CSS Grid pane.
+layout.overlayMultipleGrids=Overlay Multiple Grids
--- a/devtools/client/themes/layout.css
+++ b/devtools/client/themes/layout.css
@@ -1,14 +1,52 @@
 /* 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/. */
 
 #layout-container {
   height: 100%;
   width: 100%;
+  overflow: auto;
 }
 
+/**
+ * Grid Container
+ */
+
+#layout-grid-container {
+  margin: 5px;
+}
+
+/**
+ * Grid List
+ */
+
+.layout-grid-list-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.layout-grid-list-container > span {
+  font-weight: bold;
+  margin-bottom: 3px;
+}
+
+#layout-grid-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+#layout-grid-list li {
+  padding: 4px 0;
+}
+
+/**
+ * Container when no grids are present
+ */
+
 .layout-no-grids {
   font-style: italic;
   text-align: center;
   padding: 0.5em;
 }