chrome-devtools-frontend 1.0.1512349 → 1.0.1513662

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -130,9 +130,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
   private needsResizeToPreferredHeights?: boolean;
   private selectedSearchResult?: PerfUI.FlameChart.DataProviderSearchResult;
   private searchRegex?: RegExp;
-  #parsedTrace: Trace.Handlers.Types.ParsedTrace|null;
-  #traceMetadata: Trace.Types.File.MetaData|null;
-  #traceInsightSets: Trace.Insights.Types.TraceInsightSets|null = null;
+  #parsedTrace: Trace.TraceModel.ParsedTrace|null;
   #eventToRelatedInsightsMap: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap|null = null;
   #selectedGroupName: string|null = null;
   #onTraceBoundsChangeBound = this.#onTraceBoundsChange.bind(this);
@@ -203,7 +201,6 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     this.delegate = delegate;
     this.eventListeners = [];
     this.#parsedTrace = null;
-    this.#traceMetadata = null;
 
     const flameChartsContainer = new UI.Widget.VBox();
     flameChartsContainer.element.classList.add('flame-charts-container');
@@ -617,17 +614,19 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
   }
 
   #amendMarkerWithFieldData(): void {
-    if (!this.#traceMetadata?.cruxFieldData || !this.#traceInsightSets) {
+    const metadata = this.#parsedTrace?.metadata;
+    const insights = this.#parsedTrace?.insights;
+    if (!metadata?.cruxFieldData || !insights) {
       return;
     }
 
     const fieldMetricResultsByNavigationId = new Map<string, Trace.Insights.Common.CrUXFieldMetricResults|null>();
-    for (const [key, insightSet] of this.#traceInsightSets) {
+    for (const [key, insightSet] of insights) {
       if (insightSet.navigation) {
         fieldMetricResultsByNavigationId.set(
             key,
             Trace.Insights.Common.getFieldMetricsForInsightSet(
-                insightSet, this.#traceMetadata, CrUXManager.CrUXManager.instance().getSelectedScope()));
+                insightSet, metadata, CrUXManager.CrUXManager.instance().getSelectedScope()));
       }
     }
 
@@ -659,13 +658,13 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     }
   }
 
