chrome-devtools-frontend 1.0.1555174 → 1.0.1555430

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

@@ -6,15 +6,17 @@ import './Table.js';
 
 import type {ModernHTTPInsightModel} from '../../../../models/trace/insights/ModernHTTP.js';
 import * as Trace from '../../../../models/trace/trace.js';
+import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
 import {BaseInsightComponent} from './BaseInsightComponent.js';
 import {eventRef} from './EventRef.js';
-import {createLimitedRows, renderOthersLabel, type TableData, type TableDataRow} from './Table.js';
+import {createLimitedRows, renderOthersLabel, Table, type TableDataRow} from './Table.js';
 
 const {UIStrings, i18nString, createOverlayForRequest} = Trace.Insights.Models.ModernHTTP;
 
 const {html} = Lit;
+const {widgetConfig} = UI.Widget;
 
 export class ModernHTTP extends BaseInsightComponent<ModernHTTPInsightModel> {
   override internalName = 'modern-http';
@@ -56,13 +58,13 @@ export class ModernHTTP extends BaseInsightComponent<ModernHTTPInsightModel> {
     // clang-format off
     return html`
       <div class="insight-section">
-        <devtools-performance-table
-          .data=${{
+        <devtools-widget .widgetConfig=${widgetConfig(Table, {
+           data: {
             insight: this,
             headers: [i18nString(UIStrings.request), i18nString(UIStrings.protocol)],
             rows,
-          } as TableData}>
-        </devtools-performance-table>
+          }})}>
+        </devtools-widget>
       </div>`;
     // clang-format on
   }

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

@@ -10,6 +10,7 @@ import type {
   CriticalRequestNode, NetworkDependencyTreeInsightModel} from
   '../../../../models/trace/insights/NetworkDependencyTree.js';
 import * as Trace from '../../../../models/trace/trace.js';
+import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
 import {BaseInsightComponent} from './BaseInsightComponent.js';
@@ -17,11 +18,12 @@ import {eventRef} from './EventRef.js';
 import {md} from './Helpers.js';
 import networkDependencyTreeInsightStyles from './networkDependencyTreeInsight.css.js';
 import {nodeLink} from './NodeLink.js';
-import {renderOthersLabel, type TableData, type TableDataRow} from './Table.js';
+import {renderOthersLabel, Table, type TableDataRow} from './Table.js';
 
 const {UIStrings, i18nString} = Trace.Insights.Models.NetworkDependencyTree;
 
 const {html} = Lit;
+const {widgetConfig} = UI.Widget;
 
 export const MAX_CHAINS_TO_SHOW = 5;
 
@@ -115,13 +117,13 @@ export class NetworkDependencyTree extends BaseInsightComponent<NetworkDependenc
 
     // clang-format off
     return html`
-      <devtools-performance-table
-          .data=${{
+      <devtools-widget .widgetConfig=${widgetConfig(Table, {
+           data: {
             insight: this,
             headers: [i18nString(UIStrings.columnRequest), i18nString(UIStrings.columnTime)],
             rows,
-          } as TableData}>
-      </devtools-performance-table>
+          }})}>
+      </devtools-widget>
     `;
     // clang-format on
   }
