chrome-devtools-frontend 1.0.1512349 → 1.0.1513662

package/front_end/panels/timeline/components/SidebarSingleInsightSet.ts

@@ -11,11 +11,10 @@ import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
-import {md} from '../utils/Helpers.js';
 import * as Utils from '../utils/utils.js';
 
 import type {BaseInsightComponent} from './insights/BaseInsightComponent.js';
-import {shouldRenderForCategory} from './insights/Helpers.js';
+import {md, shouldRenderForCategory} from './insights/Helpers.js';
 import * as Insights from './insights/insights.js';
 import type {ActiveInsight} from './Sidebar.js';
 import sidebarSingleInsightSetStyles from './sidebarSingleInsightSet.css.js';
@@ -74,12 +73,10 @@ const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/SidebarSing
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface SidebarSingleInsightSetData {
-  insights: Trace.Insights.Types.TraceInsightSets|null;
   insightSetKey: Trace.Types.Events.NavigationId|null;
   activeCategory: Trace.Insights.Types.InsightCategory;
   activeInsight: ActiveInsight|null;
-  parsedTrace: Trace.Handlers.Types.ParsedTrace|null;
-  traceMetadata: Trace.Types.File.MetaData|null;
+  parsedTrace: Trace.TraceModel.ParsedTrace|null;
 }
 
 type InsightNameToComponentMapping =
@@ -122,12 +119,10 @@ export class SidebarSingleInsightSet extends HTMLElement {
   #activeInsightElement: BaseInsightComponent<Trace.Insights.Types.InsightModel>|null = null;
 
   #data: SidebarSingleInsightSetData = {
-    insights: null,
     insightSetKey: null,
     activeCategory: Trace.Insights.Types.InsightCategory.ALL,
     activeInsight: null,
     parsedTrace: null,
-    traceMetadata: null,
   };
 
   #dismissedFieldMismatchNotice = false;
