chrome-devtools-frontend 1.0.1597448 → 1.0.1597624

package/front_end/panels/settings/WorkspaceSettingsTab.ts

@@ -41,6 +41,7 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/settings/WorkspaceSettingsTab.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {widget} = UI.Widget;
 
 export interface WorkspaceSettingsTabInput {
   excludePatternSetting: Common.Settings.RegExpSetting;
@@ -70,11 +71,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           <devtools-card heading=${fileSystem.displayName}>
             <devtools-icon name="folder" slot="heading-prefix"></devtools-icon>
             <div class="mapping-view-container">
-              <devtools-widget .widgetConfig=${
-                  UI.Widget.widgetConfig(
-                      EditFileSystemView,
-                      {fileSystem: fileSystem.fileSystem})}>
-              </devtools-widget>
+              ${widget(EditFileSystemView, {fileSystem: fileSystem.fileSystem})}
             </div>
             <devtools-button
               slot="heading-suffix"

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

@@ -41,7 +41,7 @@ import metricValueStyles from './metricValueStyles.css.js';
 import {CLS_THRESHOLDS, INP_THRESHOLDS, renderMetricValue} from './Utils.js';
 
 const {html, nothing} = Lit;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 type DeviceOption = CrUXManager.DeviceScope|'AUTO';
 
@@ -485,8 +485,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
             <div class="related-info" slot="extra-info">
               <span class="related-info-label">${i18nString(UIStrings.lcpElement)}</span>
               <span class="related-info-link">
-               <devtools-widget .widgetConfig=${widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {node: this.#lcpValue?.nodeRef})}>
-               </devtools-widget>
+               ${widget(PanelsCommon.DOMLinkifier.DOMNodeLink, {node: this.#lcpValue?.nodeRef})}
               </span>
             </div>
           `
@@ -650,7 +649,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
         </ul>
       ` : nothing}
       <div class="environment-option">
-        <devtools-widget .widgetConfig=${widgetConfig(CPUThrottlingSelector, {recommendedOption: recs.cpuOption})}></devtools-widget>
+        ${widget(CPUThrottlingSelector, {recommendedOption: recs.cpuOption})}
       </div>
       <div class="environment-option">
         <devtools-network-throttling-selector .recommendedConditions=${recs.networkConditions}></devtools-network-throttling-selector>
@@ -1003,8 +1002,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
                     : nothing}
                   </span>
                   <span class="interaction-node">
-                    <devtools-widget .widgetConfig=${widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {node: interaction.nodeRef})}>
-                    </devtools-widget>
+                    ${widget(PanelsCommon.DOMLinkifier.DOMNodeLink, {node: interaction.nodeRef})}
                   </span>
                   ${isP98Excluded ? html`<devtools-icon
                     class="interaction-info"
@@ -1113,8 +1111,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
               <div class="layout-shift-nodes">
                 ${layoutShift.affectedNodeRefs.map(node => html`
                   <div class="layout-shift-node">
-                    <devtools-widget .widgetConfig=${widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {node})}>
-                    </devtools-widget>
+                    ${widget(PanelsCommon.DOMLinkifier.DOMNodeLink, {node})}
                   </div>
                 `)}
               </div>

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

@@ -17,7 +17,7 @@ import {createLimitedRows, renderOthersLabel, Table, type TableDataRow} from './
 const {UIStrings, i18nString, createOverlayForRequest} = Trace.Insights.Models.Cache;
 
 const {html} = Lit;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 export class Cache extends BaseInsightComponent<CacheInsightModel> {
   override internalName = 'cache';
@@ -58,15 +58,13 @@ export class Cache extends BaseInsightComponent<CacheInsightModel> {
     // clang-format off
     return html`
       <div class="insight-section">
-        <devtools-widget
-          .widgetConfig=${widgetConfig(Table, {
-            data: {
-              insight: this,
-              headers: [i18nString(UIStrings.requestColumn), i18nString(UIStrings.cacheTTL)],
-              rows,
-            },
-          })}>
-        </devtools-widget>
+        ${widget(Table, {
+          data: {
+            insight: this,
+            headers: [i18nString(UIStrings.requestColumn), i18nString(UIStrings.cacheTTL)],
+            rows,
+          },
+        })}
       </div>`;
     // clang-format on
   }

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

@@ -0,0 +1,38 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type {CharacterSetInsightModel} from '../../../../models/trace/insights/CharacterSet.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 CharacterSet extends BaseInsightComponent<CharacterSetInsightModel> {
+  override internalName = 'character-set';
+
+  protected override hasAskAiSupport(): boolean {
+    return true;
+  }
+
+  override getEstimatedSavingsTime(): Trace.Types.Timing.Milli|null {
+    return this.model?.metricSavings?.FCP ?? null;
+  }
+
+  override renderContent(): Lit.LitTemplate {
+    if (!this.model?.data) {
+      return Lit.nothing;
+    }
+
+    // clang-format off
+    return html`<devtools-widget .widgetConfig=${widgetConfig(Checklist, {
+      checklist: this.model.data.checklist,
+    })}></devtools-widget>`;
+    // clang-format on
+  }
+}

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

@@ -20,7 +20,7 @@ import {Table, type TableDataRow} from './Table.js';
 const {UIStrings, i18nString} = Trace.Insights.Models.DOMSize;
 
 const {html} = Lit;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 export class DOMSize extends BaseInsightComponent<DOMSizeInsightModel> {
   override internalName = 'dom-size';
@@ -58,13 +58,12 @@ export class DOMSize extends BaseInsightComponent<DOMSizeInsightModel> {
 
     // clang-format off
     return html`<div class="insight-section">
-      <devtools-widget .widgetConfig=${widgetConfig(Table, {
+      ${widget(Table, {
         data: {
           insight: this,
           headers: [i18nString(UIStrings.statistic), i18nString(UIStrings.element)],
           rows,
-        }})}>
-      </devtools-widget>
+        }})}
     </div>`;
     // clang-format on
   }
@@ -88,13 +87,12 @@ 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-widget .widgetConfig=${widgetConfig(Table, {
+      ${widget(Table, {
         data: {
           insight: this,
           headers: ['', i18nString(UIStrings.duration)],
           rows,
-        }})}>
-      </devtools-widget>
+        }})}
     </div>`;
     // clang-format on
   }
@@ -111,19 +109,17 @@ export class DOMSize extends BaseInsightComponent<DOMSizeInsightModel> {
 
     // clang-format off
     return html`<div class="insight-section">
-      <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>
+      ${widget(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]},
+          ],
+        },
+      })}>
     </div>
     ${this.#renderNodeTable(domStatsData)}
     ${this.#renderLargeUpdatesTable()}

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

@@ -11,7 +11,7 @@ import {BaseInsightComponent} from './BaseInsightComponent.js';
 import {Checklist} from './Checklist.js';
 
 const {html} = Lit;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 export class DocumentLatency extends BaseInsightComponent<DocumentLatencyInsightModel> {
   override internalName = 'document-latency';
@@ -29,10 +29,6 @@ export class DocumentLatency extends BaseInsightComponent<DocumentLatencyInsight
       return Lit.nothing;
     }
 
-    // clang-format off
-    return html`<devtools-widget .widgetConfig=${widgetConfig(Checklist, {
-      checklist: this.model.data.checklist,
-    })}></devtools-widget>`;
-    // clang-format on
+    return html`${widget(Checklist, {checklist: this.model.data.checklist})}`;
   }
 }

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

@@ -18,7 +18,7 @@ import {Table, type TableDataRow} from './Table.js';
 const {UIStrings, i18nString} = Trace.Insights.Models.DuplicatedJavaScript;
 
 const {html} = Lit;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 export class DuplicatedJavaScript extends BaseInsightComponent<DuplicatedJavaScriptInsightModel> {
   override internalName = 'duplicated-javascript';
@@ -105,13 +105,12 @@ export class DuplicatedJavaScript extends BaseInsightComponent<DuplicatedJavaScr
     return html`
       ${treemapButton}
       <div class="insight-section">
-        <devtools-widget .widgetConfig=${widgetConfig(Table, {
+        ${widget(Table, {
            data: {
             insight: this,
             headers: [i18nString(UIStrings.columnSource), i18nString(UIStrings.columnDuplicatedBytes)],
             rows,
-          }})}>
-        </devtools-widget>
+          }})}
       </div>
     `;
     // clang-format on

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

@@ -17,7 +17,7 @@ import {createLimitedRows, renderOthersLabel, Table, type TableDataRow} from './
 const {UIStrings, i18nString} = Trace.Insights.Models.FontDisplay;
 
 const {html} = Lit;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 export class FontDisplay extends BaseInsightComponent<FontDisplayInsightModel> {
   override internalName = 'font-display';
@@ -78,13 +78,12 @@ export class FontDisplay extends BaseInsightComponent<FontDisplayInsightModel> {
     // clang-format off
     return html`
       <div class="insight-section">
-        ${html`<devtools-widget .widgetConfig=${widgetConfig(Table, {
+        ${widget(Table, {
            data: {
             insight: this,
             headers: [i18nString(UIStrings.fontColumn), i18nString(UIStrings.wastedTimeColumn)],
             rows,
-          }})}>
-        </devtools-widget>`}
+          }})}
       </div>`;
     // clang-format on
   }

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

@@ -18,7 +18,7 @@ import {createLimitedRows, renderOthersLabel, Table, type TableDataRow} from './
 const {UIStrings, i18nString, createOverlayForEvents} = Trace.Insights.Models.ForcedReflow;
 
 const {html, nothing} = Lit;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 export class ForcedReflow extends BaseInsightComponent<ForcedReflowInsightModel> {
   override internalName = 'forced-reflow';
@@ -87,7 +87,7 @@ export class ForcedReflow extends BaseInsightComponent<ForcedReflowInsightModel>
     return html`
       ${topLevelFunctionCallData ? html`
         <div class="insight-section">
-          <devtools-widget .widgetConfig=${widgetConfig(Table, {
+          ${widget(Table, {
            data: {
               insight: this,
               headers: [i18nString(UIStrings.topTimeConsumingFunctionCall), i18nString(UIStrings.totalReflowTime)],
@@ -98,18 +98,16 @@ export class ForcedReflow extends BaseInsightComponent<ForcedReflowInsightModel>
                 ],
                 overlays: createOverlayForEvents(topLevelFunctionCallData.topLevelFunctionCallEvents, 'INFO'),
               }],
-            }})}>
-          </devtools-widget>
+            }})}
         </div>
       ` : nothing}
       <div class="insight-section">
