Bug 1623906 - [devtools] Dispatch thunks from Grid panel React components to show/hide the Box Model Highlighter r=gl

Depends on D95035

This patch is using the approach introduced in D79556 to dispatch thunks (functions) to the Redux store to show/hide the box model highlighter from individual React components instead of passing down the methods through deeply nested trees of components that don't use them.

The Redux `dispatch()` method is passed down via the component tree instead. This enables further usage of dispatching thunks for other scenarios avoiding prop drilling.
The `showBoxModelHighlighterForNode` and `hideBoxModelHighlighter` props and methods are removed in favor of the corresponding thunks.

Differential Revision: https://phabricator.services.mozilla.com/D95036

devtools/client/inspector/grids/components/Grid.js

@@ -36,13 +36,12 @@ const Types = require("devtools/client/inspector/grids/types");
 class Grid extends PureComponent {
   static get propTypes() {
     return {
+      dispatch: PropTypes.func.isRequired,
       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,
       onShowGridOutlineHighlight: PropTypes.func.isRequired,
       onToggleGridHighlighter: PropTypes.func.isRequired,
       onToggleShowGridAreas: PropTypes.func.isRequired,
@@ -61,12 +60,11 @@ class Grid extends PureComponent {
     }
 
     const {
+      dispatch,
       getSwatchColorPickerTooltip,
       grids,
       highlighterSettings,
-      onHideBoxModelHighlighter,
       onSetGridOverlayColor,
-      onShowBoxModelHighlighterForNode,
       onShowGridOutlineHighlight,
       onToggleShowGridAreas,
       onToggleGridHighlighter,
@@ -81,11 +79,10 @@ class Grid extends PureComponent {
       dom.div(
         { className: "grid-content" },
         GridList({
+          dispatch,
           getSwatchColorPickerTooltip,
           grids,
-          onHideBoxModelHighlighter,
           onSetGridOverlayColor,
-          onShowBoxModelHighlighterForNode,
           onToggleGridHighlighter,
           setSelectedNode,
         }),

devtools/client/inspector/grids/components/GridItem.js

@@ -29,15 +29,19 @@ loader.lazyRequireGetter(
 
 const Types = require("devtools/client/inspector/grids/types");
 
+const {
+  highlightNode,
+  unhighlightNode,
+} = require("devtools/client/inspector/boxmodel/actions/box-model-highlighter");
+
 class GridItem extends PureComponent {
   static get propTypes() {
     return {
+      dispatch: PropTypes.func.isRequired,
       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,
     };
@@ -107,13 +111,11 @@ class GridItem extends PureComponent {
       subgrids.map(g => {
         return createElement(GridItem, {
           key: g.id,
+          dispatch: this.props.dispatch,
           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,
         });
@@ -122,11 +124,7 @@ class GridItem extends PureComponent {
   }
 
   render() {
-    const {
-      grid,
-      onHideBoxModelHighlighter,
-      onShowBoxModelHighlighterForNode,
-    } = this.props;
+    const { dispatch, grid } = this.props;
 
     return createElement(
       Fragment,
@@ -146,9 +144,8 @@ class GridItem extends PureComponent {
             defaultRep: Rep.ElementNode,
             mode: MODE.TINY,
             object: translateNodeFrontToGrip(grid.nodeFront),
-            onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
-            onDOMNodeMouseOver: () =>
-              onShowBoxModelHighlighterForNode(grid.nodeFront),
+            onDOMNodeMouseOut: () => dispatch(unhighlightNode()),
+            onDOMNodeMouseOver: () => dispatch(highlightNode(grid.nodeFront)),
             onInspectIconClick: (_, e) => {
               // Stoping click propagation to avoid firing onGridCheckboxClick()
               e.stopPropagation();

devtools/client/inspector/grids/components/GridList.js

@@ -21,11 +21,10 @@ const Types = require("devtools/client/inspector/grids/types");
 class GridList extends PureComponent {
   static get propTypes() {
     return {
+      dispatch: PropTypes.func.isRequired,
       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,
       setSelectedNode: PropTypes.func.isRequired,
     };
@@ -33,11 +32,10 @@ class GridList extends PureComponent {
 
   render() {
     const {
+      dispatch,
       getSwatchColorPickerTooltip,
       grids,
-      onHideBoxModelHighlighter,
       onSetGridOverlayColor,
-      onShowBoxModelHighlighterForNode,
       onToggleGridHighlighter,
       setSelectedNode,
     } = this.props;
@@ -61,13 +59,12 @@ class GridList extends PureComponent {
           .filter(grid => !grid.isSubgrid)
           .map(grid =>
             GridItem({
+              dispatch,
               key: grid.id,
               getSwatchColorPickerTooltip,
               grid,
               grids,
-              onHideBoxModelHighlighter,
               onSetGridOverlayColor,
-              onShowBoxModelHighlighterForNode,
               onToggleGridHighlighter,
               setSelectedNode,
             })

devtools/client/inspector/inspector.js

@@ -176,9 +176,6 @@ function Inspector(toolbox) {
   this.onPickerCanceled = this.onPickerCanceled.bind(this);
   this.onPickerHovered = this.onPickerHovered.bind(this);
   this.onPickerPicked = this.onPickerPicked.bind(this);
-  this.onShowBoxModelHighlighterForNode = this.onShowBoxModelHighlighterForNode.bind(
-    this
-  );
   this.onSidebarHidden = this.onSidebarHidden.bind(this);
   this.onSidebarResized = this.onSidebarResized.bind(this);
   this.onSidebarSelect = this.onSidebarSelect.bind(this);
@@ -1924,38 +1921,14 @@ Inspector.prototype = {
   },
 
   /**
-   * Returns an object containing the shared handler functions used in the box
-   * model and grid React components.
+   * Returns an object containing the shared handler functions used in React components.
    */
   getCommonComponentProps() {
     return {
       setSelectedNode: this.selection.setNodeFront,
-      onShowBoxModelHighlighterForNode: this.onShowBoxModelHighlighterForNode,
     };
   },
 
-  /**
-   * 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) {
-    // As React components aren't destroyed when the panel closes,
-    // this function may still be called and throw because of destroyed fronts.
-    if (this._destroyed) {
-      return;
-    }
-    this.highlighters.showHighlighterTypeForNode(
-      this.highlighters.TYPES.BOXMODEL,
-      nodeFront,
-      options
-    );
-  },
-
   onPickerCanceled() {
     this.highlighters.hideHighlighterType(this.highlighters.TYPES.BOXMODEL);
   },

devtools/client/inspector/layout/components/LayoutApp.js

@@ -61,7 +61,6 @@ class LayoutApp extends PureComponent {
       onSetFlexboxOverlayColor: PropTypes.func.isRequired,
       onSetGridOverlayColor: PropTypes.func.isRequired,
       onShowBoxModelEditor: PropTypes.func.isRequired,
-      onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
       onShowGridOutlineHighlight: PropTypes.func.isRequired,
       onToggleFlexboxHighlighter: PropTypes.func.isRequired,
       onToggleGeometryEditor: PropTypes.func.isRequired,

devtools/client/inspector/layout/layout.js

@@ -41,10 +41,7 @@ class LayoutView {
       return;
     }
 
-    const {
-      onShowBoxModelHighlighterForNode,
-      setSelectedNode,
-    } = this.inspector.getCommonComponentProps();
+    const { setSelectedNode } = this.inspector.getCommonComponentProps();
 
     const {
       onShowBoxModelEditor,
@@ -79,7 +76,6 @@ class LayoutView {
       onSetFlexboxOverlayColor,
       onSetGridOverlayColor,
       onShowBoxModelEditor,
-      onShowBoxModelHighlighterForNode,
       onShowRulePreviewTooltip,
       onShowGridOutlineHighlight,
       onToggleFlexboxHighlighter,