chrome-devtools-frontend 1.0.1473514 → 1.0.1510180

package/front_end/panels/timeline/TimelineController.ts

@@ -7,14 +7,16 @@ 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';
+import * as Tracing from '../../services/tracing/tracing.js';
+
+import * as RecordingMetadata from './RecordingMetadata.js';
 
 const UIStrings = {
   /**
-   *@description Text in Timeline Controller of the Performance panel indicating that the Performance Panel cannot
+   * @description Text in Timeline Controller of the Performance panel indicating that the Performance Panel cannot
    * record a performance trace because the type of target (where possible types are page, service worker and shared
    * worker) doesn't support it.
    */
@@ -22,10 +24,10 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineController.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export class TimelineController implements Trace.TracingManager.TracingManagerClient {
+export class TimelineController implements Tracing.TracingManager.TracingManagerClient {
   readonly primaryPageTarget: SDK.Target.Target;
   readonly rootTarget: SDK.Target.Target;
-  private tracingManager: Trace.TracingManager.TracingManager|null;
+  private tracingManager: Tracing.TracingManager.TracingManager|null;
   #collectedEvents: Trace.Types.Events.Event[] = [];
   #navigationUrls: string[] = [];
   #fieldData: CrUXManager.PageResult[]|null = null;
@@ -64,7 +66,7 @@ export class TimelineController implements Trace.TracingManager.TracingManagerCl
     this.rootTarget = rootTarget;
     // Ensure the tracing manager is the one for the Root Target, NOT the
     // primaryPageTarget, as that is the one we have to invoke tracing against.
-    this.tracingManager = rootTarget.model(Trace.TracingManager.TracingManager);
+    this.tracingManager = rootTarget.model(Tracing.TracingManager.TracingManager);
     this.client = client;
   }
 
@@ -99,6 +101,7 @@ export class TimelineController implements Trace.TracingManager.TracingManagerCl
       disabledByDefault('devtools.timeline'),
       disabledByDefault('devtools.v8-source-rundown-sources'),
       disabledByDefault('devtools.v8-source-rundown'),
+      disabledByDefault('layout_shift.debug'),
       // Looking for disabled-by-default-v8.compile? We disabled it: crbug.com/414330508.
       disabledByDefault('v8.inspector'),
       disabledByDefault('v8.cpu_profiler.hires'),
@@ -128,6 +131,8 @@ export class TimelineController implements Trace.TracingManager.TracingManagerCl
     }
     if (options.captureSelectorStats) {
       categoriesArray.push(disabledByDefault('blink.debug'));
+      // enable invalidation nodes
+      categoriesArray.push(disabledByDefault('devtools.timeline.invalidationTracking'));
     }
 
     await LiveMetrics.LiveMetrics.instance().disable();
@@ -209,18 +214,6 @@ export class TimelineController implements Trace.TracingManager.TracingManagerCl
     return await 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 await Trace.Extras.Metadata.forNewRecording(
-        false, this.#recordingStartTime ?? undefined, emulatedDeviceTitle, this.#fieldData ?? undefined);
-  }
-
   private async waitForTracingToStop(): Promise<void> {
     if (this.tracingManager) {
       await this.tracingCompletePromise?.promise;
@@ -274,7 +267,10 @@ export class TimelineController implements Trace.TracingManager.TracingManagerCl
     Extensions.ExtensionServer.ExtensionServer.instance().profilingStopped();
 
     this.client.processingStarted();
-    const metadata = await this.createMetadata();
+    const metadata = await RecordingMetadata.forTrace({
+      recordingStartTime: this.#recordingStartTime ?? undefined,
+      cruxFieldData: this.#fieldData ?? undefined,
+    });
     await this.client.loadingComplete(this.#collectedEvents, /* exclusiveFilter= */ null, metadata);
     this.client.loadingCompleteForTest();
     SDK.SourceMap.SourceMap.retainRawSourceMaps = false;

package/front_end/panels/timeline/TimelineDetailsView.ts

@@ -11,13 +11,14 @@ import * as Trace from '../../models/trace/trace.js';
 import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import * as TimelineComponents from './components/components.js';
 import {EventsTimelineTreeView} from './EventsTimelineTreeView.js';
-import {Tracker} from './FreshRecording.js';
 import {targetForEvent} from './TargetForEvent.js';
 import {ThirdPartyTreeViewWidget} from './ThirdPartyTreeView.js';
+import detailsViewStyles from './timelineDetailsView.css.js';
 import {TimelineLayersView} from './TimelineLayersView.js';
 import {TimelinePaintProfilerView} from './TimelinePaintProfilerView.js';
 import type {TimelineModeViewDelegate} from './TimelinePanel.js';
@@ -41,31 +42,31 @@ import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
-   *@description Text for the summary view
+   * @description Text for the summary view
    */
   summary: 'Summary',
   /**
-   *@description Text in Timeline Details View of the Performance panel
+   * @description Text in Timeline Details View of the Performance panel
    */
   bottomup: 'Bottom-up',
   /**
-   *@description Text in Timeline Details View of the Performance panel
+   * @description Text in Timeline Details View of the Performance panel
    */
   callTree: 'Call tree',
   /**
-   *@description Text in Timeline Details View of the Performance panel
+   * @description Text in Timeline Details View of the Performance panel
    */
   eventLog: 'Event log',
   /**
-   *@description Title of the paint profiler, old name of the performance pane
+   * @description Title of the paint profiler, old name of the performance pane
    */
   paintProfiler: 'Paint profiler',
   /**
-   *@description Title of the Layers tool
+   * @description Title of the Layers tool
    */
   layers: 'Layers',
   /**
-   *@description Title of the selector stats tab
+   * @description Title of the selector stats tab
    */
   selectorStats: 'Selector stats',
 } as const;
@@ -76,7 +77,7 @@ export class TimelineDetailsPane extends
   private readonly detailsLinkifier: Components.Linkifier.Linkifier;
   private tabbedPane: UI.TabbedPane.TabbedPane;
   private readonly defaultDetailsWidget: UI.Widget.VBox;
-  private defaultDetailsContentWidget: UI.Widget.VBox;
+  #summaryContent = new SummaryView();
   private rangeDetailViews: Map<string, TimelineTreeView>;
   #selectedEvents?: Trace.Types.Events.Event[]|null;
   private lazyPaintProfilerView?: TimelinePaintProfilerView|null;
@@ -87,18 +88,14 @@ export class TimelineDetailsPane extends
   private lazySelectorStatsView: TimelineSelectorStatsView|null;
   #parsedTrace: Trace.Handlers.Types.ParsedTrace|null = null;
   #traceInsightsSets: Trace.Insights.Types.TraceInsightSets|null = null;
-
   #eventToRelatedInsightsMap: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap|null = null;
-  #filmStrip: Trace.Extras.FilmStrip.Data|null = null;
-  #networkRequestDetails: TimelineComponents.NetworkRequestDetails.NetworkRequestDetails;
-  #layoutShiftDetails: TimelineComponents.LayoutShiftDetails.LayoutShiftDetails;
   #onTraceBoundsChangeBound = this.#onTraceBoundsChange.bind(this);
-  #relatedInsightChips = new TimelineComponents.RelatedInsightChips.RelatedInsightChips();
   #thirdPartyTree = new ThirdPartyTreeViewWidget();
   #entityMapper: Utils.EntityMapper.EntityMapper|null = null;
 
   constructor(delegate: TimelineModeViewDelegate) {
     super();
+    this.registerRequiredCSS(detailsViewStyles);
     this.element.classList.add('timeline-details');
 
     this.detailsLinkifier = new Components.Linkifier.Linkifier();
@@ -112,7 +109,8 @@ export class TimelineDetailsPane extends
     this.defaultDetailsWidget = new UI.Widget.VBox();
     this.defaultDetailsWidget.element.classList.add('timeline-details-view');
     this.defaultDetailsWidget.element.setAttribute('jslog', `${VisualLogging.pane('details').track({resize: true})}`);
-    this.defaultDetailsContentWidget = this.#createContentWidget();
+    this.#summaryContent.contentElement.classList.add('timeline-details-view-body');
+    this.#summaryContent.show(this.defaultDetailsWidget.contentElement);
     this.appendTab(Tab.Details, i18nString(UIStrings.summary), this.defaultDetailsWidget);
     this.setPreferredTab(Tab.Details);
 
@@ -164,11 +162,6 @@ export class TimelineDetailsPane extends
           TimelineTreeView.Events.TREE_ROW_CLICKED, {node: node.data.node, events: node.data.events ?? undefined});
     });
 
-    this.#networkRequestDetails =
-        new TimelineComponents.NetworkRequestDetails.NetworkRequestDetails(this.detailsLinkifier);
-
-    this.#layoutShiftDetails = new TimelineComponents.LayoutShiftDetails.LayoutShiftDetails();
-
     this.tabbedPane.addEventListener(UI.TabbedPane.Events.TabSelected, this.tabSelected, this);
 
     TraceBounds.TraceBounds.onChange(this.#onTraceBoundsChangeBound);
@@ -237,13 +230,6 @@ export class TimelineDetailsPane extends
     }
   }
 
