chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

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

@@ -4,54 +4,109 @@
 
 import * as Trace from '../../models/trace/trace.js';
 import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
+import {microseconds, milliseconds} from '../../testing/TraceHelpers.js';
 import {TraceLoader} from '../../testing/TraceLoader.js';
 
 import * as Timeline from './timeline.js';
 
 describeWithEnvironment('TimelineSelection', function() {
-  it('can be created with a frame', function() {
-    const frame = new Trace.Handlers.ModelHandlers.Frames.TimelineFrame(
-        /* seqId */ 1, /* startTime */ Trace.Types.Timing.MicroSeconds(1000),
-        /* start offset */ Trace.Types.Timing.MicroSeconds(0));
-    const selection = Timeline.TimelineSelection.TimelineSelection.fromFrame(frame);
-    assert.strictEqual(selection.object, frame);
-    assert.strictEqual(selection.startTime, Trace.Helpers.Timing.microSecondsToMilliseconds(frame.startTime));
-    assert.strictEqual(selection.endTime, Trace.Helpers.Timing.microSecondsToMilliseconds(frame.endTime));
-    assert.isTrue(Timeline.TimelineSelection.TimelineSelection.isLegacyTimelineFrame(selection.object));
+  const {TimelineSelection} = Timeline;
+  it('can be created with a frame', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    const frame = parsedTrace.Frames.frames.at(0);
+    assert.isOk(frame);
+    const selection = TimelineSelection.selectionFromEvent(frame);
+    assert.strictEqual(selection.event, frame);
+    const timings = TimelineSelection.rangeForSelection(selection);
+    assert.strictEqual(timings.min, frame.startTime);
+    assert.strictEqual(timings.max, frame.endTime);
+
+    assert.isTrue(TimelineSelection.selectionIsEvent(selection));
+    assert.isFalse(TimelineSelection.selectionIsRange(selection));
   });
 
   it('can be created with a network request', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
-    const request = parsedTrace.NetworkRequests.byTime[0];
-    const selection = Timeline.TimelineSelection.TimelineSelection.fromTraceEvent(request);
-    assert.strictEqual(selection.object, request);
-    assert.strictEqual(selection.startTime, Trace.Helpers.Timing.microSecondsToMilliseconds(request.ts));
-    assert.strictEqual(
-        selection.endTime,
-        Trace.Helpers.Timing.microSecondsToMilliseconds((request.ts + request.dur) as Trace.Types.Timing.MicroSeconds));
-    assert.isTrue(
-        Timeline.TimelineSelection.TimelineSelection.isSyntheticNetworkRequestDetailsEventSelection(selection.object));
-  });
-
-  it('can be created with a Trace event', async function() {
+    const request = parsedTrace.NetworkRequests.byTime.at(0);
+    assert.isOk(request);
+    const selection = TimelineSelection.selectionFromEvent(request);
+    assert.strictEqual(selection.event, request);
+    const timings = TimelineSelection.rangeForSelection(selection);
+    assert.strictEqual(timings.min, request.ts);
+    assert.strictEqual(timings.max, (request.ts + request.dur as Trace.Types.Timing.MicroSeconds));
+    assert.isTrue(TimelineSelection.selectionIsEvent(selection));
+    assert.isFalse(TimelineSelection.selectionIsRange(selection));
+  });
+
+  it('can be created with a random trace event', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
     const firstLCPEvent = parsedTrace.PageLoadMetrics.allMarkerEvents.find(event => {
       return event.name === 'largestContentfulPaint::Candidate';
     });
-    if (!firstLCPEvent) {
-      throw new Error('Could not find LCP event');
-    }
-    const selection = Timeline.TimelineSelection.TimelineSelection.fromTraceEvent(firstLCPEvent);
-    assert.strictEqual(selection.object, firstLCPEvent);
-    assert.strictEqual(selection.startTime, Trace.Helpers.Timing.eventTimingsMilliSeconds(firstLCPEvent).startTime);
-    assert.strictEqual(selection.endTime, Trace.Helpers.Timing.eventTimingsMilliSeconds(firstLCPEvent).endTime);
-    assert.isTrue(Timeline.TimelineSelection.TimelineSelection.isTraceEventSelection(selection.object));
-  });
-
-  it('can be created with a range', async function() {
-    const selection = Timeline.TimelineSelection.TimelineSelection.fromRange(0, 10);
-    assert.strictEqual(selection.startTime, 0);
-    assert.strictEqual(selection.endTime, 10);
-    assert.isTrue(Timeline.TimelineSelection.TimelineSelection.isRangeSelection(selection.object));
+    assert.isOk(firstLCPEvent);
+    const selection = TimelineSelection.selectionFromEvent(firstLCPEvent);
+    assert.strictEqual(selection.event, firstLCPEvent);
+    const timings = TimelineSelection.rangeForSelection(selection);
+    assert.strictEqual(timings.min, Trace.Helpers.Timing.eventTimingsMicroSeconds(firstLCPEvent).startTime);
+    assert.strictEqual(timings.max, Trace.Helpers.Timing.eventTimingsMicroSeconds(firstLCPEvent).endTime);
+    assert.isTrue(TimelineSelection.selectionIsEvent(selection));
+    assert.isFalse(TimelineSelection.selectionIsRange(selection));
+  });
+
+  it('can be created with a range', function() {
+    const selection = TimelineSelection.selectionFromRangeMicroSeconds(microseconds(0), microseconds(10));
+    assert.deepEqual(selection.bounds, {
+      min: 0,
+      max: 10,
+      range: 10,
+    });
+    assert.isTrue(TimelineSelection.selectionIsRange(selection));
+    assert.isFalse(TimelineSelection.selectionIsEvent(selection));
+  });
+
+  it('can be created with a millisecond range', async () => {
+    const selection = TimelineSelection.selectionFromRangeMilliSeconds(milliseconds(1), milliseconds(10));
+    assert.deepEqual(selection.bounds, {
+      min: 1_000,
+      max: 10_000,
+      range: 9_000,
+    });
+    assert.isTrue(TimelineSelection.selectionIsRange(selection));
+    assert.isFalse(TimelineSelection.selectionIsEvent(selection));
+  });
+
+  it('knows if two event selections are equal if they have the same event', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    const firstLCPEvent = parsedTrace.PageLoadMetrics.allMarkerEvents.find(event => {
+      return event.name === 'largestContentfulPaint::Candidate';
+    });
+    assert.isOk(firstLCPEvent);
+    const selection1 = TimelineSelection.selectionFromEvent(firstLCPEvent);
+    const selection2 = TimelineSelection.selectionFromEvent(firstLCPEvent);
+    assert.isTrue(TimelineSelection.selectionsEqual(selection1, selection2));
+
+    const networkEvent = parsedTrace.NetworkRequests.byTime.at(0);
+    assert.isOk(networkEvent);
+    const selection3 = TimelineSelection.selectionFromEvent(networkEvent);
+    assert.isFalse(TimelineSelection.selectionsEqual(selection1, selection3));
+  });
+
+  it('knows if two range selections are equal if they have the same range', async () => {
+    const selection1 = TimelineSelection.selectionFromRangeMicroSeconds(microseconds(0), microseconds(10));
+    const selection2 = TimelineSelection.selectionFromRangeMicroSeconds(microseconds(0), microseconds(10));
+    const selection3 = TimelineSelection.selectionFromRangeMicroSeconds(microseconds(20), microseconds(40));
+    assert.isTrue(TimelineSelection.selectionsEqual(selection1, selection2));
+    assert.isFalse(TimelineSelection.selectionsEqual(selection1, selection3));
+  });
+
+  it('knows selections of different types are not equal', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    const firstLCPEvent = parsedTrace.PageLoadMetrics.allMarkerEvents.find(event => {
+      return event.name === 'largestContentfulPaint::Candidate';
+    });
+    assert.isOk(firstLCPEvent);
+    const selection1 = TimelineSelection.selectionFromEvent(firstLCPEvent);
+    const selection2 = TimelineSelection.selectionFromRangeMicroSeconds(microseconds(0), microseconds(10));
+    assert.isFalse(TimelineSelection.selectionsEqual(selection1, selection2));
   });
 });

