Bug 1338300 - part2: extract layoutview GridItem to dedicated component;r=gl
authorJulian Descottes <jdescottes@mozilla.com>
Tue, 21 Feb 2017 20:24:40 +0100
changeset 344156 8ece5e93369be115580239c3d44f97859d6a1a74
parent 344155 73ac9c88604a20b598e64150d4fa764870244096
child 344157 d84d57475e82244ae621e7a2a2c609a5cbb45fdf
push id37777
push userjdescottes@mozilla.com
push dateWed, 22 Feb 2017 12:50:21 +0000
treeherderautoland@d84d57475e82 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1338300
milestone54.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 1338300 - part2: extract layoutview GridItem to dedicated component;r=gl MozReview-Commit-ID: AKWvRoGu6CZ
devtools/client/inspector/layout/components/GridItem.js
devtools/client/inspector/layout/components/GridList.js
devtools/client/inspector/layout/components/moz.build
devtools/client/inspector/layout/reducers/grids.js
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/layout/components/GridItem.js
@@ -0,0 +1,69 @@
+/* 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");
+
+module.exports = createClass({
+
+  displayName: "GridItem",
+
+  propTypes: {
+    grid: PropTypes.shape(Types.grid).isRequired,
+    onSetGridOverlayColor: PropTypes.func.isRequired,
+    onToggleGridHighlighter: PropTypes.func.isRequired,
+  },
+
+  mixins: [ addons.PureRenderMixin ],
+
+  onGridCheckboxClick() {
+    let {
+      grid,
+      onToggleGridHighlighter,
+    } = this.props;
+
+    onToggleGridHighlighter(grid.nodeFront);
+  },
+
+  render() {
+    let { grid } = this.props;
+    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/GridList.js
+++ b/devtools/client/inspector/layout/components/GridList.js
@@ -1,87 +1,50 @@
 /* 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 GridItem = createFactory(require("./GridItem"));
+
 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 }) {
+  render() {
     let {
       grids,
       onToggleGridHighlighter,
     } = this.props;
 
-    onToggleGridHighlighter(grids[target.value].nodeFront);
-  },
-
-  render() {
-    let {
-      grids,
-    } = this.props;
-
     return dom.div(
       {
         className: "grid-container",
       },
       dom.span(
         {},
         getStr("layout.overlayGrid")
       ),
       dom.ul(
         {},
-        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
-            )
-          );
-        })
+        grids.map(grid => GridItem({
+          grid,
+          onToggleGridHighlighter,
+        }))
       )
     );
   },
 
 });
-
--- a/devtools/client/inspector/layout/components/moz.build
+++ b/devtools/client/inspector/layout/components/moz.build
@@ -11,10 +11,11 @@ DevToolsModules(
     'BoxModel.js',
     'BoxModelEditable.js',
     'BoxModelInfo.js',
     'BoxModelMain.js',
     'BoxModelProperties.js',
     'ComputedProperty.js',
     'Grid.js',
     'GridDisplaySettings.js',
+    'GridItem.js',
     'GridList.js',
 )
--- a/devtools/client/inspector/layout/reducers/grids.js
+++ b/devtools/client/inspector/layout/reducers/grids.js
@@ -9,27 +9,21 @@ const {
   UPDATE_GRIDS,
 } = require("../actions/index");
 
 const INITIAL_GRIDS = [];
 
 let reducers = {
 
   [UPDATE_GRID_HIGHLIGHTED](grids, { nodeFront, highlighted }) {
-    let newGrids = grids.map(g => {
-      if (g.nodeFront == nodeFront) {
-        g.highlighted = highlighted;
-      } else {
-        g.highlighted = false;
-      }
-
-      return g;
+    return grids.map(g => {
+      return Object.assign({}, g, {
+        highlighted: g.nodeFront === nodeFront ? highlighted : false
+      });
     });
-
-    return newGrids;
   },
 
   [UPDATE_GRIDS](_, { grids }) {
     return grids;
   },
 
 };