chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

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

@@ -2,43 +2,10 @@
 // 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 type {InsightModel} from '../../../../models/trace/insights/types.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';
-import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
-import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
 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 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. "&" 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}',
-  /**
-   * @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);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
 export interface InsightDetails {
   title: string;
   description: string;
@@ -52,8 +19,8 @@ export class InsightActivated extends Event {
   static readonly eventName = 'insightactivated';
 
   constructor(
-      public name: string, public insightSetKey: string, public overlays: Overlays.Overlays.TimelineOverlay[],
-      public relatedEvents: Trace.Types.Events.Event[]) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      public model: InsightModel<any>, public insightSetKey: string) {
     super(InsightActivated.eventName, {bubbles: true, composed: true});
   }
 }
@@ -89,15 +56,6 @@ 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;
@@ -105,158 +63,5 @@ declare global {
     [InsightSetHovered.eventName]: InsightSetHovered;
     [InsightSetZoom.eventName]: InsightSetZoom;
     [InsightProvideOverlays.eventName]: InsightProvideOverlays;
-    [InsightProvideRelatedEvents.eventName]: InsightProvideRelatedEvents;
   }
 }
-
-export class SidebarInsight extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  readonly #boundRender = this.#render.bind(this);
-
-  #insightTitle: string = '';
-  #insightDescription: string = '';
-  #insightInternalName: string = '';
-  #expanded: boolean = false;
-  #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.#estimatedSavingsTime = data.estimatedSavingsTime;
-    this.#estimatedSavingsBytes = data.estimatedSavingsBytes;
-
-    // Used for testing.
-    this.dataset.insightTitle = data.title;
-    if (data.expanded) {
-      this.dataset.insightExpanded = '';
-    } else {
-      delete this.dataset.insightExpanded;
-    }
-
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
-  }
-
-  connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [sidebarInsightStyles];
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
-  }
-
-  #dispatchInsightToggle(): void {
-    this.dispatchEvent(new CustomEvent('insighttoggleclick'));
-  }
-
-  #renderHoverIcon(insightIsActive: boolean): LitHtml.TemplateResult {
-    // clang-format off
-    const containerClasses = LitHtml.Directives.classMap({
-      'insight-hover-icon': true,
-      active: insightIsActive,
-    });
-    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}
-      ></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 = html`
-      <div class=${containerClasses}>
-        <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>
-          ${estimatedSavingsString ?
-            html`
-            <slot name="insight-savings" class="insight-savings">
-              ${estimatedSavingsString}
-            </slot>
-          </div>`
-          : LitHtml.nothing}
-        </header>
-        ${this.#expanded ? html`
-          <div class="insight-body">
-            <div class="insight-description">${this.#insightDescription ? md(this.#insightDescription) : LitHtml.nothing}</div>
-            <div class="insight-content">
-              <slot name="insight-content"></slot>
-            </div>
-          </div>`
-          : LitHtml.nothing
-        }
-      </div>
-    `;
-    // clang-format on
-    LitHtml.render(output, this.#shadow, {host: this});
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-sidebar-insight': SidebarInsight;
-  }
-}
-
-customElements.define('devtools-performance-sidebar-insight', SidebarInsight);

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

@@ -9,30 +9,18 @@ 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 type * as SidebarInsight from './SidebarInsight.js';
+import {BaseInsightComponent} from './BaseInsightComponent.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: '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
    */