-        <devtools-widget .widgetConfig=${widgetConfig(Table, {
+        ${widget(Table, {
            data: {
             insight: this,
             headers: [i18nString(UIStrings.reflowCallFrames)],
             rows,
-        }})}>
-        </devtools-widget>
+        }})}
       </div>`;
     // clang-format on
   }

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

@@ -15,7 +15,7 @@ import {Table} from './Table.js';
 const {UIStrings, i18nString, createOverlaysForSubpart} = Trace.Insights.Models.INPBreakdown;
 
 const {html} = Lit;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 export class INPBreakdown extends BaseInsightComponent<INPBreakdownInsightModel> {
   override internalName = 'inp';
@@ -36,7 +36,7 @@ export class INPBreakdown extends BaseInsightComponent<INPBreakdownInsightModel>
     // clang-format off
     return html`
       <div class="insight-section">
-        ${html`<devtools-widget .widgetConfig=${widgetConfig(Table, {
+        ${widget(Table, {
            data: {
             insight: this,
             headers: [i18nString(UIStrings.subpart), i18nString(UIStrings.duration)],
@@ -54,8 +54,7 @@ export class INPBreakdown extends BaseInsightComponent<INPBreakdownInsightModel>
                 overlays: createOverlaysForSubpart(event, 2),
               },
             ],
-          }})}>
-        </devtools-widget>`}
+          }})}
       </div>`;
     // clang-format on
   }

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

@@ -16,7 +16,7 @@ import {createLimitedRows, renderOthersLabel, Table, type TableDataRow} from './
 const {UIStrings, i18nString, createOverlayForRequest} = Trace.Insights.Models.ImageDelivery;
 
 const {html} = Lit;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 export class ImageDelivery extends BaseInsightComponent<ImageDeliveryInsightModel> {
   override internalName = 'image-delivery';
@@ -58,13 +58,12 @@ export class ImageDelivery extends BaseInsightComponent<ImageDeliveryInsightMode
     // clang-format off
     return html`
       <div class="insight-section">