package/front_end/panels/timeline/TimelineSelection.ts

@@ -2,81 +2,69 @@
 // 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 Trace from '../../models/trace/trace.js';
 
-type PermittedObjectTypes = Trace.Types.Events.LegacyTimelineFrame|Trace.Types.Events.Event|SelectionRange;
+// We could add a `type` field here to distinguish them, but it is not needed
+// as we use the existence of "event" or "bounds" to do that.
+export type EventSelection = {
+  event: Trace.Types.Events.Event,
+};
 
-const SelectionRangeSymbol = Symbol('SelectionRange');
-export type SelectionRange = typeof SelectionRangeSymbol;
+export type TimeRangeSelection = {
+  bounds: Trace.Types.Timing.TraceWindowMicroSeconds,
+};
 
-export class TimelineSelection {
-  readonly startTime: Trace.Types.Timing.MilliSeconds;
-  readonly endTime: Trace.Types.Timing.MilliSeconds;
-  readonly object: PermittedObjectTypes;
+export type TimelineSelection = EventSelection|TimeRangeSelection;
 
-  constructor(
-      startTime: Trace.Types.Timing.MilliSeconds, endTime: Trace.Types.Timing.MilliSeconds,
-      object: PermittedObjectTypes) {
-    this.startTime = startTime;
-    this.endTime = endTime;
-    this.object = object;
-  }
-
-  static isLegacyTimelineFrame(object: PermittedObjectTypes): object is Trace.Types.Events.LegacyTimelineFrame {
-    return typeof object !== 'symbol' && Trace.Types.Events.isLegacyTimelineFrame(object);
-  }
+export function selectionFromEvent(event: Trace.Types.Events.Event): EventSelection {
+  return {
+    event,
+  };
+}
 
-  static fromFrame(frame: Trace.Types.Events.LegacyTimelineFrame): TimelineSelection {
-    return new TimelineSelection(
-        Trace.Helpers.Timing.microSecondsToMilliseconds(frame.startTime),
-        Trace.Helpers.Timing.microSecondsToMilliseconds(frame.endTime), frame);
-  }
+export function selectionFromRangeMicroSeconds(
+    min: Trace.Types.Timing.MicroSeconds, max: Trace.Types.Timing.MicroSeconds): TimeRangeSelection {
+  return {
+    bounds: Trace.Helpers.Timing.traceWindowFromMicroSeconds(min, max),
+  };
+}
 
-  static isSyntheticNetworkRequestDetailsEventSelection(object: PermittedObjectTypes):
-      object is Trace.Types.Events.SyntheticNetworkRequest {
-    if (TimelineSelection.isLegacyTimelineFrame(object) || TimelineSelection.isRangeSelection(object)) {
-      return false;
-    }
-    // At this point we know the selection is a raw trace event, so we just
-    // need to check it's the right type of raw event.
-    return Trace.Types.Events.isSyntheticNetworkRequest(object);
-  }
+export function selectionFromRangeMilliSeconds(
+    min: Trace.Types.Timing.MilliSeconds, max: Trace.Types.Timing.MilliSeconds): TimeRangeSelection {
+  return {
+    bounds: Trace.Helpers.Timing.traceWindowFromMilliSeconds(min, max),
+  };
+}
 
-  static isNetworkEventSelection(object: PermittedObjectTypes):
-      object is Trace.Types.Events.SyntheticNetworkRequest|Trace.Types.Events.WebSocketEvent {
-    if (TimelineSelection.isLegacyTimelineFrame(object) || TimelineSelection.isRangeSelection(object)) {
-      return false;
-    }
-    // At this point we know the selection is a raw trace event, so we just
-    // need to check it's the right type of raw event.
-    return Trace.Types.Events.isNetworkTrackEntry(object);
-  }
+export function selectionIsEvent(selection: TimelineSelection|null): selection is EventSelection {
+  return Boolean(selection && 'event' in selection);
+}
 
-  static isTraceEventSelection(object: PermittedObjectTypes): object is Trace.Types.Events.Event {
-    // Trace events are just raw objects, so now we have to confirm it is a trace event by ruling everything else out.
-    if (TimelineSelection.isLegacyTimelineFrame(object) || TimelineSelection.isRangeSelection(object)) {
-      return false;
-    }
+export function selectionIsRange(selection: TimelineSelection|null): selection is TimeRangeSelection {
+  return Boolean(selection && 'bounds' in selection);
+}
 
-    // Although Network Requests are trace events, in TimelineSelection we
-    // treat Network requests distinctly
-    if (Trace.Types.Events.isSyntheticNetworkRequest(object)) {
-      return false;
-    }
-    return true;
+export function rangeForSelection(selection: TimelineSelection): Trace.Types.Timing.TraceWindowMicroSeconds {
+  if (selectionIsRange(selection)) {
+    return selection.bounds;
   }
 
-  static fromTraceEvent(event: Trace.Types.Events.Event): TimelineSelection {
-    const {startTime, endTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(event);
-    return new TimelineSelection(startTime, Trace.Types.Timing.MilliSeconds(endTime || (startTime + 1)), event);
+  if (selectionIsEvent(selection)) {
+    const timings = Trace.Helpers.Timing.eventTimingsMicroSeconds(selection.event);
+    return Trace.Helpers.Timing.traceWindowFromMicroSeconds(timings.startTime, timings.endTime);
   }
+  Platform.assertNever(selection, 'Unknown selection type');
+}
 
-  static isRangeSelection(object: PermittedObjectTypes): object is SelectionRange {
-    return object === SelectionRangeSymbol;
+export function selectionsEqual(s1: TimelineSelection, s2: TimelineSelection): boolean {
+  if (selectionIsEvent(s1) && selectionIsEvent(s2)) {
+    return s1.event === s2.event;
   }
 
-  static fromRange(startTime: number, endTime: number): TimelineSelection {
-    return new TimelineSelection(
-        Trace.Types.Timing.MilliSeconds(startTime), Trace.Types.Timing.MilliSeconds(endTime), SelectionRangeSymbol);
+  if (selectionIsRange(s1) && selectionIsRange(s2)) {
+    return Trace.Helpers.Timing.windowsEqual(s1.bounds, s2.bounds);
   }
+
+  return false;
 }

package/front_end/panels/timeline/TimelineSelectorStatsView.ts

@@ -365,6 +365,7 @@ export class TimelineSelectorStatsView extends UI.Widget.VBox {
           lineNumber: range.startLine,
           columnNumber: range.startColumn,
           linkText: i18nString(UIStrings.lineNumber, {PH1: range.startLine + 1, PH2: range.startColumn + 1}),
+          title: `${styleSheetHeader.id} line ${range.startLine + 1}:${range.startColumn + 1}`,
         } as Linkifier.Linkifier.LinkifierData;
       });
       return linkData;
@@ -425,14 +426,8 @@ export class TimelineSelectorStatsView extends UI.Widget.VBox {
               }
               return html`
               ${locations.map((location, itemIndex) => {
-                if (itemIndex !== locations.length - 1) {
-                  // eslint-disable-next-line rulesdir/ban_a_tags_in_lit_html
-                  return html`<devtools-linkifier .data=${
-                      location as Linkifier.Linkifier.LinkifierData}></devtools-linkifier>
-                    <a>, </a>`;
-                }
-                return html`<devtools-linkifier .data=${
-                    location as Linkifier.Linkifier.LinkifierData}></devtools-linkifier>`;
+                const divider = itemIndex !== locations.length - 1 ? ', ' : '';
+                return html`<devtools-linkifier .data=${location}></devtools-linkifier>${divider}`;
               })}
               `;
             },

package/front_end/panels/timeline/TimelineTreeView.ts

@@ -15,13 +15,13 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {ActiveFilters} from './ActiveFilters.js';
-import * as TimelineComponents from './components/components.js';
 import * as Extensions from './extensions/extensions.js';
 import {Tracker} from './FreshRecording.js';
 import {targetForEvent} from './TargetForEvent.js';
 import {TimelineRegExp} from './TimelineFilters.js';
-import type {TimelineSelection} from './TimelineSelection.js';
+import {rangeForSelection, type TimelineSelection} from './TimelineSelection.js';
 import {TimelineUIUtils} from './TimelineUIUtils.js';
+import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
@@ -259,7 +259,9 @@ export class TimelineTreeView extends UI.Widget.VBox implements UI.SearchableVie
   }
 
   updateContents(selection: TimelineSelection): void {
-    this.setRange(selection.startTime, selection.endTime);
+    const timings = rangeForSelection(selection);
+    const timingMilli = Trace.Helpers.Timing.traceWindowMicroSecondsToMilliSeconds(timings);
+    this.setRange(timingMilli.min, timingMilli.max);
   }
 
   setRange(startTime: Trace.Types.Timing.MilliSeconds, endTime: Trace.Types.Timing.MilliSeconds): void {
@@ -793,7 +795,7 @@ export class AggregatedTimelineTreeView extends TimelineTreeView {
     color: string,
     icon: (Element|undefined),
   } {
-    const categories = TimelineComponents.EntryStyles.getCategoryStyles();
+    const categories = Utils.EntryStyles.getCategoryStyles();
     const color = node.id && node.event ? TimelineUIUtils.eventColor(node.event) : categories['other'].color;
     const unattributed = i18nString(UIStrings.unattributed);
 
@@ -801,7 +803,7 @@ export class AggregatedTimelineTreeView extends TimelineTreeView {
 
     switch (this.groupBySetting.get()) {
       case AggregatedTimelineTreeView.GroupBy.Category: {
-        const idIsValid = id && TimelineComponents.EntryStyles.stringIsEventCategory(id);
+        const idIsValid = id && Utils.EntryStyles.stringIsEventCategory(id);
         const category = idIsValid ? categories[id] || categories['other'] : {title: unattributed, color: unattributed};
         return {name: category.title, color: category.color, icon: undefined};
       }

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

@@ -32,8 +32,8 @@ import {TraceLoader} from '../../testing/TraceLoader.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
-import * as TimelineComponents from './components/components.js';
 import * as Timeline from './timeline.js';
+import * as Utils from './utils/utils.js';
 
 describeWithMockConnection('TimelineUIUtils', function() {
   let target: SDK.Target.Target;
@@ -411,12 +411,12 @@ describeWithMockConnection('TimelineUIUtils', function() {
     });
 
     it('should return the correct rgb value for a corresponding CSS variable', function() {
-      const parsedColor = TimelineComponents.EntryStyles.getCategoryStyles().scripting.getComputedColorValue();
+      const parsedColor = Utils.EntryStyles.getCategoryStyles().scripting.getComputedColorValue();
       assert.strictEqual('rgb(2 2 2)', parsedColor);
     });
 
     it('should return the color as a CSS variable', function() {
-      const cssVariable = TimelineComponents.EntryStyles.getCategoryStyles().scripting.getCSSValue();
+      const cssVariable = Utils.EntryStyles.getCategoryStyles().scripting.getCSSValue();
       assert.strictEqual('var(--app-color-scripting)', cssVariable);
     });
 
@@ -1128,6 +1128,53 @@ describeWithMockConnection('TimelineUIUtils', function() {
         },
       ]);
     });
+
+    it('renders details for SchedulePostTaskCallback events', async function() {
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'scheduler-post-task.json.gz');
+
+      const scheduleEvent = parsedTrace.Renderer.allTraceEntries.find(Trace.Types.Events.isSchedulePostTaskCallback);
+      assert(scheduleEvent, 'Could not find SchedulePostTaskCallback event');
+      const scheduleDetails = await Timeline.TimelineUIUtils.TimelineUIUtils.buildTraceEventDetails(
+          parsedTrace,
+          scheduleEvent,
+          new Components.Linkifier.Linkifier(),
+          false,
+      );
+      const rowData = getRowDataForDetailsElement(scheduleDetails);
+      assert.deepEqual(rowData, [
+        {title: 'Delay', value: '200\xA0ms'},
+        {title: 'Priority', value: 'user-visible'},
+        {
+          title: undefined,
+          value: '(anonymous) @ localhost:8787/scheduler/app.js:49:18',
+        },
+        {title: 'Initiator for', value: 'Fire postTask'},
+      ]);
+    });
+
+    it('renders details for RunPostTaskCallback events', async function() {
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'scheduler-post-task.json.gz');
+
+      const runEvent = parsedTrace.Renderer.allTraceEntries.find(Trace.Types.Events.isRunPostTaskCallback);
+      assert(runEvent, 'Could not find RunPostTaskCallback event');
+      const runDetails = await Timeline.TimelineUIUtils.TimelineUIUtils.buildTraceEventDetails(
+          parsedTrace,
+          runEvent,
+          new Components.Linkifier.Linkifier(),
+          false,
+      );
+      const rowData = getRowDataForDetailsElement(runDetails);
+      assert.deepEqual(rowData, [
+        {title: 'Delay', value: '200\xA0ms'},
+        {title: 'Priority', value: 'user-visible'},
+        {
+          title: undefined,
+          value: '(anonymous) @ localhost:8787/scheduler/app.js:49:18',
+        },
+        {title: 'Initiated by', value: 'Schedule postTask'},
+        {title: 'Pending for', value: '200.1\xA0ms'},
+      ]);
+    });
   });
 
   it('can generate details for a frame', async function() {
@@ -1180,7 +1227,7 @@ describeWithMockConnection('TimelineUIUtils', function() {
       // Fake that we resolved the entry's name from a sourcemap.
       Timeline.Utils.SourceMapsResolver.SourceMapsResolver.storeResolvedNodeDataForEntry(
           profileEntry.pid, profileEntry.tid, profileEntry.callFrame,
-          {name: 'resolved-function-test', devtoolsLocation: null});
+          {name: 'resolved-function-test', devtoolsLocation: null, script: null});
 
       const title = Timeline.TimelineUIUtils.TimelineUIUtils.eventTitle(profileEntry);
       assert.strictEqual(title, 'resolved-function-test');

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -59,7 +59,7 @@ import {Tracker} from './FreshRecording.js';
 import {ModificationsManager} from './ModificationsManager.js';
 import {targetForEvent} from './TargetForEvent.js';
 import {TimelinePanel} from './TimelinePanel.js';
-import {TimelineSelection} from './TimelineSelection.js';
+import {selectionFromEvent} from './TimelineSelection.js';
 import * as Utils from './utils/utils.js';
 
 const UIStrings = {
@@ -549,6 +549,14 @@ const UIStrings = {
    * @description Label for a description text of a metric.
    */
   description: 'Description',
+  /**
+   * @description Label for a numeric value that was how long to wait before a function was run.
+   */
+  delay: 'Delay',
+  /**
+   * @description Label for a string that describes the priority at which a task was scheduled, like 'background' for low-priority tasks, and 'user-blocking' for high priority.
+   */
+  priority: 'Priority',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineUIUtils.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -631,26 +639,24 @@ export class TimelineUIUtils {
     }
   }
 
-  static eventStyle(event: Trace.Types.Events.Event): TimelineComponents.EntryStyles.TimelineRecordStyle {
+  static eventStyle(event: Trace.Types.Events.Event): Utils.EntryStyles.TimelineRecordStyle {
     if (Trace.Types.Events.isProfileCall(event) && event.callFrame.functionName === '(idle)') {
-      return new TimelineComponents.EntryStyles.TimelineRecordStyle(
-          event.name, TimelineComponents.EntryStyles.getCategoryStyles().idle);
+      return new Utils.EntryStyles.TimelineRecordStyle(event.name, Utils.EntryStyles.getCategoryStyles().idle);
     }
 
     if (event.cat === Trace.Types.Events.Categories.Console || event.cat === Trace.Types.Events.Categories.UserTiming) {
-      return new TimelineComponents.EntryStyles.TimelineRecordStyle(
-          event.name, TimelineComponents.EntryStyles.getCategoryStyles()['scripting']);
+      return new Utils.EntryStyles.TimelineRecordStyle(event.name, Utils.EntryStyles.getCategoryStyles()['scripting']);
     }
 
-    return TimelineComponents.EntryStyles.getEventStyle(event.name as Trace.Types.Events.Name) ??
-        new TimelineComponents.EntryStyles.TimelineRecordStyle(
-            event.name, TimelineComponents.EntryStyles.getCategoryStyles().other);
+    return Utils.EntryStyles.getEventStyle(event.name as Trace.Types.Events.Name) ??
+        new Utils.EntryStyles.TimelineRecordStyle(event.name, Utils.EntryStyles.getCategoryStyles().other);
   }
 
   static eventColor(event: Trace.Types.Events.Event): string {
     if (Trace.Types.Events.isProfileCall(event)) {
       const frame = event.callFrame;
       if (TimelineUIUtils.isUserFrame(frame)) {
+        // TODO(andoli): This should use the resolved (sourcemapped) URL
         return TimelineUIUtils.colorForId(frame.url);
       }
     }
@@ -661,7 +667,7 @@ export class TimelineUIUtils {
     // This event is considered idle time but still rendered as a scripting event here
     // to connect the StreamingCompileScriptParsing events it belongs to.
     if (event.name === Trace.Types.Events.Name.STREAMING_COMPILE_SCRIPT_WAITING) {
-      parsedColor = TimelineComponents.EntryStyles.getCategoryStyles().scripting.getComputedColorValue();
+      parsedColor = Utils.EntryStyles.getCategoryStyles().scripting.getComputedColorValue();
       if (!parsedColor) {
         throw new Error('Unable to parse color from getCategoryStyles().scripting.color');
       }
@@ -680,7 +686,7 @@ export class TimelineUIUtils {
     }
     if (event.name === 'EventTiming' && Trace.Types.Events.isSyntheticInteraction(event)) {
       // TODO(crbug.com/365047728): replace this entire method with this call.
-      return TimelineComponents.EntryName.nameForEntry(event);
+      return Utils.EntryName.nameForEntry(event);
     }
     const title = TimelineUIUtils.eventStyle(event).title;
     if (Trace.Helpers.Trace.eventHasCategory(event, Trace.Types.Events.Categories.Console)) {
@@ -1262,6 +1268,14 @@ export class TimelineUIUtils {
         break;
       }
 
+      case Trace.Types.Events.Name.SCHEDULE_POST_TASK_CALLBACK:
+      case Trace.Types.Events.Name.RUN_POST_TASK_CALLBACK: {
+        contentHelper.appendTextRow(
+            i18nString(UIStrings.delay), i18n.TimeUtilities.millisToString(unsafeEventData['delay']));
+        contentHelper.appendTextRow(i18nString(UIStrings.priority), unsafeEventData['priority']);
+        break;
+      }
+
       case Trace.Types.Events.Name.FIRE_ANIMATION_FRAME: {
         contentHelper.appendTextRow(i18nString(UIStrings.callbackId), unsafeEventData['id']);
         break;
@@ -1804,9 +1818,8 @@ export class TimelineUIUtils {
 
       function onStartEvent(e: Trace.Types.Events.Event): void {
         const {startTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(e);
-        const category =
-            TimelineComponents.EntryStyles.getEventStyle(e.name as Trace.Types.Events.Name)?.category.name ||
-            TimelineComponents.EntryStyles.getCategoryStyles().other.name;
+        const category = Utils.EntryStyles.getEventStyle(e.name as Trace.Types.Events.Name)?.category.name ||
+            Utils.EntryStyles.getCategoryStyles().other.name;
         const parentCategory = categoryStack.length ? categoryStack[categoryStack.length - 1] : null;
         if (category !== parentCategory) {
           categoryChange(parentCategory || null, category, startTime);
@@ -1964,12 +1977,12 @@ export class TimelineUIUtils {
       UI.ARIAUtils.markAsLink(link);
       link.tabIndex = 0;
       link.addEventListener('click', () => {
-        TimelinePanel.instance().select(TimelineSelection.fromTraceEvent((entry)));
+        TimelinePanel.instance().select(selectionFromEvent(entry));
       });
 
       link.addEventListener('keydown', event => {
         if (event.key === 'Enter') {
-          TimelinePanel.instance().select(TimelineSelection.fromTraceEvent((entry)));
+          TimelinePanel.instance().select(selectionFromEvent(entry));
           event.consume(true);
         }
       });
@@ -2159,11 +2172,10 @@ export class TimelineUIUtils {
     paintProfilerButton.textContent = i18nString(UIStrings.paintProfiler);
     UI.ARIAUtils.markAsLink(container);
     container.tabIndex = 0;
-    container.addEventListener(
-        'click', () => TimelinePanel.instance().select(TimelineSelection.fromTraceEvent(event)), false);
+    container.addEventListener('click', () => TimelinePanel.instance().select(selectionFromEvent(event)), false);
     container.addEventListener('keydown', keyEvent => {
       if (keyEvent.key === 'Enter') {
-        TimelinePanel.instance().select(TimelineSelection.fromTraceEvent(event));
+        TimelinePanel.instance().select(selectionFromEvent(event));
         keyEvent.consume(true);
       }
     });
@@ -2186,21 +2198,20 @@ export class TimelineUIUtils {
   }
 
   static visibleEventsFilter(): TimelineModel.TimelineModelFilter.TimelineModelFilter {
-    return new TimelineModel.TimelineModelFilter.TimelineVisibleEventsFilter(
-        TimelineComponents.EntryStyles.visibleTypes());
+    return new TimelineModel.TimelineModelFilter.TimelineVisibleEventsFilter(Utils.EntryStyles.visibleTypes());
   }
 
   // Included only for layout tests.
   // TODO(crbug.com/1386091): Fix/port layout tests and remove.
-  static categories(): TimelineComponents.EntryStyles.CategoryPalette {
-    return TimelineComponents.EntryStyles.getCategoryStyles();
+  static categories(): Utils.EntryStyles.CategoryPalette {
+    return Utils.EntryStyles.getCategoryStyles();
   }
 
   static generatePieChart(
       aggregatedStats: {
         [x: string]: number,
       },
-      selfCategory?: TimelineComponents.EntryStyles.TimelineCategory, selfTime?: number): Element {
+      selfCategory?: Utils.EntryStyles.TimelineCategory, selfTime?: number): Element {
     let total = 0;
     for (const categoryName in aggregatedStats) {
       total += aggregatedStats[categoryName];
@@ -2242,9 +2253,8 @@ export class TimelineUIUtils {
     }
 
     // Add other categories.
-    for (const categoryName in TimelineComponents.EntryStyles.getCategoryStyles()) {
-      const category = TimelineComponents.EntryStyles
-                           .getCategoryStyles()[categoryName as keyof TimelineComponents.EntryStyles.CategoryPalette];
+    for (const categoryName in Utils.EntryStyles.getCategoryStyles()) {
+      const category = Utils.EntryStyles.getCategoryStyles()[categoryName as keyof Utils.EntryStyles.CategoryPalette];
       if (categoryName === selfCategory?.name) {
         // Do not add an entry for this event's self category because 2
         // entries for it where added just before this for loop (for

package/front_end/panels/timeline/UIDevtoolsController.ts

@@ -30,16 +30,16 @@
 
 import type * as SDK from '../../core/sdk/sdk.js';
 
-import * as Components from './components/components.js';
 import {type Client, TimelineController} from './TimelineController.js';
 import {UIDevtoolsUtils} from './UIDevtoolsUtils.js';
+import * as Utils from './utils/utils.js';
 
 export class UIDevtoolsController extends TimelineController {
   constructor(rootTarget: SDK.Target.Target, primaryPageTarget: SDK.Target.Target, client: Client) {
     super(rootTarget, primaryPageTarget, client);
-    Components.EntryStyles.setEventStylesMap(UIDevtoolsUtils.categorizeEvents());
-    Components.EntryStyles.setCategories(UIDevtoolsUtils.categories());
-    Components.EntryStyles.setTimelineMainEventCategories(
-        UIDevtoolsUtils.getMainCategoriesList().filter(Components.EntryStyles.stringIsEventCategory));
+    Utils.EntryStyles.setEventStylesMap(UIDevtoolsUtils.categorizeEvents());
+    Utils.EntryStyles.setCategories(UIDevtoolsUtils.categories());
+    Utils.EntryStyles.setTimelineMainEventCategories(
+        UIDevtoolsUtils.getMainCategoriesList().filter(Utils.EntryStyles.stringIsEventCategory));
   }
 }