chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

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

@@ -3,25 +3,17 @@
 // 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 {BaseInsightComponent} from './BaseInsightComponent.js';
 import {EventReferenceClick} from './EventRef.js';
-import {BaseInsight, 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 +51,13 @@ 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 +84,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,65 +125,42 @@ export class CLSCulprits extends BaseInsight {
     this.dispatchEvent(new EventReferenceClick(event));
   }
 
-  #render(culprits: Array<string>, worstCluster: Trace.Types.Events.SyntheticLayoutShiftCluster):
-      LitHtml.TemplateResult {
+  #renderContent(culprits: Array<string>, worstCluster: Trace.Types.Events.SyntheticLayoutShiftCluster):
+      LitHtml.LitTemplate {
     const ts = Trace.Types.Timing.MicroSeconds(worstCluster.ts - (this.data.parsedTrace?.Meta.traceBounds.min ?? 0));
     const clusterTs = i18n.TimeUtilities.formatMicroSecondsTime(ts);
 
-    // TODO(crbug.com/369102516): use Table for hover/click ux.
     // clang-format off
     return html`
-        <div class="insights">
-            <devtools-performance-sidebar-insight .data=${{
-              title: this.userVisibleTitle,
-              description: this.description,
-              internalName: this.internalName,
-              expanded: this.isActive(),
-            }}
-            @insighttoggleclick=${this.onSidebarClick}>
-                <div slot="insight-content" class="insight-section">
-                  <span class="worst-cluster">${i18nString(UIStrings.worstCluster)}: <button type="button" class="timeline-link" @click=${() => this.#clickEvent(worstCluster)}>${i18nString(UIStrings.layoutShiftCluster, {PH1: clusterTs})}</button></span>
-                    <p>${i18nString(UIStrings.topCulprits)}:</p>
-                        ${culprits.map(culprit => {
-                          return html `
-                            <li>${culprit}</li>
-                          `;
-                        })}
-                </div>
-            </devtools-performance-sidebar-insight>
-        </div>`;
-              // clang-format on
-  }
-
-  override getRelatedEvents(): Trace.Types.Events.Event[] {
-    const insight =
-        Trace.Insights.Common.getInsight('CumulativeLayoutShift', this.data.insights, this.data.insightSetKey);
-    return insight?.relatedEvents ?? [];
+      <div class="insight-section">
+        <span class="worst-cluster">${i18nString(UIStrings.worstCluster)}: <button type="button" class="timeline-link" @click=${() => this.#clickEvent(worstCluster)}>${i18nString(UIStrings.layoutShiftCluster, {PH1: clusterTs})}</button></span>
+          <p>${i18nString(UIStrings.topCulprits)}:</p>
+              ${culprits.map(culprit => {
+                return html `
+                  <li>${culprit}</li>
+                `;
+              })}
+      </div>`;
+    // clang-format on
   }
 
   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;
+    if (!this.model.clusters.length || !this.model.worstCluster) {
       return;
     }
 
-    const causes = this.getTopCulprits(insight.worstCluster, culpritsByShift);
+    // TODO: getTopCulprits needs to move to model.
+    const causes = this.getTopCulprits(this.model.worstCluster, culpritsByShift);
 
     const hasCulprits = causes.length > 0;
 
-    const matchesCategory = shouldRenderForCategory({
-      activeCategory: this.data.activeCategory,
-      insightCategory: this.insightCategory,
-    });
-    const output = hasCulprits && matchesCategory ? this.#render(causes, insight.worstCluster) : LitHtml.nothing;
-    LitHtml.render(output, this.shadow, {host: this});
+    const output = hasCulprits ? this.#renderContent(causes, this.model.worstCluster) : LitHtml.nothing;
+    this.renderWithContent(output);
   }
 }
 

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

@@ -5,25 +5,16 @@
 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 {Category} from './types.js';
+import {BaseInsightComponent} from './BaseInsightComponent.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 +66,9 @@ 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 +86,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 +103,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 +115,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 +129,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,69 +137,52 @@ 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) {
+  override getEstimatedSavingsTime(): Trace.Types.Timing.MilliSeconds|null {
+    return this.model?.metricSavings?.FCP ?? null;
+  }
+
+  override getEstimatedSavingsBytes(): number|null {
+    return this.model?.data?.uncompressedResponseBytes ?? null;
+  }
+
+  #renderContent(): LitHtml.LitTemplate {
+    if (!this.model?.data) {
       return LitHtml.nothing;
     }
 
     // clang-format off
     return html`
-    <div class="insights">
-      <devtools-performance-sidebar-insight .data=${{
-            title: this.userVisibleTitle,
-            description: this.description,
-            expanded: this.isActive(),
-            internalName: this.internalName,
-            estimatedSavingsTime: insight.metricSavings?.FCP,
-            estimatedSavingsBytes: insight.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,
-                i18nString(UIStrings.passingRedirects), i18nString(UIStrings.failedRedirects))}
-            </li>
-            <li class="insight-entry">
-              ${this.#check(!insight.data.serverResponseTooSlow,
-                i18nString(UIStrings.passingServerResponseTime), i18nString(UIStrings.failedServerResponseTime))}
-            </li>
-            <li class="insight-entry">
-              ${this.#check(insight.data.uncompressedResponseBytes === 0,
-                i18nString(UIStrings.passingTextCompression), i18nString(UIStrings.failedTextCompression))}
-            </li>
-          </ul>
-        </div>
-      </devtools-performance-sidebar-insight>
-    </div>`;
-            // 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 ?? [];
+      <div class="insight-section">
+        <ul class="insight-results insight-icon-results">
+          <li class="insight-entry">
+            ${this.#check(this.model.data.redirectDuration === 0,
+              i18nString(UIStrings.passingRedirects), i18nString(UIStrings.failedRedirects))}
+          </li>
+          <li class="insight-entry">
+            ${this.#check(!this.model.data.serverResponseTooSlow,
+              i18nString(UIStrings.passingServerResponseTime), i18nString(UIStrings.failedServerResponseTime))}
+          </li>
+          <li class="insight-entry">
+            ${this.#check(this.model.data.uncompressedResponseBytes === 0,
+              i18nString(UIStrings.passingTextCompression), i18nString(UIStrings.failedTextCompression))}
+          </li>
+        </ul>
+      </div>`;
+    // clang-format on
   }
 
   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;
-    LitHtml.render(output, this.shadow, {host: this});
+
+    this.renderWithContent(this.#renderContent());
   }
 }
 

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

