chrome-devtools-frontend 1.0.1696961 → 1.0.1697998

package/front_end/models/elements/DOMChanges.ts

@@ -0,0 +1,238 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Platform from '../../core/platform/platform.js';
+import type * as SDK from '../../core/sdk/sdk.js';
+import type * as ChangeTracker from '../change_tracker/change_tracker.js';
+import type * as CommentManager from '../comment_manager/comment_manager.js';
+
+type Tracker = ChangeTracker.ChangeTracker.ChangeTracker|undefined;
+
+/**
+ * Maximum number of characters of page controlled data (tag names, attribute names and values,
+ * text node values and HTML) that a change description embeds. The inspected page fully controls
+ * these strings and `Changed HTML from ... to ...` in particular can otherwise hold on to the
+ * entire subtree of an element.
+ */
+export const MAX_VALUE_LENGTH = 100;
+
+/** Shortens page controlled data so that both its start and its end stay recognizable. */
+function trimValue(value: string): string {
+  return Platform.StringUtilities.trimMiddle(value, MAX_VALUE_LENGTH);
+}
+
+function buildAnchor(node: SDK.DOMModel.DOMNode,
+                     selector = 'element'): CommentManager.CommentManager.CommentAnchorSignature {
+  return {
+    vePath: 'Panel: elements > Tree: elements > TreeItem',
+    textSignature: selector,
+    node: {
+      backendNodeId: node.backendNodeId(),
+      targetId: node.domModel().target().id(),
+    },
+  };
+}
+
+/**
+ * Parses a raw attribute string (e.g. 'class="btn"', 'data-id=123', or 'disabled')
+ * into its attribute name and unquoted value for single-attribute inline edits.
+ */
+function parseAttributeText(text: string): {name: string, value: string} {
+  const trimmed = text.trim();
+  const eqIdx = trimmed.indexOf('=');
+  if (eqIdx === -1) {
+    return {name: trimmed, value: ''};
+  }
+  const name = trimmed.slice(0, eqIdx).trim();
+  let value = trimmed.slice(eqIdx + 1).trim();
+  if (value.length >= 2 &&
+      ((value.startsWith('"') && value.endsWith('"')) || (value.startsWith('\'') && value.endsWith('\'')))) {
+    value = value.slice(1, -1);
+  }
+  return {name, value};
+}
+
+function describeAddAttribute(attributeName: string, value?: string): string {
+  if (value !== undefined && value !== '') {
+    return `Added attribute ${trimValue(attributeName)}="${trimValue(value)}"`;
+  }
+  return `Added attribute "${trimValue(attributeName)}"`;
+}
+
+function describeRemoveAttribute(attributeName: string): string {
+  return `Removed attribute "${trimValue(attributeName)}"`;
+}
+
+/**
+ * Describes a modification of an existing attribute, which covers renaming the attribute, changing
+ * its value, or both at once. `oldValue` is `undefined` if the previous value is unknown.
+ */
+function describeAttributeChange(
+    oldAttributeName: string,
+    oldValue: string|undefined,
+    newAttributeName: string,
+    newValue: string,
+    ): string {
+  if (oldAttributeName !== newAttributeName) {
+    if (oldValue !== undefined && oldValue !== newValue) {
+      return `Renamed attribute "${trimValue(oldAttributeName)}"="${trimValue(oldValue)}" to "${
+          trimValue(newAttributeName)}"="${trimValue(newValue)}"`;
+    }
+    return `Renamed attribute "${trimValue(oldAttributeName)}" to "${trimValue(newAttributeName)}"`;
+  }
+  if (oldValue !== undefined) {
+    return `Changed attribute "${trimValue(newAttributeName)}" from "${trimValue(oldValue)}" to "${
+        trimValue(newValue)}"`;
+  }
+  return `Changed attribute "${trimValue(newAttributeName)}" to "${trimValue(newValue)}"`;
+}
+
+export interface AttributeEdit {
+  /** Name of the edited attribute, or an empty string when a new attribute is added. */
+  attributeName: string;
+  /** Raw attribute text before the edit, if there was any. */
+  oldText: string|null;
+  /** Raw attribute text the user committed. Empty when the attribute is removed. */
+  newText: string;
+}
+
+function describeAttributeEdit({attributeName, oldText, newText}: AttributeEdit): string {
+  const parsedNew = parseAttributeText(newText);
+  const parsedOld = oldText !== null ? parseAttributeText(oldText) : undefined;
+
+  if (!newText.trim()) {
+    return describeRemoveAttribute(attributeName.trim());
+  }
+  if (!attributeName.trim()) {
+    return describeAddAttribute(parsedNew.name, parsedNew.value);
+  }
+  return describeAttributeChange(
+      attributeName.trim(),
+      parsedOld?.value,
+      parsedNew.name || attributeName.trim(),
+      parsedNew.value,
+  );
+}
+
+/**
+ * These strings are for the consumption by AI agents, they don't need to be translated.
+ */
+function describeTagNameEdit(oldTagName: string, newTagName: string): string {
+  return `Renamed tag from <${trimValue(oldTagName)}> to <${trimValue(newTagName)}>`;
+}
+
+function describeTextNodeEdit(oldText: string, newText: string): string {
+  return `Changed text from "${trimValue(oldText)}" to "${trimValue(newText)}"`;
+}
+
+function describeNodeRemoval(tagName: string): string {
+  return `Removed node <${trimValue(tagName)}>`;
+}
+
+function describeHTMLEdit(oldValue?: string, newValue?: string): string {
+  if (oldValue !== undefined && newValue !== undefined) {
+    return `Changed HTML from "${trimValue(oldValue)}" to "${trimValue(newValue)}"`;
+  }
+  if (newValue !== undefined) {
+    return `Changed HTML to "${trimValue(newValue)}"`;
+  }
+  return 'Edited HTML';
+}
+
+function describeVisibilityToggle(tagName: string, hidden: boolean): string {
+  return hidden ? `Hid element <${trimValue(tagName)}>` : `Unhid element <${trimValue(tagName)}>`;
+}
+
+function describeNodeDuplication(tagName: string): string {
+  return `Duplicated node <${trimValue(tagName)}>`;
+}
+
+function describeNodeMove(tagName: string, directionUp: boolean): string {
+  return `Moved node <${trimValue(tagName)}> ${directionUp ? 'up' : 'down'}`;
+}
+
+function describeNodeDrop(tagName: string): string {
+  return `Moved node <${trimValue(tagName)}> via drag and drop`;
+}
+
+function describeNodePaste(tagName: string, isCut: boolean): string {
+  return isCut ? `Pasted (moved) node <${trimValue(tagName)}>` : `Pasted node <${trimValue(tagName)}>`;
+}
+
+export function trackAttributeEdit(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined,
+                                   edit: AttributeEdit): void {
+  if (!tracker?.isTracking) {
+    return;
+  }
+  tracker.trackChange(describeAttributeEdit(edit), buildAnchor(node, selector));
+}
+
+export function trackTagNameEdit(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined,
+                                 oldTagName: string, newTagName: string): void {
+  if (!tracker?.isTracking) {
+    return;
+  }
+  tracker.trackChange(describeTagNameEdit(oldTagName, newTagName), buildAnchor(node, selector));
+}
+
+export function trackTextNodeEdit(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined,
+                                  oldText: string, newText: string): void {
+  if (!tracker?.isTracking) {
+    return;
+  }
+  tracker.trackChange(describeTextNodeEdit(oldText, newText), buildAnchor(node, selector));
+}
+
+export function trackNodeRemoval(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined): void {
+  if (!tracker?.isTracking) {
+    return;
+  }
+  tracker.trackChange(describeNodeRemoval(node.nodeName().toLowerCase()), buildAnchor(node, selector));
+}
+
+export function trackHTMLEdit(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined,
+                              oldValue: string, newValue: string): void {
+  if (!tracker?.isTracking) {
+    return;
+  }
+  tracker.trackChange(describeHTMLEdit(oldValue, newValue), buildAnchor(node, selector));
+}
+
+export function trackVisibilityToggle(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined,
+                                      hidden: boolean): void {
+  if (!tracker?.isTracking) {
+    return;
+  }
+  tracker.trackChange(describeVisibilityToggle(node.nodeName().toLowerCase(), hidden), buildAnchor(node, selector));
+}
+
+export function trackNodeDuplication(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined): void {
+  if (!tracker?.isTracking) {
+    return;
+  }
+  tracker.trackChange(describeNodeDuplication(node.nodeName().toLowerCase()), buildAnchor(node, selector));
+}
+
+export function trackNodeMove(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined,
+                              directionUp: boolean): void {
+  if (!tracker?.isTracking) {
+    return;
+  }
+  tracker.trackChange(describeNodeMove(node.nodeName().toLowerCase(), directionUp), buildAnchor(node, selector));
+}
+
+export function trackNodeDrop(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined): void {
+  if (!tracker?.isTracking) {
+    return;
+  }
+  tracker.trackChange(describeNodeDrop(node.nodeName().toLowerCase()), buildAnchor(node, selector));
+}
+
+export function trackNodePaste(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined,
+                               isCut: boolean): void {
+  if (!tracker?.isTracking) {
+    return;
+  }
+  tracker.trackChange(describeNodePaste(node.nodeName().toLowerCase(), isCut), buildAnchor(node, selector));
+}

