chrome-devtools-frontend 1.0.1555174 → 1.0.1556696

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -7,8 +7,8 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Root from '../../core/root/root.js';
 import * as FormatterActions from '../../entrypoints/formatter_worker/FormatterActions.js';  // eslint-disable-line @devtools/es-modules-import
+import * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
@@ -321,7 +321,8 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
       AiWarningInfobarPlugin,
     ];
 
-    if (this.#isAiCodeCompletionEnabled()) {
+    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
+    if (AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionEnabled(devtoolsLocale.locale)) {
       sourceFramePluginsList.push(AiCodeCompletionPlugin);
     }
     return sourceFramePluginsList;
@@ -511,21 +512,6 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
         this.#uiSourceCode.url().startsWith('debugger://'));
     Host.userMetrics.sourcesPanelFileOpened(mediaType);
   }
-
-  static #isAiCodeCompletionEnabled(): boolean {
-    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
-    const aidaAvailability = Root.Runtime.hostConfig.aidaAvailability;
-    if (!devtoolsLocale.locale.startsWith('en-')) {
-      return false;
-    }
-    if (aidaAvailability?.blockedByGeo) {
-      return false;
-    }
-    if (aidaAvailability?.blockedByAge) {
-      return false;
-    }
-    return Boolean(aidaAvailability?.enabled && Root.Runtime.hostConfig.devToolsAiCodeCompletion?.enabled);
-  }
 }
 
 function getIconDataForLevel(level: Workspace.UISourceCode.Message.Level): IconWithName {

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -2138,14 +2138,11 @@ export class TimelineUIUtils {
     const start = Trace.Types.Timing.Milli(rangeStart);
     const end = Trace.Types.Timing.Milli(rangeEnd);
     const categorySummaryTable = new TimelineComponents.TimelineSummary.CategorySummary();
-    categorySummaryTable.data = {
-      rangeStart: start,
-      rangeEnd: end,
-      total,
-      categories,
-      selectedEvents,
-    };
-    element.append(categorySummaryTable);
+    categorySummaryTable.rangeStart = start;
+    categorySummaryTable.rangeEnd = end;
+    categorySummaryTable.total = total;
+    categorySummaryTable.categories = categories;
+    element.append(categorySummaryTable.contentElement);
     // Add the 3p datagrid
     const treeView = new ThirdPartyTreeView.ThirdPartyTreeElement();
     treeView.treeView = thirdPartyTree;

package/front_end/panels/timeline/components/TimelineSummary.ts

@@ -1,10 +1,9 @@
 // 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 Buttons from '../../../ui/components/buttons/buttons.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 
@@ -33,74 +32,96 @@ export interface CategoryData {
   title: string;
 }
 
-export interface SummaryTableData {
-  total: number;
+interface ViewInput {
   rangeStart: number;
   rangeEnd: number;
+  total: number;
   categories: CategoryData[];
-  selectedEvents: Trace.Types.Events.Event[];
 }
 
-export class CategorySummary extends HTMLElement {
-  readonly #shadow =
-      UI.UIUtils.createShadowRootWithCoreStyles(this, {cssFile: timelineSummaryStyles, delegatesFocus: undefined});
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+export const CATEGORY_SUMMARY_DEFAULT_VIEW: View = (input, _output, target): void => {
+  // clang-format off
+  render(html`
+        <style>${timelineSummaryStyles}</style>
+        <style>@scope to (devtools-widget > *) { ${UI.inspectorCommonStyles} }</style>
+        <style>@scope to (devtools-widget > *) { ${Buttons.textButtonStyles} }</style>
+        <div class="timeline-summary">
+            <div class="summary-range">${i18nString(UIStrings.rangeSS, {PH1: i18n.TimeUtilities.millisToString(input.rangeStart), PH2: i18n.TimeUtilities.millisToString(input.rangeEnd)})}</div>
+            <div class="category-summary">
+                ${input.categories.map(category => {
+                    return html`
+                        <div class="category-row">
+                        <div class="category-swatch" style="background-color: ${category.color};"></div>
+                        <div class="category-name">${category.title}</div>
+                        <div class="category-value">
+                            ${i18n.TimeUtilities.preciseMillisToString(category.value)}
+                            <div class="background-bar-container">
+                                <div class="background-bar" style='width: ${(category.value * 100 / input.total).toFixed(1)}%;'></div>
+                            </div>
+                        </div>
+                        </div>`;
+                })}
+                <div class="category-row">
+                    <div class="category-swatch"></div>
+                    <div class="category-name">${i18nString(UIStrings.total)}</div>
+                    <div class="category-value">
+                        ${i18n.TimeUtilities.preciseMillisToString(input.total)}
+                        <div class="background-bar-container">
+                            <div class="background-bar"></div>
+                        </div>
+                    </div>
+                </div>
+              </div>
+        </div>
+        </div>
+
+      </div>`, target);
+  // clang-format on
+};
+
+export class CategorySummary extends UI.Widget.Widget {
+  #view: View;
 
   #rangeStart = 0;
   #rangeEnd = 0;
   #total = 0;
   #categories: CategoryData[] = [];
 
-  set data(data: SummaryTableData) {
-    this.#total = data.total;
-    this.#categories = data.categories;
-    this.#rangeStart = data.rangeStart;
-    this.#rangeEnd = data.rangeEnd;
-    this.#render();
+  constructor(view?: View) {
+    super();
+    this.#view = view ?? CATEGORY_SUMMARY_DEFAULT_VIEW;
+    this.requestUpdate();
   }
 
-  #render(): void {
-    // clang-format off
-    const output = html`
-          <div class="timeline-summary">
-              <div class="summary-range">${i18nString(UIStrings.rangeSS, {PH1: i18n.TimeUtilities.millisToString(this.#rangeStart), PH2: i18n.TimeUtilities.millisToString(this.#rangeEnd)})}</div>
-              <div class="category-summary">
-                  ${this.#categories.map(category => {
-                      return html`
-                          <div class="category-row">
-                          <div class="category-swatch" style="background-color: ${category.color};"></div>
-                          <div class="category-name">${category.title}</div>
-                          <div class="category-value">
-                              ${i18n.TimeUtilities.preciseMillisToString(category.value)}
-                              <div class="background-bar-container">
-                                  <div class="background-bar" style='width: ${(category.value * 100 / this.#total).toFixed(1)}%;'></div>
-                              </div>
-                          </div>
-                          </div>`;
-                  })}
-                  <div class="category-row">
-                      <div class="category-swatch"></div>
-                      <div class="category-name">${i18nString(UIStrings.total)}</div>
-                      <div class="category-value">
-                          ${i18n.TimeUtilities.preciseMillisToString(this.#total)}
-                          <div class="background-bar-container">
-                              <div class="background-bar"></div>
-                          </div>
-                      </div>
-                  </div>
-                </div>
-          </div>
-          </div>
+  set total(total: number) {
+    this.#total = total;
+    this.requestUpdate();
+  }
 
-        </div>`;
-    // clang-format on
-    render(output, this.#shadow, {host: this});
+  set rangeStart(rangeStart: number) {
+    this.#rangeStart = rangeStart;
+    this.requestUpdate();
   }
-}
 
-customElements.define('devtools-performance-timeline-summary', CategorySummary);
+  set rangeEnd(rangeEnd: number) {
+    this.#rangeEnd = rangeEnd;
+    this.requestUpdate();
+  }
+
+  set categories(categories: CategoryData[]) {
+    this.#categories = categories;
+    this.requestUpdate();
+  }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-timeline-summary': CategorySummary;
+  override performUpdate(): void {
+    const viewInput: ViewInput = {
+      rangeStart: this.#rangeStart,
+      rangeEnd: this.#rangeEnd,
+      total: this.#total,
+      categories: this.#categories,
+    };
+    this.#view(viewInput, undefined, this.contentElement);
   }
 }

package/front_end/panels/timeline/components/insights/BaseInsightComponent.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-imperative-dom-api */
 
 import '../../../../ui/components/markdown_view/markdown_view.js';
 
@@ -9,6 +8,7 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Root from '../../../../core/root/root.js';
 import * as AIAssistance from '../../../../models/ai_assistance/ai_assistance.js';
 import * as Badges from '../../../../models/badges/badges.js';
+import * as GreenDev from '../../../../models/greendev/greendev.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';
@@ -70,7 +70,7 @@ interface ViewInput {
   model: InsightModel;
   selected: boolean;
   isAIAssistanceContext: boolean;
-  canShowAskAI: boolean;
+  showAskAI: boolean;
   estimatedSavingsString: string|null;
   estimatedSavingsAriaLabel: string|null;
   renderContent: () => Lit.LitTemplate;
@@ -89,7 +89,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
     estimatedSavingsString,
     estimatedSavingsAriaLabel,
     isAIAssistanceContext,
-    canShowAskAI,
+    showAskAI,
     dispatchInsightToggle,
     renderContent,
     onHeaderKeyDown,
@@ -122,7 +122,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
       <div class="insight-body">
         <div class="insight-description">${md(model.description)}</div>
         <div class="insight-content">${content}</div>
-        ${canShowAskAI ? html`
+        ${showAskAI ? html`
           <div class="ask-ai-btn-wrap">
             <devtools-button class="ask-ai"
               .variant=${Buttons.Button.Variant.OUTLINED}
@@ -206,9 +206,6 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends UI.Wi
   #view: View;
   abstract internalName: string;
 
-  // This flag tracks if the Insights AI feature is enabled within Chrome for
-  // the active user.
-  #askAiEnabled = false;
   // Tracks if this component is rendered withing the AI assistance panel.
   // Currently only relevant to GreenDev.
   #isAIAssistanceContext = false;
@@ -246,16 +243,6 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends UI.Wi
     return false;
   }
 
-  override wasShown(): void {
-    super.wasShown();
-
-    // Used for unit test purposes when querying the DOM.
-    this.element.dataset.insightName = this.internalName;
-
-    const {devToolsAiAssistancePerformanceAgent} = Root.Runtime.hostConfig;
-    this.#askAiEnabled = Boolean(devToolsAiAssistancePerformanceAgent?.enabled);
-  }
-
   set isAIAssistanceContext(isAIAssistanceContext: boolean) {
     this.#isAIAssistanceContext = isAIAssistanceContext;
     this.requestUpdate();
@@ -300,11 +287,11 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends UI.Wi
     this.requestUpdate();
   }
 
-  set agentFocus(agentFocus: AIAssistance.AIContext.AgentFocus) {
+  set agentFocus(agentFocus: AIAssistance.AIContext.AgentFocus|null) {
     this.#agentFocus = agentFocus;
   }
 
-  set fieldMetrics(fieldMetrics: Trace.Insights.Common.CrUXFieldMetricResults) {
+  set fieldMetrics(fieldMetrics: Trace.Insights.Common.CrUXFieldMetricResults|null) {
     this.#fieldMetrics = fieldMetrics;
   }
 
@@ -322,7 +309,7 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends UI.Wi
       return;
     }
 
-    if (this.#parsedTrace && UI.Floaty.enabled()) {
+    if (this.#parsedTrace && GreenDev.Prototypes.instance().isEnabled('inDevToolsFloaty')) {
       const floatyHandled = UI.Floaty.onFloatyClick({
         type: UI.Floaty.FloatyContextTypes.PERFORMANCE_INSIGHT,
         data: {
@@ -422,7 +409,7 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends UI.Wi
       estimatedSavingsString: this.getEstimatedSavingsString(),
       estimatedSavingsAriaLabel: this.#getEstimatedSavingsAriaLabel(),
       isAIAssistanceContext: this.#isAIAssistanceContext,
-      canShowAskAI: this.#canShowAskAI(),
+      showAskAI: this.#canShowAskAI(),
       dispatchInsightToggle: () => this.#dispatchInsightToggle(),
       renderContent: () => this.renderContent(),
       onHeaderKeyDown: () => this.#onHeaderKeyDown,
@@ -527,14 +514,19 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends UI.Wi
   }
 
   #canShowAskAI(): boolean {
-    if (this.#isAIAssistanceContext) {
+    if (this.#isAIAssistanceContext || !this.hasAskAiSupport()) {
       return false;
     }
 
-    const aiAvailable = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue !==
-            Root.Runtime.GenAiEnterprisePolicyValue.DISABLE &&
-        this.#askAiEnabled && Root.Runtime.hostConfig.aidaAvailability?.enabled === true;
+    // Check if the Insights AI feature enabled within Chrome for the active user.
+    const {devToolsAiAssistancePerformanceAgent} = Root.Runtime.hostConfig;
+    const askAiEnabled = Boolean(devToolsAiAssistancePerformanceAgent?.enabled);
+    if (!askAiEnabled) {
+      return false;
+    }
 
-    return aiAvailable && this.hasAskAiSupport();
+    const {aidaAvailability} = Root.Runtime.hostConfig;
+    return aidaAvailability?.enterprisePolicyValue !== Root.Runtime.GenAiEnterprisePolicyValue.DISABLE &&
+        aidaAvailability?.enabled === true;
   }
 }

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/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/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
   }