Bug 1602075 - make enable/disable panel UI conditional on the accessibility-panel-auto-init feature. r=mtigley

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

devtools/client/accessibility/accessibility-proxy.js

@@ -56,6 +56,16 @@ class AccessibilityProxy {
     return this.accessibilityFront && this.accessibilityFront.enabled;
   }
 
+  /**
+   * Indicates whether the accessibility service is enabled.
+   */
+  get canBeEnabled() {
+    // TODO: Just use parentAccessibilityFront after Firefox 75.
+    const { canBeEnabled } =
+      this.parentAccessibilityFront || this.accessibilityFront;
+    return canBeEnabled;
+  }
+
   get currentTarget() {
     return this._currentTarget;
   }

devtools/client/accessibility/components/Description.js

@@ -44,6 +44,7 @@ class Description extends Component {
       canBeEnabled: PropTypes.bool,
       dispatch: PropTypes.func.isRequired,
       enableAccessibility: PropTypes.func.isRequired,
+      autoInit: PropTypes.bool.isRequired,
     };
   }
 
@@ -71,20 +72,37 @@ class Description extends Component {
   }
 
   render() {
-    const { canBeEnabled } = this.props;
-    const { enabling } = this.state;
-    const enableButtonStr = enabling
-      ? "accessibility.enabling"
-      : "accessibility.enable";
+    const { canBeEnabled, autoInit } = this.props;
+    let warningStringName = "accessibility.enable.disabledTitle";
+    let button;
+    if (!autoInit) {
+      const { enabling } = this.state;
+      const enableButtonStr = enabling
+        ? "accessibility.enabling"
+        : "accessibility.enable";
 
-    let title;
-    let disableButton = false;
+      let title;
+      let disableButton = false;
 
-    if (canBeEnabled) {
-      title = L10N.getStr("accessibility.enable.enabledTitle");
-    } else {
-      disableButton = true;
-      title = L10N.getStr("accessibility.enable.disabledTitle");
+      if (canBeEnabled) {
+        title = L10N.getStr("accessibility.enable.enabledTitle");
+      } else {
+        disableButton = true;
+        title = L10N.getStr("accessibility.enable.disabledTitle");
+      }
+
+      button = Button(
+        {
+          id: "accessibility-enable-button",
+          onClick: this.onEnable,
+          disabled: enabling || disableButton,
+          busy: enabling,
+          "data-standalone": true,
+          title,
+        },
+        L10N.getStr(enableButtonStr)
+      );
+      warningStringName = "accessibility.description.general.p2";
     }
 
     return div(
@@ -105,26 +123,22 @@ class Description extends Component {
             l10n: L10N,
             messageStringKey: "accessibility.description.general.p1",
           }),
-          p({}, L10N.getStr("accessibility.description.general.p2"))
+          p({}, L10N.getStr(warningStringName))
         )
       ),
-      Button(
-        {
-          id: "accessibility-enable-button",
-          onClick: this.onEnable,
-          disabled: enabling || disableButton,
-          busy: enabling,
-          "data-standalone": true,
-          title,
-        },
-        L10N.getStr(enableButtonStr)
-      )
+      button
     );
   }
 }
 
