chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

package/front_end/panels/timeline/InteractionsTrackAppender.ts

@@ -9,7 +9,7 @@ import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import {buildGroupStyle, buildTrackHeader} from './AppenderUtils.js';
 import {
   type CompatibilityTracksAppender,
-  type HighlightedEntryInfo,
+  type PopoverInfo,
   type TrackAppender,
   type TrackAppenderName,
   VisualLoggingTrackName,
@@ -148,12 +148,11 @@ export class InteractionsTrackAppender implements TrackAppender {
     return this.#colorGenerator.colorForID(idForColorGeneration);
   }
 
-  highlightedEntryInfo(event: Trace.Types.Events.Event): HighlightedEntryInfo {
+  setPopoverInfo(event: Trace.Types.Events.Event, info: PopoverInfo): void {
     if (Trace.Types.Events.isSyntheticInteraction(event)) {
       const breakdown = new Components.InteractionBreakdown.InteractionBreakdown();
       breakdown.entry = event;
-      return {title: '', formattedTime: '', additionalElement: breakdown};
+      info.additionalElements.push(breakdown);
     }
-    return {title: '', formattedTime: ''};
   }
 }

package/front_end/panels/timeline/LayoutShiftsTrackAppender.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Root from '../../core/root/root.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as ComponentHelpers from '../../ui/components/helpers/helpers.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -13,7 +12,7 @@ import {buildGroupStyle, buildTrackHeader} from './AppenderUtils.js';
 import {
   type CompatibilityTracksAppender,
   type DrawOverride,
-  type HighlightedEntryInfo,
+  type PopoverInfo,
   type TrackAppender,
   type TrackAppenderName,
   VisualLoggingTrackName,
@@ -100,13 +99,10 @@ export class LayoutShiftsTrackAppender implements TrackAppender {
    * layout shifts (the first available level to append more data).
    */
   #appendLayoutShiftsAtLevel(currentLevel: number): number {
-    const allLayoutShifts = this.#parsedTrace.LayoutShifts.clusters.flatMap(cluster => cluster.events);
-
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS)) {
-      const allClusters = this.#parsedTrace.LayoutShifts.clusters;
-      this.#compatibilityBuilder.appendEventsAtLevel(allClusters, currentLevel, this);
-    }
+    const allClusters = this.#parsedTrace.LayoutShifts.clusters;
+    this.#compatibilityBuilder.appendEventsAtLevel(allClusters, currentLevel, this);
 
+    const allLayoutShifts = this.#parsedTrace.LayoutShifts.clusters.flatMap(cluster => cluster.events);
     void this.preloadScreenshots(allLayoutShifts);
     return this.#compatibilityBuilder.appendEventsAtLevel(allLayoutShifts, currentLevel, this);
   }
@@ -143,53 +139,28 @@ export class LayoutShiftsTrackAppender implements TrackAppender {
     return '';
   }
 
