chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -566,18 +566,23 @@ export class DebuggerPlugin extends Plugin {
       scriptFile.addSourceMapURL(url);
     }
 
-    function addDebugInfoURL(scriptFile: Bindings.ResourceScriptMapping.ResourceScriptFile): void {
+    function addDebugInfoURL(
+        this: DebuggerPlugin, scriptFile: Bindings.ResourceScriptMapping.ResourceScriptFile): void {
       const dialog =
-          AddDebugInfoURLDialog.createAddDWARFSymbolsURLDialog(addDebugInfoURLDialogCallback.bind(null, scriptFile));
+          AddDebugInfoURLDialog.createAddDWARFSymbolsURLDialog(addDebugInfoURLDialogCallback.bind(this, scriptFile));
       dialog.show();
     }
 
     function addDebugInfoURLDialogCallback(
-        scriptFile: Bindings.ResourceScriptMapping.ResourceScriptFile, url: Platform.DevToolsPath.UrlString): void {
+        this: DebuggerPlugin, scriptFile: Bindings.ResourceScriptMapping.ResourceScriptFile,
+        url: Platform.DevToolsPath.UrlString): void {
       if (!url) {
         return;
       }
       scriptFile.addDebugInfoURL(url);
+      if (scriptFile.script?.debuggerModel) {
+        this.updateScriptFile(scriptFile.script?.debuggerModel);
+      }
     }
 
     if (this.uiSourceCode.project().type() === Workspace.Workspace.projectTypes.Network &&
@@ -593,7 +598,7 @@ export class DebuggerPlugin extends Plugin {
             !Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().pluginManager.hasPluginForScript(
                 scriptFile.script)) {
           contextMenu.debugSection().appendItem(
-              i18nString(UIStrings.addWasmDebugInfo), addDebugInfoURL.bind(null, scriptFile),
+              i18nString(UIStrings.addWasmDebugInfo), addDebugInfoURL.bind(this, scriptFile),
               {jslogContext: 'add-wasm-debug-info'});
         }
       }

package/front_end/panels/sources/NavigatorView.ts

@@ -37,10 +37,12 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as Workspace from '../../models/workspace/workspace.js';
+import * as FloatingButton from '../../ui/components/floating_button/floating_button.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as Snippets from '../snippets/snippets.js';
+import {PanelUtils} from '../utils/utils.js';
 
 import navigatorTreeStyles from './navigatorTree.css.js';
 import navigatorViewStyles from './navigatorView.css.js';
@@ -1375,6 +1377,7 @@ export class NavigatorSourceTreeElement extends UI.TreeOutline.TreeElement {
   readonly node: NavigatorUISourceCodeTreeNode;
   private readonly navigatorView: NavigatorView;
   uiSourceCodeInternal: Workspace.UISourceCode.UISourceCode;
+  private aiButtonContainer?: HTMLElement;
 
   constructor(
       navigatorView: NavigatorView, uiSourceCode: Workspace.UISourceCode.UISourceCode, title: string,
@@ -1395,29 +1398,7 @@ export class NavigatorSourceTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   updateIcon(): void {
-    const binding = Persistence.Persistence.PersistenceImpl.instance().binding(this.uiSourceCodeInternal);
-    const networkPersistenceManager = Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance();
-    let iconType = 'document';
-    let iconStyles: string[] = [];
-    if (binding) {
-      if (Snippets.ScriptSnippetFileSystem.isSnippetsUISourceCode(binding.fileSystem)) {
-        iconType = 'snippet';
-      }
-      const badgeIsPurple = networkPersistenceManager.project() === binding.fileSystem.project();
-      iconStyles = badgeIsPurple ? ['dot', 'purple'] : ['dot', 'green'];
-    } else if (networkPersistenceManager.isActiveHeaderOverrides(this.uiSourceCode)) {
-      iconStyles = ['dot', 'purple'];
-    } else {
-      if (Snippets.ScriptSnippetFileSystem.isSnippetsUISourceCode(this.uiSourceCodeInternal)) {
-        iconType = 'snippet';
-      }
-    }
-
-    const icon = IconButton.Icon.create(iconType, iconStyles.join(' '));
-    if (binding) {
-      UI.Tooltip.Tooltip.install(
-          icon, Persistence.PersistenceUtils.PersistenceUtils.tooltipForUISourceCode(this.uiSourceCodeInternal));
-    }
+    const icon = PanelUtils.getIconForSourceFile(this.uiSourceCodeInternal);
     this.setLeadingIcons([icon]);
   }
 
@@ -1425,6 +1406,32 @@ export class NavigatorSourceTreeElement extends UI.TreeOutline.TreeElement {
     UI.ARIAUtils.setLabel(this.listItemElement, `${this.uiSourceCodeInternal.name()}, ${this.nodeType}`);
   }
 
+  private createAiButton(): void {
+    if (!UI.ActionRegistry.ActionRegistry.instance().hasAction('drjones.sources-floating-button')) {
+      return;
+    }
+    if (!this.uiSourceCode.contentType().isTextType() ||
+        Snippets.ScriptSnippetFileSystem.isSnippetsUISourceCode(this.uiSourceCode)) {
+      return;
+    }
+    const action = UI.ActionRegistry.ActionRegistry.instance().getAction('drjones.sources-floating-button');
+    if (!this.aiButtonContainer) {
+      this.aiButtonContainer = this.listItemElement.createChild('span', 'ai-button-container');
+      const floatingButton = new FloatingButton.FloatingButton.FloatingButton({
+        iconName: 'smart-assistant',
+      });
+      floatingButton.addEventListener('click', ev => {
+        ev.stopPropagation();
+        this.navigatorView.sourceSelected(this.uiSourceCode, false);
+        void action.execute();
+      }, {capture: true});
+      floatingButton.addEventListener('mousedown', ev => {
+        ev.stopPropagation();
+      }, {capture: true});
+      this.aiButtonContainer.appendChild(floatingButton);
+    }
+  }
+
   get uiSourceCode(): Workspace.UISourceCode.UISourceCode {
     return this.uiSourceCodeInternal;
   }
@@ -1434,6 +1441,7 @@ export class NavigatorSourceTreeElement extends UI.TreeOutline.TreeElement {
     this.listItemElement.addEventListener('click', this.onclick.bind(this), false);
     this.listItemElement.addEventListener('contextmenu', this.handleContextMenuEvent.bind(this), false);
     this.listItemElement.addEventListener('dragstart', this.ondragstart.bind(this), false);
+    this.createAiButton();
   }
 
   private shouldRenameOnMouseDown(): boolean {
@@ -1758,7 +1766,7 @@ export class NavigatorUISourceCodeTreeNode extends NavigatorTreeNode {
     }
   }
 
-  rename(callback?: ((arg0: boolean) => void)): void {
+  rename(callback?: ((committed: boolean) => void)): void {
     if (!this.treeElement) {
       return;
     }
@@ -1773,21 +1781,19 @@ export class NavigatorUISourceCodeTreeNode extends NavigatorTreeNode {
     const treeOutlineElement = this.treeElement.treeOutline.element;
     UI.UIUtils.markBeingEdited(treeOutlineElement, true);
 
-    function commitHandler(
-        this: NavigatorUISourceCodeTreeNode, element: Element, newTitle: string, oldTitle: string): void {
+    const commitHandler = (_element: Element, newTitle: string, oldTitle: string|null): void => {
       if (newTitle !== oldTitle) {
         if (this.treeElement) {
           this.treeElement.title = newTitle;
         }
         // necessary cast to RawPathString as alternative would be altering type of Config<T>
-        void this.uiSourceCodeInternal.rename(newTitle as Platform.DevToolsPath.RawPathString)
-            .then(renameCallback.bind(this));
+        void this.uiSourceCodeInternal.rename(newTitle as Platform.DevToolsPath.RawPathString).then(renameCallback);
         return;
       }
-      afterEditing.call(this, true);
-    }
+      afterEditing(true);
+    };
 
-    function renameCallback(this: NavigatorUISourceCodeTreeNode, success: boolean): void {
+    const renameCallback = (success: boolean): void => {
       if (!success) {
         UI.UIUtils.markBeingEdited(treeOutlineElement, false);
         this.updateTitle();
@@ -1802,20 +1808,20 @@ export class NavigatorUISourceCodeTreeNode extends NavigatorTreeNode {
           this.treeElement.select();
         }
       }
-      afterEditing.call(this, true);
-    }
+      afterEditing(true);
+    };
 
-    function afterEditing(this: NavigatorUISourceCodeTreeNode, committed: boolean): void {
+    const afterEditing = (committed: boolean): void => {
       UI.UIUtils.markBeingEdited(treeOutlineElement, false);
       this.updateTitle();
       if (callback) {
         callback(committed);
       }
-    }
+    };
 
     this.updateTitle(true);
     this.treeElement.startEditingTitle(
-        new UI.InplaceEditor.Config(commitHandler.bind(this), afterEditing.bind(this, false)));
+        new UI.InplaceEditor.Config(commitHandler, () => afterEditing(false), undefined));
   }
 }
 

package/front_end/panels/sources/SourcesPanel.ts

@@ -206,6 +206,9 @@ export class SourcesPanel extends UI.Panel.Panel implements
   private tabbedLocationHeader?: Element|null;
   private extensionSidebarPanesContainer?: UI.View.ViewLocation;
   sidebarPaneView?: UI.Widget.VBox|UI.SplitWidget.SplitWidget;
+
+  #lastPausedTarget: WeakRef<SDK.Target.Target>|null = null;
+
   constructor() {
     super('sources');
 
@@ -483,6 +486,16 @@ export class SourcesPanel extends UI.Panel.Panel implements
     UI.Context.Context.instance().setFlavor(SDK.DebuggerModel.DebuggerPausedDetails, details);
     this.toggleDebuggerSidebarButton.setEnabled(false);
     this.revealDebuggerSidebar();
+    const pausedTarget = details.debuggerModel.target();
+    if (this.threadsSidebarPane && this.#lastPausedTarget?.deref() !== pausedTarget &&
+        pausedTarget !== SDK.TargetManager.TargetManager.instance().primaryPageTarget()) {
+      // If we pause in something other than the main frame (e.g. worker), we should expand the
+      // "Threads" list to make it more clear which target is paused. We do this only if the target of
+      // the previous pause is different from the new pause to prevent annoying the user by re-opening
+      // the "Threads" list while stepping or hitting the same breakpoint multiple points.
+      void this.sidebarPaneStack?.showView(this.threadsSidebarPane);
+    }
+
     window.focus();
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.bringToFront();
     const withOverlay = UI.Context.Context.instance().flavor(SDK.Target.Target)?.model(SDK.OverlayModel.OverlayModel) &&
@@ -498,6 +511,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
           this.overlayLoggables.stepOverButton, `${VisualLogging.action('debugger.step-over')}`,
           this.overlayLoggables.debuggerPausedMessage);
     }
+    this.#lastPausedTarget = new WeakRef(details.debuggerModel.target());
   }
 
   private maybeLogOverlayAction(): void {
@@ -905,12 +919,6 @@ export class SourcesPanel extends UI.Panel.Panel implements
       SDK.NetworkRequest.NetworkRequest|UISourceCodeFrame): void {
     if (target instanceof Workspace.UISourceCode.UISourceCode) {
       this.appendUISourceCodeItems(event, contextMenu, target);
-      if (UI.ActionRegistry.ActionRegistry.instance().hasAction('drjones.sources-panel-context')) {
-        UI.Context.Context.instance().setFlavor(Workspace.UISourceCode.UISourceCode, target);
-        contextMenu.headerSection().appendAction(
-            'drjones.sources-panel-context',
-        );
-      }
       return;
     }
     if (target instanceof UISourceCodeFrame) {
@@ -945,6 +953,17 @@ export class SourcesPanel extends UI.Panel.Panel implements
             jslogContext: 'sources.reveal-in-navigator-sidebar',
           });
     }