@@ -2,13 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import * as Utils from '../../utils/utils.js';
 
-import sidebarInsightStyles from './sidebarInsight.css.js';
+import baseInsightComponentStyles from './baseInsightComponent.css.js';
 
 const {html} = LitHtml;
 
@@ -28,7 +29,7 @@ class EventRef extends HTMLElement {
   #event: Trace.Types.Events.Event|null = null;
 
   connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [sidebarInsightStyles];
+    this.#shadow.adoptedStyleSheets = [baseInsightComponentStyles];
   }
 
   set text(text: string) {
@@ -78,6 +79,71 @@ export function eventRef(event: EventRefSupportedEvents): LitHtml.TemplateResult
   ></devtools-performance-event-ref>`;
 }
 
+class ImageRef extends HTMLElement {
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #boundRender = this.#render.bind(this);
+
+  #request?: Trace.Types.Events.SyntheticNetworkRequest;
+  #imagePaint?: Trace.Types.Events.PaintImage;
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [baseInsightComponentStyles];
+  }
+
+  set request(request: Trace.Types.Events.SyntheticNetworkRequest) {
+    this.#request = request;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  set imagePaint(imagePaint: Trace.Types.Events.PaintImage|undefined) {
+    this.#imagePaint = imagePaint;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  #render(): void {
+    if (!this.#request) {
+      return;
+    }
+
+    // clang-format off
+    LitHtml.render(html`
+      <div class="image-ref">
+        ${this.#request.args.data.mimeType.includes('image') ? html`
+          <img
+            class="element-img"
+            src=${this.#request.args.data.url}
+            @error=${handleBadImage}/>
+        `: LitHtml.nothing}
+        <span class="element-img-details">
+          ${eventRef(this.#request)}
+          <span class="element-img-details-size">${
+            this.#imagePaint ?
+              `${this.#imagePaint.args.data.srcWidth}x${this.#imagePaint.args.data.srcHeight}` :
+              i18n.ByteUtilities.bytesToString(this.#request.args.data.decodedBodyLength ?? 0)
+          }</span>
+        </span>
+      </div>
+    `, this.#shadow, {host: this});
+    // clang-format on
+  }
+}
+
+function handleBadImage(event: Event): void {
+  const img = event.target as HTMLImageElement;
+  img.style.display = 'none';
+}
+
+export function imageRef(
+    request: Trace.Types.Events.SyntheticNetworkRequest,
+    imagePaint?: Trace.Types.Events.PaintImage): LitHtml.TemplateResult {
+  return html`
+    <devtools-performance-image-ref
+      .request=${request}
+      .imagePaint=${imagePaint}
+    ></devtools-performance-image-ref>
+  `;
+}
+
 declare global {
   interface GlobalEventHandlersEventMap {
     [EventReferenceClick.eventName]: EventReferenceClick;
@@ -85,7 +151,9 @@ declare global {
 
   interface HTMLElementTagNameMap {
     'devtools-performance-event-ref': EventRef;
+    'devtools-performance-image-ref': ImageRef;
   }
 }
 
 customElements.define('devtools-performance-event-ref', EventRef);
+customElements.define('devtools-performance-image-ref', ImageRef);

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

@@ -5,26 +5,18 @@
 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 {BaseInsightComponent} from './BaseInsightComponent.js';
 import {eventRef} from './EventRef.js';
-import {BaseInsight, shouldRenderForCategory} from './Helpers.js';
-import type * as SidebarInsight from './SidebarInsight.js';
 import type {TableData} from './Table.js';
-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 +26,20 @@ 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,55 +50,43 @@ export class FontDisplay extends BaseInsight {
     return [...this.#overlayForRequest.values()];
   }
 
-  #render(insight: Trace.Insights.Types.InsightResults['FontDisplay']): LitHtml.TemplateResult {
+  override getEstimatedSavingsTime(): Trace.Types.Timing.MilliSeconds|null {
+    return this.model?.metricSavings?.FCP ?? null;
+  }
+
+  #renderContent(): 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,
-              expanded: this.isActive(),
-              internalName: this.internalName,
-              estimatedSavingsTime: insight.metricSavings?.FCP,
-            } as SidebarInsight.InsightDetails}
-            @insighttoggleclick=${this.onSidebarClick}>
-                <div slot="insight-content" class="insight-section">
-                  ${html`<devtools-performance-table
-                    .data=${{
-                      insight: this,
-                      headers: [i18nString(UIStrings.fontColumn), 'font-display', i18nString(UIStrings.wastedTimeColumn)],
-                      rows: insight.fonts.map(font => ({
-                        values: [
-                          // TODO(crbug.com/369422196): the font name would be nicer here.
-                          eventRef(font.request),
-                          font.display,
-                          i18n.TimeUtilities.millisToString(font.wastedTime),
-                        ],
-                        overlays: [this.#overlayForRequest.get(font.request)],
-                      })),
-                    } as TableData}>
-                  </devtools-performance-table>`}
-                </div>
-            </devtools-performance-sidebar-insight>
-        </div>`;
+      <div class="insight-section">
+        ${html`<devtools-performance-table
+          .data=${{
+            insight: this,
+            headers: [i18nString(UIStrings.fontColumn), 'font-display', i18nString(UIStrings.wastedTimeColumn)],
+            rows: this.model.fonts.map(font => ({
+              values: [
+                // TODO(crbug.com/369422196): the font name would be nicer here.
+                eventRef(font.request),
+                font.display,
+                i18n.TimeUtilities.millisToString(font.wastedTime),
+              ],
+              overlays: [this.#overlayForRequest.get(font.request)],
+            })),
+          } as TableData}>
+        </devtools-performance-table>`}
+      </div>`;
     // clang-format on
   }
 
-  override getRelatedEvents(): Trace.Types.Events.Event[] {
-    const insight = Trace.Insights.Common.getInsight('FontDisplay', this.data.insights, this.data.insightSetKey);
-    return insight?.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 matchesCategory = shouldRenderForCategory({
-      activeCategory: this.data.activeCategory,
-      insightCategory: this.insightCategory,
-    });
-    const output = shouldShow && matchesCategory ? this.#render(insight) : LitHtml.nothing;
-    LitHtml.render(output, this.shadow, {host: this});
+    if (!this.model) {
+      return;
+    }
+
+    this.renderWithContent(this.#renderContent());
   }
 }