chrome-devtools-frontend 1.0.1376716 → 1.0.1380117

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

@@ -2,9 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as CrUXManager from '../../../models/crux-manager/crux-manager.js';
+import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
@@ -121,6 +123,20 @@ const UIStrings = {
    * @description Column header for table cell values representing a phase duration (in milliseconds) that was measured in the developers local environment.
    */
   duration: 'Local duration (ms)',
+  /**
+   * @description Tooltip text for a link that goes to documentation explaining the Largest Contentful Paint (LCP) metric. "LCP" is an acronym and should not be translated.
+   */
+  lcpHelpTooltip:
+      'LCP reports the render time of the largest image, text block, or video visible in the viewport. Click here to learn more about LCP.',
+  /**
+   * @description Tooltip text for a link that goes to documentation explaining the Cumulative Layout Shift (CLS) metric. "CLS" is an acronym and should not be translated.
+   */
+  clsHelpTooltip: 'CLS measures the amount of unexpected shifted content. Click here to learn more about CLS.',
+  /**
+   * @description Tooltip text for a link that goes to documentation explaining the Interaction to Next Paint (INP) metric. "INP" is an acronym and should not be translated.
+   */
+  inpHelpTooltip:
+      'INP measures the overall responsiveness to all click, tap, and keyboard interactions. Click here to learn more about INP.',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/MetricCard.ts', UIStrings);
@@ -291,6 +307,28 @@ export class MetricCard extends HTMLElement {
     }
   }
 
