chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

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

@@ -2,17 +2,22 @@
 // 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 Platform from '../../../../core/platform/platform.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 = {
   /**
    * @description Title of an insight that provides the user with the list of network requests that blocked and therefore slowed down the page rendering and becoming visible to the user.
@@ -38,7 +43,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/Re
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class RenderBlockingRequests extends BaseInsight {
-  static readonly litTagName = LitHtml.literal`devtools-performance-render-blocking-requests`;
+  static override readonly litTagName = LitHtml.literal`devtools-performance-render-blocking-requests`;
   override insightCategory: Category = Category.LCP;
   override internalName: string = 'render-blocking-requests';
   override userVisibleTitle: string = i18nString(UIStrings.title);
@@ -67,38 +72,41 @@ export class RenderBlockingRequests extends BaseInsight {
     const topRequests = insightResult.renderBlockingRequests.slice(0, MAX_REQUESTS);
 
     // 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,
             expanded: this.isActive(),
-            estimatedSavings,
+            estimatedSavingsTime: estimatedSavings,
           } as SidebarInsight.InsightDetails}
-          @insighttoggleclick=${this.onSidebarClick}
-        >
-          <div slot="insight-content" class="insight-section">
-            ${LitHtml.html`<${Table.litTagName}
-              .data=${{
-                insight: this,
-                headers: [i18nString(UIStrings.renderBlockingRequest), i18nString(UIStrings.duration)],
-                rows: topRequests.map(request => ({
-                  values: [
-                    shortenUrl(request.args.data.url),
-                    i18n.TimeUtilities.millisToString(Platform.Timing.microSecondsToMilliSeconds(request.dur)),
+          @insighttoggleclick=${this.onSidebarClick} >
+            <div slot="insight-content" class="insight-section">
+              ${html`<devtools-performance-table
+                .data=${{
+                  insight: this,
+                  headers: [i18nString(UIStrings.renderBlockingRequest), i18nString(UIStrings.duration)],
+                  rows: topRequests.map(request => ({
+                    values: [
+                      eventRef(request),
+                      i18n.TimeUtilities.millisToString(Platform.Timing.microSecondsToMilliSeconds(request.dur)),
                     ],
-                  // TODO(crbug.com/369102516): clicking should select the network trace event
-                  overlays: [this.#createOverlayForRequest(request)],
-                })),
-              } as TableData}>
-            </${Table.litTagName}>`}
-          </div>
-        </${SidebarInsight.SidebarInsight}>
+                    overlays: [this.#createOverlayForRequest(request)],
+                  })),
+                } as TableData}>
+              </devtools-performance-table>`}
+            </div>
+          </devtools-performance-sidebar-insight>
       </div>`;
     // clang-format on
   }
 
+  override getRelatedEvents(): Trace.Types.Events.Event[] {
+    const insight = Trace.Insights.Common.getInsight('RenderBlocking', this.data.insights, this.data.insightSetKey);
+    return insight?.relatedEvents ?? [];
+  }
+
   override render(): void {
     const insight = Trace.Insights.Common.getInsight('RenderBlocking', this.data.insights, this.data.insightSetKey);
     const hasBlockingRequests = insight?.renderBlockingRequests && insight.renderBlockingRequests.length > 0;

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

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../../core/i18n/i18n.js';
+import * as Platform from '../../../../core/platform/platform.js';
 import type * as Trace from '../../../../models/trace/trace.js';
 import * as Buttons from '../../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
@@ -13,12 +14,26 @@ import type * as Overlays from '../../overlays/overlays.js';
 import {md} from './Helpers.js';
 import sidebarInsightStyles from './sidebarInsight.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
-   * @description Text to tell the user the estimated savings for this insight.
-   * @example {401ms} PH1
+   * @description Text to tell the user the estimated time or size savings for this insight.
+   * @example {401 ms} PH1
+   * @example {112 kB} PH1
    */
   estimatedSavings: 'Est savings: {PH1}',
+  /**
+   * @description Text to tell the user the estimated time and size savings for this insight.
+   * @example {401 ms} PH1
+   * @example {112 kB} PH2
+   */
+  estimatedSavingsTimingAndBytes: 'Est savings: {PH1} && {PH2}',
+  /**
+   * @description Used for screen-readers as a label on the button to expand an insight to view details
+   * @example {LCP by phase} PH1
+   */
+  viewDetails: 'View details for {PH1}',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/SidebarInsight.ts', UIStrings);
@@ -29,7 +44,8 @@ export interface InsightDetails {
   description: string;
   internalName: string;
   expanded: boolean;
-  estimatedSavings?: number|undefined;
+  estimatedSavingsTime?: Trace.Types.Timing.MilliSeconds;
+  estimatedSavingsBytes?: number;
 }
 
 export class InsightActivated extends Event {
@@ -64,12 +80,22 @@ export class InsightProvideOverlays extends Event {
   }
 }
 
