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

Depends on D95034

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

devtools/client/inspector/animation/animation.js

@@ -86,14 +86,6 @@ class AnimationInspector {
   }
 
   initComponents() {
-    const {
-      onShowBoxModelHighlighterForNode,
-    } = this.inspector.getCommonComponentProps();
-
-    const { onHideBoxModelHighlighter } = this.inspector
-      .getPanel("boxmodel")
-      .getComponentProps();
-
     const {
       addAnimationsCurrentTimeListener,
       emitForTests: emitEventForTest,
@@ -137,8 +129,6 @@ class AnimationInspector {
         getComputedStyle,
         getNodeFromActor,
         isAnimationsRunning,
-        onHideBoxModelHighlighter,
-        onShowBoxModelHighlighterForNode,
         removeAnimationsCurrentTimeListener,
         rewindAnimationsCurrentTime,
         selectAnimation,

devtools/client/inspector/animation/components/AnimationItem.js

@@ -23,11 +23,10 @@ class AnimationItem extends Component {
   static get propTypes() {
     return {
       animation: PropTypes.object.isRequired,
+      dispatch: PropTypes.func.isRequired,
       emitEventForTest: PropTypes.func.isRequired,
       getAnimatedPropertyMap: PropTypes.func.isRequired,
       getNodeFromActor: PropTypes.func.isRequired,
-      onHideBoxModelHighlighter: PropTypes.func.isRequired,
-      onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
       selectAnimation: PropTypes.func.isRequired,
       selectedAnimation: PropTypes.object.isRequired,
       setHighlightedNode: PropTypes.func.isRequired,
@@ -69,11 +68,10 @@ class AnimationItem extends Component {
   render() {
     const {
       animation,
+      dispatch,
       emitEventForTest,
       getAnimatedPropertyMap,
       getNodeFromActor,
-      onHideBoxModelHighlighter,
-      onShowBoxModelHighlighterForNode,
       selectAnimation,
       setHighlightedNode,
       setSelectedNode,
@@ -90,10 +88,9 @@ class AnimationItem extends Component {
       },
       AnimationTarget({
         animation,
+        dispatch,
         emitEventForTest,
         getNodeFromActor,
-        onHideBoxModelHighlighter,
-        onShowBoxModelHighlighterForNode,
         setHighlightedNode,
         setSelectedNode,
       }),

devtools/client/inspector/animation/components/AnimationList.js

@@ -19,11 +19,10 @@ class AnimationList extends PureComponent {
   static get propTypes() {
     return {
       animations: PropTypes.arrayOf(PropTypes.object).isRequired,
+      dispatch: PropTypes.func.isRequired,
       emitEventForTest: PropTypes.func.isRequired,
       getAnimatedPropertyMap: PropTypes.func.isRequired,
       getNodeFromActor: PropTypes.func.isRequired,
-      onHideBoxModelHighlighter: PropTypes.func.isRequired,
-      onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
       selectAnimation: PropTypes.func.isRequired,
       setHighlightedNode: PropTypes.func.isRequired,
       setSelectedNode: PropTypes.func.isRequired,
@@ -35,11 +34,10 @@ class AnimationList extends PureComponent {
   render() {
     const {
       animations,
+      dispatch,
       emitEventForTest,
       getAnimatedPropertyMap,
       getNodeFromActor,
-      onHideBoxModelHighlighter,
-      onShowBoxModelHighlighterForNode,
       selectAnimation,
       setHighlightedNode,
       setSelectedNode,
@@ -54,11 +52,10 @@ class AnimationList extends PureComponent {
       animations.map(animation =>
         AnimationItem({
           animation,
+          dispatch,
           emitEventForTest,
           getAnimatedPropertyMap,
           getNodeFromActor,
-          onHideBoxModelHighlighter,
-          onShowBoxModelHighlighterForNode,
           selectAnimation,
           setHighlightedNode,
           setSelectedNode,

devtools/client/inspector/animation/components/AnimationListContainer.js

@@ -37,11 +37,10 @@ class AnimationListContainer extends PureComponent {
       addAnimationsCurrentTimeListener: PropTypes.func.isRequired,
       animations: PropTypes.arrayOf(PropTypes.object).isRequired,
       direction: PropTypes.string.isRequired,
+      dispatch: PropTypes.func.isRequired,
       emitEventForTest: PropTypes.func.isRequired,
       getAnimatedPropertyMap: PropTypes.func.isRequired,
       getNodeFromActor: PropTypes.func.isRequired,
-      onHideBoxModelHighlighter: PropTypes.func.isRequired,
-      onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
       removeAnimationsCurrentTimeListener: PropTypes.func.isRequired,
       selectAnimation: PropTypes.func.isRequired,
       setAnimationsCurrentTime: PropTypes.func.isRequired,
@@ -121,11 +120,10 @@ class AnimationListContainer extends PureComponent {
       addAnimationsCurrentTimeListener,
       animations,
       direction,
+      dispatch,
       emitEventForTest,
       getAnimatedPropertyMap,
       getNodeFromActor,
-      onHideBoxModelHighlighter,
-      onShowBoxModelHighlighterForNode,
       removeAnimationsCurrentTimeListener,
       selectAnimation,
       setAnimationsCurrentTime,
@@ -150,11 +148,10 @@ class AnimationListContainer extends PureComponent {
         }),
         list: AnimationList({
           animations,
+          dispatch,
           emitEventForTest,
           getAnimatedPropertyMap,
           getNodeFromActor,
-          onHideBoxModelHighlighter,
-          onShowBoxModelHighlighterForNode,
           selectAnimation,
           setHighlightedNode,
           setSelectedNode,

devtools/client/inspector/animation/components/AnimationTarget.js

@@ -20,15 +20,19 @@ const {
   getInspectorStr,
 } = require("devtools/client/inspector/animation/utils/l10n");
 
+const {
+  highlightNode,
+  unhighlightNode,
+} = require("devtools/client/inspector/boxmodel/actions/box-model-highlighter");
+
 class AnimationTarget extends Component {
   static get propTypes() {
     return {
       animation: PropTypes.object.isRequired,
+      dispatch: PropTypes.func.isRequired,
       emitEventForTest: PropTypes.func.isRequired,
       getNodeFromActor: PropTypes.func.isRequired,
       highlightedNode: PropTypes.string.isRequired,
-      onHideBoxModelHighlighter: PropTypes.func.isRequired,
-      onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
       setHighlightedNode: PropTypes.func.isRequired,
       setSelectedNode: PropTypes.func.isRequired,
     };
@@ -94,10 +98,12 @@ class AnimationTarget extends Component {
     await this.ensureNodeFront();
 
     if (this.state.nodeFront) {
-      this.props.onShowBoxModelHighlighterForNode(this.state.nodeFront, {
-        hideInfoBar: true,
-        hideGuides: true,
-      });
+      this.props.dispatch(
+        highlightNode(this.state.nodeFront, {
+          hideInfoBar: true,
+          hideGuides: true,
+        })
+      );
     }
   }
 
@@ -112,7 +118,7 @@ class AnimationTarget extends Component {
   render() {
     const {
       emitEventForTest,
-      onHideBoxModelHighlighter,
+      dispatch,
       highlightedNode,
       setHighlightedNode,
     } = this.props;
@@ -143,7 +149,7 @@ class AnimationTarget extends Component {
         onDOMNodeClick: () => this.select(),
         onDOMNodeMouseOut: () => {
           if (!isHighlighted) {
-            onHideBoxModelHighlighter();
+            dispatch(unhighlightNode());
           }
         },
         onDOMNodeMouseOver: () => {
@@ -156,7 +162,7 @@ class AnimationTarget extends Component {
 
           if (!isHighlighted) {
             // At first, hide highlighter which was created by onDOMNodeMouseOver.
-            onHideBoxModelHighlighter();
+            dispatch(unhighlightNode());
           }
 
           setHighlightedNode(isHighlighted ? null : nodeFront);

devtools/client/inspector/animation/components/App.js

@@ -35,13 +35,12 @@ class App extends Component {
       animations: PropTypes.arrayOf(PropTypes.object).isRequired,
       detailVisibility: PropTypes.bool.isRequired,
       direction: PropTypes.string.isRequired,
+      dispatch: PropTypes.func.isRequired,
       emitEventForTest: PropTypes.func.isRequired,
       getAnimatedPropertyMap: PropTypes.func.isRequired,
       getAnimationsCurrentTime: PropTypes.func.isRequired,
       getComputedStyle: PropTypes.func.isRequired,
       getNodeFromActor: PropTypes.func.isRequired,
-      onHideBoxModelHighlighter: PropTypes.func.isRequired,
-      onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
       removeAnimationsCurrentTimeListener: PropTypes.func.isRequired,
       rewindAnimationsCurrentTime: PropTypes.func.isRequired,
       selectAnimation: PropTypes.func.isRequired,
@@ -71,13 +70,12 @@ class App extends Component {
       animations,
       detailVisibility,
       direction,
+      dispatch,
       emitEventForTest,
       getAnimatedPropertyMap,
       getAnimationsCurrentTime,
       getComputedStyle,
       getNodeFromActor,
-      onHideBoxModelHighlighter,
-      onShowBoxModelHighlighterForNode,
       removeAnimationsCurrentTimeListener,
       rewindAnimationsCurrentTime,
       selectAnimation,
@@ -132,11 +130,10 @@ class App extends Component {
                 addAnimationsCurrentTimeListener,
                 animations,
                 direction,
+                dispatch,
                 emitEventForTest,
                 getAnimatedPropertyMap,
                 getNodeFromActor,
-                onHideBoxModelHighlighter,
-                onShowBoxModelHighlighterForNode,
                 removeAnimationsCurrentTimeListener,
                 selectAnimation,
                 setAnimationsCurrentTime,