Bug 1604594 - decouple accessibility walker front from the accessibility tree component. r=rcaliman

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

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

devtools/client/accessibility/accessibility-view.js

@@ -51,24 +51,39 @@ AccessibilityView.prototype = {
    *
    * @param {Object}
    *        Object that contains the following properties:
-   *        - front                 {Object}
-   *                                front that can initialize accessibility
-   *                                walker and enable/disable accessibility
-   *                                services.
-   *        - walker                {Object}
-   *                                front for accessibility walker actor responsible for
-   *                                managing accessible objects actors/fronts.
-   *        - supports              {JSON}
-   *                                a collection of flags indicating which accessibility
-   *                                panel features are supported by the current serverside
-   *                                version.
-   *        - fluentBundles         {Array}
-   *                                array of FluentBundles elements for localization
-   *        - simulator             {Object}
-   *                                front for simulator actor responsible for setting
-   *                                color matrices in docShell
-   *        - toolbox               {Object}
-   *                                devtools toolbox.
+   * - front                                 {Object}
+   *                                         front that can initialize
+   *                                         accessibility walker and
+   *                                         enable/disable accessibility
+   *                                         services.
+   * - walker                                {Object}
+   *                                         front for accessibility walker
+   *                                         actor responsible for managing
+   *                                         accessible objects actors/fronts.
+   * - supports                              {JSON}
+   *                                         a collection of flags indicating
+   *                                         which accessibility panel features
+   *                                         are supported by the current
+   *                                         serverside version.
+   * - fluentBundles                         {Array}
+   *                                         array of FluentBundles elements for
+   *                                         localization
+   * - simulator                             {Object}
+   *                                         front for simulator actor
+   *                                         responsible for setting color
+   *                                         matrices in docShell
+   * - toolbox                               {Object}
+   *                                         devtools toolbox.
+   * - getAccessibilityTreeRoot              {Function}
+   *                                         Returns the topmost accessibiliity
+   *                                         walker that is used as the root of
+   *                                         the accessibility tree.
+   * - startListeningForAccessibilityEvents  {Function}
+   *                                         Add listeners for specific
+   *                                         accessibility events.
+   * - stopListeningForAccessibilityEvents   {Function}
+   *                                         Remove listeners for specific
+   *                                         accessibility events.
    */
   async initialize({
     front,
@@ -77,6 +92,9 @@ AccessibilityView.prototype = {
     fluentBundles,
     simulator,
     toolbox,
+    getAccessibilityTreeRoot,
+    startListeningForAccessibilityEvents,
+    stopListeningForAccessibilityEvents,
   }) {
     // Make sure state is reset every time accessibility panel is initialized.
     await this.store.dispatch(reset(front, supports));
@@ -87,6 +105,9 @@ AccessibilityView.prototype = {
       fluentBundles,
       simulator,
       toolbox,
+      getAccessibilityTreeRoot,
+      startListeningForAccessibilityEvents,
+      stopListeningForAccessibilityEvents,
     });
     // Render top level component
     const provider = createElement(Provider, { store: this.store }, mainFrame);

devtools/client/accessibility/components/AccessibilityTree.js

@@ -41,7 +41,6 @@ const { scrollIntoView } = require("devtools/client/shared/scroll");
 class AccessibilityTree extends Component {
   static get propTypes() {
     return {
-      accessibilityWalker: PropTypes.object,
       toolboxDoc: PropTypes.object.isRequired,
       dispatch: PropTypes.func.isRequired,
       accessibles: PropTypes.object,
@@ -49,6 +48,9 @@ class AccessibilityTree extends Component {
       selected: PropTypes.string,
       highlighted: PropTypes.object,
       filtered: PropTypes.bool,
+      getAccessibilityTreeRoot: PropTypes.func.isRequired,
+      startListeningForAccessibilityEvents: PropTypes.func.isRequired,
+      stopListeningForAccessibilityEvents: PropTypes.func.isRequired,
     };
   }
 
@@ -63,15 +65,14 @@ class AccessibilityTree extends Component {
   }
 
   /**
-   * Add accessibility walker front event listeners that affect tree rendering
-   * and updates.
+   * Add accessibility event listeners that affect tree rendering and updates.
    */
   componentWillMount() {
-    const { accessibilityWalker } = this.props;
-    accessibilityWalker.on("reorder", this.onReorder);
-    accessibilityWalker.on("name-change", this.onNameChange);
-    accessibilityWalker.on("text-change", this.onTextChange);
-
+    this.props.startListeningForAccessibilityEvents({
+      reorder: this.onReorder,
+      "name-change": this.onNameChange,
+      "text-change": this.onTextChange,
+    });
     window.on(
       EVENTS.NEW_ACCESSIBLE_FRONT_INSPECTED,
       this.scrollSelectedRowIntoView
@@ -90,13 +91,14 @@ class AccessibilityTree extends Component {
   }
 
   /**
-   * Remove accessible walker front event listeners.
+   * Remove accessible event listeners.
    */
   componentWillUnmount() {
-    const { accessibilityWalker } = this.props;
-    accessibilityWalker.off("reorder", this.onReorder);
-    accessibilityWalker.off("name-change", this.onNameChange);
-    accessibilityWalker.off("text-change", this.onTextChange);
+    this.props.stopListeningForAccessibilityEvents({
+      reorder: this.onReorder,
+      "name-change": this.onNameChange,
+      "text-change": this.onTextChange,
+    });
 
     window.off(
       EVENTS.NEW_ACCESSIBLE_FRONT_INSPECTED,
@@ -200,9 +202,9 @@ class AccessibilityTree extends Component {
       expanded,
       selected,
       highlighted: highlightedItem,
-      accessibilityWalker,
       toolboxDoc,
       filtered,
+      getAccessibilityTreeRoot,
     } = this.props;
 
     const renderRow = rowProps => {
@@ -224,7 +226,7 @@ class AccessibilityTree extends Component {
 
     return TreeView({
       ref: "treeview",
-      object: accessibilityWalker,
+      object: getAccessibilityTreeRoot(),
       mode: MODE.SHORT,
       provider: new Provider(accessibles, filtered, dispatch),
       columns: columns,

devtools/client/accessibility/components/MainFrame.js

@@ -62,6 +62,9 @@ class MainFrame extends Component {
       supports: PropTypes.object,
       simulator: PropTypes.object,
       toolbox: PropTypes.object.isRequired,
+      getAccessibilityTreeRoot: PropTypes.func.isRequired,
+      startListeningForAccessibilityEvents: PropTypes.func.isRequired,
+      stopListeningForAccessibilityEvents: PropTypes.func.isRequired,
     };
   }
 
@@ -132,6 +135,9 @@ class MainFrame extends Component {
       auditing,
       simulator,
       toolbox,
+      getAccessibilityTreeRoot,
+      startListeningForAccessibilityEvents,
+      stopListeningForAccessibilityEvents,
     } = this.props;
 
     if (!enabled) {
@@ -171,8 +177,10 @@ class MainFrame extends Component {
                 role: "presentation",
               },
               AccessibilityTree({
-                accessibilityWalker,
                 toolboxDoc: toolbox.doc,
+                getAccessibilityTreeRoot,
+                startListeningForAccessibilityEvents,
+                stopListeningForAccessibilityEvents,
               })
             ),
             endPanel: RightSidebar({ toolbox }),

devtools/client/accessibility/panel.js

@@ -51,6 +51,13 @@ function AccessibilityPanel(iframeWindow, toolbox, startup) {
     this
   );
   this.forceUpdatePickerButton = this.forceUpdatePickerButton.bind(this);
+  this.getAccessibilityTreeRoot = this.getAccessibilityTreeRoot.bind(this);
+  this.startListeningForAccessibilityEvents = this.startListeningForAccessibilityEvents.bind(
+    this
+  );
+  this.stopListeningForAccessibilityEvents = this.stopListeningForAccessibilityEvents.bind(
+    this
+  );
 
   EventEmitter.decorate(this);
 }
@@ -173,6 +180,11 @@ AccessibilityPanel.prototype = {
       fluentBundles: this.fluentBundles,
       simulator: this.simulator,
       toolbox: this._toolbox,
+      getAccessibilityTreeRoot: this.getAccessibilityTreeRoot,
+      startListeningForAccessibilityEvents: this
+        .startListeningForAccessibilityEvents,
+      stopListeningForAccessibilityEvents: this
+        .stopListeningForAccessibilityEvents,
     });
   },
 
@@ -265,6 +277,29 @@ AccessibilityPanel.prototype = {
     await this.walker.pick(doFocus);
   },
 
+  /**
+   * Return the topmost level accessibility walker to be used as the root of
+   * the accessibility tree view.
+   *
+   * @return {Object}
+   *         Topmost accessibility walker.
+   */
+  getAccessibilityTreeRoot() {
+    return this.walker;
+  },
+
+  startListeningForAccessibilityEvents(eventMap) {
+    for (const [type, listener] of Object.entries(eventMap)) {
+      this.walker.on(type, listener);
+    }
+  },
+
+  stopListeningForAccessibilityEvents(eventMap) {
+    for (const [type, listener] of Object.entries(eventMap)) {
+      this.walker.off(type, listener);
+    }
+  },
+
   get front() {
     return this.startup.accessibility;
   },