@@ -240,13 +242,13 @@ export class NetworkDependencyTree extends BaseInsightComponent<NetworkDependenc
       <div class="insight-section">
         ${preconnectOriginsTableTitle}
         ${this.#renderTooManyPreconnectsWarning()}
-        <devtools-performance-table
-          .data=${{
+        <devtools-widget .widgetConfig=${widgetConfig(Table, {
+           data: {
             insight: this,
             headers: [i18nString(UIStrings.columnOrigin), i18nString(UIStrings.columnSource)],
             rows,
-          } as TableData}>
-        </devtools-performance-table>
+          }})}>
+        </devtools-widget>
       </div>
     `;
     // clang-format on
@@ -283,13 +285,13 @@ export class NetworkDependencyTree extends BaseInsightComponent<NetworkDependenc
     return html`
       <div class="insight-section">
         ${estSavingTableTitle}
-        <devtools-performance-table
-          .data=${{
+        <devtools-widget .widgetConfig=${widgetConfig(Table, {
+           data: {
             insight: this,
             headers: [i18nString(UIStrings.columnOrigin), i18nString(UIStrings.columnWastedMs)],
             rows,
-          } as TableData}>
-        </devtools-performance-table>
+          }})}>
+        </devtools-widget>
       </div>
     `;
     // clang-format on

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

@@ -58,13 +58,13 @@ export class RenderBlocking extends BaseInsightComponent<RenderBlockingInsightMo
     // clang-format off
     return html`
       <div class="insight-section">
-        <devtools-performance-table
+        <devtools-widget
           .data=${{
             insight: this,
             headers: [i18nString(UIStrings.renderBlockingRequest), i18nString(UIStrings.duration)],
             rows,
           }}>
-        </devtools-performance-table>
+        </devtools-widget>
       </div>
     `;
     // clang-format on

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

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import './Table.js';
 import '../../../../ui/components/linkifier/linkifier.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
@@ -12,14 +11,16 @@ 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 UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
 import {BaseInsightComponent} from './BaseInsightComponent.js';
-import type {TableData} from './Table.js';
+import {Table} from './Table.js';
 
 const {UIStrings, i18nString} = Trace.Insights.Models.SlowCSSSelector;
 
 const {html} = Lit;
+const {widgetConfig} = UI.Widget;
 
 export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsightModel> {
   override internalName = 'slow-css-selector';
@@ -106,8 +107,8 @@ export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsight
     // clang-format off
     const sections = [html`
       <div class="insight-section">
-        <devtools-performance-table
-          .data=${{
+        <devtools-widget .widgetConfig=${widgetConfig(Table, {
+           data: {
             insight: this,
             headers: [i18nString(UIStrings.total), ''],
             rows: [
@@ -115,8 +116,8 @@ export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsight
               {values: [i18nString(UIStrings.matchCount), this.model.totalMatchCount]},
               {values: [i18nString(UIStrings.elapsed), i18n.TimeUtilities.millisToString(this.model.totalElapsedMs)]},
             ],
-          } as TableData}>
-        </devtools-performance-table>
+          }})}>
+        </devtools-widget>
       </div>
     `];
     // clang-format on
@@ -126,14 +127,14 @@ export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsight
       // clang-format off
       sections.push(html`
         <div class="insight-section">
-          <devtools-performance-table
-            .data=${{
+          <devtools-widget .widgetConfig=${widgetConfig(Table, {
+           data: {
               insight: this,
               headers: [`${i18nString(UIStrings.topSelectorElapsedTime)}: ${time(Trace.Types.Timing.Micro(selector['elapsed (us)']))}`],
               rows: [{
                 values: [html`${selector.selector} ${Lit.Directives.until(this.getSelectorLinks(cssModel, selector))}`]}]
-            }} as TableData>
-          </devtools-performance-table>
+            }})}>
+          </devtools-widget>
         </div>
       `);
       // clang-format on
@@ -144,15 +145,15 @@ export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsight
       // clang-format off
       sections.push(html`
         <div class="insight-section">
-          <devtools-performance-table
-            .data=${{
+          <devtools-widget .widgetConfig=${widgetConfig(Table, {
+           data: {
               insight: this,
               headers: [`${i18nString(UIStrings.topSelectorMatchAttempt)}: ${selector['match_attempts']}`],
               rows: [{
                   values: [html`${selector.selector} ${Lit.Directives.until(this.getSelectorLinks(cssModel, selector))}` as unknown as string],
               }]
-            }} as TableData}>
-          </devtools-performance-table>
+            }})}>
+          </devtools-widget>
         </div>
       `);
       // clang-format on

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

@@ -1,11 +1,10 @@
 // Copyright 2024 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type * as Trace from '../../../../models/trace/trace.js';
-import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
+import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
 import type * as BaseInsightComponent from './BaseInsightComponent.js';
@@ -48,7 +47,7 @@ export interface TableState {
   selectionIsSticky: boolean;
 }
 
-export interface TableData {
+interface TableData {
   insight: BaseInsightComponent;
   headers: string[];
   rows: TableDataRow[];
@@ -60,6 +59,11 @@ export interface TableDataRow {
   subRows?: TableDataRow[];
 }
 
+interface FlattenedTableDataRow {
+  row: TableDataRow;
+  depth: number;
+}
+
 export function renderOthersLabel(numOthers: number): string {
   return i18nString(UIStrings.others, {PH1: numOthers});
 }
@@ -94,113 +98,195 @@ export function createLimitedRows<T>(arr: T[], aggregator: RowLimitAggregator<T>
   return items;
 }
 
-export class Table extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+interface ViewInput {
+  interactive: boolean;
+  headers: string[];
+  flattenedRows: FlattenedTableDataRow[];
+
+  onHoverRow: (row: TableDataRow, rowEl: HTMLElement) => void;
+  onClickRow: (row: TableDataRow, rowEl: HTMLElement) => void;
+  onMouseLeave: () => void;
+}
+
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const {
+    interactive,
+    headers,
+    flattenedRows,
+    onHoverRow,
+    onClickRow,
+    onMouseLeave,
+  } = input;
+
+  const numColumns = headers.length;
+
+  function renderRow({row, depth}: FlattenedTableDataRow): Lit.TemplateResult {
+    const thStyles = Lit.Directives.styleMap({
+      paddingLeft: `calc(${depth} * var(--sys-size-5))`,
+      backgroundImage: `repeating-linear-gradient(
+            to right,
+            var(--sys-color-tonal-outline) 0 var(--sys-size-1),
+            transparent var(--sys-size-1) var(--sys-size-5)
+          )`,
+      backgroundPosition: '0 0',
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: `calc(${depth} * var(--sys-size-5))`,
+    });
+    const trStyles = Lit.Directives.styleMap({
+      color: depth ? 'var(--sys-color-on-surface-subtle)' : '',
+    });
+    const columnEls = row.values.map(
+        (value, i) => i === 0 ? html`<th
+              scope="row"
+              colspan=${i === row.values.length - 1 ? numColumns - i : 1}
+              style=${thStyles}>${value}
+            </th>` :
+                                html`<td>${value}</td>`);
+    return html`<tr style=${trStyles}>${columnEls}</tr>`;
+  }
+
+  const findRowAndEl = (el: HTMLElement): {row: TableDataRow, rowEl: HTMLElement} => {
+    const rowEl = el.closest('tr') as HTMLTableRowElement;
+    const row = flattenedRows[rowEl.sectionRowIndex].row;
+    return {row, rowEl};
+  };
+
+  // clang-format off
+  Lit.render(html`
+    <style>${tableStyles}</style>
+    <table
+        class=${Lit.Directives.classMap({
+        interactive,
+      })}
+        @mouseleave=${interactive ? onMouseLeave : null}>
+      <thead>
+        <tr>
+          ${headers.map(h => html`<th scope="col">${h}</th>`)}
+        </tr>
+      </thead>
+      <tbody
+        @mouseover=${interactive ? (e: Event) => {
+          const {row, rowEl} = findRowAndEl(e.target as HTMLElement);
+          onHoverRow(row, rowEl);
+        } : null}
+        @click=${interactive ? (e: Event) => {
+          const {row, rowEl} = findRowAndEl(e.target as HTMLElement);
+          onClickRow(row, rowEl);
+        } : null}
+      >${flattenedRows.map(renderRow)}</tbody>
+    </table>`,
+    target);
+  // clang-format on
+};
+
+export class Table extends UI.Widget.Widget {
+  #view: View;
   #insight?: BaseInsightComponent;
   #state?: TableState;
   #headers?: string[];
   /** The rows as given as by the user, which may include recursive rows via subRows. */
   #rows?: TableDataRow[];
   /** All rows/subRows, in the order that they appear visually. This is the result of traversing `#rows` and any subRows found. */
