chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

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

@@ -725,47 +725,30 @@ describeWithEnvironment('EntriesFilter', function() {
       return Trace.Types.Events.isProfileCall(entry) && entry.callFrame.functionName === 'foo' && entry.dur === 233;
     });
 
-    const stack = new Timeline.EntriesFilter.EntriesFilter(parsedTrace.Renderer.entryToNode);
-    if (!stack) {
+    const entriesFilter = new Timeline.EntriesFilter.EntriesFilter(parsedTrace.Renderer.entryToNode);
+    if (!entriesFilter) {
       throw new Error('EntriesFilter does not exist');
     }
+    const aiNodeTree = entriesFilter.getAIEventNodeTree(firstFooCallEntry);
+    assert.exists(aiNodeTree);
 
-    const traceEntryTree = stack.getTraceEntryTreeForAI(firstFooCallEntry);
+    const fooAiNode = Trace.Helpers.TreeHelpers.AINode.getSelectedNodeWithinTree(aiNodeTree);
+    assert.exists(fooAiNode);
 
-    assert.exists(traceEntryTree);
-
-    const selectedNode =
-        Trace.Helpers.TreeHelpers.TraceEntryNodeForAI.getSelectedNodeForTraceEntryTreeForAI(traceEntryTree);
-    assert.exists(selectedNode);
+    // Use the toJSON simplification for comparison.
+    const simpleFooNode = JSON.parse(JSON.stringify(fooAiNode));
+    assert.strictEqual(simpleFooNode.children.length, 1);
 
     // delete for smaller deepStrictEqual comparison
-    selectedNode.children = traceEntryTree.children = [];
-
-    const expectedTraceEntryTree = new Trace.Helpers.TreeHelpers.TraceEntryNodeForAI(
-        'RunTask',
-        Trace.Types.Timing.MilliSeconds(336772948.813),
-        Trace.Types.Timing.MilliSeconds(4.614),
-        undefined,
-        Trace.Types.Timing.MilliSeconds(0.162),
-    );
-    expectedTraceEntryTree.id = 368 as Trace.Helpers.TreeHelpers.TraceEntryNodeId;
-    expectedTraceEntryTree.children = [];
-    assert.deepStrictEqual(traceEntryTree, expectedTraceEntryTree);
-
-    const expectedselectedNode = new Trace.Helpers.TreeHelpers.TraceEntryNodeForAI(
-        'ProfileCall',
-        Trace.Types.Timing.MilliSeconds(336772953.044),
-        Trace.Types.Timing.MilliSeconds(0.233),
-        undefined,
-        Trace.Types.Timing.MilliSeconds(0.162),
-    );
-    expectedselectedNode.id = 408 as Trace.Helpers.TreeHelpers.TraceEntryNodeId;
-    expectedselectedNode.column = 12;
-    expectedselectedNode.function = 'foo';
-    expectedselectedNode.line = 8;
-    expectedselectedNode.selected = true;
-    expectedselectedNode.domain = 'file://';
-    expectedselectedNode.children = [];
-    assert.deepStrictEqual(selectedNode, expectedselectedNode);
+    simpleFooNode.children = [];
+
+    assert.deepStrictEqual(simpleFooNode, {
+      dur: 0.2,
+      name: 'foo',
+      selected: true,
+      self: 0.2,
+      url: 'file:///usr/local/google/home/alinavarkki/stack/recursion.html',
+      children: [],
+    });
   });
 });

