chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/front_end/panels/timeline/EventsTimelineTreeView.ts

@@ -4,18 +4,17 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import type * as TimelineModel from '../../models/timeline_model/timeline_model.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import * as Components from './components/components.js';
 import {Category, IsLong} from './TimelineFilters.js';
 import type {TimelineModeViewDelegate} from './TimelinePanel.js';
-import {TimelineSelection} from './TimelineSelection.js';
+import {selectionIsEvent, type TimelineSelection} from './TimelineSelection.js';
 import {TimelineTreeView} from './TimelineTreeView.js';
 import {TimelineUIUtils} from './TimelineUIUtils.js';
+import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
@@ -41,7 +40,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class EventsTimelineTreeView extends TimelineTreeView {
   private readonly filtersControl: Filters;
   private readonly delegate: TimelineModeViewDelegate;
-  private currentTree!: TimelineModel.TimelineProfileTree.Node;
+  private currentTree!: Trace.Extras.TraceTree.Node;
   constructor(delegate: TimelineModeViewDelegate) {
     super();
     this.element.setAttribute('jslog', `${VisualLogging.pane('event-log').track({resize: true})}`);
@@ -53,18 +52,18 @@ export class EventsTimelineTreeView extends TimelineTreeView {
     this.splitWidget.showBoth();
   }
 
-  override filters(): TimelineModel.TimelineModelFilter.TimelineModelFilter[] {
+  override filters(): Trace.Extras.TraceFilter.TraceFilter[] {
     return [...super.filters(), ...this.filtersControl.filters()];
   }
 
   override updateContents(selection: TimelineSelection): void {
     super.updateContents(selection);
-    if (TimelineSelection.isTraceEventSelection(selection.object)) {
-      this.selectEvent(selection.object, true);
+    if (selectionIsEvent(selection)) {
+      this.selectEvent(selection.event, true);
     }
   }
 
-  override buildTree(): TimelineModel.TimelineProfileTree.Node {
+  override buildTree(): Trace.Extras.TraceTree.Node {
     this.currentTree = this.buildTopDownTree(true, null);
     return this.currentTree;
   }
@@ -78,7 +77,7 @@ export class EventsTimelineTreeView extends TimelineTreeView {
     }
   }
 
-  private findNodeWithEvent(event: Trace.Types.Events.Event): TimelineModel.TimelineProfileTree.Node|null {
+  private findNodeWithEvent(event: Trace.Types.Events.Event): Trace.Extras.TraceTree.Node|null {
     if (event.name === Trace.Types.Events.Name.RUN_TASK) {
       // No node is ever created for the top level RunTask event, so
       // bail out preemptively
@@ -132,7 +131,7 @@ export class EventsTimelineTreeView extends TimelineTreeView {
     this.filtersControl.populateToolbar(toolbar);
   }
 
-  override showDetailsForNode(node: TimelineModel.TimelineProfileTree.Node): boolean {
+  override showDetailsForNode(node: Trace.Extras.TraceTree.Node): boolean {
     const parsedTrace = this.parsedTrace();
     if (!parsedTrace) {
       return false;
@@ -146,7 +145,7 @@ export class EventsTimelineTreeView extends TimelineTreeView {
     return true;
   }
 
-  override onHover(node: TimelineModel.TimelineProfileTree.Node|null): void {
+  override onHover(node: Trace.Extras.TraceTree.Node|null): void {
     this.delegate.highlightEvent(node && node.event);
   }
 }
@@ -162,7 +161,7 @@ export class Filters extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     this.filtersInternal = [this.categoryFilter, this.durationFilter];
   }
 
-  filters(): TimelineModel.TimelineModelFilter.TimelineModelFilter[] {
+  filters(): Trace.Extras.TraceFilter.TraceFilter[] {
     return this.filtersInternal;
   }
 
@@ -177,15 +176,15 @@ export class Filters extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     toolbar.appendToolbarItem(durationFilterUI);
 
     const categoryFiltersUI = new Map<string, UI.Toolbar.ToolbarCheckbox>();
-    const categories = Components.EntryStyles.getCategoryStyles();
+    const categories = Utils.EntryStyles.getCategoryStyles();
     for (const categoryName in categories) {
-      const category = categories[categoryName as Components.EntryStyles.EventCategory];
+      const category = categories[categoryName as Utils.EntryStyles.EventCategory];
       if (!category.visible) {
         continue;
       }
       const checkbox = new UI.Toolbar.ToolbarCheckbox(
           category.title, undefined,
-          categoriesFilterChanged.bind(this, categoryName as Components.EntryStyles.EventCategory), categoryName);
+          categoriesFilterChanged.bind(this, categoryName as Utils.EntryStyles.EventCategory), categoryName);
       checkbox.setChecked(true);
       checkbox.inputElement.style.backgroundColor = category.color;
       categoryFiltersUI.set(category.name, checkbox);
@@ -199,8 +198,8 @@ export class Filters extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
       this.notifyFiltersChanged();
     }
 
-    function categoriesFilterChanged(this: Filters, name: Components.EntryStyles.EventCategory): void {
-      const categories = Components.EntryStyles.getCategoryStyles();
+    function categoriesFilterChanged(this: Filters, name: Utils.EntryStyles.EventCategory): void {
+      const categories = Utils.EntryStyles.getCategoryStyles();
       const checkBox = categoryFiltersUI.get(name);
       categories[name].hidden = !checkBox || !checkBox.checked();
       this.notifyFiltersChanged();

package/front_end/panels/timeline/InteractionsTrackAppender.ts

@@ -15,6 +15,7 @@ import {
   VisualLoggingTrackName,
 } from './CompatibilityTracksAppender.js';
 import * as Components from './components/components.js';
+import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
@@ -138,7 +139,7 @@ export class InteractionsTrackAppender implements TrackAppender {
    * Gets the color an event added by this appender should be rendered with.
    */
   colorForEvent(event: Trace.Types.Events.Event): string {
-    let idForColorGeneration = Components.EntryName.nameForEntry(event, this.#parsedTrace);
+    let idForColorGeneration = Utils.EntryName.nameForEntry(event, this.#parsedTrace);
     if (Trace.Types.Events.isSyntheticInteraction(event)) {
       // Append the ID so that we vary the colours, ensuring that two events of
       // the same type are coloured differently.

package/front_end/panels/timeline/LayoutShiftsTrackAppender.ts

@@ -175,12 +175,12 @@ export class LayoutShiftsTrackAppender implements TrackAppender {
       // 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) => {
+        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 = this.colorForEvent(event);
+          context.fillStyle = transformColor(this.colorForEvent(event));
           context.fillRect(x, y, barWidth - 0.5, levelHeight - 1);
           return {
             x,
@@ -202,7 +202,7 @@ export class LayoutShiftsTrackAppender implements TrackAppender {
       // A LS score of ~0 will create a diamond of minimum size (exactly 0 should not happen in practice)
       const bufferScale = 1 - Math.min(score / 0.10, 1);
 
-      return (context, x, y, _width, levelHeight) => {
+      return (context, x, y, _width, levelHeight, _, transformColor) => {
         // levelHeight is 17px, so this math translates to a minimum diamond size of 5.6px tall.
         const maxBuffer = levelHeight / 3;
         const buffer = bufferScale * maxBuffer;
@@ -216,7 +216,7 @@ export class LayoutShiftsTrackAppender implements TrackAppender {
         context.lineTo(x, y + levelHeight - buffer);
         context.lineTo(x - halfSize + buffer, y + halfSize);
         context.closePath();
-        context.fillStyle = this.colorForEvent(event);
+        context.fillStyle = transformColor(this.colorForEvent(event));
 
         context.fill();
         context.restore();
@@ -227,10 +227,10 @@ export class LayoutShiftsTrackAppender implements TrackAppender {
       };
     }
     if (Trace.Types.Events.isSyntheticLayoutShiftCluster(event)) {
-      return (context, x, y, width, levelHeight) => {
+      return (context, x, y, width, levelHeight, _, transformColor) => {
         const barHeight = levelHeight * 0.2;
         const barY = y + (levelHeight - barHeight) / 2 + 0.5;
-        context.fillStyle = this.colorForEvent(event);
+        context.fillStyle = transformColor(this.colorForEvent(event));
         context.fillRect(x, barY, width - 0.5, barHeight - 1);
         return {x, width, z: -1};
       };

package/front_end/panels/timeline/NetworkTrackAppender.ts

@@ -99,16 +99,9 @@ export class NetworkTrackAppender implements TrackAppender {
       useFirstLineForOverview: false,
       useDecoratorsForOverview: true,
     });
-    const legends: PerfUI.FlameChart.Legend[] = [];
-    for (const category of Object.values(Components.Utils.NetworkCategory)) {
-      legends.push({
-        color: Components.Utils.colorForNetworkCategory(category),
-        category,
-      });
-    }
     this.#group = buildTrackHeader(
         VisualLoggingTrackName.NETWORK, 0, i18nString(UIStrings.network), style, /* selectable= */ true, expanded,
-        /* showStackContextMenu= */ false, legends);
+        /* showStackContextMenu= */ false);
     this.#flameChartData.groups.push(this.#group);
   }
 

package/front_end/panels/timeline/README.md

@@ -100,7 +100,7 @@ To remove one or some overlays, check out the `remove()` or `removeOverlaysOfTyp
 
 ### Creating a new overlay
 
-To create a new overlay, first define its type. This is done as an interface, and must contain a `type` field.
+To create a new overlay, add it in the `OverlaysImpl.ts` file, first define its type. This is done as an interface, and must contain a `type` field.
 
 All other fields are completely custom and depend on the specifics of the overlay.
 
@@ -115,6 +115,7 @@ export interface EntrySelected {
 ```
 
 Once you have done this, add the interface to the union type `TimelineOverlay`. This will likely trigger some TypeScript errors because there are some places in the code where we check we have exhaustively dealt with every possible overlay type.
+Also if you want to make this overlay a singleton, add the interface to the union type `SingletonOverlay`.
 
 When you create an overlay by default it will be created as a `div` with a class, and no contents. Sometimes this is all you need (for example, the `ENTRY_SELECTED` outline has no other HTML), but if you need more you can tell the Overlays class what DOM to create for your overlay. To do this, modify the `#createElementForNewOverlay` method. You will see examples there of how we use custom elements to build out overlays.
 

package/front_end/panels/timeline/ThreadAppender.ts

@@ -24,7 +24,6 @@ import {
   type TrackAppenderName,
   VisualLoggingTrackName,
 } from './CompatibilityTracksAppender.js';
-import * as Components from './components/components.js';
 import * as ModificationsManager from './ModificationsManager.js';
 import * as Utils from './utils/utils.js';
 
@@ -552,19 +551,19 @@ export class ThreadAppender implements TrackAppender {
 
     if (Trace.Types.Events.isProfileCall(event)) {
       if (event.callFrame.functionName === '(idle)') {
-        return Components.EntryStyles.getCategoryStyles().idle.getComputedColorValue();
+        return Utils.EntryStyles.getCategoryStyles().idle.getComputedColorValue();
       }
       if (event.callFrame.scriptId === '0') {
         // If we can not match this frame to a script, return the
         // generic "scripting" color.
-        return Components.EntryStyles.getCategoryStyles().scripting.getComputedColorValue();
+        return Utils.EntryStyles.getCategoryStyles().scripting.getComputedColorValue();
       }
       // Otherwise, return a color created based on its URL.
       return this.#colorGenerator.colorForID(event.callFrame.url);
     }
     const defaultColor =
-        Components.EntryStyles.getEventStyle(event.name as Trace.Types.Events.Name)?.category.getComputedColorValue();
-    return defaultColor || Components.EntryStyles.getCategoryStyles().other.getComputedColorValue();
+        Utils.EntryStyles.getEventStyle(event.name as Trace.Types.Events.Name)?.category.getComputedColorValue();
+    return defaultColor || Utils.EntryStyles.getCategoryStyles().other.getComputedColorValue();
   }
 
   /**
@@ -574,7 +573,7 @@ export class ThreadAppender implements TrackAppender {
     if (Utils.IgnoreList.isIgnoreListedEntry(entry)) {
       return i18nString(UIStrings.onIgnoreList);
     }
-    return Components.EntryName.nameForEntry(entry, this.#parsedTrace);
+    return Utils.EntryName.nameForEntry(entry, this.#parsedTrace);
   }
 
   /**

package/front_end/panels/timeline/TimelineController.ts

@@ -8,7 +8,6 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Extensions from '../../models/extensions/extensions.js';
 import * as LiveMetrics from '../../models/live-metrics/live-metrics.js';
-import type * as TimelineModel from '../../models/timeline_model/timeline_model.js';
 import * as Trace from '../../models/trace/trace.js';
 
 const UIStrings = {
@@ -144,11 +143,23 @@ export class TimelineController implements Trace.TracingManager.TracingManagerCl
     if (this.tracingManager) {
       this.tracingManager.stop();
     }
+    // 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
+    // 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);
 
     this.client.loadingStarted();
     await this.waitForTracingToStop();
     await this.allSourcesFinished();
 
+    // Now we re-enable throttling again to maintain the setting being persistent.
+    throttlingManager.setCPUThrottlingRate(rateDuringRecording);
+
     await LiveMetrics.LiveMetrics.instance().enable();
   }
 
@@ -228,9 +239,8 @@ export interface Client {
   processingStarted(): void;
   loadingProgress(progress?: number): void;
   loadingComplete(
-      collectedEvents: Trace.Types.Events.Event[],
-      exclusiveFilter: TimelineModel.TimelineModelFilter.TimelineModelFilter|null, isCpuProfile: boolean,
-      recordingStartTime: number|null, metadata: Trace.Types.File.MetaData|null): Promise<void>;
+      collectedEvents: Trace.Types.Events.Event[], exclusiveFilter: Trace.Extras.TraceFilter.TraceFilter|null,
+      isCpuProfile: boolean, recordingStartTime: number|null, metadata: Trace.Types.File.MetaData|null): Promise<void>;
   loadingCompleteForTest(): void;
 }
 export interface RecordingOptions {

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

@@ -2,7 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Trace from '../../models/trace/trace.js';
+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';
 import {TraceLoader} from '../../testing/TraceLoader.js';
 
@@ -18,20 +20,9 @@ class MockViewDelegate implements Timeline.TimelinePanel.TimelineModeViewDelegat
   element = document.createElement('div');
 }
 
-function getRowDataForNetworkDetailsElement(details: ShadowRoot) {
-  return Array.from(details.querySelectorAll<HTMLDivElement>('.network-request-details-row')).map(row => {
-    const title = row.querySelector<HTMLDivElement>('.title')?.innerText;
-    // The innerText in here will contain a `\n` and a few space for each child <div> tag, so just remove these empty
-    // characters for easier test.
-    const regExpForLineBreakAndFollowingSpaces = /\n[\s]+/g;
-    const value =
-        row.querySelector<HTMLDivElement>('.value')?.innerText.replaceAll(regExpForLineBreakAndFollowingSpaces, '');
-    return {title, value};
-  });
-}
-
 describeWithEnvironment('TimelineDetailsView', function() {
   const mockViewDelegate = new MockViewDelegate();
+
   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);
@@ -43,7 +34,7 @@ describeWithEnvironment('TimelineDetailsView', function() {
     if (!cssRequest) {
       throw new Error('Could not find expected network request.');
     }
-    const selection = Timeline.TimelineSelection.TimelineSelection.fromTraceEvent(cssRequest);
+    const selection = Timeline.TimelineSelection.selectionFromEvent(cssRequest);
 
     await detailsView.setModel(
         {parsedTrace, selectedEvents: null, traceInsightsSets: insights, eventToRelatedInsightsMap: null});
@@ -52,34 +43,86 @@ describeWithEnvironment('TimelineDetailsView', function() {
     const detailsContentElement = detailsView.getDetailsContentElementForTest();
     // NetworkRequestDetails and RelatedInsightsChips nodes.
     assert.strictEqual(detailsContentElement.childNodes.length, 2);
-    const detailsElementShadowRoot = (detailsContentElement.childNodes[0] as HTMLElement).shadowRoot;
-    if (!detailsElementShadowRoot) {
-      throw new Error('Could not find expected element to test.');
-    }
-    const rowData = getRowDataForNetworkDetailsElement(detailsElementShadowRoot);
-
-    const durationInnerText = '12.58 ms' +
-        'Queuing and connecting1.83 ms' +
-        'Request sent and waiting4.80 ms' +
-        'Content downloading1.66 ms' +
-        'Waiting on main thread4.29 ms';
-    assert.deepEqual(
-        rowData,
-        [
-          {title: 'URL', value: 'chromedevtools.github.io/performance-stories/lcp-web-font/app.css'},
-          {title: 'Request method', value: 'GET'},
-          {title: 'Initial priority', value: 'Highest'},
-          {title: 'Priority', value: 'Highest'},
-          {title: 'MIME type', value: 'text/css'},
-          {title: 'Encoded data', value: ' (from cache)'},
-          {title: 'Decoded body', value: '96 B'},
-          {
-            title: 'Initiated by',
-            value: 'chromedevtools.github.io/performance-stories/lcp-web-font/index.html',
-          },
-          {title: 'From cache', value: 'Yes'},
-          {title: 'Duration', value: durationInnerText},
-        ],
+  });
+
+  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 frame = parsedTrace.Frames.frames.at(0);
+    assert.isOk(frame);
+    const selection = Timeline.TimelineSelection.selectionFromEvent(frame);
+    await detailsView.setSelection(selection);
+    await doubleRaf();  // to let the image be fetched + rendered.
+    const detailsContentElement = detailsView.getDetailsContentElementForTest();
+    const frameImg = detailsContentElement.querySelector('.timeline-filmstrip-preview img');
+    assert.instanceOf(frameImg, HTMLImageElement);
+    assert.isDefined(frameImg.src);
+
+    const duration = detailsContentElement.querySelector<HTMLElement>('[data-row-title="Duration"]');
+    assert.isOk(duration);
+    assert.strictEqual(duration.innerText, 'Duration37.85 ms (at 109.82 ms)');
+  });
+
+  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(
+        {parsedTrace, selectedEvents: null, traceInsightsSets: null, eventToRelatedInsightsMap: null});
+
+    const layoutShift = parsedTrace.LayoutShifts.clusters.at(0)?.events.at(0);
+    assert.isOk(layoutShift);
+    const selection = Timeline.TimelineSelection.selectionFromEvent(layoutShift);
+    await detailsView.setSelection(selection);
+    const detailsContentElement = detailsView.getDetailsContentElementForTest();
+    // Assert that the right component is rendered. This component has its own
+    // tests for its contents so no need to duplicate those here.
+    const layoutShiftDetails = detailsContentElement.querySelector('devtools-performance-layout-shift-details');
+    assert.isNotNull(layoutShiftDetails);
+  });
+
+  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(
+        {parsedTrace, selectedEvents: null, traceInsightsSets: null, eventToRelatedInsightsMap: null});
+
+    const layoutShiftCluster = parsedTrace.LayoutShifts.clusters.at(0);
+    assert.isOk(layoutShiftCluster);
+    const selection = Timeline.TimelineSelection.selectionFromEvent(layoutShiftCluster);
+    await detailsView.setSelection(selection);
+    const detailsContentElement = detailsView.getDetailsContentElementForTest();
+    // Assert that the right component is rendered. This component has its own
+    // tests for its contents so no need to duplicate those here.
+    const layoutShiftDetails = detailsContentElement.querySelector('devtools-performance-layout-shift-details');
+    assert.isNotNull(layoutShiftDetails);
+  });
+
+  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);
+    await detailsView.setModel({
+      parsedTrace,
+      // We have to set selected events for the range selection UI to be drawn
+      // (without the set of events we can't generate the range stats)
+      selectedEvents: parsedTrace.Renderer.allTraceEntries,
+      traceInsightsSets: null,
+      eventToRelatedInsightsMap: null,
+    });
+    const bounds = Trace.Helpers.Timing.traceWindowMilliSeconds(parsedTrace.Meta.traceBounds);
+    const selection = Timeline.TimelineSelection.selectionFromRangeMilliSeconds(
+        bounds.min,
+        bounds.max,
     );
+    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');
   });
 });

package/front_end/panels/timeline/TimelineDetailsView.ts

@@ -20,7 +20,12 @@ import {targetForEvent} from './TargetForEvent.js';
 import {TimelineLayersView} from './TimelineLayersView.js';
 import {TimelinePaintProfilerView} from './TimelinePaintProfilerView.js';
 import type {TimelineModeViewDelegate} from './TimelinePanel.js';
-import {TimelineSelection} from './TimelineSelection.js';
+import {
+  selectionFromRangeMilliSeconds,
+  selectionIsEvent,
+  selectionIsRange,
+  type TimelineSelection,
+} from './TimelineSelection.js';
 import {TimelineSelectorStatsView} from './TimelineSelectorStatsView.js';
 import {BottomUpTimelineTreeView, CallTreeTimelineTreeView, type TimelineTreeView} from './TimelineTreeView.js';
 import {TimelineDetailsContentHelper, TimelineUIUtils} from './TimelineUIUtils.js';
@@ -219,7 +224,7 @@ export class TimelineDetailsView extends UI.Widget.VBox {
         return;
       }
       const visibleWindow = traceBoundsState.milli.timelineTraceWindow;
-      view.updateContents(this.selection || TimelineSelection.fromRange(visibleWindow.min, visibleWindow.max));
+      view.updateContents(this.selection || selectionFromRangeMilliSeconds(visibleWindow.min, visibleWindow.max));
     }
   }
 
@@ -290,6 +295,61 @@ export class TimelineDetailsView extends UI.Widget.VBox {
     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));
+    const target = SDK.TargetManager.TargetManager.instance().rootTarget();
+    if (frame.layerTree && target) {
+      const layerTreeForFrame = new TimelineModel.TracingLayerTree.TracingFrameLayerTree(target, frame.layerTree);
+      const layersView = this.layersView();
+      layersView.showLayerTree(layerTreeForFrame);
+      if (!this.tabbedPane.hasTab(Tab.LayerViewer)) {
+        this.appendTab(Tab.LayerViewer, i18nString(UIStrings.layers), layersView);
+      }
+    }
+  }
+
+  async #setSelectionForNetworkEvent(networkRequest: Trace.Types.Events.SyntheticNetworkRequest): Promise<void> {
+    if (!this.#parsedTrace) {
+      return;
+    }
+    const maybeTarget = targetForEvent(this.#parsedTrace, networkRequest);
+    await this.#networkRequestDetails.setData(this.#parsedTrace, networkRequest, maybeTarget);
+    this.#relatedInsightChips.activeEvent = networkRequest;
+    if (this.#eventToRelatedInsightsMap) {
+      this.#relatedInsightChips.eventToRelatedInsightsMap = this.#eventToRelatedInsightsMap;
+    }
+
+    this.setContent(this.#networkRequestDetails);
+  }
+
+  async #setSelectionForTraceEvent(event: Trace.Types.Events.Event): Promise<void> {
+    if (!this.#parsedTrace) {
+      return;
+    }
+
+    this.#relatedInsightChips.activeEvent = event;
+    if (this.#eventToRelatedInsightsMap) {
+      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))) {
+      const isFreshRecording = Boolean(this.#parsedTrace && Tracker.instance().recordingIsFresh(this.#parsedTrace));
+      this.#layoutShiftDetails.setData(event, this.#traceInsightsSets, this.#parsedTrace, isFreshRecording);
+      this.setContent(this.#layoutShiftDetails);
+      return;
+    }
+
+    // Otherwise, build the generic trace event details UI.
+    const traceEventDetails =
+        await TimelineUIUtils.buildTraceEventDetails(this.#parsedTrace, event, this.detailsLinkifier, true);
+    this.appendDetailsTabsForTraceEventAndShowDetails(event, traceEventDetails);
+  }
+
   async setSelection(selection: TimelineSelection|null): Promise<void> {
     if (!this.#parsedTrace) {
       // You can't make a selection if we have no trace data.
@@ -304,49 +364,18 @@ export class TimelineDetailsView extends UI.Widget.VBox {
       this.scheduleUpdateContentsFromWindow(/* forceImmediateUpdate */ true);
       return;
     }
-    const selectionObject = this.selection.object;
-    if (TimelineSelection.isSyntheticNetworkRequestDetailsEventSelection(selectionObject)) {
-      const networkRequest = selectionObject;
-      const maybeTarget = targetForEvent(this.#parsedTrace, networkRequest);
-      await this.#networkRequestDetails.setData(this.#parsedTrace, networkRequest, maybeTarget);
-      this.#relatedInsightChips.activeEvent = networkRequest;
-      if (this.#eventToRelatedInsightsMap) {
-        this.#relatedInsightChips.eventToRelatedInsightsMap = this.#eventToRelatedInsightsMap;
-      }
 
-      this.setContent(this.#networkRequestDetails);
-    } else if (TimelineSelection.isTraceEventSelection(selectionObject)) {
-      const event = selectionObject;
-      this.#relatedInsightChips.activeEvent = event;
-      if (this.#eventToRelatedInsightsMap) {
-        this.#relatedInsightChips.eventToRelatedInsightsMap = this.#eventToRelatedInsightsMap;
-      }
-      if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS) &&
-          (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);
+    if (selectionIsEvent(selection)) {
+      if (Trace.Types.Events.isSyntheticNetworkRequest(selection.event)) {
+        await this.#setSelectionForNetworkEvent(selection.event);
+      } else if (Trace.Types.Events.isLegacyTimelineFrame(selection.event)) {
+        this.#setSelectionForTimelineFrame(selection.event);
       } else {
-        const traceEventDetails =
-            await TimelineUIUtils.buildTraceEventDetails(this.#parsedTrace, event, this.detailsLinkifier, true);
-        this.appendDetailsTabsForTraceEventAndShowDetails(event, traceEventDetails);
-      }
-    } else if (TimelineSelection.isLegacyTimelineFrame(selectionObject)) {
-      const frame = selectionObject;
-      const matchedFilmStripFrame = this.#getFilmStripFrame(frame);
-      this.setContent(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);
-        const layersView = this.layersView();
-        layersView.showLayerTree(layerTreeForFrame);
-        if (!this.tabbedPane.hasTab(Tab.LayerViewer)) {
-          this.appendTab(Tab.LayerViewer, i18nString(UIStrings.layers), layersView);
-        }
+        await this.#setSelectionForTraceEvent(selection.event);
       }
-    } else if (TimelineSelection.isRangeSelection(selectionObject)) {
-      this.updateSelectedRangeStats(this.selection.startTime, this.selection.endTime);
+    } else if (selectionIsRange(selection)) {
+      const timings = Trace.Helpers.Timing.traceWindowMicroSecondsToMilliSeconds(selection.bounds);
+      this.updateSelectedRangeStats(timings.min, timings.max);
     }
 
     this.updateContents();