Bug 1602075 - handle can-be-disabled and can-be-disabled events in the MainFrame component instead of the Toolbar and Description respectively. r=mtigley

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

devtools/client/accessibility/components/Description.js

@@ -24,10 +24,7 @@ const Button = createFactory(
 const LearnMoreLink = createFactory(
   require("devtools/client/accessibility/components/LearnMoreLink")
 );
-const {
-  enable,
-  updateCanBeEnabled,
-} = require("devtools/client/accessibility/actions/ui");
+const { enable } = require("devtools/client/accessibility/actions/ui");
 
 // Localization
 const { L10N } = require("devtools/client/accessibility/utils/l10n");
@@ -47,8 +44,6 @@ class Description extends Component {
       canBeEnabled: PropTypes.bool,
       dispatch: PropTypes.func.isRequired,
       enableAccessibility: PropTypes.func.isRequired,
-      startListeningForLifecycleEvents: PropTypes.func.isRequired,
-      stopListeningForLifecycleEvents: PropTypes.func.isRequired,
     };
   }
 
@@ -60,19 +55,6 @@ class Description extends Component {
     };
 
     this.onEnable = this.onEnable.bind(this);
-    this.onCanBeEnabledChange = this.onCanBeEnabledChange.bind(this);
-  }
-
-  componentWillMount() {
-    this.props.startListeningForLifecycleEvents({
-      "can-be-enabled-change": this.onCanBeEnabledChange,
-    });
-  }
-
-  componentWillUnmount() {
-    this.props.stopListeningForLifecycleEvents({
-      "can-be-enabled-change": this.onCanBeEnabledChange,
-    });
   }
 
   onEnable() {
@@ -88,10 +70,6 @@ class Description extends Component {
       .catch(() => this.setState({ enabling: false }));
   }
 
-  onCanBeEnabledChange(canBeEnabled) {
-    this.props.dispatch(updateCanBeEnabled(canBeEnabled));
-  }
-
   render() {
     const { canBeEnabled } = this.props;
     const { enabling } = this.state;

devtools/client/accessibility/components/MainFrame.js

@@ -14,7 +14,11 @@ const {
 } = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
-const { reset } = require("devtools/client/accessibility/actions/ui");
+const {
+  reset,
+  updateCanBeEnabled,
+  updateCanBeDisabled,
+} = require("devtools/client/accessibility/actions/ui");
 
 // Localization
 const FluentReact = require("devtools/client/shared/vendor/fluent-react");
@@ -77,12 +81,16 @@ class MainFrame extends Component {
 
     this.resetAccessibility = this.resetAccessibility.bind(this);
     this.onPanelWindowResize = this.onPanelWindowResize.bind(this);
+    this.onCanBeEnabledChange = this.onCanBeEnabledChange.bind(this);
+    this.onCanBeDisabledChange = this.onCanBeDisabledChange.bind(this);
   }
 
   componentWillMount() {
     this.props.startListeningForLifecycleEvents({
       init: this.resetAccessibility,
       shutdown: this.resetAccessibility,
+      "can-be-enabled-change": this.onCanBeEnabledChange,
+      "can-be-disabled-change": this.onCanBeDisabledChange,
     });
     this.props.startListeningForAccessibilityEvents({
       "document-ready": this.resetAccessibility,
@@ -100,6 +108,8 @@ class MainFrame extends Component {
     this.props.stopListeningForLifecycleEvents({
       init: this.resetAccessibility,
       shutdown: this.resetAccessibility,
+      "can-be-enabled-change": this.onCanBeEnabledChange,
+      "can-be-disabled-change": this.onCanBeDisabledChange,
     });
     this.props.stopListeningForAccessibilityEvents({
       "document-ready": this.resetAccessibility,
@@ -112,6 +122,14 @@ class MainFrame extends Component {
     dispatch(reset(resetAccessiblity, supports));
   }
 
+  onCanBeEnabledChange(canBeEnabled) {
+    this.props.dispatch(updateCanBeEnabled(canBeEnabled));
+  }
+
+  onCanBeDisabledChange(canBeDisabled) {
+    this.props.dispatch(updateCanBeDisabled(canBeDisabled));
+  }
+
   get useLandscapeMode() {
     const { clientWidth } = document.getElementById("content");
     return clientWidth > PORTRAIT_MODE_WIDTH;
@@ -143,16 +161,10 @@ class MainFrame extends Component {
       audit,
       enableAccessibility,
       disableAccessibility,
-      startListeningForLifecycleEvents,
-      stopListeningForLifecycleEvents,
     } = this.props;
 
     if (!enabled) {
-      return Description({
-        enableAccessibility,
-        startListeningForLifecycleEvents,
-        stopListeningForLifecycleEvents,
-      });
+      return Description({ enableAccessibility });
     }
 
     // Audit is currently running.
@@ -166,8 +178,6 @@ class MainFrame extends Component {
           audit,
           disableAccessibility,
           simulate,
-          startListeningForLifecycleEvents,
-          stopListeningForLifecycleEvents,
           toolboxDoc: toolbox.doc,
         }),
         isAuditing && AuditProgressOverlay(),

devtools/client/accessibility/components/Toolbar.js

@@ -30,10 +30,7 @@ loader.lazyGetter(this, "SimulationMenuButton", function() {
 });
 
 const { connect } = require("devtools/client/shared/vendor/react-redux");
-const {
-  disable,
-  updateCanBeDisabled,
-} = require("devtools/client/accessibility/actions/ui");
+const { disable } = require("devtools/client/accessibility/actions/ui");
 
 class Toolbar extends Component {
   static get propTypes() {
@@ -44,8 +41,6 @@ class Toolbar extends Component {
       toolboxDoc: PropTypes.object.isRequired,
       audit: PropTypes.func.isRequired,
       simulate: PropTypes.func,
-      startListeningForLifecycleEvents: PropTypes.func.isRequired,
-      stopListeningForLifecycleEvents: PropTypes.func.isRequired,
     };
   }
 
@@ -57,23 +52,6 @@ class Toolbar extends Component {
     };
 
     this.onDisable = this.onDisable.bind(this);
-    this.onCanBeDisabledChange = this.onCanBeDisabledChange.bind(this);
-  }
-
-  componentWillMount() {
-    this.props.startListeningForLifecycleEvents({
-      "can-be-disabled-change": this.onCanBeDisabledChange,
-    });
-  }
-
-  componentWillUnmount() {
-    this.props.stopListeningForLifecycleEvents({
-      "can-be-disabled-change": this.onCanBeDisabledChange,
-    });
-  }
-
-  onCanBeDisabledChange(canBeDisabled) {
-    this.props.dispatch(updateCanBeDisabled(canBeDisabled));
   }
 
   onDisable() {