-  #createContentWidget(): UI.Widget.VBox {
-    const defaultDetailsContentWidget = new UI.Widget.VBox();
-    defaultDetailsContentWidget.element.classList.add('timeline-details-view-body');
-    defaultDetailsContentWidget.show(this.defaultDetailsWidget.element);
-    return defaultDetailsContentWidget;
-  }
-
   private selectorStatsView(): TimelineSelectorStatsView {
     if (this.lazySelectorStatsView) {
       return this.lazySelectorStatsView;
@@ -256,7 +242,7 @@ export class TimelineDetailsPane extends
   }
 
   getDetailsContentElementForTest(): HTMLElement {
-    return this.defaultDetailsContentWidget.element;
+    return this.#summaryContent.contentElement;
   }
 
   revealEventInTreeView(event: Trace.Types.Events.Event|null): void {
@@ -298,27 +284,33 @@ export class TimelineDetailsPane extends
       this.#parsedTrace = data.parsedTrace;
     }
     if (data.parsedTrace) {
-      this.#filmStrip = Trace.Extras.FilmStrip.fromParsedTrace(data.parsedTrace);
+      this.#summaryContent.filmStrip = Trace.Extras.FilmStrip.fromParsedTrace(data.parsedTrace);
       this.#entityMapper = new Utils.EntityMapper.EntityMapper(data.parsedTrace);
     }
     this.#selectedEvents = data.selectedEvents;
     this.#traceInsightsSets = data.traceInsightsSets;
     this.#eventToRelatedInsightsMap = data.eventToRelatedInsightsMap;
-    if (data.eventToRelatedInsightsMap) {
-      this.#relatedInsightChips.eventToRelatedInsightsMap = data.eventToRelatedInsightsMap;
-    }
+    this.#summaryContent.eventToRelatedInsightsMap = this.#eventToRelatedInsightsMap;
+    this.#summaryContent.traceInsightsSets = this.#traceInsightsSets;
+    this.#summaryContent.parsedTrace = this.#parsedTrace;
+    this.#summaryContent.entityMapper = this.#entityMapper;
     this.tabbedPane.closeTabs([Tab.PaintProfiler, Tab.LayerViewer], false);
     for (const view of this.rangeDetailViews.values()) {
       view.setModelWithEvents(data.selectedEvents, data.parsedTrace, data.entityMapper);
     }
     // Set the 3p tree model.
     this.#thirdPartyTree.setModelWithEvents(data.selectedEvents, data.parsedTrace, data.entityMapper);
+    this.#summaryContent.requestUpdate();
     this.lazyPaintProfilerView = null;
     this.lazyLayersView = null;
     await this.setSelection(null);
   }
 
