Bug 1495775 - Flex items should be highlighted when hovered over in the flex item list. r=pbro

devtools/client/inspector/flexbox/components/FlexItem.js

@@ -7,15 +7,11 @@
 const { 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");
+const { translateNodeFrontToGrip } = require("devtools/client/inspector/shared/utils");
 
-loader.lazyGetter(this, "Rep", function() {
+const { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
-  return require("devtools/client/shared/components/reps/reps").REPS.Rep;
+const { Rep } = REPS;
-});
+const ElementNode = REPS.ElementNode;
-loader.lazyGetter(this, "MODE", function() {
-  return require("devtools/client/shared/components/reps/reps").MODE;
-});
-
-loader.lazyRequireGetter(this, "translateNodeFrontToGrip", "devtools/client/inspector/shared/utils", true);
 
 const Types = require("../types");
 
@@ -23,22 +19,35 @@ class FlexItem extends PureComponent {
   static get propTypes() {
     return {
       flexItem: PropTypes.shape(Types.flexItem).isRequired,
+      onHideBoxModelHighlighter: PropTypes.func.isRequired,
+      onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
       setSelectedNode: PropTypes.func.isRequired,
     };
   }
 
   render() {
-    const { nodeFront } = this.props.flexItem;
+    const {
+      flexItem,
+      onHideBoxModelHighlighter,
+      onShowBoxModelHighlighterForNode,
+      setSelectedNode,
+    } = this.props;
+    const { nodeFront } = flexItem;
 
     return (
       dom.li({},
         dom.button(
           {
             className: "devtools-button devtools-monospace",
-            onClick: () => this.props.setSelectedNode(nodeFront),
+            onClick: () => {
+              setSelectedNode(nodeFront);
+              onHideBoxModelHighlighter();
+            },
+            onMouseOut: () => onHideBoxModelHighlighter(),
+            onMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
           },
           Rep({
-            defaultRep: Rep.ElementNode,
+            defaultRep: ElementNode,
             mode: MODE.TINY,
             object: translateNodeFrontToGrip(nodeFront),
           })

devtools/client/inspector/flexbox/components/FlexItemList.js

@@ -16,6 +16,8 @@ class FlexItemList extends PureComponent {
   static get propTypes() {
     return {
       flexItems: PropTypes.arrayOf(PropTypes.shape(Types.flexItem)).isRequired,
+      onHideBoxModelHighlighter: PropTypes.func.isRequired,
+      onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
       setSelectedNode: PropTypes.func.isRequired,
     };
   }
@@ -23,6 +25,8 @@ class FlexItemList extends PureComponent {
   render() {
     const {
       flexItems,
+      onHideBoxModelHighlighter,
+      onShowBoxModelHighlighterForNode,
       setSelectedNode,
     } = this.props;
 
@@ -32,6 +36,8 @@ class FlexItemList extends PureComponent {
         flexItems.map(flexItem => FlexItem({
           key: flexItem.actorID,
           flexItem,
+          onHideBoxModelHighlighter,
+          onShowBoxModelHighlighterForNode,
           setSelectedNode,
         }))
       )

devtools/client/inspector/flexbox/components/Flexbox.js

@@ -59,11 +59,17 @@ class Flexbox extends PureComponent {
   }
 
   renderFlexItemList() {
-    const { setSelectedNode } = this.props;
+    const {
+      onHideBoxModelHighlighter,
+      onShowBoxModelHighlighterForNode,
+      setSelectedNode,
+    } = this.props;
     const { flexItems } = this.props.flexContainer;
 
     return FlexItemList({
       flexItems,
+      onHideBoxModelHighlighter,
+      onShowBoxModelHighlighterForNode,
       setSelectedNode,
     });
   }