Bug 1338300 - part2: extract layoutview GridItem to dedicated component;r=gl draft
authorJulian Descottes <jdescottes@mozilla.com>
Wed, 15 Feb 2017 18:46:12 +0100
changeset 485279 b9bf6044eff8c086b5adb76a9b67866a61a1e774
parent 485278 8420a7e38bb95df585b29ec2ce49ef8a877f450e
child 485280 38bda00c0e89ae13bd9161c6bceb596ac3f2b45a
child 485281 bd09b22510aedc0c68e6ff8ed359f35ed00e7da2
push id45692
push userjdescottes@mozilla.com
push dateThu, 16 Feb 2017 14:13:34 +0000
reviewersgl
bugs1338300
milestone54.0a1
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
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({ target }) {
+    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,17 +1,19 @@
 /* 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: {
@@ -40,48 +42,14 @@ module.exports = createClass({
         className: "grid-container",
       },
       dom.span(
         {},
         getStr("layout.overlayMultipleGrids")
       ),
       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(Object.assign({ grid }, this.props)))
       )
     );
   },
 
 });
-
--- 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',
 )