Bug 1468402 - Part 2: Indent the subgrids in the grid list. r=pbro
☠☠ backed out by 0647eae6a6e6 ☠ ☠
authorGabriel Luong <gabriel.luong@gmail.com>
Tue, 30 Apr 2019 00:50:50 -0400
changeset 532492 63f40ac370c63ec1aae568a569a25f768998b998
parent 532491 567911d83bda7ad05d88ce584e9a29000fdd4b52
child 532493 6685fd95730257d69b3e9169a1d84c7336a8ce74
push id11268
push usercsabou@mozilla.com
push dateTue, 14 May 2019 15:24:22 +0000
treeherdermozilla-beta@5fb7fcd568d6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1468402
milestone68.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 1468402 - Part 2: Indent the subgrids in the grid list. r=pbro Differential Revision: https://phabricator.services.mozilla.com/D29316
devtools/client/inspector/grids/components/GridItem.js
devtools/client/inspector/grids/components/GridList.js
devtools/client/inspector/grids/grid-inspector.js
devtools/client/inspector/grids/types.js
devtools/client/themes/layout.css
--- a/devtools/client/inspector/grids/components/GridItem.js
+++ b/devtools/client/inspector/grids/components/GridItem.js
@@ -1,15 +1,15 @@
 /* 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 { createRef, PureComponent } = require("devtools/client/shared/vendor/react");
+const { createElement, createRef, Fragment, PureComponent } = 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");
 
 loader.lazyGetter(this, "Rep", function() {
   return require("devtools/client/shared/components/reps/reps").REPS.Rep;
 });
 loader.lazyGetter(this, "MODE", function() {
   return require("devtools/client/shared/components/reps/reps").MODE;
@@ -19,16 +19,17 @@ loader.lazyRequireGetter(this, "translat
 
 const Types = require("../types");
 
 class GridItem extends PureComponent {
   static get propTypes() {
     return {
       getSwatchColorPickerTooltip: PropTypes.func.isRequired,
       grid: PropTypes.shape(Types.grid).isRequired,
+      grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
       onHideBoxModelHighlighter: PropTypes.func.isRequired,
       onSetGridOverlayColor: PropTypes.func.isRequired,
       onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
       onToggleGridHighlighter: PropTypes.func.isRequired,
       setSelectedNode: PropTypes.func.isRequired,
     };
   }
 
@@ -88,24 +89,51 @@ class GridItem extends PureComponent {
   }
 
   onGridInspectIconClick(nodeFront) {
     const { setSelectedNode } = this.props;
     setSelectedNode(nodeFront, { reason: "layout-panel" });
     nodeFront.scrollIntoView().catch(e => console.error(e));
   }
 
+  renderSubgrids() {
+    const { grid, grids } = this.props;
+
+    if (!grid.subgrids.length) {
+      return null;
+    }
+
+    const subgrids = grids.filter(g => grid.subgrids.includes(g.id));
+
+    return (
+      dom.ul({},
+        subgrids.map(g => {
+          return createElement(GridItem, {
+            getSwatchColorPickerTooltip: this.props.getSwatchColorPickerTooltip,
+            grid: g,
+            grids,
+            onHideBoxModelHighlighter: this.props.onHideBoxModelHighlighter,
+            onSetGridOverlayColor: this.props.onSetGridOverlayColor,
+            onShowBoxModelHighlighterForNode: this.props.onShowBoxModelHighlighterForNode,
+            onToggleGridHighlighter: this.props.onToggleGridHighlighter,
+            setSelectedNode: this.props.setSelectedNode,
+          });
+        })
+      )
+    );
+  }
+
   render() {
     const {
       grid,
       onHideBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
     } = this.props;
 
-    return (
+    return createElement(Fragment, null,
       dom.li({},
         dom.label({},
           dom.input(
             {
               checked: grid.highlighted,
               disabled: grid.disabled,
               type: "checkbox",
               value: grid.id,
@@ -137,14 +165,15 @@ class GridItem extends PureComponent {
         // requirement. See https://bugzilla.mozilla.org/show_bug.cgi?id=1341578
         dom.span(
           {
             className: "layout-color-value",
             ref: this.colorValueEl,
           },
           grid.color
         )
-      )
+      ),
+      this.renderSubgrids()
     );
   }
 }
 
 module.exports = GridItem;
--- a/devtools/client/inspector/grids/components/GridList.js
+++ b/devtools/client/inspector/grids/components/GridList.js
@@ -40,20 +40,24 @@ class GridList extends PureComponent {
     return (
       dom.div({ className: "grid-container" },
         dom.span({}, getStr("layout.overlayGrid")),
         dom.ul(
           {
             id: "grid-list",
             className: "devtools-monospace",
           },
-          grids.map(grid => GridItem({
+          grids
+          // Skip subgrids since they are rendered by their parent grids in GridItem.
+          .filter(grid => !grid.isSubgrid)
+          .map(grid => GridItem({
             key: grid.id,
             getSwatchColorPickerTooltip,
             grid,
+            grids,
             onHideBoxModelHighlighter,
             onSetGridOverlayColor,
             onShowBoxModelHighlighterForNode,
             onToggleGridHighlighter,
             setSelectedNode,
           }))
         )
       )
--- a/devtools/client/inspector/grids/grid-inspector.js
+++ b/devtools/client/inspector/grids/grid-inspector.js
@@ -313,33 +313,51 @@ class GridInspector {
 
       const colorForHost = customColors[hostname] ? customColors[hostname][i] : null;
       const fallbackColor = GRID_COLORS[i % GRID_COLORS.length];
       const color = this.getInitialGridColor(nodeFront, colorForHost, fallbackColor);
       const highlighted = this.highlighters.gridHighlighters.has(nodeFront);
       const disabled = !highlighted &&
                        this.maxHighlighters > 1 &&
                        this.highlighters.gridHighlighters.size === this.maxHighlighters;
-
-      grids.push({
+      const isSubgrid = grid.isSubgrid;
+      const gridData = {
         id: i,
         actorID: grid.actorID,
         color,
         disabled,
         direction: grid.direction,
         gridFragments: grid.gridFragments,
         highlighted,
+        isSubgrid,
         nodeFront,
+        parentNodeActorID: null,
+        subgrids: [],
         writingMode: grid.writingMode,
-      });
+      };
+
+      if (isSubgrid) {
+        const parentGridNodeFront = await grid.getParentGridNode(this.walker);
+        if (!parentGridNodeFront) {
+          return;
+        }
+
+        const parentIndex = grids.findIndex(g =>
+          g.nodeFront.actorID === parentGridNodeFront.actorID);
+        gridData.parentNodeActorID = parentGridNodeFront.actorID;
+        grids[parentIndex].subgrids.push(gridData.id);
+      }
+
+      grids.push(gridData);
     }
 
     this.store.dispatch(updateGrids(grids));
     this.inspector.emit("grid-panel-updated");
   }
+
   /**
    * Handler for "grid-highlighter-shown" events emitted from the
    * HighlightersOverlay. Passes nodefront and event name to handleHighlighterChange.
    * Required since on and off events need the same reference object.
    *
    * @param  {NodeFront} nodeFront
    *         The NodeFront of the grid container element for which the grid
    *         highlighter is shown for.
--- a/devtools/client/inspector/grids/types.js
+++ b/devtools/client/inspector/grids/types.js
@@ -24,19 +24,28 @@ exports.grid = {
   disabled: PropTypes.bool,
 
   // The grid fragment object of the grid container
   gridFragments: PropTypes.array,
 
   // Whether or not the grid highlighter is highlighting the grid
   highlighted: PropTypes.bool,
 
+  // Whether or not the grid is a subgrid
+  isSubgrid: PropTypes.bool,
+
   // The node front of the grid container
   nodeFront: PropTypes.object,
 
+  // If the grid is a subgrid, this references the parent node front actor ID
+  parentNodeActorID: PropTypes.string,
+
+  // Array of ids belonging to the subgrid within the grid container
+  subgrids: PropTypes.arrayOf(PropTypes.number),
+
   // The writing mode of the grid container
   writingMode: PropTypes.string,
 };
 
 /**
  * The grid highlighter settings on what to display in its grid overlay in the document.
  */
 exports.highlighterSettings = {
--- a/devtools/client/themes/layout.css
+++ b/devtools/client/themes/layout.css
@@ -33,16 +33,20 @@
   text-overflow: ellipsis;
   overflow: hidden;
 }
 
 /**
  * Common styles for the layout container
  */
 
+.layout-container ul {
+  list-style: none;
+}
+
 .layout-container li {
   padding: 3px 0;
   -moz-user-select: none;
 }
 
 .layout-container input {
   margin-inline-end: 7px;
   vertical-align: middle;
@@ -638,21 +642,24 @@ html[dir="rtl"] .flex-item-list .devtool
 
 .grid-container > span {
   font-weight: 600;
   margin-bottom: 5px;
   pointer-events: none;
 }
 
 .grid-container > ul {
-  list-style: none;
   margin: 0;
   padding: 0;
 }
 
+#grid-list ul {
+  padding-inline-start: 20px;
+}
+
 /**
  * Grid Content
  */
 
 .grid-content {
   display: flex;
   flex-wrap: wrap;
   flex: 1;