chrome-devtools-frontend 1.0.943709 → 1.0.943986

package/front_end/core/sdk/Script.ts

@@ -313,10 +313,6 @@ export class Script implements TextUtils.ContentProvider.ContentProvider, FrameA
     return !this.sourceURL;
   }
 
-  isInlineScriptWithSourceURL(): boolean {
-    return Boolean(this.hasSourceURL) && this.isInlineScript();
-  }
-
   async setBlackboxedRanges(positions: Protocol.Debugger.ScriptPosition[]): Promise<boolean> {
     const response = await this.debuggerModel.target().debuggerAgent().invoke_setBlackboxedRanges(
         {scriptId: this.scriptId, positions});

package/front_end/models/bindings/DefaultScriptMapping.ts

@@ -75,11 +75,7 @@ export class DefaultScriptMapping implements DebuggerSourceMapping {
     if (!uiSourceCode) {
       return null;
     }
-    const lineNumber = rawLocation.lineNumber - (script.isInlineScriptWithSourceURL() ? script.lineOffset : 0);
-    let columnNumber = rawLocation.columnNumber || 0;
-    if (script.isInlineScriptWithSourceURL() && !lineNumber && columnNumber) {
-      columnNumber -= script.columnOffset;
-    }
+    const {lineNumber, columnNumber = 0} = rawLocation;
     return uiSourceCode.uiLocation(lineNumber, columnNumber);
   }
 
@@ -89,10 +85,6 @@ export class DefaultScriptMapping implements DebuggerSourceMapping {
     if (!script) {
       return [];
     }
-    if (script.isInlineScriptWithSourceURL()) {
-      return [this.#debuggerModel.createRawLocation(
-          script, lineNumber + script.lineOffset, lineNumber ? columnNumber : columnNumber + script.columnOffset)];
-    }
     return [this.#debuggerModel.createRawLocation(script, lineNumber, columnNumber)];
   }
 

package/front_end/models/bindings/ResourceScriptMapping.ts

@@ -127,30 +127,22 @@ export class ResourceScriptMapping implements DebuggerSourceMapping {
     if (!scriptFile.hasScripts([script])) {
       return null;
     }
-    const lineNumber = rawLocation.lineNumber - (script.isInlineScriptWithSourceURL() ? script.lineOffset : 0);
-    let columnNumber = rawLocation.columnNumber || 0;
-    if (script.isInlineScriptWithSourceURL() && !lineNumber && columnNumber) {
-      columnNumber -= script.columnOffset;
-    }
+    const {lineNumber, columnNumber = 0} = rawLocation;
     return uiSourceCode.uiLocation(lineNumber, columnNumber);
   }
 
   uiLocationToRawLocations(uiSourceCode: Workspace.UISourceCode.UISourceCode, lineNumber: number, columnNumber: number):
       SDK.DebuggerModel.Location[] {
     const scriptFile = this.#uiSourceCodeToScriptFile.get(uiSourceCode);
-    if (!scriptFile || typeof scriptFile.script === 'undefined') {
+    if (!scriptFile) {
       return [];
     }
 
-    const script = scriptFile.script;
+    const {script} = scriptFile;
     if (!script) {
       return [];
     }
 
-    if (script.isInlineScriptWithSourceURL()) {
-      return [this.debuggerModel.createRawLocation(
-          script, lineNumber + script.lineOffset, lineNumber ? columnNumber : columnNumber + script.columnOffset)];
-    }
     return [this.debuggerModel.createRawLocation(script, lineNumber, columnNumber)];
   }
 

package/front_end/models/formatter/SourceFormatter.ts

@@ -165,21 +165,6 @@ class ScriptMapping implements Bindings.DebuggerWorkspaceBinding.DebuggerSourceM
     if (!formatData || !script) {
       return null;
     }
-    if (script.isInlineScriptWithSourceURL()) {
-      // Inline scripts with #sourceURL= have lineEndings wrt. the inline script (and not wrt. the containing document),
-      // but `rawLocation` will always use locations wrt. the containing document, because that is what the back-end is
-      // sending. This is a hack, because what we are really doing here is deciding the location based on /how/ the
-      // script is displayed, which is really something this layer cannot and should not have to decide: The
-      // SourceFormatter should not have to know whether a script is displayed inline (in its containing document) or
-      // stand-alone.
-      const [relativeLineNumber, relativeColumnNumber] = script.toRelativeLocation(rawLocation);
-      const [formattedLineNumber, formattedColumnNumber] =
-          formatData.mapping.originalToFormatted(relativeLineNumber, relativeColumnNumber);
-      return formatData.formattedSourceCode.uiLocation(formattedLineNumber, formattedColumnNumber);
-    }
-    // Here we either have an inline script without a #sourceURL= or a stand-alone script. For stand-alone scripts, no
-    // translation must be applied. For inline scripts, also no translation must be applied, because the line-endings
-    // tables in the mapping are the same as in the containing document.
     const [lineNumber, columnNumber] =
         formatData.mapping.originalToFormatted(rawLocation.lineNumber, rawLocation.columnNumber || 0);
     return formatData.formattedSourceCode.uiLocation(lineNumber, columnNumber);

package/front_end/panels/elements/AccessibilityTreeUtils.ts

@@ -6,87 +6,113 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
 import * as ElementsComponents from './components/components.js';
 import * as LitHtml from '../../ui/lit-html/lit-html.js';
+import type * as Protocol from '../../generated/protocol.js';
 
 export type AXTreeNodeData = SDK.AccessibilityModel.AccessibilityNode;
 export type AXTreeNode = TreeOutline.TreeOutlineUtils.TreeNode<AXTreeNodeData>;
 
-export function sdkNodeToAXTreeNode(sdkNode: SDK.AccessibilityModel.AccessibilityNode): AXTreeNode {
-  const treeNodeData = sdkNode;
-  const role = sdkNode.role()?.value;
-
-  if (role === 'Iframe') {
-    return {
-      treeNodeData,
-      children: async(): Promise<AXTreeNode[]> => {
-        const domNode = await sdkNode.deferredDOMNode()?.resolvePromise();
-        if (!domNode) {
-          throw new Error('Could not find corresponding DOMNode');
-        }
-        const frameId = domNode.frameOwnerFrameId();
+function isLeafNode(node: SDK.AccessibilityModel.AccessibilityNode): boolean {
+  return node.numChildren() === 0 && node.role()?.value !== 'Iframe';
+}
 
-        let document = domNode.contentDocument();
-        if (!document && frameId) {
-          const frame = SDK.FrameManager.FrameManager.instance().getFrame(frameId);
-          if (!frame) {
-            return [];
-          }
-          document = await frame.resourceTreeModel().domModel().requestDocument();
-        }
-        if (!document) {
-          return [];
-        }
+function getModel(frameId: Protocol.Page.FrameId): SDK.AccessibilityModel.AccessibilityModel {
+  const frame = SDK.FrameManager.FrameManager.instance().getFrame(frameId);
+  const model = frame?.resourceTreeModel().target().model(SDK.AccessibilityModel.AccessibilityModel);
+  if (!model) {
+    throw Error('Could not instantiate model for frameId');
+  }
+  return model;
+}
 
-        const axmodel = document.domModel().target().model(SDK.AccessibilityModel.AccessibilityModel);
-        if (!axmodel) {
-          throw new Error('Could not find AccessibilityModel for child document');
-        }
-        // Check if we have requested the node before:
-        let localRoot = axmodel.axNodeForDOMNode(document);
-        if (!localRoot && frameId) {
-          // Request the root node of the iframe document:
-          localRoot = await axmodel.requestRootNode(frameId) || null;
-        }
-        if (!localRoot) {
-          throw new Error('Could not find root node');
-        }
-        return [sdkNodeToAXTreeNode(localRoot)];
-      },
-      id: sdkNode.id(),
-    };
+export async function getRootNode(frameId: Protocol.Page.FrameId): Promise<SDK.AccessibilityModel.AccessibilityNode> {
+  const model = getModel(frameId);
+  const root = await model.requestRootNode(frameId);
+  if (!root) {
+    throw Error('No accessibility root for frame');
   }
+  return root;
+}
 
-  if (!sdkNode.numChildren()) {
-    return {
-      treeNodeData,
-      id: sdkNode.id(),
-    };
+function getFrameIdForNodeOrDocument(node: SDK.DOMModel.DOMNode): Protocol.Page.FrameId {
+  let frameId;
+  if (node instanceof SDK.DOMModel.DOMDocument) {
+    frameId = node.body?.frameId();
+  } else {
+    frameId = node.frameId();
+  }
+  if (!frameId) {
+    throw Error('No frameId for DOM node');
   }
+  return frameId;
+}
 
-  return {
-    treeNodeData,
-    children: async(): Promise<AXTreeNode[]> => {
-      if (sdkNode.numChildren() === sdkNode.children().length) {
-        return sdkNode.children().map(child => sdkNodeToAXTreeNode(child));
-      }
-      // numChildren returns the number of children that this node has, whereas node.children()
-      // returns only children that have been loaded. If these two don't match, that means that
-      // there are backend children that need to be loaded into the model, so request them now.
-      await sdkNode.accessibilityModel().requestAXChildren(sdkNode.id(), sdkNode.getFrameId() || undefined);
+export async function getNodeAndAncestorsFromDOMNode(domNode: SDK.DOMModel.DOMNode):
+    Promise<SDK.AccessibilityModel.AccessibilityNode[]> {
+  let frameId = getFrameIdForNodeOrDocument(domNode);
+  const model = getModel(frameId);
+  const result = await model.requestAndLoadSubTreeToNode(domNode);
+  if (!result) {
+    throw Error('Could not retrieve accessibility node for inspected DOM node');
+  }
 
-      if (sdkNode.numChildren() !== sdkNode.children().length) {
-        throw new Error('Once loaded, number of children and length of children must match.');
-      }
+  const topFrameId = SDK.FrameManager.FrameManager.instance().getTopFrame()?.id;
+  if (!topFrameId) {
+    return result;
+  }
+  while (frameId !== topFrameId) {
+    const node = await SDK.FrameManager.FrameManager.instance().getFrame(frameId)?.getOwnerDOMNodeOrDocument();
+    if (!node) {
+      break;
+    }
+    frameId = getFrameIdForNodeOrDocument(node);
+    const model = getModel(frameId);
+    const ancestors = await model.requestAndLoadSubTreeToNode(node);
+    result.push(...ancestors || []);
+  }
+  return result;
+}
 
-      const treeNodeChildren: AXTreeNode[] = [];
+async function getChildren(node: SDK.AccessibilityModel.AccessibilityNode):
+    Promise<SDK.AccessibilityModel.AccessibilityNode[]> {
+  if (node.role()?.value === 'Iframe') {
+    const domNode = await node.deferredDOMNode()?.resolvePromise();
+    if (!domNode) {
+      throw new Error('Could not find corresponding DOMNode');
+    }
+    const frameId = domNode.frameOwnerFrameId();
+    if (!frameId) {
+      throw Error('No owner frameId on iframe node');
+    }
+    const localRoot = await getRootNode(frameId);
+    return [localRoot];
+  }
+  if (node.hasUnloadedChildren()) {
+    await node.accessibilityModel().requestAXChildren(node.id(), node.getFrameId() || undefined);
+    if (node.numChildren() !== node.children().length) {
+      throw new Error('Once loaded, number of children and length of children must match.');
+    }
+  }
+  return node.children();
+}
 
-      for (const child of sdkNode.children()) {
-        treeNodeChildren.push(sdkNodeToAXTreeNode(child));
-      }
+export async function sdkNodeToAXTreeNodes(sdkNode: SDK.AccessibilityModel.AccessibilityNode): Promise<AXTreeNode[]> {
+  const treeNodeData = sdkNode;
+  if (isLeafNode(sdkNode)) {
+    return [{
+      treeNodeData,
+      id: getNodeId(sdkNode),
+    }];
+  }
 
-      return treeNodeChildren;
+  return [{
+    treeNodeData,
+    children: async(): Promise<AXTreeNode[]> => {
+      const childNodes = await getChildren(sdkNode);
+      const childTreeNodes = await Promise.all(childNodes.map(childNode => sdkNodeToAXTreeNodes(childNode)));
+      return childTreeNodes.flat(1);
     },
-    id: sdkNode.id(),
-  };
+    id: getNodeId(sdkNode),
+  }];
 }
 
 type Data = ElementsComponents.AccessibilityTreeNode.AccessibilityTreeNodeData;
@@ -99,3 +125,7 @@ export function accessibilityNodeRenderer(node: AXTreeNode): LitHtml.TemplateRes
   const ignored = sdkNode.ignored();
   return LitHtml.html`<${tag} .data=${{name, role, ignored} as Data}></${tag}>`;
 }
+
+export function getNodeId(node: SDK.AccessibilityModel.AccessibilityNode): string {
+  return node.getFrameId() + '#' + node.id();
+}

package/front_end/panels/elements/AccessibilityTreeView.ts

@@ -9,15 +9,12 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as AccessibilityTreeUtils from './AccessibilityTreeUtils.js';
 import {ElementsPanel} from './ElementsPanel.js';
 
-export class AccessibilityTreeView extends UI.Widget.VBox {
-  private readonly accessibilityTreeComponent =
-      new TreeOutline.TreeOutline.TreeOutline<AccessibilityTreeUtils.AXTreeNodeData>();
-  private treeData: AccessibilityTreeUtils.AXTreeNode[] = [];
+export class AccessibilityTreeView extends UI.Widget.VBox implements
+    SDK.TargetManager.SDKModelObserver<SDK.AccessibilityModel.AccessibilityModel> {
+  private accessibilityTreeComponent = new TreeOutline.TreeOutline.TreeOutline<AccessibilityTreeUtils.AXTreeNodeData>();
   private readonly toggleButton: HTMLButtonElement;
-  private accessibilityModel: SDK.AccessibilityModel.AccessibilityModel|null = null;
-  private rootAXNode: SDK.AccessibilityModel.AccessibilityNode|null = null;
-  private selectedTreeNode: AccessibilityTreeUtils.AXTreeNode|null = null;
   private inspectedDOMNode: SDK.DOMModel.DOMNode|null = null;
+  private root: SDK.AccessibilityModel.AccessibilityNode|null = null;
 
   constructor(toggleButton: HTMLButtonElement) {
     super();
@@ -27,6 +24,8 @@ export class AccessibilityTreeView extends UI.Widget.VBox {
     this.contentElement.appendChild(this.toggleButton);
     this.contentElement.appendChild(this.accessibilityTreeComponent);
 
+    SDK.TargetManager.TargetManager.instance().observeModels(SDK.AccessibilityModel.AccessibilityModel, this);
+
     // The DOM tree and accessibility are kept in sync as much as possible, so
     // on node selection, update the currently inspected node and reveal in the
     // DOM tree.
@@ -57,154 +56,105 @@ export class AccessibilityTreeView extends UI.Widget.VBox {
     });
   }
 
-  wasShown(): void {
+  async wasShown(): Promise<void> {
+    await this.refreshAccessibilityTree();
     if (this.inspectedDOMNode) {
-      this.loadSubTreeIntoAccessibilityModel(this.inspectedDOMNode);
-    } else {
-      this.accessibilityTreeComponent.expandRecursively(1);
-    }
-  }
-
-  setAccessibilityModel(model: SDK.AccessibilityModel.AccessibilityModel|null): void {
-    this.accessibilityModel = model;
-  }
-
-  wireToDOMModel(domModel: SDK.DOMModel.DOMModel): void {
-    if (!domModel.parentModel()) {
-      this.setAccessibilityModel(domModel.target().model(SDK.AccessibilityModel.AccessibilityModel));
+      await this.loadSubTreeIntoAccessibilityModel(this.inspectedDOMNode);
     }
-    domModel.addEventListener(SDK.DOMModel.Events.NodeInserted, this.domUpdated, this);
-    domModel.addEventListener(SDK.DOMModel.Events.NodeRemoved, this.domUpdatedNode, this);
-    domModel.addEventListener(SDK.DOMModel.Events.AttrModified, this.domUpdatedNode, this);
-    domModel.addEventListener(SDK.DOMModel.Events.AttrRemoved, this.domUpdatedNode, this);
-    domModel.addEventListener(SDK.DOMModel.Events.CharacterDataModified, this.domUpdated, this);
-    domModel.addEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this.domUpdated, this);
-    domModel.addEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this.domUpdated, this);
-    domModel.addEventListener(SDK.DOMModel.Events.DocumentUpdated, this.documentUpdated, this);
-  }
-
-  unwireFromDOMModel(domModel: SDK.DOMModel.DOMModel): void {
-    domModel.removeEventListener(SDK.DOMModel.Events.NodeInserted, this.domUpdated, this);
-    domModel.removeEventListener(SDK.DOMModel.Events.NodeRemoved, this.domUpdatedNode, this);
-    domModel.removeEventListener(SDK.DOMModel.Events.AttrModified, this.domUpdatedNode, this);
-    domModel.removeEventListener(SDK.DOMModel.Events.AttrRemoved, this.domUpdatedNode, this);
-    domModel.removeEventListener(SDK.DOMModel.Events.CharacterDataModified, this.domUpdated, this);
-    domModel.removeEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this.domUpdated, this);
-    domModel.removeEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this.domUpdated, this);
-    domModel.removeEventListener(SDK.DOMModel.Events.DocumentUpdated, this.documentUpdated, this);
   }
 
-  domUpdatedNode(event: Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode}>): void {
-    this.update(event.data.node);
-  }
-
-  domUpdated(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode>): void {
-    this.update(event.data);
-  }
-
-  async update(node: SDK.DOMModel.DOMNode): Promise<void> {
-    const axModel = node.domModel().target().model(SDK.AccessibilityModel.AccessibilityModel);
-    await axModel?.requestAndLoadSubTreeToNode(node);
-    this.renderTree();
-  }
-
-  documentUpdated(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMModel>): void {
-    const domModel = event.data;
-    const axModel = domModel.target().model(SDK.AccessibilityModel.AccessibilityModel);
-    if (domModel.existingDocument() && !domModel.parentModel() && axModel) {
-      this.refreshAccessibilityTree(axModel);
+  async refreshAccessibilityTree(): Promise<void> {
+    if (!this.root) {
+      const frameId = SDK.FrameManager.FrameManager.instance().getTopFrame()?.id;
+      if (!frameId) {
+        throw Error('No top frame');
+      }
+      this.root = await AccessibilityTreeUtils.getRootNode(frameId);
+      if (!this.root) {
+        throw Error('No root');
+      }
     }
+    await this.renderTree();
+    await this.accessibilityTreeComponent.expandRecursively(1);
   }
 
-  renderTree(): void {
-    if (!this.rootAXNode) {
-      this.treeData = [];
-    } else {
-      this.treeData = [AccessibilityTreeUtils.sdkNodeToAXTreeNode(this.rootAXNode)];
+  async renderTree(): Promise<void> {
+    if (!this.root) {
+      return;
     }
-
+    const treeData = await AccessibilityTreeUtils.sdkNodeToAXTreeNodes(this.root);
     this.accessibilityTreeComponent.data = {
       defaultRenderer: AccessibilityTreeUtils.accessibilityNodeRenderer,
-      tree: this.treeData,
+      tree: treeData,
+      filter: (node): TreeOutline.TreeOutline.FilterOption => {
+        return node.ignored() || (node.role()?.value === 'generic' && !node.name()?.value) ?
+            TreeOutline.TreeOutline.FilterOption.FLATTEN :
+            TreeOutline.TreeOutline.FilterOption.SHOW;
+      },
     };
-
-    const axModel = this.inspectedDOMNode?.domModel().target().model(SDK.AccessibilityModel.AccessibilityModel);
-    const inspectedAXNode = axModel?.axNodeForDOMNode(this.inspectedDOMNode);
-    if (inspectedAXNode) {
-      this.selectedTreeNode = AccessibilityTreeUtils.sdkNodeToAXTreeNode(inspectedAXNode);
-      this.accessibilityTreeComponent.expandToAndSelectTreeNode(this.selectedTreeNode);
-    } else {
-      this.accessibilityTreeComponent.expandRecursively(1);
-    }
-  }
-
-  async refreshAccessibilityTree(accessibilityModel: SDK.AccessibilityModel.AccessibilityModel): Promise<void> {
-    // We always expand the root node so we might as well fetch one level of children immediately.
-    const root = await accessibilityModel.requestRootNode();
-    if (!root) {
-      return;
-    }
-
-    this.rootAXNode = root;
-    this.inspectedDOMNode = null;
-    this.renderTree();
   }
 
   // Given a selected DOM node, asks the model to load the missing subtree from the root to the
   // selected node and then re-renders the tree.
   async loadSubTreeIntoAccessibilityModel(selectedNode: SDK.DOMModel.DOMNode): Promise<void> {
-    if (!this.accessibilityModel) {
-      return;
-    }
-
-    // If this node has been loaded previously, the accessibility tree will return it's cached node.
-    // Eventually we'll need some mechanism for forcing it to fetch a new node when we are subscribing
-    // for updates, but TBD later.
-    // EG for a backend tree like:
-    //
-    // A*
-    //   B
-    //     C
-    //   D
-    //     E
-    // Where only A is already loaded into the model, calling requestAndLoadSubTreeToNode(C) will
-    // load [A, B, D, C] into the model, and return C.
-    await this.accessibilityModel.requestAndLoadSubTreeToNode(selectedNode);
-    const inspectedAXNode = this.accessibilityModel.axNodeForDOMNode(selectedNode);
+    const ancestors = await AccessibilityTreeUtils.getNodeAndAncestorsFromDOMNode(selectedNode);
+    const inspectedAXNode = ancestors.find(node => node.backendDOMNodeId() === selectedNode.backendNodeId());
     if (!inspectedAXNode) {
       return;
     }
+    await this.accessibilityTreeComponent.expandNodeIds(ancestors.map(node => node.getFrameId() + '#' + node.id()));
+    await this.accessibilityTreeComponent.focusNodeId(AccessibilityTreeUtils.getNodeId(inspectedAXNode));
+  }
 
-    this.accessibilityTreeComponent.data = {
-      defaultRenderer: AccessibilityTreeUtils.accessibilityNodeRenderer,
-      tree: this.treeData,
-    };
-
-    // These nodes require a special case, as they don't have an unignored node in the
-    // accessibility tree. Someone inspecting these in the DOM is probably expecting to
-    // be focused on the root WebArea of the accessibility tree.
-    // TODO(meredithl): Fix for when the inspected node is ingored in the accessibility
-    // tree. Eg, inspecting <head> in the DOM tree.
-    if (selectedNode.nodeName() === 'BODY' || selectedNode.nodeName() === 'HTML') {
-      this.accessibilityTreeComponent.expandToAndSelectTreeNode(this.treeData[0]);
-      this.selectedTreeNode = this.treeData[0];
+  // A node was revealed through the elements picker.
+  async revealAndSelectNode(inspectedNode: SDK.DOMModel.DOMNode): Promise<void> {
+    if (inspectedNode === this.inspectedDOMNode) {
       return;
     }
-
-    this.selectedTreeNode = AccessibilityTreeUtils.sdkNodeToAXTreeNode(inspectedAXNode);
-    this.accessibilityTreeComponent.expandToAndSelectTreeNode(this.selectedTreeNode);
+    this.inspectedDOMNode = inspectedNode;
+    // We only want to load nodes into the model when the AccessibilityTree is visible.
+    if (this.isShowing()) {
+      await this.loadSubTreeIntoAccessibilityModel(inspectedNode);
+    }
   }
 
-  // Selected node in the DOM has changed, and the corresponding accessibility node may be
-  // unloaded.
+  // Selected node in the DOM tree has changed.
   async selectedNodeChanged(inspectedNode: SDK.DOMModel.DOMNode): Promise<void> {
+    if (this.isShowing()) {
+      return;
+    }
+    if (inspectedNode.ownerDocument && (inspectedNode.nodeName() === 'HTML' || inspectedNode.nodeName() === 'BODY')) {
+      inspectedNode = inspectedNode.ownerDocument;
+    }
     if (inspectedNode === this.inspectedDOMNode) {
       return;
     }
     this.inspectedDOMNode = inspectedNode;
-    // We only want to load nodes into the model when the AccessibilityTree is visible.
-    if (this.isShowing()) {
-      await this.loadSubTreeIntoAccessibilityModel(inspectedNode);
+  }
+
+  treeUpdated({data}: Common.EventTarget
+                  .EventTargetEvent<SDK.AccessibilityModel.EventTypes[SDK.AccessibilityModel.Events.TreeUpdated]>):
+      void {
+    if (!data.root) {
+      this.renderTree();
+      return;
     }
+    const topFrameId = SDK.FrameManager.FrameManager.instance().getTopFrame()?.id;
+    if (data.root?.getFrameId() !== topFrameId) {
+      this.renderTree();
+      return;
+    }
+    this.root = data.root;
+    this.accessibilityTreeComponent.collapseAllNodes();
+
+    this.refreshAccessibilityTree();
+  }
+
+  modelAdded(model: SDK.AccessibilityModel.AccessibilityModel): void {
+    model.addEventListener(SDK.AccessibilityModel.Events.TreeUpdated, this.treeUpdated, this);
+  }
+
+  modelRemoved(model: SDK.AccessibilityModel.AccessibilityModel): void {
+    model.removeEventListener(SDK.AccessibilityModel.Events.TreeUpdated, this.treeUpdated, this);
   }
 }

package/front_end/panels/elements/ElementsPanel.ts

@@ -328,11 +328,6 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   modelAdded(domModel: SDK.DOMModel.DOMModel): void {
     const parentModel = domModel.parentModel();
 
-    // Different frames will have different DOMModels, we only want to add the accessibility model
-    // for the top level frame, as the accessibility tree does not yet support exploring IFrames.
-    if (this.accessibilityTreeView) {
-      this.accessibilityTreeView.wireToDOMModel(domModel);
-    }
     let treeOutline: ElementsTreeOutline|null = parentModel ? ElementsTreeOutline.forDOMModel(parentModel) : null;
     if (!treeOutline) {
       treeOutline = new ElementsTreeOutline(true, true);
@@ -507,6 +502,10 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
         crumbs,
         selectedNode: ElementsComponents.Helper.legacyNodeToElementsComponentsNode(selectedNode),
       };
+
+      if (this.accessibilityTreeView) {
+        this.accessibilityTreeView.selectedNodeChanged(selectedNode);
+      }
     } else {
       this.breadcrumbs.data = {crumbs: [], selectedNode: null};
     }
@@ -837,7 +836,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     if (!treeOutline) {
       return null;
     }
-    return /** @type {?ElementsTreeElement} */ treeOutline.findTreeElement(node) as ElementsTreeElement | null;
+    return treeOutline.findTreeElement(node);
   }
 
   private leaveUserAgentShadowDOM(node: SDK.DOMModel.DOMNode): SDK.DOMModel.DOMNode {
@@ -859,7 +858,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     }
 
     if (this.accessibilityTreeView) {
-      this.accessibilityTreeView.selectedNodeChanged(node);
+      this.accessibilityTreeView.revealAndSelectNode(node);
     }
 
     await UI.ViewManager.ViewManager.instance().showView('elements', false, !focus);

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.943709"
+  "version": "1.0.943986"
 }