@@ -58,13 +46,9 @@ 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[] {
@@ -132,92 +116,72 @@ export class SlowCSSSelector extends BaseInsight {
     return links;
   }
 
-  renderSlowCSSSelector(): LitHtml.LitTemplate {
+  #renderContent(): 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`
-      <div class="insights">
-        <devtools-performance-sidebar-insight .data=${{
-              title: this.userVisibleTitle,
-              description: this.description,
-              internalName: this.internalName,
-              expanded: this.isActive(),
-          } as SidebarInsight.InsightDetails}
-          @insighttoggleclick=${this.onSidebarClick} >
-          <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.#slowCSSSelector.totalElapsedMs)]},
-                    {values: [i18nString(UIStrings.matchAttempts), this.#slowCSSSelector.totalMatchAttempts]},
-                    {values: [i18nString(UIStrings.matchCount), this.#slowCSSSelector.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.#slowCSSSelector.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.#slowCSSSelector.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;
+    return html`
+      <div>
+        <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>`;
     // 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;
-  }
-
-  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,
-      insightCategory: this.insightCategory,
-    });
-    const shouldRender = matchesCategory && this.#hasDataToRender();
-    const output = shouldRender ? this.renderSlowCSSSelector() : LitHtml.nothing;
-    LitHtml.render(output, this.shadow, {host: this});
+    if (!this.model) {
+      return;
+    }
+
+    this.renderWithContent(this.#renderContent());
   }
 }
 

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

@@ -2,15 +2,18 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import type * 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 type * as Overlays from '../../overlays/overlays.js';
 
-import type {BaseInsight} from './Helpers.js';
+import type * as BaseInsightComponent from './BaseInsightComponent.js';
 import tableStyles from './table.css.js';
 
 const {html} = LitHtml;
 
+type BaseInsightComponent = BaseInsightComponent.BaseInsightComponent<Trace.Insights.Types.InsightModel<{}>>;
+
 /**
  * @fileoverview An interactive table component.
  *
@@ -33,7 +36,7 @@ export type TableState = {
 };
 
 export interface TableData {
-  insight: BaseInsight;
+  insight: BaseInsightComponent;
   headers: string[];
   rows: TableDataRow[];
 }
@@ -47,7 +50,7 @@ export class Table extends HTMLElement {
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
-  #insight?: BaseInsight;
+  #insight?: BaseInsightComponent;
   #state?: TableState;
   #headers?: string[];
   #rows?: TableDataRow[];

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

@@ -6,12 +6,12 @@ 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 {Category} from './types.js';
+import {BaseInsightComponent} from './BaseInsightComponent.js';
 
 const {html} = LitHtml;
 
@@ -21,14 +21,6 @@ type ThirdPartiesEntries = Array<[
 ]>;
 
 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. */
@@ -40,26 +32,22 @@ 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.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;
       }
 
@@ -80,74 +68,59 @@ export class ThirdParties extends BaseInsight {
     return overlays;
   }
 
-  #render(entries: ThirdPartiesEntries): LitHtml.TemplateResult {
+  #renderContent(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);
 
     // 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">
-                  <div class="insight-section">
-                    ${html`<devtools-performance-table
-                      .data=${{
-                        insight: this,
-                        headers: [i18nString(UIStrings.columnThirdParty), i18nString(UIStrings.columnTransferSize)],
-                        rows: topTransferSizeEntries.map(([entity, summary]) => ({
-                          values: [
-                            entity.name,
-                            Platform.NumberUtilities.bytesToString(summary.transferSize),
-                          ],
-                          overlays: this.#overlaysForEntity.get(entity),
-                        })),
-                      }}>
-                    </devtools-performance-table>`}
-                  </div>
-
-                  <div class="insight-section">
-                    ${html`<devtools-performance-table
-                      .data=${{
-                        insight: this,
-                        headers: [i18nString(UIStrings.columnThirdParty), i18nString(UIStrings.columnBlockingTime)],
-                        rows: topMainThreadTimeEntries.map(([entity, summary]) => ({
-                          values: [
-                            entity.name,
-                            i18n.TimeUtilities.millisToString(Platform.Timing.microSecondsToMilliSeconds(summary.mainThreadTime)),
-                          ],
-                          overlays: this.#overlaysForEntity.get(entity),
-                        })),
-                      }}>
-                    </devtools-performance-table>`}
-                  </div>
-                </div>
-            </devtools-performance-sidebar-insight>
-        </div>`;
+      <div>
+        <div class="insight-section">
+          ${html`<devtools-performance-table
+            .data=${{
+              insight: this,
+              headers: [i18nString(UIStrings.columnThirdParty), i18nString(UIStrings.columnTransferSize)],
+              rows: topTransferSizeEntries.map(([entity, summary]) => ({
+                values: [
+                  entity.name,
+                  i18n.ByteUtilities.bytesToString(summary.transferSize),
+                ],
+                overlays: this.#overlaysForEntity.get(entity),
+              })),
+            }}>
+          </devtools-performance-table>`}
+        </div>
+
+        <div class="insight-section">
+          ${html`<devtools-performance-table
+            .data=${{
+              insight: this,
+              headers: [i18nString(UIStrings.columnThirdParty), i18nString(UIStrings.columnBlockingTime)],
+              rows: topMainThreadTimeEntries.map(([entity, summary]) => ({
+                values: [
+                  entity.name,
+                  i18n.TimeUtilities.millisToString(Platform.Timing.microSecondsToMilliSeconds(summary.mainThreadTime)),
+                ],
+                overlays: this.#overlaysForEntity.get(entity),
+              })),
+            }}>
+          </devtools-performance-table>`}
+        </div>
+      </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);
-    const shouldShow = entries?.length;
-
-    const matchesCategory = shouldRenderForCategory({
-      activeCategory: this.data.activeCategory,
-      insightCategory: this.insightCategory,
-    });
-    const output = shouldShow && matchesCategory ? this.#render(entries) : LitHtml.nothing;
-    LitHtml.render(output, this.shadow, {host: this});
+    if (!this.model) {
+      return;
+    }
+
+    const entries = [...this.model.summaryByEntity.entries()].filter(kv => kv[0] !== this.model?.firstPartyEntity);
+    this.renderWithContent(this.#renderContent(entries));
   }
 }