chrome-devtools-frontend 1.0.1553956 → 1.0.1555430

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

@@ -7,15 +7,17 @@ import './Table.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type {CacheInsightModel} from '../../../../models/trace/insights/Cache.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.Cache;
 
 const {html} = Lit;
+const {widgetConfig} = UI.Widget;
 
 export class Cache extends BaseInsightComponent<CacheInsightModel> {
   override internalName = 'cache';
@@ -56,13 +58,15 @@ export class Cache extends BaseInsightComponent<CacheInsightModel> {
     // clang-format off
     return html`
       <div class="insight-section">
-        <devtools-performance-table
-          .data=${{
-            insight: this,
-            headers: [i18nString(UIStrings.requestColumn), i18nString(UIStrings.cacheTTL)],
-            rows,
-          } as TableData}>
-        </devtools-performance-table>
+        <devtools-widget
+          .widgetConfig=${widgetConfig(Table, {
+            data: {
+              insight: this,
+              headers: [i18nString(UIStrings.requestColumn), i18nString(UIStrings.cacheTTL)],
+              rows,
+            },
+          })}>
+        </devtools-widget>
       </div>`;
     // clang-format on
   }

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

@@ -1,7 +1,6 @@
 // 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 */
 
 /**
  * @file A list of pass/fail conditions for an insight.
@@ -11,11 +10,13 @@ import '../../../../ui/kit/kit.js';
 
 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 checklistStyles from './checklist.css.js';
 
+const {html} = Lit;
+
 const UIStrings = {
   /**
    * @description Text for a screen-reader label to tell the user that the icon represents a successful insight check
@@ -32,7 +33,43 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/Checklist.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const {html} = Lit;
+interface ViewInput {
+  checklist: GenericChecklist;
+}
+
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const {
+    checklist,
+  } = input;
+
+  function getIcon(check: GenericChecklist['']): Lit.TemplateResult {
+    const icon = check.value ? 'check-circle' : 'clear';
+
+    const ariaLabel = check.value ? i18nString(UIStrings.successAriaLabel, {PH1: check.label}) :
+                                    i18nString(UIStrings.failedAriaLabel, {PH1: check.label});
+    return html`
+        <devtools-icon
+          aria-label=${ariaLabel}
+          name=${icon}
+          class=${check.value ? 'check-passed' : 'check-failed'}
+        ></devtools-icon>
+      `;
+  }
+
+  // clang-format off
+  Lit.render(html`
+    <style>${checklistStyles}</style>
+    <ul>
+      ${Object.values(checklist).map(check => html`<li>
+          ${getIcon(check)}
+          <span data-checklist-label>${check.label}</span>
+      </li>`)}
+    </ul>
+  `, target);
+  // clang-format on
+};
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type GenericChecklist = Trace.Insights.Types.Checklist<any>;
@@ -46,55 +83,28 @@ export interface TableDataRow {
   overlays?: Trace.Types.Overlays.Overlay[];
 }
 
-export class Checklist extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+export class Checklist extends UI.Widget.Widget {
+  #view: View;
   #checklist?: GenericChecklist;
 
-  set checklist(checklist: GenericChecklist) {
-    this.#checklist = checklist;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
-  }
-
-  connectedCallback(): void {
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
   }
 
-  #getIcon(check: GenericChecklist['']): Lit.TemplateResult {
-    const icon = check.value ? 'check-circle' : 'clear';
-
-    const ariaLabel = check.value ? i18nString(UIStrings.successAriaLabel, {PH1: check.label}) :
-                                    i18nString(UIStrings.failedAriaLabel, {PH1: check.label});
-    return html`
-        <devtools-icon
-          aria-label=${ariaLabel}
-          name=${icon}
-          class=${check.value ? 'check-passed' : 'check-failed'}
-        ></devtools-icon>
-      `;
+  set checklist(checklist: GenericChecklist) {
+    this.#checklist = checklist;
+    this.requestUpdate();
   }
 
-  async #render(): Promise<void> {
+  override performUpdate(): void {
     if (!this.#checklist) {
       return;
     }
 
-    Lit.render(
-        html`
-          <style>${checklistStyles}</style>
-          <ul>
-            ${Object.values(this.#checklist).map(check => html`<li>
-                ${this.#getIcon(check)}
-                <span data-checklist-label>${check.label}</span>
-            </li>`)}
-          </ul>`,
-        this.#shadow, {host: this});
+    const input: ViewInput = {
+      checklist: this.#checklist,
+    };
+    this.#view(input, undefined, this.contentElement);
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-checklist': Checklist;
-  }
-}
-
-customElements.define('devtools-performance-checklist', Checklist);

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

@@ -8,17 +8,19 @@ import './Table.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type {DOMSizeInsightModel} from '../../../../models/trace/insights/DOMSize.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 {md} from './Helpers.js';
 import {nodeLink} from './NodeLink.js';
-import type {TableData, TableDataRow} from './Table.js';
+import {Table, type TableDataRow} from './Table.js';
 
 const {UIStrings, i18nString} = Trace.Insights.Models.DOMSize;
 
 const {html} = Lit;
+const {widgetConfig} = UI.Widget;
 
 export class DOMSize extends BaseInsightComponent<DOMSizeInsightModel> {
   override internalName = 'dom-size';
@@ -28,7 +30,7 @@ export class DOMSize extends BaseInsightComponent<DOMSizeInsightModel> {
   }
 
   #renderNodeTable(domStatsData: Trace.Types.Events.DOMStats['args']['data']): Lit.LitTemplate {
-    const rows: TableData['rows'] = [];
+    const rows: TableDataRow[] = [];
 
     if (domStatsData.maxDepth) {
       const {nodeId, nodeName} = domStatsData.maxDepth;
@@ -56,13 +58,13 @@ export class DOMSize extends BaseInsightComponent<DOMSizeInsightModel> {
 
     // clang-format off
     return html`<div class="insight-section">
-      <devtools-performance-table
-        .data=${{
+      <devtools-widget .widgetConfig=${widgetConfig(Table, {
+        data: {
           insight: this,
           headers: [i18nString(UIStrings.statistic), i18nString(UIStrings.element)],
           rows,
-        } as TableData}>
-      </devtools-performance-table>
+        }})}>
+      </devtools-widget>
     </div>`;
     // clang-format on
   }
@@ -86,13 +88,13 @@ export class DOMSize extends BaseInsightComponent<DOMSizeInsightModel> {
     // clang-format off
     return html`<div class="insight-section">
       <div class="insight-description">${md(i18nString(UIStrings.topUpdatesDescription))}</div>
-      <devtools-performance-table
-        .data=${{
+      <devtools-widget .widgetConfig=${widgetConfig(Table, {
+        data: {
           insight: this,
           headers: ['', i18nString(UIStrings.duration)],
           rows,
-        } as TableData}>
-      </devtools-performance-table>
+        }})}>
+      </devtools-widget>
     </div>`;
     // clang-format on
   }
@@ -109,17 +111,19 @@ export class DOMSize extends BaseInsightComponent<DOMSizeInsightModel> {
 
     // clang-format off
     return html`<div class="insight-section">
-      <devtools-performance-table
-        .data=${{
-          insight: this,
-          headers: [i18nString(UIStrings.statistic), i18nString(UIStrings.value)],
-          rows: [
-            {values: [i18nString(UIStrings.totalElements), domStatsData.totalElements]},
-            {values: [i18nString(UIStrings.maxDOMDepth), domStatsData.maxDepth?.depth ?? 0]},
-            {values: [i18nString(UIStrings.maxChildren), domStatsData.maxChildren?.numChildren ?? 0]},
-          ],
-        } as TableData}>
-      </devtools-performance-table>
+      <devtools-widget
+        .widgetConfig=${widgetConfig(Table, {
+          data: {
+            insight: this,
+            headers: [i18nString(UIStrings.statistic), i18nString(UIStrings.value)],
+            rows: [
+              {values: [i18nString(UIStrings.totalElements), domStatsData.totalElements]},
+              {values: [i18nString(UIStrings.maxDOMDepth), domStatsData.maxDepth?.depth ?? 0]},
+              {values: [i18nString(UIStrings.maxChildren), domStatsData.maxChildren?.numChildren ?? 0]},
+            ],
+          },
+        })}>
+      </devtools-widget>
     </div>
     ${this.#renderNodeTable(domStatsData)}
     ${this.#renderLargeUpdatesTable()}

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

@@ -2,15 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import './Checklist.js';
-
 import type {DocumentLatencyInsightModel} from '../../../../models/trace/insights/DocumentLatency.js';
 import type * 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 {Checklist} from './Checklist.js';
 
 const {html} = Lit;
+const {widgetConfig} = UI.Widget;
 
 export class DocumentLatency extends BaseInsightComponent<DocumentLatencyInsightModel> {
   override internalName = 'document-latency';
@@ -29,7 +30,9 @@ export class DocumentLatency extends BaseInsightComponent<DocumentLatencyInsight
     }
 
     // clang-format off
-    return html`<devtools-performance-checklist .checklist=${this.model.data.checklist}></devtools-performance-checklist>`;
+    return html`<devtools-widget .widgetConfig=${widgetConfig(Checklist, {
+      checklist: this.model.data.checklist,
+    })}></devtools-widget>`;
     // clang-format on
   }
 }

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

@@ -2,23 +2,23 @@
 // 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 type {DuplicatedJavaScriptInsightModel} from '../../../../models/trace/insights/DuplicatedJavaScript.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as Buttons from '../../../../ui/components/buttons/buttons.js';
+import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
 import * as Utils from '../../utils/utils.js';
 
 import {BaseInsightComponent} from './BaseInsightComponent.js';
 import {scriptRef} from './ScriptRef.js';
-import type {TableData, TableDataRow} from './Table.js';
+import {Table, type TableDataRow} from './Table.js';
 
 const {UIStrings, i18nString} = Trace.Insights.Models.DuplicatedJavaScript;
 
 const {html} = Lit;
+const {widgetConfig} = UI.Widget;
 
 export class DuplicatedJavaScript extends BaseInsightComponent<DuplicatedJavaScriptInsightModel> {
   override internalName = 'duplicated-javascript';
@@ -105,13 +105,13 @@ export class DuplicatedJavaScript extends BaseInsightComponent<DuplicatedJavaScr
     return html`
       ${treemapButton}
       <div class="insight-section">
-        <devtools-performance-table
-          .data=${{
+        <devtools-widget .widgetConfig=${widgetConfig(Table, {
+           data: {
             insight: this,
             headers: [i18nString(UIStrings.columnSource), i18nString(UIStrings.columnDuplicatedBytes)],
             rows,
-          } as TableData}>
-        </devtools-performance-table>
+          }})}>
+        </devtools-widget>
       </div>
     `;
     // clang-format on

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

@@ -7,15 +7,17 @@ import './Table.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type {FontDisplayInsightModel} from '../../../../models/trace/insights/FontDisplay.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} = Trace.Insights.Models.FontDisplay;
 
 const {html} = Lit;
+const {widgetConfig} = UI.Widget;
 
 export class FontDisplay extends BaseInsightComponent<FontDisplayInsightModel> {
   override internalName = 'font-display';
@@ -76,13 +78,13 @@ export class FontDisplay extends BaseInsightComponent<FontDisplayInsightModel> {
     // clang-format off
     return html`
       <div class="insight-section">
-        ${html`<devtools-performance-table
-          .data=${{
+        ${html`<devtools-widget .widgetConfig=${widgetConfig(Table, {
+           data: {
             insight: this,
             headers: [i18nString(UIStrings.fontColumn), i18nString(UIStrings.wastedTimeColumn)],
             rows,
-          } as TableData}>
-        </devtools-performance-table>`}
+          }})}>
+        </devtools-widget>`}
       </div>`;
     // clang-format on
   }

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

@@ -9,14 +9,16 @@ import type * as Protocol from '../../../../generated/protocol.js';
 import type {ForcedReflowInsightModel} from '../../../../models/trace/insights/ForcedReflow.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as LegacyComponents from '../../../../ui/legacy/components/utils/utils.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 TableData, type TableDataRow} from './Table.js';
+import {createLimitedRows, renderOthersLabel, Table, type TableDataRow} from './Table.js';
 
 const {UIStrings, i18nString, createOverlayForEvents} = Trace.Insights.Models.ForcedReflow;
 
 const {html, nothing} = Lit;
+const {widgetConfig} = UI.Widget;
 
 export class ForcedReflow extends BaseInsightComponent<ForcedReflowInsightModel> {
   override internalName = 'forced-reflow';
@@ -85,8 +87,8 @@ export class ForcedReflow extends BaseInsightComponent<ForcedReflowInsightModel>
     return html`
       ${topLevelFunctionCallData ? html`
         <div class="insight-section">
-          <devtools-performance-table
-            .data=${{
+          <devtools-widget .widgetConfig=${widgetConfig(Table, {
+           data: {
               insight: this,
               headers: [i18nString(UIStrings.topTimeConsumingFunctionCall), i18nString(UIStrings.totalReflowTime)],
               rows: [{
@@ -96,18 +98,18 @@ export class ForcedReflow extends BaseInsightComponent<ForcedReflowInsightModel>
                 ],
                 overlays: createOverlayForEvents(topLevelFunctionCallData.topLevelFunctionCallEvents, 'INFO'),
               }],
-            } as TableData}>
-          </devtools-performance-table>
+            }})}>
+          </devtools-widget>
         </div>
       ` : nothing}
       <div class="insight-section">
-        <devtools-performance-table
-          .data=${{
+        <devtools-widget .widgetConfig=${widgetConfig(Table, {
+           data: {
             insight: this,
             headers: [i18nString(UIStrings.reflowCallFrames)],
             rows,
-        } as TableData}>
-        </devtools-performance-table>
+        }})}>
+        </devtools-widget>
       </div>`;
     // clang-format on
   }

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

@@ -2,19 +2,20 @@
 // 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 type {INPBreakdownInsightModel} from '../../../../models/trace/insights/INPBreakdown.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 {Table} from './Table.js';
 
 const {UIStrings, i18nString, createOverlaysForSubpart} = Trace.Insights.Models.INPBreakdown;
 
 const {html} = Lit;
+const {widgetConfig} = UI.Widget;
 
 export class INPBreakdown extends BaseInsightComponent<INPBreakdownInsightModel> {
   override internalName = 'inp';
@@ -35,8 +36,8 @@ export class INPBreakdown extends BaseInsightComponent<INPBreakdownInsightModel>
     // clang-format off
     return html`
       <div class="insight-section">
-        ${html`<devtools-performance-table
-          .data=${{
+        ${html`<devtools-widget .widgetConfig=${widgetConfig(Table, {
+           data: {
             insight: this,
             headers: [i18nString(UIStrings.subpart), i18nString(UIStrings.duration)],
             rows: [
@@ -53,8 +54,8 @@ export class INPBreakdown extends BaseInsightComponent<INPBreakdownInsightModel>
                 overlays: createOverlaysForSubpart(event, 2),
               },
             ],
-          }}>
-        </devtools-performance-table>`}
+          }})}>
+        </devtools-widget>`}
       </div>`;
     // clang-format on
   }

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

@@ -6,15 +6,17 @@ import '../../../../ui/kit/kit.js';
 
 import type {ImageDeliveryInsightModel} from '../../../../models/trace/insights/ImageDelivery.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 {imageRef} from './ImageRef.js';
-import {createLimitedRows, renderOthersLabel, type TableDataRow} from './Table.js';
+import {createLimitedRows, renderOthersLabel, Table, type TableDataRow} from './Table.js';
 
 const {UIStrings, i18nString, createOverlayForRequest} = Trace.Insights.Models.ImageDelivery;
 
 const {html} = Lit;
+const {widgetConfig} = UI.Widget;
 
 export class ImageDelivery extends BaseInsightComponent<ImageDeliveryInsightModel> {
   override internalName = 'image-delivery';
@@ -56,13 +58,13 @@ export class ImageDelivery extends BaseInsightComponent<ImageDeliveryInsightMode
     // clang-format off
     return html`
       <div class="insight-section">
-        <devtools-performance-table
-          .data=${{
+        <devtools-widget .widgetConfig=${widgetConfig(Table, {
+           data: {
             insight: this,
             headers: [i18nString(UIStrings.optimizeFile)],
             rows,
-          }}>
-        </devtools-performance-table>
+          }})}>
+        </devtools-widget>
       </div>
     `;
     // clang-format on

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

@@ -61,30 +61,32 @@ export class InsightRenderer {
   renderInsightToWidgetElement(
       parsedTrace: Trace.TraceModel.ParsedTrace, insightSet: Trace.Insights.Types.InsightSet,
       model: Trace.Insights.Types.InsightModel, insightName: string,
-      options: Partial<BaseInsightComponent<Trace.Insights.Types.InsightModel>>): InsightWidgetElement {
+      options: Partial<Pick<
+          BaseInsightComponent<Trace.Insights.Types.InsightModel>,
+          'selected'|'agentFocus'|'fieldMetrics'|'isAIAssistanceContext'>>): InsightWidgetElement {
     let widgetElement = this.#insightWidgetCache.get(model);
     if (!widgetElement) {
       widgetElement = document.createElement('devtools-widget') as InsightWidgetElement;
-
-      const componentClass = INSIGHT_NAME_TO_COMPONENT[insightName as keyof typeof INSIGHT_NAME_TO_COMPONENT];
-      const widget = new componentClass(widgetElement) as BaseInsightComponent<Trace.Insights.Types.InsightModel>;
-      widget.selected = false;
-      widget.parsedTrace = parsedTrace;
-      widget.model = model;
-      widget.bounds = insightSet.bounds;
-      widget.insightSetKey = insightSet.id;
-      Object.assign(widget, options);
-      widgetElement.widgetConfig = widgetConfig(() => {
-        return widget;
-      });
-
+      widgetElement.classList.add('insight-component-widget');
       this.#insightWidgetCache.set(model, widgetElement);
     }
 
-    const widget = widgetElement.getWidget();
-    if (widget) {
-      Object.assign(widget, options);
-    }
+    const componentClass = INSIGHT_NAME_TO_COMPONENT[insightName as keyof typeof INSIGHT_NAME_TO_COMPONENT];
+    widgetElement.widgetConfig = widgetConfig(componentClass, {
+      selected: options.selected ?? false,
+      parsedTrace,
+      // The `model` passed in as a parameter is the base type, but since
+      // `componentClass` is the union of every derived insight component, the
+      // `model` for the widget config is the union of every model. That can't be
+      // satisfied, so disable typescript.
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      model: model as any,
+      bounds: insightSet.bounds,
+      insightSetKey: insightSet.id,
+      agentFocus: options.agentFocus ?? null,
+      fieldMetrics: options.fieldMetrics ?? null,
+      isAIAssistanceContext: options.isAIAssistanceContext ?? false,
+    });
 
     return widgetElement;
   }

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

@@ -2,20 +2,20 @@
 // 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 type {LCPBreakdownInsightModel} from '../../../../models/trace/insights/LCPBreakdown.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 type * as Overlays from '../../overlays/overlays.js';
 
 import {BaseInsightComponent} from './BaseInsightComponent.js';
-import type {TableData} from './Table.js';
+import {Table, type TableDataRow} from './Table.js';
 
 const {UIStrings, i18nString} = Trace.Insights.Models.LCPBreakdown;
 
 const {html} = Lit;
+const {widgetConfig} = UI.Widget;
 
 export class LCPBreakdown extends BaseInsightComponent<LCPBreakdownInsightModel> {
   override internalName = 'lcp-by-phase';
@@ -69,13 +69,13 @@ export class LCPBreakdown extends BaseInsightComponent<LCPBreakdownInsightModel>
     // clang-format off
     return html`
       <div class="insight-section">
-        <devtools-performance-table
-          .data=${{
+        <devtools-widget .widgetConfig=${widgetConfig(Table, {
+           data: {
             insight: this,
             headers: [i18nString(UIStrings.subpart), i18nString(UIStrings.fieldDuration)],
             rows,
-          } as TableData}>
-        </devtools-performance-table>
+          }})}>
+        </devtools-widget>
       </div>
     `;
     // clang-format on
@@ -101,7 +101,7 @@ export class LCPBreakdown extends BaseInsightComponent<LCPBreakdownInsightModel>
       return html`<div class="insight-section">${i18nString(UIStrings.noLcp)}</div>`;
     }
 
-    const rows = Object.values(subparts).map((subpart: Trace.Insights.Models.LCPBreakdown.Subpart) => {
+    const rows: TableDataRow[] = Object.values(subparts).map((subpart: Trace.Insights.Models.LCPBreakdown.Subpart) => {
       const section = this.#overlay?.sections.find(section => subpart.label === section.label);
       const timing = Trace.Helpers.Timing.microToMilli(subpart.range);
       return {
@@ -116,13 +116,13 @@ export class LCPBreakdown extends BaseInsightComponent<LCPBreakdownInsightModel>
     // clang-format off
     const sections: Lit.LitTemplate[] = [html`
       <div class="insight-section">
-        <devtools-performance-table
-          .data=${{
+        <devtools-widget .widgetConfig=${widgetConfig(Table, {
+           data: {
             insight: this,
             headers: [i18nString(UIStrings.subpart), i18nString(UIStrings.duration)],
             rows,
-          } as TableData}>
-        </devtools-performance-table>
+          }})}>
+        </devtools-widget>
       </div>`
     ];
     // clang-format on