Bug 1592300 - remove all uses of gToolbox from a11y panel. r=nchevobbe

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

--HG--
extra : moz-landing-system : lando

devtools/client/accessibility/accessibility-view.js

@@ -62,8 +62,8 @@ AccessibilityView.prototype = {
    *        - simulator             {Object}
    *                                front for simulator actor responsible for setting
    *                                color matrices in docShell
-   *        - toolboxDoc            {Document}
-   *                                toolbox document that will used by menus.
+   *        - toolbox               {Object}
+   *                                devtools toolbox.
    */
   async initialize({
     front,
@@ -71,7 +71,7 @@ AccessibilityView.prototype = {
     supports,
     fluentBundles,
     simulator,
-    toolboxDoc,
+    toolbox,
   }) {
     // Make sure state is reset every time accessibility panel is initialized.
     await this.store.dispatch(reset(front, supports));
@@ -81,7 +81,7 @@ AccessibilityView.prototype = {
       accessibilityWalker: walker,
       fluentBundles,
       simulator,
-      toolboxDoc,
+      toolbox,
     });
     // Render top level component
     const provider = createElement(Provider, { store: this.store }, mainFrame);

devtools/client/accessibility/components/AccessibilityRow.js

@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-/* global gTelemetry, gToolbox, EVENTS */
+/* global gTelemetry, EVENTS */
 
 // React & Redux
 const {
@@ -81,6 +81,7 @@ class AccessibilityRow extends Component {
     return {
       ...TreeRow.propTypes,
       dispatch: PropTypes.func.isRequired,
+      toolboxDoc: PropTypes.object.isRequired,
       scrollContentNodeIntoView: PropTypes.bool.isRequired,
     };
   }
@@ -268,7 +269,7 @@ class AccessibilityRow extends Component {
     e.stopPropagation();
     e.preventDefault();
 
-    if (!gToolbox) {
+    if (!this.props.toolboxDoc) {
       return;
     }
 
@@ -281,7 +282,7 @@ class AccessibilityRow extends Component {
       })
     );
 
-    menu.popup(e.screenX, e.screenY, gToolbox.doc);
+    menu.popup(e.screenX, e.screenY, this.props.toolboxDoc);
 
     if (gTelemetry) {
       gTelemetry.scalarAdd(TELEMETRY_ACCESSIBLE_CONTEXT_MENU_OPENED, 1);

devtools/client/accessibility/components/AccessibilityTree.js

@@ -36,6 +36,7 @@ class AccessibilityTree extends Component {
   static get propTypes() {
     return {
       accessibilityWalker: PropTypes.object,
+      toolboxDoc: PropTypes.object.isRequired,
       dispatch: PropTypes.func.isRequired,
       accessibles: PropTypes.object,
       expanded: PropTypes.object,
@@ -167,6 +168,7 @@ class AccessibilityTree extends Component {
       selected,
       highlighted: highlightedItem,
       accessibilityWalker,
+      toolboxDoc,
       filtered,
     } = this.props;
 
@@ -175,6 +177,7 @@ class AccessibilityTree extends Component {
       const highlighted = object === highlightedItem;
       return AccessibilityRow(
         Object.assign({}, rowProps, {
+          toolboxDoc,
           highlighted,
           decorator: {
             getRowClass: function() {

devtools/client/accessibility/components/Accessible.js

@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-/* global EVENTS, gTelemetry, gToolbox */
+/* global EVENTS, gTelemetry */
 
 // React & Redux
 const {
@@ -112,6 +112,7 @@ class Accessible extends Component {
       labelledby: PropTypes.string.isRequired,
       parents: PropTypes.object,
       relations: PropTypes.object,
+      toolbox: PropTypes.object.isRequired,
     };
   }
 
@@ -204,7 +205,7 @@ class Accessible extends Component {
   }
 
   async showHighlighter(nodeFront) {
-    if (!gToolbox) {
+    if (!this.props.toolbox) {
       return;
     }
 
@@ -213,7 +214,7 @@ class Accessible extends Component {
   }
 
   async hideHighlighter(nodeFront) {
-    if (!gToolbox) {
+    if (!this.props.toolbox) {
       return;
     }
 
@@ -237,7 +238,7 @@ class Accessible extends Component {
       .catch(error => {
         // Only report an error where there's still a toolbox. Ignore cases
         // where toolbox is already destroyed.
-        if (gToolbox) {
+        if (this.props.toolbox) {
           console.error(error);
         }
       });
@@ -257,24 +258,23 @@ class Accessible extends Component {
     accessibilityWalkerFront.unhighlight().catch(error => {
       // Only report an error where there's still a toolbox. Ignore cases where
       // toolbox is already destroyed.
-      if (gToolbox) {
+      if (this.props.toolbox) {
         console.error(error);
       }
     });
   }
 
-  selectNode(nodeFront, reason = "accessibility") {
+  async selectNode(nodeFront, reason = "accessibility") {
     if (gTelemetry) {
       gTelemetry.scalarAdd(TELEMETRY_NODE_INSPECTED_COUNT, 1);
     }
 
-    if (!gToolbox) {
+    if (!this.props.toolbox) {
       return;
     }
 
-    gToolbox
-      .selectTool("inspector")
-      .then(() => gToolbox.selection.setNodeFront(nodeFront, reason));
+    const inspector = await this.props.toolbox.selectTool("inspector");
+    inspector.selection.setNodeFront(nodeFront, reason);
   }
 
   async selectAccessible(accessibleFront) {

devtools/client/accessibility/components/MainFrame.js

@@ -48,7 +48,7 @@ class MainFrame extends Component {
       auditing: PropTypes.array.isRequired,
       supports: PropTypes.object,
       simulator: PropTypes.object,
-      toolboxDoc: PropTypes.object.isRequired,
+      toolbox: PropTypes.object.isRequired,
     };
   }
 
@@ -118,7 +118,7 @@ class MainFrame extends Component {
       enabled,
       auditing,
       simulator,
-      toolboxDoc,
+      toolbox,
     } = this.props;
 
     if (!enabled) {
@@ -132,7 +132,12 @@ class MainFrame extends Component {
       { bundles: fluentBundles },
       div(
         { className: "mainFrame", role: "presentation" },
-        Toolbar({ accessibility, accessibilityWalker, simulator, toolboxDoc }),
+        Toolbar({
+          accessibility,
+          accessibilityWalker,
+          simulator,
+          toolboxDoc: toolbox.doc,
+        }),
         isAuditing && AuditProgressOverlay(),
         span(
           {
@@ -152,9 +157,12 @@ class MainFrame extends Component {
                 className: "main-panel",
                 role: "presentation",
               },
-              AccessibilityTree({ accessibilityWalker })
+              AccessibilityTree({
+                accessibilityWalker,
+                toolboxDoc: toolbox.doc,
+              })
             ),
-            endPanel: RightSidebar(),
+            endPanel: RightSidebar({ toolbox }),
             vert: this.useLandscapeMode,
           })
         )

devtools/client/accessibility/components/RightSidebar.js

@@ -15,7 +15,7 @@ const Accordion = createFactory(
 const Checks = createFactory(require("./Checks"));
 
 // Component that is responsible for rendering accessible panel's sidebar.
-function RightSidebar() {
+function RightSidebar({ toolbox }) {
   const propertiesID = "accessibility-properties";
   const checksID = "accessibility-checks";
 
@@ -38,6 +38,7 @@ function RightSidebar() {
           className: "accessible",
           component: Accessible,
           componentProps: {
+            toolbox,
             labelledby: `${propertiesID}-header`,
           },
           header: L10N.getStr("accessibility.properties"),

devtools/client/accessibility/panel.js

@@ -86,7 +86,6 @@ AccessibilityPanel.prototype = {
     );
 
     this.shouldRefresh = true;
-    this.panelWin.gToolbox = this._toolbox;
 
     await this.startup.initAccessibility();
     this.picker = new Picker(this);
@@ -171,7 +170,7 @@ AccessibilityPanel.prototype = {
       supports: this.supports,
       fluentBundles: this.fluentBundles,
       simulator: this.simulator,
-      toolboxDoc: this._toolbox.doc,
+      toolbox: this._toolbox,
     });
   },
 
@@ -300,7 +299,6 @@ AccessibilityPanel.prototype = {
     }
 
     this._telemetry = null;
-    this.panelWin.gToolbox = null;
     this.panelWin.gTelemetry = null;
 
     this.emit("destroyed");

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

@@ -142,7 +142,7 @@ async function addTestTab(url) {
 
   // Wait for inspector load here to avoid protocol errors on shutdown, since
   // accessibility panel test can be too fast.
-  await win.gToolbox.loadTool("inspector");
+  await panel._toolbox.loadTool("inspector");
 
   return {
     tab,

devtools/client/accessibility/test/mochitest/test_accessible_row_context_menu.html

@@ -36,13 +36,11 @@ window.onload = async function() {
     const { FILTERS } = browserRequire("devtools/client/accessibility/constants");
 
     async function withMockEnv(func) {
-      const { gToolbox: originalToolbox, gTelemetry: originalTelemetry } = window;
-      window.gToolbox = { doc: document };
+      const { gTelemetry: originalTelemetry } = window;
       window.gTelemetry = null;
 
       await func();
 
-      window.gToolbox = originalToolbox;
       window.gTelemetry = originalTelemetry;
     }
 
@@ -88,6 +86,7 @@ window.onload = async function() {
         getValue: (object, id) => object[id],
       },
       hasContextMenu: true,
+      toolboxDoc: document,
     };
 
     const auditState = { audit: { filters: { [FILTERS.CONTRAST]: false }}};