chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/front_end/panels/timeline/track_appenders/ThreadAppender.test.ts

@@ -21,7 +21,7 @@ import * as Timeline from '../timeline.js';
 function initTrackAppender(
     flameChartData: PerfUI.FlameChart.FlameChartTimelineData,
     parsedTrace: Trace.Handlers.Types.ParsedTrace,
-    entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[],
+    entryData: Trace.Types.Events.Event[],
     entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[],
     ): Timeline.ThreadAppender.ThreadAppender[] {
   setupIgnoreListManagerEnvironment();
@@ -33,11 +33,11 @@ async function renderThreadAppendersFromTrace(context: Mocha.Context|Mocha.Suite
   entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[],
   flameChartData: PerfUI.FlameChart.FlameChartTimelineData,
   threadAppenders: Timeline.ThreadAppender.ThreadAppender[],
-  entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[],
+  entryData: Trace.Types.Events.Event[],
   parsedTrace: Readonly<Trace.Handlers.Types.ParsedTrace>,
 }> {
   const entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[] = [];
-  const entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[] = [];
+  const entryData: Trace.Types.Events.Event[] = [];
   const flameChartData = PerfUI.FlameChart.FlameChartTimelineData.createEmpty();
   const {parsedTrace} = await TraceLoader.traceEngine(context, trace);
   const threadAppenders = initTrackAppender(flameChartData, parsedTrace, entryData, entryTypeByLevel);
@@ -58,10 +58,10 @@ function renderThreadAppendersFromParsedData(parsedTrace: Trace.Handlers.Types.P
   entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[],
   flameChartData: PerfUI.FlameChart.FlameChartTimelineData,
   threadAppenders: Timeline.ThreadAppender.ThreadAppender[],
-  entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[],
+  entryData: Trace.Types.Events.Event[],
 } {
   const entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[] = [];
-  const entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[] = [];
+  const entryData: Trace.Types.Events.Event[] = [];
   const flameChartData = PerfUI.FlameChart.FlameChartTimelineData.createEmpty();
 
   const threadAppenders = initTrackAppender(flameChartData, parsedTrace, entryData, entryTypeByLevel);
@@ -477,11 +477,6 @@ describeWithEnvironment('ThreadAppender', function() {
       ignoreListManager.ignoreListURL(SCRIPT_TO_IGNORE);
       const {entryData, flameChartData, threadAppenders} = renderThreadAppendersFromParsedData(mockParsedTrace);
       const entryDataNames = entryData.map(entry => {
-        const regularEvent =
-            Timeline.TimelineFlameChartDataProvider.TimelineFlameChartDataProvider.timelineEntryIsTraceEvent(entry);
-        if (!regularEvent) {
-          return 'Unknown type';
-        }
         if (Trace.Types.Events.isProfileCall(entry)) {
           return entry.callFrame.functionName;
         }

package/front_end/panels/timeline/track_appenders/TimingsTrackAppender.test.ts

@@ -12,7 +12,7 @@ import * as Timeline from '../timeline.js';
 function initTrackAppender(
     flameChartData: PerfUI.FlameChart.FlameChartTimelineData,
     parsedTrace: Trace.Handlers.Types.ParsedTrace,
-    entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[],
+    entryData: Trace.Types.Events.Event[],
     entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[],
     ): Timeline.TimingsTrackAppender.TimingsTrackAppender {
   Timeline.ExtensionDataGatherer.ExtensionDataGatherer.instance().modelChanged(parsedTrace);
@@ -24,7 +24,7 @@ function initTrackAppender(
 describeWithEnvironment('TimingTrackAppender', function() {
   let parsedTrace: Trace.Handlers.Types.ParsedTrace;
   let timingsTrackAppender: Timeline.TimingsTrackAppender.TimingsTrackAppender;
-  let entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[] = [];
+  let entryData: Trace.Types.Events.Event[] = [];
   let flameChartData = PerfUI.FlameChart.FlameChartTimelineData.createEmpty();
   let entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[] = [];
   beforeEach(async function() {
@@ -298,7 +298,7 @@ describeWithEnvironment('TimingTrackAppender', function() {
       styleElement.id = 'fake-perf-panel-colors';
       styleElement.textContent = `
         :root {
-          --ref-palette-primary70: rgb(4 4 4);
+          --ref-palette-blue70: rgb(4 4 4);
           --ref-palette-error60: rgb(10 10 10);
         }
       `;
@@ -336,7 +336,7 @@ describeWithEnvironment('TimingTrackAppender', function() {
           assert.strictEqual(timingsTrackAppender.colorForEvent(event), 'rgb(10 10 10)');
         } else {
           // Unknown colors are mapped to "primary" by default, and
-          // "primary" color category is mapped to --ref-palette-primary70
+          // "primary" color category is mapped to --ref-palette-blue70
           // which is faked out to 4, 4, 4
           assert.strictEqual(timingsTrackAppender.colorForEvent(event), 'rgb(4 4 4)');
         }
@@ -357,7 +357,7 @@ describeWithEnvironment('TimingTrackAppender', function() {
         },
         cat: 'devtools.extension',
       } as unknown as Trace.Types.Events.Event;
-      // "primary" color category is mapped to --ref-palette-primary70
+      // "primary" color category is mapped to --ref-palette-blue70
       // which is faked out to 4, 4, 4
       assert.strictEqual(timingsTrackAppender.colorForEvent(mockExtensionEntryNoColor), 'rgb(4 4 4)');
       assert.strictEqual(timingsTrackAppender.colorForEvent(mockExtensionEntryUnknownColor), 'rgb(4 4 4)');

package/front_end/panels/timeline/utils/AICallTree.test.ts

@@ -0,0 +1,185 @@
+// Copyright 2024 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 * as Trace from '../../../models/trace/trace.js';
+import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
+import {TraceLoader} from '../../../testing/TraceLoader.js';
+
+import * as Utils from './utils.js';
+
+describeWithEnvironment('AICallTree', () => {
+  it('serializes a simple tree', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-outermost-frames.json.gz');
+    const mainEvents = parsedTrace.Renderer.allTraceEntries;
+    // A function '_ds.q.ns'. Has a very small tree by default.
+    const selectedEvent = mainEvents.find(event => event.ts === 465457308823);
+    if (!selectedEvent) {
+      throw new Error('Could not find expected event.');
+    }
+    const callTree = Utils.AICallTree.AICallTree.from(selectedEvent, mainEvents, parsedTrace);
+    const expectedData = '\n' +
+        `
+
+# All URL #s:
+
+  * 0: https://www.gstatic.com/devrel-devsite/prod/vafe2e13ca17bb026e70df42a2ead1c8192750e86a12923a88eda839025dabf95/js/devsite_app_module.js
+
+# Call tree:
+
+Node: 1 – Task
+dur: 0.2
+Children:
+  * 2 – Timer fired
+
+Node: 2 – Timer fired
+dur: 0.2
+Children:
+  * 3 – Function call
+
+Node: 3 – Function call
+dur: 0.2
+URL #: 0
+Children:
+  * 4 – _ds.q.ns
+
+Node: 4 – _ds.q.ns
+Selected: true
+dur: 0.2
+URL #: 0
+Children:
+  * 5 – clearTimeout
+
+Node: 5 – clearTimeout
+dur: 0.2
+self: 0
+Children:
+  * 6 – Recalculate style
+
+Node: 6 – Recalculate style
+dur: 0.2
+self: 0.2
+`.trim();
+    assert.strictEqual(callTree.serialize(), expectedData);
+  });
+
+  it('serializes a tree with lots of recursion', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'one-second-interaction.json.gz');
+    const mainEvents = parsedTrace.Renderer.allTraceEntries;
+    const selectedEvent = mainEvents.find(event => event.ts === 141251951589);
+    if (!selectedEvent) {
+      throw new Error('Could not find expected event.');
+    }
+    const callTree = Utils.AICallTree.AICallTree.from(selectedEvent, mainEvents, parsedTrace);
+
+    // We don't need to validate the whole tree, just that it has recursion
+    const treeStr = callTree.serialize();
+    const lines = treeStr.split('\n');
+    const fibCallCount = lines.filter(line => line.includes('fibonacci')).length;
+    assert.isTrue(fibCallCount > 10);
+  });
+
+  it('AITreeFilter includes the right items in the tree', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'two-workers.json.gz');
+    const mainEvents = parsedTrace.Renderer.allTraceEntries;
+
+    // A very small 'get storage' event. It's 6µs long
+    const tinyEvent = mainEvents.find(event => event.ts === 107350149168);
+    if (!tinyEvent) {
+      throw new Error('Could not find expected event.');
+    }
+    const tinyStr = Utils.AICallTree.AICallTree.from(tinyEvent, mainEvents, parsedTrace).serialize();
+    assert.strictEqual(tinyStr.split('\n').filter(l => l.startsWith('Node:')).join('\n'), `
+Node: 1 – Task
+Node: 2 – Parse HTML
+Node: 3 – Evaluate script
+Node: 4 – (anonymous)
+Node: 5 – get storage`.trim());
+    assert.include(tinyStr, 'get storage');
+
+    // An evaluateScript that has 3 'Compile code' children
+    const evaluateEvent = mainEvents.find(event => event.ts === 107350147808);
+    if (!evaluateEvent) {
+      throw new Error('Could not find expected event.');
+    }
+    const treeStr = Utils.AICallTree.AICallTree.from(evaluateEvent, mainEvents, parsedTrace).serialize();
+    assert.strictEqual(treeStr.split('\n').filter(l => l.startsWith('Node:')).join('\n'), `
+Node: 1 – Task
+Node: 2 – Parse HTML
+Node: 3 – Evaluate script
+Node: 4 – Compile script
+Node: 5 – (anonymous)
+Node: 6 – H.la`.trim());
+    assert.notInclude(treeStr, 'Compile code');
+
+    // An Compile code event within the evaluateEvent call tree
+    const compileEvent = mainEvents.find(event => event.ts === 107350148218);
+    if (!compileEvent) {
+      throw new Error('Could not find expected event.');
+    }
+    const compileStr = Utils.AICallTree.AICallTree.from(compileEvent, mainEvents, parsedTrace).serialize();
+    assert.strictEqual(compileStr.split('\n').filter(l => l.startsWith('Node:')).join('\n'), `
+Node: 1 – Task
+Node: 2 – Parse HTML
+Node: 3 – Evaluate script
+Node: 4 – (anonymous)
+Node: 5 – Compile code`.trim());
+    assert.include(compileStr, 'Compile code');
+  });
+});
+
+describe('AITreeFilter', () => {
+  const makeEvent = (
+                        name: string,
+                        ts: number,
+                        dur: number,
+                        ): Trace.Types.Events.Event => ({
+    name,
+    cat: 'disabled-by-default-devtools.timeline',
+    ph: Trace.Types.Events.Phase.COMPLETE,
+    ts: Trace.Types.Timing.MicroSeconds(ts),
+    dur: Trace.Types.Timing.MicroSeconds(dur),
+    pid: Trace.Types.Events.ProcessID(1),
+    tid: Trace.Types.Events.ThreadID(4),
+    args: {},
+  });
+
+  it('always includes the selected event', () => {
+    const selectedEvent = makeEvent('selected', 0, 100);
+    const filter = new Utils.AICallTree.AITreeFilter(selectedEvent);
+    assert.strictEqual(filter.accept(selectedEvent), true);
+  });
+
+  it('includes events that are long enough', () => {
+    const selectedEvent = makeEvent('selected', 0, 100);
+    const filter = new Utils.AICallTree.AITreeFilter(selectedEvent);
+
+    assert.strictEqual(filter.accept(makeEvent('short', 0, 1)), true);
+    assert.strictEqual(filter.accept(makeEvent('short', 0, 0.6)), true);
+    assert.strictEqual(filter.accept(makeEvent('long', 0, 101)), true);
+    assert.strictEqual(filter.accept(makeEvent('long', 0, 200)), true);
+    assert.strictEqual(filter.accept(makeEvent('long', 0, 1000)), true);
+  });
+
+  it('excludes events that are too short', () => {
+    const selectedEvent = makeEvent('selected', 0, 100);
+    const filter = new Utils.AICallTree.AITreeFilter(selectedEvent);
+
+    assert.strictEqual(filter.accept(makeEvent('short', 0, 0)), false);
+    assert.strictEqual(filter.accept(makeEvent('short', 0, 0.1)), false);
+    assert.strictEqual(filter.accept(makeEvent('short', 0, 0.4)), false);
+  });
+
+  it('excludes COMPILE_CODE nodes if non-selected', () => {
+    const selectedEvent = makeEvent('selected', 0, 100);
+    const compileCodeEvent = makeEvent(Trace.Types.Events.Name.COMPILE_CODE, 0, 100);
+    const filter = new Utils.AICallTree.AITreeFilter(selectedEvent);
+    assert.strictEqual(filter.accept(compileCodeEvent), false);
+  });
+
+  it('includes COMPILE_CODE nodes if selected', () => {
+    const selectedEvent = makeEvent(Trace.Types.Events.Name.COMPILE_CODE, 0, 100);
+    const filter = new Utils.AICallTree.AITreeFilter(selectedEvent);
+    assert.strictEqual(filter.accept(selectedEvent), true);
+  });
+});

package/front_end/panels/timeline/utils/AICallTree.ts

@@ -0,0 +1,166 @@
+// Copyright 2024 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 * as Trace from '../../../models/trace/trace.js';
+
+import {nameForEntry} from './EntryName.js';
+import {visibleTypes} from './EntryStyles.js';
+import {SourceMapsResolver} from './SourceMapsResolver.js';
+
+/** Iterates from a node down through its descendents. If the callback returns true, the loop stops. */
+function depthFirstWalk(
+    nodes: MapIterator<Trace.Extras.TraceTree.Node>, callback: (arg0: Trace.Extras.TraceTree.Node) => void|true): void {
+  for (const node of nodes) {
+    if (callback?.(node)) {
+      break;
+    }
+    depthFirstWalk(node.children().values(), callback);  // Go deeper.
+  }
+}
+
+export class AICallTree {
+  constructor(
+      public selectedNode: Trace.Extras.TraceTree.Node,
+      public rootNode: Trace.Extras.TraceTree.TopDownRootNode,
+      // TODO: see if we can avoid passing around this entire thing.
+      public parsedTrace: Trace.Handlers.Types.ParsedTrace,
+  ) {
+  }
+
+  static from(
+      selectedEvent: Trace.Types.Events.Event, events: Trace.Types.Events.Event[],
+      parsedTrace: Trace.Handlers.Types.ParsedTrace): AICallTree {
+    const {startTime, endTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(selectedEvent);
+
+    const selectedEventBounds = Trace.Helpers.Timing.traceWindowFromMicroSeconds(
+        Trace.Helpers.Timing.millisecondsToMicroseconds(startTime),
+        Trace.Helpers.Timing.millisecondsToMicroseconds(endTime));
+    const threadEvents = parsedTrace.Renderer.processes.get(selectedEvent.pid)?.threads.get(selectedEvent.tid)?.entries;
+    if (!threadEvents) {
+      throw new Error('Cannot locate thread');
+    }
+    const overlappingEvents = threadEvents.filter(e => Trace.Helpers.Timing.eventIsInBounds(e, selectedEventBounds));
+
+    const visibleEventsFilter = new Trace.Extras.TraceFilter.VisibleEventsFilter(visibleTypes());
+    const customFilter = new AITreeFilter(selectedEvent);
+    // Build a tree bounded by the selected event's timestamps, and our other filters applied
+    const rootNode = new Trace.Extras.TraceTree.TopDownRootNode(
+        overlappingEvents, [visibleEventsFilter, customFilter], startTime, endTime, false, null, true);
+
+    // Walk the tree to find selectedNode
+    let selectedNode: Trace.Extras.TraceTree.Node|null = null;
+    depthFirstWalk([rootNode].values(), node => {
+      if (node.event === selectedEvent) {
+        selectedNode = node;
+        return true;
+      }
+      return;
+    });
+
+    if (selectedNode === null) {
+      throw new Error('Node not within its own tree. Unexpected.');
+    }
+    const instance = new AICallTree(selectedNode, rootNode, parsedTrace);
+    // instance.logDebug();
+    return instance;
+  }
+
+  /** Define precisely how the call tree is serialized. Typically called from within `DrJonesPerformanceAgent` */
+  serialize(): string {
+    const nodeToIdMap = new Map<Trace.Extras.TraceTree.Node, number>();
+    // Keep a map of URLs. We'll output a LUT to keep size down.
+    const allUrls: string[] = [];
+
+    let nodesStr = '';
+    depthFirstWalk(this.rootNode.children().values(), node => {
+      nodesStr += AICallTree.stringifyNode(node, this.parsedTrace, this.selectedNode, nodeToIdMap, allUrls);
+    });
+
+    let output = '';
+    if (allUrls.length) {
+      // Output lookup table of URLs within this tree
+      output += '\n# All URL #s:\n\n' + allUrls.map((url, index) => `  * ${index}: ${url}`).join('\n');
+    }
+    output += '\n\n# Call tree:' + nodesStr;
+    return output;
+  }
+
+  /* This custom YAML-like format with an adjacency list for children is 35% more token efficient than JSON */
+  static stringifyNode(
+      node: Trace.Extras.TraceTree.Node, parsedTrace: Trace.Handlers.Types.ParsedTrace,
+      selectedNode: Trace.Extras.TraceTree.Node, nodeToIdMap: Map<Trace.Extras.TraceTree.Node, number>,
+      allUrls: string[]): string {
+    const event = node.event;
+    if (!event) {
+      throw new Error('Event required');
+    }
+
+    const url = SourceMapsResolver.resolvedURLForEntry(parsedTrace, event);
+    // Get the index of the URL within allUrls, and push if needed. Set to -1 if there's no URL here.
+    const urlIndex = !url ? -1 : allUrls.indexOf(url) === -1 ? allUrls.push(url) - 1 : allUrls.indexOf(url);
+    const children = Array.from(node.children().values());
+
+    // Identifier string includes an id and name:
+    //   eg "[13] Parse HTML" or "[45] parseCPUProfileFormatFromFile"
+    const getIdentifier = (node: Trace.Extras.TraceTree.Node): string => {
+      if (!node.event || typeof node.id !== 'string') {
+        throw new Error('ok');
+      }
+      if (!nodeToIdMap.has(node)) {
+        nodeToIdMap.set(node, nodeToIdMap.size + 1);
+      }
+      return `${nodeToIdMap.get(node)} – ${nameForEntry(node.event, parsedTrace)}`;
+    };
+
+    // Round milliseconds because we don't need the precision
+    const roundToTenths = (num: number): number => Math.round(num * 10) / 10;
+
+    // Build a multiline string describing this callframe node
+    const lines = [
+      `\n\nNode: ${getIdentifier(node)}`,
+      selectedNode === node && 'Selected: true',
+      node.totalTime && `dur: ${roundToTenths(node.totalTime)}`,
+      // node.functionSource && `snippet: ${node.functionSource.slice(0, 250)}`,
+      node.selfTime && `self: ${roundToTenths(node.selfTime)}`,
+      urlIndex !== -1 && `URL #: ${urlIndex}`,
+    ];
+    if (children.length) {
+      lines.push('Children:');
+      lines.push(...children.map(node => `  * ${getIdentifier(node)}`));
+    }
+    return lines.filter(Boolean).join('\n');
+  }
+
+  // Only used for debugging.
+  logDebug(): void {
+    const str = this.serialize();
+    // eslint-disable-next-line no-console
+    console.log('🎆', str);
+    if (str.length > 45_000) {
+      // Manual testing shows 45k fits. 50k doesnt.
+      // Max is 32k _tokens_, but tokens to bytes is wishywashy, so... hard to know for sure.
+      console.warn('Output will likely not fit in the context window. Expect an AIDA error.');
+    }
+  }
+}
+
+export class AITreeFilter extends Trace.Extras.TraceFilter.TraceFilter {
+  #minDuration: Trace.Types.Timing.MicroSeconds;
+  #selectedEvent: Trace.Types.Events.Event;
+  constructor(selectedEvent: Trace.Types.Events.Event) {
+    super();
+    // The larger the selected event is, the less small ones matter. We'll exclude items under ½% of the selected event's size
+    this.#minDuration = Trace.Types.Timing.MicroSeconds((selectedEvent.dur ?? 1) * 0.005);
+    this.#selectedEvent = selectedEvent;
+  }
+  accept(event: Trace.Types.Events.Event): boolean {
+    if (event === this.#selectedEvent) {
+      return true;
+    }
+    if (event.name === Trace.Types.Events.Name.COMPILE_CODE) {
+      return false;
+    }
+    return event.dur ? event.dur >= this.#minDuration : false;
+  }
+}

package/front_end/panels/timeline/{components → utils}/EntryName.test.ts

@@ -8,14 +8,14 @@ import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import {getMainThread} from '../../../testing/TraceHelpers.js';
 import {TraceLoader} from '../../../testing/TraceLoader.js';
 
-import * as Components from './components.js';
+import * as Utils from './utils.js';
 
 describeWithEnvironment('EntryName', () => {
   it('uses the URL for the name of a network request', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
     const request = parsedTrace.NetworkRequests.byTime.at(0);
     assert.isOk(request);
-    const name = Components.EntryName.nameForEntry(request);
+    const name = Utils.EntryName.nameForEntry(request);
     assert.strictEqual(name, 'web.dev/ (web.dev)');
   });
 
@@ -23,7 +23,7 @@ describeWithEnvironment('EntryName', () => {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
     const frame = parsedTrace.Frames.frames.at(0);
     assert.isOk(frame);
-    const name = Components.EntryName.nameForEntry(frame);
+    const name = Utils.EntryName.nameForEntry(frame);
     assert.strictEqual(name, 'Frame');
   });
 
@@ -33,7 +33,7 @@ describeWithEnvironment('EntryName', () => {
       return Trace.Types.Events.isDispatch(event) && event.args.data.type === 'click';
     });
     assert.isOk(clickEvent);
-    const name = Components.EntryName.nameForEntry(clickEvent);
+    const name = Utils.EntryName.nameForEntry(clickEvent);
     assert.strictEqual(name, 'Event: click');
   });
 
@@ -42,7 +42,7 @@ describeWithEnvironment('EntryName', () => {
     const entry = parsedTrace.Renderer.allTraceEntries.find(e => e.name === Trace.Types.Events.Name.RUN_TASK);
     assert.isOk(entry);
 
-    const name = Components.EntryName.nameForEntry(entry, parsedTrace);
+    const name = Utils.EntryName.nameForEntry(entry, parsedTrace);
     assert.strictEqual(name, 'Task');
   });
 
@@ -59,7 +59,7 @@ describeWithEnvironment('EntryName', () => {
       }
     }
     assert.isOk(createEvent);
-    const name = Components.EntryName.nameForEntry(createEvent, parsedTrace);
+    const name = Utils.EntryName.nameForEntry(createEvent, parsedTrace);
     assert.strictEqual(name, 'WebSocket opened: wss://echo.websocket.org/');
   });
 
@@ -68,7 +68,7 @@ describeWithEnvironment('EntryName', () => {
       name: Trace.Types.Events.Name.WEB_SOCKET_DESTROY,
     } as unknown as Trace.Types.Events.WebSocketDestroy;
 
-    const name = Components.EntryName.nameForEntry(fakeDestroyEvent);
+    const name = Utils.EntryName.nameForEntry(fakeDestroyEvent);
     assert.strictEqual(name, 'WebSocket closed');
   });
 
@@ -76,7 +76,7 @@ describeWithEnvironment('EntryName', () => {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'slow-interaction-button-click.json.gz');
     const firstInteraction = parsedTrace.UserInteractions.interactionEvents.at(0);
     assert.isOk(firstInteraction);
-    const name = Components.EntryName.nameForEntry(firstInteraction);
+    const name = Utils.EntryName.nameForEntry(firstInteraction);
     assert.strictEqual(name, 'Pointer');
   });
 
@@ -84,7 +84,7 @@ describeWithEnvironment('EntryName', () => {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'slow-interaction-keydown.json.gz');
     const keydownInteraction = parsedTrace.UserInteractions.interactionEvents.find(e => e.type === 'keydown');
     assert.isOk(keydownInteraction);
-    const name = Components.EntryName.nameForEntry(keydownInteraction);
+    const name = Utils.EntryName.nameForEntry(keydownInteraction);
     assert.strictEqual(name, 'Keyboard');
   });
 
@@ -95,7 +95,7 @@ describeWithEnvironment('EntryName', () => {
     const firstInteraction = {...parsedTrace.UserInteractions.interactionEvents[0]};
     firstInteraction.type = 'unknown';
 
-    const name = Components.EntryName.nameForEntry(firstInteraction);
+    const name = Utils.EntryName.nameForEntry(firstInteraction);
     assert.strictEqual(name, 'Other');
   });
 
@@ -108,7 +108,7 @@ describeWithEnvironment('EntryName', () => {
       // reset this to avoid impacting other tests.
       const originalProfileNodeName = profileNode.functionName;
       profileNode.setFunctionName('testing-profile-name');
-      const name = Components.EntryName.nameForEntry(entry, parsedTrace);
+      const name = Utils.EntryName.nameForEntry(entry, parsedTrace);
       assert.strictEqual(name, 'testing-profile-name');
       profileNode.setFunctionName(originalProfileNodeName);
     });
@@ -121,7 +121,7 @@ describeWithEnvironment('EntryName', () => {
       // reset this to avoid impacting other tests.
       const originalProfileNodeName = profileNode.functionName;
       profileNode.setFunctionName('');
-      const name = Components.EntryName.nameForEntry(entry, parsedTrace);
+      const name = Utils.EntryName.nameForEntry(entry, parsedTrace);
       assert.strictEqual(name, 'performConcurrentWorkOnRoot');
       profileNode.setFunctionName(originalProfileNodeName);
     });

package/front_end/panels/timeline/{components → utils}/EntryName.ts

@@ -38,7 +38,7 @@ const UIStrings = {
   wsConnectionClosed: 'WebSocket closed',
 };
 
-const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/EntryName.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/timeline/utils/EntryName.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 /**

package/front_end/panels/timeline/{components → utils}/EntryStyles.ts

@@ -497,6 +497,24 @@ const UIStrings = {
    *@description Text in UIDevtools Utils of the Performance panel
    */
   drawing: 'Drawing',
+  /**
+   * @description Label for an event in the Performance panel indicating that a
+   * callback function has been scheduled to run at a later time using the
+   * postTask API.
+   */
+  schedulePostTaskCallback: 'Schedule postTask',
+  /**
+   * @description Label for an event in the Performance panel indicating that a
+   * callback function that was scheduled to run using the postTask API was
+   * fired (invoked).
+   */
+  runPostTaskCallback: 'Fire postTask',
+  /**
+   * @description Label for an event in the Performance panel indicating that a
+   * callback function that was scheduled to run at a later time using the
+   * postTask API was cancelled, so will no longer run.
+   */
+  abortPostTaskCallback: 'Cancel postTask',
 };
 
 export enum EventCategory {
@@ -517,7 +535,7 @@ export enum EventCategory {
 
 let mainEventCategories: EventCategory[];
 
-const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/EntryStyles.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/timeline/utils/EntryStyles.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class TimelineRecordStyle {
@@ -1033,6 +1051,15 @@ export function maybeInitSylesMap(): EventStylesMap {
 
     [Trace.Types.Events.Name.SCHEDULE_POST_MESSAGE]:
         new TimelineRecordStyle(i18nString(UIStrings.schedulePostMessage), defaultCategoryStyles.messaging),
+
+    [Trace.Types.Events.Name.SCHEDULE_POST_TASK_CALLBACK]:
+        new TimelineRecordStyle(i18nString(UIStrings.schedulePostTaskCallback), defaultCategoryStyles.scripting),
+
+    [Trace.Types.Events.Name.RUN_POST_TASK_CALLBACK]:
+        new TimelineRecordStyle(i18nString(UIStrings.runPostTaskCallback), defaultCategoryStyles.scripting),
+
+    [Trace.Types.Events.Name.ABORT_POST_TASK_CALLBACK]:
+        new TimelineRecordStyle(i18nString(UIStrings.abortPostTaskCallback), defaultCategoryStyles.scripting),
   };
   return eventStylesMap;
 }

package/front_end/panels/timeline/utils/Helpers.test.ts

@@ -2,11 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
-
 import * as Helpers from './Helpers.js';
 
-describeWithEnvironment('Helpers', () => {
+describe('Helpers', () => {
   it('createUrlLabels', function() {
     function fn(urls: string[], expected: string[]) {
       assert.deepEqual(Helpers.createUrlLabels(urls.map(url => new URL(url))), expected);
@@ -35,4 +33,11 @@ describeWithEnvironment('Helpers', () => {
        ['http://www.example.com/?k=1234567…', 'https://www.example.com/?k=1234567…']);
     fn(['https://www.example.com', 'https://www.example2.com'], ['/', 'www.example2.com']);
   });
+
+  it('shortenUrl', function() {
+    const url = new URL('https://cdn.permutive.com/models/v2/d2fb08da-1c03-4c8a-978f-ad8a96b4c31f-models.bin');
+    // Shows lastPath and then reveals more of it, per maxCharacters
+    assert.strictEqual(Helpers.shortenUrl(url, 40), 'd2fb08da-1c03-4c8a-9…96b4c31f-models.bin');
+    assert.strictEqual(Helpers.shortenUrl(url, 70), '/models/v2/d2fb08da-1c03-4c8a-978f-ad8a96b4c31f-models.bin');
+  });
 });

package/front_end/panels/timeline/utils/Helpers.ts

@@ -69,13 +69,12 @@ export function createUrlLabels(urls: URL[]): string[] {
  * Shortens the provided URL for use within a narrow display usecase.
  *
  * The resulting string will at least contain the last path component of the URL.
- * More components are included until a limit of 20 characters is reached.
+ * More components are included until a limit of maxChars (default 20) is reached.
  * No querystring is included.
  *
- * If the last path component is larger than 20 characters, the middle is elided.
+ * If the last path component is larger than maxChars characters, the middle is elided.
  */
-export function shortenUrl(url: URL): string {
-  const maxChars = 20;
+export function shortenUrl(url: URL, maxChars = 20): string {
   const parts = url.pathname.split('/');
   let shortenedUrl = parts.at(-1) ?? '';