chrome-devtools-frontend 1.0.1651641 → 1.0.1654411

package/front_end/models/persistence/PersistenceImpl.ts

@@ -5,6 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../bindings/bindings.js';
 import * as BreakpointManager from '../breakpoints/breakpoints.js';
@@ -13,8 +14,6 @@ import * as Workspace from '../workspace/workspace.js';
 
 import {Automapping, type AutomappingStatus} from './Automapping.js';
 
-let persistenceInstance: PersistenceImpl;
-
 export class PersistenceImpl extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   readonly #workspace: Workspace.Workspace.WorkspaceImpl;
   readonly #breakpointManager: BreakpointManager.BreakpointManager.BreakpointManager;
@@ -40,14 +39,14 @@ export class PersistenceImpl extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     breakpointManager: BreakpointManager.BreakpointManager.BreakpointManager|null,
   } = {forceNew: null, workspace: null, breakpointManager: null}): PersistenceImpl {
     const {forceNew, workspace, breakpointManager} = opts;
-    if (!persistenceInstance || forceNew) {
+    if (!Root.DevToolsContext.globalInstance().has(PersistenceImpl) || forceNew) {
       if (!workspace || !breakpointManager) {
         throw new Error('Missing arguments for workspace');
       }
-      persistenceInstance = new PersistenceImpl(workspace, breakpointManager);
+      Root.DevToolsContext.globalInstance().set(PersistenceImpl, new PersistenceImpl(workspace, breakpointManager));
     }
 
-    return persistenceInstance;
+    return Root.DevToolsContext.globalInstance().get(PersistenceImpl);
   }
 
   addNetworkInterceptor(interceptor: (arg0: Workspace.UISourceCode.UISourceCode) => boolean): void {

package/front_end/models/trace/EntityMapper.ts

@@ -118,7 +118,7 @@ export class EntityMapper {
     const sourceLocationEvents: Types.Events.Event[] = [];
     // The events that don't match the source location, but that we should keep mapped to its current entity.
     const unrelatedEvents: Types.Events.Event[] = [];
-    currentEntityEvents?.forEach(e => {
+    currentEntityEvents?.forEach((e: Types.Events.Event) => {
       const cf = Helpers.Trace.getStackTraceTopCallFrameInEventPayload(e);
 
       const matchesCallFrame = cf && Helpers.Trace.isMatchingCallFrame(cf, callFrame);

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -371,7 +371,7 @@ function createV2MarkdownRenderer(conversation?: AiAssistanceModel.AiConversatio
   const resourceTreeModel = primaryTarget?.model(SDK.ResourceTreeModel.ResourceTreeModel);
   const context = conversation?.selectedContext;
 
-  if (context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {
+  if (context instanceof AiAssistanceModel.PerformanceTraceContext.PerformanceTraceContext) {
     const focus = context.getItem();
     options.mainFrameId = focus.parsedTrace.data.Meta.mainFrameId;
     options.lookupTraceEvent = focus.lookupEvent.bind(focus);
@@ -400,7 +400,7 @@ function getMarkdownRenderer(conversation?: AiAssistanceModel.AiConversation.AiC
 
   const context = conversation?.selectedContext;
 
-  if (context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {
+  if (context instanceof AiAssistanceModel.PerformanceTraceContext.PerformanceTraceContext) {
     const focus = context.getItem();
     return new PerformanceAgentMarkdownRenderer(focus.parsedTrace.data.Meta.mainFrameId, focus.lookupEvent.bind(focus));
   }
@@ -640,12 +640,12 @@ function createRequestContext(request: SDK.NetworkRequest.NetworkRequest|
   return new AiAssistanceModel.RequestContext.RequestContext(request, calculator);
 }
 
-function createPerformanceTraceContext(focus: AiAssistanceModel.AIContext.AgentFocus|null):
-    AiAssistanceModel.PerformanceAgent.PerformanceTraceContext|null {
+function createPerformanceTraceContext(focus: AiAssistanceModel.AIContext.AgentFocus|
+                                       null): AiAssistanceModel.PerformanceTraceContext.PerformanceTraceContext|null {
   if (!focus) {
     return null;
   }
-  return new AiAssistanceModel.PerformanceAgent.PerformanceTraceContext(focus);
+  return new AiAssistanceModel.PerformanceTraceContext.PerformanceTraceContext(focus);
 }
 
 function createStorageContext(item: AiAssistanceModel.StorageItem.StorageItem|null):
@@ -707,7 +707,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
   #selectedFile: AiAssistanceModel.FileContext.FileContext|null = null;
   #selectedElement: AiAssistanceModel.DOMNodeContext.DOMNodeContext|null = null;
-  #selectedPerformanceTrace: AiAssistanceModel.PerformanceAgent.PerformanceTraceContext|null = null;
+  #selectedPerformanceTrace: AiAssistanceModel.PerformanceTraceContext.PerformanceTraceContext|null = null;
   #selectedRequest: AiAssistanceModel.RequestContext.RequestContext|null = null;
 
   #selectedAccessibility: AiAssistanceModel.AccessibilityContext.AccessibilityContext|null = null;
@@ -1307,7 +1307,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         }
 
         this.#selectedPerformanceTrace =
-            Boolean(ev.data) ? new AiAssistanceModel.PerformanceAgent.PerformanceTraceContext(ev.data) : null;
+            Boolean(ev.data) ? new AiAssistanceModel.PerformanceTraceContext.PerformanceTraceContext(ev.data) : null;
 
         this.#updateConversationState(this.#conversation);
       };
@@ -1535,7 +1535,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     if (context instanceof AiAssistanceModel.FileContext.FileContext) {
       return Common.Revealer.reveal(context.getItem().uiLocation(0, 0));
     }
-    if (context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {
+    if (context instanceof AiAssistanceModel.PerformanceTraceContext.PerformanceTraceContext) {
       const focus = context.getItem();
       if (focus.callTree) {
         const event = focus.callTree.selectedNode?.event ?? focus.callTree.rootNode.event;
@@ -1778,7 +1778,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       this.#selectedElement = data;
     } else if (data instanceof AiAssistanceModel.RequestContext.RequestContext) {
       this.#selectedRequest = data;
-    } else if (data instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {
+    } else if (data instanceof AiAssistanceModel.PerformanceTraceContext.PerformanceTraceContext) {
       this.#selectedPerformanceTrace = data;
 
     } else if (data instanceof AiAssistanceModel.AccessibilityContext.AccessibilityContext) {

package/front_end/panels/ai_assistance/ExportConversation.ts

@@ -13,7 +13,10 @@ export async function saveToDisk(conversation: AiAssistanceModel.AiConversation.
   const titleFormatted = Platform.StringUtilities.toSnakeCase(conversation.title || '');
   const prefix = 'devtools_';
   const suffix = '.md';
-  const maxTitleLength = 64 - prefix.length - suffix.length;
+  // The Windows save dialog / Chrome wrapper limits the suggested filename
+  // to 63 characters (due to a 64-byte null-terminated buffer).
+  // Capping the total filename length at 63 avoids truncation of the extension.
+  const maxTitleLength = 63 - prefix.length - suffix.length;
   let finalTitle = titleFormatted || 'conversation';
   if (finalTitle.length > maxTitleLength) {
     finalTitle = finalTitle.substring(0, maxTitleLength);

package/front_end/panels/ai_assistance/components/ChatInput.ts

@@ -180,7 +180,7 @@ function getContextRemoveLabel(context: AiAssistanceModel.AiAgent.ConversationCo
   if (context instanceof AiAssistanceModel.RequestContext.RequestContext) {
     return lockedString(UIStringsNotTranslate.removeContextRequest);
   }
-  if (context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {
+  if (context instanceof AiAssistanceModel.PerformanceTraceContext.PerformanceTraceContext) {
     return lockedString(UIStringsNotTranslate.removeContextPerfInsight);
   }
   if (context instanceof AiAssistanceModel.StorageAgent.StorageContext) {
@@ -357,7 +357,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
                             PanelUtils.PanelUtils.getIconForSourceFile(input.context.getItem()) :
                             input.context instanceof AiAssistanceModel.AccessibilityContext.AccessibilityContext ?
                             html`<devtools-icon class="icon" name="performance" title="Lighthouse"></devtools-icon>` :
-                            input.context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext ?
+                            input.context instanceof AiAssistanceModel.PerformanceTraceContext.PerformanceTraceContext ?
                             html`<devtools-icon class="icon" name="performance" title="Performance"></devtools-icon>` :
                             input.context instanceof AiAssistanceModel.StorageAgent.StorageContext ?
                             html`<devtools-icon class="icon" name="table" title="Storage"></devtools-icon>` :

package/front_end/panels/application/IndexedDBViews.ts

@@ -262,9 +262,8 @@ export class IDBDataView extends UI.View.SimpleView {
   private lastKey?: any;
   private summaryBarElement?: HTMLElement;
 
-  constructor(
-      model: IndexedDBModel, databaseId: DatabaseId, objectStore: ObjectStore, index: Index|null,
-      refreshObjectStoreCallback: () => void) {
+  constructor(model: IndexedDBModel, databaseId: DatabaseId, objectStore: ObjectStore, index: Index|null,
+              refreshObjectStoreCallback: () => void) {
     super({
       title: i18nString(UIStrings.idb),
       viewId: 'idb',
@@ -287,8 +286,8 @@ export class IDBDataView extends UI.View.SimpleView {
     this.deleteSelectedButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, _event => {
       void this.deleteButtonClicked(null);
     });
-    this.deleteSelectedButton.element.setAttribute(
-        'jslog', `${VisualLogging.action('delete-selected').track({click: true})}`);
+    this.deleteSelectedButton.element.setAttribute('jslog',
+                                                   `${VisualLogging.action('delete-selected').track({click: true})}`);
 
     this.clearButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.clearObjectStore), 'clear');
     this.clearButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, () => {
@@ -434,8 +433,8 @@ export class IDBDataView extends UI.View.SimpleView {
     this.updateData(false);
   }
 
-  private populateContextMenu(
-      contextMenu: UI.ContextMenu.ContextMenu, gridNode: DataGrid.DataGrid.DataGridNode<unknown>): void {
+  private populateContextMenu(contextMenu: UI.ContextMenu.ContextMenu,
+                              gridNode: DataGrid.DataGrid.DataGridNode<unknown>): void {
     const node = (gridNode as IDBDataGridNode);
     if (node.valueObjectPresentation) {
       contextMenu.revealSection().appendItem(i18nString(UIStrings.expandRecursively), () => {
@@ -510,26 +509,7 @@ export class IDBDataView extends UI.View.SimpleView {
     function callback(this: IDBDataView, entries: Entry[], hasMore: boolean): void {
       this.clear();
       this.entries = entries;
-      let selectedNode: IDBDataGridNode|null = null;
-      for (let i = 0; i < entries.length; ++i) {
-        // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const data: any = {};
-        data['number'] = i + skipCount;
-        data['key'] = entries[i].key;
-        data['primary-key'] = entries[i].primaryKey;
-        data['value'] = entries[i].value;
-
-        const node = new IDBDataGridNode(data);
-        this.dataGrid.rootNode().appendChild(node);
-        if (data['number'] <= selected) {
-          selectedNode = node;
-        }
-      }
-
-      if (selectedNode) {
-        selectedNode.select();
-      }
+      this.populateDataGrid(entries, skipCount, selected);
       this.pageBackButton.setEnabled(Boolean(skipCount));
       this.pageForwardButton.setEnabled(hasMore);
       this.needsRefresh.setVisible(false);
@@ -539,16 +519,38 @@ export class IDBDataView extends UI.View.SimpleView {
 
     const idbKeyRange = key ? window.IDBKeyRange.lowerBound(key) : null;
     if (this.isIndex && this.index) {
-      this.model.loadIndexData(
-          this.databaseId, this.objectStore.name, this.index.name, idbKeyRange, skipCount, pageSize,
-          callback.bind(this));
+      this.model.loadIndexData(this.databaseId, this.objectStore.name, this.index.name, idbKeyRange, skipCount,
+                               pageSize, callback.bind(this));
     } else {
-      this.model.loadObjectStoreData(
-          this.databaseId, this.objectStore.name, idbKeyRange, skipCount, pageSize, callback.bind(this));
+      this.model.loadObjectStoreData(this.databaseId, this.objectStore.name, idbKeyRange, skipCount, pageSize,
+                                     callback.bind(this));
     }
     void this.model.getMetadata(this.databaseId, this.objectStore).then(this.updateSummaryBar.bind(this));
   }
 
+  private populateDataGrid(entries: Entry[], skipCount: number, selected: number): void {
+    let selectedNode: IDBDataGridNode|null = null;
+    for (let i = 0; i < entries.length; ++i) {
+      // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const data: any = {};
+      data['number'] = i + skipCount;
+      data['key'] = entries[i].key;
+      data['primary-key'] = entries[i].primaryKey;
+      data['value'] = entries[i].value;
+
+      const node = new IDBDataGridNode(data);
+      this.dataGrid.rootNode().appendChild(node);
+      if (data['number'] <= selected) {
+        selectedNode = node;
+      }
+    }
+
+    if (selectedNode) {
+      selectedNode.select();
+    }
+  }
+
   private updateSummaryBar(metadata: ObjectStoreMetadata|null): void {
     if (!this.summaryBarElement) {
       this.summaryBarElement = this.element.createChild('div', 'object-store-summary-bar');
@@ -578,10 +580,10 @@ export class IDBDataView extends UI.View.SimpleView {
   }
 
   private async clearButtonClicked(): Promise<void> {
-    const ok = await UI.UIUtils.ConfirmDialog.show(
-        i18nString(UIStrings.objectStoreWillBeCleared),
-        i18nString(UIStrings.confirmClearObjectStore, {PH1: this.objectStore.name}), this.element,
-        {jslogContext: 'clear-object-store-confirmation'});
+    const ok =
+        await UI.UIUtils.ConfirmDialog.show(i18nString(UIStrings.objectStoreWillBeCleared),
+                                            i18nString(UIStrings.confirmClearObjectStore, {PH1: this.objectStore.name}),
+                                            this.element, {jslogContext: 'clear-object-store-confirmation'});
     if (ok) {
       this.clearButton.setEnabled(false);
       this.clearingObjectStore = true;

package/front_end/panels/application/components/AdsView.ts

@@ -141,6 +141,8 @@ export class AdsView extends UI.Widget.Widget {
       averageViewportAdCount: 0,
       totalAdCpuTime: 0,
       totalAdNetworkBytes: 0,
+      updateAdFrames: [],
+      removeAdFrames: [],
     };
     this.requestUpdate();
   }
@@ -209,6 +211,8 @@ export class AdsView extends UI.Widget.Widget {
       averageViewportAdCount: 0,
       totalAdCpuTime: 0,
       totalAdNetworkBytes: 0,
+      updateAdFrames: [],
+      removeAdFrames: [],
     };
     this.requestUpdate();
   }

package/front_end/panels/autofill/AutofillView.ts

@@ -298,7 +298,7 @@ export class AutofillView extends UI.Widget.VBox {
   #matches: AutofillManager.AutofillManager.Match[] = [];
   #highlightedMatches: AutofillManager.AutofillManager.Match[] = [];
 
-  constructor(autofillManager = AutofillManager.AutofillManager.AutofillManager.instance(), view = DEFAULT_VIEW) {
+  constructor(autofillManager: AutofillManager.AutofillManager.AutofillManager, view = DEFAULT_VIEW) {
     super({useShadowDom: true});
     this.#autofillManager = autofillManager;
     this.#view = view;

package/front_end/panels/autofill/autofill-meta.ts

@@ -36,8 +36,9 @@ UI.ViewManager.registerViewExtension({
   commandPrompt: i18nLazyString(UIStrings.showAutofill),
   order: 100,
   persistence: UI.ViewManager.ViewPersistence.CLOSEABLE,
-  async loadView() {
+  async loadView(universe) {
     const Autofill = await loadAutofillModule();
-    return new Autofill.AutofillView.AutofillView();
+    const {autofillManager} = universe;
+    return new Autofill.AutofillView.AutofillView(autofillManager);
   },
 });

package/front_end/panels/elements/AccessibilityTreeUtils.ts

@@ -18,8 +18,10 @@ function isLeafNode(node: SDK.AccessibilityModel.AccessibilityNode): boolean {
   return node.numChildren() === 0 && node.role()?.value !== 'Iframe';
 }
 
-function getModel(frameId: Protocol.Page.FrameId): SDK.AccessibilityModel.AccessibilityModel {
-  const frame = SDK.FrameManager.FrameManager.instance().getFrame(frameId);
+function getModel(frameId: Protocol.Page.FrameId,
+                  frameManager: SDK.FrameManager.FrameManager =
+                      SDK.FrameManager.FrameManager.instance()): SDK.AccessibilityModel.AccessibilityModel {
+  const frame = frameManager.getFrame(frameId);
   const model = frame?.resourceTreeModel().target().model(SDK.AccessibilityModel.AccessibilityModel);
   if (!model) {
     throw new Error('Could not instantiate model for frameId');
@@ -27,8 +29,11 @@ function getModel(frameId: Protocol.Page.FrameId): SDK.AccessibilityModel.Access
   return model;
 }
 
-export async function getRootNode(frameId: Protocol.Page.FrameId): Promise<SDK.AccessibilityModel.AccessibilityNode> {
-  const model = getModel(frameId);
+export async function getRootNode(
+    frameId: Protocol.Page.FrameId,
+    frameManager: SDK.FrameManager.FrameManager =
+        SDK.FrameManager.FrameManager.instance()): Promise<SDK.AccessibilityModel.AccessibilityNode> {
+  const model = getModel(frameId, frameManager);
   const root = await model.requestRootNode(frameId);
   if (!root) {
     throw new Error('No accessibility root for frame');
@@ -49,33 +54,36 @@ function getFrameIdForNodeOrDocument(node: SDK.DOMModel.DOMNode): Protocol.Page.
   return frameId;
 }
 
-export async function getNodeAndAncestorsFromDOMNode(domNode: SDK.DOMModel.DOMNode):
-    Promise<SDK.AccessibilityModel.AccessibilityNode[]> {
+export async function getNodeAndAncestorsFromDOMNode(
+    domNode: SDK.DOMModel.DOMNode,
+    frameManager: SDK.FrameManager.FrameManager =
+        SDK.FrameManager.FrameManager.instance()): Promise<SDK.AccessibilityModel.AccessibilityNode[]> {
   let frameId = getFrameIdForNodeOrDocument(domNode);
-  const model = getModel(frameId);
+  const model = getModel(frameId, frameManager);
   const result = await model.requestAndLoadSubTreeToNode(domNode);
   if (!result) {
     throw new Error('Could not retrieve accessibility node for inspected DOM node');
   }
 
-  const outermostFrameId = SDK.FrameManager.FrameManager.instance().getOutermostFrame()?.id;
+  const outermostFrameId = frameManager.getOutermostFrame()?.id;
   if (!outermostFrameId) {
     return result;
   }
   while (frameId !== outermostFrameId) {
-    const node = await SDK.FrameManager.FrameManager.instance().getFrame(frameId)?.getOwnerDOMNodeOrDocument();
+    const node = await frameManager.getFrame(frameId)?.getOwnerDOMNodeOrDocument();
     if (!node) {
       break;
     }
     frameId = getFrameIdForNodeOrDocument(node);
-    const model = getModel(frameId);
+    const model = getModel(frameId, frameManager);
     const ancestors = await model.requestAndLoadSubTreeToNode(node);
     result.push(...ancestors || []);
   }
   return result;
 }
 
-async function getChildren(node: SDK.AccessibilityModel.AccessibilityNode):
+async function getChildren(node: SDK.AccessibilityModel.AccessibilityNode,
+                           frameManager: SDK.FrameManager.FrameManager = SDK.FrameManager.FrameManager.instance()):
     Promise<SDK.AccessibilityModel.AccessibilityNode[]> {
   if (node.role()?.value === 'Iframe') {
     const domNode = await node.deferredDOMNode()?.resolvePromise();
@@ -86,13 +94,15 @@ async function getChildren(node: SDK.AccessibilityModel.AccessibilityNode):
     if (!frameId) {
       throw new Error('No owner frameId on iframe node');
     }
-    const localRoot = await getRootNode(frameId);
+    const localRoot = await getRootNode(frameId, frameManager);
     return [localRoot];
   }
   return await node.accessibilityModel().requestAXChildren(node.id(), node.getFrameId() || undefined);
 }
 
-export async function sdkNodeToAXTreeNodes(sdkNode: SDK.AccessibilityModel.AccessibilityNode): Promise<AXTreeNode[]> {
+export async function sdkNodeToAXTreeNodes(
+    sdkNode: SDK.AccessibilityModel.AccessibilityNode,
+    frameManager: SDK.FrameManager.FrameManager = SDK.FrameManager.FrameManager.instance()): Promise<AXTreeNode[]> {
   const treeNodeData = sdkNode;
   if (isLeafNode(sdkNode)) {
     return [{
@@ -104,8 +114,9 @@ export async function sdkNodeToAXTreeNodes(sdkNode: SDK.AccessibilityModel.Acces
   return [{
     treeNodeData,
     children: async () => {
-      const childNodes = await getChildren(sdkNode);
-      const childTreeNodes = await Promise.all(childNodes.map(childNode => sdkNodeToAXTreeNodes(childNode)));
+      const childNodes = await getChildren(sdkNode, frameManager);
+      const childTreeNodes =
+          await Promise.all(childNodes.map(childNode => sdkNodeToAXTreeNodes(childNode, frameManager)));
       return childTreeNodes.flat(1);
     },
     id: getNodeId(sdkNode),

package/front_end/panels/elements/AccessibilityTreeView.ts

@@ -19,11 +19,14 @@ export class AccessibilityTreeView extends UI.Widget.VBox implements
   private inspectedDOMNode: SDK.DOMModel.DOMNode|null = null;
   private root: SDK.AccessibilityModel.AccessibilityNode|null = null;
 
-  constructor(
-      accessibilityTreeComponent: TreeOutline.TreeOutline.TreeOutline<AccessibilityTreeUtils.AXTreeNodeData>) {
+  readonly #frameManager: SDK.FrameManager.FrameManager;
+
+  constructor(accessibilityTreeComponent: TreeOutline.TreeOutline.TreeOutline<AccessibilityTreeUtils.AXTreeNodeData>,
+              frameManager: SDK.FrameManager.FrameManager = SDK.FrameManager.FrameManager.instance()) {
     super();
     this.registerRequiredCSS(accessibilityTreeViewStyles);
     this.accessibilityTreeComponent = accessibilityTreeComponent;
+    this.#frameManager = frameManager;
 
     const container = this.contentElement.createChild('div');
 
@@ -75,11 +78,11 @@ export class AccessibilityTreeView extends UI.Widget.VBox implements
 
   async refreshAccessibilityTree(): Promise<void> {
     if (!this.root) {
-      const frameId = SDK.FrameManager.FrameManager.instance().getOutermostFrame()?.id;
+      const frameId = this.#frameManager.getOutermostFrame()?.id;
       if (!frameId) {
         throw new Error('No top frame');
       }
-      this.root = await AccessibilityTreeUtils.getRootNode(frameId);
+      this.root = await AccessibilityTreeUtils.getRootNode(frameId, this.#frameManager);
       if (!this.root) {
         throw new Error('No root');
       }
@@ -90,15 +93,15 @@ export class AccessibilityTreeView extends UI.Widget.VBox implements
 
   async renderTree(): Promise<void> {
     if (!this.root) {
-      const frameId = SDK.FrameManager.FrameManager.instance().getOutermostFrame()?.id;
+      const frameId = this.#frameManager.getOutermostFrame()?.id;
       if (frameId) {
-        this.root = await AccessibilityTreeUtils.getRootNode(frameId);
+        this.root = await AccessibilityTreeUtils.getRootNode(frameId, this.#frameManager);
       }
     }
     if (!this.root) {
       return;
     }
-    const treeData = await AccessibilityTreeUtils.sdkNodeToAXTreeNodes(this.root);
+    const treeData = await AccessibilityTreeUtils.sdkNodeToAXTreeNodes(this.root, this.#frameManager);
     this.accessibilityTreeComponent.data = {
       defaultRenderer: AccessibilityTreeUtils.accessibilityNodeRenderer,
       tree: treeData,
@@ -113,7 +116,7 @@ export class AccessibilityTreeView extends UI.Widget.VBox implements
   // 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> {
-    const ancestors = await AccessibilityTreeUtils.getNodeAndAncestorsFromDOMNode(selectedNode);
+    const ancestors = await AccessibilityTreeUtils.getNodeAndAncestorsFromDOMNode(selectedNode, this.#frameManager);
     const inspectedAXNode = ancestors.find(node => node.backendDOMNodeId() === selectedNode.backendNodeId());
     if (!inspectedAXNode) {
       return;
@@ -160,7 +163,7 @@ export class AccessibilityTreeView extends UI.Widget.VBox implements
       void this.renderTree();
       return;
     }
-    const outermostFrameId = SDK.FrameManager.FrameManager.instance().getOutermostFrame()?.id;
+    const outermostFrameId = this.#frameManager.getOutermostFrame()?.id;
     if (data.root?.getFrameId() !== outermostFrameId) {
       void this.renderTree();
       return;

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -2136,6 +2136,11 @@ export class ElementsTreeOutline extends
       visibleChildren.push(pickerIconPseudoElement);
     }
 
+    const interestButtonPseudoElement = node.interestButtonPseudoElement();
+    if (interestButtonPseudoElement) {
+      visibleChildren.push(interestButtonPseudoElement);
+    }
+
     const backdropPseudoElement = node.backdropPseudoElement();
     if (backdropPseudoElement) {
       visibleChildren.push(backdropPseudoElement);