chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

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

@@ -5,12 +5,13 @@
 import './Table.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
-import * as Trace from '../../../../models/trace/trace.js';
+import type {FontDisplayInsightModel} from '../../../../models/trace/insights/FontDisplay.js';
+import type * as Trace from '../../../../models/trace/trace.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
 import {eventRef} from './EventRef.js';
-import {BaseInsight, shouldRenderForCategory} from './Helpers.js';
+import {BaseInsightComponent, shouldRenderForCategory} from './Helpers.js';
 import type * as SidebarInsight from './SidebarInsight.js';
 import type {TableData} from './Table.js';
 import {Category} from './types.js';
@@ -18,13 +19,6 @@ import {Category} from './types.js';
 const {html} = LitHtml;
 
 const UIStrings = {
-  /** Title of an insight that provides details about the fonts used on the page, and the value of their `font-display` properties. */
-  title: 'Font display',
-  /**
-   * @description Text to tell the user about the font-display CSS feature to help improve a the UX of a page.
-   */
-  description:
-      'Consider using a [font-display](https://developer.chrome.com/blog/font-display) of `swap` or `optional` to ensure text is consistently visible. `swap` can be further optimized to mitigate layout shifts with [font metric overrides](https://developer.chrome.com/blog/font-fallbacks).',
   /** Column for a font loaded by the page to render text. */
   fontColumn: 'Font',
   /** Column for the amount of time wasted. */
@@ -34,24 +28,21 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/FontDisplay.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class FontDisplay extends BaseInsight {
+export class FontDisplay extends BaseInsightComponent<FontDisplayInsightModel> {
   static override readonly litTagName = LitHtml.literal`devtools-performance-font-display`;
   override insightCategory = Category.INP;
   override internalName: string = 'font-display';
-  override userVisibleTitle: string = i18nString(UIStrings.title);
-  override description: string = i18nString(UIStrings.description);
 
   #overlayForRequest = new Map<Trace.Types.Events.SyntheticNetworkRequest, Overlays.Overlays.TimelineOverlay>();
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
     this.#overlayForRequest.clear();
 
-    const insight = Trace.Insights.Common.getInsight('FontDisplay', this.data.insights, this.data.insightSetKey);
-    if (!insight) {
+    if (!this.model) {
       return [];
     }
 
-    for (const font of insight.fonts) {
+    for (const font of this.model.fonts) {
       this.#overlayForRequest.set(font.request, {
         type: 'ENTRY_OUTLINE',
         entry: font.request,
@@ -62,13 +53,17 @@ export class FontDisplay extends BaseInsight {
     return [...this.#overlayForRequest.values()];
   }
 
-  #render(insight: Trace.Insights.Types.InsightResults['FontDisplay']): LitHtml.TemplateResult {
+  #render(insight: Trace.Insights.Types.InsightModels['FontDisplay']): LitHtml.LitTemplate {
+    if (!this.model) {
+      return LitHtml.nothing;
+    }
+
     // clang-format off
     return html`
         <div class="insights">
             <devtools-performance-sidebar-insight .data=${{
-              title: this.userVisibleTitle,
-              description: this.description,
+              title: this.model.title,
+              description: this.model.description,
               expanded: this.isActive(),
               internalName: this.internalName,
               estimatedSavingsTime: insight.metricSavings?.FCP,
@@ -97,19 +92,18 @@ export class FontDisplay extends BaseInsight {
   }
 
   override getRelatedEvents(): Trace.Types.Events.Event[] {
-    const insight = Trace.Insights.Common.getInsight('FontDisplay', this.data.insights, this.data.insightSetKey);
-    return insight?.relatedEvents ?? [];
+    return this.model?.relatedEvents ?? [];
   }
 
   override render(): void {
-    const insight = Trace.Insights.Common.getInsight('FontDisplay', this.data.insights, this.data.insightSetKey);
-    const shouldShow = insight && insight.fonts.find(font => font.wastedTime);
+    const model = this.model;
+    const shouldShow = model && model.fonts.find(font => font.wastedTime);
 
     const matchesCategory = shouldRenderForCategory({
       activeCategory: this.data.activeCategory,
       insightCategory: this.insightCategory,
     });
-    const output = shouldShow && matchesCategory ? this.#render(insight) : LitHtml.nothing;
+    const output = shouldShow && matchesCategory ? this.#render(model) : LitHtml.nothing;
     LitHtml.render(output, this.shadow, {host: this});
   }
 }

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

@@ -4,11 +4,10 @@
 
 import '../../../../ui/components/markdown_view/markdown_view.js';
 
-import * as Platform from '../../../../core/platform/platform.js';
+import type {InsightModel} from '../../../../models/trace/insights/types.js';
 import type * as Trace from '../../../../models/trace/trace.js';
 import * as Marked from '../../../../third_party/marked/marked.js';
 import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
-import type * as MarkdownView from '../../../../ui/components/markdown_view/markdown_view.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
 import type * as Overlays from '../../overlays/overlays.js';
@@ -38,7 +37,6 @@ export function insightIsActive(options: {
 }
 
 export interface BaseInsightData {
-  insights: Trace.Insights.Types.TraceInsightSets|null;
   parsedTrace: Trace.Handlers.Types.ParsedTrace|null;
   /** The key into `insights` that contains this particular insight. */
   insightSetKey: string|null;
@@ -48,19 +46,22 @@ export interface BaseInsightData {
 
 // TODO(crbug.com/371615739): BaseInsight, SidebarInsight should be combined.
 // This is an abstract base class so the component naming rules do not apply.
-export abstract class BaseInsight extends HTMLElement {
+export abstract class BaseInsightComponent<T extends InsightModel<{}>> extends HTMLElement {
   abstract internalName: string;
   abstract insightCategory: Category;
-  abstract userVisibleTitle: string;
-  abstract description: string;
   // So we can use the TypeScript BaseInsight class without getting warnings
   // about litTagName. Every child should overrwrite this.
   static readonly litTagName = LitHtml.literal``;
 
   protected readonly shadow = this.attachShadow({mode: 'open'});
 
+  #model: T|null = null;
+
+  get model(): T|null {
+    return this.#model;
+  }
+
   protected data: BaseInsightData = {
-    insights: null,
     parsedTrace: null,
     insightSetKey: null,
     activeInsight: null,
@@ -87,19 +88,19 @@ export abstract class BaseInsight extends HTMLElement {
     this.dataset.insightName = this.internalName;
 
     // TODO(crbug.com/371615739): this should be moved to model/trace/insights
-    if (!this.#hasRegisteredRelatedEvents) {
+    if (!this.#hasRegisteredRelatedEvents && this.#model) {
       this.#hasRegisteredRelatedEvents = true;
 
       const events = this.getRelatedEvents();
       if (events.length) {
         this.dispatchEvent(new SidebarInsight.InsightProvideRelatedEvents(
-            this.userVisibleTitle, events, this.#dispatchInsightActivatedEvent.bind(this)));
+            this.#model.title, events, this.#dispatchInsightActivatedEvent.bind(this)));
       }
     }
   }
 
-  set insights(insights: Trace.Insights.Types.TraceInsightSets|null) {
-    this.data.insights = insights;
+  set model(model: T) {
+    this.#model = model;
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 
@@ -146,6 +147,8 @@ export abstract class BaseInsight extends HTMLElement {
         this.internalName,
         this.data.insightSetKey,
         this.getInitialOverlays(),
+        // TODO: this could be cached.
+        this.getRelatedEvents(),
         ));
   }
 
@@ -199,12 +202,6 @@ export abstract class BaseInsight extends HTMLElement {
       insightSetKey: this.data.insightSetKey,
     });
   }
-
-  getInsightSetUrl(): URL {
-    const url = this.data.insights?.get(this.data.insightSetKey ?? '')?.url;
-    Platform.TypeScriptUtilities.assertNotNullOrUndefined(url, 'Expected url for insight set');
-    return new URL(url);
-  }
 }
 
 /**
@@ -214,7 +211,6 @@ export abstract class BaseInsight extends HTMLElement {
  */
 export function md(markdown: string): LitHtml.TemplateResult {
   const tokens = Marked.Marked.lexer(markdown);
-  return html`<devtools-markdown-view
-    .data=${{tokens} as MarkdownView.MarkdownView.MarkdownViewData}>
-  </devtools-markdown-view>`;
+  const data = {tokens};
+  return html`<devtools-markdown-view .data=${data}></devtools-markdown-view>`;
 }

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

@@ -6,27 +6,17 @@ import './Table.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
+import type {INPInsightModel} from '../../../../models/trace/insights/InteractionToNextPaint.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
-import {BaseInsight, shouldRenderForCategory} from './Helpers.js';
-import type * as SidebarInsight from './SidebarInsight.js';
-import type {TableData} from './Table.js';
+import {BaseInsightComponent, shouldRenderForCategory} from './Helpers.js';
 import {Category} from './types.js';
 
 const {html} = LitHtml;
 
 const UIStrings = {
-  /**
-   * @description Text to tell the user about the longest user interaction.
-   */
-  description:
-      'Start investigating with the longest phase. [Delays can be minimized](https://web.dev/articles/optimize-inp#optimize_interactions). To reduce processing duration, [optimize the main-thread costs](https://web.dev/articles/optimize-long-tasks), often JS.',
-  /**
-   * @description Title for the performance insight "INP by phase", which shows a breakdown of INP by phases / sections.
-   */
-  title: 'INP by phase',
   /**
    *@description Label used for the phase/component/stage/section of a larger duration.
    */
@@ -54,21 +44,17 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/InteractionToNextPaint.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class InteractionToNextPaint extends BaseInsight {
+export class InteractionToNextPaint extends BaseInsightComponent<INPInsightModel> {
   static override readonly litTagName = LitHtml.literal`devtools-performance-inp`;
   override insightCategory: Category = Category.INP;
   override internalName: string = 'inp';
-  override userVisibleTitle: string = i18nString(UIStrings.title);
-  override description: string = i18nString(UIStrings.description);
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
-    const insight =
-        Trace.Insights.Common.getInsight('InteractionToNextPaint', this.data.insights, this.data.insightSetKey);
-    if (!insight) {
+    if (!this.model) {
       return [];
     }
 
-    const event = insight.longestInteractionEvent;
+    const event = this.model.longestInteractionEvent;
     if (!event) {
       return [];
     }
@@ -110,7 +96,11 @@ export class InteractionToNextPaint extends BaseInsight {
     ];
   }
 
-  #render(event: Trace.Types.Events.SyntheticInteractionPair): LitHtml.TemplateResult {
+  #render(event: Trace.Types.Events.SyntheticInteractionPair): LitHtml.LitTemplate {
+    if (!this.model) {
+      return LitHtml.nothing;
+    }
+
     const time = (us: Trace.Types.Timing.MicroSeconds): string =>
         i18n.TimeUtilities.millisToString(Platform.Timing.microSecondsToMilliSeconds(us));
 
@@ -118,11 +108,11 @@ export class InteractionToNextPaint extends BaseInsight {
     return html`
         <div class="insights">
             <devtools-performance-sidebar-insight .data=${{
-            title: this.userVisibleTitle,
-            description: this.description,
+            title: this.model.title,
+            description: this.model.description,
             internalName: this.internalName,
             expanded: this.isActive(),
-            } as SidebarInsight.InsightDetails}
+            }}
             @insighttoggleclick=${this.onSidebarClick}>
                 <div slot="insight-content" class="insight-section">
                   ${html`<devtools-performance-table
@@ -143,24 +133,20 @@ export class InteractionToNextPaint extends BaseInsight {
                           overlays: this.#createOverlaysForPhase(event, 2),
                         },
                       ],
-                    } as TableData}>
+                    }}>
                   </devtools-performance-table>`}
                 </div>
             </devtools-performance-sidebar-insight>
         </div>`;
-    // clang-format on
+            // clang-format on
   }
 
   override getRelatedEvents(): Trace.Types.Events.Event[] {
-    const insight =
-        Trace.Insights.Common.getInsight('InteractionToNextPaint', this.data.insights, this.data.insightSetKey);
-    return insight?.relatedEvents ?? [];
+    return this.model?.relatedEvents ?? [];
   }
 
   override render(): void {
-    const insight =
-        Trace.Insights.Common.getInsight('InteractionToNextPaint', this.data.insights, this.data.insightSetKey);
-    const event = insight?.longestInteractionEvent;
+    const event = this.model?.longestInteractionEvent;
 
     const matchesCategory = shouldRenderForCategory({
       activeCategory: this.data.activeCategory,

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

@@ -5,28 +5,19 @@
 import '../../../../ui/components/icon_button/icon_button.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
-import * as Platform from '../../../../core/platform/platform.js';
+import type {LCPDiscoveryInsightModel} from '../../../../models/trace/insights/LCPDiscovery.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
 import {eventRef} from './EventRef.js';
-import {BaseInsight, shouldRenderForCategory} from './Helpers.js';
+import {BaseInsightComponent, shouldRenderForCategory} from './Helpers.js';
 import type * as SidebarInsight from './SidebarInsight.js';
 import {Category} from './types.js';
 
 const {html} = LitHtml;
 
 const UIStrings = {
-  /**
-   *@description Title of an insight that provides details about the LCP metric, and the network requests necessary to load it.
-   */
-  title: 'LCP request discovery',
-  /**
-   *@description Description of an insight that provides details about the LCP metric, and the network requests necessary to load it.
-   */
-  description:
-      'Optimize LCP by making the LCP image [discoverable](https://web.dev/articles/optimize-lcp#1_eliminate_resource_load_delay) from the HTML immediately, and [avoiding lazy-loading](https://web.dev/articles/lcp-lazy-loading)',
   /**
    * @description Text to tell the user how long after the earliest discovery time their LCP element loaded.
    * @example {401ms} PH1
@@ -54,7 +45,6 @@ const UIStrings = {
    *@example {Server response time} PH1
    */
   failedAriaLabel: 'Insight check failed: {PH1}',
-
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/LCPDiscovery.ts', UIStrings);
@@ -69,20 +59,18 @@ interface LCPImageDiscoveryData {
   estimatedSavings: Trace.Types.Timing.MilliSeconds|null;
 }
 
-function getImageData(
-    insights: Trace.Insights.Types.TraceInsightSets|null, insightSetKey: string|null): LCPImageDiscoveryData|null {
-  const insight = Trace.Insights.Common.getInsight('LargestContentfulPaint', insights, insightSetKey);
-  if (!insight) {
+function getImageData(model: LCPDiscoveryInsightModel|null): LCPImageDiscoveryData|null {
+  if (!model) {
     return null;
   }
 
-  if (insight.lcpRequest === undefined) {
+  if (model.lcpRequest === undefined) {
     return null;
   }
 
-  const shouldIncreasePriorityHint = insight.shouldIncreasePriorityHint;
-  const shouldPreloadImage = insight.shouldPreloadImage;
-  const shouldRemoveLazyLoading = insight.shouldRemoveLazyLoading;
+  const shouldIncreasePriorityHint = model.shouldIncreasePriorityHint;
+  const shouldPreloadImage = model.shouldPreloadImage;
+  const shouldRemoveLazyLoading = model.shouldRemoveLazyLoading;
 
   const imageLCP = shouldIncreasePriorityHint !== undefined && shouldPreloadImage !== undefined &&
       shouldRemoveLazyLoading !== undefined;
@@ -96,25 +84,23 @@ function getImageData(
     shouldIncreasePriorityHint,
     shouldPreloadImage,
     shouldRemoveLazyLoading,
-    request: insight.lcpRequest,
+    request: model.lcpRequest,
     discoveryDelay: null,
-    estimatedSavings: insight.metricSavings?.LCP ?? null,
+    estimatedSavings: model.metricSavings?.LCP ?? null,
   };
 
-  if (insight.earliestDiscoveryTimeTs && insight.lcpRequest) {
-    const discoveryDelay = insight.lcpRequest.ts - insight.earliestDiscoveryTimeTs;
+  if (model.earliestDiscoveryTimeTs && model.lcpRequest) {
+    const discoveryDelay = model.lcpRequest.ts - model.earliestDiscoveryTimeTs;
     data.discoveryDelay = Trace.Types.Timing.MicroSeconds(discoveryDelay);
   }
 
   return data;
 }
 
-export class LCPDiscovery extends BaseInsight {
+export class LCPDiscovery extends BaseInsightComponent<LCPDiscoveryInsightModel> {
   static override readonly litTagName = LitHtml.literal`devtools-performance-lcp-discovery`;
   override insightCategory: Category = Category.LCP;
   override internalName: string = 'lcp-discovery';
-  override userVisibleTitle: string = i18nString(UIStrings.title);
-  override description: string = i18nString(UIStrings.description);
 
   #adviceIcon(didFail: boolean, label: string): LitHtml.TemplateResult {
     const icon = didFail ? 'clear' : 'check-circle';
@@ -138,7 +124,7 @@ export class LCPDiscovery extends BaseInsight {
   }
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
-    const imageResults = getImageData(this.data.insights, this.data.insightSetKey);
+    const imageResults = getImageData(this.model);
     if (!imageResults || !imageResults.discoveryDelay) {
       return [];
     }
@@ -192,19 +178,23 @@ export class LCPDiscovery extends BaseInsight {
            />`: LitHtml.nothing}
         <span class="element-img-details">
           ${eventRef(imageData.request)}
-          <span class="element-img-details-size">${Platform.NumberUtilities.bytesToString(imageData.request.args.data.decodedBodyLength ?? 0)}</span>
+          <span class="element-img-details-size">${i18n.ByteUtilities.bytesToString(imageData.request.args.data.decodedBodyLength ?? 0)}</span>
         </span>
       </div>`;
     // clang-format on
   }
 
-  #renderDiscovery(imageData: LCPImageDiscoveryData): LitHtml.TemplateResult {
+  #renderDiscovery(imageData: LCPImageDiscoveryData): LitHtml.LitTemplate {
+    if (!this.model) {
+      return LitHtml.nothing;
+    }
+
     // clang-format off
     return html`
         <div class="insights">
           <devtools-performance-sidebar-insight .data=${{
-            title: this.userVisibleTitle,
-            description: this.description,
+            title: this.model.title,
+            description: this.model.description,
             internalName: this.internalName,
             expanded: this.isActive(),
             estimatedSavingsTime: imageData.estimatedSavings,
@@ -235,18 +225,16 @@ export class LCPDiscovery extends BaseInsight {
   }
 
   override getRelatedEvents(): Trace.Types.Events.Event[] {
-    const insight =
-        Trace.Insights.Common.getInsight('LargestContentfulPaint', this.data.insights, this.data.insightSetKey);
-    if (!insight?.lcpEvent || !insight?.lcpRequest) {
+    if (!this.model?.lcpEvent || !this.model?.lcpRequest) {
       return [];
     }
 
     // TODO: add entire request initiator chain?
-    return [insight.lcpEvent, insight.lcpRequest];
+    return [this.model.lcpEvent, this.model.lcpRequest];
   }
 
   override render(): void {
-    const imageResults = getImageData(this.data.insights, this.data.insightSetKey);
+    const imageResults = getImageData(this.model);
     const matchesCategory = shouldRenderForCategory({
       activeCategory: this.data.activeCategory,
       insightCategory: this.insightCategory,

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

@@ -5,11 +5,12 @@
 import './Table.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
+import type {LCPPhasesInsightModel} from '../../../../models/trace/insights/LCPPhases.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
-import {BaseInsight, shouldRenderForCategory} from './Helpers.js';
+import {BaseInsightComponent, shouldRenderForCategory} from './Helpers.js';
 import type * as SidebarInsight from './SidebarInsight.js';
 import type {TableData} from './Table.js';
 import {Category} from './types.js';
@@ -17,16 +18,6 @@ import {Category} from './types.js';
 const {html} = LitHtml;
 
 const UIStrings = {
-  /**
-   *@description Title of an insight that provides details about the LCP metric, broken down by phases / parts.
-   */
-  title: 'LCP by phase',
-  /**
-   * @description Description of a DevTools insight that presents a breakdown for the LCP metric by phases.
-   * This is displayed after a user expands the section to see more. No character length limits.
-   */
-  description:
-      'Each [phase has specific improvement strategies](https://web.dev/articles/optimize-lcp#lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.',
   /**
    *@description Time to first byte title for the Largest Contentful Paint's phases timespan breakdown.
    */
@@ -61,29 +52,19 @@ interface PhaseData {
   percent: string;
 }
 
-export class LCPPhases extends BaseInsight {
+export class LCPPhases extends BaseInsightComponent<LCPPhasesInsightModel> {
   static override readonly litTagName = LitHtml.literal`devtools-performance-lcp-by-phases`;
   override insightCategory: Category = Category.LCP;
   override internalName: string = 'lcp-by-phase';
-  override userVisibleTitle: string = i18nString(UIStrings.title);
-  override description: string = i18nString(UIStrings.description);
   #overlay: Overlays.Overlays.TimespanBreakdown|null = null;
 
-  #getPhaseData(insights: Trace.Insights.Types.TraceInsightSets|null, navigationId: string|null): PhaseData[] {
-    if (!insights || !navigationId) {
-      return [];
-    }
-    const insightsByNavigation = insights.get(navigationId);
-    if (!insightsByNavigation) {
-      return [];
-    }
-    const lcpInsight = insightsByNavigation.data.LargestContentfulPaint;
-    if (lcpInsight instanceof Error) {
+  #getPhaseData(): PhaseData[] {
+    if (!this.model) {
       return [];
     }
 
-    const timing = lcpInsight.lcpMs;
-    const phases = lcpInsight.phases;
+    const timing = this.model.lcpMs;
+    const phases = this.model.phases;
 
     if (!timing || !phases) {
       return [];
@@ -128,28 +109,22 @@ export class LCPPhases extends BaseInsight {
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
     this.#overlay = null;
 
-    if (!this.data.insights || !this.data.insightSetKey) {
-      return [];
-    }
-    const {insightSetKey: navigationId, insights} = this.data;
-
-    const insightsByNavigation = insights.get(navigationId);
-    if (!insightsByNavigation) {
-      return [];
-    }
-
-    const lcpInsight = insightsByNavigation.data.LargestContentfulPaint;
-    if (lcpInsight instanceof Error) {
+    if (!this.model) {
       return [];
     }
 
-    const phases = lcpInsight.phases;
-    const lcpTs = lcpInsight.lcpTs;
+    const phases = this.model.phases;
+    const lcpTs = this.model.lcpTs;
     if (!phases || !lcpTs) {
       return [];
     }
     const lcpMicroseconds = Trace.Types.Timing.MicroSeconds(Trace.Helpers.Timing.millisecondsToMicroseconds(lcpTs));
 
+    const overlays: Overlays.Overlays.TimelineOverlay[] = [];
+    if (this.model.lcpRequest) {
+      overlays.push({type: 'ENTRY_OUTLINE', entry: this.model.lcpRequest, outlineReason: 'INFO'});
+    }
+
     const sections = [];
     // For text LCP, we should only have ttfb and renderDelay sections.
     if (!phases?.loadDelay && !phases?.loadTime) {
@@ -210,10 +185,15 @@ export class LCPPhases extends BaseInsight {
       type: 'TIMESPAN_BREAKDOWN',
       sections,
     };
-    return [this.#overlay];
+    overlays.push(this.#overlay);
+    return overlays;
   }
 
   #renderLCPPhases(phaseData: PhaseData[]): LitHtml.LitTemplate {
+    if (!this.model) {
+      return LitHtml.nothing;
+    }
+
     const rows = phaseData.map(({phase, percent}) => {
       const section = this.#overlay?.sections.find(section => phase === section.label);
       return {
@@ -229,8 +209,8 @@ export class LCPPhases extends BaseInsight {
     return html`
     <div class="insights">
       <devtools-performance-sidebar-insight .data=${{
-            title: this.userVisibleTitle,
-            description: this.description,
+            title: this.model.title,
+            description: this.model.description,
             internalName: this.internalName,
             expanded: this.isActive(),
         } as SidebarInsight.InsightDetails}
@@ -255,8 +235,7 @@ export class LCPPhases extends BaseInsight {
   }
 
   override getRelatedEvents(): Trace.Types.Events.Event[] {
-    const insight =
-        Trace.Insights.Common.getInsight('LargestContentfulPaint', this.data.insights, this.data.insightSetKey);
+    const insight = this.model;
     if (!insight?.lcpEvent) {
       return [];
     }
@@ -270,7 +249,7 @@ export class LCPPhases extends BaseInsight {
   }
 
   override render(): void {
-    const phaseData = this.#getPhaseData(this.data.insights, this.data.insightSetKey);
+    const phaseData = this.#getPhaseData();
     const matchesCategory = shouldRenderForCategory({
       activeCategory: this.data.activeCategory,
       insightCategory: this.insightCategory,

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

@@ -18,7 +18,6 @@ export interface NodeLinkData {
 }
 
 export class NodeLink extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-performance-node-link`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);

package/front_end/panels/timeline/components/insights/README.md

@@ -43,12 +43,12 @@ override render(): void {
 
 Within your `renderMyInsight` method (please choose a better name!), you should use the `SidebarInsight` component and use its `slot`s to place your content in. You also have access to the `this.isActive()` method to determine if this insight is expanded or not.
 
-```
+```ts
 <${SidebarInsight.SidebarInsight.litTagName} .data=${{
   title: this.userVisibleTitle,
   description: this.description,
   expanded: this.isActive(),
-} as SidebarInsight.InsightDetails}
+}}
 @insighttoggleclick=${this.onSidebarClick}
 >
   <div slot="insight-content" class="insight-section">