From 22a53ea7f97145b41255d05f7669494d4d6375bc Mon Sep 17 00:00:00 2001 From: Gabriel Luong Date: Tue, 30 Apr 2019 00:50:50 -0400 Subject: [PATCH] Bug 1468402 - Part 2: Indent the subgrids in the grid list. r=pbro Differential Revision: https://phabricator.services.mozilla.com/D29316 --- .../client/inspector/grids/components/GridItem.js | 35 ++++++++++++++++++++-- .../client/inspector/grids/components/GridList.js | 6 +++- devtools/client/inspector/grids/grid-inspector.js | 30 +++++++++++++++++-- devtools/client/inspector/grids/types.js | 9 ++++++ devtools/client/themes/layout.css | 9 +++++- 5 files changed, 81 insertions(+), 8 deletions(-) diff --git a/devtools/client/inspector/grids/components/GridItem.js b/devtools/client/inspector/grids/components/GridItem.js index 9e28b57da795..5638b717cb02 100644 --- a/devtools/client/inspector/grids/components/GridItem.js +++ b/devtools/client/inspector/grids/components/GridItem.js @@ -4,7 +4,7 @@ "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"); @@ -24,6 +24,7 @@ class GridItem extends PureComponent { 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, @@ -93,6 +94,33 @@ class GridItem extends PureComponent { 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, @@ -100,7 +128,7 @@ class GridItem extends PureComponent { onShowBoxModelHighlighterForNode, } = this.props; - return ( + return createElement(Fragment, null, dom.li({}, dom.label({}, dom.input( @@ -142,7 +170,8 @@ class GridItem extends PureComponent { }, grid.color ) - ) + ), + this.renderSubgrids() ); } } diff --git a/devtools/client/inspector/grids/components/GridList.js b/devtools/client/inspector/grids/components/GridList.js index f39b62ce8d24..6175ee811f1b 100644 --- a/devtools/client/inspector/grids/components/GridList.js +++ b/devtools/client/inspector/grids/components/GridList.js @@ -45,10 +45,14 @@ class GridList extends PureComponent { 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, diff --git a/devtools/client/inspector/grids/grid-inspector.js b/devtools/client/inspector/grids/grid-inspector.js index d28db52c0929..d0a5d480063f 100644 --- a/devtools/client/inspector/grids/grid-inspector.js +++ b/devtools/client/inspector/grids/grid-inspector.js @@ -318,8 +318,8 @@ class GridInspector { 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, @@ -327,14 +327,38 @@ class GridInspector { direction: grid.direction, gridFragments: grid.gridFragments, highlighted, + isSubgrid, nodeFront, + parentNodeActorID: null, + subgrids: [], writingMode: grid.writingMode, - }); + }; + + if (isSubgrid && + await this.inspector.target.actorHasMethod("domwalker", "getParentGridNode")) { + let parentGridNodeFront; + + try { + parentGridNodeFront = await this.walker.getParentGridNode(nodeFront); + } catch (e) { + // This call might fail if called asynchrously after the toolbox is finished + // closing. + 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. diff --git a/devtools/client/inspector/grids/types.js b/devtools/client/inspector/grids/types.js index 124ed7059316..e3e543a33a2a 100644 --- a/devtools/client/inspector/grids/types.js +++ b/devtools/client/inspector/grids/types.js @@ -29,9 +29,18 @@ exports.grid = { // 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, }; diff --git a/devtools/client/themes/layout.css b/devtools/client/themes/layout.css index e23760a82281..cbd51f73bcd9 100644 --- a/devtools/client/themes/layout.css +++ b/devtools/client/themes/layout.css @@ -38,6 +38,10 @@ * Common styles for the layout container */ +.layout-container ul { + list-style: none; +} + .layout-container li { padding: 3px 0; -moz-user-select: none; @@ -643,11 +647,14 @@ html[dir="rtl"] .flex-item-list .devtools-button::after { } .grid-container > ul { - list-style: none; margin: 0; padding: 0; } +#grid-list ul { + padding-inline-start: 20px; +} + /** * Grid Content */ -- 2.11.4.GIT