package/front_end/panels/timeline/EntriesFilter.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 import * as Platform from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 
@@ -80,13 +81,14 @@ export class EntriesFilter {
    * Returns the trace entry tree for the specified event, simplified for input to AI Assistance.
    * The tree is rooted at the top-level task that contains the event, with the node for specified event marked as selected.
    */
-  getTraceEntryTreeForAI(entry: Trace.Types.Events.Event): Trace.Helpers.TreeHelpers.TraceEntryNodeForAI|null {
-    const entryNode = this.#entryToNode.get(entry);
-    if (!entryNode) {
+  getAIEventNodeTree(entry: Trace.Types.Events.Event): Trace.Helpers.TreeHelpers.AINode|null {
+    const node = this.#entryToNode.get(entry);
+    if (!node) {
       return null;
     }
 
-    return Trace.Helpers.TreeHelpers.TraceEntryNodeForAI.fromSelectedEntryNode(entryNode);
+    return Trace.Helpers.TreeHelpers.AINode.fromEntryNode(
+        node, Root.Runtime.experiments.isEnabled('timeline-show-all-events') ? () => true : entryIsVisibleInTimeline);
   }
 
   /**

package/front_end/panels/timeline/EventsTimelineTreeView.ts

@@ -10,12 +10,12 @@ 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 = {
   /**
@@ -59,8 +59,8 @@ export class EventsTimelineTreeView extends TimelineTreeView {
 
   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);
     }
   }
 
@@ -177,15 +177,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 +199,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/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/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();

package/front_end/panels/timeline/TimelineEventOverview.ts

@@ -37,7 +37,7 @@ import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.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 * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
@@ -147,7 +147,7 @@ export class TimelineEventOverviewNetwork extends TimelineEventOverview {
   }
 }
 
-const categoryToIndex = new WeakMap<Components.EntryStyles.TimelineCategory, number>();
+const categoryToIndex = new WeakMap<Utils.EntryStyles.TimelineCategory, number>();
 
 export class TimelineEventOverviewCPUActivity extends TimelineEventOverview {
   private backgroundCanvas: HTMLCanvasElement;
@@ -168,16 +168,16 @@ export class TimelineEventOverviewCPUActivity extends TimelineEventOverview {
     this.#end = Trace.Helpers.Timing.traceWindowMilliSeconds(parsedTrace.Meta.traceBounds).max;
   }
 
-  #entryCategory(entry: Trace.Types.Events.Event): Components.EntryStyles.EventCategory|undefined {
+  #entryCategory(entry: Trace.Types.Events.Event): Utils.EntryStyles.EventCategory|undefined {
     // Special case: in CPU Profiles we get a lot of ProfileCalls that
     // represent Idle time. We typically represent ProfileCalls in the
     // Scripting Category, but if they represent idle time, we do not want
     // that.
     if (Trace.Types.Events.isProfileCall(entry) && entry.callFrame.functionName === '(idle)') {
-      return Components.EntryStyles.EventCategory.IDLE;
+      return Utils.EntryStyles.EventCategory.IDLE;
     }
-    const eventStyle = Components.EntryStyles.getEventStyle(entry.name as Trace.Types.Events.Name)?.category ||
-        Components.EntryStyles.getCategoryStyles().other;
+    const eventStyle = Utils.EntryStyles.getEventStyle(entry.name as Trace.Types.Events.Name)?.category ||
+        Utils.EntryStyles.getCategoryStyles().other;
     const categoryName = eventStyle.name;
     return categoryName;
   }
@@ -197,11 +197,11 @@ export class TimelineEventOverviewCPUActivity extends TimelineEventOverview {
     const timeRange = this.#end - this.#start;
     const scale = width / timeRange;
     const quantTime = quantSizePx / scale;
-    const categories = Components.EntryStyles.getCategoryStyles();
-    const categoryOrder = Components.EntryStyles.getTimelineMainEventCategories();
-    const otherIndex = categoryOrder.indexOf(Components.EntryStyles.EventCategory.OTHER);
+    const categories = Utils.EntryStyles.getCategoryStyles();
+    const categoryOrder = Utils.EntryStyles.getTimelineMainEventCategories();
+    const otherIndex = categoryOrder.indexOf(Utils.EntryStyles.EventCategory.OTHER);
     const idleIndex = 0;
-    console.assert(idleIndex === categoryOrder.indexOf(Components.EntryStyles.EventCategory.IDLE));
+    console.assert(idleIndex === categoryOrder.indexOf(Utils.EntryStyles.EventCategory.IDLE));
     for (let i = 0; i < categoryOrder.length; ++i) {
       categoryToIndex.set(categories[categoryOrder[i]], i);
     }