chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

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

@@ -12,22 +12,22 @@ function nestedBreadcrumbs(): {
   breadcrumb1: Trace.Types.File.Breadcrumb,
   breadcrumb2: Trace.Types.File.Breadcrumb,
 } {
-  const initialTraceWindow: Trace.Types.Timing.TraceWindowMicroSeconds = {
-    min: Trace.Types.Timing.MicroSeconds(1000),
-    max: Trace.Types.Timing.MicroSeconds(10000),
-    range: Trace.Types.Timing.MicroSeconds(9000),
+  const initialTraceWindow: Trace.Types.Timing.TraceWindowMicro = {
+    min: Trace.Types.Timing.Micro(1000),
+    max: Trace.Types.Timing.Micro(10000),
+    range: Trace.Types.Timing.Micro(9000),
   };
 
-  const traceWindow1: Trace.Types.Timing.TraceWindowMicroSeconds = {
-    min: Trace.Types.Timing.MicroSeconds(3000),
-    max: Trace.Types.Timing.MicroSeconds(9000),
-    range: Trace.Types.Timing.MicroSeconds(6000),
+  const traceWindow1: Trace.Types.Timing.TraceWindowMicro = {
+    min: Trace.Types.Timing.Micro(3000),
+    max: Trace.Types.Timing.Micro(9000),
+    range: Trace.Types.Timing.Micro(6000),
   };
 
-  const traceWindow2: Trace.Types.Timing.TraceWindowMicroSeconds = {
-    min: Trace.Types.Timing.MicroSeconds(4000),
-    max: Trace.Types.Timing.MicroSeconds(6000),
-    range: Trace.Types.Timing.MicroSeconds(2000),
+  const traceWindow2: Trace.Types.Timing.TraceWindowMicro = {
+    min: Trace.Types.Timing.Micro(4000),
+    max: Trace.Types.Timing.Micro(6000),
+    range: Trace.Types.Timing.Micro(2000),
   };
 
   const breadcrumb2: Trace.Types.File.Breadcrumb = {
@@ -128,10 +128,10 @@ describe('Timeline breadcrumbs', () => {
     assert.deepEqual(crumbs.activeBreadcrumb, initialBreadcrumb);
 
     // Add a new breadcrumb
-    const traceWindow4: Trace.Types.Timing.TraceWindowMicroSeconds = {
-      min: Trace.Types.Timing.MicroSeconds(2000),
-      max: Trace.Types.Timing.MicroSeconds(5000),
-      range: Trace.Types.Timing.MicroSeconds(3000),
+    const traceWindow4: Trace.Types.Timing.TraceWindowMicro = {
+      min: Trace.Types.Timing.Micro(2000),
+      max: Trace.Types.Timing.Micro(5000),
+      range: Trace.Types.Timing.Micro(3000),
     };
 
     const breadcrumb4: Trace.Types.File.Breadcrumb = {
@@ -179,7 +179,7 @@ describe('Timeline breadcrumbs', () => {
 
       const crumbs = new TimelineComponents.Breadcrumbs.Breadcrumbs(initialBreadcrumb.window);
 
-      const equalTraceWindow: Trace.Types.Timing.TraceWindowMicroSeconds = {
+      const equalTraceWindow: Trace.Types.Timing.TraceWindowMicro = {
         min: initialBreadcrumb.window.min,
         max: initialBreadcrumb.window.max,
         range: initialBreadcrumb.window.range,
@@ -190,25 +190,25 @@ describe('Timeline breadcrumbs', () => {
   });
 
   it('can create breadcrumbs with equal start or end as the parent breadcrumb', () => {
-    const initialTraceWindow: Trace.Types.Timing.TraceWindowMicroSeconds = {
-      min: Trace.Types.Timing.MicroSeconds(1000),
-      max: Trace.Types.Timing.MicroSeconds(10000),
-      range: Trace.Types.Timing.MicroSeconds(9000),
+    const initialTraceWindow: Trace.Types.Timing.TraceWindowMicro = {
+      min: Trace.Types.Timing.Micro(1000),
+      max: Trace.Types.Timing.Micro(10000),
+      range: Trace.Types.Timing.Micro(9000),
     };
     TraceBounds.TraceBounds.BoundsManager.instance({forceNew: true}).resetWithNewBounds(initialTraceWindow);
 
     const crumbs = new TimelineComponents.Breadcrumbs.Breadcrumbs(initialTraceWindow);
 
-    const traceWindow1: Trace.Types.Timing.TraceWindowMicroSeconds = {
-      min: Trace.Types.Timing.MicroSeconds(1000),
-      max: Trace.Types.Timing.MicroSeconds(9000),
-      range: Trace.Types.Timing.MicroSeconds(8000),
+    const traceWindow1: Trace.Types.Timing.TraceWindowMicro = {
+      min: Trace.Types.Timing.Micro(1000),
+      max: Trace.Types.Timing.Micro(9000),
+      range: Trace.Types.Timing.Micro(8000),
     };
 
-    const traceWindow2: Trace.Types.Timing.TraceWindowMicroSeconds = {
-      min: Trace.Types.Timing.MicroSeconds(3000),
-      max: Trace.Types.Timing.MicroSeconds(9000),
-      range: Trace.Types.Timing.MicroSeconds(6000),
+    const traceWindow2: Trace.Types.Timing.TraceWindowMicro = {
+      min: Trace.Types.Timing.Micro(3000),
+      max: Trace.Types.Timing.Micro(9000),
+      range: Trace.Types.Timing.Micro(6000),
     };
 
     crumbs.add(traceWindow1);

package/front_end/panels/timeline/CompatibilityTracksAppender.ts

@@ -10,7 +10,7 @@ import type * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
 import {AnimationsTrackAppender} from './AnimationsTrackAppender.js';
-import {getEventLevel, getFormattedTime, type LastTimestampByLevel} from './AppenderUtils.js';
+import {getDurationString, getEventLevel, type LastTimestampByLevel} from './AppenderUtils.js';
 import * as TimelineComponents from './components/components.js';
 import {ExtensionTrackAppender} from './ExtensionTrackAppender.js';
 import {GPUTrackAppender} from './GPUTrackAppender.js';
@@ -26,13 +26,13 @@ import {TimelinePanel} from './TimelinePanel.js';
 import {TimingsTrackAppender} from './TimingsTrackAppender.js';
 import * as TimelineUtils from './utils/utils.js';
 
-export type PopoverInfo = {
-  title: string,
-  formattedTime: string,
-  url: string|null,
-  warningElements: HTMLSpanElement[],
-  additionalElements: HTMLElement[],
-};
+export interface PopoverInfo {
+  title: string;
+  formattedTime: string;
+  url: string|null;
+  warningElements: HTMLSpanElement[];
+  additionalElements: HTMLElement[];
+}
 
 let showPostMessageEvents: boolean|undefined;
 function isShowPostMessageEventsEnabled(): boolean {
@@ -305,12 +305,12 @@ export class CompatibilityTracksAppender {
         }
         case Trace.Handlers.Threads.ThreadType.WORKER:
           return 3;
+        case Trace.Handlers.Threads.ThreadType.AUCTION_WORKLET:
+          return 3;
         case Trace.Handlers.Threads.ThreadType.RASTERIZER:
           return 4;
         case Trace.Handlers.Threads.ThreadType.THREAD_POOL:
           return 5;
-        case Trace.Handlers.Threads.ThreadType.AUCTION_WORKLET:
-          return 6;
         case Trace.Handlers.Threads.ThreadType.OTHER:
           return 7;
         default:
@@ -318,16 +318,14 @@ export class CompatibilityTracksAppender {
       }
     };
     const threads = Trace.Handlers.Threads.threadsInTrace(this.#parsedTrace);
-    const processedAuctionWorkletsIds = new Set<Trace.Types.Events.ProcessID>();
     const showAllEvents = Root.Runtime.experiments.isEnabled('timeline-show-all-events');
 
-    for (const {pid, tid, name, type} of threads) {
+    for (const {pid, tid, name, type, entries, tree} of threads) {
       if (this.#parsedTrace.Meta.traceIsGeneric) {
-        // If the trace is generic, we just push all of the threads with no
-        // effort to differentiate them, hence overriding the thread type to be
-        // OTHER for all threads.
-        this.#threadAppenders.push(
-            new ThreadAppender(this, this.#parsedTrace, pid, tid, name, Trace.Handlers.Threads.ThreadType.OTHER));
+        // If the trace is generic, we just push all of the threads with no effort to differentiate them, hence
+        // overriding the thread type to be OTHER for all threads.
+        this.#threadAppenders.push(new ThreadAppender(
+            this, this.#parsedTrace, pid, tid, name, Trace.Handlers.Threads.ThreadType.OTHER, entries, tree));
         continue;
       }
       // These threads have no useful information. Omit them
@@ -335,28 +333,22 @@ export class CompatibilityTracksAppender {
         continue;
       }
 
-      const maybeWorklet = this.#parsedTrace.AuctionWorklets.worklets.get(pid);
-      if (processedAuctionWorkletsIds.has(pid)) {
-        // Keep track of this process to ensure we only add the following
-        // tracks once per process and not once per thread.
-        continue;
-      }
-      if (maybeWorklet) {
-        processedAuctionWorkletsIds.add(pid);
-        // Each AuctionWorklet event represents two threads:
+      const matchingWorklet = this.#parsedTrace.AuctionWorklets.worklets.get(pid);
+      if (matchingWorklet) {
+        // Each AuctionWorklet has two key threads:
         // 1. the Utility Thread
-        // 2. the V8 Helper Thread
-        // Note that the names passed here are not used visually. TODO: remove this name?
-        this.#threadAppenders.push(new ThreadAppender(
-            this, this.#parsedTrace, pid, maybeWorklet.args.data.utilityThread.tid, 'auction-worket-utility',
-            Trace.Handlers.Threads.ThreadType.AUCTION_WORKLET));
-        this.#threadAppenders.push(new ThreadAppender(
-            this, this.#parsedTrace, pid, maybeWorklet.args.data.v8HelperThread.tid, 'auction-worklet-v8helper',
-            Trace.Handlers.Threads.ThreadType.AUCTION_WORKLET));
+        // 2. the V8 Helper Thread - either a bidder or seller. see buildNameForAuctionWorklet()
+        // There are other threads in a worklet process, but we don't render them.
+        const tids = [matchingWorklet.args.data.utilityThread.tid, matchingWorklet.args.data.v8HelperThread.tid];
+        if (tids.includes(tid)) {
+          this.#threadAppenders.push(new ThreadAppender(
+              this, this.#parsedTrace, pid, tid, '', Trace.Handlers.Threads.ThreadType.AUCTION_WORKLET, entries, tree));
+        }
         continue;
       }
 
-      this.#threadAppenders.push(new ThreadAppender(this, this.#parsedTrace, pid, tid, name, type));
+      // The Common case… Add the main thread, or iframe, or thread pool, etc.
+      this.#threadAppenders.push(new ThreadAppender(this, this.#parsedTrace, pid, tid, name, type, entries, tree));
     }
     // Sort first by track order, then break ties by placing busier tracks first.
     this.#threadAppenders.sort(
@@ -467,8 +459,8 @@ export class CompatibilityTracksAppender {
    * Returns number of tracks of given type already appended.
    * Used to name the "Raster Thread 6" tracks, etc
    */
-  getCurrentTrackCountForThreadType(threadType: Trace.Handlers.Threads.ThreadType.RASTERIZER|
-                                    Trace.Handlers.Threads.ThreadType.THREAD_POOL): number {
+  getCurrentTrackCountForThreadType(
+      threadType: Trace.Handlers.Threads.ThreadType.RASTERIZER|Trace.Handlers.Threads.ThreadType.THREAD_POOL): number {
     return this.#threadAppenders.filter(appender => appender.threadType === threadType && appender.headerAppended())
         .length;
   }
@@ -499,18 +491,6 @@ export class CompatibilityTracksAppender {
     return this.eventsForTreeView(track);
   }
 
-  /**
-   * Caches the track appender that owns a level. An appender takes
-   * ownership of a level when it appends data to it.
-   * The cache is useful to determine what appender should handle a
-   * query from the flame chart renderer when an event's feature (like
-   * style, title, etc.) is needed.
-   */
-  registerTrackForLevel(level: number, appender: TrackAppender): void {
-    // TODO(crbug.com/1442454) Figure out how to avoid the circular calls.
-    this.#trackForLevel.set(level, appender);
-  }
-
   groupForLevel(level: number): PerfUI.FlameChart.Group|null {
     const appenderForLevel = this.#trackForLevel.get(level);
     if (!appenderForLevel) {
@@ -533,9 +513,9 @@ export class CompatibilityTracksAppender {
     this.#entryData.push(event);
     this.#legacyEntryTypeByLevel[level] = EntryType.TRACK_APPENDER;
     this.#flameChartData.entryLevels[index] = level;
-    this.#flameChartData.entryStartTimes[index] = Trace.Helpers.Timing.microSecondsToMilliseconds(event.ts);
-    const dur = event.dur || Trace.Helpers.Timing.millisecondsToMicroseconds(InstantEventVisibleDurationMs);
-    this.#flameChartData.entryTotalTimes[index] = Trace.Helpers.Timing.microSecondsToMilliseconds(dur);
+    this.#flameChartData.entryStartTimes[index] = Trace.Helpers.Timing.microToMilli(event.ts);
+    const dur = event.dur || Trace.Helpers.Timing.milliToMicro(InstantEventVisibleDurationMs);
+    this.#flameChartData.entryTotalTimes[index] = Trace.Helpers.Timing.microToMilli(dur);
     return index;
   }
 
@@ -637,11 +617,14 @@ export class CompatibilityTracksAppender {
       throw new Error('Track not found for level');
     }
 
-    // Historically all tracks would have a titleForEvent() method.
-    // However, we are working on migrating all event title logic into one place (components/EntryName)
-    // TODO(crbug.com/365047728):
-    // Once this migration is complete, no tracks will have a custom
-    // titleForEvent method and we can remove titleForEvent entirely.
+    // Historically all tracks would have a titleForEvent() method. However a
+    // lot of these were duplicated so we worked on removing them in favour of
+    // the EntryName.nameForEntry method called below (see crbug.com/365047728).
+    // However, sometimes an appender needs to customise the titles slightly;
+    // for example the LayoutShiftsTrackAppender does not show any titles as we
+    // use diamonds to represent layout shifts.
+    // So whilst we expect most appenders to not define this method, we do
+    // allow appenders to override it.
     if (track.titleForEvent) {
       return track.titleForEvent(event);
     }
@@ -659,7 +642,7 @@ export class CompatibilityTracksAppender {
     // Defaults here, though tracks may chose to redefine title/formattedTime
     const info: PopoverInfo = {
       title: this.titleForEvent(event, level),
-      formattedTime: getFormattedTime(event.dur),
+      formattedTime: getDurationString(event.dur),
       warningElements: TimelineComponents.DetailsView.buildWarningElementsForEvent(event, this.#parsedTrace),
       additionalElements: [],
       url: null,

package/front_end/panels/timeline/CountersGraph.ts

@@ -28,6 +28,8 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+import '../../ui/legacy/legacy.js';
+
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
@@ -105,8 +107,7 @@ export class CountersGraph extends UI.Widget.VBox {
     this.header = new UI.Widget.HBox();
     this.header.element.classList.add('timeline-memory-header');
     this.header.show(this.element);
-    this.toolbar = new UI.Toolbar.Toolbar('timeline-memory-toolbar');
-    this.header.element.appendChild(this.toolbar.element);
+    this.toolbar = this.header.element.createChild('devtools-toolbar', 'timeline-memory-toolbar');
 
     this.graphsContainer = new UI.Widget.VBox();
     this.graphsContainer.show(this.element);

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

@@ -27,7 +27,7 @@ function findFirstEntry(
 describeWithEnvironment('EntriesFilter', function() {
   it('parses a stack and returns an empty list of invisible entries', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'basic-stack.json.gz');
-    const stack = new Timeline.EntriesFilter.EntriesFilter(parsedTrace.Renderer.entryToNode);
+    const stack = new Timeline.EntriesFilter.EntriesFilter(parsedTrace);
     assert.deepEqual([], stack?.invisibleEntries());
   });
 
@@ -62,7 +62,7 @@ describeWithEnvironment('EntriesFilter', function() {
       return Trace.Types.Events.isProfileCall(entry) && entry.callFrame.functionName === 'basicTwo' &&
           entry.dur === 827;
     });
-    const stack = new Timeline.EntriesFilter.EntriesFilter(parsedTrace.Renderer.entryToNode);
+    const stack = new Timeline.EntriesFilter.EntriesFilter(parsedTrace);
     if (!stack) {
       throw new Error('EntriesFilter does not exist');
     }
@@ -101,7 +101,7 @@ describeWithEnvironment('EntriesFilter', function() {
       return Trace.Types.Events.isProfileCall(entry) && entry.callFrame.functionName === 'basicTwo' &&
           entry.dur === 827;
     });
-    const stack = new Timeline.EntriesFilter.EntriesFilter(parsedTrace.Renderer.entryToNode);
+    const stack = new Timeline.EntriesFilter.EntriesFilter(parsedTrace);
     if (!stack) {
       throw new Error('EntriesFilter does not exist');
     }
@@ -143,7 +143,7 @@ describeWithEnvironment('EntriesFilter', function() {
       return Trace.Types.Events.isProfileCall(entry) && entry.callFrame.functionName === 'basicTwo' &&
           entry.dur === 827;
     });
-    const stack = new Timeline.EntriesFilter.EntriesFilter(parsedTrace.Renderer.entryToNode);
+    const stack = new Timeline.EntriesFilter.EntriesFilter(parsedTrace);
     if (!stack) {
       throw new Error('EntriesFilter does not exist');
     }
@@ -196,7 +196,7 @@ describeWithEnvironment('EntriesFilter', function() {
          const {endTime} = Trace.Helpers.Timing.eventTimingsMicroSeconds(entry);
          return endTime <= firstFooCallEndTime;
        });
-       const stack = new Timeline.EntriesFilter.EntriesFilter(parsedTrace.Renderer.entryToNode);
+       const stack = new Timeline.EntriesFilter.EntriesFilter(parsedTrace);
        if (!stack) {
          throw new Error('EntriesFilter does not exist');
        }
@@ -273,7 +273,7 @@ describeWithEnvironment('EntriesFilter', function() {
       const basicTwoCallEndTime = Trace.Helpers.Timing.eventTimingsMicroSeconds(basicTwoCallEntry).endTime;
       return endTime <= basicTwoCallEndTime;
     });
-    const stack = new Timeline.EntriesFilter.EntriesFilter(parsedTrace.Renderer.entryToNode);
+    const stack = new Timeline.EntriesFilter.EntriesFilter(parsedTrace);
     if (!stack) {
       throw new Error('EntriesFilter does not exist');
     }
@@ -335,7 +335,7 @@ describeWithEnvironment('EntriesFilter', function() {
       return endTime <= firstFooCallEndTime;
     });
 
-    const stack = new Timeline.EntriesFilter.EntriesFilter(parsedTrace.Renderer.entryToNode);
+    const stack = new Timeline.EntriesFilter.EntriesFilter(parsedTrace);
     if (!stack) {
       throw new Error('EntriesFilter does not exist');
     }
@@ -394,7 +394,7 @@ describeWithEnvironment('EntriesFilter', function() {
      * Applying 'undo all actions' should bring the stack to the original state.
      **/
 
-    const stack = new Timeline.EntriesFilter.EntriesFilter(parsedTrace.Renderer.entryToNode);
+    const stack = new Timeline.EntriesFilter.EntriesFilter(parsedTrace);
     if (!stack) {
       throw new Error('EntriesFilter does not exist');
     }
@@ -487,7 +487,7 @@ describeWithEnvironment('EntriesFilter', function() {
      * This should result in all basicTwo children being removed from the invisible array and stack being in the initial state.
      **/
 
-    const stack = new Timeline.EntriesFilter.EntriesFilter(parsedTrace.Renderer.entryToNode);
+    const stack = new Timeline.EntriesFilter.EntriesFilter(parsedTrace);
     if (!stack) {
       throw new Error('EntriesFilter does not exist');
     }
@@ -579,7 +579,7 @@ describeWithEnvironment('EntriesFilter', function() {
       return endTime <= firstFooCallEndTime;
     });
 
-    const stack = new Timeline.EntriesFilter.EntriesFilter(parsedTrace.Renderer.entryToNode);
+    const stack = new Timeline.EntriesFilter.EntriesFilter(parsedTrace);
     if (!stack) {
       throw new Error('EntriesFilter does not exist');
     }
@@ -653,7 +653,7 @@ 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);
+    const stack = new Timeline.EntriesFilter.EntriesFilter(parsedTrace);
     if (!stack) {
       throw new Error('EntriesFilter does not exist');
     }
@@ -680,7 +680,7 @@ describeWithEnvironment('EntriesFilter', function() {
       return Trace.Types.Events.isProfileCall(entry) && entry.nodeId === 42;
     });
 
-    const stack = new Timeline.EntriesFilter.EntriesFilter(parsedTrace.Renderer.entryToNode);
+    const stack = new Timeline.EntriesFilter.EntriesFilter(parsedTrace);
     if (!stack) {
       throw new Error('EntriesFilter does not exist');
     }
@@ -700,55 +700,4 @@ describeWithEnvironment('EntriesFilter', function() {
     assert.lengthOf(stack.expandableEntries(), 1);
     assert.isTrue(stack.expandableEntries().includes(taskEntry));
   });
-
-  it('returns the trace entry tree starting from the root task, highlighting the selected event', async function() {
-    const {parsedTrace} = await TraceLoader.traceEngine(this, 'two-functions-recursion.json.gz');
-    const mainThread = getMainThread(parsedTrace.Renderer);
-    /** This stack looks roughly like so (with some events omitted):
-     * ===========RunTask===========
-     * ...
-     * ======== onclick ============
-     * =========== foo =============
-     *               ==== foo2 =====
-     *               ===== foo =====
-     *               ==== foo2 =====
-     *               ===== foo =====
-     *               ==== foo2 =====
-     *               ===== foo =====
-     *
-     * In this test we want to test if for a selected entry, the tree for AI processing
-     * is generated correctly such that the root RunTask is the root node and the
-     * node for the selected event has property selected set as true.
-     **/
-
-    const firstFooCallEntry = findFirstEntry(mainThread.entries, entry => {
-      return Trace.Types.Events.isProfileCall(entry) && entry.callFrame.functionName === 'foo' && entry.dur === 233;
-    });
-
-    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 fooAiNode = Trace.Helpers.TreeHelpers.AINode.getSelectedNodeWithinTree(aiNodeTree);
-    assert.exists(fooAiNode);
-
-    // Use the toJSON simplification for comparison.
-    const simpleFooNode = JSON.parse(JSON.stringify(fooAiNode));
-    assert.lengthOf(simpleFooNode.children, 1);
-
-    // delete for smaller deepStrictEqual comparison
-    simpleFooNode.children = [];
-
-    assert.deepEqual(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,7 +2,6 @@
 // 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';
 
@@ -10,8 +9,6 @@ import {
   entryIsVisibleInTimeline,
 } from './CompatibilityTracksAppender.js';
 
-type EntryToNodeMap = Map<Trace.Types.Events.Event, Trace.Helpers.TreeHelpers.TraceEntryNode>;
-
 /**
  * This class can take in a thread that has been generated by the
  * RendererHandler and apply certain actions to it in order to modify what is
@@ -23,11 +20,7 @@ type EntryToNodeMap = Map<Trace.Types.Events.Event, Trace.Helpers.TreeHelpers.Tr
  * removed before rendering the resulting thread on the timeline.
  */
 export class EntriesFilter {
-  // Maps from an individual TraceEvent entry to its representation as a
-  // RendererEntryNode. We need this so we can then parse the tree structure
-  // generated by the RendererHandler.
-  #entryToNode: EntryToNodeMap;
-
+  #parsedTrace: Trace.Handlers.Types.ParsedTrace;
   // Track the set of invisible entries.
   #invisibleEntries: Trace.Types.Events.Event[] = [];
   // List of entries whose children are hidden. This list is used to
@@ -38,8 +31,14 @@ export class EntriesFilter {
   // will never change so we can avoid running the potentially expensive search again.
   #entryToDescendantsMap: Map<Trace.Helpers.TreeHelpers.TraceEntryNode, Trace.Types.Events.Event[]> = new Map();
 
-  constructor(entryToNodeMap: EntryToNodeMap) {
-    this.#entryToNode = entryToNodeMap;
+  constructor(parsedTrace: Trace.Handlers.Types.ParsedTrace) {
+    this.#parsedTrace = parsedTrace;
+  }
+
+  #getEntryNode(entry: Trace.Types.Events.Event): Trace.Helpers.TreeHelpers.TraceEntryNode|undefined {
+    // The entry might be either from the Samples handler or Renderer handler. So we need to check both handlers to find
+    // the EntryNode.
+    return this.#parsedTrace.Samples.entryToNode.get(entry) ?? this.#parsedTrace.Renderer.entryToNode.get(entry);
   }
 
   /**
@@ -47,7 +46,7 @@ export class EntriesFilter {
    * For example, if an entry has no children, COLLAPSE_FUNCTION will not change the FlameChart, therefore there is no need to show this action as an option.
    */
   findPossibleActions(entry: Trace.Types.Events.Event): PerfUI.FlameChart.PossibleFilterActions {
-    const entryNode = this.#entryToNode.get(entry);
+    const entryNode = this.#getEntryNode(entry);
     if (!entryNode) {
       // Invalid node was given, return no possible actions.
       return {
@@ -77,25 +76,11 @@ export class EntriesFilter {
     return possibleActions;
   }
 
-  /**
-   * 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.
-   */
-  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.AINode.fromEntryNode(
-        node, Root.Runtime.experiments.isEnabled('timeline-show-all-events') ? () => true : entryIsVisibleInTimeline);
-  }
-
   /**
    * Returns the amount of entry descendants that belong to the hidden entries array.
    * */
   findHiddenDescendantsAmount(entry: Trace.Types.Events.Event): number {
-    const entryNode = this.#entryToNode.get(entry);
+    const entryNode = this.#getEntryNode(entry);
     if (!entryNode) {
       return 0;
     }
@@ -151,7 +136,7 @@ export class EntriesFilter {
         // selected.
         entriesToHide.add(action.entry);
         // If parent node exists, add it to expandableEntries, so it would be possible to uncollapse its children.
-        const actionNode = this.#entryToNode.get(action.entry) || null;
+        const actionNode = this.#getEntryNode(action.entry) || null;
         const parentNode = actionNode && this.#firstVisibleParentNodeForEntryNode(actionNode);
         if (parentNode) {
           this.#addExpandableEntry(parentNode.entry);
@@ -160,7 +145,7 @@ export class EntriesFilter {
       }
       case PerfUI.FlameChart.FilterAction.COLLAPSE_FUNCTION: {
         // The entry itself remains visible, but all of its descendants are hidden.
-        const entryNode = this.#entryToNode.get(action.entry);
+        const entryNode = this.#getEntryNode(action.entry);
         if (!entryNode) {
           // Invalid node was given, just ignore and move on.
           break;
@@ -171,7 +156,7 @@ export class EntriesFilter {
         break;
       }
       case PerfUI.FlameChart.FilterAction.COLLAPSE_REPEATING_DESCENDANTS: {
-        const entryNode = this.#entryToNode.get(action.entry);
+        const entryNode = this.#getEntryNode(action.entry);
         if (!entryNode) {
           // Invalid node was given, just ignore and move on.
           break;
@@ -209,7 +194,7 @@ export class EntriesFilter {
    */
   #addExpandableEntry(entry: Trace.Types.Events.Event): void {
     this.#expandableEntries.push(entry);
-    const entryNode = this.#entryToNode.get(entry);
+    const entryNode = this.#getEntryNode(entry);
     if (!entryNode) {
       // Invalid node was given, just ignore and move on.
       return;
@@ -223,7 +208,7 @@ export class EntriesFilter {
   }
 
   firstVisibleParentEntryForEntry(entry: Trace.Types.Events.Event): Trace.Types.Events.Event|null {
-    const node = this.#entryToNode.get(entry);
+    const node = this.#getEntryNode(entry);
     if (!node) {
       return null;
     }
@@ -306,7 +291,7 @@ export class EntriesFilter {
    * If it is, reveal it by resetting clidren the closest expandable entry,
    */
   revealEntry(entry: Trace.Types.Events.Event): void {
-    const entryNode = this.#entryToNode.get(entry);
+    const entryNode = this.#getEntryNode(entry);
     if (!entryNode) {
       // Invalid node was given, just ignore and move on.
       return;
@@ -323,7 +308,7 @@ export class EntriesFilter {
    * invisible entries array to make them visible.
    */
   #makeEntryChildrenVisible(entry: Trace.Types.Events.Event): void {
-    const entryNode = this.#entryToNode.get(entry);
+    const entryNode = this.#getEntryNode(entry);
     if (!entryNode) {
       // Invalid node was given, just ignore and move on.
       return;

package/front_end/panels/timeline/EventsTimelineTreeView.ts

@@ -135,7 +135,7 @@ export class EventsTimelineTreeView extends TimelineTreeView {
     if (!traceEvent) {
       return false;
     }
-    void TimelineUIUtils.buildTraceEventDetails(parsedTrace, traceEvent, this.linkifier, false)
+    void TimelineUIUtils.buildTraceEventDetails(parsedTrace, traceEvent, this.linkifier, false, null)
         .then(fragment => this.detailsView.element.appendChild(fragment));
     return true;
   }
@@ -189,7 +189,7 @@ export class Filters extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     function durationFilterChanged(this: Filters): void {
       const duration = (durationFilterUI.selectedOption() as HTMLOptionElement).value;
       const minimumRecordDuration = parseInt(duration, 10);
-      this.durationFilter.setMinimumRecordDuration(Trace.Types.Timing.MilliSeconds(minimumRecordDuration));
+      this.durationFilter.setMinimumRecordDuration(Trace.Types.Timing.Milli(minimumRecordDuration));
       this.notifyFiltersChanged();
     }
 
@@ -212,6 +212,6 @@ const enum Events {
   FILTER_CHANGED = 'FilterChanged',
 }
 
-type EventTypes = {
-  [Events.FILTER_CHANGED]: void,
-};
+interface EventTypes {
+  [Events.FILTER_CHANGED]: void;
+}

package/front_end/panels/timeline/ExtensionTrackAppender.ts

@@ -5,7 +5,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
-import {buildGroupStyle, buildTrackHeader, getFormattedTime} from './AppenderUtils.js';
+import {buildGroupStyle, buildTrackHeader, getDurationString} from './AppenderUtils.js';
 import {
   type CompatibilityTracksAppender,
   type PopoverInfo,
@@ -107,6 +107,6 @@ export class ExtensionTrackAppender implements TrackAppender {
     info.title = Trace.Types.Extensions.isSyntheticExtensionEntry(event) && event.args.tooltipText ?
         event.args.tooltipText :
         this.titleForEvent(event);
-    info.formattedTime = getFormattedTime(event.dur);
+    info.formattedTime = getDurationString(event.dur);
   }
 }