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

Depends on D95033

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/D95034

devtools/client/inspector/compatibility/CompatibilityView.js

@@ -74,17 +74,8 @@ class CompatibilityView {
   }
 
   async _init() {
-    const {
-      onShowBoxModelHighlighterForNode: showBoxModelHighlighterForNode,
-      setSelectedNode,
-    } = this.inspector.getCommonComponentProps();
-    const {
-      onHideBoxModelHighlighter: hideBoxModelHighlighter,
-    } = this.inspector.getPanel("boxmodel").getComponentProps();
-
+    const { setSelectedNode } = this.inspector.getCommonComponentProps();
     const compatibilityApp = new CompatibilityApp({
-      hideBoxModelHighlighter,
-      showBoxModelHighlighterForNode,
       setSelectedNode,
     });
 

devtools/client/inspector/compatibility/components/CompatibilityApp.js

@@ -32,6 +32,7 @@ const Settings = createFactory(
 class CompatibilityApp extends PureComponent {
   static get propTypes() {
     return {
+      dispatch: PropTypes.func.isRequired,
       // getString prop is injected by the withLocalization wrapper
       getString: PropTypes.func.isRequired,
       isSettingsVisibile: PropTypes.bool.isRequired,
@@ -40,22 +41,19 @@ class CompatibilityApp extends PureComponent {
         .isRequired,
       topLevelTargetIssues: PropTypes.arrayOf(PropTypes.shape(Types.issue))
         .isRequired,
-      hideBoxModelHighlighter: PropTypes.func.isRequired,
       setSelectedNode: PropTypes.func.isRequired,
-      showBoxModelHighlighterForNode: PropTypes.func.isRequired,
     };
   }
 
   render() {
     const {
+      dispatch,
       getString,
       isSettingsVisibile,
       isTopLevelTargetProcessing,
       selectedNodeIssues,
       topLevelTargetIssues,
-      hideBoxModelHighlighter,
       setSelectedNode,
-      showBoxModelHighlighterForNode,
     } = this.props;
 
     const selectedNodeIssuePane = IssuePane({
@@ -65,10 +63,9 @@ class CompatibilityApp extends PureComponent {
     const topLevelTargetIssuePane =
       topLevelTargetIssues.length > 0 || !isTopLevelTargetProcessing
         ? IssuePane({
+            dispatch,
             issues: topLevelTargetIssues,
-            hideBoxModelHighlighter,
             setSelectedNode,
-            showBoxModelHighlighterForNode,
           })
         : null;
 

devtools/client/inspector/compatibility/components/IssueItem.js

@@ -44,9 +44,8 @@ class IssueItem extends PureComponent {
   static get propTypes() {
     return {
       ...Types.issue,
-      hideBoxModelHighlighter: PropTypes.func.isRequired,
+      dispatch: PropTypes.func.isRequired,
       setSelectedNode: PropTypes.func.isRequired,
-      showBoxModelHighlighterForNode: PropTypes.func.isRequired,
     };
   }
 
@@ -172,23 +171,16 @@ class IssueItem extends PureComponent {
   }
 
   _renderNodeList() {
-    const { nodes } = this.props;
+    const { dispatch, nodes, setSelectedNode } = this.props;
 
     if (!nodes) {
       return null;
     }
 
-    const {
-      hideBoxModelHighlighter,
-      setSelectedNode,
-      showBoxModelHighlighterForNode,
-    } = this.props;
-
     return NodePane({
+      dispatch,
       nodes,
-      hideBoxModelHighlighter,
       setSelectedNode,
-      showBoxModelHighlighterForNode,
     });
   }
 

devtools/client/inspector/compatibility/components/IssueList.js

@@ -20,29 +20,22 @@ const IssueItem = createFactory(
 class IssueList extends PureComponent {
   static get propTypes() {
     return {
+      dispatch: PropTypes.func.isRequired,
       issues: PropTypes.arrayOf(PropTypes.shape(Types.issue)).isRequired,
-      hideBoxModelHighlighter: PropTypes.func.isRequired,
       setSelectedNode: PropTypes.func.isRequired,
-      showBoxModelHighlighterForNode: PropTypes.func.isRequired,
     };
   }
 
   render() {
-    const {
-      issues,
-      hideBoxModelHighlighter,
-      setSelectedNode,
-      showBoxModelHighlighterForNode,
-    } = this.props;
+    const { dispatch, issues, setSelectedNode } = this.props;
 
     return dom.ul(
       { className: "compatibility-issue-list" },
       issues.map(issue =>
         IssueItem({
           ...issue,
-          hideBoxModelHighlighter,
+          dispatch,
           setSelectedNode,
-          showBoxModelHighlighterForNode,
         })
       )
     );

devtools/client/inspector/compatibility/components/IssuePane.js

@@ -23,10 +23,9 @@ const IssueList = createFactory(
 class IssuePane extends PureComponent {
   static get propTypes() {
     return {
+      dispatch: PropTypes.func.isRequired,
       issues: PropTypes.arrayOf(PropTypes.shape(Types.issue)).isRequired,
-      hideBoxModelHighlighter: PropTypes.func.isRequired,
       setSelectedNode: PropTypes.func.isRequired,
-      showBoxModelHighlighterForNode: PropTypes.func.isRequired,
     };
   }
 
@@ -41,19 +40,13 @@ class IssuePane extends PureComponent {
   }
 
   render() {
-    const {
-      issues,
-      hideBoxModelHighlighter,
-      setSelectedNode,
-      showBoxModelHighlighterForNode,
-    } = this.props;
+    const { dispatch, issues, setSelectedNode } = this.props;
 
     return issues.length
       ? IssueList({
+          dispatch,
           issues,
-          hideBoxModelHighlighter,
           setSelectedNode,
-          showBoxModelHighlighterForNode,
         })
       : this._renderNoIssues();
   }

devtools/client/inspector/compatibility/components/NodeItem.js

@@ -17,23 +17,22 @@ const ElementNode = REPS.ElementNode;
 
 const Types = require("devtools/client/inspector/compatibility/types");
 
+const {
+  highlightNode,
+  unhighlightNode,
+} = require("devtools/client/inspector/boxmodel/actions/box-model-highlighter");
+
 class NodeItem extends PureComponent {
   static get propTypes() {
     return {
+      dispatch: PropTypes.func.isRequired,
       node: Types.node.isRequired,
-      hideBoxModelHighlighter: PropTypes.func.isRequired,
       setSelectedNode: PropTypes.func.isRequired,
-      showBoxModelHighlighterForNode: PropTypes.func.isRequired,
     };
   }
 
   render() {
-    const {
-      node,
-      hideBoxModelHighlighter,
-      setSelectedNode,
-      showBoxModelHighlighterForNode,
-    } = this.props;
+    const { dispatch, node, setSelectedNode } = this.props;
 
     return dom.li(
       { className: "compatibility-node-item" },
@@ -43,10 +42,10 @@ class NodeItem extends PureComponent {
         object: translateNodeFrontToGrip(node),
         onDOMNodeClick: () => {
           setSelectedNode(node);
-          hideBoxModelHighlighter();
+          dispatch(unhighlightNode());
         },
-        onDOMNodeMouseOut: () => hideBoxModelHighlighter(),
-        onDOMNodeMouseOver: () => showBoxModelHighlighterForNode(node),
+        onDOMNodeMouseOut: () => dispatch(unhighlightNode()),
+        onDOMNodeMouseOver: () => dispatch(highlightNode(node)),
       })
     );
   }

devtools/client/inspector/compatibility/components/NodeList.js

@@ -20,29 +20,22 @@ const NodeItem = createFactory(
 class NodeList extends PureComponent {
   static get propTypes() {
     return {
+      dispatch: PropTypes.func.isRequired,
       nodes: PropTypes.arrayOf(Types.node).isRequired,
-      hideBoxModelHighlighter: PropTypes.func.isRequired,
       setSelectedNode: PropTypes.func.isRequired,
-      showBoxModelHighlighterForNode: PropTypes.func.isRequired,
     };
   }
 
   render() {
-    const {
-      nodes,
-      hideBoxModelHighlighter,
-      setSelectedNode,
-      showBoxModelHighlighterForNode,
-    } = this.props;
+    const { dispatch, nodes, setSelectedNode } = this.props;
 
     return dom.ul(
       { className: "compatibility-node-list" },
       nodes.map(node =>
         NodeItem({
+          dispatch,
           node,
-          hideBoxModelHighlighter,
           setSelectedNode,
-          showBoxModelHighlighterForNode,
         })
       )
     );

devtools/client/inspector/compatibility/components/NodePane.js

@@ -23,10 +23,9 @@ const NodeList = createFactory(
 class NodePane extends PureComponent {
   static get propTypes() {
     return {
+      dispatch: PropTypes.func.isRequired,
       nodes: PropTypes.arrayOf(Types.node).isRequired,
-      hideBoxModelHighlighter: PropTypes.func.isRequired,
       setSelectedNode: PropTypes.func.isRequired,
-      showBoxModelHighlighterForNode: PropTypes.func.isRequired,
     };
   }