chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

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

@@ -6,33 +6,22 @@ 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 type {RenderBlockingInsightModel} from '../../../../models/trace/insights/RenderBlocking.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 type * as SidebarInsight from './SidebarInsight.js';
-import type {TableData} from './Table.js';
+import {BaseInsightComponent, shouldRenderForCategory} from './Helpers.js';
 import {Category} from './types.js';
 
 const {html} = LitHtml;
 
 const UIStrings = {
   /**
-   * @description 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.
+   * @description Label to describe a network request (that happens to be render-blocking).
    */
-  title: 'Render blocking requests',
-  /**
-   * @description Text to describe that there are requests blocking rendering, which may affect LCP.
-   */
-  description: 'Requests are blocking the page\'s initial render, which may delay LCP. ' +
-      '[Deferring or inlining](https://web.dev/learn/performance/understanding-the-critical-path#render-blocking_resources/) ' +
-      'can move these network requests out of the critical path.',
-  /**
-   * @description Label to describe a render-blocking network request.
-   */
-  renderBlockingRequest: 'Render-blocking request',
+  renderBlockingRequest: 'Request',
   /**
    *@description Label used for a time duration.
    */
@@ -42,20 +31,17 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/RenderBlocking.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class RenderBlockingRequests extends BaseInsight {
+export class RenderBlocking extends BaseInsightComponent<RenderBlockingInsightModel> {
   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);
-  override description: string = i18nString(UIStrings.description);
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
-    const insight = Trace.Insights.Common.getInsight('RenderBlocking', this.data.insights, this.data.insightSetKey);
-    if (!insight) {
+    if (!this.model) {
       return [];
     }
 
-    return insight.renderBlockingRequests.map(request => this.#createOverlayForRequest(request));
+    return this.model.renderBlockingRequests.map(request => this.#createOverlayForRequest(request));
   }
 
   #createOverlayForRequest(request: Trace.Types.Events.SyntheticNetworkRequest): Overlays.Overlays.EntryOutline {
@@ -66,7 +52,11 @@ export class RenderBlockingRequests extends BaseInsight {
     };
   }
 
-  #renderRenderBlocking(insightResult: Trace.Insights.Types.InsightResults['RenderBlocking']): LitHtml.TemplateResult {
+  #renderRenderBlocking(insightResult: Trace.Insights.Types.InsightModels['RenderBlocking']): LitHtml.LitTemplate {
+    if (!this.model) {
+      return LitHtml.nothing;
+    }
+
     const estimatedSavings = insightResult.metricSavings?.FCP;
     const MAX_REQUESTS = 3;
     const topRequests = insightResult.renderBlockingRequests.slice(0, MAX_REQUESTS);
@@ -75,12 +65,12 @@ export class RenderBlockingRequests 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(),
             estimatedSavingsTime: estimatedSavings,
-          } as SidebarInsight.InsightDetails}
+          }}
           @insighttoggleclick=${this.onSidebarClick} >
             <div slot="insight-content" class="insight-section">
               ${html`<devtools-performance-table
@@ -94,35 +84,34 @@ export class RenderBlockingRequests extends BaseInsight {
                     ],
                     overlays: [this.#createOverlayForRequest(request)],
                   })),
-                } as TableData}>
+                }}>
               </devtools-performance-table>`}
             </div>
           </devtools-performance-sidebar-insight>
       </div>`;
-    // clang-format on
+            // clang-format on
   }
 
   override getRelatedEvents(): Trace.Types.Events.Event[] {
-    const insight = Trace.Insights.Common.getInsight('RenderBlocking', this.data.insights, this.data.insightSetKey);
-    return insight?.relatedEvents ?? [];
+    return this.model?.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;
+    const model = this.model;
+    const hasBlockingRequests = model?.renderBlockingRequests && model.renderBlockingRequests.length > 0;
     const matchesCategory = shouldRenderForCategory({
       activeCategory: this.data.activeCategory,
       insightCategory: this.insightCategory,
     });
-    const output = hasBlockingRequests && matchesCategory ? this.#renderRenderBlocking(insight) : LitHtml.nothing;
+    const output = hasBlockingRequests && matchesCategory ? this.#renderRenderBlocking(model) : LitHtml.nothing;
     LitHtml.render(output, this.shadow, {host: this});
   }
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    'devtools-performance-render-blocking-requests': RenderBlockingRequests;
+    'devtools-performance-render-blocking-requests': RenderBlocking;
   }
 }
 
-customElements.define('devtools-performance-render-blocking-requests', RenderBlockingRequests);
+customElements.define('devtools-performance-render-blocking-requests', RenderBlocking);

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

@@ -3,7 +3,6 @@
 // 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';
@@ -18,17 +17,17 @@ const {html} = LitHtml;
 
 const UIStrings = {
   /**
-   * @description Text to tell the user the estimated time or size savings for this insight.
+   * @description Text to tell the user the estimated time or size savings for this insight. "&" means "and" - space is limited to prefer abbreviated terms if possible. Text will still fit if not short, it just won't look very good, so using no abbreviations is fine if necessary.
    * @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.
+   * @description Text to tell the user the estimated time and size savings for this insight. "&" means "and", "Est" means "Estimated" - space is limited to prefer abbreviated terms if possible. Text will still fit if not short, it just won't look very good, so using no abbreviations is fine if necessary.
    * @example {401 ms} PH1
    * @example {112 kB} PH2
    */
-  estimatedSavingsTimingAndBytes: 'Est savings: {PH1} && {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
@@ -51,7 +50,9 @@ export interface InsightDetails {
 export class InsightActivated extends Event {
   static readonly eventName = 'insightactivated';
 
-  constructor(public name: string, public insightSetKey: string, public overlays: Overlays.Overlays.TimelineOverlay[]) {
+  constructor(
+      public name: string, public insightSetKey: string, public overlays: Overlays.Overlays.TimelineOverlay[],
+      public relatedEvents: Trace.Types.Events.Event[]) {
     super(InsightActivated.eventName, {bubbles: true, composed: true});
   }
 }
@@ -70,6 +71,13 @@ export class InsightSetHovered extends Event {
   }
 }
 
+export class InsightSetZoom extends Event {
+  static readonly eventName = 'insightsetzoom';
+  constructor(public bounds: Trace.Types.Timing.TraceWindowMicroSeconds) {
+    super(InsightSetZoom.eventName, {bubbles: true, composed: true});
+  }
+}
+
 export class InsightProvideOverlays extends Event {
   static readonly eventName = 'insightprovideoverlays';
 
@@ -94,13 +102,13 @@ declare global {
     [InsightActivated.eventName]: InsightActivated;
     [InsightDeactivated.eventName]: InsightDeactivated;
     [InsightSetHovered.eventName]: InsightSetHovered;
+    [InsightSetZoom.eventName]: InsightSetZoom;
     [InsightProvideOverlays.eventName]: InsightProvideOverlays;
     [InsightProvideRelatedEvents.eventName]: InsightProvideRelatedEvents;
   }
 }
 
 export class SidebarInsight extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-performance-sidebar-insight`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
 