-  setMarkers(parsedTrace: Trace.Handlers.Types.ParsedTrace|null): void {
+  setMarkers(parsedTrace: Trace.TraceModel.ParsedTrace|null): void {
     if (!parsedTrace) {
       return;
     }
     // Clear out any markers.
     this.bulkRemoveOverlays(this.#markers);
-    const markerEvents = parsedTrace.PageLoadMetrics.allMarkerEvents;
+    const markerEvents = parsedTrace.data.PageLoadMetrics.allMarkerEvents;
     // Set markers for Navigations, LCP, FCP, DCL, L.
     const markers = markerEvents.filter(
         event => event.name === Trace.Types.Events.Name.NAVIGATION_START ||
@@ -679,9 +678,9 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     markers.forEach(marker => {
       const adjustedTimestamp = Trace.Helpers.Timing.timeStampForEventAdjustedByClosestNavigation(
           marker,
-          parsedTrace.Meta.traceBounds,
-          parsedTrace.Meta.navigationsByNavigationId,
-          parsedTrace.Meta.navigationsByFrameId,
+          parsedTrace.data.Meta.traceBounds,
+          parsedTrace.data.Meta.navigationsByNavigationId,
+          parsedTrace.data.Meta.navigationsByFrameId,
       );
       // If any of the markers overlap in timing, lets put them on the same marker.
       let matchingOverlay = false;
@@ -1190,13 +1189,15 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     this.#updateDetailViews();
   }
 
-  setModel(newParsedTrace: Trace.Handlers.Types.ParsedTrace, traceMetadata: Trace.Types.File.MetaData|null): void {
+  setModel(
+      newParsedTrace: Trace.TraceModel.ParsedTrace,
+      eventToRelatedInsightsMap: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap): void {
     if (newParsedTrace === this.#parsedTrace) {
       return;
     }
 
     this.#parsedTrace = newParsedTrace;
-    this.#traceMetadata = traceMetadata;
+    this.#eventToRelatedInsightsMap = eventToRelatedInsightsMap;
     for (const dimmer of this.#flameChartDimmers) {
       dimmer.active = false;
       dimmer.mainChartIndices = [];
@@ -1263,19 +1264,6 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     return {main, network};
   }
 
-  setInsights(
-      insights: Trace.Insights.Types.TraceInsightSets|null,
-      eventToRelatedInsightsMap: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap): void {
-    if (this.#traceInsightSets === insights) {
-      return;
-    }
-
-    this.#traceInsightSets = insights;
-    this.#eventToRelatedInsightsMap = eventToRelatedInsightsMap;
-    // The DetailsView is provided with the InsightSets, so make sure we update it.
-    this.#updateDetailViews();
-  }
-
   reset(): void {
     if (this.networkDataProvider.isEmpty()) {
       this.mainFlameChart.enableRuler(true);
@@ -1315,7 +1303,6 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     void this.detailsView.setModel({
       parsedTrace: this.#parsedTrace,
       selectedEvents: this.#selectedEvents,
-      traceInsightsSets: this.#traceInsightSets,
       eventToRelatedInsightsMap: this.#eventToRelatedInsightsMap,
       entityMapper: this.#entityMapper,
     });
@@ -1926,17 +1913,17 @@ export const FlameChartStyle = {
 };
 
 export class TimelineFlameChartMarker implements PerfUI.FlameChart.FlameChartMarker {
-  private readonly startTimeInternal: number;
+  readonly #startTime: number;
   private readonly startOffset: number;
   private style: TimelineMarkerStyle;
   constructor(startTime: number, startOffset: number, style: TimelineMarkerStyle) {
-    this.startTimeInternal = startTime;
+    this.#startTime = startTime;
     this.startOffset = startOffset;
     this.style = style;
   }
 
   startTime(): number {
-    return this.startTimeInternal;
+    return this.#startTime;
   }
 
   color(): string {

package/front_end/panels/timeline/TimelineHistoryManager.ts

@@ -88,8 +88,7 @@ export interface NewHistoryRecordingData {
   // We do not store this, but need it to build the thumbnail preview.
   filmStripForPreview: Trace.Extras.FilmStrip.Data|null;
   // Also not stored, but used to create the preview overview for a new trace.
-  parsedTrace: Trace.Handlers.Types.ParsedTrace;
-  metadata: Trace.Types.File.MetaData|null;
+  parsedTrace: Trace.TraceModel.ParsedTrace;
 }
 
 // Lazily instantiate the formatter as the constructor takes 50ms+
@@ -111,9 +110,9 @@ export class TimelineHistoryManager {
   private recordings: TraceRecordingHistoryItem[];
   private readonly action: UI.ActionRegistration.Action;
   private readonly nextNumberByDomain: Map<string, number>;
-  private readonly buttonInternal: ToolbarButton;
+  readonly #button: ToolbarButton;
   private readonly allOverviews: Array<{
-    constructor: (parsedTrace: Trace.Handlers.Types.ParsedTrace) => TimelineEventOverview,
+    constructor: (parsedTrace: Trace.TraceModel.ParsedTrace) => TimelineEventOverview,
     height: number,
   }>;
   private totalHeight: number;
@@ -127,12 +126,12 @@ export class TimelineHistoryManager {
     this.#minimapComponent = minimapComponent;
     this.action = UI.ActionRegistry.ActionRegistry.instance().getAction('timeline.show-history');
     this.nextNumberByDomain = new Map();
-    this.buttonInternal = new ToolbarButton(this.action);
+    this.#button = new ToolbarButton(this.action);
 
     this.#landingPageTitle =
         isNode ? i18nString(UIStrings.nodeLandingPageTitle) : i18nString(UIStrings.landingPageTitle);
 
-    UI.ARIAUtils.markAsMenuButton(this.buttonInternal.element);
+    UI.ARIAUtils.markAsMenuButton(this.#button.element);
     this.clear();
 
     // Attempt to reuse the overviews coming from the panel's minimap
@@ -182,13 +181,13 @@ export class TimelineHistoryManager {
 
     // Order is important: this needs to happen first because lots of the
     // subsequent code depends on us storing the preview data into the map.
-    this.#buildAndStorePreviewData(newInput.data.parsedTraceIndex, newInput.parsedTrace, newInput.metadata, filmStrip);
+    this.#buildAndStorePreviewData(newInput.data.parsedTraceIndex, newInput.parsedTrace, filmStrip);
 
     const modelTitle = this.title(newInput.data);
-    this.buttonInternal.setText(modelTitle);
+    this.#button.setText(modelTitle);
     const buttonTitle = this.action.title();
     UI.ARIAUtils.setLabel(
-        this.buttonInternal.element, i18nString(UIStrings.currentSessionSS, {PH1: modelTitle, PH2: buttonTitle}));
+        this.#button.element, i18nString(UIStrings.currentSessionSS, {PH1: modelTitle, PH2: buttonTitle}));
     this.updateState();
     if (this.recordings.length <= maxRecordings) {
       return;
@@ -212,14 +211,14 @@ export class TimelineHistoryManager {
   }
 
   button(): ToolbarButton {
-    return this.buttonInternal;
+    return this.#button;
   }
 
   clear(): void {
     this.recordings = [];
     this.lastActiveTrace = null;
     this.updateState();
-    this.buttonInternal.setText(this.#landingPageTitle);
+    this.#button.setText(this.#landingPageTitle);
     this.nextNumberByDomain.clear();
   }
 
@@ -241,7 +240,7 @@ export class TimelineHistoryManager {
     // DropDown.show() function finishes when the dropdown menu is closed via selection or losing focus
     const activeTraceIndex = await DropDown.show(
         this.recordings.map(recording => recording.parsedTraceIndex), this.#getActiveTraceIndexForListControl(),
-        this.buttonInternal.element, this.#landingPageTitle);
+        this.#button.element, this.#landingPageTitle);
 
     if (activeTraceIndex === null) {
       return null;
@@ -311,9 +310,9 @@ export class TimelineHistoryManager {
     this.lastActiveTrace = item;
     const modelTitle = this.title(item);
     const buttonTitle = this.action.title();
-    this.buttonInternal.setText(modelTitle);
+    this.#button.setText(modelTitle);
     UI.ARIAUtils.setLabel(
-        this.buttonInternal.element, i18nString(UIStrings.currentSessionSS, {PH1: modelTitle, PH2: buttonTitle}));
+        this.#button.element, i18nString(UIStrings.currentSessionSS, {PH1: modelTitle, PH2: buttonTitle}));
   }
 
   private updateState(): void {
@@ -341,9 +340,9 @@ export class TimelineHistoryManager {
   }
 
   #buildAndStorePreviewData(
-      parsedTraceIndex: number, parsedTrace: Trace.Handlers.Types.ParsedTrace, metadata: Trace.Types.File.MetaData|null,
+      parsedTraceIndex: number, parsedTrace: Trace.TraceModel.ParsedTrace,
       filmStrip: Trace.Extras.FilmStrip.Data|null): HTMLDivElement {
-    const parsedURL = Common.ParsedURL.ParsedURL.fromString(parsedTrace.Meta.mainFrameURL);
+    const parsedURL = Common.ParsedURL.ParsedURL.fromString(parsedTrace.data.Meta.mainFrameURL);
     const domain = parsedURL ? parsedURL.host : '';
 
     const sequenceNumber = this.nextNumberByDomain.get(domain) || 1;
@@ -362,7 +361,7 @@ export class TimelineHistoryManager {
     };
     parsedTraceIndexToPerformancePreviewData.set(parsedTraceIndex, data);
 
-    preview.appendChild(this.#buildTextDetails(metadata, domain));
+    preview.appendChild(this.#buildTextDetails(parsedTrace.metadata, domain));
     const screenshotAndOverview = preview.createChild('div', 'hbox');
     screenshotAndOverview.appendChild(this.#buildScreenshotThumbnail(filmStrip));
     screenshotAndOverview.appendChild(this.#buildOverview(parsedTrace));
@@ -412,7 +411,7 @@ export class TimelineHistoryManager {
     return container;
   }
 
-  #buildOverview(parsedTrace: Trace.Handlers.Types.ParsedTrace): Element {
+  #buildOverview(parsedTrace: Trace.TraceModel.ParsedTrace): Element {
     const container = document.createElement('div');
     const dPR = window.devicePixelRatio;
     container.style.width = previewWidth + 'px';

package/front_end/panels/timeline/TimelineMiniMap.ts

@@ -23,7 +23,7 @@ import miniMapStyles from './timelineMiniMap.css.js';
 import {TimelineUIUtils} from './TimelineUIUtils.js';
 
 export interface OverviewData {
-  parsedTrace: Trace.Handlers.Types.ParsedTrace;
+  parsedTrace: Trace.TraceModel.ParsedTrace;
   isCpuProfile?: boolean;
   settings: {
     showScreenshots: boolean,
@@ -244,10 +244,10 @@ export class TimelineMiniMap extends
     this.#overviewComponent.reset();
   }
 
-  #setMarkers(parsedTrace: Trace.Handlers.Types.ParsedTrace): void {
+  #setMarkers(parsedTrace: Trace.TraceModel.ParsedTrace): void {
     const markers = new Map<number, HTMLDivElement>();
 
-    const {Meta} = parsedTrace;
+    const {Meta} = parsedTrace.data;
 
     // Only add markers for navigation start times.
     const navStartEvents = Meta.mainFrameNavigations;
@@ -261,8 +261,8 @@ export class TimelineMiniMap extends
     this.#overviewComponent.setMarkers(markers);
   }
 
-  #setNavigationStartEvents(parsedTrace: Trace.Handlers.Types.ParsedTrace): void {
-    this.#overviewComponent.setNavStartTimes(parsedTrace.Meta.mainFrameNavigations);
+  #setNavigationStartEvents(parsedTrace: Trace.TraceModel.ParsedTrace): void {
+    this.#overviewComponent.setNavStartTimes(parsedTrace.data.Meta.mainFrameNavigations);
   }
 
   getControls(): TimelineEventOverview[] {
@@ -291,7 +291,7 @@ export class TimelineMiniMap extends
 
     this.#controls.push(new TimelineEventOverviewNetwork(data.parsedTrace));
     if (data.settings.showScreenshots) {
-      const filmStrip = Trace.Extras.FilmStrip.fromParsedTrace(data.parsedTrace);
+      const filmStrip = Trace.Extras.FilmStrip.fromHandlerData(data.parsedTrace.data);
       if (filmStrip.frames.length) {
         this.#controls.push(new TimelineFilmStripOverview(filmStrip));
       }

package/front_end/panels/timeline/TimelinePaintProfilerView.ts

@@ -23,9 +23,9 @@ export class TimelinePaintProfilerView extends UI.SplitWidget.SplitWidget {
   private event: Trace.Types.Events.Event|null;
   private paintProfilerModel: SDK.PaintProfiler.PaintProfilerModel|null;
   private lastLoadedSnapshot: SDK.PaintProfiler.PaintProfilerSnapshot|null;
-  #parsedTrace: Trace.Handlers.Types.ParsedTrace;
+  #parsedTrace: Trace.TraceModel.ParsedTrace;
 
-  constructor(parsedTrace: Trace.Handlers.Types.ParsedTrace) {
+  constructor(parsedTrace: Trace.TraceModel.ParsedTrace) {
     super(false, false);
     this.element.classList.add('timeline-paint-profiler-view');
     this.setSidebarSize(60);
@@ -76,7 +76,7 @@ export class TimelinePaintProfilerView extends UI.SplitWidget.SplitWidget {
       return false;
     }
 
-    const frame = this.#parsedTrace.Frames.framesById[data.sourceFrameNumber];
+    const frame = this.#parsedTrace.data.Frames.framesById[data.sourceFrameNumber];
     if (!frame?.layerTree) {
       return false;
     }
@@ -91,7 +91,7 @@ export class TimelinePaintProfilerView extends UI.SplitWidget.SplitWidget {
 
     this.updateWhenVisible();
     if (Trace.Types.Events.isPaint(event)) {
-      const snapshot = this.#parsedTrace.LayerTree.paintsToSnapshots.get(event);
+      const snapshot = this.#parsedTrace.data.LayerTree.paintsToSnapshots.get(event);
       return Boolean(snapshot);
     }
     if (Trace.Types.Events.isRasterTask(event)) {
@@ -126,7 +126,7 @@ export class TimelinePaintProfilerView extends UI.SplitWidget.SplitWidget {
       return null;
     }
 
-    const frame = this.#parsedTrace.Frames.framesById[data.sourceFrameNumber];
+    const frame = this.#parsedTrace.data.Frames.framesById[data.sourceFrameNumber];
     if (!frame?.layerTree) {
       return null;
     }
@@ -155,7 +155,7 @@ export class TimelinePaintProfilerView extends UI.SplitWidget.SplitWidget {
       // snapshot to that paint event. That is why here if the event is a Paint
       // event, we look to see if it has had a matching picture event set for
       // it.
-      const snapshotEvent = this.#parsedTrace.LayerTree.paintsToSnapshots.get(this.event);
+      const snapshotEvent = this.#parsedTrace.data.LayerTree.paintsToSnapshots.get(this.event);
       if (snapshotEvent) {
         const encodedData = snapshotEvent.args.snapshot.skp64;
         snapshotPromise = this.paintProfilerModel.loadSnapshot(encodedData).then(snapshot => {

package/front_end/panels/timeline/TimelinePanel.ts

@@ -369,7 +369,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   );
   private readonly statusPaneContainer: HTMLElement;
   private readonly flameChart: TimelineFlameChartView;
-  private readonly searchableViewInternal: UI.SearchableView.SearchableView;
+  readonly #searchableView: UI.SearchableView.SearchableView;
   private showSettingsPaneButton!: UI.Toolbar.ToolbarSettingToggle;
   private showSettingsPaneSetting!: Common.Settings.Setting<boolean>;
   private settingsPane?: HTMLElement;
@@ -425,7 +425,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       'flamechart-selected-navigation', 'Classic - scroll to zoom', 'timeline.select-classic-navigation');
 
   #onMainEntryHovered: (event: Common.EventTarget.EventTargetEvent<number>) => void;
-  #hiddenTracksInfoBarPerTrace = new WeakMap<Trace.Handlers.Types.ParsedTrace, UI.Infobar.Infobar|'DISMISSED'>();
+  #hiddenTracksInfoBarByParsedTrace = new WeakMap<Trace.TraceModel.ParsedTrace, UI.Infobar.Infobar|'DISMISSED'>();
 
   constructor(traceModel?: Trace.TraceModel.Model) {
     super('timeline');
@@ -536,14 +536,14 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       this.select(selection);
     });
 
-    this.searchableViewInternal = new UI.SearchableView.SearchableView(this.flameChart, null);
-    this.searchableViewInternal.setMinimumSize(0, 100);
-    this.searchableViewInternal.setMinimalSearchQuerySize(2);  // At 1 it can introduce a bit of jank.
-    this.searchableViewInternal.element.classList.add('searchable-view');
-    this.searchableViewInternal.show(this.timelinePane.element);
-    this.flameChart.show(this.searchableViewInternal.element);
-    this.flameChart.setSearchableView(this.searchableViewInternal);
-    this.searchableViewInternal.hideWidget();
+    this.#searchableView = new UI.SearchableView.SearchableView(this.flameChart, null);
+    this.#searchableView.setMinimumSize(0, 100);
+    this.#searchableView.setMinimalSearchQuerySize(2);  // At 1 it can introduce a bit of jank.
+    this.#searchableView.element.classList.add('searchable-view');
+    this.#searchableView.show(this.timelinePane.element);
+    this.flameChart.show(this.#searchableView.element);
+    this.flameChart.setSearchableView(this.#searchableView);
+    this.#searchableView.hideWidget();
 
     this.#splitWidget.setMainWidget(this.timelinePane);
     this.#splitWidget.setSidebarWidget(this.#sideBar);
@@ -729,7 +729,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     return Common.Settings.Settings.instance().createSetting('timeline-show-extension-data', true);
   }
   override searchableView(): UI.SearchableView.SearchableView|null {
-    return this.searchableViewInternal;
+    return this.#searchableView;
   }
 
   override wasShown(): void {
@@ -882,7 +882,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
         // Whilst we don't reset this, we hide it, mainly so the user cannot
         // hit Ctrl/Cmd-F and try to search when it isn't visible.
-        this.searchableViewInternal.hideWidget();
+        this.#searchableView.hideWidget();
         return;
       }
 
@@ -970,13 +970,13 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
    * within DevTools you are warned when using the method.
    * @deprecated
    **/
-  getParsedTraceForLayoutTests(): Trace.Handlers.Types.ParsedTrace {
+  getParsedTraceForLayoutTests(): Trace.Handlers.Types.HandlerData {
     const traceIndex = this.#activeTraceIndex();
     if (traceIndex === null) {
       throw new Error('No trace index active.');
     }
-    const data = this.#traceEngineModel.parsedTrace(traceIndex);
-    if (data === null) {
+    const data = this.#traceEngineModel.parsedTrace(traceIndex)?.data;
+    if (!data) {
       throw new Error('No trace engine data found.');
     }
     return data;
@@ -993,11 +993,11 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     if (traceIndex === null) {
       throw new Error('No trace index active.');
     }
-    const data = this.#traceEngineModel.rawTraceEvents(traceIndex);
-    if (data === null) {
+    const data = this.#traceEngineModel.parsedTrace(traceIndex);
+    if (!data) {
       throw new Error('No trace engine data found.');
     }
-    return data;
+    return data.traceEvents;
   }
 
   #onEntryHovered(dataProvider: TimelineFlameChartDataProvider, event: Common.EventTarget.EventTargetEvent<number>):
@@ -1377,12 +1377,9 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     if (this.#viewMode.mode !== 'VIEWING_TRACE') {
       return;
     }
-    const trace = this.#traceEngineModel.parsedTrace(this.#viewMode.traceIndex);
-    if (!trace) {
-      return;
-    }
-    let traceEvents = this.#traceEngineModel.rawTraceEvents(this.#viewMode.traceIndex);
-    if (!traceEvents) {
+
+    const parsedTrace = this.#traceEngineModel.parsedTrace(this.#viewMode.traceIndex);
+    if (!parsedTrace) {
       return;
     }
 
@@ -1394,9 +1391,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       scriptByIdMap.set(`${mapScript.isolate}.${mapScript.scriptId}`, mapScript);
     }
 
-    const metadata = this.#traceEngineModel.metadata(this.#viewMode.traceIndex) ?? {};
-
-    traceEvents = traceEvents.map(event => {
+    const traceEvents = parsedTrace.traceEvents.map(event => {
       if (Trace.Types.Events.isAnyScriptCatchupEvent(event) && event.name !== 'StubScriptCatchup') {
         const mappedScript = scriptByIdMap.get(`${event.args.data.isolate}.${event.args.data.scriptId}`);
 
@@ -1422,6 +1417,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       return event;
     });
 
+    const metadata = parsedTrace.metadata;
     metadata.modifications = config.addModifications ? ModificationsManager.activeManager()?.toJSON() : undefined;
 
     // NOTE: we used to export the track configuration changes into the trace
@@ -1665,8 +1661,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     }
 
     const parsedTrace = this.#traceEngineModel.parsedTrace(this.#viewMode.traceIndex);
-    const isCpuProfile = this.#traceEngineModel.metadata(this.#viewMode.traceIndex)?.dataOrigin ===
-        Trace.Types.File.DataOrigin.CPU_PROFILE;
+    const isCpuProfile = parsedTrace?.metadata.dataOrigin === Trace.Types.File.DataOrigin.CPU_PROFILE;
     if (!parsedTrace) {
       return;
     }
@@ -2071,7 +2066,6 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     }
     const {traceIndex} = this.#viewMode;
     const parsedTrace = this.#traceEngineModel.parsedTrace(traceIndex);
-    const traceMetadata = this.#traceEngineModel.metadata(traceIndex);
     const syntheticEventsManager = this.#traceEngineModel.syntheticTraceEventsManager(traceIndex);
 
     if (!parsedTrace || !syntheticEventsManager) {
@@ -2091,8 +2085,9 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
     // Order is important: the bounds must be set before we initiate any UI
     // rendering.
+    const data = parsedTrace.data;
     TraceBounds.TraceBounds.BoundsManager.instance().resetWithNewBounds(
-        parsedTrace.Meta.traceBounds,
+        data.Meta.traceBounds,
     );
 
     // Set up the modifications manager for the newly active trace.
@@ -2105,19 +2100,16 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     }
     this.statusDialog?.updateProgressBar(i18nString(UIStrings.processed), 70);
 
-    const traceInsightsSets = this.#traceEngineModel.traceInsights(traceIndex);
-    this.flameChart.setInsights(traceInsightsSets, this.#eventToRelatedInsights);
-
-    this.flameChart.setModel(parsedTrace, traceMetadata);
+    this.flameChart.setModel(parsedTrace, this.#eventToRelatedInsights);
     this.flameChart.resizeToPreferredHeights();
     // Reset the visual selection as we've just swapped to a new trace.
     this.flameChart.setSelectionAndReveal(null);
-    this.#sideBar.setParsedTrace(parsedTrace, traceMetadata);
+    this.#sideBar.setParsedTrace(parsedTrace);
 
-    this.searchableViewInternal.showWidget();
+    this.#searchableView.showWidget();
 
     const exclusiveFilter = this.#exclusiveFilterPerTrace.get(traceIndex) ?? null;
-    this.#applyActiveFilters(parsedTrace.Meta.traceIsGeneric, exclusiveFilter);
+    this.#applyActiveFilters(parsedTrace.data.Meta.traceIsGeneric, exclusiveFilter);
     (this.saveButton.element as TimelineComponents.ExportTraceOptions.ExportTraceOptions)
         .updateContentVisibility(currentManager ? currentManager.getAnnotations()?.length > 0 : false);
 
@@ -2130,7 +2122,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
         this.flameChart.getMainDataProvider().compatibilityTracksAppenderInstance().threadAppenders().at(0);
     if (topMostMainThreadAppender) {
       const zoomedInBounds = Trace.Extras.MainThreadActivity.calculateWindow(
-          parsedTrace.Meta.traceBounds, topMostMainThreadAppender.getEntries());
+          parsedTrace.data.Meta.traceBounds, topMostMainThreadAppender.getEntries());
 
       TraceBounds.TraceBounds.BoundsManager.instance().setTimelineVisibleWindow(zoomedInBounds);
     }
@@ -2146,11 +2138,11 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
     // Set up line level profiling with CPU profiles, if we found any.
     PerfUI.LineLevelProfile.Performance.instance().reset();
-    if (parsedTrace?.Samples.profilesInProcess.size) {
+    if (parsedTrace.data.Samples.profilesInProcess.size) {
       const primaryPageTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
       // Gather up all CPU Profiles we found when parsing this trace.
       const cpuProfiles =
-          Array.from(parsedTrace.Samples.profilesInProcess).flatMap(([_processId, threadsInProcess]) => {
+          Array.from(parsedTrace.data.Samples.profilesInProcess).flatMap(([_processId, threadsInProcess]) => {
             const profiles = Array.from(threadsInProcess.values()).map(profileData => profileData.parsedProfile);
             return profiles;
           });
@@ -2180,11 +2172,10 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.#maybeCreateHiddenTracksBanner(parsedTrace);
 
     this.#setActiveInsight(null);
-    this.#sideBar.setInsights(traceInsightsSets);
 
     this.#eventToRelatedInsights.clear();
-    if (traceInsightsSets) {
-      for (const [insightSetKey, insightSet] of traceInsightsSets) {
+    if (parsedTrace.insights) {
+      for (const [insightSetKey, insightSet] of parsedTrace.insights) {
         for (const model of Object.values(insightSet.model)) {
           let relatedEvents = model.relatedEvents;
           if (!relatedEvents) {
@@ -2295,16 +2286,16 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
    * show a warning banner at the bottom. This can be dismissed by the user and
    * if that happens we do not want to bring it back again.
    */
-  #maybeCreateHiddenTracksBanner(trace: Trace.Handlers.Types.ParsedTrace): void {
+  #maybeCreateHiddenTracksBanner(parsedTrace: Trace.TraceModel.ParsedTrace): void {
     const hasHiddenTracks = this.flameChart.hasHiddenTracks();
     if (!hasHiddenTracks) {
       return;
     }
 
-    const maybeOverlay = createHiddenTracksOverlay(trace, {
+    const maybeOverlay = createHiddenTracksOverlay(parsedTrace, {
       onClose: () => {
         this.flameChart.overlays().removeOverlaysOfType('BOTTOM_INFO_BAR');
-        this.#hiddenTracksInfoBarPerTrace.set(trace, 'DISMISSED');
+        this.#hiddenTracksInfoBarByParsedTrace.set(parsedTrace, 'DISMISSED');
       },
       onShowAllTracks: () => {
         this.flameChart.showAllMainChartTracks();
@@ -2542,9 +2533,8 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
           parsedTraceIndex: traceIndex,
           type: 'TRACE_INDEX',
         },
-        filmStripForPreview: Trace.Extras.FilmStrip.fromParsedTrace(parsedTrace),
+        filmStripForPreview: Trace.Extras.FilmStrip.fromHandlerData(parsedTrace.data),
         parsedTrace,
-        metadata,
       });
 
       this.dispatchEventToListeners(Events.RECORDING_COMPLETED, {
@@ -2593,7 +2583,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
    *    subsequent attempt will work).
    */
   async #retainSourceMapsForEnhancedTrace(
-      parsedTrace: Trace.Handlers.Types.ParsedTrace, metadata: Trace.Types.File.MetaData): Promise<void> {
+      parsedTrace: Trace.TraceModel.ParsedTrace, metadata: Trace.Types.File.MetaData): Promise<void> {
     const handleScript = async(script: Trace.Handlers.ModelHandlers.Scripts.Script): Promise<void> => {
       if (script.sourceMapUrlElided) {
         if (metadata.sourceMaps?.find(m => m.url === script.url)) {
@@ -2638,7 +2628,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     metadata.sourceMaps = [];
 
     const promises = [];
-    for (const script of parsedTrace?.Scripts.scripts.values() ?? []) {
+    for (const script of parsedTrace?.data.Scripts.scripts.values() ?? []) {
       promises.push(handleScript(script));
     }
     await Promise.all(promises);
@@ -2833,10 +2823,11 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     if (!parsedTrace) {
       return null;
     }
+
     const endTime = rangeForSelection(selection).max;
     const lastFrameInSelection = Trace.Handlers.ModelHandlers.Frames
                                      .framesWithinWindow(
-                                         parsedTrace.Frames.frames,
+                                         parsedTrace.data.Frames.frames,
                                          endTime,
                                          endTime,
                                          )
@@ -2856,10 +2847,11 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     if (!parsedTrace) {
       return;
     }
-    let index = parsedTrace.Frames.frames.indexOf(currentFrame);
+
+    let index = parsedTrace.data.Frames.frames.indexOf(currentFrame);
     console.assert(index >= 0, 'Can\'t find current frame in the frame list');
-    index = Platform.NumberUtilities.clamp(index + offset, 0, parsedTrace.Frames.frames.length - 1);
-    const frame = parsedTrace.Frames.frames[index];
+    index = Platform.NumberUtilities.clamp(index + offset, 0, parsedTrace.data.Frames.frames.length - 1);
+    const frame = parsedTrace.data.Frames.frames[index];
     this.#revealTimeRange(
         Trace.Helpers.Timing.microToMilli(frame.startTime), Trace.Helpers.Timing.microToMilli(frame.endTime));
     this.select(selectionFromEvent(frame));
@@ -3019,16 +3011,16 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
           message: `Error running the trace: ${eventData.errorText}`,
         };
       }
+
       const parsedTrace = panelInstance.model.parsedTrace(eventData.traceIndex);
-      const insights = panelInstance.model.traceInsights(eventData.traceIndex);
-      if (!parsedTrace || !insights || insights.size === 0) {
+      if (!parsedTrace || !parsedTrace.insights || parsedTrace.insights.size === 0) {
         return {
           type: AiAssistanceModel.ExternalRequestResponseType.ERROR,
           message: 'The trace was loaded successfully but no Insights were detected.',
         };
       }
 
-      const navigationId = Array.from(insights.keys()).find(k => k !== 'NO_NAVIGATION');
+      const navigationId = Array.from(parsedTrace.insights.keys()).find(k => k !== 'NO_NAVIGATION');
       if (!navigationId) {
         return {
           type: AiAssistanceModel.ExternalRequestResponseType.ERROR,
@@ -3036,7 +3028,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
         };
       }
 
-      const insightsForNav = insights.get(navigationId);
+      const insightsForNav = parsedTrace.insights.get(navigationId);
       if (!insightsForNav) {
         return {
           type: AiAssistanceModel.ExternalRequestResponseType.ERROR,
@@ -3049,6 +3041,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       // bottom of the response under a heading.
       let responseTextForPassedInsights = '';
 
+      // TODO(b/442392194): use PerformanceTraceFormatter summary instead.
       for (const modelName in insightsForNav.model) {
         const model = modelName as keyof Trace.Insights.Types.InsightModelsType;
         const insight = insightsForNav.model[model];