-        <devtools-widget .widgetConfig=${widgetConfig(Table, {
+        ${widget(Table, {
            data: {
             insight: this,
             headers: [i18nString(UIStrings.optimizeFile)],
             rows,
-          }})}>
-        </devtools-widget>
+          }})}
       </div>
     `;
     // clang-format on

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

@@ -13,7 +13,7 @@ import baseInsightComponentStyles from './baseInsightComponent.css.js';
 import {eventRef} from './EventRef.js';
 
 const {html} = Lit;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 interface ViewInput {
   request: Trace.Types.Events.SyntheticNetworkRequest;
@@ -106,7 +106,5 @@ class ImageRef extends UI.Widget.Widget {
 }
 
 export function imageRef(request: Trace.Types.Events.SyntheticNetworkRequest): Lit.TemplateResult {
-  return html`<devtools-widget .widgetConfig=${widgetConfig(ImageRef, {
-    request,
-  })}></devtools-widget>`;
+  return html`${widget(ImageRef, {request})}`;
 }

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

@@ -7,6 +7,7 @@ import * as UI from '../../../../ui/legacy/legacy.js';
 
 import type {BaseInsightComponent} from './BaseInsightComponent.js';
 import {Cache} from './Cache.js';
+import {CharacterSet} from './CharacterSet.js';
 import {CLSCulprits} from './CLSCulprits.js';
 import {DocumentLatency} from './DocumentLatency.js';
 import {DOMSize} from './DOMSize.js';
@@ -36,6 +37,7 @@ type InsightWidgetElement = UI.Widget.WidgetElement<BaseInsightComponent<Trace.I
  */
 const INSIGHT_NAME_TO_COMPONENT = {
   Cache,
+  CharacterSet,
   CLSCulprits,
   DocumentLatency,
   DOMSize,

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

@@ -15,7 +15,7 @@ import {Table, type TableDataRow} from './Table.js';
 const {UIStrings, i18nString} = Trace.Insights.Models.LCPBreakdown;
 
 const {html} = Lit;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 export class LCPBreakdown extends BaseInsightComponent<LCPBreakdownInsightModel> {
   override internalName = 'lcp-by-phase';
@@ -69,13 +69,12 @@ export class LCPBreakdown extends BaseInsightComponent<LCPBreakdownInsightModel>
     // clang-format off
     return html`
       <div class="insight-section">