package/front_end/models/elements/elements.ts

@@ -2,8 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as DOMChanges from './DOMChanges.js';
 import * as ElementUpdateRecord from './ElementUpdateRecord.js';
 
 export {
+  DOMChanges,
   ElementUpdateRecord,
 };

package/front_end/models/issues_manager/MarkdownIssueDescription.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Platform from '../../core/platform/platform.js';
 import * as Marked from '../../third_party/marked/marked.js';
 
 /**
@@ -57,8 +58,7 @@ export interface IssueDescription {
 
 export async function getFileContent(url: URL): Promise<string> {
   try {
-    const response = await fetch(url.toString());
-    return await response.text();
+    return await Platform.HostRuntime.HOST_RUNTIME.loadTextFile(url);
   } catch {
     throw new Error(
         `Markdown file ${url.toString()} not found. Make sure it is correctly listed in the relevant BUILD.gn files.`);

package/front_end/models/live-metrics/LiveMetrics.ts

@@ -42,8 +42,7 @@ class InjectedScript {
   static async get(): Promise<string> {
     if (!this.#injectedScript) {
       const url = new URL('./web-vitals-injected/web-vitals-injected.generated.js', import.meta.url);
-      const result = await fetch(url);
-      this.#injectedScript = await result.text();
+      this.#injectedScript = await Platform.HostRuntime.HOST_RUNTIME.loadTextFile(url);
     }
     return this.#injectedScript;
   }

package/front_end/models/trace/ModelImpl.ts

@@ -232,12 +232,6 @@ export class ModelUpdateEvent extends Event {
   }
 }
 
-declare global {
-  interface HTMLElementEventMap {
-    [ModelUpdateEvent.eventName]: ModelUpdateEvent;
-  }
-}
-
 export function isModelUpdateDataComplete(eventData: ModelUpdateEventData): eventData is ModelUpdateEventComplete {
   return eventData.type === ModelUpdateType.COMPLETE;
 }

package/front_end/models/trace/Processor.ts

@@ -19,7 +19,10 @@ const enum Status {
 
 export class TraceParseProgressEvent extends Event {
   static readonly eventName = 'traceparseprogress';
-  constructor(public data: Model.TraceParseEventProgressData, init: EventInit = {bubbles: true}) {
+  constructor(
+      public data: Model.TraceParseEventProgressData,
+      init: ConstructorParameters<typeof Event>[1] = {bubbles: true},
+  ) {
     super(TraceParseProgressEvent.eventName, init);
   }
 }
@@ -44,12 +47,6 @@ function calculateProgress(value: number, phase: ProgressPhase): number {
   return value * phase;
 }
 
-declare global {
-  interface HTMLElementEventMap {
-    [TraceParseProgressEvent.eventName]: TraceParseProgressEvent;
-  }
-}
-
 export class TraceProcessor extends EventTarget {
   // We force the Meta handler to be enabled, so the TraceHandlers type here is
   // the model handlers the user passes in and the Meta handler.

package/front_end/models/trace/helpers/Timing.ts

@@ -155,7 +155,8 @@ export function traceWindowFromOverlay(overlay: Types.Overlays.Overlay): Types.T
   switch (overlay.type) {
     case 'ENTRY_LABEL':
     case 'ENTRY_OUTLINE':
-    case 'ENTRY_SELECTED': {
+    case 'ENTRY_SELECTED':
+    case 'COMMENT_PIN': {
       return traceWindowFromEvent(overlay.entry);
     }
 

package/front_end/models/trace/types/Overlays.ts

@@ -131,8 +131,19 @@ export interface BottomInfoBar {
   };
 }
 
+/**
+ * Represents an active comment pin anchored to a flame chart entry.
+ * Links to a CommentThread by ID in CommentManager, rendering a pin icon and
+ * outline highlight over the trace event.
+ */
+export interface CommentPin {
+  type: 'COMMENT_PIN';
+  entry: OverlayEntry;
+  commentThreadId: string;
+}
+
 /**
  * All supported overlay types.
  */
 export type Overlay = EntrySelected|EntryOutline|TimeRangeLabel|EntryLabel|EntriesLink|TimespanBreakdown|