-  private setSummaryContent(node: Node): void {
+  /**
+   * Updates the UI shown in the Summary tab, and updates the UI to select the
+   * summary tab.
+   */
+  private async updateSummaryPane(): Promise<void> {
     const allTabs = this.tabbedPane.otherTabs(Tab.Details);
     for (let i = 0; i < allTabs.length; ++i) {
       if (!this.rangeDetailViews.has(allTabs[i])) {
@@ -326,13 +318,8 @@ export class TimelineDetailsPane extends
       }
     }
 
-    // Append relatedChips inside of the node being shown.
-    const chipParent = (node instanceof Element && node.shadowRoot || node);
-    chipParent.appendChild(this.#relatedInsightChips);
-
-    this.defaultDetailsContentWidget.detach();
-    this.defaultDetailsContentWidget = this.#createContentWidget();
-    this.defaultDetailsContentWidget.contentElement.append(node);
+    this.#summaryContent.requestUpdate();
+    await this.#summaryContent.updateComplete;
   }
 
   private updateContents(): void {
@@ -374,7 +361,7 @@ export class TimelineDetailsPane extends
    */
   private scheduleUpdateContentsFromWindow(forceImmediateUpdate = false): void {
     if (!this.#parsedTrace) {
-      this.setSummaryContent(UI.Fragment.html`<div/>`);
+      void this.updateSummaryPane();
       return;
     }
     if (forceImmediateUpdate) {
@@ -405,26 +392,7 @@ export class TimelineDetailsPane extends
     this.updateContents();
   }
 
-  #getFilmStripFrame(frame: Trace.Types.Events.LegacyTimelineFrame): Trace.Extras.FilmStrip.Frame|null {
-    if (!this.#filmStrip) {
-      return null;
-    }
-
-    const screenshotTime = (frame.idle ? frame.startTime : frame.endTime);
-    const filmStripFrame = Trace.Extras.FilmStrip.frameClosestToTimestamp(this.#filmStrip, screenshotTime);
-    if (!filmStripFrame) {
-      return null;
-    }
-
-    const frameTimeMilliSeconds = Trace.Helpers.Timing.microToMilli(filmStripFrame.screenshotEvent.ts);
-    const frameEndTimeMilliSeconds = Trace.Helpers.Timing.microToMilli(frame.endTime);
-    return frameTimeMilliSeconds - frameEndTimeMilliSeconds < 10 ? filmStripFrame : null;
-  }
-
-  #setSelectionForTimelineFrame(frame: Trace.Types.Events.LegacyTimelineFrame): void {
-    const matchedFilmStripFrame = this.#getFilmStripFrame(frame);
-    this.setSummaryContent(
-        TimelineUIUtils.generateDetailsContentForFrame(frame, this.#filmStrip, matchedFilmStripFrame));
+  #addLayerTreeForSelectedFrame(frame: Trace.Types.Events.LegacyTimelineFrame): void {
     const target = SDK.TargetManager.TargetManager.instance().rootTarget();
     if (frame.layerTree && target) {
       const layerTreeForFrame = new TracingFrameLayerTree(target, frame.layerTree);
@@ -436,43 +404,18 @@ export class TimelineDetailsPane extends
     }
   }
 
-  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.#entityMapper);
-    this.#relatedInsightChips.activeEvent = networkRequest;
-    if (this.#eventToRelatedInsightsMap) {
-      this.#relatedInsightChips.eventToRelatedInsightsMap = this.#eventToRelatedInsightsMap;
-    }
-
-    this.setSummaryContent(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 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.setSummaryContent(this.#layoutShiftDetails);
-      return;
-    }
-
-    // Otherwise, build the generic trace event details UI.
-    const traceEventDetails = await TimelineUIUtils.buildTraceEventDetails(
-        this.#parsedTrace, event, this.detailsLinkifier, true, this.#entityMapper);
-    this.appendDetailsTabsForTraceEventAndShowDetails(event, traceEventDetails);
+    this.#summaryContent.selectedRange = null;
+    this.#summaryContent.selectedEvent = event;
+    this.#summaryContent.eventToRelatedInsightsMap = this.#eventToRelatedInsightsMap;
+    this.#summaryContent.linkifier = this.detailsLinkifier;
+    this.#summaryContent.target = targetForEvent(this.#parsedTrace, event);
+    await this.updateSummaryPane();
+    this.appendExtraDetailsTabsForTraceEvent(event);
   }
 
   async setSelection(selection: TimelineSelection|null): Promise<void> {
@@ -482,8 +425,8 @@ export class TimelineDetailsPane extends
     }
     this.detailsLinkifier.reset();
     this.selection = selection;
-    this.#relatedInsightChips.activeEvent = null;
     if (!this.selection) {
+      this.#summaryContent.selectedEvent = null;
       // Update instantly using forceImmediateUpdate, since we are only
       // making a single call and don't need to debounce.
       this.scheduleUpdateContentsFromWindow(/* forceImmediateUpdate */ true);
@@ -494,13 +437,11 @@ export class TimelineDetailsPane extends
       // Cancel any pending debounced range stats update
       this.updateContentsScheduled = false;
 
-      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 {
-        await this.#setSelectionForTraceEvent(selection.event);
+      if (Trace.Types.Events.isLegacyTimelineFrame(selection.event)) {
+        this.#addLayerTreeForSelectedFrame(selection.event);
       }
+
+      await this.#setSelectionForTraceEvent(selection.event);
     } else if (selectionIsRange(selection)) {
       const timings = Trace.Helpers.Timing.traceWindowMicroSecondsToMilliSeconds(selection.bounds);
       this.updateSelectedRangeStats(timings.min, timings.max);
@@ -562,8 +503,12 @@ export class TimelineDetailsPane extends
     }
   }
 
-  private appendDetailsTabsForTraceEventAndShowDetails(event: Trace.Types.Events.Event, content: Node): void {
-    this.setSummaryContent(content);
+  /**
+   * When some events are selected, we show extra tabs. E.g. paint events get
+   * the Paint Profiler, and layout events might get CSS Selector Stats if
+   * they are available in the trace.
+   */
+  private appendExtraDetailsTabsForTraceEvent(event: Trace.Types.Events.Event): void {
     if (Trace.Types.Events.isPaint(event) || Trace.Types.Events.isRasterTask(event)) {
       this.showEventInPaintProfiler(event);
     }
@@ -598,16 +543,24 @@ export class TimelineDetailsPane extends
       return;
     }
 
-    const minBoundsMilli = Trace.Helpers.Timing.traceWindowMilliSeconds(this.#parsedTrace.Meta.traceBounds).min;
-    const aggregatedStats = TimelineUIUtils.statsForTimeRange(this.#selectedEvents, startTime, endTime);
-    const startOffset = startTime - minBoundsMilli;
-    const endOffset = endTime - minBoundsMilli;
-    const summaryDetailElem = TimelineUIUtils.generateSummaryDetails(
-        aggregatedStats, startOffset, endOffset, this.#selectedEvents, this.#thirdPartyTree);
-
-    this.#thirdPartyTree.updateContents(this.selection || selectionFromRangeMilliSeconds(startTime, endTime));
-
-    this.setSummaryContent(summaryDetailElem);
+    this.#summaryContent.selectedEvent = null;
+    this.#summaryContent.selectedRange = {
+      events: this.#selectedEvents,
+      thirdPartyTree: this.#thirdPartyTree,
+      startTime,
+      endTime,
+    };
+
+    // This is a bit of a hack as we are midway through migrating this to
+    // the new UI Eng vision.
+    // The 3P tree view will only bother to update its DOM if it has a
+    // parentElement, so we trigger the rendering of the summary content
+    // (so the 3P Tree View is attached to the DOM) and then we tell it to
+    // update.
+    // This will be fixed once we migrate this component fully to the new vision (b/407751379)
+    void this.updateSummaryPane().then(() => {
+      this.#thirdPartyTree.updateContents(this.selection || selectionFromRangeMilliSeconds(startTime, endTime));
+    });
 
     // Find all recalculate style events data from range
     const isSelectorStatsEnabled =
@@ -636,3 +589,173 @@ export enum Tab {
   SelectorStats = 'selector-stats',
   /* eslint-enable @typescript-eslint/naming-convention */
 }
+
+interface SelectedRange {
+  startTime: Trace.Types.Timing.Milli;
+  endTime: Trace.Types.Timing.Milli;
+  events: Trace.Types.Events.Event[];
+  thirdPartyTree: ThirdPartyTreeViewWidget;
+}
+
+interface SummaryViewInput {
+  selectedEvent: Trace.Types.Events.Event|null;
+  eventToRelatedInsightsMap: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap|null;
+  parsedTrace: Trace.Handlers.Types.ParsedTrace|null;
+  traceInsightsSets: Trace.Insights.Types.TraceInsightSets|null;
+  entityMapper: Utils.EntityMapper.EntityMapper|null;
+  target: SDK.Target.Target|null;
+  linkifier: Components.Linkifier.Linkifier|null;
+  filmStrip: Trace.Extras.FilmStrip.Data|null;
+  selectedRange: SelectedRange|null;
+}
+
+type View = (input: SummaryViewInput, output: object, target: HTMLElement) => void;
+const SUMMARY_DEFAULT_VIEW: View = (input, _output, target) => {
+  // clang-format off
+  render(
+      html`
+        <style>${detailsViewStyles}</style>
+        ${Directives.until(renderSelectedEventDetails(input))}
+        ${input.selectedRange ? generateRangeSummaryDetails(input) : nothing}
+        <devtools-widget data-related-insight-chips .widgetConfig=${
+          UI.Widget.widgetConfig(TimelineComponents.RelatedInsightChips.RelatedInsightChips, {
+            activeEvent: input.selectedEvent,
+            eventToInsightsMap: input.eventToRelatedInsightsMap,
+          })}></devtools-widget>
+      `,
+      target);
+  // clang-format on
+};
+
+class SummaryView extends UI.Widget.Widget {
+  #view: View;
+  selectedEvent: Trace.Types.Events.Event|null = null;
+  eventToRelatedInsightsMap: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap|null = null;
+  parsedTrace: Trace.Handlers.Types.ParsedTrace|null = null;
+  traceInsightsSets: Trace.Insights.Types.TraceInsightSets|null = null;
+  entityMapper: Utils.EntityMapper.EntityMapper|null = null;
+  target: SDK.Target.Target|null = null;
+  linkifier: Components.Linkifier.Linkifier|null = null;
+  filmStrip: Trace.Extras.FilmStrip.Data|null = null;
+  selectedRange: SelectedRange|null = null;
+
+  constructor(element?: HTMLElement, view = SUMMARY_DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
+  }
+
+  override performUpdate(): void {
+    this.#view(
+        {
+          selectedEvent: this.selectedEvent,
+          eventToRelatedInsightsMap: this.eventToRelatedInsightsMap,
+          parsedTrace: this.parsedTrace,
+          traceInsightsSets: this.traceInsightsSets,
+          entityMapper: this.entityMapper,
+          target: this.target,
+          linkifier: this.linkifier,
+          filmStrip: this.filmStrip,
+          selectedRange: this.selectedRange,
+        },
+        {}, this.contentElement);
+  }
+}
+
+function generateRangeSummaryDetails(input: SummaryViewInput): LitTemplate {
+  const {parsedTrace, selectedRange} = input;
+
+  if (!selectedRange || !parsedTrace) {
+    return nothing;
+  }
+
+  const minBoundsMilli = Trace.Helpers.Timing.microToMilli(parsedTrace.Meta.traceBounds.min);
+  const {events, startTime, endTime, thirdPartyTree} = selectedRange;
+  const aggregatedStats = TimelineUIUtils.statsForTimeRange(events, startTime, endTime);
+  const startOffset = startTime - minBoundsMilli;
+  const endOffset = endTime - minBoundsMilli;
+  const summaryDetailElem =
+      TimelineUIUtils.generateSummaryDetails(aggregatedStats, startOffset, endOffset, events, thirdPartyTree);
+  return html`${summaryDetailElem}`;
+}
+
+async function renderSelectedEventDetails(
+    input: SummaryViewInput,
+    ): Promise<LitTemplate> {
+  const {selectedEvent, parsedTrace, linkifier} = input;
+  if (!selectedEvent || !parsedTrace || !linkifier) {
+    return nothing;
+  }
+  const traceRecordingIsFresh =
+      parsedTrace ? Utils.FreshRecording.Tracker.instance().recordingIsFresh(parsedTrace) : false;
+
+  if (Trace.Types.Events.isSyntheticLayoutShift(selectedEvent) ||
+      Trace.Types.Events.isSyntheticLayoutShiftCluster(selectedEvent)) {
+    // clang-format off
+    return html`
+      <devtools-widget data-layout-shift-details .widgetConfig=${
+        UI.Widget.widgetConfig(TimelineComponents.LayoutShiftDetails.LayoutShiftDetails, {
+          event: selectedEvent,
+          traceInsightsSets: input.traceInsightsSets,
+          parsedTrace: input.parsedTrace,
+          isFreshRecording: traceRecordingIsFresh,
+        })}
+      ></devtools-widget>`;
+    // clang-format on
+  }
+
+  if (Trace.Types.Events.isSyntheticNetworkRequest(selectedEvent)) {
+    // clang-format off
+    return html`
+      <devtools-widget data-network-request-details .widgetConfig=${
+        UI.Widget.widgetConfig(TimelineComponents.NetworkRequestDetails.NetworkRequestDetails, {
+          request: selectedEvent,
+          entityMapper: input.entityMapper,
+          target: input.target,
+          linkifier: input.linkifier,
+          parsedTrace: input.parsedTrace,
+        })}
+      ></devtools-widget>
+    `;
+    // clang-format on
+  }
+
+  if (Trace.Types.Events.isLegacyTimelineFrame(selectedEvent) && input.filmStrip) {
+    const matchedFilmStripFrame = getFilmStripFrame(input.filmStrip, selectedEvent);
+    const content =
+        TimelineUIUtils.generateDetailsContentForFrame(selectedEvent, input.filmStrip, matchedFilmStripFrame);
+    return html`${content}`;
+  }
+
+  // Fall back to the default trace event details. Long term this needs to use
+  // the UI Eng Vision.
+  const traceEventDetails =
+      await TimelineUIUtils.buildTraceEventDetails(parsedTrace, selectedEvent, linkifier, true, input.entityMapper);
+  return html`${traceEventDetails}`;
+}
+
+const filmStripFrameCache = new WeakMap<Trace.Types.Events.LegacyTimelineFrame, Trace.Extras.FilmStrip.Frame|null>();
+
+function getFilmStripFrame(filmStrip: Trace.Extras.FilmStrip.Data, frame: Trace.Types.Events.LegacyTimelineFrame):
+    Trace.Extras.FilmStrip.Frame|null {
+  const fromCache = filmStripFrameCache.get(frame);
+  if (typeof fromCache !== 'undefined') {
+    return fromCache;
+  }
+
+  const screenshotTime = (frame.idle ? frame.startTime : frame.endTime);
+  const filmStripFrame = Trace.Extras.FilmStrip.frameClosestToTimestamp(filmStrip, screenshotTime);
+  if (!filmStripFrame) {
+    filmStripFrameCache.set(frame, null);
+    return null;
+  }
+
+  const frameTimeMilliSeconds = Trace.Helpers.Timing.microToMilli(filmStripFrame.screenshotEvent.ts);
+  const frameEndTimeMilliSeconds = Trace.Helpers.Timing.microToMilli(frame.endTime);
+  if (frameTimeMilliSeconds - frameEndTimeMilliSeconds < 10) {
+    filmStripFrameCache.set(frame, filmStripFrame);
+    return filmStripFrame;
+  }
+
+  filmStripFrameCache.set(frame, null);
+  return null;
+}

package/front_end/panels/timeline/TimelineEventOverview.ts

@@ -41,21 +41,21 @@ import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
-   *@description Short for Network. Label for the network requests section of the Performance panel.
+   * @description Short for Network. Label for the network requests section of the Performance panel.
    */
   net: 'NET',
   /**
-   *@description Text in Timeline Event Overview of the Performance panel
+   * @description Text in Timeline Event Overview of the Performance panel
    */
   cpu: 'CPU',
   /**
-   *@description Text in Timeline Event Overview of the Performance panel
+   * @description Text in Timeline Event Overview of the Performance panel
    */
   heap: 'HEAP',
   /**
-   *@description Heap size label text content in Timeline Event Overview of the Performance panel
-   *@example {10 MB} PH1
-   *@example {30 MB} PH2
+   * @description Heap size label text content in Timeline Event Overview of the Performance panel
+   * @example {10 MB} PH1
+   * @example {30 MB} PH2
    */
   sSDash: '{PH1} – {PH2}',
 } as const;