-        <devtools-widget .widgetConfig=${widgetConfig(Table, {
+        ${widget(Table, {
            data: {
             insight: this,
             headers: [i18nString(UIStrings.subpart), i18nString(UIStrings.fieldDuration)],
             rows,
-          }})}>
-        </devtools-widget>
+          }})}
       </div>
     `;
     // clang-format on
@@ -116,13 +115,12 @@ export class LCPBreakdown extends BaseInsightComponent<LCPBreakdownInsightModel>
     // clang-format off
     const sections: Lit.LitTemplate[] = [html`
       <div class="insight-section">
-        <devtools-widget .widgetConfig=${widgetConfig(Table, {
+        ${widget(Table, {
            data: {
             insight: this,
             headers: [i18nString(UIStrings.subpart), i18nString(UIStrings.duration)],
             rows,
-          }})}>
-        </devtools-widget>
+          }})}
       </div>`
     ];
     // clang-format on

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

@@ -13,7 +13,7 @@ import {BaseInsightComponent} from './BaseInsightComponent.js';
 import {Checklist} from './Checklist.js';
 import {imageRef} from './ImageRef.js';
 
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 const {UIStrings, i18nString, getImageData} = Trace.Insights.Models.LCPDiscovery;
 
@@ -91,9 +91,7 @@ export class LCPDiscovery extends BaseInsightComponent<LCPDiscoveryInsightModel>
     // clang-format off
     return html`
       <div class="insight-section">
-        <devtools-widget .widgetConfig=${widgetConfig(Checklist, {
-          checklist: imageData.checklist,
-        })}></devtools-widget>
+        ${widget(Checklist, {checklist: imageData.checklist})}
         <div class="insight-section">${imageRef(imageData.request)}${delayEl}</div>
       </div>`;
     // clang-format on

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

@@ -19,7 +19,7 @@ import {Table, type TableDataRow} from './Table.js';
 const {UIStrings, i18nString} = Trace.Insights.Models.LegacyJavaScript;
 
 const {html} = Lit;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 export class LegacyJavaScript extends BaseInsightComponent<LegacyJavaScriptInsightModel> {
   override internalName = 'legacy-javascript';
@@ -85,13 +85,12 @@ export class LegacyJavaScript extends BaseInsightComponent<LegacyJavaScriptInsig
     // clang-format off
     return html`
       <div class="insight-section">
