Bug 1338298 - part2: highlight node on mouseover in grid listing;r=gl draft
authorJulian Descottes <jdescottes@mozilla.com>
Fri, 24 Feb 2017 10:36:47 +0100
changeset 489214 5d2a2eaa6c1ebc7118d856ea9db6e3a273397809
parent 489213 8b8a5c7ff33956d3f4a8fbcd11701c0b0d97ab94
child 489215 fd35d84857e84ba672ac16367d2548cd4ffbd0d0
push id46759
push userjdescottes@mozilla.com
push dateFri, 24 Feb 2017 11:53:48 +0000
reviewersgl
bugs1338298
milestone54.0a1
Bug 1338298 - part2: highlight node on mouseover in grid listing;r=gl MozReview-Commit-ID: 6uhDhv4lTe3
devtools/client/inspector/layout/components/Grid.js
devtools/client/inspector/layout/components/GridItem.js
devtools/client/inspector/layout/components/GridList.js
devtools/client/inspector/layout/layout.js
--- a/devtools/client/inspector/layout/components/Grid.js
+++ b/devtools/client/inspector/layout/components/Grid.js
@@ -16,44 +16,50 @@ const { getStr } = require("../utils/l10
 module.exports = createClass({
 
   displayName: "Grid",
 
   propTypes: {
     getSwatchColorPickerTooltip: PropTypes.func.isRequired,
     grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
     highlighterSettings: PropTypes.shape(Types.highlighterSettings).isRequired,
+    onHideBoxModelHighlighter: PropTypes.func.isRequired,
     onSetGridOverlayColor: PropTypes.func.isRequired,
+    onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
     onToggleGridHighlighter: PropTypes.func.isRequired,
     onToggleShowGridLineNumbers: PropTypes.func.isRequired,
     onToggleShowInfiniteLines: PropTypes.func.isRequired,
   },
 
   mixins: [ addons.PureRenderMixin ],
 
   render() {
     let {
       getSwatchColorPickerTooltip,
       grids,
       highlighterSettings,
+      onHideBoxModelHighlighter,
       onSetGridOverlayColor,
+      onShowBoxModelHighlighterForNode,
       onToggleGridHighlighter,
       onToggleShowGridLineNumbers,
       onToggleShowInfiniteLines,
     } = this.props;
 
     return grids.length ?
       dom.div(
         {
           id: "layout-grid-container",
         },
         GridList({
           getSwatchColorPickerTooltip,
           grids,
+          onHideBoxModelHighlighter,
           onSetGridOverlayColor,
+          onShowBoxModelHighlighterForNode,
           onToggleGridHighlighter,
         }),
         GridDisplaySettings({
           highlighterSettings,
           onToggleShowGridLineNumbers,
           onToggleShowInfiniteLines,
         })
       )
--- a/devtools/client/inspector/layout/components/GridItem.js
+++ b/devtools/client/inspector/layout/components/GridItem.js
@@ -16,17 +16,19 @@ const Types = require("../types");
 
 module.exports = createClass({
 
   displayName: "GridItem",
 
   propTypes: {
     getSwatchColorPickerTooltip: PropTypes.func.isRequired,
     grid: PropTypes.shape(Types.grid).isRequired,
+    onHideBoxModelHighlighter: PropTypes.func.isRequired,
     onSetGridOverlayColor: PropTypes.func.isRequired,
+    onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
     onToggleGridHighlighter: PropTypes.func.isRequired,
   },
 
   mixins: [ addons.PureRenderMixin ],
 
   componentDidMount() {
     let tooltip = this.props.getSwatchColorPickerTooltip();
     let swatchEl = findDOMNode(this).querySelector(".grid-color-swatch");
@@ -90,17 +92,21 @@ module.exports = createClass({
       grid,
       onToggleGridHighlighter,
     } = this.props;
 
     onToggleGridHighlighter(grid.nodeFront);
   },
 
   render() {
-    let { grid } = this.props;
+    let {
+      grid,
+      onHideBoxModelHighlighter,
+      onShowBoxModelHighlighterForNode,
+    } = this.props;
     let { nodeFront } = grid;
 
     return dom.li(
       {
         key: grid.id,
         className: "grid-item",
       },
       dom.label(
@@ -108,20 +114,24 @@ module.exports = createClass({
         dom.input(
           {
             type: "checkbox",
             value: grid.id,
             checked: grid.highlighted,
             onChange: this.onGridCheckboxClick,
           }
         ),
-        Rep({
-          defaultRep: ElementNode,
-          object: this.translateNodeFrontToGrip(nodeFront),
-        })
+        Rep(
+          {
+            defaultRep: ElementNode,
+            object: this.translateNodeFrontToGrip(nodeFront),
+            onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
+            onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
+          }
+        )
       ),
       dom.div(
         {
           className: "grid-color-swatch",
           style: {
             backgroundColor: grid.color,
           },
           title: grid.color,
--- a/devtools/client/inspector/layout/components/GridList.js
+++ b/devtools/client/inspector/layout/components/GridList.js
@@ -14,43 +14,49 @@ const { getStr } = require("../utils/l10
 
 module.exports = createClass({
 
   displayName: "GridList",
 
   propTypes: {
     getSwatchColorPickerTooltip: PropTypes.func.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,
   },
 
   mixins: [ addons.PureRenderMixin ],
 
   render() {
     let {
       getSwatchColorPickerTooltip,
       grids,
+      onHideBoxModelHighlighter,
       onSetGridOverlayColor,
+      onShowBoxModelHighlighterForNode,
       onToggleGridHighlighter,
     } = this.props;
 
     return dom.div(
       {
         className: "grid-container",
       },
       dom.span(
         {},
         getStr("layout.overlayGrid")
       ),
       dom.ul(
         {},
         grids.map(grid => GridItem({
           getSwatchColorPickerTooltip,
           grid,
+          onHideBoxModelHighlighter,
           onSetGridOverlayColor,
+          onShowBoxModelHighlighterForNode,
           onToggleGridHighlighter,
         }))
       )
     );
   },
 
 });
--- a/devtools/client/inspector/layout/layout.js
+++ b/devtools/client/inspector/layout/layout.js
@@ -101,18 +101,16 @@ LayoutView.prototype = {
 
       /**
        * Shows the box model properties under the box model if true, otherwise, hidden by
        * default.
        */
       showBoxModelProperties: true,
 
       onHideBoxModelHighlighter,
-      onShowBoxModelEditor,
-      onShowBoxModelHighlighter,
 
       /**
        * Handler for a change in the grid overlay color picker for a grid container.
        *
        * @param  {NodeFront} node
        *         The NodeFront of the grid container element for which the grid color is
        *         being updated.
        * @param  {String} color
@@ -127,16 +125,33 @@ LayoutView.prototype = {
         for (let grid of grids) {
           if (grid.nodeFront === node && grid.highlighted) {
             let highlighterSettings = this.getGridHighlighterSettings(node);
             this.highlighters.showGridHighlighter(node, highlighterSettings);
           }
         }
       },
 
+      onShowBoxModelEditor,
+      onShowBoxModelHighlighter,
+
+     /**
+       * Shows the box-model highlighter on the element corresponding to the provided
+       * NodeFront.
+       *
+       * @param  {NodeFront} nodeFront
+       *         The node to highlight.
+       * @param  {Object} options
+       *         Options passed to the highlighter actor.
+       */
+      onShowBoxModelHighlighterForNode: (nodeFront, options) => {
+        let toolbox = this.inspector.toolbox;
+        toolbox.highlighterUtils.highlightNodeFront(nodeFront, options);
+      },
+
       /**
        * Handler for a change in the input checkboxes in the GridList component.
        * Toggles on/off the grid highlighter for the provided grid container element.
        *
        * @param  {NodeFront} node
        *         The NodeFront of the grid container element for which the grid
        *         highlighter is toggled on/off for.
        */