@@ -225,7 +220,11 @@ export class SidebarSingleInsightSet extends HTMLElement {
 
   // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
   #getLocalMetrics(insightSetKey: string) {
-    const insightSet = this.#data.insights?.get(insightSetKey);
+    if (!this.#data.parsedTrace) {
+      return {};
+    }
+
+    const insightSet = this.#data.parsedTrace.insights?.get(insightSetKey);
     if (!insightSet) {
       return {};
     }
@@ -238,13 +237,17 @@ export class SidebarSingleInsightSet extends HTMLElement {
   }
 
   #getFieldMetrics(insightSetKey: string): Trace.Insights.Common.CrUXFieldMetricResults|null {
-    const insightSet = this.#data.insights?.get(insightSetKey);
+    if (!this.#data.parsedTrace) {
+      return null;
+    }
+
+    const insightSet = this.#data.parsedTrace.insights?.get(insightSetKey);
     if (!insightSet) {
       return null;
     }
 
     const fieldMetricsResults = Trace.Insights.Common.getFieldMetricsForInsightSet(
-        insightSet, this.#data.traceMetadata, CrUXManager.CrUXManager.instance().getSelectedScope());
+        insightSet, this.#data.parsedTrace.metadata, CrUXManager.CrUXManager.instance().getSelectedScope());
     if (!fieldMetricsResults) {
       return null;
     }
@@ -409,10 +412,10 @@ export class SidebarSingleInsightSet extends HTMLElement {
   }
 
   #renderInsights(
-      insightSets: Trace.Insights.Types.TraceInsightSets|null,
+      insights: Trace.Insights.Types.TraceInsightSets|null,
       insightSetKey: string,
       ): Lit.LitTemplate {
-    const insightSet = insightSets?.get(insightSetKey);
+    const insightSet = insights?.get(insightSetKey);
     if (!insightSet) {
       return Lit.nothing;
     }
@@ -420,19 +423,18 @@ export class SidebarSingleInsightSet extends HTMLElement {
     const fieldMetrics = this.#getFieldMetrics(insightSetKey);
     const {shownInsights: shownInsightsData, passedInsights: passedInsightsData} =
         SidebarSingleInsightSet.categorizeInsights(
-            insightSets,
+            insights,
             insightSetKey,
             this.#data.activeCategory,
         );
 
     const renderInsightComponent = (insightData: CategorizedInsightData): Lit.TemplateResult => {
       const {componentClass, model} = insightData;
-      if (!this.#data.parsedTrace || !this.#data.insights || !this.#data.traceMetadata) {
+      if (!this.#data.parsedTrace?.insights) {
         return html``;
       }
 
-      const agentFocus = Utils.AIContext.AgentFocus.fromInsight(
-          this.#data.parsedTrace, this.#data.insights, this.#data.traceMetadata, model);
+      const agentFocus = Utils.AIContext.AgentFocus.fromInsight(this.#data.parsedTrace, model);
       // clang-format off
       return html`<div>
         <${componentClass.litTagName}
@@ -472,10 +474,10 @@ export class SidebarSingleInsightSet extends HTMLElement {
 
   #render(): void {
     const {
-      insights,
+      parsedTrace,
       insightSetKey,
     } = this.#data;
-    if (!insights || !insightSetKey) {
+    if (!parsedTrace?.insights || !insightSetKey) {
       Lit.render(html``, this.#shadow, {host: this});
       return;
     }
@@ -485,7 +487,7 @@ export class SidebarSingleInsightSet extends HTMLElement {
       <style>${sidebarSingleInsightSetStyles}</style>
       <div class="navigation">
         ${this.#renderMetrics(insightSetKey)}
-        ${this.#renderInsights(insights, insightSetKey)}
+        ${this.#renderInsights(parsedTrace.insights, insightSetKey)}
         </div>
       `, this.#shadow, {host: this});
     // clang-format on

package/front_end/panels/timeline/components/insights/BaseInsightComponent.ts

@@ -15,10 +15,10 @@ import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
 import type * as Overlays from '../../overlays/overlays.js';
-import {md} from '../../utils/Helpers.js';
 import * as Utils from '../../utils/utils.js';
 
 import baseInsightComponentStyles from './baseInsightComponent.css.js';
+import {md} from './Helpers.js';
 import * as SidebarInsight from './SidebarInsight.js';
 import type {TableState} from './Table.js';
 

package/front_end/panels/timeline/components/insights/Cache.ts

@@ -21,6 +21,10 @@ export class Cache extends BaseInsightComponent<CacheInsightModel> {
   static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-cache`;
   override internalName = 'cache';
 
+  protected override hasAskAiSupport(): boolean {
+    return true;
+  }
+
   mapToRow(req: Trace.Insights.Models.Cache.CacheableRequest): TableDataRow {
     return {
       values: [eventRef(req.request), i18n.TimeUtilities.secondsToString(req.ttl)],

package/front_end/panels/timeline/components/insights/DOMSize.ts

@@ -10,10 +10,10 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import type {DOMSizeInsightModel} from '../../../../models/trace/insights/DOMSize.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as Lit from '../../../../ui/lit/lit.js';
-import {md} from '../../utils/Helpers.js';
 
 import {BaseInsightComponent} from './BaseInsightComponent.js';
 import {eventRef} from './EventRef.js';
+import {md} from './Helpers.js';
 import type * as NodeLink from './NodeLink.js';
 import type {TableData, TableDataRow} from './Table.js';
 
@@ -25,6 +25,10 @@ export class DOMSize extends BaseInsightComponent<DOMSizeInsightModel> {
   static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-dom-size`;
   override internalName = 'dom-size';
 
+  protected override hasAskAiSupport(): boolean {
+    return true;
+  }
+
   #renderNodeTable(domStatsData: Trace.Types.Events.DOMStats['args']['data']): Lit.LitTemplate {
     const rows: TableData['rows'] = [];
 

package/front_end/panels/timeline/components/insights/Helpers.ts

@@ -2,7 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../../ui/components/markdown_view/markdown_view.js';
+
+import type * as Common from '../../../../core/common/common.js';
 import * as Trace from '../../../../models/trace/trace.js';
+import * as Marked from '../../../../third_party/marked/marked.js';
+import * as Lit from '../../../../ui/lit/lit.js';
+
+const {html} = Lit;
 
 export function shouldRenderForCategory(options: {
   activeCategory: Trace.Insights.Types.InsightCategory,
@@ -11,3 +18,15 @@ export function shouldRenderForCategory(options: {
   return options.activeCategory === Trace.Insights.Types.InsightCategory.ALL ||
       options.activeCategory === options.insightCategory;
 }
+
+/**
+ * Returns a rendered MarkdownView component.
+ *
+ * This should only be used for markdown that is guaranteed to be valid,
+ * and not contain any user-generated content.
+ */
+export function md(markdown: Common.UIString.LocalizedString): Lit.TemplateResult {
+  const tokens = Marked.Marked.lexer(markdown);
+  const data = {tokens};
+  return html`<devtools-markdown-view .data=${data}></devtools-markdown-view>`;
+}

package/front_end/panels/timeline/components/insights/NetworkDependencyTree.ts

@@ -12,10 +12,10 @@ import type {
   '../../../../models/trace/insights/NetworkDependencyTree.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as Lit from '../../../../ui/lit/lit.js';
-import {md} from '../../utils/Helpers.js';
 
 import {BaseInsightComponent} from './BaseInsightComponent.js';
 import {eventRef} from './EventRef.js';
+import {md} from './Helpers.js';
 import networkDependencyTreeInsightStyles from './networkDependencyTreeInsight.css.js';
 import type {NodeLinkData} from './NodeLink.js';
 import {renderOthersLabel, type TableData, type TableDataRow} from './Table.js';

package/front_end/panels/timeline/components/insights/Viewport.ts

@@ -16,6 +16,10 @@ export class Viewport extends BaseInsightComponent<ViewportInsightModel> {
   static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-viewport`;
   override internalName = 'viewport';
 
+  protected override hasAskAiSupport(): boolean {
+    return true;
+  }
+
   override getEstimatedSavingsTime(): Trace.Types.Timing.Milli|null {
     return this.model?.metricSavings?.INP ?? null;
   }

package/front_end/panels/timeline/overlays/OverlaysImpl.ts

@@ -204,7 +204,7 @@ export interface TimelineCharts {
 }
 
 export interface OverlayEntryQueries {
-  parsedTrace: () => Trace.Handlers.Types.ParsedTrace | null;
+  parsedTrace: () => Trace.TraceModel.ParsedTrace | null;
   isEntryCollapsedByUser: (entry: Trace.Types.Events.Event) => boolean;
   firstVisibleParentForEntry: (entry: Trace.Types.Events.Event) => Trace.Types.Events.Event | null;
 }

package/front_end/panels/timeline/utils/AICallTree.ts

@@ -22,7 +22,7 @@ function depthFirstWalk(
 
 export interface FromTimeOnThreadOptions {
   thread: {pid: Trace.Types.Events.ProcessID, tid: Trace.Types.Events.ThreadID};
-  parsedTrace: Trace.Handlers.Types.ParsedTrace;
+  parsedTrace: Trace.TraceModel.ParsedTrace;
   bounds: Trace.Types.Timing.TraceWindowMicro;
 }
 
@@ -30,13 +30,12 @@ export class AICallTree {
   constructor(
       public selectedNode: Trace.Extras.TraceTree.Node|null,
       public rootNode: Trace.Extras.TraceTree.TopDownRootNode,
-      // TODO: see if we can avoid passing around this entire thing.
-      public parsedTrace: Trace.Handlers.Types.ParsedTrace,
+      public parsedTrace: Trace.TraceModel.ParsedTrace,
   ) {
   }
 
   static findEventsForThread({thread, parsedTrace, bounds}: FromTimeOnThreadOptions): Trace.Types.Events.Event[]|null {
-    const threadEvents = parsedTrace.Renderer.processes.get(thread.pid)?.threads.get(thread.tid)?.entries;
+    const threadEvents = parsedTrace.data.Renderer.processes.get(thread.pid)?.threads.get(thread.tid)?.entries;
     if (!threadEvents) {
       return null;
     }
@@ -46,7 +45,7 @@ export class AICallTree {
 
   static findMainThreadTasks({thread, parsedTrace, bounds}: FromTimeOnThreadOptions):
       Trace.Types.Events.RunTask[]|null {
-    const threadEvents = parsedTrace.Renderer.processes.get(thread.pid)?.threads.get(thread.tid)?.entries;
+    const threadEvents = parsedTrace.data.Renderer.processes.get(thread.pid)?.threads.get(thread.tid)?.entries;
     if (!threadEvents) {
       return null;
     }
@@ -100,7 +99,7 @@ export class AICallTree {
    * This filters out other events we make such as SyntheticLayoutShifts which are not valid
    * If the event is not valid, or there is an unexpected error building the tree, `null` is returned.
    */
-  static fromEvent(selectedEvent: Trace.Types.Events.Event, parsedTrace: Trace.Handlers.Types.ParsedTrace): AICallTree
+  static fromEvent(selectedEvent: Trace.Types.Events.Event, parsedTrace: Trace.TraceModel.ParsedTrace): AICallTree
       |null {
     // Special case: performance.mark events are shown on the main thread
     // technically, but because they are instant events they are shown with a
@@ -117,7 +116,7 @@ export class AICallTree {
     }
 
     // First: check that the selected event is on the thread we have identified as the main thread.
-    const threads = Trace.Handlers.Threads.threadsInTrace(parsedTrace);
+    const threads = Trace.Handlers.Threads.threadsInTrace(parsedTrace.data);
     const thread = threads.find(t => t.pid === selectedEvent.pid && t.tid === selectedEvent.tid);
     if (!thread) {
       return null;
@@ -139,7 +138,8 @@ export class AICallTree {
     // information such as Layout Shift clusters.
     // We check Renderer + Samples to ensure we support CPU Profiles (which do
     // not populate the Renderer Handler)
-    if (!parsedTrace.Renderer.entryToNode.has(selectedEvent) && !parsedTrace.Samples.entryToNode.has(selectedEvent)) {
+    const data = parsedTrace.data;
+    if (!data.Renderer.entryToNode.has(selectedEvent) && !data.Samples.entryToNode.has(selectedEvent)) {
       return null;
     }
 
@@ -147,10 +147,10 @@ export class AICallTree {
     const {startTime, endTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(selectedEvent);
     const selectedEventBounds = Trace.Helpers.Timing.traceWindowFromMicroSeconds(
         Trace.Helpers.Timing.milliToMicro(startTime), Trace.Helpers.Timing.milliToMicro(endTime));
-    let threadEvents = parsedTrace.Renderer.processes.get(selectedEvent.pid)?.threads.get(selectedEvent.tid)?.entries;
+    let threadEvents = data.Renderer.processes.get(selectedEvent.pid)?.threads.get(selectedEvent.tid)?.entries;
     if (!threadEvents) {
       // None from the renderer: try the samples handler, this might be a CPU trace.
-      threadEvents = parsedTrace.Samples.profilesInProcess.get(selectedEvent.pid)?.get(selectedEvent.tid)?.profileCalls;
+      threadEvents = data.Samples.profilesInProcess.get(selectedEvent.pid)?.get(selectedEvent.tid)?.profileCalls;
     }
 
     if (!threadEvents) {
@@ -300,7 +300,7 @@ export class AICallTree {
   *     - This node is the selected node (S marker)
   */
   stringifyNode(
-      node: Trace.Extras.TraceTree.Node, nodeId: number, parsedTrace: Trace.Handlers.Types.ParsedTrace,
+      node: Trace.Extras.TraceTree.Node, nodeId: number, parsedTrace: Trace.TraceModel.ParsedTrace,
       selectedNode: Trace.Extras.TraceTree.Node|null, allUrls: string[], childStartingNodeIndex?: number): string {
     const event = node.event;
     if (!event) {

package/front_end/panels/timeline/utils/AIContext.ts

@@ -8,51 +8,51 @@ import type {AICallTree} from './AICallTree.js';
 
 export interface AgentFocusDataFull {
   type: 'full';
-  parsedTrace: Trace.Handlers.Types.ParsedTrace;
+  parsedTrace: Trace.TraceModel.ParsedTrace;
   insightSet: Trace.Insights.Types.InsightSet|null;
-  traceMetadata: Trace.Types.File.MetaData;
 }
 
 interface AgentFocusDataCallTree {
   type: 'call-tree';
-  parsedTrace: Trace.Handlers.Types.ParsedTrace;
+  parsedTrace: Trace.TraceModel.ParsedTrace;
   callTree: AICallTree;
 }
 
 export interface AgentFocusDataInsight {
   type: 'insight';
-  parsedTrace: Trace.Handlers.Types.ParsedTrace;
+  parsedTrace: Trace.TraceModel.ParsedTrace;
   insightSet: Trace.Insights.Types.InsightSet|null;
-  traceMetadata: Trace.Types.File.MetaData;
   insight: Trace.Insights.Types.InsightModel;
 }
 
 type AgentFocusData = AgentFocusDataCallTree|AgentFocusDataInsight|AgentFocusDataFull;
 
 export class AgentFocus {
-  static full(
-      parsedTrace: Trace.Handlers.Types.ParsedTrace, insights: Trace.Insights.Types.TraceInsightSets,
-      traceMetadata: Trace.Types.File.MetaData): AgentFocus {
+  static full(parsedTrace: Trace.TraceModel.ParsedTrace): AgentFocus {
+    if (!parsedTrace.insights) {
+      throw new Error('missing insights');
+    }
+
     // Currently only support a single insight set. Pick the first one with a navigation.
-    const insightSet = [...insights.values()].filter(insightSet => insightSet.navigation).at(0) ?? null;
+    const insightSet = [...parsedTrace.insights.values()].filter(insightSet => insightSet.navigation).at(0) ?? null;
     return new AgentFocus({
       type: 'full',
       parsedTrace,
       insightSet,
-      traceMetadata,
     });
   }
 
-  static fromInsight(
-      parsedTrace: Trace.Handlers.Types.ParsedTrace, insights: Trace.Insights.Types.TraceInsightSets,
-      traceMetadata: Trace.Types.File.MetaData, insight: Trace.Insights.Types.InsightModel): AgentFocus {
+  static fromInsight(parsedTrace: Trace.TraceModel.ParsedTrace, insight: Trace.Insights.Types.InsightModel):
+      AgentFocus {
+    if (!parsedTrace.insights) {
+      throw new Error('missing insights');
+    }
     // Currently only support a single insight set. Pick the first one with a navigation.
-    const insightSet = [...insights.values()].filter(insightSet => insightSet.navigation).at(0) ?? null;
+    const insightSet = [...parsedTrace.insights.values()].filter(insightSet => insightSet.navigation).at(0) ?? null;
     return new AgentFocus({
       type: 'insight',
       parsedTrace,
       insightSet,
-      traceMetadata,
       insight,
     });
   }
@@ -74,11 +74,9 @@ export class AgentFocus {
 
 export function getPerformanceAgentFocusFromModel(model: Trace.TraceModel.Model): AgentFocus|null {
   const parsedTrace = model.parsedTrace();
-  const insights = model.traceInsights();
-  const traceMetadata = model.metadata();
-  if (!insights || !parsedTrace || !traceMetadata) {
+  if (!parsedTrace) {
     return null;
   }
 
-  return AgentFocus.full(parsedTrace, insights, traceMetadata);
+  return AgentFocus.full(parsedTrace);
 }

package/front_end/panels/timeline/utils/EntityMapper.ts

@@ -7,7 +7,7 @@ import type * as Protocol from '../../../generated/protocol.js';
 import * as Trace from '../../../models/trace/trace.js';
 
 export class EntityMapper {
-  #parsedTrace: Trace.Handlers.Types.ParsedTrace;
+  #parsedTrace: Trace.TraceModel.ParsedTrace;
   #entityMappings: Trace.Handlers.Helpers.EntityMappings;
   #firstPartyEntity: Trace.Handlers.Helpers.Entity|null;
   #thirdPartyEvents: Trace.Types.Events.Event[] = [];
@@ -19,17 +19,18 @@ export class EntityMapper {
    */
   #resolvedCallFrames = new Set<Protocol.Runtime.CallFrame>();
 
-  constructor(parsedTrace: Trace.Handlers.Types.ParsedTrace) {
+  constructor(parsedTrace: Trace.TraceModel.ParsedTrace) {
     this.#parsedTrace = parsedTrace;
-    this.#entityMappings = this.#parsedTrace.Renderer.entityMappings;
+    this.#entityMappings = this.#parsedTrace.data.Renderer.entityMappings;
     this.#firstPartyEntity = this.#findFirstPartyEntity();
     this.#thirdPartyEvents = this.#getThirdPartyEvents();
   }
 
   #findFirstPartyEntity(): Trace.Handlers.Helpers.Entity|null {
     // As a starting point, we consider the first navigation as the 1P.
-    const nav = Array.from(this.#parsedTrace.Meta.navigationsByNavigationId.values()).sort((a, b) => a.ts - b.ts)[0];
-    const firstPartyUrl = nav?.args.data?.documentLoaderURL ?? this.#parsedTrace.Meta.mainFrameURL;
+    const nav =
+        Array.from(this.#parsedTrace.data.Meta.navigationsByNavigationId.values()).sort((a, b) => a.ts - b.ts)[0];
+    const firstPartyUrl = nav?.args.data?.documentLoaderURL ?? this.#parsedTrace.data.Meta.mainFrameURL;
     if (!firstPartyUrl) {
       return null;
     }

package/front_end/panels/timeline/utils/EntryName.ts

@@ -55,12 +55,12 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
  */
 export function nameForEntry(
     entry: Trace.Types.Events.Event,
-    parsedTrace?: Trace.Handlers.Types.ParsedTrace,
+    parsedTrace?: Trace.TraceModel.ParsedTrace,
     ): string {
   if (Trace.Types.Events.isProfileCall(entry)) {
     if (parsedTrace) {
       const potentialCallName =
-          Trace.Handlers.ModelHandlers.Samples.getProfileCallFunctionName(parsedTrace.Samples, entry);
+          Trace.Handlers.ModelHandlers.Samples.getProfileCallFunctionName(parsedTrace.data.Samples, entry);
       // We need this extra check because the call name could be the empty
       // string. If it is, we want to fallback.
       if (potentialCallName) {

package/front_end/panels/timeline/utils/EntryNodes.ts

@@ -15,7 +15,7 @@ const domNodesForEventCache =
  * The result is cached so you can safely call this multiple times.
  **/
 export function nodeIdsForEvent(
-    modelData: Trace.Handlers.Types.ParsedTrace,
+    parsedTrace: Trace.TraceModel.ParsedTrace,
     event: Trace.Types.Events.Event,
     ): Set<Protocol.DOM.BackendNodeId> {
   const fromCache = nodeIdsForEventCache.get(event);
@@ -45,12 +45,12 @@ export function nodeIdsForEvent(
     // For a DecodeImage event, we can use the ImagePaintingHandler, which has
     // done the work to build the relationship between a DecodeImage event and
     // the corresponding PaintImage event.
-    const paintImageEvent = modelData.ImagePainting.paintImageForEvent.get(event);
+    const paintImageEvent = parsedTrace.data.ImagePainting.paintImageForEvent.get(event);
     if (typeof paintImageEvent?.args.data.nodeId !== 'undefined') {
       foundIds.add(paintImageEvent.args.data.nodeId);
     }
   } else if (Trace.Types.Events.isDrawLazyPixelRef(event) && event.args?.LazyPixelRef) {
-    const paintImageEvent = modelData.ImagePainting.paintImageByDrawLazyPixelRef.get(event.args.LazyPixelRef);
+    const paintImageEvent = parsedTrace.data.ImagePainting.paintImageByDrawLazyPixelRef.get(event.args.LazyPixelRef);
     if (typeof paintImageEvent?.args.data.nodeId !== 'undefined') {
       foundIds.add(paintImageEvent.args.data.nodeId);
     }
@@ -67,14 +67,14 @@ export function nodeIdsForEvent(
  * This method is cached for the given event.
  */
 export async function relatedDOMNodesForEvent(
-    modelData: Trace.Handlers.Types.ParsedTrace,
+    parsedTrace: Trace.TraceModel.ParsedTrace,
     event: Trace.Types.Events.Event): Promise<Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode|null>|null> {
   const fromCache = domNodesForEventCache.get(event);
   if (fromCache) {
     return fromCache;
   }
 
-  const nodeIds = nodeIdsForEvent(modelData, event);
+  const nodeIds = nodeIdsForEvent(parsedTrace, event);
   if (nodeIds.size) {
     const frame = event.args?.data?.frame as Protocol.Page.FrameId;
     const result = await domNodesForBackendIds(frame, nodeIds);

package/front_end/panels/timeline/utils/EntryStyles.ts

@@ -559,7 +559,7 @@ export class TimelineCategory {
   title: Platform.UIString.LocalizedString;
   visible: boolean;
   childColor: string;
-  colorInternal: string;
+  #color: string;
   #hidden?: boolean;
 
   constructor(
@@ -569,7 +569,7 @@ export class TimelineCategory {
     this.title = title;
     this.visible = visible;
     this.childColor = childColor;
-    this.colorInternal = color;
+    this.#color = color;
     this.hidden = false;
   }
 
@@ -581,11 +581,11 @@ export class TimelineCategory {
     return this.getComputedColorValue();
   }
   getCSSValue(): string {
-    return `var(${this.colorInternal})`;
+    return `var(${this.#color})`;
   }
 
   getComputedColorValue(): string {
-    return ThemeSupport.ThemeSupport.instance().getComputedValue(this.colorInternal);
+    return ThemeSupport.ThemeSupport.instance().getComputedValue(this.#color);
   }
 
   set hidden(hidden: boolean) {

package/front_end/panels/timeline/utils/FreshRecording.ts

@@ -12,7 +12,7 @@ let instance: Tracker|null = null;
  * is loaded, we set this flag accordingly.
  **/
 export class Tracker {
-  #freshRecordings = new WeakSet<Trace.Handlers.Types.ParsedTrace>();
+  #freshRecordings = new WeakSet<Trace.TraceModel.ParsedTrace>();
 
   static instance(opts: {forceNew: boolean} = {forceNew: false}): Tracker {
     if (!instance || opts.forceNew) {
@@ -21,11 +21,11 @@ export class Tracker {
     return instance;
   }
 
-  registerFreshRecording(data: Trace.Handlers.Types.ParsedTrace): void {
+  registerFreshRecording(data: Trace.TraceModel.ParsedTrace): void {
     this.#freshRecordings.add(data);
   }
 
-  recordingIsFresh(data: Trace.Handlers.Types.ParsedTrace): boolean {
+  recordingIsFresh(data: Trace.TraceModel.ParsedTrace): boolean {
     return this.#freshRecordings.has(data);
   }
 }

package/front_end/panels/timeline/utils/Helpers.ts

@@ -2,18 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../ui/components/markdown_view/markdown_view.js';
-
-import type * as Common from '../../../core/common/common.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as CrUXManager from '../../../models/crux-manager/crux-manager.js';
 import type * as Trace from '../../../models/trace/trace.js';
-import * as Marked from '../../../third_party/marked/marked.js';
-import * as Lit from '../../../ui/lit/lit.js';
 import * as MobileThrottling from '../../mobile_throttling/mobile_throttling.js';
 
-const {html} = Lit;
 const MAX_ORIGIN_LENGTH = 60;
 
 export function getThrottlingRecommendations(): {
@@ -127,18 +121,6 @@ export function shortenUrl(url: URL, maxChars = 20): string {
   return shortenedUrl;
 }
 
-/**
- * Returns a rendered MarkdownView component.
- *
- * This should only be used for markdown that is guaranteed to be valid,
- * and not contain any user-generated content.
- */
-export function md(markdown: Common.UIString.LocalizedString): Lit.TemplateResult {
-  const tokens = Marked.Marked.lexer(markdown);
-  const data = {tokens};
-  return html`<devtools-markdown-view .data=${data}></devtools-markdown-view>`;
-}
-
 /**
  * Returns a string containing both the origin and its 3rd party entity.
  *

package/front_end/panels/timeline/utils/InsightAIContext.ts

@@ -7,7 +7,7 @@ import * as Trace from '../../../models/trace/trace.js';
 import {AICallTree} from './AICallTree.js';
 
 export class AIQueries {
-  static findMainThread(navigationId: string|undefined, parsedTrace: Trace.Handlers.Types.ParsedTrace):
+  static findMainThread(navigationId: string|undefined, parsedTrace: Trace.TraceModel.ParsedTrace):
       Trace.Handlers.Threads.ThreadData|null {
     /**
      * We cannot assume that there is one main thread as there are scenarios
@@ -26,14 +26,14 @@ export class AIQueries {
     let mainThreadTID: Trace.Types.Events.ThreadID|null = null;
 
     if (navigationId) {
-      const navigation = parsedTrace.Meta.navigationsByNavigationId.get(navigationId);
+      const navigation = parsedTrace.data.Meta.navigationsByNavigationId.get(navigationId);
       if (navigation?.args.data?.isOutermostMainFrame) {
         mainThreadPID = navigation.pid;
         mainThreadTID = navigation.tid;
       }
     }
 
-    const threads = Trace.Handlers.Threads.threadsInTrace(parsedTrace);
+    const threads = Trace.Handlers.Threads.threadsInTrace(parsedTrace.data);
     const thread = threads.find(thread => {
       if (mainThreadPID && mainThreadTID) {
         return thread.pid === mainThreadPID && thread.tid === mainThreadTID;
@@ -49,7 +49,7 @@ export class AIQueries {
    */
   static mainThreadActivityBottomUp(
       navigationId: string|undefined, bounds: Trace.Types.Timing.TraceWindowMicro,
-      parsedTrace: Trace.Handlers.Types.ParsedTrace): Trace.Extras.TraceTree.BottomUpRootNode|null {
+      parsedTrace: Trace.TraceModel.ParsedTrace): Trace.Extras.TraceTree.BottomUpRootNode|null {
     const thread = this.findMainThread(navigationId, parsedTrace);
     if (!thread) {
       return null;
@@ -82,7 +82,7 @@ export class AIQueries {
    */
   static mainThreadActivityTopDown(
       navigationId: string|undefined, bounds: Trace.Types.Timing.TraceWindowMicro,
-      parsedTrace: Trace.Handlers.Types.ParsedTrace): AICallTree|null {
+      parsedTrace: Trace.TraceModel.ParsedTrace): AICallTree|null {
     const thread = this.findMainThread(navigationId, parsedTrace);
     if (!thread) {
       return null;
@@ -103,7 +103,7 @@ export class AIQueries {
    */
   static longestTasks(
       navigationId: string|undefined, bounds: Trace.Types.Timing.TraceWindowMicro,
-      parsedTrace: Trace.Handlers.Types.ParsedTrace, limit = 3): AICallTree[]|null {
+      parsedTrace: Trace.TraceModel.ParsedTrace, limit = 3): AICallTree[]|null {
     const thread = this.findMainThread(navigationId, parsedTrace);
     if (!thread) {
       return null;