-        <devtools-widget .widgetConfig=${widgetConfig(Table, {
+        ${widget(Table, {
            data: {
             insight: this,
             headers: [i18nString(UIStrings.columnScript), i18nString(UIStrings.columnWastedBytes)],
             rows,
-          }})}>
-        </devtools-widget>
+          }})}
       </div>
     `;
     // clang-format on

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

@@ -16,7 +16,7 @@ import {createLimitedRows, renderOthersLabel, Table, type TableDataRow} from './
 const {UIStrings, i18nString, createOverlayForRequest} = Trace.Insights.Models.ModernHTTP;
 
 const {html} = Lit;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 export class ModernHTTP extends BaseInsightComponent<ModernHTTPInsightModel> {
   override internalName = 'modern-http';
@@ -58,13 +58,12 @@ export class ModernHTTP extends BaseInsightComponent<ModernHTTPInsightModel> {
     // clang-format off
     return html`
       <div class="insight-section">
-        <devtools-widget .widgetConfig=${widgetConfig(Table, {
+        ${widget(Table, {
            data: {
             insight: this,
             headers: [i18nString(UIStrings.request), i18nString(UIStrings.protocol)],
             rows,
-          }})}>
-        </devtools-widget>
+          }})}
       </div>`;
     // clang-format on
   }

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

@@ -23,7 +23,7 @@ import {renderOthersLabel, Table, type TableDataRow} from './Table.js';
 const {UIStrings, i18nString} = Trace.Insights.Models.NetworkDependencyTree;
 
 const {html} = Lit;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 export const MAX_CHAINS_TO_SHOW = 5;
 
@@ -117,14 +117,12 @@ export class NetworkDependencyTree extends BaseInsightComponent<NetworkDependenc
 
     // clang-format off
     return html`
-      <devtools-widget .widgetConfig=${widgetConfig(Table, {
+      ${widget(Table, {
            data: {
             insight: this,
             headers: [i18nString(UIStrings.columnRequest), i18nString(UIStrings.columnTime)],
             rows,
-          }})}>
-      </devtools-widget>
-    `;
+          }})}`;
     // clang-format on
   }
 
@@ -242,13 +240,12 @@ export class NetworkDependencyTree extends BaseInsightComponent<NetworkDependenc
       <div class="insight-section">
         ${preconnectOriginsTableTitle}
         ${this.#renderTooManyPreconnectsWarning()}
-        <devtools-widget .widgetConfig=${widgetConfig(Table, {
+        ${widget(Table, {
            data: {
             insight: this,
             headers: [i18nString(UIStrings.columnOrigin), i18nString(UIStrings.columnSource)],
             rows,
-          }})}>
-        </devtools-widget>
+          }})}
       </div>
     `;
     // clang-format on
@@ -285,13 +282,12 @@ export class NetworkDependencyTree extends BaseInsightComponent<NetworkDependenc
     return html`
       <div class="insight-section">
         ${estSavingTableTitle}
-        <devtools-widget .widgetConfig=${widgetConfig(Table, {
+        ${widget(Table, {
            data: {
             insight: this,
             headers: [i18nString(UIStrings.columnOrigin), i18nString(UIStrings.columnWastedMs)],
             rows,
-          }})}>
-        </devtools-widget>
+          }})}
       </div>
     `;
     // clang-format on

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

@@ -12,7 +12,7 @@ import * as Lit from '../../../../ui/lit/lit.js';
 import * as PanelsCommon from '../../../common/common.js';
 
 const {html} = Lit;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 interface ViewInput {
   relatedNodeEl: Node|undefined;
@@ -157,7 +157,5 @@ export class NodeLink extends UI.Widget.Widget {
 }
 
 export function nodeLink(data: NodeLinkData): Lit.TemplateResult {
-  return html`<devtools-widget .widgetConfig=${widgetConfig(NodeLink, {
-    data,
-  })}></devtools-widget>`;
+  return html`${widget(NodeLink, {data})}`;
 }

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

@@ -15,7 +15,7 @@ import {createLimitedRows, renderOthersLabel, Table, type TableDataRow} from './
 const {UIStrings, i18nString, createOverlayForRequest} = Trace.Insights.Models.RenderBlocking;
 
 const {html} = Lit;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 export class RenderBlocking extends BaseInsightComponent<RenderBlockingInsightModel> {
   override internalName = 'render-blocking-requests';
@@ -60,13 +60,12 @@ export class RenderBlocking extends BaseInsightComponent<RenderBlockingInsightMo
     // clang-format off
     return html`
       <div class="insight-section">
-        <devtools-widget .widgetConfig=${widgetConfig(Table, {
+        ${widget(Table, {
            data: {
             insight: this,
             headers: [i18nString(UIStrings.renderBlockingRequest), i18nString(UIStrings.duration)],
             rows,
-          }})}>
-        </devtools-widget>
+          }})}
       </div>
     `;
     // clang-format on