+
+    if (UI.ActionRegistry.ActionRegistry.instance().hasAction('drjones.sources-panel-context')) {
+      const editorElement = this.element.querySelector('devtools-text-editor');
+      if (!eventTarget.isSelfOrDescendant(editorElement) && uiSourceCode.contentType().isTextType()) {
+        UI.Context.Context.instance().setFlavor(Workspace.UISourceCode.UISourceCode, uiSourceCode);
+        contextMenu.headerSection().appendAction(
+            'drjones.sources-panel-context',
+        );
+      }
+    }
+
     // Ignore list only works for JavaScript debugging.
     if (uiSourceCode.contentType().hasScripts() &&
         Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()

package/front_end/panels/sources/SourcesView.test.ts

@@ -93,6 +93,7 @@ describeWithEnvironment('SourcesView', () => {
         {} as Persistence.FileSystemWorkspaceBinding.FileSystem,
         'file:///path/to/overrides/www.example.com/.headers' as Platform.DevToolsPath.UrlString,
         Common.ResourceType.resourceTypes.Document);
+    sinon.stub(uiSourceCode, 'mimeType').returns('text/plain');
     sourcesView.viewForFile(uiSourceCode);
     assert.isTrue(sourcesView.getSourceView(uiSourceCode) instanceof SourcesComponents.HeadersView.HeadersView);
   });