-    TimestampMarker|CandyStripedTimeRange|TimingsMarker|BottomInfoBar;
+    TimestampMarker|CandyStripedTimeRange|TimingsMarker|BottomInfoBar|CommentPin;

package/front_end/panels/accessibility/AccessibilityAnnouncementRecordingView.ts

@@ -205,7 +205,28 @@ export function injectedScript(ariaLiveApi: string, jsTriggeredApi: string): voi
   let lastRecordedPoliteness: string|null = null;
   let lastRecordedTime = 0;
 
-  // Emits an announcement payload for an active live region node via the CDP binding.
+  const pendingLiveNodes = new Set<Element>();
+  let scheduledFlushId: number|null = null;
+
+  function scheduleFlush(): void {
+    if (scheduledFlushId !== null) {
+      return;
+    }
+    scheduledFlushId = window.requestAnimationFrame(() => {
+      scheduledFlushId = null;
+      flushPendingNodes();
+    });
+  }
+
+  function flushPendingNodes(): void {
+    const nodes = Array.from(pendingLiveNodes);
+    pendingLiveNodes.clear();
+    for (let i = 0; i < nodes.length; i++) {
+      processLiveNode(nodes[i]);
+    }
+  }
+
+  // Queues an active live region node for deferred visibility checking and emission.
   function recordLiveNode(node: Node|null|undefined): void {
     if (!node || node.nodeType !== Node.ELEMENT_NODE) {
       return;
@@ -218,6 +239,22 @@ export function injectedScript(ariaLiveApi: string, jsTriggeredApi: string): voi
     if (element.getAttribute('aria-hidden') === 'true') {
       return;
     }
+    pendingLiveNodes.add(element);
+    scheduleFlush();
+  }
+
+  // Emits an announcement payload for an active live region node via the CDP binding after layout.
+  function processLiveNode(element: Element): void {
+    if ('isConnected' in element && !element.isConnected) {
+      return;
+    }
+    const politeness = derivePoliteness(element);
+    if (politeness === 'off') {
+      return;
+    }
+    if (element.getAttribute('aria-hidden') === 'true') {
+      return;
+    }
     if (!checkVisibility(element)) {
       return;
     }
@@ -293,18 +330,14 @@ export function injectedScript(ariaLiveApi: string, jsTriggeredApi: string): voi
         for (const node of mutation.addedNodes) {
           if (node.nodeType === Node.ELEMENT_NODE) {
             const el = node as Element;
-            if (el.shadowRoot) {
-              observeSubtree(el.shadowRoot);
-              scanAndObserveShadowRoots(el.shadowRoot);
-            }
             scanAndObserveShadowRoots(el);
 
-            if (el.matches && el.matches(selector)) {
+            if (el.matches(selector)) {
               recordLiveNode(el);
             }
-            const children = el.querySelectorAll ? el.querySelectorAll(selector) : [];
-            for (const child of children) {
-              recordLiveNode(child);
+            const children = el.querySelectorAll(selector);
+            for (let i = 0; i < children.length; i++) {
+              recordLiveNode(children[i]);
             }
           }
         }
@@ -348,20 +381,29 @@ export function injectedScript(ariaLiveApi: string, jsTriggeredApi: string): voi
     }
   }
 
-  function scanAndObserveShadowRoots(node: Node|null|undefined): void {
-    if (!node) {
+  function scanAndObserveShadowRoots(root: Element|ShadowRoot|null|undefined): void {
+    if (!root) {
       return;
     }
-    if (node.nodeType === Node.ELEMENT_NODE) {
-      const el = node as Element;
-      if (el.shadowRoot) {
+    const queue: Array<Element|ShadowRoot> = [root];
+    while (queue.length > 0) {
+      const current = queue.pop();
+      if (!current) {
+        continue;
+      }
+      const el = current as Element;
+      if (el.shadowRoot && !observedRoots.has(el.shadowRoot)) {
         observeSubtree(el.shadowRoot);
-        scanAndObserveShadowRoots(el.shadowRoot);
+        queue.push(el.shadowRoot);
+      }
+      const descendants = current.querySelectorAll('*');
+      for (let i = 0; i < descendants.length; i++) {
+        const descendant = descendants[i];
+        if (descendant.shadowRoot && !observedRoots.has(descendant.shadowRoot)) {
+          observeSubtree(descendant.shadowRoot);
+          queue.push(descendant.shadowRoot);
+        }
       }
-    }
-    const children = (node as Element).children || [];
-    for (let i = 0; i < children.length; i++) {
-      scanAndObserveShadowRoots(children[i]);
     }
   }
 
@@ -380,6 +422,7 @@ export function injectedScript(ariaLiveApi: string, jsTriggeredApi: string): voi
         const shadow = origAttachShadow.apply(this, [init]);
         if (init && init.mode === 'open') {
           observeSubtree(shadow);
+          scanAndObserveShadowRoots(shadow);
         }
         return shadow;
       };
@@ -392,6 +435,11 @@ export function injectedScript(ariaLiveApi: string, jsTriggeredApi: string): voi
   // Registers cleanup function invoked during recording teardown.
   window.__announcementsRecorderBinding_cleanup = function(): void {
     observer.disconnect();
+    if (scheduledFlushId !== null) {
+      window.cancelAnimationFrame(scheduledFlushId);
+      scheduledFlushId = null;
+    }
+    pendingLiveNodes.clear();
     if (originalElementAriaNotify) {
       try {
         (Element.prototype as unknown as Record<string, unknown>)['ariaNotify'] = originalElementAriaNotify;

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -337,7 +337,9 @@ function getMarkdownRenderer(conversation?: AiAssistanceModel.AiConversation.AiC
     return new AccessibilityAgentMarkdownRenderer(mainDocumentURL);
   }
 
-  return new MarkdownRendererWithCodeBlock();
+  return new MarkdownRendererWithCodeBlock({
+    getEstablishedOrigin: () => conversation?.origin,
+  });
 }
 
 interface ToolbarViewInput {

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

@@ -4,6 +4,7 @@
 
 import * as Common from '../../../core/common/common.js';
 import * as Platform from '../../../core/platform/platform.js';
+import type * as SDK from '../../../core/sdk/sdk.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as Logs from '../../../models/logs/logs.js';
 import type * as Marked from '../../../third_party/marked/marked.js';
@@ -12,7 +13,18 @@ import * as Lit from '../../../ui/lit/lit.js';
 
 const {html} = Lit;
 
+export interface MarkdownRendererWithCodeBlockOptions {
+  /**
+   * Retrieves the established origin locked for the active conversation.
+   * Required to authorize #file-<id> links and prevent cross-origin file leakage.
+   * When omitted or unauthorized, file links safely render as plain inert text.
+   */
+  getEstablishedOrigin?: () => SDK.SecurityOrigin.SecurityOrigin | undefined;
+}
+
 /**
+ * Markdown renderer for AI assistance conversations.
+ *
  * The model returns multiline code blocks in an erroneous way with the language being in new line.
  * This renderer takes that into account and correctly updates the parsed multiline token with the language
  * correctly identified and stripped from the content.
@@ -23,8 +35,13 @@ const {html} = Lit;
  * color: red;
  * }
  * ```
- **/
+ *
+ * Also handles linkifying DevTools internal resource links (#req- and origin-locked #file-).
+ */
 export class MarkdownRendererWithCodeBlock extends MarkdownView.MarkdownView.MarkdownInsightRenderer {
+  constructor(private readonly options: MarkdownRendererWithCodeBlockOptions = {}) {
+    super();
+  }
   #revealableLink(revealable: unknown, label: string): Lit.LitTemplate {
     return html`<devtools-link @click=${(e: Event) => {
       e.preventDefault();
@@ -48,13 +65,16 @@ export class MarkdownRendererWithCodeBlock extends MarkdownView.MarkdownView.Mar
       return html`${fallbackText}`;
     }
     if (href.startsWith('#file-')) {
-      const file = AiAssistanceModel.ContextSelectionAgent.ContextSelectionAgent.getUISourceCodes().find(
-          file => AiAssistanceModel.ContextSelectionAgent.ContextSelectionAgent.uiSourceCodeId.get(file) ===
-              Number(href.substring(6)));
+      const fileId = Number(href.substring(6));
+      const file = AiAssistanceModel.ContextSelectionAgent.ContextSelectionAgent.getSourceById(
+          fileId,
+          this.options.getEstablishedOrigin?.(),
+      );
 
       if (file) {
         return this.#revealableLink(file, file.name());
       }
+      // Fall back to plain text to prevent rendering unauthorized or unverified links.
       return html`${fallbackText}`;
     }
     return null;
@@ -78,7 +98,7 @@ export class MarkdownRendererWithCodeBlock extends MarkdownView.MarkdownView.Mar
 
     if (token.type === 'codespan') {
       // LLM likes outputting the link inside a codespan block.
-      // Remove the codespan and render the link directly
+      // Remove the codespan and render the link directly.
       const matches = token.text.match(/^\[(.*)\]\((.+)\)$/);
       if (matches?.[2]) {
         const link = this.#renderLink(

package/front_end/panels/application/IndexedDBViews.ts

@@ -298,7 +298,7 @@ const renderDataGrid = (input: IndexedDBDataViewInput): LitTemplate => {
         ${input.isIndex ? html`<th id="primary-key" weight="2">${renderKeyColumnHeader(i18nString(UIStrings.primaryKey), input.objectStore.keyPath)}</th>` : nothing}
         <th id="value" weight="8">${i18nString(UIStrings.valueString)}</th>
       </tr>
-      ${repeat(input.entries, (_entry, index) => index, (entry, index) => {
+      ${repeat(input.entries, entry => entry, (entry, index) => {
         return html`
           <tr ?selected=${index + input.skipCount === input.selectedRowNumber}
               class="data-grid-data-row"

package/front_end/panels/browser_debugger/ObjectEventListenersSidebarPane.ts

@@ -20,8 +20,6 @@ export class ObjectEventListenersSidebarPane extends UI.Widget.VBox implements U
     this.contentElement.setAttribute('jslog', `${VisualLogging.section('sources.global-listeners')}`);
 
     this.eventListenersView = new EventListeners.EventListenersView.EventListenersView();
-    this.eventListenersView.changeCallback = this.requestUpdate.bind(this);
-    this.eventListenersView.enableDefaultTreeFocus = true;
     this.eventListenersView.show(this.element);
     this.setDefaultFocusedChild(this.eventListenersView);
     this.requestUpdate();
@@ -57,7 +55,8 @@ export class ObjectEventListenersSidebarPane extends UI.Widget.VBox implements U
         windowObjects.push(result.object);
       }
     }
-    await this.eventListenersView.addObjects(windowObjects);
+    this.eventListenersView.objects = windowObjects;
+    await this.eventListenersView.updateComplete;
   }
 
   override wasShown(): void {