@@ -177,7 +185,7 @@ export class SidebarInsight extends HTMLElement {
       timeString = i18n.TimeUtilities.millisToString(this.#estimatedSavingsTime);
     }
     if (this.#estimatedSavingsBytes !== undefined && this.#estimatedSavingsBytes > 0) {
-      bytesString = Platform.NumberUtilities.bytesToString(this.#estimatedSavingsBytes);
+      bytesString = i18n.ByteUtilities.bytesToString(this.#estimatedSavingsBytes);
     }
 
     if (timeString && bytesString) {

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

@@ -3,14 +3,19 @@
 // found in the LICENSE file.
 
 import './Table.js';
+import '../../../../ui/components/linkifier/linkifier.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
+import * as SDK from '../../../../core/sdk/sdk.js';
+import type * as Protocol from '../../../../generated/protocol.js';
+import type {SlowCSSSelectorInsightModel} from '../../../../models/trace/insights/SlowCSSSelector.js';
 import * as Trace from '../../../../models/trace/trace.js';
+import type * as Linkifier from '../../../../ui/components/linkifier/linkifier.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
-import {BaseInsight, shouldRenderForCategory} from './Helpers.js';
+import {BaseInsightComponent, shouldRenderForCategory} from './Helpers.js';
 import type * as SidebarInsight from './SidebarInsight.js';
 import type {TableData} from './Table.js';
 import {Category} from './types.js';
@@ -18,17 +23,6 @@ import {Category} from './types.js';
 const {html} = LitHtml;
 
 const UIStrings = {
-  /**
-   *@description Title of an insight that provides details about slow CSS selectors.
-   */
-  title: 'CSS Selector costs',
-
-  /**
-   * @description Text to describe how to improve the performance of CSS selectors.
-   */
-  description:
-      '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
    */
@@ -54,82 +48,153 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/SlowCSSSelector.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class SlowCSSSelector extends BaseInsight {
+export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsightModel> {
   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);
-  override description: string = i18nString(UIStrings.description);
-  #slowCSSSelector: Trace.Insights.InsightRunners.SlowCSSSelector.SlowCSSSelectorInsightResult|null = null;
+  #selectorLocations: Map<string, Protocol.CSS.SourceRange[]> = new Map();
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
     return [];
   }
 
+  private async toSourceFileLocation(cssModel: SDK.CSSModel.CSSModel, selector: Trace.Types.Events.SelectorTiming):
+      Promise<Linkifier.Linkifier.LinkifierData[]|undefined> {
+    if (!cssModel) {
+      return undefined;
+    }
+    const styleSheetHeader = cssModel.styleSheetHeaderForId(selector.style_sheet_id as Protocol.CSS.StyleSheetId);
+    if (!styleSheetHeader || !styleSheetHeader.resourceURL()) {
+      return undefined;
+    }
+
+    // get the locations from cache if available
+    const key: string = JSON.stringify({selectorText: selector.selector, styleSheetId: selector.style_sheet_id});
+    let ranges = this.#selectorLocations.get(key);
+    if (!ranges) {
+      const result = await cssModel.agent.invoke_getLocationForSelector(
+          {selectorText: selector.selector, styleSheetId: selector.style_sheet_id as Protocol.CSS.StyleSheetId});
+      if (result.getError() || !result.ranges) {
+        return undefined;
+      }
+      ranges = result.ranges;
+      this.#selectorLocations.set(key, ranges);
+    }
+
+    const locations = ranges.map((range, itemIndex) => {
+      return {
+        url: styleSheetHeader.resourceURL() as Platform.DevToolsPath.UrlString,
+        lineNumber: range.startLine,
+        columnNumber: range.startColumn,
+        linkText: `[${itemIndex + 1}]`,
+        title: `${styleSheetHeader.id} line ${range.startLine + 1}:${range.startColumn + 1}`,
+      } as Linkifier.Linkifier.LinkifierData;
+    });
+    return locations;
+  }
+
+  private async getSelectorLinks(
+      cssModel: SDK.CSSModel.CSSModel|null|undefined,
+      selector: Trace.Types.Events.SelectorTiming): Promise<LitHtml.LitTemplate> {
+    if (!cssModel) {
+      return LitHtml.nothing;
+    }
+
+    if (!selector.style_sheet_id) {
+      return LitHtml.nothing;
+    }
+
+    const locations = await this.toSourceFileLocation(cssModel, selector);
+    if (!locations) {
+      return LitHtml.nothing;
+    }
+
+    const links = html`
+    ${locations.map((location, itemIndex) => {
+      const divider = itemIndex !== locations.length - 1 ? ', ' : '';
+      return html`<devtools-linkifier .data=${location as Linkifier.Linkifier.LinkifierData}></devtools-linkifier>${
+          divider}`;
+    })}`;
+
+    return links;
+  }
+
   renderSlowCSSSelector(): LitHtml.LitTemplate {
+    if (!this.model) {
+      return LitHtml.nothing;
+    }
+
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const cssModel = target?.model(SDK.CSSModel.CSSModel);
     const time = (us: Trace.Types.Timing.MicroSeconds): string =>
         i18n.TimeUtilities.millisToString(Platform.Timing.microSecondsToMilliSeconds(us));
 
     // clang-format off
-    return this.#slowCSSSelector ? html`
+    return html`
       <div class="insights">
         <devtools-performance-sidebar-insight .data=${{
-              title: this.userVisibleTitle,
-              description: this.description,
+              title: this.model.title,
+              description: this.model.description,
               internalName: this.internalName,
               expanded: this.isActive(),
           } as SidebarInsight.InsightDetails}
           @insighttoggleclick=${this.onSidebarClick} >
-          <div slot="insight-content" class="insight-section">
-            ${html`<devtools-performance-table
-              .data=${{
-                insight: this,
-                headers: [i18nString(UIStrings.total), ''],
-                rows: [
-                  {values: [i18nString(UIStrings.elapsed), i18n.TimeUtilities.millisToString(this.#slowCSSSelector.totalElapsedMs)]},
-                  {values: [i18nString(UIStrings.matchAttempts), this.#slowCSSSelector.totalMatchAttempts]},
-                  {values: [i18nString(UIStrings.matchCount), this.#slowCSSSelector.totalMatchCount]},
-                ],
-              } as TableData}>
-            </devtools-performance-table>`}
-            ${html`<devtools-performance-table
-              .data=${{
-                insight: this,
-                headers: [i18nString(UIStrings.topSelectors), i18nString(UIStrings.elapsed)],
-                rows: this.#slowCSSSelector.topElapsedMs.map(selector => {
-                  return {
-                    values: [selector.selector, time(Trace.Types.Timing.MicroSeconds(selector['elapsed (us)']))],
-                  };
-                }),
-              } as TableData}>
-            </devtools-performance-table>`}
-            ${html`<devtools-performance-table
-              .data=${{
-                insight: this,
-                headers: [i18nString(UIStrings.topSelectors), i18nString(UIStrings.matchAttempts)],
-                rows: this.#slowCSSSelector.topMatchAttempts.map(selector => {
-                  return {
-                    values: [selector.selector, selector['match_attempts']],
-                  };
-                }),
-              } as TableData}>
-            </devtools-performance-table>`}
+          <div slot="insight-content">
+            <div class="insight-section">
+              ${html`<devtools-performance-table
+                .data=${{
+                  insight: this,
+                  headers: [i18nString(UIStrings.total), ''],
+                  rows: [
+                    {values: [i18nString(UIStrings.elapsed), i18n.TimeUtilities.millisToString(this.model.totalElapsedMs)]},
+                    {values: [i18nString(UIStrings.matchAttempts), this.model.totalMatchAttempts]},
+                    {values: [i18nString(UIStrings.matchCount), this.model.totalMatchCount]},
+                  ],
+                } as TableData}>
+              </devtools-performance-table>`}
+            </div>
+            <div class="insight-section">
+              ${html`<devtools-performance-table
+                .data=${{
+                  insight: this,
+                  headers: [i18nString(UIStrings.topSelectors), i18nString(UIStrings.elapsed)],
+                  rows: this.model.topElapsedMs.map(selector => {
+                    return {
+                      values: [
+                      html`${selector.selector} ${LitHtml.Directives.until(this.getSelectorLinks(cssModel, selector))}`,
+                      time(Trace.Types.Timing.MicroSeconds(selector['elapsed (us)']))],
+                    };
+                  }),
+                } as TableData}>
+              </devtools-performance-table>`}
+            </div>
+            <div class="insight-section">
+              ${html`<devtools-performance-table
+                .data=${{
+                  insight: this,
+                  headers: [i18nString(UIStrings.topSelectors), i18nString(UIStrings.matchAttempts)],
+                  rows: this.model.topMatchAttempts.map(selector => {
+                    return {
+                      values: [
+                      html`${selector.selector} ${LitHtml.Directives.until(this.getSelectorLinks(cssModel, selector))}` as unknown as string,
+                      selector['match_attempts']],
+                    };
+                  }),
+                } as TableData}>
+              </devtools-performance-table>`}
+            </div>
           </div>
         </devtools-performance-sidebar-insight>
-      </div>` : LitHtml.nothing;
+      </div>`;
     // clang-format on
   }
 
   #hasDataToRender(): boolean {
-    this.#slowCSSSelector =
-        Trace.Insights.Common.getInsight('SlowCSSSelector', this.data.insights, this.data.insightSetKey);
-    return this.#slowCSSSelector !== null && this.#slowCSSSelector.topElapsedMs.length !== 0 &&
-        this.#slowCSSSelector.topMatchAttempts.length !== 0;
+    return this.model !== null && this.model.topElapsedMs.length !== 0 && this.model.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 ?? [];
+    return this.model?.relatedEvents ?? [];
   }
 
   override render(): void {

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

@@ -6,7 +6,7 @@ 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 {BaseInsightComponent} from './Helpers.js';
 import tableStyles from './table.css.js';
 
 const {html} = LitHtml;
@@ -15,10 +15,9 @@ const {html} = LitHtml;
  * @fileoverview An interactive table component.
  *
  * On hover:
- *           desaturates the relevant time range (in both the minimap and the flamegraph), and
+ *           desaturates the relevant events (in both the minimap and the flamegraph), and
  *           replaces the current insight's overlays with the overlays attached to that row.
  *           The currently selected trace bounds does not change.
- *           TODO(crbug.com/369102516): make the "desaturates the flamegraph" part true
  *
  *           Removing the mouse from the table without clicking on any row restores the original
  *           overlays.
@@ -34,7 +33,8 @@ export type TableState = {
 };
 
 export interface TableData {
-  insight: BaseInsight;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  insight: BaseInsightComponent<any>;
   headers: string[];
   rows: TableDataRow[];
 }
@@ -45,11 +45,11 @@ export type TableDataRow = {
 };
 
 export class Table extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-performance-table`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
-  #insight?: BaseInsight;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  #insight?: BaseInsightComponent<any>;
   #state?: TableState;
   #headers?: string[];
   #rows?: TableDataRow[];

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

@@ -6,31 +6,22 @@ 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 type {ThirdPartiesInsightModel} from '../../../../models/trace/insights/ThirdParties.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 {BaseInsight, shouldRenderForCategory} from './Helpers.js';
-import type * as SidebarInsight from './SidebarInsight.js';
-import type {TableData} from './Table.js';
+import {BaseInsightComponent, shouldRenderForCategory} from './Helpers.js';
 import {Category} from './types.js';
 
 const {html} = LitHtml;
 
 type ThirdPartiesEntries = Array<[
-  Trace.Insights.InsightRunners.ThirdPartyWeb.Entity,
-  Trace.Insights.InsightRunners.ThirdPartyWeb.Summary,
+  Trace.Extras.ThirdParties.Entity,
+  Trace.Extras.ThirdParties.Summary,
 ]>;
 
 const UIStrings = {
-  /** Title of an insight that provides details about the code on a web page that the user doesn't control (referred to as "third-party code"). */
-  title: 'Third parties',
-  /**
-   * @description Description of a DevTools insight that identifies the code on the page that the user doesn't control.
-   * 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. ' +
-      '[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. */
@@ -42,27 +33,23 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/ThirdParties.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class ThirdParties extends BaseInsight {
+export class ThirdParties extends BaseInsightComponent<ThirdPartiesInsightModel> {
   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);
-  override description: string = i18nString(UIStrings.description);
 
-  #overlaysForEntity =
-      new Map<Trace.Insights.InsightRunners.ThirdPartyWeb.Entity, Overlays.Overlays.TimelineOverlay[]>();
+  #overlaysForEntity = new Map<Trace.Extras.ThirdParties.Entity, Overlays.Overlays.TimelineOverlay[]>();
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
     this.#overlaysForEntity.clear();
 
-    const insight = Trace.Insights.Common.getInsight('ThirdPartyWeb', this.data.insights, this.data.insightSetKey);
-    if (!insight) {
+    if (!this.model) {
       return [];
     }
 
     const overlays: Overlays.Overlays.TimelineOverlay[] = [];
-    for (const [entity, requests] of insight.requestsByEntity) {
-      if (entity === insight.firstPartyEntity) {
+    for (const [entity, requests] of this.model.requestsByEntity) {
+      if (entity === this.model.firstPartyEntity) {
         continue;
       }
 
@@ -83,7 +70,11 @@ export class ThirdParties extends BaseInsight {
     return overlays;
   }
 
-  #render(entries: ThirdPartiesEntries): LitHtml.TemplateResult {
+  #render(entries: ThirdPartiesEntries): LitHtml.LitTemplate {
+    if (!this.model) {
+      return LitHtml.nothing;
+    }
+
     const topTransferSizeEntries = entries.sort((a, b) => b[1].transferSize - a[1].transferSize).slice(0, 6);
     const topMainThreadTimeEntries = entries.sort((a, b) => b[1].mainThreadTime - a[1].mainThreadTime).slice(0, 6);
 
@@ -91,11 +82,11 @@ export class ThirdParties extends BaseInsight {
     return html`
         <div class="insights">
             <devtools-performance-sidebar-insight .data=${{
-              title: this.userVisibleTitle,
-              description: this.description,
+              title: this.model.title,
+              description: this.model.description,
               internalName: this.internalName,
               expanded: this.isActive(),
-            } as SidebarInsight.InsightDetails}
+            }}
             @insighttoggleclick=${this.onSidebarClick}>
                 <div slot="insight-content">
                   <div class="insight-section">
@@ -106,11 +97,11 @@ export class ThirdParties extends BaseInsight {
                         rows: topTransferSizeEntries.map(([entity, summary]) => ({
                           values: [
                             entity.name,
-                            Platform.NumberUtilities.bytesToString(summary.transferSize),
+                            i18n.ByteUtilities.bytesToString(summary.transferSize),
                           ],
                           overlays: this.#overlaysForEntity.get(entity),
                         })),
-                      } as TableData}>
+                      }}>
                     </devtools-performance-table>`}
                   </div>
 
@@ -126,7 +117,7 @@ export class ThirdParties extends BaseInsight {
                           ],
                           overlays: this.#overlaysForEntity.get(entity),
                         })),
-                      } as TableData}>
+                      }}>
                     </devtools-performance-table>`}
                   </div>
                 </div>
@@ -136,13 +127,12 @@ export class ThirdParties extends BaseInsight {
   }
 
   override getRelatedEvents(): Trace.Types.Events.Event[] {
-    const insight = Trace.Insights.Common.getInsight('ThirdPartyWeb', this.data.insights, this.data.insightSetKey);
-    return insight?.relatedEvents ?? [];
+    return this.model?.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);
+    const model = this.model;
+    const entries = model && [...model.summaryByEntity.entries()].filter(kv => kv[0] !== model.firstPartyEntity);
     const shouldShow = entries?.length;
 
     const matchesCategory = shouldRenderForCategory({