-  #flattenedRows?: TableDataRow[];
+  #flattenedRows?: FlattenedTableDataRow[];
   #rowToParentRow = new Map<TableDataRow, TableDataRow>();
   #interactive = false;
-  #currentHoverIndex: number|null = null;
+  #currentHoverRow: TableDataRow|null = null;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
 
   set data(data: TableData) {
     this.#insight = data.insight;
     this.#state = data.insight.sharedTableState;
     this.#headers = data.headers;
     this.#rows = data.rows;
+    this.#flattenedRows = this.#createFlattenedRows();
     // If this table isn't interactive, don't attach mouse listeners or use CSS :hover.
     this.#interactive = this.#rows.some(row => row.overlays || row.subRows?.length);
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
-  }
-
-  connectedCallback(): void {
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+    this.requestUpdate();
   }
 
-  #onHoverRow(e: MouseEvent): void {
-    if (!this.#flattenedRows) {
-      return;
+  #createFlattenedRows(): FlattenedTableDataRow[] {
+    if (!this.#rows) {
+      return [];
     }
 
-    if (!(e.target instanceof HTMLElement)) {
-      return;
+    const rowToParentRow = this.#rowToParentRow;
+    rowToParentRow.clear();
+
+    const flattenedRows: FlattenedTableDataRow[] = [];
+    function traverse(parent: TableDataRow|null, row: TableDataRow, depth = 0): void {
+      if (parent) {
+        rowToParentRow.set(row, parent);
+      }
+
+      flattenedRows.push({depth, row});
+
+      for (const subRow of row.subRows ?? []) {
+        traverse(row, subRow, depth + 1);
+      }
     }
 
-    const rowEl = e.target.closest('tr');
-    if (!rowEl?.parentElement) {
-      return;
+    for (const row of this.#rows) {
+      traverse(null, row);
     }
 
-    const rowEls = [...rowEl.parentElement.children];
-    const index = rowEl.sectionRowIndex;
-    if (index === this.#currentHoverIndex) {
+    return flattenedRows;
+  }
+
+  #onHoverRow(row: TableDataRow, rowEl: HTMLElement): void {
+    if (row === this.#currentHoverRow) {
       return;
     }
 
-    for (const el of rowEl.parentElement.querySelectorAll('.hover')) {
+    for (const el of this.element.querySelectorAll('.hover')) {
       el.classList.remove('hover');
     }
 
     // Add 'hover' class to all parent rows.
-    let row: TableDataRow|undefined = this.#rowToParentRow.get(this.#flattenedRows[index]);
-    while (row) {
-      const index = this.#flattenedRows.indexOf(row);
-      const rowEl = rowEls[index];
+    let curRow: TableDataRow|undefined = this.#rowToParentRow.get(row);
+    while (curRow) {
       rowEl.classList.add('hover');
-      row = this.#rowToParentRow.get(row);
+      curRow = this.#rowToParentRow.get(row);
     }
 
-    this.#currentHoverIndex = index;
+    this.#currentHoverRow = row;
     // Temporarily selects the row, but only if there is not already a sticky selection.
-    this.#onSelectedRowChanged(rowEl, index, {isHover: true});
+    this.#onSelectedRowChanged(row, rowEl, {isHover: true});
   }
 
-  #onClickRow(e: MouseEvent): void {
-    if (!(e.target instanceof HTMLElement)) {
-      return;
-    }
-
-    const rowEl = e.target.closest('tr');
-    if (!rowEl?.parentElement) {
-      return;
-    }
-
-    const index = [...rowEl.parentElement.children].indexOf(rowEl);
-    if (index === -1) {
-      return;
-    }
-
+  #onClickRow(row: TableDataRow, rowEl: HTMLElement): void {
     // If the desired overlays consist of just a single ENTRY_OUTLINE, then
     // it is more intuitive to just select the target event.
-    const overlays = this.#flattenedRows?.[index]?.overlays;
+    const overlays = row.overlays;
     if (overlays?.length === 1 && overlays[0].type === 'ENTRY_OUTLINE') {
-      this.dispatchEvent(new EventReferenceClick(overlays[0].entry));
+      this.element.dispatchEvent(new EventReferenceClick(overlays[0].entry));
       return;
     }
 
     // Select the row and make it sticky.
-    this.#onSelectedRowChanged(rowEl, index, {sticky: true});
+    this.#onSelectedRowChanged(row, rowEl, {sticky: true});
   }
 
   #onMouseLeave(): void {
-    for (const el of this.shadowRoot?.querySelectorAll('.hover') ?? []) {
+    for (const el of this.element.shadowRoot?.querySelectorAll('.hover') ?? []) {
       el.classList.remove('hover');
     }
 
-    this.#currentHoverIndex = null;
+    this.#currentHoverRow = null;
     // Unselect the row, unless it's sticky.
     this.#onSelectedRowChanged(null, null);
   }
 
-  #onSelectedRowChanged(rowEl: HTMLElement|null, rowIndex: number|null, opts: {
+  #onSelectedRowChanged(row: TableDataRow|null, rowEl: HTMLElement|null, opts: {
     sticky?: boolean,
     isHover?: boolean,
   } = {}): void {
-    if (!this.#flattenedRows || !this.#state || !this.#insight) {
+    if (!this.#state || !this.#insight) {
       return;
     }
 
@@ -214,8 +300,8 @@ export class Table extends HTMLElement {
       opts.sticky = false;
     }
 
-    if (rowEl && rowIndex !== null) {
-      const overlays = this.#flattenedRows[rowIndex].overlays;
+    if (rowEl && row) {
+      const overlays = row.overlays;
       if (overlays) {
         this.#insight.toggleTemporaryOverlays(overlays, {updateTraceWindow: !opts.isHover});
       }
@@ -229,83 +315,19 @@ export class Table extends HTMLElement {
     this.#state.selectionIsSticky = opts.sticky ?? false;
   }
 
-  async #render(): Promise<void> {
-    if (!this.#headers || !this.#rows) {
+  override performUpdate(): void {
+    if (!this.#headers || !this.#flattenedRows) {
       return;
     }
 
-    const rowToParentRow = this.#rowToParentRow;
-    rowToParentRow.clear();
-
-    const numColumns = this.#headers.length;
-    const flattenedRows: TableDataRow[] = [];
-    const rowEls: Lit.TemplateResult[] = [];
-    function traverse(parent: TableDataRow|null, row: TableDataRow, depth = 0): void {
-      if (parent) {
-        rowToParentRow.set(row, parent);
-      }
-
-      const thStyles = Lit.Directives.styleMap({
-        paddingLeft: `calc(${depth} * var(--sys-size-5))`,
-        backgroundImage: `repeating-linear-gradient(
-              to right,
-              var(--sys-color-tonal-outline) 0 var(--sys-size-1),
-              transparent var(--sys-size-1) var(--sys-size-5)
-            )`,
-        backgroundPosition: '0 0',
-        backgroundRepeat: 'no-repeat',
-        backgroundSize: `calc(${depth} * var(--sys-size-5))`,
-      });
-      const trStyles = Lit.Directives.styleMap({
-        color: depth ? 'var(--sys-color-on-surface-subtle)' : '',
-      });
-      const columnEls = row.values.map(
-          (value, i) => i === 0 ? html`<th
-                scope="row"
-                colspan=${i === row.values.length - 1 ? numColumns - i : 1}
-                style=${thStyles}>${value}
-              </th>` :
-                                  html`<td>${value}</td>`);
-      rowEls.push(html`<tr style=${trStyles}>${columnEls}</tr>`);
-
-      flattenedRows.push(row);
-
-      for (const subRow of row.subRows ?? []) {
-        traverse(row, subRow, depth + 1);
-      }
-    }
-
-    for (const row of this.#rows) {
-      traverse(null, row);
-    }
-
-    this.#flattenedRows = flattenedRows;
-
-    Lit.render(
-        html`<style>${tableStyles}</style>
-      <table
-          class=${Lit.Directives.classMap({
-          interactive: this.#interactive,
-        })}
-          @mouseleave=${this.#interactive ? this.#onMouseLeave : null}>
-        <thead>
-          <tr>
-          ${this.#headers.map(h => html`<th scope="col">${h}</th>`)}
-          </tr>
-        </thead>
-        <tbody
-          @mouseover=${this.#interactive ? this.#onHoverRow : null}
-          @click=${this.#interactive ? this.#onClickRow : null}
-        >${rowEls}</tbody>
-      </table>`,
-        this.#shadow, {host: this});
+    const input: ViewInput = {
+      interactive: this.#interactive,
+      headers: this.#headers,
+      flattenedRows: this.#flattenedRows,
+      onHoverRow: this.#onHoverRow.bind(this),
+      onClickRow: this.#onClickRow.bind(this),
+      onMouseLeave: this.#onMouseLeave.bind(this),
+    };
+    this.#view(input, undefined, this.contentElement);
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-table': Table;
-  }
-}
-
-customElements.define('devtools-performance-table', Table);

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

@@ -5,14 +5,16 @@
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type {ThirdPartiesInsightModel} from '../../../../models/trace/insights/ThirdParties.js';
 import * as Trace from '../../../../models/trace/trace.js';
+import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
 import {BaseInsightComponent} from './BaseInsightComponent.js';
-import {createLimitedRows, renderOthersLabel, type RowLimitAggregator} from './Table.js';
+import {createLimitedRows, renderOthersLabel, type RowLimitAggregator, Table} from './Table.js';
 
 const {UIStrings, i18nString, createOverlaysForSummary} = Trace.Insights.Models.ThirdParties;
 
 const {html} = Lit;
+const {widgetConfig} = UI.Widget;
 
 const MAX_TO_SHOW = 5;
 
@@ -77,13 +79,13 @@ export class ThirdParties extends BaseInsightComponent<ThirdPartiesInsightModel>
       // clang-format off
       sections.push(html`
         <div class="insight-section">
-          <devtools-performance-table
-            .data=${{
+          <devtools-widget .widgetConfig=${widgetConfig(Table, {
+           data: {
               insight: this,
               headers: [i18nString(UIStrings.columnThirdParty), i18nString(UIStrings.columnTransferSize)],
               rows,
-            }}>
-          </devtools-performance-table>
+            }})}>
+          </devtools-widget>
         </div>
       `);
       // clang-format on
@@ -94,13 +96,13 @@ export class ThirdParties extends BaseInsightComponent<ThirdPartiesInsightModel>
       // clang-format off
       sections.push(html`
         <div class="insight-section">
-          <devtools-performance-table
-            .data=${{
+          <devtools-widget .widgetConfig=${widgetConfig(Table, {
+           data: {
               insight: this,
               headers: [i18nString(UIStrings.columnThirdParty), i18nString(UIStrings.columnMainThreadTime)],
               rows,
-            }}>
-          </devtools-performance-table>
+            }})}>
+          </devtools-widget>
         </div>
       `);
       // clang-format on