-const mapStateToProps = ({ ui }) => ({
-  canBeEnabled: ui.canBeEnabled,
+const mapStateToProps = ({
+  ui: {
+    canBeEnabled,
+    supports: { autoInit },
+  },
+}) => ({
+  canBeEnabled,
+  autoInit,
 });
 
 // Exports from this module

devtools/client/accessibility/components/MainFrame.js

@@ -15,6 +15,7 @@ const {
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 const {
+  enable,
   reset,
   updateCanBeEnabled,
   updateCanBeDisabled,
@@ -123,7 +124,15 @@ class MainFrame extends Component {
   }
 
   onCanBeEnabledChange(canBeEnabled) {
-    this.props.dispatch(updateCanBeEnabled(canBeEnabled));
+    const {
+      enableAccessibility,
+      dispatch,
+      supports: { autoInit },
+    } = this.props;
+    dispatch(updateCanBeEnabled(canBeEnabled));
+    if (canBeEnabled && autoInit) {
+      dispatch(enable(enableAccessibility));
+    }
   }
 
   onCanBeDisabledChange(canBeDisabled) {

devtools/client/accessibility/components/Toolbar.js

@@ -41,6 +41,7 @@ class Toolbar extends Component {
       toolboxDoc: PropTypes.object.isRequired,
       audit: PropTypes.func.isRequired,
       simulate: PropTypes.func,
+      autoInit: PropTypes.bool.isRequired,
     };
   }
 
@@ -64,7 +65,7 @@ class Toolbar extends Component {
   }
 
   render() {
-    const { canBeDisabled, simulate, toolboxDoc, audit } = this.props;
+    const { canBeDisabled, simulate, toolboxDoc, audit, autoInit } = this.props;
     const { disabling } = this.state;
     const disableButtonStr = disabling
       ? "accessibility.disabling"
@@ -95,21 +96,23 @@ class Toolbar extends Component {
         className: "devtools-toolbar",
         role: "toolbar",
       },
-      Button(
-        {
-          className: "disable",
-          id: "accessibility-disable-button",
-          onClick: this.onDisable,
-          disabled: disabling || isDisabled,
-          busy: disabling,
-          title,
-        },
-        L10N.getStr(disableButtonStr)
-      ),
-      div({
-        role: "separator",
-        className: "devtools-separator",
-      }),
+      !autoInit &&
+        Button(
+          {
+            className: "disable",
+            id: "accessibility-disable-button",
+            onClick: this.onDisable,
+            disabled: disabling || isDisabled,
+            busy: disabling,
+            title,
+          },
+          L10N.getStr(disableButtonStr)
+        ),
+      !autoInit &&
+        div({
+          role: "separator",
+          className: "devtools-separator",
+        }),
       // @remove after release 68 (See Bug 1551574)
       span(
         {
@@ -131,8 +134,14 @@ class Toolbar extends Component {
   }
 }
 
-const mapStateToProps = ({ ui }) => ({
-  canBeDisabled: ui.canBeDisabled,
+const mapStateToProps = ({
+  ui: {
+    canBeDisabled,
+    supports: { autoInit },
+  },
+}) => ({
+  canBeDisabled,
+  autoInit,
 });
 
 // Exports from this module

devtools/client/accessibility/panel.js

@@ -96,6 +96,16 @@ AccessibilityPanel.prototype = {
       this.onTargetAvailable
     );
 
+    // Bug 1602075: if auto init feature is enabled, enable accessibility
+    // service if necessary.
+    if (
+      this.accessibilityProxy.supports.autoInit &&
+      this.accessibilityProxy.canBeEnabled &&
+      !this.accessibilityProxy.enabled
+    ) {
+      await this.accessibilityProxy.enableAccessibility();
+    }
+
     this.picker = new Picker(this);
     this.fluentBundles = await this.createFluentBundles();
 
@@ -185,7 +195,7 @@ AccessibilityPanel.prototype = {
     // Alright reset the flag we are about to refresh the panel.
     this.shouldRefresh = false;
     this.postContentMessage("initialize", {
-      supports: this.supports,
+      supports: this.accessibilityProxy.supports,
       fluentBundles: this.fluentBundles,
       toolbox: this._toolbox,
       getAccessibilityTreeRoot: this.accessibilityProxy

devtools/client/accessibility/test/browser/browser_accessibility_panel_highlighter_multi_tab.js

@@ -6,6 +6,8 @@
 const TEST_URI = '<h1 id="h1">header</h1><p id="p">paragraph</p>';
 
 add_task(async function() {
+  Services.prefs.setBoolPref("devtools.accessibility.auto-init.enabled", false);
+
   const { toolbox: toolbox1 } = await addTestTab(buildURL(TEST_URI));
   const { toolbox: toolbox2 } = await addTestTab(buildURL(TEST_URI));
   const options = await openOptions(toolbox2);
@@ -42,6 +44,8 @@ add_task(async function() {
 
   await checkHighlighted(toolbox1, false);
   await checkHighlighted(toolbox2, false);
+
+  Services.prefs.clearUserPref("devtools.accessibility.auto-init.enabled");
 });
 
 async function openOptions(toolbox) {

devtools/client/accessibility/test/browser/head.js

@@ -156,6 +156,15 @@ async function addTestTab(url) {
  * cleanup function to make sure that the panel is still present.
  */
 async function disableAccessibilityInspector(env) {
+  if (
+    Services.prefs.getBoolPref(
+      "devtools.accessibility.auto-init.enabled",
+      false
+    )
+  ) {
+    return;
+  }
+
   const { doc, win, panel } = env;
   // Disable accessibility service through the panel and wait for the shutdown
   // event.