chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

package/front_end/panels/timeline/ThreadAppender.ts

@@ -14,7 +14,7 @@ import {
   addDecorationToEvent,
   buildGroupStyle,
   buildTrackHeader,
-  getFormattedTime,
+  getDurationString,
 } from './AppenderUtils.js';
 import {
   type CompatibilityTracksAppender,
@@ -146,7 +146,7 @@ export class ThreadAppender implements TrackAppender {
   #compatibilityBuilder: CompatibilityTracksAppender;
   #parsedTrace: Trace.Handlers.Types.ParsedTrace;
 
-  #entries: Trace.Types.Events.Event[] = [];
+  #entries: readonly Trace.Types.Events.Event[] = [];
   #tree: Trace.Helpers.TreeHelpers.TraceEntryTree;
   #processId: Trace.Types.Events.ProcessID;
   #threadId: Trace.Types.Events.ThreadID;
@@ -161,7 +161,8 @@ export class ThreadAppender implements TrackAppender {
   constructor(
       compatibilityBuilder: CompatibilityTracksAppender, parsedTrace: Trace.Handlers.Types.ParsedTrace,
       processId: Trace.Types.Events.ProcessID, threadId: Trace.Types.Events.ThreadID, threadName: string|null,
-      type: Trace.Handlers.Threads.ThreadType) {
+      type: Trace.Handlers.Threads.ThreadType, entries: readonly Trace.Types.Events.Event[],
+      tree: Trace.Helpers.TreeHelpers.TraceEntryTree) {
     this.#compatibilityBuilder = compatibilityBuilder;
     // TODO(crbug.com/1456706):
     // The values for this color generator have been taken from the old
@@ -177,14 +178,6 @@ export class ThreadAppender implements TrackAppender {
     this.#processId = processId;
     this.#threadId = threadId;
 
-    // When loading a CPU profile, only CPU data will be available, thus
-    // we get the data from the SamplesHandler.
-    const entries = type === Trace.Handlers.Threads.ThreadType.CPU_PROFILE ?
-        this.#parsedTrace.Samples?.profilesInProcess.get(processId)?.get(threadId)?.profileCalls :
-        this.#parsedTrace.Renderer?.processes.get(processId)?.threads?.get(threadId)?.entries;
-    const tree = type === Trace.Handlers.Threads.ThreadType.CPU_PROFILE ?
-        this.#parsedTrace.Samples?.profilesInProcess.get(processId)?.get(threadId)?.profileTree :
-        this.#parsedTrace.Renderer?.processes.get(processId)?.threads?.get(threadId)?.tree;
     if (!entries || !tree) {
       throw new Error(`Could not find data for thread with id ${threadId} in process with id ${processId}`);
     }
@@ -370,7 +363,7 @@ export class ThreadAppender implements TrackAppender {
     return this.#url;
   }
 
-  getEntries(): Trace.Types.Events.Event[] {
+  getEntries(): readonly Trace.Types.Events.Event[] {
     return this.#entries;
   }
 
@@ -588,6 +581,6 @@ export class ThreadAppender implements TrackAppender {
       info.title += ` - ${url} [${range}]`;
     }
     const selfTime = this.#parsedTrace.Renderer.entryToNode.get(event)?.selfTime;
-    info.formattedTime = getFormattedTime(event.dur, selfTime);
+    info.formattedTime = getDurationString(event.dur, selfTime);
   }
 }

package/front_end/panels/timeline/TimelineController.ts

@@ -173,16 +173,15 @@ export class TimelineController implements Trace.TracingManager.TracingManagerCl
     // takes place. Once it is done, we re-enable it (this is the existing
     // behaviour within DevTools; the throttling settling is sticky + global).
     const throttlingManager = SDK.CPUThrottlingManager.CPUThrottlingManager.instance();
-    const rateDuringRecording = throttlingManager.cpuThrottlingRate();
-    // 1 = no throttling (CPU is 1x'd)
-    throttlingManager.setCPUThrottlingRate(1);
+    const optionDuringRecording = throttlingManager.cpuThrottlingOption();
+    throttlingManager.setCPUThrottlingOption(SDK.CPUThrottlingManager.NoThrottlingOption);
 
     this.client.loadingStarted();
     this.#fieldData = await this.fetchFieldData();
     await this.waitForTracingToStop();
 
     // Now we re-enable throttling again to maintain the setting being persistent.
-    throttlingManager.setCPUThrottlingRate(rateDuringRecording);
+    throttlingManager.setCPUThrottlingOption(optionDuringRecording);
     await this.allSourcesFinished();
 
     await LiveMetrics.LiveMetrics.instance().enable();

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

@@ -12,6 +12,8 @@ import * as Timeline from './timeline.js';
 class MockViewDelegate implements Timeline.TimelinePanel.TimelineModeViewDelegate {
   select(_selection: Timeline.TimelineSelection.TimelineSelection|null): void {
   }
+  set3PCheckboxDisabled(_disabled: boolean): void {
+  }
   selectEntryAtTime(_events: Trace.Types.Events.Event[]|null, _time: number): void {
   }
   highlightEvent(_event: Trace.Types.Events.Event|null): void {
@@ -24,7 +26,7 @@ describeWithEnvironment('TimelineDetailsView', function() {
 
   it('displays the details of a network request event correctly', async function() {
     const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'lcp-web-font.json.gz');
-    const detailsView = new Timeline.TimelineDetailsView.TimelineDetailsView(mockViewDelegate);
+    const detailsView = new Timeline.TimelineDetailsView.TimelineDetailsPane(mockViewDelegate);
 
     const networkRequests = parsedTrace.NetworkRequests.byTime;
     const cssRequest = networkRequests.find(request => {
@@ -35,8 +37,13 @@ describeWithEnvironment('TimelineDetailsView', function() {
     }
     const selection = Timeline.TimelineSelection.selectionFromEvent(cssRequest);
 
-    await detailsView.setModel(
-        {parsedTrace, selectedEvents: null, traceInsightsSets: insights, eventToRelatedInsightsMap: null});
+    await detailsView.setModel({
+      parsedTrace,
+      selectedEvents: null,
+      traceInsightsSets: insights,
+      eventToRelatedInsightsMap: null,
+      entityMapper: null
+    });
     await detailsView.setSelection(selection);
 
     const detailsContentElement = detailsView.getDetailsContentElementForTest();
@@ -46,9 +53,14 @@ describeWithEnvironment('TimelineDetailsView', function() {
 
   it('displays the details for a frame correctly', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
-    const detailsView = new Timeline.TimelineDetailsView.TimelineDetailsView(mockViewDelegate);
-    await detailsView.setModel(
-        {parsedTrace, selectedEvents: null, traceInsightsSets: null, eventToRelatedInsightsMap: null});
+    const detailsView = new Timeline.TimelineDetailsView.TimelineDetailsPane(mockViewDelegate);
+    await detailsView.setModel({
+      parsedTrace,
+      selectedEvents: null,
+      traceInsightsSets: null,
+      eventToRelatedInsightsMap: null,
+      entityMapper: null
+    });
 
     const frame = parsedTrace.Frames.frames.at(0);
     assert.isOk(frame);
@@ -67,9 +79,14 @@ describeWithEnvironment('TimelineDetailsView', function() {
 
   it('renders the layout shift component for a single layout shift', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'shift-attribution.json.gz');
-    const detailsView = new Timeline.TimelineDetailsView.TimelineDetailsView(mockViewDelegate);
-    await detailsView.setModel(
-        {parsedTrace, selectedEvents: null, traceInsightsSets: null, eventToRelatedInsightsMap: null});
+    const detailsView = new Timeline.TimelineDetailsView.TimelineDetailsPane(mockViewDelegate);
+    await detailsView.setModel({
+      parsedTrace,
+      selectedEvents: null,
+      traceInsightsSets: null,
+      eventToRelatedInsightsMap: null,
+      entityMapper: null
+    });
 
     const layoutShift = parsedTrace.LayoutShifts.clusters.at(0)?.events.at(0);
     assert.isOk(layoutShift);
@@ -84,9 +101,14 @@ describeWithEnvironment('TimelineDetailsView', function() {
 
   it('renders the layout shift component for a selected cluster', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'shift-attribution.json.gz');
-    const detailsView = new Timeline.TimelineDetailsView.TimelineDetailsView(mockViewDelegate);
-    await detailsView.setModel(
-        {parsedTrace, selectedEvents: null, traceInsightsSets: null, eventToRelatedInsightsMap: null});
+    const detailsView = new Timeline.TimelineDetailsView.TimelineDetailsPane(mockViewDelegate);
+    await detailsView.setModel({
+      parsedTrace,
+      selectedEvents: null,
+      traceInsightsSets: null,
+      eventToRelatedInsightsMap: null,
+      entityMapper: null
+    });
 
     const layoutShiftCluster = parsedTrace.LayoutShifts.clusters.at(0);
     assert.isOk(layoutShiftCluster);
@@ -101,7 +123,7 @@ describeWithEnvironment('TimelineDetailsView', function() {
 
   it('updates the range details when the user has a range selected', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
-    const detailsView = new Timeline.TimelineDetailsView.TimelineDetailsView(mockViewDelegate);
+    const detailsView = new Timeline.TimelineDetailsView.TimelineDetailsPane(mockViewDelegate);
     await detailsView.setModel({
       parsedTrace,
       // We have to set selected events for the range selection UI to be drawn
@@ -109,6 +131,7 @@ describeWithEnvironment('TimelineDetailsView', function() {
       selectedEvents: parsedTrace.Renderer.allTraceEntries,
       traceInsightsSets: null,
       eventToRelatedInsightsMap: null,
+      entityMapper: null
     });
     const bounds = Trace.Helpers.Timing.traceWindowMilliSeconds(parsedTrace.Meta.traceBounds);
     const selection = Timeline.TimelineSelection.selectionFromRangeMilliSeconds(

package/front_end/panels/timeline/TimelineDetailsView.ts

@@ -16,6 +16,7 @@ import * as TimelineComponents from './components/components.js';
 import {EventsTimelineTreeView} from './EventsTimelineTreeView.js';
 import {Tracker} from './FreshRecording.js';
 import {targetForEvent} from './TargetForEvent.js';
+import {ThirdPartyTreeViewWidget} from './ThirdPartyTreeView.js';
 import {TimelineLayersView} from './TimelineLayersView.js';
 import {TimelinePaintProfilerView} from './TimelinePaintProfilerView.js';
 import type {TimelineModeViewDelegate} from './TimelinePanel.js';
@@ -28,6 +29,7 @@ import {
 import {TimelineSelectorStatsView} from './TimelineSelectorStatsView.js';
 import {BottomUpTimelineTreeView, CallTreeTimelineTreeView, TimelineTreeView} from './TimelineTreeView.js';
 import {TimelineUIUtils} from './TimelineUIUtils.js';
+import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
@@ -61,12 +63,12 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineDetailsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export class TimelineDetailsView extends
+export class TimelineDetailsPane extends
     Common.ObjectWrapper.eventMixin<TimelineTreeView.EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox) {
   private readonly detailsLinkifier: Components.Linkifier.Linkifier;
   private tabbedPane: UI.TabbedPane.TabbedPane;
   private readonly defaultDetailsWidget: UI.Widget.VBox;
-  private readonly defaultDetailsContentElement: HTMLElement;
+  private defaultDetailsContentWidget: UI.Widget.VBox;
   private rangeDetailViews: Map<string, TimelineTreeView>;
   #selectedEvents?: Trace.Types.Events.Event[]|null;
   private lazyPaintProfilerView?: TimelinePaintProfilerView|null;
@@ -77,13 +79,15 @@ export class TimelineDetailsView extends
   private lazySelectorStatsView: TimelineSelectorStatsView|null;
   #parsedTrace: Trace.Handlers.Types.ParsedTrace|null = null;
   #traceInsightsSets: Trace.Insights.Types.TraceInsightSets|null = null;
-  /* eslint-disable-next-line no-unused-private-class-members */
+
   #eventToRelatedInsightsMap: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap|null = null;
   #filmStrip: Trace.Extras.FilmStrip.Data|null = null;
   #networkRequestDetails: TimelineComponents.NetworkRequestDetails.NetworkRequestDetails;
   #layoutShiftDetails: TimelineComponents.LayoutShiftDetails.LayoutShiftDetails;
   #onTraceBoundsChangeBound = this.#onTraceBoundsChange.bind(this);
   #relatedInsightChips = new TimelineComponents.RelatedInsightChips.RelatedInsightChips();
+  #thirdPartyTree = new ThirdPartyTreeViewWidget();
+  #entityMapper: Utils.EntityMapper.EntityMapper|null = null;
 
   constructor(delegate: TimelineModeViewDelegate) {
     super();
@@ -100,8 +104,7 @@ export class TimelineDetailsView extends
     this.defaultDetailsWidget = new UI.Widget.VBox();
     this.defaultDetailsWidget.element.classList.add('timeline-details-view');
     this.defaultDetailsWidget.element.setAttribute('jslog', `${VisualLogging.pane('details').track({resize: true})}`);
-    this.defaultDetailsContentElement =
-        this.defaultDetailsWidget.element.createChild('div', 'timeline-details-view-body vbox');
+    this.defaultDetailsContentWidget = this.#createContentWidget();
     this.appendTab(Tab.Details, i18nString(UIStrings.summary), this.defaultDetailsWidget);
     this.setPreferredTab(Tab.Details);
 
@@ -125,6 +128,12 @@ export class TimelineDetailsView extends
           TimelineTreeView.Events.TREE_ROW_HOVERED,
           node => this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_HOVERED, node.data));
     });
+    this.#thirdPartyTree.addEventListener(TimelineTreeView.Events.THIRD_PARTY_ROW_HOVERED, node => {
+      this.dispatchEventToListeners(TimelineTreeView.Events.THIRD_PARTY_ROW_HOVERED, node.data);
+    });
+
+    this.#thirdPartyTree.addEventListener(
+        TimelineTreeView.Events.BOTTOM_UP_BUTTON_CLICKED, node => this.#bottomUpClicked(node));
 
     this.#networkRequestDetails =
         new TimelineComponents.NetworkRequestDetails.NetworkRequestDetails(this.detailsLinkifier);
@@ -138,6 +147,45 @@ export class TimelineDetailsView extends
     this.lazySelectorStatsView = null;
   }
 
+  #bottomUpClicked(event: Common.EventTarget.EventTargetEvent<Trace.Extras.TraceTree.Node|null>): void {
+    // Select bottom up tree.
+    this.tabbedPane.selectTab(Tab.BottomUp, true, true);
+    if (!(this.tabbedPane.visibleView instanceof BottomUpTimelineTreeView)) {
+      return;
+    }
+    /**
+     * For a11y, ensure that the header is focused.
+     */
+    this.tabbedPane.focusSelectedTabHeader();
+    const bottomUp = this.tabbedPane.visibleView;
+    const thirdPartyNodeSelected = event.data;
+    if (!thirdPartyNodeSelected) {
+      return;
+    }
+    // Group by 3P.
+    bottomUp.setGroupBySetting(BottomUpTimelineTreeView.GroupBy.ThirdParties);
+    bottomUp.refreshTree();
+
+    // Look for the matching node in the bottom up tree using selected node event data.
+    const treeNode = bottomUp.eventToTreeNode.get(thirdPartyNodeSelected.event);
+    if (!treeNode) {
+      return;
+    }
+    bottomUp.selectProfileNode(treeNode, true);
+    // Reveal/expand the bottom up tree grid node.
+    const gridNode = bottomUp.dataGridNodeForTreeNode(treeNode);
+    if (gridNode) {
+      gridNode.expand();
+    }
+  }
+
+  #createContentWidget(): UI.Widget.VBox {
+    const defaultDetailsContentWidget = new UI.Widget.VBox();
+    defaultDetailsContentWidget.element.classList.add('timeline-details-view-body');
+    defaultDetailsContentWidget.show(this.defaultDetailsWidget.element);
+    return defaultDetailsContentWidget;
+  }
+
   private selectorStatsView(): TimelineSelectorStatsView {
     if (this.lazySelectorStatsView) {
       return this.lazySelectorStatsView;
@@ -150,7 +198,7 @@ export class TimelineDetailsView extends
   }
 
   getDetailsContentElementForTest(): HTMLElement {
-    return this.defaultDetailsContentElement;
+    return this.defaultDetailsContentWidget.element;
   }
 
   revealEventInTreeView(event: Trace.Types.Events.Event|null): void {
@@ -182,6 +230,7 @@ export class TimelineDetailsView extends
     selectedEvents: Trace.Types.Events.Event[]|null,
     traceInsightsSets: Trace.Insights.Types.TraceInsightSets|null,
     eventToRelatedInsightsMap: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap|null,
+    entityMapper: Utils.EntityMapper.EntityMapper|null,
   }): Promise<void> {
     if (this.#parsedTrace !== data.parsedTrace) {
       // Clear the selector stats view, so the next time the user views it we
@@ -192,6 +241,7 @@ export class TimelineDetailsView extends
     }
     if (data.parsedTrace) {
       this.#filmStrip = Trace.Extras.FilmStrip.fromParsedTrace(data.parsedTrace);
+      this.#entityMapper = new Utils.EntityMapper.EntityMapper(data.parsedTrace);
     }
     this.#selectedEvents = data.selectedEvents;
     this.#traceInsightsSets = data.traceInsightsSets;
@@ -203,34 +253,42 @@ export class TimelineDetailsView extends
     for (const view of this.rangeDetailViews.values()) {
       view.setModelWithEvents(data.selectedEvents, data.parsedTrace);
     }
+    // Set the 3p tree model.
+    this.#thirdPartyTree.setModelWithEvents(data.selectedEvents, data.parsedTrace, data.entityMapper);
     this.lazyPaintProfilerView = null;
     this.lazyLayersView = null;
     await this.setSelection(null);
   }
 
-  private setContent(node: Node): void {
+  private setSummaryContent(node: Node): void {
     const allTabs = this.tabbedPane.otherTabs(Tab.Details);
     for (let i = 0; i < allTabs.length; ++i) {
       if (!this.rangeDetailViews.has(allTabs[i])) {
         this.tabbedPane.closeTab(allTabs[i]);
       }
     }
-    this.defaultDetailsContentElement.removeChildren();
-    this.defaultDetailsContentElement.appendChild(node);
+    this.defaultDetailsContentWidget.detach();
+    this.defaultDetailsContentWidget = this.#createContentWidget();
+    this.defaultDetailsContentWidget.contentElement.append(node);
     if (this.#relatedInsightChips) {
-      this.defaultDetailsContentElement.appendChild(this.#relatedInsightChips);
+      this.defaultDetailsContentWidget.contentElement.appendChild(this.#relatedInsightChips);
     }
   }
 
   private updateContents(): void {
+    const traceBoundsState = TraceBounds.TraceBounds.BoundsManager.instance().state();
+    if (!traceBoundsState) {
+      return;
+    }
+    const visibleWindow = traceBoundsState.milli.timelineTraceWindow;
+    // Update the view that we currently have selected.
     const view = this.rangeDetailViews.get(this.tabbedPane.selectedTabId || '');
     if (view) {
-      const traceBoundsState = TraceBounds.TraceBounds.BoundsManager.instance().state();
-      if (!traceBoundsState) {
-        return;
-      }
-      const visibleWindow = traceBoundsState.milli.timelineTraceWindow;
       view.updateContents(this.selection || selectionFromRangeMilliSeconds(visibleWindow.min, visibleWindow.max));
+    } else {
+      // If no view, we must be in the summary tab, update the 3p tree.
+      this.#thirdPartyTree.updateContents(
+          this.selection || selectionFromRangeMilliSeconds(visibleWindow.min, visibleWindow.max));
     }
   }
 
@@ -260,7 +318,7 @@ export class TimelineDetailsView extends
    */
   private scheduleUpdateContentsFromWindow(forceImmediateUpdate: boolean = false): void {
     if (!this.#parsedTrace) {
-      this.setContent(UI.Fragment.html`<div/>`);
+      this.setSummaryContent(UI.Fragment.html`<div/>`);
       return;
     }
     if (forceImmediateUpdate) {
@@ -297,13 +355,14 @@ export class TimelineDetailsView extends
     if (!filmStripFrame) {
       return null;
     }
-    const frameTimeMilliSeconds = Trace.Helpers.Timing.microSecondsToMilliseconds(filmStripFrame.screenshotEvent.ts);
+    const frameTimeMilliSeconds = Trace.Helpers.Timing.microToMilli(filmStripFrame.screenshotEvent.ts);
     return frameTimeMilliSeconds - frame.endTime < 10 ? filmStripFrame : null;
   }
 
   #setSelectionForTimelineFrame(frame: Trace.Types.Events.LegacyTimelineFrame): void {
     const matchedFilmStripFrame = this.#getFilmStripFrame(frame);
-    this.setContent(TimelineUIUtils.generateDetailsContentForFrame(frame, this.#filmStrip, matchedFilmStripFrame));
+    this.setSummaryContent(
+        TimelineUIUtils.generateDetailsContentForFrame(frame, this.#filmStrip, matchedFilmStripFrame));
     const target = SDK.TargetManager.TargetManager.instance().rootTarget();
     if (frame.layerTree && target) {
       const layerTreeForFrame = new TimelineModel.TracingLayerTree.TracingFrameLayerTree(target, frame.layerTree);
@@ -320,13 +379,13 @@ export class TimelineDetailsView extends
       return;
     }
     const maybeTarget = targetForEvent(this.#parsedTrace, networkRequest);
-    await this.#networkRequestDetails.setData(this.#parsedTrace, networkRequest, maybeTarget);
+    await this.#networkRequestDetails.setData(this.#parsedTrace, networkRequest, maybeTarget, this.#entityMapper);
     this.#relatedInsightChips.activeEvent = networkRequest;
     if (this.#eventToRelatedInsightsMap) {
       this.#relatedInsightChips.eventToRelatedInsightsMap = this.#eventToRelatedInsightsMap;
     }
 
-    this.setContent(this.#networkRequestDetails);
+    this.setSummaryContent(this.#networkRequestDetails);
   }
 
   async #setSelectionForTraceEvent(event: Trace.Types.Events.Event): Promise<void> {
@@ -344,13 +403,13 @@ export class TimelineDetailsView extends
     if (Trace.Types.Events.isSyntheticLayoutShift(event) || Trace.Types.Events.isSyntheticLayoutShiftCluster(event)) {
       const isFreshRecording = Boolean(this.#parsedTrace && Tracker.instance().recordingIsFresh(this.#parsedTrace));
       this.#layoutShiftDetails.setData(event, this.#traceInsightsSets, this.#parsedTrace, isFreshRecording);
-      this.setContent(this.#layoutShiftDetails);
+      this.setSummaryContent(this.#layoutShiftDetails);
       return;
     }
 
     // Otherwise, build the generic trace event details UI.
-    const traceEventDetails =
-        await TimelineUIUtils.buildTraceEventDetails(this.#parsedTrace, event, this.detailsLinkifier, true);
+    const traceEventDetails = await TimelineUIUtils.buildTraceEventDetails(
+        this.#parsedTrace, event, this.detailsLinkifier, true, this.#entityMapper);
     this.appendDetailsTabsForTraceEventAndShowDetails(event, traceEventDetails);
   }
 
@@ -439,7 +498,7 @@ export class TimelineDetailsView extends
   }
 
   private appendDetailsTabsForTraceEventAndShowDetails(event: Trace.Types.Events.Event, content: Node): void {
-    this.setContent(content);
+    this.setSummaryContent(content);
     if (Trace.Types.Events.isPaint(event) || Trace.Types.Events.isRasterTask(event)) {
       this.showEventInPaintProfiler(event);
     }
@@ -469,9 +528,8 @@ export class TimelineDetailsView extends
     this.appendTab(Tab.PaintProfiler, i18nString(UIStrings.paintProfiler), paintProfilerView);
   }
 
-  private updateSelectedRangeStats(
-      startTime: Trace.Types.Timing.MilliSeconds, endTime: Trace.Types.Timing.MilliSeconds): void {
-    if (!this.#selectedEvents || !this.#parsedTrace) {
+  private updateSelectedRangeStats(startTime: Trace.Types.Timing.Milli, endTime: Trace.Types.Timing.Milli): void {
+    if (!this.#selectedEvents || !this.#parsedTrace || !this.#entityMapper) {
       return;
     }
 
@@ -479,8 +537,10 @@ export class TimelineDetailsView extends
     const aggregatedStats = TimelineUIUtils.statsForTimeRange(this.#selectedEvents, startTime, endTime);
     const startOffset = startTime - minBoundsMilli;
     const endOffset = endTime - minBoundsMilli;
-    const summaryDetails = TimelineUIUtils.generateSummaryDetails(aggregatedStats, startOffset, endOffset);
-    this.setContent(summaryDetails);
+    const summaryDetailElem = TimelineUIUtils.generateSummaryDetails(
+        aggregatedStats, startOffset, endOffset, this.#selectedEvents, this.#thirdPartyTree);
+
+    this.setSummaryContent(summaryDetailElem);
 
     // Find all recalculate style events data from range
     const isSelectorStatsEnabled =
@@ -488,8 +548,8 @@ export class TimelineDetailsView extends
     if (this.#selectedEvents && isSelectorStatsEnabled) {
       const eventsInRange = Trace.Helpers.Trace.findUpdateLayoutTreeEvents(
           this.#selectedEvents,
-          Trace.Helpers.Timing.millisecondsToMicroseconds(startTime),
-          Trace.Helpers.Timing.millisecondsToMicroseconds(endTime),
+          Trace.Helpers.Timing.milliToMicro(startTime),
+          Trace.Helpers.Timing.milliToMicro(endTime),
       );
       if (eventsInRange.length > 0) {
         this.showAggregatedSelectorStats(eventsInRange);

package/front_end/panels/timeline/TimelineEventOverview.ts

@@ -92,12 +92,12 @@ export class TimelineEventOverviewNetwork extends TimelineEventOverview {
     this.#parsedTrace = parsedTrace;
   }
 
-  override update(start?: Trace.Types.Timing.MilliSeconds, end?: Trace.Types.Timing.MilliSeconds): void {
+  override update(start?: Trace.Types.Timing.Milli, end?: Trace.Types.Timing.Milli): void {
     this.resetCanvas();
     this.#renderWithParsedTrace(start, end);
   }
 
-  #renderWithParsedTrace(start?: Trace.Types.Timing.MilliSeconds, end?: Trace.Types.Timing.MilliSeconds): void {
+  #renderWithParsedTrace(start?: Trace.Types.Timing.Milli, end?: Trace.Types.Timing.Milli): void {
     if (!this.#parsedTrace) {
       return;
     }
@@ -152,8 +152,8 @@ export class TimelineEventOverviewCPUActivity extends TimelineEventOverview {
   private backgroundCanvas: HTMLCanvasElement;
   #parsedTrace: Trace.Handlers.Types.ParsedTrace;
   #drawn = false;
-  #start: Trace.Types.Timing.MilliSeconds;
-  #end: Trace.Types.Timing.MilliSeconds;
+  #start: Trace.Types.Timing.Milli;
+  #end: Trace.Types.Timing.Milli;
 
   constructor(parsedTrace: Trace.Handlers.Types.ParsedTrace) {
     // During the sync tracks migration this component can use either legacy
@@ -235,7 +235,7 @@ export class TimelineEventOverviewCPUActivity extends TimelineEventOverview {
               // Idle event won't show in CPU activity, so just skip them.
               return;
             }
-            const startTimeMilli = Trace.Helpers.Timing.microSecondsToMilliseconds(entry.ts);
+            const startTimeMilli = Trace.Helpers.Timing.microToMilli(entry.ts);
             const index = categoryIndexStack.length ? categoryIndexStack[categoryIndexStack.length - 1] : idleIndex;
             quantizer.appendInterval(startTimeMilli, index);
             const categoryIndex = categoryOrder.indexOf(category);
@@ -243,26 +243,26 @@ export class TimelineEventOverviewCPUActivity extends TimelineEventOverview {
           };
 
           function onEntryEnd(entry: Trace.Types.Events.Event): void {
-            const endTimeMilli = Trace.Helpers.Timing.microSecondsToMilliseconds(entry.ts) +
-                Trace.Helpers.Timing.microSecondsToMilliseconds(Trace.Types.Timing.MicroSeconds(entry.dur || 0));
+            const endTimeMilli = Trace.Helpers.Timing.microToMilli(entry.ts) +
+                Trace.Helpers.Timing.microToMilli(Trace.Types.Timing.Micro(entry.dur || 0));
             const lastCategoryIndex = categoryIndexStack.pop();
             if (endTimeMilli !== undefined && lastCategoryIndex) {
               quantizer.appendInterval(endTimeMilli, lastCategoryIndex);
             }
           }
-          const startMicro = Trace.Helpers.Timing.millisecondsToMicroseconds(this.#start);
-          const endMicro = Trace.Helpers.Timing.millisecondsToMicroseconds(this.#end);
+          const startMicro = Trace.Helpers.Timing.milliToMicro(this.#start);
+          const endMicro = Trace.Helpers.Timing.milliToMicro(this.#end);
           const bounds = {
             min: startMicro,
             max: endMicro,
-            range: Trace.Types.Timing.MicroSeconds(endMicro - startMicro),
+            range: Trace.Types.Timing.Micro(endMicro - startMicro),
           };
 
           // Filter out tiny events - they don't make a visual impact to the
           // canvas as they are so small, but they do impact the time it takes
           // to walk the tree and render the events.
           // However, if the entire range we are showing is 200ms or less, then show all events.
-          const minDuration = Trace.Types.Timing.MicroSeconds(
+          const minDuration = Trace.Types.Timing.Micro(
               bounds.range > 200_000 ? 16_000 : 0,
           );
           Trace.Helpers.TreeHelpers.walkEntireTree(
@@ -366,14 +366,14 @@ export class TimelineEventOverviewResponsiveness extends TimelineEventOverview {
     return allWarningEvents;
   }
 
-  override update(start?: Trace.Types.Timing.MilliSeconds, end?: Trace.Types.Timing.MilliSeconds): void {
+  override update(start?: Trace.Types.Timing.Milli, end?: Trace.Types.Timing.Milli): void {
     this.resetCanvas();
 
     const height = this.height();
     const visibleTimeWindow = !(start && end) ? this.#parsedTrace.Meta.traceBounds : {
-      min: Trace.Helpers.Timing.millisecondsToMicroseconds(start),
-      max: Trace.Helpers.Timing.millisecondsToMicroseconds(end),
-      range: Trace.Helpers.Timing.millisecondsToMicroseconds(Trace.Types.Timing.MilliSeconds(end - start)),
+      min: Trace.Helpers.Timing.milliToMicro(start),
+      max: Trace.Helpers.Timing.milliToMicro(end),
+      range: Trace.Helpers.Timing.milliToMicro(Trace.Types.Timing.Milli(end - start)),
     };
     const timeSpan = visibleTimeWindow.range;
     const scale = this.width() / timeSpan;
@@ -421,8 +421,7 @@ export class TimelineFilmStripOverview extends TimelineEventOverview {
     this.reset();
   }
 
-  override update(customStartTime?: Trace.Types.Timing.MilliSeconds, customEndTime?: Trace.Types.Timing.MilliSeconds):
-      void {
+  override update(customStartTime?: Trace.Types.Timing.Milli, customEndTime?: Trace.Types.Timing.Milli): void {
     this.resetCanvas();
     const frames = this.#filmStrip ? this.#filmStrip.frames : [];
     if (!frames.length) {
@@ -458,15 +457,16 @@ export class TimelineFilmStripOverview extends TimelineEventOverview {
     let imagePromise: Promise<HTMLImageElement|null>|undefined = this.frameToImagePromise.get(frame);
     if (!imagePromise) {
       // TODO(paulirish): Adopt Util.ImageCache
-      imagePromise = UI.UIUtils.loadImage(frame.screenshotEvent.args.dataUri);
+      const uri = Trace.Handlers.ModelHandlers.Screenshots.screenshotImageDataUri(frame.screenshotEvent);
+      imagePromise = UI.UIUtils.loadImage(uri);
       this.frameToImagePromise.set(frame, (imagePromise as Promise<HTMLImageElement>));
     }
     return imagePromise;
   }
 
   private drawFrames(
-      imageWidth: number, imageHeight: number, customStartTime?: Trace.Types.Timing.MilliSeconds,
-      customEndTime?: Trace.Types.Timing.MilliSeconds): void {
+      imageWidth: number, imageHeight: number, customStartTime?: Trace.Types.Timing.Milli,
+      customEndTime?: Trace.Types.Timing.Milli): void {
     if (!imageWidth) {
       return;
     }
@@ -476,17 +476,17 @@ export class TimelineFilmStripOverview extends TimelineEventOverview {
     const padding = TimelineFilmStripOverview.Padding;
     const width = this.width();
 
-    const zeroTime = customStartTime ?? Trace.Helpers.Timing.microSecondsToMilliseconds(this.#filmStrip.zeroTime);
-    const spanTime = customEndTime ? customEndTime - zeroTime :
-                                     Trace.Helpers.Timing.microSecondsToMilliseconds(this.#filmStrip.spanTime);
+    const zeroTime = customStartTime ?? Trace.Helpers.Timing.microToMilli(this.#filmStrip.zeroTime);
+    const spanTime =
+        customEndTime ? customEndTime - zeroTime : Trace.Helpers.Timing.microToMilli(this.#filmStrip.spanTime);
     const scale = spanTime / width;
     const context = this.context();
     const drawGeneration = this.drawGeneration;
 
     context.beginPath();
     for (let x = padding; x < width; x += imageWidth + 2 * padding) {
-      const time = Trace.Types.Timing.MilliSeconds(zeroTime + (x + imageWidth / 2) * scale);
-      const timeMicroSeconds = Trace.Helpers.Timing.millisecondsToMicroseconds(time);
+      const time = Trace.Types.Timing.Milli(zeroTime + (x + imageWidth / 2) * scale);
+      const timeMicroSeconds = Trace.Helpers.Timing.milliToMicro(time);
       const frame = Trace.Extras.FilmStrip.frameClosestToTimestamp(this.#filmStrip, timeMicroSeconds);
       if (!frame) {
         continue;
@@ -516,7 +516,7 @@ export class TimelineFilmStripOverview extends TimelineEventOverview {
       return null;
     }
     const timeMilliSeconds = calculator.positionToTime(x);
-    const timeMicroSeconds = Trace.Helpers.Timing.millisecondsToMicroseconds(timeMilliSeconds);
+    const timeMicroSeconds = Trace.Helpers.Timing.milliToMicro(timeMilliSeconds);
     const frame = Trace.Extras.FilmStrip.frameClosestToTimestamp(this.#filmStrip, timeMicroSeconds);
     if (frame === this.lastFrame) {
       return this.lastElement;
@@ -558,7 +558,7 @@ export class TimelineEventOverviewMemory extends TimelineEventOverview {
     this.heapSizeLabel.textContent = '';
   }
 
-  override update(start?: Trace.Types.Timing.MilliSeconds, end?: Trace.Types.Timing.MilliSeconds): void {
+  override update(start?: Trace.Types.Timing.Milli, end?: Trace.Types.Timing.Milli): void {
     this.resetCanvas();
     const ratio = window.devicePixelRatio;