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,7 +72,10 @@ class Description extends Component {
   }
 
   render() {
-    const { canBeEnabled } = this.props;
+    const { canBeEnabled, autoInit } = this.props;
+    let warningStringName = "accessibility.enable.disabledTitle";
+    let button;
+    if (!autoInit) {
       const { enabling } = this.state;
       const enableButtonStr = enabling
         ? "accessibility.enabling"
@@ -87,6 +91,20 @@ class Description extends Component {
         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(
       { className: "description", role: "presentation" },
       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(
+      button
-        {
-          id: "accessibility-enable-button",
-          onClick: this.onEnable,
-          disabled: enabling || disableButton,
-          busy: enabling,
-          "data-standalone": true,
-          title,
-        },
-        L10N.getStr(enableButtonStr)
-      )
     );
   }
 }
 
-const mapStateToProps = ({ ui }) => ({
+const mapStateToProps = ({
-  canBeEnabled: ui.canBeEnabled,
+  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,6 +96,7 @@ class Toolbar extends Component {
         className: "devtools-toolbar",
         role: "toolbar",
       },
+      !autoInit &&
         Button(
           {
             className: "disable",
@@ -106,6 +108,7 @@ class Toolbar extends Component {
           },
           L10N.getStr(disableButtonStr)
         ),
+      !autoInit &&
         div({
           role: "separator",
           className: "devtools-separator",
@@ -131,8 +134,14 @@ class Toolbar extends Component {
   }
 }
 
-const mapStateToProps = ({ ui }) => ({
+const mapStateToProps = ({
-  canBeDisabled: ui.canBeDisabled,
+  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.