chrome-devtools-frontend 1.0.1721762 → 1.0.1726686

package/front_end/panels/sources/SourcesPanel.ts

@@ -55,7 +55,7 @@ import * as Snippets from '../snippets/snippets.js';
 
 import {CallStackSidebarPane} from './CallStackSidebarPane.js';
 import {DebuggerPausedMessage} from './DebuggerPausedMessage.js';
-import {NavigatorView} from './NavigatorView.js';
+import {SourcesNavigatorView} from './SourcesNavigator.js';
 import sourcesPanelStyles from './sourcesPanel.css.js';
 import {type EditorClosedEvent, Events, SourcesView} from './SourcesView.js';
 import {ThreadsSidebarPane} from './ThreadsSidebarPane.js';
@@ -781,12 +781,14 @@ export class SourcesPanel extends UI.Panel.Panel implements
     const viewManager = UI.ViewManager.ViewManager.instance();
     for (const view of viewManager.viewsForLocation(UI.ViewManager.ViewLocationValues.NAVIGATOR_VIEW)) {
       const navigatorView = await view.widget();
-      if (navigatorView instanceof NavigatorView && navigatorView.acceptProject(uiSourceCode.project())) {
-        navigatorView.revealUISourceCode(uiSourceCode, true);
+      if (navigatorView instanceof SourcesNavigatorView && navigatorView.acceptProject(uiSourceCode.project())) {
         this.navigatorTabbedLocation.tabbedPane().selectTab(view.viewId(), true);
         if (!skipReveal) {
           this.#setNavigatorSidebarOpen(true);
-          await navigatorView.updateComplete;
+        }
+        await navigatorView.updateComplete;
+        navigatorView.revealUISourceCode(uiSourceCode, true);
+        if (!skipReveal) {
           navigatorView.focus();
         }
         break;
@@ -916,7 +918,9 @@ export class SourcesPanel extends UI.Panel.Panel implements
 
   #editorClosed({data: {uiSourceCode}}: Common.EventTarget.EventTargetEvent<EditorClosedEvent>): void {
     const context = UI.Context.Context.instance();
-    if (context.flavor(Workspace.UISourceCode.UISourceCode) === uiSourceCode) {
+    const currentFlavor = context.flavor(Workspace.UISourceCode.UISourceCode);
+    const flavorScriptId = currentFlavor?.canonicalScriptId();
+    if (currentFlavor === uiSourceCode || (flavorScriptId && flavorScriptId === uiSourceCode.canonicalScriptId())) {
       context.setFlavor(Workspace.UISourceCode.UISourceCode, null);
     }
   }

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -346,6 +346,7 @@ export class TabbedEditorContainer extends TabbedEditorContainerBase {
         const icon = !hasLoadError ?
             (PanelCommon.PersistenceUtils.PersistenceUtils.iconForUISourceCode(uiSourceCode) ?? undefined) :
             undefined;
+        const viewSourceCode = this.#tabViewSourceCodes.get(tabId) ?? uiSourceCode;
         return {
           tabId,
           title: titleForFile(uiSourceCode),
@@ -357,8 +358,8 @@ export class TabbedEditorContainer extends TabbedEditorContainerBase {
           disconnectedAutomaticFileSystemRoot,
           icon,
           widget: (this.#currentFile?.canonicalScriptId() === uiSourceCode.canonicalScriptId()) ?
-              this.#getOrCreateSourceView(this.#currentFile) :
-              this.getCreatedSourceView(uiSourceCode),
+              this.#getOrCreateSourceView(viewSourceCode) :
+              this.getCreatedSourceView(viewSourceCode),
         };
       }),
       activeTabId: this.#currentFile ? this.#tabIdForUISourceCode(this.#currentFile) : undefined,
@@ -457,6 +458,12 @@ export class TabbedEditorContainer extends TabbedEditorContainerBase {
   readonly #tabDelegate: EditorContainerTabDelegate;
   #tabIds: Map<Workspace.UISourceCode.UISourceCode, string>;
   #files: Map<string, Workspace.UISourceCode.UISourceCode>;
+  /**
+   * Maps a tab id to the UISourceCode whose view is currently bound to that
+   * tab. This can differ from the canonical UISourceCode in `#files` when the
+   * tab's view was recycled to show a duplicate script with the same URL.
+   */
+  readonly #tabViewSourceCodes = new Map<string, Workspace.UISourceCode.UISourceCode>();
   readonly #loadErrorFiles = new Set<Workspace.UISourceCode.UISourceCode>();
   #previouslyViewedFilesSetting: Common.Settings.Setting<SerializedHistoryItem[]>;
   #history: History;
@@ -602,7 +609,9 @@ export class TabbedEditorContainer extends TabbedEditorContainerBase {
   }
 
   fileViews(): UI.Widget.Widget[] {
-    return Array.from(this.#files.values()).map(getViewByUISourceCode).filter(Boolean) as UI.Widget.Widget[];
+    return Array.from(this.#files.entries())
+               .map(([tabId, file]) => getViewByUISourceCode(this.#tabViewSourceCodes.get(tabId) ?? file))
+               .filter(Boolean) as UI.Widget.Widget[];
   }
 
   showSourceLocation(uiSourceCode: Workspace.UISourceCode.UISourceCode,
@@ -785,13 +794,30 @@ export class TabbedEditorContainer extends TabbedEditorContainerBase {
     this.#removeViewListeners();
     this.#currentFile = uiSourceCode;
 
+    let tabId: string;
     try {
       // Selecting the tab may cause showFile to be called again, but with the canonical source code,
       // which is not what we want, so we prevent reentrant calls.
       this.#reentrantShow = true;
-      const tabId = this.#tabIds.get(canonicalSourceCode) || this.#appendFileTab(canonicalSourceCode);
+      tabId = this.#tabIds.get(canonicalSourceCode) || this.#appendFileTab(canonicalSourceCode);
       this.#appendHistory(tabId);
 
+      const tabViewSourceCode = this.#tabViewSourceCodes.get(tabId) ?? canonicalSourceCode;
+      const tabView = this.#getOrCreateSourceView(tabViewSourceCode);
+      if (tabView instanceof UISourceCodeFrame && tabViewSourceCode !== uiSourceCode) {
+        // We are showing a different UISourceCode in the same tab (because it has the same URL). This
+        // commonly happens when switching between workers or iframes containing the same code, and while the
+        // contents are usually identical they may not be and it is important to show users when they aren't.
+        this.#recycleUISourceCodeFrame(tabView, uiSourceCode);
+        if (uiSourceCode.project().type() !== Workspace.Workspace.projectTypes.FileSystem) {
+          // Disable editing, because it may confuse users that only one of the copies of this code changes.
+          uiSourceCode.disableEdit();
+        }
+      } else {
+        this.#getOrCreateSourceView(uiSourceCode);
+      }
+      this.#tabViewSourceCodes.set(tabId, uiSourceCode);
+
       this.#scheduleUpdate();
     } finally {
       this.#reentrantShow = false;
@@ -802,23 +828,9 @@ export class TabbedEditorContainer extends TabbedEditorContainerBase {
     }
 
     const previousView = this.#currentView;
-    if (uiSourceCode) {
-      this.#getOrCreateSourceView(uiSourceCode);
-    }
     this.#currentView = this.visibleView;
     this.#addViewListeners();
 
-    if (this.#currentView instanceof UISourceCodeFrame && this.#currentView.uiSourceCode() !== uiSourceCode) {
-      // We are showing a different UISourceCode in the same tab (because it has the same URL). This
-      // commonly happens when switching between workers or iframes containing the same code, and while the
-      // contents are usually identical they may not be and it is important to show users when they aren't.
-      this.#recycleUISourceCodeFrame(this.#currentView, uiSourceCode);
-      if (uiSourceCode.project().type() !== Workspace.Workspace.projectTypes.FileSystem) {
-        // Disable editing, because it may confuse users that only one of the copies of this code changes.
-        uiSourceCode.disableEdit();
-      }
-    }
-
     const eventData = {
       currentFile: this.#currentFile,
       currentView: this.#currentView,
@@ -954,6 +966,11 @@ export class TabbedEditorContainer extends TabbedEditorContainerBase {
         tabIds.push(tabId);
       } else {
         this.#removeSourceFrame(uiSourceCode);
+        for (const [k, v] of this.#tabViewSourceCodes) {
+          if (v === uiSourceCode) {
+            this.#tabViewSourceCodes.delete(k);
+          }
+        }
       }
       for (const [k, v] of this.#uriToUISourceCode) {
         if (v === uiSourceCode) {
@@ -999,6 +1016,7 @@ export class TabbedEditorContainer extends TabbedEditorContainerBase {
   #appendFileTab(uiSourceCode: Workspace.UISourceCode.UISourceCode, index?: number, ignoreHistory?: boolean): string {
     const tabId = this.#generateTabId();
     this.#tabIds.set(uiSourceCode, tabId);
+    this.#tabViewSourceCodes.set(tabId, uiSourceCode);
 
     if (index !== undefined) {
       const entries = Array.from(this.#files.entries());
@@ -1065,6 +1083,11 @@ export class TabbedEditorContainer extends TabbedEditorContainerBase {
       this.#currentView = null;
       this.#currentFile = null;
     }
+    const viewSourceCode = this.#tabViewSourceCodes.get(tabId);
+    if (viewSourceCode) {
+      this.#removeSourceFrame(viewSourceCode);
+      this.#tabViewSourceCodes.delete(tabId);
+    }
     if (uiSourceCode) {
       this.#tabIds.delete(uiSourceCode);
       this.#loadErrorFiles.delete(uiSourceCode);

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -337,7 +337,7 @@ export class UISourceCodeFrame extends UISourceCodeFrameBase {
   private reloadPlugins(): void {
     this.disposePlugins();
     this.loadPlugins();
-    if (!this.loaded) {
+    if (!pluginCompartment.get(this.textEditor.state)) {
       // Until the content is loaded the editor still holds the placeholder
       // state, which doesn't contain `pluginCompartment` at all. Reconfiguring
       // a compartment that isn't part of the state is a no-op, so the plugins

package/front_end/panels/sources/WatchExpressionsSidebarPane.ts

@@ -101,7 +101,7 @@ interface ViewInput {
   onCopyWatchExpression(watchExpression: WatchExpression): void;
   onDeleteAll(): unknown;
   onAddExpression(): unknown;
-  onExpand(e: WatchExpression, expanded: boolean): unknown;
+  onExpand(e: WatchExpression, expanded: boolean, recursively?: boolean): unknown;
   watchExpressions: WatchExpression[];
 }
 export interface WatchExpressionPromptViewInput {
@@ -352,7 +352,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           class=${classMap({'watch-expression-tree-item': true, 'watch-expression-editing': e.editing })}
           ?open=${Boolean(e.result?.expanded)}
           @keydown=${onExpressionKeydown.bind(undefined, e)}
-          @expand=${(event: UI.TreeOutline.TreeViewElement.ExpandEvent) => input.onExpand(e, event.detail.expanded)}
+          @expand=${(event: UI.TreeOutline.TreeViewElement.ExpandEvent) => input.onExpand(e, event.detail.expanded, event.detail.recursively)}
           role=treeitem>
             <devtools-widget ${widget(WatchExpressionPromptWidget, {
               expression: e,
@@ -549,10 +549,15 @@ export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements UI.Ac
         this.saveExpressions();
         this.requestUpdate();
       },
-      onExpand: (e: WatchExpression, expanded: boolean): void => {
-        if (e.result) {
-          e.result.expanded = expanded;
+      onExpand: (e: WatchExpression, expanded: boolean, recursively = false): void => {
+        if (!e.result) {
+          return;
+        }
+        if (expanded && recursively) {
+          void e.result.expandRecursively().then(() => this.requestUpdate());
+          return;
         }
+        e.result.expanded = expanded;
       },
     },
                {}, this.contentElement);

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

@@ -227,11 +227,6 @@ const UIStrings = {
    * @description Title of an action in the sources tool to create a snippet.
    */
   createNewSnippet: 'Create new snippet',
-  /**
-   * @description Button in the Workspace tab of the Sources panel, used to
-   *              (manually) add a folder to the workspace.
-   */
-  addFolderManually: 'Add folder manually',
   /**
    * @description Title of an action in the Sources panel command menu to (manually)
    *              add a folder to the workspace.
@@ -564,9 +559,9 @@ UI.ViewManager.registerViewExtension({
   order: 3,
   persistence: UI.ViewManager.ViewPersistence.PERMANENT,
   condition: () => !Root.Runtime.Runtime.isTraceApp(),
-  async loadView(universe) {
+  async loadView() {
     const Sources = await loadSourcesModule();
-    return new Sources.SourcesNavigator.FilesNavigatorView(universe.networkProjectManager);
+    return new Sources.SourcesNavigator.FilesNavigatorView();
   },
 });
 
@@ -578,9 +573,9 @@ UI.ViewManager.registerViewExtension({
   order: 6,
   persistence: UI.ViewManager.ViewPersistence.PERMANENT,
   condition: () => !Root.Runtime.Runtime.isTraceApp(),
-  async loadView(universe) {
+  async loadView() {
     const Sources = await loadSourcesModule();
-    return new Sources.SourcesNavigator.SnippetsNavigatorView(universe.networkProjectManager);
+    return new Sources.SourcesNavigator.SnippetsNavigatorView();
   },
 });
 
@@ -2055,12 +2050,6 @@ Common.Revealer.registerRevealer({
   },
 });
 
-UI.Toolbar.registerToolbarItem({
-  actionId: 'sources.add-folder-to-workspace',
-  location: UI.Toolbar.ToolbarItemLocation.FILES_NAVIGATION_TOOLBAR,
-  label: i18nLazyString(UIStrings.addFolderManually),
-});
-
 UI.Context.registerListener({
   contextTypes() {
     return [SDK.DebuggerModel.DebuggerPausedDetails];

package/front_end/panels/sources/sourcesNavigator.css

@@ -9,6 +9,11 @@
   flex-shrink: 0;
 }
 
+.navigator-toolbar {
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+  padding-left: var(--sys-size-5);
+}
+
 .automatic-workspace-infobar {
   border-top: var(--sys-size-1) solid var(--sys-color-divider);
 }

package/front_end/panels/timeline/ModificationsManager.ts

@@ -35,7 +35,6 @@ interface ModificationsManagerData {
   parsedTrace: Trace.TraceModel.ParsedTrace;
   traceBounds: Trace.Types.Timing.TraceWindowMicro;
   rawTraceEvents: readonly Trace.Types.Events.Event[];
-  syntheticEvents: Trace.Types.Events.SyntheticBased[];
   modifications?: Trace.Types.File.Modifications;
 }
 
@@ -90,7 +89,6 @@ export class ModificationsManager extends EventTarget {
       traceBounds,
       rawTraceEvents: parsedTrace.traceEvents,
       modifications: parsedTrace.metadata.modifications,
-      syntheticEvents: parsedTrace.syntheticEventsManager.getSyntheticTraces(),
     });
     modificationsManagerByTraceIndex[traceIndex] = newModificationsManager;
     activeManager = newModificationsManager;

package/front_end/panels/timeline/README.md

@@ -185,6 +185,8 @@ Comments on flame chart entries use the shared comments UI from `ui/comments` an
 
 The pin and the `COMMENT_PIN` element are separate elements in separate layers, and moving the element fires no DOM scroll or resize event, so step 2 is what keeps the pin on its entry. See the `CustomAnchorResolver` documentation in `ui/comments/CommentAnchorResolver.ts` for the contract.
 
+Entries without an `EventsSerializer` key, such as JS samples, use a synthetic key and are found again by start time, duration and title.
+
 ## Timeline tree views
 
 The `TimelineTreeView` base class provides the foundation for creating various tree-based views within the Performance panel (e.g., Summary, Bottom-Up, Call Tree, Event Log). It handles core functionality like:

package/front_end/panels/timeline/TimelineCommentContext.ts

@@ -0,0 +1,171 @@
+// 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 * as AIAssistance from '../../models/ai_assistance/ai_assistance.js';
+import * as Trace from '../../models/trace/trace.js';
+import * as SourceMapsResolver from '../../models/trace_source_maps_resolver/trace_source_maps_resolver.js';
+
+/**
+ * A long call path keeps this many outermost entries, which usually say why
+ * the code ran, such as `Task > Event: click > Function call`.
+ */
+const CALL_PATH_OUTER_ENTRIES = 3;
+/**
+ * A long call path keeps this many innermost entries, ending with the
+ * commented entry itself.
+ */
+const CALL_PATH_INNER_ENTRIES = 15;
+
+/**
+ * Returns the English label of a trace warning. These lines are read by the
+ * AI agent, not shown in the UI, so they are not localized.
+ */
+function labelForWarning(warning: Trace.Handlers.ModelHandlers.Warnings.Warning): string {
+  switch (warning) {
+    case 'LONG_TASK':
+      return 'Long task';
+    case 'IDLE_CALLBACK_OVER_TIME':
+      return 'Idle callback over time';
+    case 'FORCED_REFLOW':
+      return 'Forced reflow';
+    case 'LONG_INTERACTION':
+      return 'Long interaction';
+    default:
+      Platform.assertNever(warning, `Unknown warning: ${warning}`);
+  }
+}
+
+/**
+ * Returns the location of the entry's code as `url:line:column`, with
+ * 1-based line and column numbers as editors show them, or null if the entry
+ * has no code location. The location is in the authored source if a source
+ * map resolved it.
+ *
+ * This follows SourceMapsResolver.codeLocationForEntry() but skips its
+ * Workspace lookup, which only maps a bare URL to a workspace URL, so that
+ * the controller does not need a Workspace.
+ *
+ * Network requests are skipped: their URL is the request, not code, and a
+ * cross-origin request's final URL must be redacted.
+ */
+function sourceLocationForEntry(event: Trace.Types.Events.Event, parsedTrace: Trace.TraceModel.ParsedTrace): string|
+    null {
+  if (Trace.Types.Events.isSyntheticNetworkRequest(event)) {
+    return null;
+  }
+  let url: string|null = null;
+  let line: number|undefined;
+  let column: number|undefined;
+  const uiLocation = SourceMapsResolver.SourceMapsResolver.resolvedCodeLocationForEntry(event)?.devtoolsLocation;
+  const rawCallFrame = uiLocation ? null : Trace.Helpers.Trace.rawCallFrameForEntry(event);
+  if (uiLocation) {
+    url = uiLocation.uiSourceCode.url();
+    line = uiLocation.lineNumber;
+    column = uiLocation.columnNumber;
+  } else if (rawCallFrame) {
+    url = rawCallFrame.url;
+    line = rawCallFrame.lineNumber >= 0 ? rawCallFrame.lineNumber : undefined;
+    column = rawCallFrame.columnNumber >= 0 ? rawCallFrame.columnNumber : undefined;
+  } else {
+    url = Trace.Handlers.Helpers.getNonResolvedURL(event, parsedTrace.data);
+  }
+  if (!url) {
+    return null;
+  }
+  if (line === undefined) {
+    return url;
+  }
+  return column === undefined ? `${url}:${line + 1}` : `${url}:${line + 1}:${column + 1}`;
+}
+
+/**
+ * Returns the names of the entry's ancestors and the entry itself, outermost
+ * first, for example `Task > Timer fired > Function call > handleClick`, or
+ * null if the entry has no ancestors.
+ *
+ * JS call stacks can be hundreds of entries deep, so a long call path keeps
+ * only its outermost and innermost entries and says how many it skipped, for
+ * example `Task > Event: click > Function call > … (240 more) > render > …`.
+ */
+function callPathForEntry(event: Trace.Types.Events.Event, parsedTrace: Trace.TraceModel.ParsedTrace): string|null {
+  const node = parsedTrace.data.Renderer.entryToNode.get(event) ?? parsedTrace.data.Samples.entryToNode.get(event);
+  if (!node?.parent) {
+    return null;
+  }
+  const names: string[] = [];
+  for (let current: Trace.Helpers.TreeHelpers.TraceEntryNode|null = node; current; current = current.parent) {
+    names.push(Trace.Name.forEntry(current.entry, parsedTrace));
+  }
+  // The walk goes from the entry up to the root, so reverse it to put the
+  // outermost entry first.
+  names.reverse();
+  const skippedCount = names.length - CALL_PATH_OUTER_ENTRIES - CALL_PATH_INNER_ENTRIES;
+  // Replacing a single entry with a placeholder would not shorten the path.
+  if (skippedCount > 1) {
+    names.splice(CALL_PATH_OUTER_ENTRIES, skippedCount, `… (${skippedCount} more)`);
+  }
+  return names.join(' > ');
+}
+
+/**
+ * Describes a flame chart entry for the AI agent that receives comments on
+ * it. The entry title is already sent as the anchor's text signature, so the
+ * lines add what identifies the entry in the trace and where its code is: the
+ * trace event name, the entry's timing, its track, its source location, its
+ * call path, its warnings and the page that was traced.
+ *
+ * Times are relative to the start of the trace, which is where the
+ * Performance panel's time ruler starts.
+ *
+ * Lines without a value are omitted.
+ */
+export function agentContextForEntry(
+    event: Trace.Types.Events.Event,
+    trackName: string|null,
+    parsedTrace: Trace.TraceModel.ParsedTrace,
+    ): string[] {
+  const {micros} = AIAssistance.UnitFormatters;
+  const lines: string[] = [];
+
+  lines.push(`Trace event: ${event.name}`);
+
+  const timing = [`starts at ${micros(event.ts - parsedTrace.data.Meta.traceBounds.min)}`];
+  if (event.dur) {
+    timing.push(`duration ${micros(event.dur)}`);
+  }
+  const selfTime = parsedTrace.data.Renderer.entryToNode.get(event)?.selfTime;
+  if (selfTime !== undefined) {
+    timing.push(`self time ${micros(selfTime)}`);
+  }
+  lines.push(`Timing: ${timing.join(', ')}`);
+
+  if (trackName) {
+    lines.push(`Track: ${trackName}`);
+  }
+
+  const sourceLocation = sourceLocationForEntry(event, parsedTrace);
+  if (sourceLocation) {
+    lines.push(`Source: ${sourceLocation}`);
+  }
+
+  const callPath = callPathForEntry(event, parsedTrace);
+  if (callPath) {
+    lines.push(`Call path: ${callPath}`);
+  }
+
+  const warnings = parsedTrace.data.Warnings.perEvent.get(event);
+  if (warnings?.length) {
+    lines.push(`Warnings: ${warnings.map(labelForWarning).join(', ')}`);
+  }
+
+  // The main frame URL is same-origin with the trace by definition, so it
+  // does not need redaction.
+  const mainFrameURL = parsedTrace.data.Meta.mainFrameURL;
+  if (mainFrameURL) {
+    lines.push(`Traced page: ${mainFrameURL}`);
+  }
+
+  return lines;
+}