+export class InsightProvideRelatedEvents extends Event {
+  static readonly eventName = 'insightproviderelatedevents';
+
+  constructor(
+      public label: string, public events: Array<Trace.Types.Events.Event>, public activateInsight: () => void) {
+    super(InsightProvideRelatedEvents.eventName, {bubbles: true, composed: true});
+  }
+}
+
 declare global {
   interface GlobalEventHandlersEventMap {
     [InsightActivated.eventName]: InsightActivated;
     [InsightDeactivated.eventName]: InsightDeactivated;
     [InsightSetHovered.eventName]: InsightSetHovered;
     [InsightProvideOverlays.eventName]: InsightProvideOverlays;
+    [InsightProvideRelatedEvents.eventName]: InsightProvideRelatedEvents;
   }
 }
 
@@ -82,14 +108,16 @@ export class SidebarInsight extends HTMLElement {
   #insightDescription: string = '';
   #insightInternalName: string = '';
   #expanded: boolean = false;
-  #estimatedSavings: number|undefined = undefined;
+  #estimatedSavingsTime: Trace.Types.Timing.MilliSeconds|undefined = undefined;
+  #estimatedSavingsBytes: number|undefined = undefined;
 
   set data(data: InsightDetails) {
     this.#insightTitle = data.title;
     this.#insightDescription = data.description;
     this.#insightInternalName = data.internalName;
     this.#expanded = data.expanded;
-    this.#estimatedSavings = data.estimatedSavings;
+    this.#estimatedSavingsTime = data.estimatedSavingsTime;
+    this.#estimatedSavingsBytes = data.estimatedSavingsBytes;
 
     // Used for testing.
     this.dataset.insightTitle = data.title;
@@ -117,41 +145,90 @@ export class SidebarInsight extends HTMLElement {
       'insight-hover-icon': true,
       active: insightIsActive,
     });
-    return LitHtml.html`
-      <div class=${containerClasses} aria-hidden="true">
-        <${Buttons.Button.Button.litTagName} .data=${{
+    return html`
+      <div class=${containerClasses} inert>
+        <devtools-button .data=${{
           variant: Buttons.Button.Variant.ICON,
           iconName: 'chevron-down',
           size: Buttons.Button.Size.SMALL,
         } as Buttons.Button.ButtonData}
-      ></${Buttons.Button.Button.litTagName}>
+      ></devtools-button>
       </div>
 
     `;
     // clang-format on
   }
 
+  /**
+   * Ensure that if the user presses enter or space on a header, we treat it
+   * like a click and toggle the insight.
+   */
+  #handleHeaderKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      event.stopPropagation();
+      this.#dispatchInsightToggle();
+    }
+  }
+
+  #getEstimatedSavingsString(): string|null {
+    let timeString, bytesString;
+    if (this.#estimatedSavingsTime !== undefined && this.#estimatedSavingsTime > 0) {
+      timeString = i18n.TimeUtilities.millisToString(this.#estimatedSavingsTime);
+    }
+    if (this.#estimatedSavingsBytes !== undefined && this.#estimatedSavingsBytes > 0) {
+      bytesString = Platform.NumberUtilities.bytesToString(this.#estimatedSavingsBytes);
+    }
+
+    if (timeString && bytesString) {
+      return i18nString(UIStrings.estimatedSavingsTimingAndBytes, {
+        PH1: timeString,
+        PH2: bytesString,
+      });
+    }
+    if (timeString) {
+      return i18nString(UIStrings.estimatedSavings, {
+        PH1: timeString,
+      });
+    }
+    if (bytesString) {
+      return i18nString(UIStrings.estimatedSavings, {
+        PH1: bytesString,
+      });
+    }
+
+    return null;
+  }
+
   #render(): void {
     const containerClasses = LitHtml.Directives.classMap({
       insight: true,
       closed: !this.#expanded,
     });
+    const estimatedSavingsString = this.#getEstimatedSavingsString();
 
     // clang-format off
-    const output = LitHtml.html`
+    const output = html`
       <div class=${containerClasses}>
-        <header @click=${this.#dispatchInsightToggle} jslog=${VisualLogging.action(`timeline.toggle-insight.${this.#insightInternalName}`).track({click: true})}>
+        <header @click=${this.#dispatchInsightToggle}
+          @keydown=${this.#handleHeaderKeyDown}
+          jslog=${VisualLogging.action(`timeline.toggle-insight.${this.#insightInternalName}`).track({click: true})}
+          tabIndex="0"
+          role="button"
+          aria-expanded=${this.#expanded}
+          aria-label=${i18nString(UIStrings.viewDetails, {PH1: this.#insightTitle})}
+        >
           ${this.#renderHoverIcon(this.#expanded)}
           <h3 class="insight-title">${this.#insightTitle}</h3>
-          ${this.#estimatedSavings && this.#estimatedSavings > 0 ?
-            LitHtml.html`
+          ${estimatedSavingsString ?
+            html`
             <slot name="insight-savings" class="insight-savings">
-              ${i18nString(UIStrings.estimatedSavings, {PH1: i18n.TimeUtilities.millisToString(this.#estimatedSavings as Trace.Types.Timing.MilliSeconds)})}
+              ${estimatedSavingsString}
             </slot>
           </div>`
           : LitHtml.nothing}
         </header>
-        ${this.#expanded ? LitHtml.html`
+        ${this.#expanded ? html`
           <div class="insight-body">
             <div class="insight-description">${this.#insightDescription ? md(this.#insightDescription) : LitHtml.nothing}</div>
             <div class="insight-content">

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

@@ -2,28 +2,32 @@
 // 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 Platform from '../../../../core/platform/platform.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
-import type * as Components from '../../overlays/components/components.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
 import {BaseInsight, shouldRenderForCategory} from './Helpers.js';
-import * as SidebarInsight from './SidebarInsight.js';
-import {Table, type TableData} from './Table.js';
+import type * as SidebarInsight from './SidebarInsight.js';
+import type {TableData} from './Table.js';
 import {Category} from './types.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Title of an insight that provides details about slow CSS selectors.
    */
-  title: 'Slow CSS selectors',
+  title: 'CSS Selector costs',
+
   /**
    * @description Text to describe how to improve the performance of CSS selectors.
    */
   description:
-      'Learn how to [assess the performance of CSS selectors](https://developer.chrome.com/docs/devtools/performance/selector-stats).',
+      'If Recalculate Style costs remain high, selector optimization can reduce them. [Optimize the selectors](https://developer.chrome.com/docs/devtools/performance/selector-stats) with both high elapsed time and high slow-path %. Simpler selectors, fewer selectors, a smaller DOM, and a shallower DOM will all reduce matching costs.',
 
   /**
    *@description Column name for count of elements that the engine attempted to match against a style rule
@@ -51,7 +55,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/Sl
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class SlowCSSSelector extends BaseInsight {
-  static readonly litTagName = LitHtml.literal`devtools-performance-slow-css-selector`;
+  static override readonly litTagName = LitHtml.literal`devtools-performance-slow-css-selector`;
   override insightCategory: Category = Category.ALL;
   override internalName: string = 'slow-css-selector';
   override userVisibleTitle: string = i18nString(UIStrings.title);
@@ -59,28 +63,7 @@ export class SlowCSSSelector extends BaseInsight {
   #slowCSSSelector: Trace.Insights.InsightRunners.SlowCSSSelector.SlowCSSSelectorInsightResult|null = null;
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
-    if (!this.data.insights || !this.data.insightSetKey) {
-      return [];
-    }
-    const {insightSetKey: navigationId, insights} = this.data;
-
-    const insightsByNavigation = insights.get(navigationId);
-    if (!insightsByNavigation) {
-      return [];
-    }
-
-    const scsInsight: Error|Trace.Insights.InsightRunners.SlowCSSSelector.SlowCSSSelectorInsightResult =
-        insightsByNavigation.data.SlowCSSSelector;
-    if (scsInsight instanceof Error) {
-      return [];
-    }
-
-    const sections: Array<Components.TimespanBreakdownOverlay.EntryBreakdown> = [];
-
-    return [{
-      type: 'TIMESPAN_BREAKDOWN',
-      sections,
-    }];
+    return [];
   }
 
   renderSlowCSSSelector(): LitHtml.LitTemplate {
@@ -88,18 +71,17 @@ export class SlowCSSSelector extends BaseInsight {
         i18n.TimeUtilities.millisToString(Platform.Timing.microSecondsToMilliSeconds(us));
 
     // clang-format off
-    return this.#slowCSSSelector ? LitHtml.html`
+    return this.#slowCSSSelector ? html`
       <div class="insights">
-        <${SidebarInsight.SidebarInsight.litTagName} .data=${{
+        <devtools-performance-sidebar-insight .data=${{
               title: this.userVisibleTitle,
               description: this.description,
               internalName: this.internalName,
               expanded: this.isActive(),
           } as SidebarInsight.InsightDetails}
-          @insighttoggleclick=${this.onSidebarClick}
-        >
+          @insighttoggleclick=${this.onSidebarClick} >
           <div slot="insight-content" class="insight-section">
-            ${LitHtml.html`<${Table.litTagName}
+            ${html`<devtools-performance-table
               .data=${{
                 insight: this,
                 headers: [i18nString(UIStrings.total), ''],
@@ -109,8 +91,8 @@ export class SlowCSSSelector extends BaseInsight {
                   {values: [i18nString(UIStrings.matchCount), this.#slowCSSSelector.totalMatchCount]},
                 ],
               } as TableData}>
-            </${Table.litTagName}>`}
-            ${LitHtml.html`<${Table.litTagName}
+            </devtools-performance-table>`}
+            ${html`<devtools-performance-table
               .data=${{
                 insight: this,
                 headers: [i18nString(UIStrings.topSelectors), i18nString(UIStrings.elapsed)],
@@ -120,8 +102,8 @@ export class SlowCSSSelector extends BaseInsight {
                   };
                 }),
               } as TableData}>
-            </${Table.litTagName}>`}
-            ${LitHtml.html`<${Table.litTagName}
+            </devtools-performance-table>`}
+            ${html`<devtools-performance-table
               .data=${{
                 insight: this,
                 headers: [i18nString(UIStrings.topSelectors), i18nString(UIStrings.matchAttempts)],
@@ -131,9 +113,9 @@ export class SlowCSSSelector extends BaseInsight {
                   };
                 }),
               } as TableData}>
-            </${Table.litTagName}>`}
+            </devtools-performance-table>`}
           </div>
-        </${SidebarInsight}>
+        </devtools-performance-sidebar-insight>
       </div>` : LitHtml.nothing;
     // clang-format on
   }
@@ -145,6 +127,11 @@ export class SlowCSSSelector extends BaseInsight {
         this.#slowCSSSelector.topMatchAttempts.length !== 0;
   }
 
+  override getRelatedEvents(): Trace.Types.Events.Event[] {
+    const insight = Trace.Insights.Common.getInsight('SlowCSSSelector', this.data.insights, this.data.insightSetKey);
+    return insight?.relatedEvents ?? [];
+  }
+
   override render(): void {
     const matchesCategory = shouldRenderForCategory({
       activeCategory: this.data.activeCategory,

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

@@ -6,9 +6,11 @@ import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js'
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
-import {type BaseInsight} from './Helpers.js';
+import type {BaseInsight} from './Helpers.js';
 import tableStyles from './table.css.js';
 
+const {html} = LitHtml;
+
 /**
  * @fileoverview An interactive table component.
  *
@@ -38,7 +40,7 @@ export interface TableData {
 }
 
 export type TableDataRow = {
-  values: string[],
+  values: Array<string|LitHtml.LitTemplate>,
   overlays?: Overlays.Overlays.TimelineOverlay[],
 };
 
@@ -66,6 +68,7 @@ export class Table extends HTMLElement {
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets.push(tableStyles);
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 
   #onHoverRow(e: MouseEvent): void {
@@ -137,7 +140,7 @@ export class Table extends HTMLElement {
         this.#insight.toggleTemporaryOverlays(overlays, {updateTraceWindow: !opts.isHover});
       }
     } else {
-      this.#insight.toggleTemporaryOverlays(null);
+      this.#insight.toggleTemporaryOverlays(null, {updateTraceWindow: false});
     }
 
     this.#state.selectedRowEl?.classList.remove('selected');
@@ -152,14 +155,14 @@ export class Table extends HTMLElement {
     }
 
     LitHtml.render(
-        LitHtml.html`<table
+        html`<table
           class=${LitHtml.Directives.classMap({
           interactive: this.#interactive,
         })}
           @mouseleave=${this.#interactive ? this.#onMouseLeave : null}>
         <thead>
           <tr>
-          ${this.#headers.map(h => LitHtml.html`<th scope="col">${h}</th>`)}
+          ${this.#headers.map(h => html`<th scope="col">${h}</th>`)}
           </tr>
         </thead>
         <tbody
@@ -167,12 +170,12 @@ export class Table extends HTMLElement {
           @click=${this.#interactive ? this.#onClickRow : null}
         >
           ${this.#rows.map(row => {
-          const rowsEls = row.values.map(
-              (value, i) => i === 0 ? LitHtml.html`<th scope="row">${value}</th>` : LitHtml.html`<td>${value}</td>`);
-          return LitHtml.html`<tr>${rowsEls}</tr>`;
+          const rowsEls =
+              row.values.map((value, i) => i === 0 ? html`<th scope="row">${value}</th>` : html`<td>${value}</td>`);
+          return html`<tr>${rowsEls}</tr>`;
         })}
         </tbody>
-      </div>`,
+      </table>`,
         this.#shadow, {host: this});
   }
 }

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

@@ -2,6 +2,8 @@
 // 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 Platform from '../../../../core/platform/platform.js';
 import * as Trace from '../../../../models/trace/trace.js';
@@ -9,10 +11,12 @@ 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 {Table, type TableData} from './Table.js';
+import type * as SidebarInsight from './SidebarInsight.js';
+import type {TableData} from './Table.js';
 import {Category} from './types.js';
 
+const {html} = LitHtml;
+
 type ThirdPartiesEntries = Array<[
   Trace.Insights.InsightRunners.ThirdPartyWeb.Entity,
   Trace.Insights.InsightRunners.ThirdPartyWeb.Summary,
@@ -26,8 +30,7 @@ const UIStrings = {
    * This is displayed after a user expands the section to see more. No character length limits.
    */
   description: 'Third party code can significantly impact load performance. ' +
-      'Assess and reduce the ' +
-      '[amount of third party code](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/) on the page, and try to load what you can after the page has finished loading the main content.',
+      '[Reduce and defer loading of third party code](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/) to prioritize your page\'s content.',
   /** Label for a table column that displays the name of a third-party provider. */
   columnThirdParty: 'Third party',
   /** Label for a column in a data table; entries will be the download size of a web resource in kilobytes. */
@@ -40,7 +43,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/Th
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class ThirdParties extends BaseInsight {
-  static readonly litTagName = LitHtml.literal`devtools-performance-third-parties`;
+  static override readonly litTagName = LitHtml.literal`devtools-performance-third-parties`;
   override insightCategory: Category = Category.ALL;
   override internalName: string = 'third-parties';
   override userVisibleTitle: string = i18nString(UIStrings.title);
@@ -85,9 +88,9 @@ export class ThirdParties extends BaseInsight {
     const topMainThreadTimeEntries = entries.sort((a, b) => b[1].mainThreadTime - a[1].mainThreadTime).slice(0, 6);
 
     // 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,
@@ -96,7 +99,7 @@ export class ThirdParties extends BaseInsight {
             @insighttoggleclick=${this.onSidebarClick}>
                 <div slot="insight-content">
                   <div class="insight-section">
-                    ${LitHtml.html`<${Table.litTagName}
+                    ${html`<devtools-performance-table
                       .data=${{
                         insight: this,
                         headers: [i18nString(UIStrings.columnThirdParty), i18nString(UIStrings.columnTransferSize)],
@@ -108,11 +111,11 @@ export class ThirdParties extends BaseInsight {
                           overlays: this.#overlaysForEntity.get(entity),
                         })),
                       } as TableData}>
-                    </${Table.litTagName}>`}
+                    </devtools-performance-table>`}
                   </div>
 
                   <div class="insight-section">
-                    ${LitHtml.html`<${Table.litTagName}
+                    ${html`<devtools-performance-table
                       .data=${{
                         insight: this,
                         headers: [i18nString(UIStrings.columnThirdParty), i18nString(UIStrings.columnBlockingTime)],
@@ -124,14 +127,19 @@ export class ThirdParties extends BaseInsight {
                           overlays: this.#overlaysForEntity.get(entity),
                         })),
                       } as TableData}>
-                    </${Table.litTagName}>`}
+                    </devtools-performance-table>`}
                   </div>
                 </div>
-            </${SidebarInsight.SidebarInsight}>
+            </devtools-performance-sidebar-insight>
         </div>`;
     // clang-format on
   }
 
+  override getRelatedEvents(): Trace.Types.Events.Event[] {
+    const insight = Trace.Insights.Common.getInsight('ThirdPartyWeb', this.data.insights, this.data.insightSetKey);
+    return insight?.relatedEvents ?? [];
+  }
+
   override render(): void {
     const insight = Trace.Insights.Common.getInsight('ThirdPartyWeb', this.data.insights, this.data.insightSetKey);
     const entries = insight && [...insight.summaryByEntity.entries()].filter(kv => kv[0] !== insight.firstPartyEntity);