-  /**
-   * Returns the info shown when an event added by this appender
-   * is hovered in the timeline.
-   */
-  highlightedEntryInfo(event: Trace.Types.Events.Event): HighlightedEntryInfo {
+  setPopoverInfo(event: Trace.Types.Events.Event, info: PopoverInfo): void {
     const score = Trace.Types.Events.isLayoutShift(event)       ? event.args.data?.weighted_score_delta ?? 0 :
         Trace.Types.Events.isSyntheticLayoutShiftCluster(event) ? event.clusterCumulativeScore :
                                                                   -1;
-    const title = Trace.Types.Events.isLayoutShift(event)       ? i18nString(UIStrings.layoutShift) :
+    // Score isn't a duration, but the UI works anyhow.
+    info.formattedTime = score.toFixed(4);
+    info.title = Trace.Types.Events.isLayoutShift(event)        ? i18nString(UIStrings.layoutShift) :
         Trace.Types.Events.isSyntheticLayoutShiftCluster(event) ? i18nString(UIStrings.layoutShiftCluster) :
                                                                   event.name;
 
-    let additionalElement;
     if (Trace.Types.Events.isSyntheticLayoutShift(event)) {
       // Screenshots are max 500x500 naturally, but on a laptop in dock-to-right, 500px tall usually doesn't fit.
       // In the future, we may investigate a way to dynamically scale this tooltip content per available space.
       const maxSize = new UI.Geometry.Size(510, 400);
       const vizElem = LayoutShiftsTrackAppender.createShiftViz(event, this.#parsedTrace, maxSize);
       if (vizElem) {
-        additionalElement = vizElem;
+        info.additionalElements.push(vizElem);
       }
     }
-
-    // Score isn't a duration, but the UI works anyhow.
-    return {title, formattedTime: score.toFixed(4), additionalElement};
   }
 
   getDrawOverride(event: Trace.Types.Events.Event): DrawOverride|undefined {
-    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS)) {
-      // If the new CLS experience isn't on.. Continue to present that Shifts are 5ms long. (but now via drawOverrides)
-      // TODO: Remove this when the experiment ships
-      if (Trace.Types.Events.isLayoutShift(event)) {
-        return (context, x, y, _width, levelHeight, timeToPosition, transformColor) => {
-          const fakeDurMs = Trace.Helpers.Timing.microSecondsToMilliseconds(
-              Trace.Types.Timing.MicroSeconds(event.ts + LAYOUT_SHIFT_SYNTHETIC_DURATION));
-          const barEnd = timeToPosition(fakeDurMs);
-          const barWidth = barEnd - x;
-          context.fillStyle = transformColor(this.colorForEvent(event));
-          context.fillRect(x, y, barWidth - 0.5, levelHeight - 1);
-          return {
-            x,
-            width: barWidth,
-          };
-        };
-      }
-    }
-
     if (Trace.Types.Events.isLayoutShift(event)) {
       const score = event.args.data?.weighted_score_delta || 0;
 

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

@@ -16,8 +16,8 @@ describeWithEnvironment('ModificationsManager', () => {
       throw new Error('Modifications manager does not exist.');
     }
     const entriesFilter = modificationsManager.getEntriesFilter();
-    assert.strictEqual(entriesFilter.expandableEntries().length, 1);
-    assert.strictEqual(entriesFilter.invisibleEntries().length, 108);
+    assert.lengthOf(entriesFilter.expandableEntries(), 1);
+    assert.lengthOf(entriesFilter.invisibleEntries(), 108);
     assert.deepEqual(modificationsManager.getTimelineBreadcrumbs().initialBreadcrumb, {
       window: {min: 1020034823047, max: 1020036087961, range: 1264914},
       child: {window: {min: 1020034823047, max: 1020035228006.5569, range: 404959.5568847656}, child: null},
@@ -42,9 +42,9 @@ describeWithEnvironment('ModificationsManager', () => {
     }
     const entriesFilter = modificationsManager.getEntriesFilter();
     const modifications = modificationsManager.toJSON();
-    assert.strictEqual(entriesFilter.expandableEntries().length, 1);
-    assert.strictEqual(modifications.entriesModifications.expandableEntries.length, 1);
-    assert.strictEqual(modifications.entriesModifications.hiddenEntries.length, 108);
+    assert.lengthOf(entriesFilter.expandableEntries(), 1);
+    assert.lengthOf(modifications.entriesModifications.expandableEntries, 1);
+    assert.lengthOf(modifications.entriesModifications.hiddenEntries, 108);
     assert.deepEqual(modifications.initialBreadcrumb, {
       window: {min: 1020034823047, max: 1020036087961, range: 1264914},
       child: {window: {min: 1020034823047, max: 1020035228006.5569, range: 404959.5568847656}, child: null},

package/front_end/panels/timeline/ServerTimingsTrackAppender.ts

@@ -6,10 +6,9 @@ import * as Root from '../../core/root/root.js';
 import type * as Trace from '../../models/trace/trace.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
-import {buildGroupStyle, buildTrackHeader, getFormattedTime} from './AppenderUtils.js';
+import {buildGroupStyle, buildTrackHeader} from './AppenderUtils.js';
 import {
   type CompatibilityTracksAppender,
-  type HighlightedEntryInfo,
   type TrackAppender,
   type TrackAppenderName,
   VisualLoggingTrackName,
@@ -90,12 +89,4 @@ export class ServerTimingsTrackAppender implements TrackAppender {
   titleForEvent(event: Trace.Types.Events.Event): string {
     return event.name;
   }
-
-  /**
-   * Returns the info shown when an event added by this appender
-   * is hovered in the timeline.
-   */
-  highlightedEntryInfo(event: Trace.Types.Events.Event): HighlightedEntryInfo {
-    return {title: event.name, formattedTime: getFormattedTime(event.dur)};
-  }
 }

package/front_end/panels/timeline/ThreadAppender.ts

@@ -19,7 +19,7 @@ import {
 import {
   type CompatibilityTracksAppender,
   entryIsVisibleInTimeline,
-  type HighlightedEntryInfo,
+  type PopoverInfo,
   type TrackAppender,
   type TrackAppenderName,
   VisualLoggingTrackName,
@@ -29,10 +29,11 @@ import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
-   *@description Text shown for an entry in the flame chart that is ignored because it matches
+   * @description Text shown for an entry in the flame chart that is ignored because it matches
    * a predefined ignore list.
+   * @example {/analytics\.js$} rule
    */
-  onIgnoreList: 'On ignore list',
+  onIgnoreList: 'On ignore list ({rule})',
   /**
    * @description Refers to the "Main frame", meaning the top level frame. See https://www.w3.org/TR/html401/present/frames.html
    * @example{example.com} PH1
@@ -571,26 +572,22 @@ export class ThreadAppender implements TrackAppender {
    */
   titleForEvent(entry: Trace.Types.Events.Event): string {
     if (Utils.IgnoreList.isIgnoreListedEntry(entry)) {
-      return i18nString(UIStrings.onIgnoreList);
+      const rule = Utils.IgnoreList.getIgnoredReasonString(entry);
+      return i18nString(UIStrings.onIgnoreList, {rule});
     }
     return Utils.EntryName.nameForEntry(entry, this.#parsedTrace);
   }
 
-  /**
-   * Returns the info shown when an event added by this appender
-   * is hovered in the timeline.
-   */
-  highlightedEntryInfo(event: Trace.Types.Events.Event): HighlightedEntryInfo {
-    let title = this.titleForEvent(event);
+  setPopoverInfo(event: Trace.Types.Events.Event, info: PopoverInfo): void {
     if (Trace.Types.Events.isParseHTML(event)) {
       const startLine = event.args['beginData']['startLine'];
       const endLine = event.args['endData'] && event.args['endData']['endLine'];
       const eventURL = event.args['beginData']['url'] as Platform.DevToolsPath.UrlString;
       const url = Bindings.ResourceUtils.displayNameForURL(eventURL);
       const range = (endLine !== -1 || endLine === startLine) ? `${startLine}...${endLine}` : startLine;
-      title += ` - ${url} [${range}]`;
+      info.title += ` - ${url} [${range}]`;
     }
     const selfTime = this.#parsedTrace.Renderer.entryToNode.get(event)?.selfTime;
-    return {title, formattedTime: getFormattedTime(event.dur, selfTime)};
+    info.formattedTime = getFormattedTime(event.dur, selfTime);
   }
 }

package/front_end/panels/timeline/TimelineController.ts

@@ -6,6 +6,8 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
+import * as CrUXManager from '../../models/crux-manager/crux-manager.js';
+import * as EmulationModel from '../../models/emulation/emulation.js';
 import * as Extensions from '../../models/extensions/extensions.js';
 import * as LiveMetrics from '../../models/live-metrics/live-metrics.js';
 import * as Trace from '../../models/trace/trace.js';
@@ -25,6 +27,8 @@ export class TimelineController implements Trace.TracingManager.TracingManagerCl
   readonly rootTarget: SDK.Target.Target;
   private tracingManager: Trace.TracingManager.TracingManager|null;
   #collectedEvents: Trace.Types.Events.Event[] = [];
+  #navigationUrls: string[] = [];
+  #fieldData: CrUXManager.PageResult[]|null = null;
   #recordingStartTime: number|null = null;
   private readonly client: Client;
   private tracingCompletePromise: PromiseWithResolvers<void>|null = null;
@@ -93,6 +97,7 @@ export class TimelineController implements Trace.TracingManager.TracingManagerCl
       disabledByDefault('devtools.timeline.frame'),
       disabledByDefault('devtools.timeline.stack'),
       disabledByDefault('v8.compile'),
+      disabledByDefault('v8.inspector'),
       disabledByDefault('v8.cpu_profiler.hires'),
       disabledByDefault('lighthouse'),
       'v8.execute',
@@ -131,6 +136,12 @@ export class TimelineController implements Trace.TracingManager.TracingManagerCl
 
     await LiveMetrics.LiveMetrics.instance().disable();
 
+    SDK.TargetManager.TargetManager.instance().addModelListener(
+        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated, this.#onFrameNavigated,
+        this);
+
+    this.#navigationUrls = [];
+    this.#fieldData = null;
     this.#recordingStartTime = Date.now();
     const response = await this.startRecordingWithCategories(categoriesArray.join(','));
     if (response.getError()) {
@@ -139,10 +150,23 @@ export class TimelineController implements Trace.TracingManager.TracingManagerCl
     return response;
   }
 
+  async #onFrameNavigated(event: {data: SDK.ResourceTreeModel.ResourceTreeFrame}): Promise<void> {
+    if (!event.data.isPrimaryFrame()) {
+      return;
+    }
+
+    this.#navigationUrls.push(event.data.url);
+  }
+
   async stopRecording(): Promise<void> {
     if (this.tracingManager) {
       this.tracingManager.stop();
     }
+
+    SDK.TargetManager.TargetManager.instance().removeModelListener(
+        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated, this.#onFrameNavigated,
+        this);
+
     // When throttling is applied to the main renderer, it can slow down the
     // collection of trace events once tracing has completed. Therefore we
     // temporarily disable throttling whilst the final trace event collection
@@ -154,15 +178,38 @@ export class TimelineController implements Trace.TracingManager.TracingManagerCl
     throttlingManager.setCPUThrottlingRate(1);
 
     this.client.loadingStarted();
+    this.#fieldData = await this.fetchFieldData();
     await this.waitForTracingToStop();
-    await this.allSourcesFinished();
 
     // Now we re-enable throttling again to maintain the setting being persistent.
     throttlingManager.setCPUThrottlingRate(rateDuringRecording);
+    await this.allSourcesFinished();
 
     await LiveMetrics.LiveMetrics.instance().enable();
   }
 
+  private async fetchFieldData(): Promise<CrUXManager.PageResult[]|null> {
+    const cruxManager = CrUXManager.CrUXManager.instance();
+    if (!cruxManager.isEnabled() || !navigator.onLine) {
+      return null;
+    }
+
+    const urls = [...new Set(this.#navigationUrls)];
+    return Promise.all(urls.map(url => cruxManager.getFieldDataForPage(url)));
+  }
+
+  private async createMetadata(): Promise<Trace.Types.File.MetaData> {
+    const deviceModeModel = EmulationModel.DeviceModeModel.DeviceModeModel.tryInstance();
+    let emulatedDeviceTitle;
+    if (deviceModeModel?.type() === EmulationModel.DeviceModeModel.Type.Device) {
+      emulatedDeviceTitle = deviceModeModel.device()?.title ?? undefined;
+    } else if (deviceModeModel?.type() === EmulationModel.DeviceModeModel.Type.Responsive) {
+      emulatedDeviceTitle = 'Responsive';
+    }
+    return Trace.Extras.Metadata.forNewRecording(
+        false, this.#recordingStartTime ?? undefined, emulatedDeviceTitle, this.#fieldData ?? undefined);
+  }
+
   private async waitForTracingToStop(): Promise<void> {
     if (this.tracingManager) {
       await this.tracingCompletePromise?.promise;
@@ -218,9 +265,8 @@ export class TimelineController implements Trace.TracingManager.TracingManagerCl
     Extensions.ExtensionServer.ExtensionServer.instance().profilingStopped();
 
     this.client.processingStarted();
-    await this.client.loadingComplete(
-        this.#collectedEvents, /* exclusiveFilter= */ null, /* isCpuProfile= */ false, this.#recordingStartTime,
-        /* metadata= */ null);
+    const metadata = await this.createMetadata();
+    await this.client.loadingComplete(this.#collectedEvents, /* exclusiveFilter= */ null, metadata);
     this.client.loadingCompleteForTest();
   }
 
@@ -240,7 +286,7 @@ export interface Client {
   loadingProgress(progress?: number): void;
   loadingComplete(
       collectedEvents: Trace.Types.Events.Event[], exclusiveFilter: Trace.Extras.TraceFilter.TraceFilter|null,
-      isCpuProfile: boolean, recordingStartTime: number|null, metadata: Trace.Types.File.MetaData|null): Promise<void>;
+      metadata: Trace.Types.File.MetaData|null): Promise<void>;
   loadingCompleteForTest(): void;
 }
 export interface RecordingOptions {

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

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Root from '../../core/root/root.js';
 import * as Trace from '../../models/trace/trace.js';
 import {doubleRaf} from '../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
@@ -42,7 +41,7 @@ describeWithEnvironment('TimelineDetailsView', function() {
 
     const detailsContentElement = detailsView.getDetailsContentElementForTest();
     // NetworkRequestDetails and RelatedInsightsChips nodes.
-    assert.strictEqual(detailsContentElement.childNodes.length, 2);
+    assert.lengthOf(detailsContentElement.childNodes, 2);
   });
 
   it('displays the details for a frame correctly', async function() {
@@ -67,8 +66,6 @@ describeWithEnvironment('TimelineDetailsView', function() {
   });
 
   it('renders the layout shift component for a single layout shift', async function() {
-    Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS);
-
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'shift-attribution.json.gz');
     const detailsView = new Timeline.TimelineDetailsView.TimelineDetailsView(mockViewDelegate);
     await detailsView.setModel(
@@ -86,8 +83,6 @@ describeWithEnvironment('TimelineDetailsView', function() {
   });
 
   it('renders the layout shift component for a selected cluster', async function() {
-    Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS);
-
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'shift-attribution.json.gz');
     const detailsView = new Timeline.TimelineDetailsView.TimelineDetailsView(mockViewDelegate);
     await detailsView.setModel(
@@ -122,7 +117,8 @@ describeWithEnvironment('TimelineDetailsView', function() {
     );
     await detailsView.setSelection(selection);
     const detailsContentElement = detailsView.getDetailsContentElementForTest();
-    const title = detailsContentElement.querySelector<HTMLElement>('.timeline-details-chip-title');
-    assert.strictEqual(title?.innerText, 'Range:  0 ms – 5.39 s');
+    const component = detailsContentElement.querySelector<HTMLElement>('devtools-performance-timeline-summary');
+    const range = component?.shadowRoot?.querySelector<HTMLElement>('.summary-range');
+    assert.strictEqual(range?.innerText, 'Range:  0 ms – 5.39 s');
   });
 });

package/front_end/panels/timeline/TimelineDetailsView.ts

@@ -4,7 +4,6 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as TimelineModel from '../../models/timeline_model/timeline_model.js';
 import * as Trace from '../../models/trace/trace.js';
@@ -27,8 +26,8 @@ import {
   type TimelineSelection,
 } from './TimelineSelection.js';
 import {TimelineSelectorStatsView} from './TimelineSelectorStatsView.js';
-import {BottomUpTimelineTreeView, CallTreeTimelineTreeView, type TimelineTreeView} from './TimelineTreeView.js';
-import {TimelineDetailsContentHelper, TimelineUIUtils} from './TimelineUIUtils.js';
+import {BottomUpTimelineTreeView, CallTreeTimelineTreeView, TimelineTreeView} from './TimelineTreeView.js';
+import {TimelineUIUtils} from './TimelineUIUtils.js';
 
 const UIStrings = {
   /**
@@ -55,12 +54,6 @@ const UIStrings = {
    *@description Title of the Layers tool
    */
   layers: 'Layers',
-  /**
-   *@description Text in Timeline Details View of the Performance panel
-   *@example {1ms} PH1
-   *@example {10ms} PH2
-   */
-  rangeSS: 'Range:  {PH1} – {PH2}',
   /**
    *@description Title of the selector stats tab
    */
@@ -68,7 +61,8 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineDetailsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export class TimelineDetailsView extends UI.Widget.VBox {
+export class TimelineDetailsView 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;
@@ -126,6 +120,12 @@ export class TimelineDetailsView extends UI.Widget.VBox {
     this.appendTab(Tab.EventLog, i18nString(UIStrings.eventLog), eventsView);
     this.rangeDetailViews.set(Tab.EventLog, eventsView);
 
+    this.rangeDetailViews.values().forEach(view => {
+      view.addEventListener(
+          TimelineTreeView.Events.TREE_ROW_HOVERED,
+          node => this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_HOVERED, node.data));
+    });
+
     this.#networkRequestDetails =
         new TimelineComponents.NetworkRequestDetails.NetworkRequestDetails(this.detailsLinkifier);
 
@@ -153,6 +153,12 @@ export class TimelineDetailsView extends UI.Widget.VBox {
     return this.defaultDetailsContentElement;
   }
 
+  revealEventInTreeView(event: Trace.Types.Events.Event|null): void {
+    if (this.tabbedPane.visibleView instanceof TimelineTreeView) {
+      this.tabbedPane.visibleView.highlightEventInTree(event);
+    }
+  }
+
   async #onTraceBoundsChange(event: TraceBounds.TraceBounds.StateChangedEvent): Promise<void> {
     if (event.updateType === 'MINIMAP_BOUNDS') {
       // If new minimap bounds are set, we might need to update the selected entry summary because
@@ -333,11 +339,9 @@ export class TimelineDetailsView extends UI.Widget.VBox {
       this.#relatedInsightChips.eventToRelatedInsightsMap = this.#eventToRelatedInsightsMap;
     }
 
-    // Special case: if Insights experiment is enabled (on by default in M131)
-    // and the user selects a layout shift or a layout shift cluster, render
-    // the new layout shift details component.
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS) &&
-        (Trace.Types.Events.isSyntheticLayoutShift(event) || Trace.Types.Events.isSyntheticLayoutShiftCluster(event))) {
+    // Special case: if the user selects a layout shift or a layout shift cluster,
+    // render the new layout shift details component.
+    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);
@@ -475,14 +479,8 @@ export class TimelineDetailsView extends UI.Widget.VBox {
     const aggregatedStats = TimelineUIUtils.statsForTimeRange(this.#selectedEvents, startTime, endTime);
     const startOffset = startTime - minBoundsMilli;
     const endOffset = endTime - minBoundsMilli;
-
-    const contentHelper = new TimelineDetailsContentHelper(null, null);
-    contentHelper.addSection(i18nString(
-        UIStrings.rangeSS,
-        {PH1: i18n.TimeUtilities.millisToString(startOffset), PH2: i18n.TimeUtilities.millisToString(endOffset)}));
-    const pieChart = TimelineUIUtils.generatePieChart(aggregatedStats);
-    contentHelper.appendElementRow('', pieChart);
-    this.setContent(contentHelper.fragment);
+    const summaryDetails = TimelineUIUtils.generateSummaryDetails(aggregatedStats, startOffset, endOffset);
+    this.setContent(summaryDetails);
 
     // Find all recalculate style events data from range
     const isSelectorStatsEnabled =

package/front_end/panels/timeline/TimelineEventOverview.ts

@@ -162,7 +162,7 @@ export class TimelineEventOverviewCPUActivity extends TimelineEventOverview {
     // the PerformanceModel will be removed.
     super('cpu-activity', i18nString(UIStrings.cpu));
     this.#parsedTrace = parsedTrace;
-    this.backgroundCanvas = (this.element.createChild('canvas', 'fill background') as HTMLCanvasElement);
+    this.backgroundCanvas = this.element.createChild('canvas', 'fill background');
     this.#start = Trace.Helpers.Timing.traceWindowMilliSeconds(parsedTrace.Meta.traceBounds).min;
     this.#end = Trace.Helpers.Timing.traceWindowMilliSeconds(parsedTrace.Meta.traceBounds).max;
   }

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

@@ -27,12 +27,6 @@ describeWithEnvironment('TimelineFlameChartDataProvider', function() {
         ...parsedTrace.UserTimings.timestampEvents,
         ...parsedTrace.UserTimings.performanceMarks,
         ...parsedTrace.UserTimings.performanceMeasures,
-        ...parsedTrace.PageLoadMetrics.allMarkerEvents.toSorted((m1, m2) => {
-          // These get sorted based on the metric so we have to replicate
-          // that for this assertion.
-          return Timeline.TimingsTrackAppender.SORT_ORDER_PAGE_LOAD_MARKERS[m1.name] -
-              Timeline.TimingsTrackAppender.SORT_ORDER_PAGE_LOAD_MARKERS[m2.name];
-        }),
       ].sort((a, b) => a.ts - b.ts);
       assert.deepEqual(groupTreeEvents, allTimingEvents);
     });
@@ -46,7 +40,7 @@ describeWithEnvironment('TimelineFlameChartDataProvider', function() {
         assert.fail('Could not find Timings track flame chart group');
       }
       const groupTreeEvents = dataProvider.groupTreeEvents(timingsTrackGroup);
-      assert.strictEqual(groupTreeEvents?.length, 12);
+      assert.strictEqual(groupTreeEvents?.length, 6);
       const allEventsAreSync = groupTreeEvents?.every(event => !Trace.Types.Events.isPhaseAsync(event.ph));
       assert.isTrue(allEventsAreSync);
     });
@@ -176,6 +170,7 @@ describeWithEnvironment('TimelineFlameChartDataProvider', function() {
           'https://unpkg.com/react@18.2.0/umd/react.development.js' as Platform.DevToolsPath.UrlString;
       // Clear the data provider cache and add the React script to the ignore list.
       dataProvider.reset();
+      dataProvider.setModel(parsedTrace);
       ignoreListManager.ignoreListURL(SCRIPT_TO_IGNORE);
 
       const eventCountAfterIgnoreList = dataProvider.timelineData().entryStartTimes.length;
@@ -185,6 +180,7 @@ describeWithEnvironment('TimelineFlameChartDataProvider', function() {
 
       // Clear the data provider cache and unignore the script again
       dataProvider.reset();
+      dataProvider.setModel(parsedTrace);
       ignoreListManager.unIgnoreListURL(SCRIPT_TO_IGNORE);
       // Ensure that now we have un-ignored the URL that we get the full set of events again.
       assert.strictEqual(dataProvider.timelineData().entryStartTimes.length, eventCountBeforeIgnoreList);
@@ -214,7 +210,7 @@ describeWithEnvironment('TimelineFlameChartDataProvider', function() {
     const filter = new Timeline.TimelineFilters.TimelineRegExp(/Evaluate script/);
     const results = dataProvider.search(bounds, filter);
     assert.lengthOf(results, 12);
-    assert.deepEqual(results[0], {index: 153, startTimeMilli: 122411041.395, provider: 'main'});
+    assert.deepEqual(results[0], {index: 147, startTimeMilli: 122411041.395, provider: 'main'});
   });
 
   it('delete annotations associated with an event', async function() {