Bug 1592858 - scroll selected row in the tree view into view when inspecting an accessible object. r=mtigley

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

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

devtools/client/accessibility/components/AccessibilityTree.js

@@ -53,6 +53,7 @@ class AccessibilityTree extends Component {
     this.onReorder = this.onReorder.bind(this);
     this.onTextChange = this.onTextChange.bind(this);
     this.renderValue = this.renderValue.bind(this);
+    this.scrollSelectedRowIntoView = this.scrollSelectedRowIntoView.bind(this);
   }
 
   /**
@@ -64,6 +65,11 @@ class AccessibilityTree extends Component {
     accessibilityWalker.on("reorder", this.onReorder);
     accessibilityWalker.on("name-change", this.onNameChange);
     accessibilityWalker.on("text-change", this.onTextChange);
+
+    window.on(
+      EVENTS.NEW_ACCESSIBLE_FRONT_INSPECTED,
+      this.scrollSelectedRowIntoView
+    );
     return null;
   }
 
@@ -71,10 +77,7 @@ class AccessibilityTree extends Component {
     // When filtering is toggled, make sure that the selected row remains in
     // view.
     if (this.props.filtered !== prevProps.filtered) {
-      const selected = document.querySelector(".treeTable .treeRow.selected");
-      if (selected) {
-        scrollIntoView(selected, { center: true });
-      }
+      this.scrollSelectedRowIntoView();
     }
 
     window.emit(EVENTS.ACCESSIBILITY_INSPECTOR_UPDATED);
@@ -88,6 +91,11 @@ class AccessibilityTree extends Component {
     accessibilityWalker.off("reorder", this.onReorder);
     accessibilityWalker.off("name-change", this.onNameChange);
     accessibilityWalker.off("text-change", this.onTextChange);
+
+    window.off(
+      EVENTS.NEW_ACCESSIBLE_FRONT_INSPECTED,
+      this.scrollSelectedRowIntoView
+    );
   }
 
   /**
@@ -103,6 +111,25 @@ class AccessibilityTree extends Component {
     }
   }
 
+  scrollSelectedRowIntoView() {
+    const { treeview } = this.refs;
+    if (!treeview) {
+      return;
+    }
+
+    const treeEl = treeview.treeRef.current;
+    if (!treeEl) {
+      return;
+    }
+
+    const selected = treeEl.ownerDocument.querySelector(
+      ".treeTable .treeRow.selected"
+    );
+    if (selected) {
+      scrollIntoView(selected, { center: true });
+    }
+  }
+
   /**
    * Handle accessible name change event. If the name of an accessible changes
    * and that accessible is cached and rendered within the accessibility tree,
@@ -190,6 +217,7 @@ class AccessibilityTree extends Component {
     const className = filtered ? "filtered" : undefined;
 
     return TreeView({
+      ref: "treeview",
       object: accessibilityWalker,
       mode: MODE.SHORT,
       provider: new Provider(accessibles, filtered, dispatch),

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

@@ -88,5 +88,9 @@ addA11YPanelTask(
     const doc = panel.panelWin.document;
     const propertiesTree = doc.querySelector(".tree");
     is(doc.activeElement, propertiesTree, "Properties list must be focused.");
+    ok(
+      isVisible(doc.querySelector(".treeTable .treeRow.selected")),
+      "Selected row is visible."
+    );
   }
 );

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

@@ -71,6 +71,10 @@ async function checkAccessibleObjectSelection(
   const doc = panel.panelWin.document;
   const propertiesTree = doc.querySelector(".tree");
   is(doc.activeElement, propertiesTree, "Properties list must be focused.");
+  ok(
+    isVisible(doc.querySelector(".treeTable .treeRow.selected")),
+    "Selected row is visible."
+  );
 }
 
 addA11YPanelTask(