package/front_end/panels/sources/SourcesView.ts

@@ -367,9 +367,9 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     let sourceView;
     const contentType = uiSourceCode.contentType();
 
-    if (contentType === Common.ResourceType.resourceTypes.Image) {
+    if (contentType === Common.ResourceType.resourceTypes.Image || uiSourceCode.mimeType().startsWith('image/')) {
       sourceView = new SourceFrame.ImageView.ImageView(uiSourceCode.mimeType(), uiSourceCode);
-    } else if (contentType === Common.ResourceType.resourceTypes.Font) {
+    } else if (contentType === Common.ResourceType.resourceTypes.Font || uiSourceCode.mimeType().includes('font')) {
       sourceView = new SourceFrame.FontView.FontView(uiSourceCode.mimeType(), uiSourceCode);
     } else if (uiSourceCode.name() === HEADER_OVERRIDES_FILENAME) {
       sourceView = new Components.HeadersView.HeadersView(uiSourceCode);

package/front_end/panels/sources/components/BreakpointsView.ts

@@ -535,7 +535,6 @@ export class BreakpointsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     void this.#controller.update();
   }
 
-  static readonly litTagName = LitHtml.literal`devtools-breakpoint-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #pauseOnUncaughtExceptions: boolean = false;

package/front_end/panels/sources/components/HeadersView.ts

@@ -128,7 +128,6 @@ export interface HeadersViewComponentData {
 }
 
 export class HeadersViewComponent extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-sources-headers-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
   #headerOverrides: Persistence.NetworkPersistenceManager.HeaderOverride[] = [];

package/front_end/panels/sources/navigatorTree.css

@@ -61,6 +61,17 @@
   color: var(--icon-file-script);
 }
 
+.navigator-file-tree-item .ai-button-container {
+  display: none;
+  position: absolute;
+  z-index: 999;
+  right: var(--sys-size-3);
+}
+
+.navigator-file-tree-item:hover .ai-button-container {
+  display: inline-flex;
+}
+
 .navigator-file-tree-item devtools-icon.dot::before {
   width: 7px;
   height: 7px;

package/front_end/panels/timeline/ActiveFilters.ts

@@ -1,7 +1,6 @@
 // Copyright 2023 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-import type * as TimelineModel from '../../models/timeline_model/timeline_model.js';
 import type * as Trace from '../../models/trace/trace.js';
 
 let instance: ActiveFilters|null = null;
@@ -23,13 +22,13 @@ export class ActiveFilters {
     instance = null;
   }
 
-  #activeFilters: TimelineModel.TimelineModelFilter.TimelineModelFilter[] = [];
+  #activeFilters: Trace.Extras.TraceFilter.TraceFilter[] = [];
 
-  activeFilters(): readonly TimelineModel.TimelineModelFilter.TimelineModelFilter[] {
+  activeFilters(): readonly Trace.Extras.TraceFilter.TraceFilter[] {
     return this.#activeFilters;
   }
 
-  setFilters(newFilters: TimelineModel.TimelineModelFilter.TimelineModelFilter[]): void {
+  setFilters(newFilters: Trace.Extras.TraceFilter.TraceFilter[]): void {
     this.#activeFilters = newFilters;
   }
 

package/front_end/panels/timeline/AnimationsTrackAppender.ts

@@ -58,8 +58,7 @@ export class AnimationsTrackAppender implements TrackAppender {
 
   #eventAppendedCallbackFunction(event: Trace.Types.Events.Event, index: number): void {
     if (event && Trace.Types.Events.isSyntheticAnimation(event)) {
-      const CLSInsight = Trace.Insights.InsightRunners.CumulativeLayoutShift;
-      const failures = CLSInsight.getNonCompositedFailure(event);
+      const failures = Trace.Insights.Models.CLSCulprits.getNonCompositedFailure(event);
       if (failures.length) {
         addDecorationToEvent(this.#compatibilityBuilder.getFlameChartTimelineData(), index, {
           type: PerfUI.FlameChart.FlameChartDecorationType.WARNING_TRIANGLE,

package/front_end/panels/timeline/AnnotationHelpers.ts

@@ -7,9 +7,9 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
 
-import * as TimelineComponents from './components/components.js';
 import type {AnnotationModifiedEvent} from './ModificationsManager.js';
 import type * as Overlays from './overlays/overlays.js';
+import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
@@ -219,8 +219,8 @@ export function ariaAnnouncementForModifiedEvent(event: AnnotationModifiedEvent)
     }
     case 'UpdateLinkToEntry': {
       if (isEntriesLink(overlay) && overlay.entryFrom && overlay.entryTo) {
-        const from = TimelineComponents.EntryName.nameForEntry(overlay.entryFrom);
-        const to = TimelineComponents.EntryName.nameForEntry(overlay.entryTo);
+        const from = Utils.EntryName.nameForEntry(overlay.entryFrom);
+        const to = Utils.EntryName.nameForEntry(overlay.entryTo);
         return (i18nString(UIStrings.srEntriesLinked, {PH1: from, PH2: to}));
       }
       break;

package/front_end/panels/timeline/AppenderUtils.ts

@@ -62,8 +62,7 @@ export function buildGroupStyle(extra?: Partial<PerfUI.FlameChart.GroupStyle>):
  */
 export function buildTrackHeader(
     jslogContext: VisualLoggingTrackName|null, startLevel: number, name: string, style: PerfUI.FlameChart.GroupStyle,
-    selectable: boolean, expanded?: boolean, showStackContextMenu?: boolean,
-    legends?: PerfUI.FlameChart.Legend[]): PerfUI.FlameChart.Group {
+    selectable: boolean, expanded?: boolean, showStackContextMenu?: boolean): PerfUI.FlameChart.Group {
   const group: PerfUI.FlameChart.Group = {
     startLevel,
     name: name as Common.UIString.LocalizedString,
@@ -71,7 +70,6 @@ export function buildTrackHeader(
     selectable,
     expanded,
     showStackContextMenu,
-    legends,
   };
   if (jslogContext !== null) {
     group.jslogContext = jslogContext;

package/front_end/panels/timeline/CompatibilityTracksAppender.ts

@@ -21,9 +21,9 @@ import {ThreadAppender} from './ThreadAppender.js';
 import {
   EntryType,
   InstantEventVisibleDurationMs,
-  type TimelineFlameChartEntry,
 } from './TimelineFlameChartDataProvider.js';
 import {TimingsTrackAppender} from './TimingsTrackAppender.js';
+import * as TimelineUtils from './utils/utils.js';
 
 export type HighlightedEntryInfo = {
   title: string,
@@ -32,6 +32,17 @@ export type HighlightedEntryInfo = {
   additionalElement?: HTMLElement,
 };
 
+let showPostMessageEvents: boolean|undefined;
+function isShowPostMessageEventsEnabled(): boolean {
+  // Everytime the experiment is toggled devtools is reloaded so the
+  // cache is updated automatically.
+  if (showPostMessageEvents === undefined) {
+    showPostMessageEvents =
+        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_SHOW_POST_MESSAGE_EVENTS);
+  }
+  return showPostMessageEvents;
+}
+
 export function entryIsVisibleInTimeline(
     entry: Trace.Types.Events.Event, parsedTrace?: Trace.Handlers.Types.ParsedTrace): boolean {
   if (parsedTrace && parsedTrace.Meta.traceIsGeneric) {
@@ -49,9 +60,10 @@ export function entryIsVisibleInTimeline(
     return true;
   }
 
-  // Gate the visibility of post message events behind the experiement flag
-  if (Trace.Types.Events.isSchedulePostMessage(entry) || Trace.Types.Events.isHandlePostMessage(entry)) {
-    return Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_SHOW_POST_MESSAGE_EVENTS);
+  if (isShowPostMessageEventsEnabled()) {
+    if (Trace.Types.Events.isSchedulePostMessage(entry) || Trace.Types.Events.isHandlePostMessage(entry)) {
+      return true;
+    }
   }
 
   if (Trace.Types.Extensions.isSyntheticExtensionEntry(entry) || Trace.Types.Events.isSyntheticServerTiming(entry)) {
@@ -60,7 +72,7 @@ export function entryIsVisibleInTimeline(
 
   // Default styles are globally defined for each event name. Some
   // events are hidden by default.
-  const eventStyle = TimelineComponents.EntryStyles.getEventStyle(entry.name as Trace.Types.Events.Name);
+  const eventStyle = TimelineUtils.EntryStyles.getEventStyle(entry.name as Trace.Types.Events.Name);
   const eventIsTiming = Trace.Types.Events.isConsoleTime(entry) || Trace.Types.Events.isPerformanceMeasure(entry) ||
       Trace.Types.Events.isPerformanceMark(entry);
 
@@ -175,7 +187,7 @@ export class CompatibilityTracksAppender {
   #trackEventsForTreeview = new Map<TrackAppender, Trace.Types.Events.Event[]>();
   #flameChartData: PerfUI.FlameChart.FlameChartTimelineData;
   #parsedTrace: Trace.Handlers.Types.ParsedTrace;
-  #entryData: TimelineFlameChartEntry[];
+  #entryData: Trace.Types.Events.Event[];
   #colorGenerator: Common.Color.Generator;
   #allTrackAppenders: TrackAppender[] = [];
   #visibleTrackNames: Set<TrackAppenderName> = new Set([...TrackNames]);
@@ -204,7 +216,7 @@ export class CompatibilityTracksAppender {
    */
   constructor(
       flameChartData: PerfUI.FlameChart.FlameChartTimelineData, parsedTrace: Trace.Handlers.Types.ParsedTrace,
-      entryData: TimelineFlameChartEntry[], legacyEntryTypeByLevel: EntryType[]) {
+      entryData: Trace.Types.Events.Event[], legacyEntryTypeByLevel: EntryType[]) {
     this.#flameChartData = flameChartData;
     this.#parsedTrace = parsedTrace;
     this.#entryData = entryData;
@@ -244,7 +256,7 @@ export class CompatibilityTracksAppender {
   }
 
   setFlameChartDataAndEntryData(
-      flameChartData: PerfUI.FlameChart.FlameChartTimelineData, entryData: TimelineFlameChartEntry[],
+      flameChartData: PerfUI.FlameChart.FlameChartTimelineData, entryData: Trace.Types.Events.Event[],
       legacyEntryTypeByLevel: EntryType[]): void {
     this.#trackForGroup.clear();
     this.#flameChartData = flameChartData;
@@ -628,7 +640,7 @@ export class CompatibilityTracksAppender {
     if (track.titleForEvent) {
       return track.titleForEvent(event);
     }
-    return TimelineComponents.EntryName.nameForEntry(event, this.#parsedTrace);
+    return TimelineUtils.EntryName.nameForEntry(event, this.#parsedTrace);
   }
   /**
    * Returns the info shown when an event in the timeline is hovered.

package/front_end/panels/timeline/CountersGraph.ts

@@ -141,8 +141,7 @@ export class CountersGraph extends UI.Widget.VBox {
     this.countersByName.set(
         'jsHeapSizeUsed',
         this.createCounter(
-            i18nString(UIStrings.jsHeap), 'js-heap-size-used', 'hsl(220, 90%, 43%)',
-            Platform.NumberUtilities.bytesToString));
+            i18nString(UIStrings.jsHeap), 'js-heap-size-used', 'hsl(220, 90%, 43%)', i18n.ByteUtilities.bytesToString));
     this.countersByName.set(
         'documents', this.createCounter(i18nString(UIStrings.documents), 'documents', 'hsl(0, 90%, 43%)'));
     this.countersByName.set('nodes', this.createCounter(i18nString(UIStrings.nodes), 'nodes', 'hsl(120, 90%, 43%)'));
@@ -151,8 +150,7 @@ export class CountersGraph extends UI.Widget.VBox {
         this.createCounter(i18nString(UIStrings.listeners), 'js-event-listeners', 'hsl(38, 90%, 43%)'));
 
     this.gpuMemoryCounter = this.createCounter(
-        i18nString(UIStrings.gpuMemory), 'gpu-memory-used-kb', 'hsl(300, 90%, 43%)',
-        Platform.NumberUtilities.bytesToString);
+        i18nString(UIStrings.gpuMemory), 'gpu-memory-used-kb', 'hsl(300, 90%, 43%)', i18n.ByteUtilities.bytesToString);
     this.countersByName.set('gpuMemoryUsedKB', this.gpuMemoryCounter);
 
     TraceBounds.TraceBounds.onChange(this.#onTraceBoundsChangeBound);

package/front_end/panels/timeline/EntriesFilter.test.ts

@@ -725,47 +725,30 @@ describeWithEnvironment('EntriesFilter', function() {
       return Trace.Types.Events.isProfileCall(entry) && entry.callFrame.functionName === 'foo' && entry.dur === 233;
     });
 
-    const stack = new Timeline.EntriesFilter.EntriesFilter(parsedTrace.Renderer.entryToNode);
-    if (!stack) {
+    const entriesFilter = new Timeline.EntriesFilter.EntriesFilter(parsedTrace.Renderer.entryToNode);
+    if (!entriesFilter) {
       throw new Error('EntriesFilter does not exist');
     }
+    const aiNodeTree = entriesFilter.getAIEventNodeTree(firstFooCallEntry);
+    assert.exists(aiNodeTree);
 
-    const traceEntryTree = stack.getTraceEntryTreeForAI(firstFooCallEntry);
+    const fooAiNode = Trace.Helpers.TreeHelpers.AINode.getSelectedNodeWithinTree(aiNodeTree);
+    assert.exists(fooAiNode);
 
-    assert.exists(traceEntryTree);
-
-    const selectedNode =
-        Trace.Helpers.TreeHelpers.TraceEntryNodeForAI.getSelectedNodeForTraceEntryTreeForAI(traceEntryTree);
-    assert.exists(selectedNode);
+    // Use the toJSON simplification for comparison.
+    const simpleFooNode = JSON.parse(JSON.stringify(fooAiNode));
+    assert.strictEqual(simpleFooNode.children.length, 1);
 
     // delete for smaller deepStrictEqual comparison
-    selectedNode.children = traceEntryTree.children = [];
-
-    const expectedTraceEntryTree = new Trace.Helpers.TreeHelpers.TraceEntryNodeForAI(
-        'RunTask',
-        Trace.Types.Timing.MilliSeconds(336772948.813),
-        Trace.Types.Timing.MilliSeconds(4.614),
-        undefined,
-        Trace.Types.Timing.MilliSeconds(0.162),
-    );
-    expectedTraceEntryTree.id = 368 as Trace.Helpers.TreeHelpers.TraceEntryNodeId;
-    expectedTraceEntryTree.children = [];
-    assert.deepStrictEqual(traceEntryTree, expectedTraceEntryTree);
-
-    const expectedselectedNode = new Trace.Helpers.TreeHelpers.TraceEntryNodeForAI(
-        'ProfileCall',
-        Trace.Types.Timing.MilliSeconds(336772953.044),
-        Trace.Types.Timing.MilliSeconds(0.233),
-        undefined,
-        Trace.Types.Timing.MilliSeconds(0.162),
-    );
-    expectedselectedNode.id = 408 as Trace.Helpers.TreeHelpers.TraceEntryNodeId;
-    expectedselectedNode.column = 12;
-    expectedselectedNode.function = 'foo';
-    expectedselectedNode.line = 8;
-    expectedselectedNode.selected = true;
-    expectedselectedNode.domain = 'file://';
-    expectedselectedNode.children = [];
-    assert.deepStrictEqual(selectedNode, expectedselectedNode);
+    simpleFooNode.children = [];
+
+    assert.deepStrictEqual(simpleFooNode, {
+      dur: 0.2,
+      name: 'foo',
+      selected: true,
+      self: 0.2,
+      url: 'file:///usr/local/google/home/alinavarkki/stack/recursion.html',
+      children: [],
+    });
   });
 });

package/front_end/panels/timeline/EntriesFilter.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 Root from '../../core/root/root.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 
@@ -80,13 +81,14 @@ export class EntriesFilter {
    * Returns the trace entry tree for the specified event, simplified for input to AI Assistance.
    * The tree is rooted at the top-level task that contains the event, with the node for specified event marked as selected.
    */
-  getTraceEntryTreeForAI(entry: Trace.Types.Events.Event): Trace.Helpers.TreeHelpers.TraceEntryNodeForAI|null {
-    const entryNode = this.#entryToNode.get(entry);
-    if (!entryNode) {
+  getAIEventNodeTree(entry: Trace.Types.Events.Event): Trace.Helpers.TreeHelpers.AINode|null {
+    const node = this.#entryToNode.get(entry);
+    if (!node) {
       return null;
     }
 
-    return Trace.Helpers.TreeHelpers.TraceEntryNodeForAI.fromSelectedEntryNode(entryNode);
+    return Trace.Helpers.TreeHelpers.AINode.fromEntryNode(
+        node, Root.Runtime.experiments.isEnabled('timeline-show-all-events') ? () => true : entryIsVisibleInTimeline);
   }
 
   /**