chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

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

@@ -16,6 +16,7 @@ import * as MetricCard from './MetricCard.js';
 import * as NetworkRequestDetails from './NetworkRequestDetails.js';
 import * as NetworkRequestTooltip from './NetworkRequestTooltip.js';
 import * as NetworkThrottlingSelector from './NetworkThrottlingSelector.js';
+import * as RelatedInsightChips from './RelatedInsightChips.js';
 import * as Sidebar from './Sidebar.js';
 import * as SidebarAnnotationsTab from './SidebarAnnotationsTab.js';
 import * as SidebarInsightsTab from './SidebarInsightsTab.js';
@@ -37,6 +38,7 @@ export {
   NetworkRequestDetails,
   NetworkRequestTooltip,
   NetworkThrottlingSelector,
+  RelatedInsightChips,
   Sidebar,
   SidebarAnnotationsTab,
   SidebarInsightsTab,

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

@@ -7,10 +7,13 @@ 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, EventReferenceClick, shouldRenderForCategory} from './Helpers.js';
-import * as SidebarInsight from './SidebarInsight.js';
+import {EventReferenceClick} from './EventRef.js';
+import {BaseInsight, shouldRenderForCategory} from './Helpers.js';
+import type * as SidebarInsight from './SidebarInsight.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',
@@ -25,10 +28,14 @@ const UIStrings = {
    */
   worstLayoutShiftCluster: 'Worst layout shift cluster',
   /**
-   * @description Text indicating the worst layout shift cluster and its start time.
+   * @description Text indicating the worst layout shift cluster.
+   */
+  worstCluster: 'Worst cluster',
+  /**
+   * @description Text indicating a layout shift cluster and its start time.
    * @example {32 ms} PH1
    */
-  worstCluster: 'Worst cluster: Layout shift cluster @ {PH1}',
+  layoutShiftCluster: 'Layout shift cluster @ {PH1}',
   /**
    *@description Text indicating the biggest reasons for the layout shifts.
    */
@@ -50,7 +57,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/CL
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class CLSCulprits extends BaseInsight {
-  static readonly litTagName = LitHtml.literal`devtools-performance-cls-culprits`;
+  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);
@@ -70,7 +77,7 @@ export class CLSCulprits extends BaseInsight {
     const range = Trace.Types.Timing.MicroSeconds(worstCluster.dur ?? 0);
     const max = Trace.Types.Timing.MicroSeconds(worstCluster.ts + range);
 
-    const label = LitHtml.html`<div>${i18nString(UIStrings.worstLayoutShiftCluster)}</div>`;
+    const label = html`<div>${i18nString(UIStrings.worstLayoutShiftCluster)}</div>`;
     return [{
       type: 'TIMESPAN_BREAKDOWN',
       sections: [
@@ -78,49 +85,45 @@ export class CLSCulprits extends BaseInsight {
       ],
       // This allows for the overlay to sit over the layout shift.
       entry: worstCluster.events[0],
+      renderLocation: 'ABOVE_EVENT',
     }];
   }
 
   /**
-   * getTopCulprits gets the top 3 shift root causes based on clusters.
+   * getTopCulprits gets the top 3 shift root causes based on worst cluster.
    */
   getTopCulprits(
-      clusters: Trace.Types.Events.SyntheticLayoutShiftCluster[],
+      cluster: Trace.Types.Events.SyntheticLayoutShiftCluster,
       culpritsByShift:
           Map<Trace.Types.Events.LayoutShift,
-              Trace.Insights.InsightRunners.CumulativeLayoutShift.LayoutShiftRootCausesData>|undefined): string[] {
-    if (!culpritsByShift) {
-      return [];
-    }
+              Trace.Insights.InsightRunners.CumulativeLayoutShift.LayoutShiftRootCausesData>): string[] {
     const MAX_TOP_CULPRITS = 3;
     const causes: Array<string> = [];
-    for (const cluster of clusters) {
+    if (causes.length === MAX_TOP_CULPRITS) {
+      return causes;
+    }
+    const shifts = cluster.events;
+    for (const shift of shifts) {
       if (causes.length === MAX_TOP_CULPRITS) {
         break;
       }
-      const shifts = cluster.events;
-      for (const shift of shifts) {
-        if (causes.length === MAX_TOP_CULPRITS) {
-          break;
-        }
-
-        const culprits = culpritsByShift.get(shift);
-        if (!culprits) {
-          continue;
-        }
-        const fontReq = culprits.fontRequests;
-        const iframes = culprits.iframeIds;
-        const animations = culprits.nonCompositedAnimations;
-
-        for (let i = 0; i < fontReq.length && causes.length < MAX_TOP_CULPRITS; i++) {
-          causes.push(i18nString(UIStrings.fontRequest));
-        }
-        for (let i = 0; i < iframes.length && causes.length < MAX_TOP_CULPRITS; i++) {
-          causes.push(i18nString(UIStrings.injectedIframe));
-        }
-        for (let i = 0; i < animations.length && causes.length < MAX_TOP_CULPRITS; i++) {
-          causes.push(i18nString(UIStrings.animation));
-        }
+
+      const culprits = culpritsByShift.get(shift);
+      if (!culprits) {
+        continue;
+      }
+      const fontReq = culprits.fontRequests;
+      const iframes = culprits.iframeIds;
+      const animations = culprits.nonCompositedAnimations;
+
+      for (let i = 0; i < fontReq.length && causes.length < MAX_TOP_CULPRITS; i++) {
+        causes.push(i18nString(UIStrings.fontRequest));
+      }
+      for (let i = 0; i < iframes.length && causes.length < MAX_TOP_CULPRITS; i++) {
+        causes.push(i18nString(UIStrings.injectedIframe));
+      }
+      for (let i = 0; i < animations.length && causes.length < MAX_TOP_CULPRITS; i++) {
+        causes.push(i18nString(UIStrings.animation));
       }
     }
     return causes.slice(0, MAX_TOP_CULPRITS);
@@ -137,9 +140,9 @@ export class CLSCulprits extends BaseInsight {
 
     // TODO(crbug.com/369102516): use Table for hover/click ux.
     // clang-format off
-    return LitHtml.html`
+    return html`
         <div class="insights">
-            <${SidebarInsight.SidebarInsight.litTagName} .data=${{
+            <devtools-performance-sidebar-insight .data=${{
               title: this.userVisibleTitle,
               description: this.description,
               internalName: this.internalName,
@@ -147,36 +150,47 @@ export class CLSCulprits extends BaseInsight {
             } as SidebarInsight.InsightDetails}
             @insighttoggleclick=${this.onSidebarClick}>
                 <div slot="insight-content" class="insight-section">
-                  <div class="devtools-link" @click=${() => this.#clickEvent(worstCluster)}>${i18nString(UIStrings.worstCluster, {PH1: clusterTs})}</div>
-                  <p>
-                    <h3>${i18nString(UIStrings.topCulprits)}</h3>
-                    ${culprits.map(culprit => {
-                      return LitHtml.html `
-                        <li>${culprit}</li>
-                      `;
-                    })}
-                  <p>
+                  <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>
-            </${SidebarInsight.SidebarInsight}>
+            </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 ?? [];
+  }
+
   override render(): void {
     const insight =
         Trace.Insights.Common.getInsight('CumulativeLayoutShift', this.data.insights, this.data.insightSetKey);
-    const culpritsByShift = insight?.shifts;
-    const clusters = insight?.clusters ?? [];
-    const clustersByScore = clusters.toSorted((a, b) => b.clusterCumulativeScore - a.clusterCumulativeScore);
+    if (!insight) {
+      return;
+    }
+
+    const culpritsByShift = insight.shifts;
+    const clusters = insight.clusters ?? [];
+    if (!clusters.length || !insight.worstCluster) {
+      return;
+    }
+
+    const causes = this.getTopCulprits(insight.worstCluster, culpritsByShift);
 
-    const causes = this.getTopCulprits(clustersByScore, culpritsByShift);
     const hasCulprits = causes.length > 0;
 
     const matchesCategory = shouldRenderForCategory({
       activeCategory: this.data.activeCategory,
       insightCategory: this.insightCategory,
     });
-    const output = hasCulprits && matchesCategory ? this.#render(causes, clustersByScore[0]) : LitHtml.nothing;
+    const output = hasCulprits && matchesCategory ? this.#render(causes, insight.worstCluster) : LitHtml.nothing;
     LitHtml.render(output, this.shadow, {host: this});
   }
 }

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

@@ -2,21 +2,29 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../../ui/components/icon_button/icon_button.js';
+
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Trace from '../../../../models/trace/trace.js';
-import * as IconButton from '../../../../ui/components/icon_button/icon_button.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 * as SidebarInsight from './SidebarInsight.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 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.
    */
@@ -41,26 +49,51 @@ const UIStrings = {
    * @description Text to tell the user that text compression (like gzip) was not applied.
    */
   failedTextCompression: 'No compression applied',
+  /**
+   * @description Text for a label describing a network request event as having redirects.
+   */
+  redirectsLabel: 'Redirects',
+  /**
+   * @description Text for a label describing a network request event as taking too long to start delivery by the server.
+   */
+  serverResponseTimeLabel: 'Server response time',
+  /**
+   * @description Text for a label describing a network request event as taking longer to download because it wasn't compressed.
+   */
+  uncompressedDownload: 'Uncompressed download',
+  /**
+   *@description Text for a screen-reader label to tell the user that the icon represents a successful insight check
+   *@example {Server response time} PH1
+   */
+  successAriaLabel: 'Insight check passed: {PH1}',
+  /**
+   *@description Text for a screen-reader label to tell the user that the icon represents an unsuccessful insight check
+   *@example {Server response time} PH1
+   */
+  failedAriaLabel: 'Insight check failed: {PH1}',
 };
 
 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 {
-  static readonly litTagName = LitHtml.literal`devtools-performance-document-latency`;
+  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 = '';
+  override description: string = i18nString(UIStrings.description);
 
   #check(didPass: boolean, good: string, bad: string): LitHtml.TemplateResult {
     const icon = didPass ? 'check-circle' : 'clear';
 
-    return LitHtml.html`
-      <${IconButton.Icon.Icon.litTagName}
+    const ariaLabel = didPass ? i18nString(UIStrings.successAriaLabel, {PH1: good}) :
+                                i18nString(UIStrings.failedAriaLabel, {PH1: bad});
+    return html`
+      <devtools-icon
+        aria-label=${ariaLabel}
         name=${icon}
         class=${didPass ? 'metric-value-good' : 'metric-value-bad'}
-      ></${IconButton.Icon.Icon.litTagName}>
+      ></devtools-icon>
       <span>${didPass ? good : bad}</span>
     `;
   }
@@ -71,11 +104,56 @@ export class DocumentLatency extends BaseInsight {
       return [];
     }
 
-    // TODO(crbug.com/352244434) add breakdown for server response time, queing, redirects, etc...
-    return [{
+    const overlays: Overlays.Overlays.TimelineOverlay[] = [];
+    const event = insight.data.documentRequest;
+    const redirectDurationMicro = Trace.Helpers.Timing.millisecondsToMicroseconds(insight.data.redirectDuration);
+
+    const sections = [];
+    if (insight.data.redirectDuration) {
+      const bounds = Trace.Helpers.Timing.traceWindowFromMicroSeconds(
+          event.ts,
+          (event.ts + redirectDurationMicro) as Trace.Types.Timing.MicroSeconds,
+      );
+      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);
+      // 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);
+      const bounds = Trace.Helpers.Timing.traceWindowFromMicroSeconds(
+          sendEndMicro,
+          (sendEndMicro + serverResponseTimeMicro) as Trace.Types.Timing.MicroSeconds,
+      );
+      sections.push({bounds, label: i18nString(UIStrings.serverResponseTimeLabel), showDuration: true});
+    }
+    if (insight.data.uncompressedResponseBytes) {
+      const bounds = Trace.Helpers.Timing.traceWindowFromMicroSeconds(
+          event.args.data.syntheticData.downloadStart,
+          (event.args.data.syntheticData.downloadStart + event.args.data.syntheticData.download) as
+              Trace.Types.Timing.MicroSeconds,
+      );
+      sections.push({bounds, label: i18nString(UIStrings.uncompressedDownload), showDuration: true});
+      overlays.push({type: 'CANDY_STRIPED_TIME_RANGE', bounds, entry: event});
+    }
+
+    if (sections.length) {
+      overlays.push({
+        type: 'TIMESPAN_BREAKDOWN',
+        sections,
+        entry: insight.data.documentRequest,
+        // Always render below because the document request is guaranteed to be
+        // the first request in the network track.
+        renderLocation: 'BELOW_EVENT',
+      });
+    }
+    overlays.push({
       type: 'ENTRY_SELECTED',
       entry: insight.data.documentRequest,
-    }];
+    });
+
+    return overlays;
   }
 
   #renderInsight(insight: Trace.Insights.Types.InsightResults['DocumentLatency']): LitHtml.LitTemplate {
@@ -84,14 +162,15 @@ export class DocumentLatency extends BaseInsight {
     }
 
     // clang-format off
-    return LitHtml.html`
+    return html`
     <div class="insights">
-      <${SidebarInsight.SidebarInsight.litTagName} .data=${{
+      <devtools-performance-sidebar-insight .data=${{
             title: this.userVisibleTitle,
             description: this.description,
             expanded: this.isActive(),
             internalName: this.internalName,
-            estimatedSavings: insight.metricSavings?.FCP,
+            estimatedSavingsTime: insight.metricSavings?.FCP,
+            estimatedSavingsBytes: insight.data.uncompressedResponseBytes,
         } as SidebarInsight.InsightDetails}
         @insighttoggleclick=${this.onSidebarClick}
       >
@@ -111,11 +190,16 @@ export class DocumentLatency extends BaseInsight {
             </li>
           </ul>
         </div>
-      </${SidebarInsight.SidebarInsight}>
+      </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 ?? [];
+  }
+
   override render(): void {
     const insight = Trace.Insights.Common.getInsight('DocumentLatency', this.data.insights, this.data.insightSetKey);
     const matchesCategory = shouldRenderForCategory({

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

@@ -0,0 +1,92 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+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';
+
+const {html} = LitHtml;
+
+export class EventReferenceClick extends Event {
+  static readonly eventName = 'eventreferenceclick';
+
+  constructor(public event: Trace.Types.Events.Event) {
+    super(EventReferenceClick.eventName, {bubbles: true, composed: true});
+  }
+}
+
+class EventRef extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-performance-event-ref`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #boundRender = this.#render.bind(this);
+
+  #text: string|null = null;
+  #event: Trace.Types.Events.Event|null = null;
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [sidebarInsightStyles];
+  }
+
+  set text(text: string) {
+    this.#text = text;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  set event(event: Trace.Types.Events.Event) {
+    this.#event = event;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  #render(): void {
+    if (!this.#text || !this.#event) {
+      return;
+    }
+
+    // clang-format off
+    LitHtml.render(html`
+      <button type="button" class="timeline-link" @click=${(e: Event) => {
+        e.stopPropagation();
+        if (this.#event) {
+          this.dispatchEvent(new EventReferenceClick(this.#event));
+        }
+      }}>${this.#text}</button>
+    `, this.#shadow, {host: this});
+    // clang-format on
+  }
+}
+
+type EventRefSupportedEvents = Trace.Types.Events.SyntheticNetworkRequest;
+
+export function eventRef(event: EventRefSupportedEvents): LitHtml.TemplateResult {
+  let title, text;
+  if (Trace.Types.Events.isSyntheticNetworkRequest(event)) {
+    text = Utils.Helpers.shortenUrl(new URL(event.args.data.url));
+    title = event.args.data.url;
+  } else {
+    Platform.TypeScriptUtilities.assertNever(
+        event, `unsupported event in eventRef: ${(event as Trace.Types.Events.Event).name}`);
+  }
+
+  return html`<devtools-performance-event-ref
+    .event=${event as Trace.Types.Events.Event}
+    .text=${text}
+    title=${title}
+  ></devtools-performance-event-ref>`;
+}
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    [EventReferenceClick.eventName]: EventReferenceClick;
+  }
+
+  interface HTMLElementTagNameMap {
+    'devtools-performance-event-ref': EventRef;
+  }
+}
+
+customElements.define('devtools-performance-event-ref', EventRef);

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

@@ -2,16 +2,21 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './Table.js';
+
 import * as i18n from '../../../../core/i18n/i18n.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, shortenUrl, shouldRenderForCategory} from './Helpers.js';
-import * as SidebarInsight from './SidebarInsight.js';
-import {Table, type TableData} from './Table.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',
@@ -19,7 +24,7 @@ const UIStrings = {
    * @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.',
+      '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. */
@@ -30,7 +35,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/Fo
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class FontDisplay extends BaseInsight {
-  static readonly litTagName = LitHtml.literal`devtools-performance-font-display`;
+  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);
@@ -57,39 +62,45 @@ export class FontDisplay extends BaseInsight {
     return [...this.#overlayForRequest.values()];
   }
 
-  #render(data: Trace.Insights.Types.InsightResults['FontDisplay']): LitHtml.TemplateResult {
+  #render(insight: Trace.Insights.Types.InsightResults['FontDisplay']): LitHtml.TemplateResult {
     // clang-format off
-    return LitHtml.html`
+    return html`
         <div class="insights">
-            <${SidebarInsight.SidebarInsight.litTagName} .data=${{
+            <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">
-                  ${LitHtml.html`<${Table.litTagName}
+                  ${html`<devtools-performance-table
                     .data=${{
                       insight: this,
                       headers: [i18nString(UIStrings.fontColumn), 'font-display', i18nString(UIStrings.wastedTimeColumn)],
-                      rows: data.fonts.map(font => ({
+                      rows: insight.fonts.map(font => ({
                         values: [
                           // TODO(crbug.com/369422196): the font name would be nicer here.
-                          shortenUrl(font.request.args.data.url),
+                          eventRef(font.request),
                           font.display,
                           i18n.TimeUtilities.millisToString(font.wastedTime),
                         ],
                         overlays: [this.#overlayForRequest.get(font.request)],
                       })),
                     } as TableData}>
-                  </${Table.litTagName}>`}
+                  </devtools-performance-table>`}
                 </div>
-            </${SidebarInsight.SidebarInsight}>
+            </devtools-performance-sidebar-insight>
         </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);