chrome-devtools-frontend 1.0.1512147 → 1.0.1513662

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

@@ -83,8 +83,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface ViewInput {
   event: Trace.Types.Events.SyntheticLayoutShift|Trace.Types.Events.SyntheticLayoutShiftCluster|null;
-  traceInsightsSets: Trace.Insights.Types.TraceInsightSets|null;
-  parsedTrace: Trace.Handlers.Types.ParsedTrace|null;
+  parsedTrace: Trace.TraceModel.ParsedTrace|null;
   isFreshRecording: boolean;
   togglePopover: (e: MouseEvent) => void;
   onEventClick: (event: Trace.Types.Events.Event) => void;
@@ -93,8 +92,7 @@ export interface ViewInput {
 export class LayoutShiftDetails extends UI.Widget.Widget {
   #view: typeof DEFAULT_VIEW;
   #event: Trace.Types.Events.SyntheticLayoutShift|Trace.Types.Events.SyntheticLayoutShiftCluster|null = null;
-  #traceInsightsSets: Trace.Insights.Types.TraceInsightSets|null = null;
-  #parsedTrace: Trace.Handlers.Types.ParsedTrace|null = null;
+  #parsedTrace: Trace.TraceModel.ParsedTrace|null = null;
   #isFreshRecording = false;
 
   constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
@@ -107,12 +105,7 @@ export class LayoutShiftDetails extends UI.Widget.Widget {
     void this.requestUpdate();
   }
 
-  set traceInsightsSets(traceInsightsSets: Trace.Insights.Types.TraceInsightSets|null) {
-    this.#traceInsightsSets = traceInsightsSets;
-    void this.requestUpdate();
-  }
-
-  set parsedTrace(parsedTrace: Trace.Handlers.Types.ParsedTrace|null) {
+  set parsedTrace(parsedTrace: Trace.TraceModel.ParsedTrace|null) {
     this.#parsedTrace = parsedTrace;
     void this.requestUpdate();
   }
@@ -154,7 +147,6 @@ export class LayoutShiftDetails extends UI.Widget.Widget {
     this.#view(
         {
           event: this.#event,
-          traceInsightsSets: this.#traceInsightsSets,
           parsedTrace: this.#parsedTrace,
           isFreshRecording: this.#isFreshRecording,
           togglePopover: e => this.#togglePopover(e),
@@ -189,9 +181,9 @@ export const DEFAULT_VIEW: (input: ViewInput, output: object, target: HTMLElemen
         </div>
         ${Trace.Types.Events.isSyntheticLayoutShift(input.event) ?
           renderLayoutShiftDetails(
-            input.event, input.traceInsightsSets, input.parsedTrace, input.isFreshRecording, input.onEventClick,
+            input.event, input.parsedTrace.insights, input.parsedTrace, input.isFreshRecording, input.onEventClick,
          ) : renderLayoutShiftClusterDetails(
-           input.event, input.traceInsightsSets, input.parsedTrace, input.onEventClick,
+           input.event, input.parsedTrace.insights, input.parsedTrace, input.onEventClick,
          )}
         </div>
       </div>
@@ -201,7 +193,7 @@ export const DEFAULT_VIEW: (input: ViewInput, output: object, target: HTMLElemen
 
 function renderLayoutShiftDetails(
     layoutShift: Trace.Types.Events.SyntheticLayoutShift, traceInsightsSets: Trace.Insights.Types.TraceInsightSets|null,
-    parsedTrace: Trace.Handlers.Types.ParsedTrace, isFreshRecording: boolean,
+    parsedTrace: Trace.TraceModel.ParsedTrace, isFreshRecording: boolean,
     onEventClick: (e: Trace.Types.Events.Event) => void): Lit.LitTemplate {
   if (!traceInsightsSets) {
     return Lit.nothing;
@@ -252,7 +244,7 @@ function renderLayoutShiftDetails(
 
 function renderLayoutShiftClusterDetails(
     cluster: Trace.Types.Events.SyntheticLayoutShiftCluster,
-    traceInsightsSets: Trace.Insights.Types.TraceInsightSets|null, parsedTrace: Trace.Handlers.Types.ParsedTrace,
+    traceInsightsSets: Trace.Insights.Types.TraceInsightSets|null, parsedTrace: Trace.TraceModel.ParsedTrace,
     onEventClick: (e: Trace.Types.Events.Event) => void): Lit.LitTemplate {
   if (!traceInsightsSets) {
     return Lit.nothing;
@@ -303,7 +295,7 @@ function renderLayoutShiftClusterDetails(
 
 function renderShiftRow(
     currentShift: Trace.Types.Events.SyntheticLayoutShift, userHasSingleShiftSelected: boolean,
-    parsedTrace: Trace.Handlers.Types.ParsedTrace, elementsShifted: Trace.Types.Events.TraceImpactedNode[],
+    parsedTrace: Trace.TraceModel.ParsedTrace, elementsShifted: Trace.Types.Events.TraceImpactedNode[],
     onEventClick: (e: Trace.Types.Events.Event) => void,
     rootCauses: Trace.Insights.Models.CLSCulprits.LayoutShiftRootCausesData|undefined): Lit.LitTemplate {
   const score = currentShift.args.data?.weighted_score_delta;
@@ -340,10 +332,10 @@ function renderShiftRow(
 function renderStartTime(
     shift: Trace.Types.Events.SyntheticLayoutShift,
     userHasSingleShiftSelected: boolean,
-    parsedTrace: Trace.Handlers.Types.ParsedTrace,
+    parsedTrace: Trace.TraceModel.ParsedTrace,
     onEventClick: (e: Trace.Types.Events.Event) => void,
     ): Lit.TemplateResult {
-  const ts = Trace.Types.Timing.Micro(shift.ts - parsedTrace.Meta.traceBounds.min);
+  const ts = Trace.Types.Timing.Micro(shift.ts - parsedTrace.data.Meta.traceBounds.min);
   if (userHasSingleShiftSelected) {
     return html`${i18n.TimeUtilities.preciseMillisToString(Helpers.Timing.microToMilli(ts))}`;
   }
@@ -356,12 +348,11 @@ function renderStartTime(
 
 function renderParentCluster(
     cluster: Trace.Types.Events.SyntheticLayoutShiftCluster|undefined,
-    onEventClick: (e: Trace.Types.Events.Event) => void,
-    parsedTrace: Trace.Handlers.Types.ParsedTrace): Lit.LitTemplate {
+    onEventClick: (e: Trace.Types.Events.Event) => void, parsedTrace: Trace.TraceModel.ParsedTrace): Lit.LitTemplate {
   if (!cluster) {
     return Lit.nothing;
   }
-  const ts = Trace.Types.Timing.Micro(cluster.ts - (parsedTrace?.Meta.traceBounds.min ?? 0));
+  const ts = Trace.Types.Timing.Micro(cluster.ts - (parsedTrace.data.Meta.traceBounds.min ?? 0));
   const clusterTs = i18n.TimeUtilities.formatMicroSecondsTime(ts);
 
   // clang-format off

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

@@ -28,8 +28,9 @@ 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 * as MobileThrottling from '../../mobile_throttling/mobile_throttling.js';
-import {getThrottlingRecommendations, md} from '../utils/Helpers.js';
+import {getThrottlingRecommendations} from '../utils/Helpers.js';
 
+import {md} from './insights/Helpers.js';
 import liveMetricsViewStyles from './liveMetricsView.css.js';
 import type {MetricCardData} from './MetricCard.js';
 import metricValueStyles from './metricValueStyles.css.js';

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

@@ -124,7 +124,7 @@ export class NetworkRequestDetails extends UI.Widget.Widget {
   #target: SDK.Target.Target|null = null;
   #linkifier: LegacyComponents.Linkifier.Linkifier|null = null;
   #serverTimings: SDK.ServerTiming.ServerTiming[]|null = null;
-  #parsedTrace: Trace.Handlers.Types.ParsedTrace|null = null;
+  #parsedTrace: Trace.TraceModel.ParsedTrace|null = null;
 
   constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
     super(element);
@@ -137,7 +137,7 @@ export class NetworkRequestDetails extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
-  set parsedTrace(parsedTrace: Trace.Handlers.Types.ParsedTrace|null) {
+  set parsedTrace(parsedTrace: Trace.TraceModel.ParsedTrace|null) {
     this.#parsedTrace = parsedTrace;
     this.requestUpdate();
   }
@@ -192,7 +192,7 @@ export interface ViewInput {
   entityMapper: TimelineUtils.EntityMapper.EntityMapper|null;
   serverTimings: SDK.ServerTiming.ServerTiming[]|null;
   linkifier: LegacyComponents.Linkifier.Linkifier|null;
-  parsedTrace: Trace.Handlers.Types.ParsedTrace|null;
+  parsedTrace: Trace.TraceModel.ParsedTrace|null;
 }
 
 export const DEFAULT_VIEW: (
@@ -428,7 +428,7 @@ function renderServerTimings(timings: SDK.ServerTiming.ServerTiming[]|null): Lit
 }
 function renderInitiatedBy(
     request: Trace.Types.Events.SyntheticNetworkRequest,
-    parsedTrace: Trace.Handlers.Types.ParsedTrace|null,
+    parsedTrace: Trace.TraceModel.ParsedTrace|null,
     target: SDK.Target.Target|null,
     linkifier: LegacyComponents.Linkifier.Linkifier|null,
     ): Lit.LitTemplate {
@@ -451,7 +451,7 @@ function renderInitiatedBy(
     }
   }
   // If we do not, we can see if the network handler found an initiator and try to link by URL
-  const initiator = parsedTrace?.NetworkRequests.eventToInitiator.get(request);
+  const initiator = parsedTrace?.data.NetworkRequests.eventToInitiator.get(request);
   if (initiator) {
     link = linkifier.maybeLinkifyScriptLocation(
         target,

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

@@ -134,16 +134,11 @@ export class SidebarWidget extends UI.Widget.VBox {
     this.#tabbedPane.setBadge('annotations', annotations.length > 0 ? annotations.length.toString() : null);
   }
 
-  setParsedTrace(parsedTrace: Trace.Handlers.Types.ParsedTrace|null, metadata: Trace.Types.File.MetaData|null): void {
-    this.#insightsView.setParsedTrace(parsedTrace, metadata);
-  }
-
-  setInsights(insights: Trace.Insights.Types.TraceInsightSets|null): void {
-    this.#insightsView.setInsights(insights);
-
+  setParsedTrace(parsedTrace: Trace.TraceModel.ParsedTrace|null): void {
+    this.#insightsView.setParsedTrace(parsedTrace);
     this.#tabbedPane.setTabEnabled(
         SidebarTabs.INSIGHTS,
-        insights !== null && insights.size > 0,
+        Boolean(parsedTrace?.insights && parsedTrace.insights.size > 0),
     );
   }
 
@@ -167,13 +162,8 @@ class InsightsView extends UI.Widget.VBox {
     this.element.appendChild(this.#component);
   }
 
-  setParsedTrace(parsedTrace: Trace.Handlers.Types.ParsedTrace|null, metadata: Trace.Types.File.MetaData|null): void {
+  setParsedTrace(parsedTrace: Trace.TraceModel.ParsedTrace|null): void {
     this.#component.parsedTrace = parsedTrace;
-    this.#component.traceMetadata = metadata;
-  }
-
-  setInsights(data: Trace.Insights.Types.TraceInsightSets|null): void {
-    this.#component.insights = data;
   }
 
   getActiveInsight(): ActiveInsight|null {

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

@@ -20,9 +20,7 @@ const {html} = Lit;
 
 export class SidebarInsightsTab extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
-  #parsedTrace: Trace.Handlers.Types.ParsedTrace|null = null;
-  #traceMetadata: Trace.Types.File.MetaData|null = null;
-  #insights: Trace.Insights.Types.TraceInsightSets|null = null;
+  #parsedTrace: Trace.TraceModel.ParsedTrace|null = null;
   #activeInsight: ActiveInsight|null = null;
   #selectedCategory = Trace.Insights.Types.InsightCategory.ALL;
   /**
@@ -35,39 +33,19 @@ export class SidebarInsightsTab extends HTMLElement {
 
   // TODO(paulirish): add back a disconnectedCallback() to avoid memory leaks that doesn't cause b/372943062
 
-  set parsedTrace(data: Trace.Handlers.Types.ParsedTrace|null) {
+  set parsedTrace(data: Trace.TraceModel.ParsedTrace|null) {
     if (data === this.#parsedTrace) {
       return;
     }
-    this.#parsedTrace = data;
-    this.#selectedInsightSetKey = null;
-
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
-  }
 
-  set traceMetadata(data: Trace.Types.File.MetaData|null) {
-    if (data === this.#traceMetadata) {
-      return;
-    }
-    this.#traceMetadata = data;
+    this.#parsedTrace = data;
     this.#selectedInsightSetKey = null;
 
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
-  }
-
-  set insights(data: Trace.Insights.Types.TraceInsightSets|null) {
-    if (data === this.#insights) {
-      return;
-    }
-
-    this.#selectedInsightSetKey = null;
-    if (!data || !this.#parsedTrace) {
-      return;
+    if (this.#parsedTrace?.insights) {
+      /** Select the first set. Filtering out trivial sets was done back in {@link Trace.Processor.#computeInsightsForInitialTracePeriod} */
+      this.#selectedInsightSetKey = [...this.#parsedTrace.insights.keys()].at(0) ?? null;
     }
 
-    this.#insights = new Map(data);
-    /** Select the first set. Filtering out trivial sets was done back in {@link Trace.Processor.#computeInsightsForInitialTracePeriod} */
-    this.#selectedInsightSetKey = [...this.#insights.keys()].at(0) ?? null;
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
   }
 
@@ -102,7 +80,7 @@ export class SidebarInsightsTab extends HTMLElement {
   }
 
   #insightSetHovered(id: string): void {
-    const data = this.#insights?.get(id);
+    const data = this.#parsedTrace?.insights?.get(id);
     data && this.dispatchEvent(new Insights.SidebarInsight.InsightSetHovered(data.bounds));
   }
 
@@ -112,7 +90,7 @@ export class SidebarInsightsTab extends HTMLElement {
 
   #onZoomClick(event: Event, id: string): void {
     event.stopPropagation();
-    const data = this.#insights?.get(id);
+    const data = this.#parsedTrace?.insights?.get(id);
     if (!data) {
       return;
     }
@@ -170,27 +148,26 @@ export class SidebarInsightsTab extends HTMLElement {
   }
 
   #render(): void {
-    if (!this.#parsedTrace || !this.#insights) {
+    if (!this.#parsedTrace?.insights) {
       Lit.render(Lit.nothing, this.#shadow, {host: this});
       return;
     }
 
-    const hasMultipleInsightSets = this.#insights.size > 1;
-    const labels = Utils.Helpers.createUrlLabels([...this.#insights.values()].map(({url}) => url));
+    const insights = this.#parsedTrace.insights;
+    const hasMultipleInsightSets = insights.size > 1;
+    const labels = Utils.Helpers.createUrlLabels([...insights.values()].map(({url}) => url));
 
     const contents =
         // clang-format off
      html`
       <style>${sidebarInsightsTabStyles}</style>
       <div class="insight-sets-wrapper">
-        ${[...this.#insights.values()].map(({id, url}, index) => {
+        ${[...insights.values()].map(({id, url}, index) => {
           const data: SidebarSingleInsightSetData = {
-            insights: this.#insights,
             insightSetKey: id,
             activeCategory: this.#selectedCategory,
             activeInsight: this.#activeInsight,
             parsedTrace: this.#parsedTrace,
-            traceMetadata: this.#traceMetadata,
           };
 
           const contents = html`

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) {