Bug 1338298 - use node reps to display grid containers in layout view;r=gl draft
authorJulian Descottes <jdescottes@mozilla.com>
Fri, 17 Feb 2017 13:59:39 +0100
changeset 487470 862a6f62b6f485f8e4249764b6bf734b1ed540bb
parent 487312 965ba34c145489d79d6816fa2e6258c5ef3b9d79
child 546465 4d6721f344e58a7951692c017be45a0d053603a9
push id46230
push userjdescottes@mozilla.com
push dateTue, 21 Feb 2017 16:22:23 +0000
reviewersgl
bugs1338298
milestone54.0a1
Bug 1338298 - use node reps to display grid containers in layout view;r=gl MozReview-Commit-ID: 4NYwebiTah8
devtools/client/inspector/inspector.xhtml
devtools/client/inspector/layout/components/GridItem.js
--- a/devtools/client/inspector/inspector.xhtml
+++ b/devtools/client/inspector/inspector.xhtml
@@ -18,16 +18,17 @@
   <link rel="stylesheet" href="chrome://devtools/skin/layout.css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/animationinspector.css"/>
   <link rel="stylesheet" href="resource://devtools/client/shared/components/sidebar-toggle.css"/>
   <link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/tabs.css"/>
   <link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/tabbar.css"/>
   <link rel="stylesheet" href="resource://devtools/client/inspector/components/inspector-tab-panel.css"/>
   <link rel="stylesheet" href="resource://devtools/client/shared/components/splitter/split-box.css"/>
   <link rel="stylesheet" href="resource://devtools/client/inspector/layout/components/Accordion.css"/>
+  <link rel="stylesheet" href="resource://devtools/client/shared/components/reps/reps.css"/>
 
   <script type="application/javascript;version=1.8"
           src="chrome://devtools/content/shared/theme-switching.js"></script>
   <script type="text/javascript">
     /* eslint-disable */
     var isInChrome = window.location.href.includes("chrome:");
     if (isInChrome) {
       var exports = {};
--- a/devtools/client/inspector/layout/components/GridItem.js
+++ b/devtools/client/inspector/layout/components/GridItem.js
@@ -1,18 +1,23 @@
 /* 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 {findDOMNode} = require("devtools/client/shared/vendor/react-dom");
 
+// Reps
+const { REPS } = require("devtools/client/shared/components/reps/load-reps");
+const Rep = createFactory(REPS.Rep);
+const ElementNode = REPS.ElementNode;
+
 const Types = require("../types");
 
 module.exports = createClass({
 
   displayName: "GridItem",
 
   propTypes: {
     grid: PropTypes.shape(Types.grid).isRequired,
@@ -55,49 +60,65 @@ module.exports = createClass({
     let {
       grid,
       onToggleGridHighlighter,
     } = this.props;
 
     onToggleGridHighlighter(grid.nodeFront);
   },
 
+  /**
+   * While waiting for a reps fix in https://github.com/devtools-html/reps/issues/92,
+   * translate nodeFront to a grip-like object that can be used with an ElementNode rep.
+   */
+  translateNodeFrontToGrip(nodeFront) {
+    let { attributes } = nodeFront;
+
+    // The main difference between NodeFront and grips is that attributes are treated as
+    // a map in grips and as an array in NodeFronts.
+    let attributesMap = {};
+    for (let {name, value} of attributes) {
+      attributesMap[name] = value;
+    }
+
+    return {
+      actor: nodeFront.actorID,
+      preview: {
+        attributes: attributesMap,
+        attributesLength: attributes.length,
+        // nodeName is already lowerCased in Node grips
+        nodeName: nodeFront.nodeName.toLowerCase(),
+        nodeType: nodeFront.nodeType,
+      }
+    };
+  },
+
   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,
         className: "grid-item",
       },
       dom.label(
         {},
         dom.input(
           {
             type: "checkbox",
             value: grid.id,
             checked: grid.highlighted,
             onChange: this.onGridCheckboxClick,
           }
         ),
-        gridName
+        Rep({
+          object: this.translateNodeFrontToGrip(nodeFront),
+          defaultRep: ElementNode,
+        })
       ),
       dom.div(
         {
           className: "grid-color-swatch",
           style: {
             backgroundColor: grid.color,
           },
           title: grid.color,