+  #getHelpLink(): Platform.DevToolsPath.UrlString {
+    switch (this.#data.metric) {
+      case 'LCP':
+        return 'https://web.dev/articles/lcp' as Platform.DevToolsPath.UrlString;
+      case 'CLS':
+        return 'https://web.dev/articles/cls' as Platform.DevToolsPath.UrlString;
+      case 'INP':
+        return 'https://web.dev/articles/inp' as Platform.DevToolsPath.UrlString;
+    }
+  }
+
+  #getHelpTooltip(): string {
+    switch (this.#data.metric) {
+      case 'LCP':
+        return i18nString(UIStrings.lcpHelpTooltip);
+      case 'CLS':
+        return i18nString(UIStrings.clsHelpTooltip);
+      case 'INP':
+        return i18nString(UIStrings.inpHelpTooltip);
+    }
+  }
+
   #getLocalValue(): number|undefined {
     const {localValue} = this.#data;
     if (localValue === undefined) {
@@ -579,12 +617,20 @@ export class MetricCard extends HTMLElement {
 
   #render = (): void => {
     const fieldEnabled = CrUXManager.CrUXManager.instance().getConfigSetting().get().enabled;
+    const helpLink = this.#getHelpLink();
 
     // clang-format off
     const output = html`
       <div class="metric-card">
         <h3 class="title">
           ${this.#getTitle()}
+          <devtools-button
+            class="title-help"
+            title=${this.#getHelpTooltip()}
+            .iconName=${'help'}
+            .variant=${Buttons.Button.Variant.ICON}
+            @click=${() => Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(helpLink)}
+          ></devtools-button>
         </h3>
         <div tabindex="0" class="metric-values-section"
           @mouseenter=${() => this.#showTooltip(500)}

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

@@ -5,7 +5,7 @@
 import '../../../ui/components/request_link_icon/request_link_icon.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import * as Platform from '../../../core/platform/platform.js';
+import type * as Platform from '../../../core/platform/platform.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import * as Helpers from '../../../models/trace/helpers/helpers.js';
 import * as Trace from '../../../models/trace/trace.js';
@@ -223,8 +223,7 @@ export class NetworkRequestDetails extends HTMLElement {
       lengthText += i18nString(UIStrings.FromServiceWorker);
     }
     if (this.#networkRequest.args.data.encodedDataLength || !lengthText) {
-      lengthText =
-          `${Platform.NumberUtilities.bytesToString(this.#networkRequest.args.data.encodedDataLength)}${lengthText}`;
+      lengthText = `${i18n.ByteUtilities.bytesToString(this.#networkRequest.args.data.encodedDataLength)}${lengthText}`;
     }
     return this.#renderRow(i18nString(UIStrings.encodedData), lengthText);
   }
@@ -325,7 +324,7 @@ export class NetworkRequestDetails extends HTMLElement {
           ${this.#renderRow(i18nString(UIStrings.priority), NetworkRequestTooltip.renderPriorityValue(this.#networkRequest))}
           ${this.#renderRow(i18nString(UIStrings.mimeType), networkData.mimeType)}
           ${this.#renderEncodedDataLength()}
-          ${this.#renderRow(i18nString(UIStrings.decodedBody), Platform.NumberUtilities.bytesToString(this.#networkRequest.args.data.decodedBodyLength))}
+          ${this.#renderRow(i18nString(UIStrings.decodedBody), i18n.ByteUtilities.bytesToString(this.#networkRequest.args.data.decodedBodyLength))}
           ${this.#renderBlockingRow()}
           ${this.#renderFromCache()}
         </div>

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

@@ -96,6 +96,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
     // Does not include "font display", which is experimental.
     assert.deepEqual(userVisibleTitles, [
       'LCP by phase',
+      'LCP request discovery',
       'Layout shift culprits',
       'Third parties',
     ]);
@@ -124,6 +125,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
     // Does not include "font display", which is experimental.
     assert.deepEqual(userVisibleTitles, [
       'LCP by phase',
+      'LCP request discovery',
       'Layout shift culprits',
       'Font display',
       'Third parties',

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

@@ -40,27 +40,27 @@ export interface SidebarSingleInsightSetData {
  * "enable experimental performance insights" experiment. This is used to enable
  * us to ship incrementally without turning insights on by default for all
  * users. */
-const EXPERIMENTAL_INSIGHTS: ReadonlySet<typeof Insights.Helpers.BaseInsight> = new Set([
-  Insights.FontDisplay.FontDisplay,
+const EXPERIMENTAL_INSIGHTS: ReadonlySet<string> = new Set([
+  'FontDisplay',
 ]);
 
 /**
  * Every insight (INCLUDING experimental ones)
- * The order of this array is the order the insights will be shown in the sidebar.
+ * The order of these properties is the order the insights will be shown in the sidebar.
  * TODO(crbug.com/368135130): sort this in a smart way!
  */
-const ALL_INSIGHTS: typeof Insights.Helpers.BaseInsight[] = [
-  Insights.InteractionToNextPaint.InteractionToNextPaint,
-  Insights.LCPPhases.LCPPhases,
-  Insights.LCPDiscovery.LCPDiscovery,
-  Insights.CLSCulprits.CLSCulprits,
-  Insights.RenderBlocking.RenderBlockingRequests,
-  Insights.DocumentLatency.DocumentLatency,
-  Insights.FontDisplay.FontDisplay,
-  Insights.Viewport.Viewport,
-  Insights.ThirdParties.ThirdParties,
-  Insights.SlowCSSSelector.SlowCSSSelector,
-] as const;
+const INSIGHT_NAME_TO_COMPONENT = {
+  InteractionToNextPaint: Insights.InteractionToNextPaint.InteractionToNextPaint,
+  LCPPhases: Insights.LCPPhases.LCPPhases,
+  LCPDiscovery: Insights.LCPDiscovery.LCPDiscovery,
+  CLSCulprits: Insights.CLSCulprits.CLSCulprits,
+  RenderBlocking: Insights.RenderBlocking.RenderBlocking,
+  DocumentLatency: Insights.DocumentLatency.DocumentLatency,
+  FontDisplay: Insights.FontDisplay.FontDisplay,
+  Viewport: Insights.Viewport.Viewport,
+  ThirdParties: Insights.ThirdParties.ThirdParties,
+  SlowCSSSelector: Insights.SlowCSSSelector.SlowCSSSelector,
+};
 
 export class SidebarSingleInsightSet extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
@@ -135,7 +135,7 @@ export class SidebarSingleInsightSet extends HTMLElement {
 
   #getLCP(insightSetKey: string):
       {value: Trace.Types.Timing.MicroSeconds, event: Trace.Types.Events.LargestContentfulPaintCandidate}|null {
-    const insight = Trace.Insights.Common.getInsight('LargestContentfulPaint', this.#data.insights, insightSetKey);
+    const insight = Trace.Insights.Common.getInsight('LCPPhases', this.#data.insights, insightSetKey);
     if (!insight || !insight.lcpMs || !insight.lcpEvent) {
       return null;
     }
@@ -145,7 +145,7 @@ export class SidebarSingleInsightSet extends HTMLElement {
   }
 
   #getCLS(insightSetKey: string): {value: number, worstShiftEvent: Trace.Types.Events.Event|null} {
-    const insight = Trace.Insights.Common.getInsight('CumulativeLayoutShift', this.#data.insights, insightSetKey);
+    const insight = Trace.Insights.Common.getInsight('CLSCulprits', this.#data.insights, insightSetKey);
     if (!insight) {
       // Unlike the other metrics, there is still a value for this metric even with no data.
       // This means this view will always display a CLS score.
@@ -193,37 +193,42 @@ export class SidebarSingleInsightSet extends HTMLElement {
     `;
   }
 
-  #insightsForRendering(): typeof Insights.Helpers.BaseInsight[] {
+  #renderInsights(
+      insightSets: Trace.Insights.Types.TraceInsightSets|null,
+      parsedTrace: Trace.Handlers.Types.ParsedTrace|null,
+      insightSetKey: string,
+      ): LitHtml.TemplateResult {
     const includeExperimental = Root.Runtime.experiments.isEnabled(
         Root.Runtime.ExperimentName.TIMELINE_EXPERIMENTAL_INSIGHTS,
     );
 
-    if (includeExperimental) {
-      return ALL_INSIGHTS;
+    const models = insightSets?.get(insightSetKey)?.model;
+    if (!models) {
+      return html``;
     }
 
-    return ALL_INSIGHTS.filter(insight => !EXPERIMENTAL_INSIGHTS.has(insight));
-  }
+    const components: LitHtml.TemplateResult[] = [];
+    for (const [name, componentClass] of Object.entries(INSIGHT_NAME_TO_COMPONENT)) {
+      if (!includeExperimental && EXPERIMENTAL_INSIGHTS.has(name)) {
+        continue;
+      }
 
-  #renderInsights(
-      insights: Trace.Insights.Types.TraceInsightSets|null,
-      parsedTrace: Trace.Handlers.Types.ParsedTrace|null,
-      insightSetKey: string,
-      ): LitHtml.TemplateResult {
-    const insightComponents = this.#insightsForRendering();
-    // clang-format off
-    return html`${insightComponents.map(component => {
-      return html`<div data-single-insight-wrapper>
-        <${component.litTagName}
-          .insights=${insights}
+      // clang-format off
+      const component = html`<div data-single-insight-wrapper>
+        <${componentClass.litTagName}
+          .model=${models[name as keyof typeof models]}
           .parsedTrace=${parsedTrace}
           .insightSetKey=${insightSetKey}
           .activeInsight=${this.#data.activeInsight}
           .activeCategory=${this.#data.activeCategory}>
-        </${component.litTagName}>
+        </${componentClass.litTagName}>
       </div>`;
-    })}`;
-    // clang-format on
+      // clang-format on
+
+      components.push(component);
+    }
+
+    return html`${components}`;
   }
 
   #render(): void {

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

@@ -3,25 +3,18 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../../core/i18n/i18n.js';
+import type {CLSCulpritsInsightModel} from '../../../../models/trace/insights/CLSCulprits.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 {EventReferenceClick} from './EventRef.js';
-import {BaseInsight, shouldRenderForCategory} from './Helpers.js';
+import {BaseInsightComponent, shouldRenderForCategory} from './Helpers.js';
 import {Category} from './types.js';
 
 const {html} = LitHtml;
 
 const UIStrings = {
-  /** Title of an insight that provides details about why elements shift/move on the page. The causes for these shifts are referred to as culprits ("reasons"). */
-  title: 'Layout shift culprits',
-  /**
-   * @description Description of a DevTools insight that identifies the reasons that elements shift on the page.
-   * This is displayed after a user expands the section to see more. No character length limits.
-   */
-  description:
-      'Layout shifts occur when elements move absent any user interaction. [Investigate the causes of layout shifts](https://web.dev/articles/optimize-cls), such as elements being added, removed, or their fonts changing as the page loads.',
   /**
    *@description Text indicating the worst layout shift cluster.
    */
@@ -59,19 +52,14 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/CLSCulprits.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class CLSCulprits extends BaseInsight {
+export class CLSCulprits extends BaseInsightComponent<CLSCulpritsInsightModel> {
   static override readonly litTagName = LitHtml.literal`devtools-performance-cls-culprits`;
   override insightCategory: Category = Category.CLS;
   override internalName: string = 'cls-culprits';
-  override userVisibleTitle: string = i18nString(UIStrings.title);
-  override description: string = i18nString(UIStrings.description);
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
-    const insight =
-        Trace.Insights.Common.getInsight('CumulativeLayoutShift', this.data.insights, this.data.insightSetKey);
-
     const clustersByScore =
-        insight?.clusters.toSorted((a, b) => b.clusterCumulativeScore - a.clusterCumulativeScore) ?? [];
+        this.model?.clusters.toSorted((a, b) => b.clusterCumulativeScore - a.clusterCumulativeScore) ?? [];
     const worstCluster = clustersByScore[0];
     if (!worstCluster) {
       return [];
@@ -98,8 +86,7 @@ export class CLSCulprits extends BaseInsight {
   getTopCulprits(
       cluster: Trace.Types.Events.SyntheticLayoutShiftCluster,
       culpritsByShift:
-          Map<Trace.Types.Events.LayoutShift,
-              Trace.Insights.InsightRunners.CumulativeLayoutShift.LayoutShiftRootCausesData>): string[] {
+          Map<Trace.Types.Events.LayoutShift, Trace.Insights.Models.CLSCulprits.LayoutShiftRootCausesData>): string[] {
     const MAX_TOP_CULPRITS = 3;
     const causes: Array<string> = [];
     if (causes.length === MAX_TOP_CULPRITS) {
@@ -140,8 +127,11 @@ export class CLSCulprits extends BaseInsight {
     this.dispatchEvent(new EventReferenceClick(event));
   }
 
-  #render(culprits: Array<string>, worstCluster: Trace.Types.Events.SyntheticLayoutShiftCluster):
-      LitHtml.TemplateResult {
+  #render(culprits: Array<string>, worstCluster: Trace.Types.Events.SyntheticLayoutShiftCluster): LitHtml.LitTemplate {
+    if (!this.model) {
+      return LitHtml.nothing;
+    }
+
     const ts = Trace.Types.Timing.MicroSeconds(worstCluster.ts - (this.data.parsedTrace?.Meta.traceBounds.min ?? 0));
     const clusterTs = i18n.TimeUtilities.formatMicroSecondsTime(ts);
 
@@ -150,8 +140,8 @@ export class CLSCulprits 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(),
             }}
@@ -171,25 +161,21 @@ export class CLSCulprits extends BaseInsight {
   }
 
   override getRelatedEvents(): Trace.Types.Events.Event[] {
-    const insight =
-        Trace.Insights.Common.getInsight('CumulativeLayoutShift', this.data.insights, this.data.insightSetKey);
-    return insight?.relatedEvents ?? [];
+    return this.model?.relatedEvents ?? [];
   }
 
   override render(): void {
-    const insight =
-        Trace.Insights.Common.getInsight('CumulativeLayoutShift', this.data.insights, this.data.insightSetKey);
-    if (!insight) {
+    if (!this.model) {
       return;
     }
 
-    const culpritsByShift = insight.shifts;
-    const clusters = insight.clusters ?? [];
-    if (!clusters.length || !insight.worstCluster) {
+    const culpritsByShift = this.model.shifts;
+    const clusters = this.model.clusters ?? [];
+    if (!clusters.length || !this.model.worstCluster) {
       return;
     }
 
-    const causes = this.getTopCulprits(insight.worstCluster, culpritsByShift);
+    const causes = this.getTopCulprits(this.model.worstCluster, culpritsByShift);
 
     const hasCulprits = causes.length > 0;
 
@@ -197,7 +183,7 @@ export class CLSCulprits extends BaseInsight {
       activeCategory: this.data.activeCategory,
       insightCategory: this.insightCategory,
     });
-    const output = hasCulprits && matchesCategory ? this.#render(causes, insight.worstCluster) : LitHtml.nothing;
+    const output = hasCulprits && matchesCategory ? this.#render(causes, this.model.worstCluster) : LitHtml.nothing;
     LitHtml.render(output, this.shadow, {host: this});
   }
 }

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

@@ -5,25 +5,17 @@
 import '../../../../ui/components/icon_button/icon_button.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
+import type {DocumentLatencyInsightModel} from '../../../../models/trace/insights/DocumentLatency.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 {Category} from './types.js';
 
 const {html} = LitHtml;
 
 const UIStrings = {
-  /**
-   *@description Title of an insight that provides a breakdown for how long it took to download the main document.
-   */
-  title: 'Document request latency',
-  /**
-   *@description Description of an insight that provides a breakdown for how long it took to download the main document.
-   */
-  description:
-      'Your first network request is the most important.  Reduce its latency by avoiding redirects, ensuring a fast server response, and enabling text compression.',
   /**
    * @description Text to tell the user that the document request does not have redirects.
    */
@@ -75,12 +67,10 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/DocumentLatency.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class DocumentLatency extends BaseInsight {
+export class DocumentLatency extends BaseInsightComponent<DocumentLatencyInsightModel> {
   static override readonly litTagName = LitHtml.literal`devtools-performance-document-latency`;
   override insightCategory: Category = Category.ALL;
   override internalName: string = 'document-latency';
-  override userVisibleTitle: string = i18nString(UIStrings.title);
-  override description: string = i18nString(UIStrings.description);
 
   #check(didPass: boolean, good: string, bad: string): LitHtml.TemplateResult {
     const icon = didPass ? 'check-circle' : 'clear';
@@ -98,17 +88,16 @@ export class DocumentLatency extends BaseInsight {
   }
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
-    const insight = Trace.Insights.Common.getInsight('DocumentLatency', this.data.insights, this.data.insightSetKey);
-    if (!insight?.data?.documentRequest) {
+    if (!this.model?.data?.documentRequest) {
       return [];
     }
 
     const overlays: Overlays.Overlays.TimelineOverlay[] = [];
-    const event = insight.data.documentRequest;
-    const redirectDurationMicro = Trace.Helpers.Timing.millisecondsToMicroseconds(insight.data.redirectDuration);
+    const event = this.model.data.documentRequest;
+    const redirectDurationMicro = Trace.Helpers.Timing.millisecondsToMicroseconds(this.model.data.redirectDuration);
 
     const sections = [];
-    if (insight.data.redirectDuration) {
+    if (this.model.data.redirectDuration) {
       const bounds = Trace.Helpers.Timing.traceWindowFromMicroSeconds(
           event.ts,
           (event.ts + redirectDurationMicro) as Trace.Types.Timing.MicroSeconds,
@@ -116,8 +105,9 @@ export class DocumentLatency extends BaseInsight {
       sections.push({bounds, label: i18nString(UIStrings.redirectsLabel), showDuration: true});
       overlays.push({type: 'CANDY_STRIPED_TIME_RANGE', bounds, entry: event});
     }
-    if (insight.data.serverResponseTooSlow) {
-      const serverResponseTimeMicro = Trace.Helpers.Timing.millisecondsToMicroseconds(insight.data.serverResponseTime);
+    if (this.model.data.serverResponseTooSlow) {
+      const serverResponseTimeMicro =
+          Trace.Helpers.Timing.millisecondsToMicroseconds(this.model.data.serverResponseTime);
       // NOTE: NetworkRequestHandlers never makes a synthetic network request event if `timing` is missing.
       const sendEnd = event.args.data.timing?.sendEnd ?? Trace.Types.Timing.MilliSeconds(0);
       const sendEndMicro = Trace.Helpers.Timing.millisecondsToMicroseconds(sendEnd);
@@ -127,7 +117,7 @@ export class DocumentLatency extends BaseInsight {
       );
       sections.push({bounds, label: i18nString(UIStrings.serverResponseTimeLabel), showDuration: true});
     }
-    if (insight.data.uncompressedResponseBytes) {
+    if (this.model.data.uncompressedResponseBytes) {
       const bounds = Trace.Helpers.Timing.traceWindowFromMicroSeconds(
           event.args.data.syntheticData.downloadStart,
           (event.args.data.syntheticData.downloadStart + event.args.data.syntheticData.download) as
@@ -141,7 +131,7 @@ export class DocumentLatency extends BaseInsight {
       overlays.push({
         type: 'TIMESPAN_BREAKDOWN',
         sections,
-        entry: insight.data.documentRequest,
+        entry: this.model.data.documentRequest,
         // Always render below because the document request is guaranteed to be
         // the first request in the network track.
         renderLocation: 'BELOW_EVENT',
@@ -149,14 +139,14 @@ export class DocumentLatency extends BaseInsight {
     }
     overlays.push({
       type: 'ENTRY_SELECTED',
-      entry: insight.data.documentRequest,
+      entry: this.model.data.documentRequest,
     });
 
     return overlays;
   }
 
-  #renderInsight(insight: Trace.Insights.Types.InsightResults['DocumentLatency']): LitHtml.LitTemplate {
-    if (!insight.data) {
+  #renderInsight(): LitHtml.LitTemplate {
+    if (!this.model?.data) {
       return LitHtml.nothing;
     }
 
@@ -164,53 +154,52 @@ export class DocumentLatency 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,
             expanded: this.isActive(),
             internalName: this.internalName,
-            estimatedSavingsTime: insight.metricSavings?.FCP,
-            estimatedSavingsBytes: insight.data.uncompressedResponseBytes,
+            estimatedSavingsTime: this.model.metricSavings?.FCP,
+            estimatedSavingsBytes: this.model.data.uncompressedResponseBytes,
         }}
         @insighttoggleclick=${this.onSidebarClick}
       >
         <div slot="insight-content" class="insight-section">
           <ul class="insight-results insight-icon-results">
             <li class="insight-entry">
-              ${this.#check(insight.data.redirectDuration === 0,
+              ${this.#check(this.model.data.redirectDuration === 0,
                 i18nString(UIStrings.passingRedirects), i18nString(UIStrings.failedRedirects))}
             </li>
             <li class="insight-entry">
-              ${this.#check(!insight.data.serverResponseTooSlow,
+              ${this.#check(!this.model.data.serverResponseTooSlow,
                 i18nString(UIStrings.passingServerResponseTime), i18nString(UIStrings.failedServerResponseTime))}
             </li>
             <li class="insight-entry">
-              ${this.#check(insight.data.uncompressedResponseBytes === 0,
+              ${this.#check(this.model.data.uncompressedResponseBytes === 0,
                 i18nString(UIStrings.passingTextCompression), i18nString(UIStrings.failedTextCompression))}
             </li>
           </ul>
         </div>
       </devtools-performance-sidebar-insight>
     </div>`;
-            // clang-format on
+        // clang-format on
   }
 
   override getRelatedEvents(): Trace.Types.Events.Event[] {
-    const insight = Trace.Insights.Common.getInsight('DocumentLatency', this.data.insights, this.data.insightSetKey);
-    return insight?.relatedEvents ?? [];
+    return this.model?.relatedEvents ?? [];
   }
 
   override render(): void {
-    const insight = Trace.Insights.Common.getInsight('DocumentLatency', this.data.insights, this.data.insightSetKey);
-    if (insight?.data === undefined) {
+    if (this.model?.data === undefined) {
       return;
     }
+
     const matchesCategory = shouldRenderForCategory({
       activeCategory: this.data.activeCategory,
       insightCategory: this.insightCategory,
     });
-    const hasFailure = insight?.data?.redirectDuration > 0 || insight?.data?.serverResponseTooSlow ||
-        insight.data.uncompressedResponseBytes > 0;
-    const output = (matchesCategory && hasFailure) ? this.#renderInsight(insight) : LitHtml.nothing;
+    const hasFailure = this.model?.data?.redirectDuration > 0 || this.model?.data?.serverResponseTooSlow ||
+        this.model.data.uncompressedResponseBytes > 0;
+    const output = (matchesCategory && hasFailure) ? this.#renderInsight() : LitHtml.nothing;
     LitHtml.render(output, this.shadow, {host: this});
   }
 }

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 setting [`font-display`](https://developer.chrome.com/blog/font-display) to `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});
   }
 }