chrome-devtools-frontend 1.0.1596535 → 1.0.1597624

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

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

@@ -20,7 +20,7 @@ import {Table} from './Table.js';
 const {UIStrings, i18nString} = Trace.Insights.Models.SlowCSSSelector;
 
 const {html} = Lit;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsightModel> {
   override internalName = 'slow-css-selector';
@@ -107,7 +107,7 @@ export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsight
     // clang-format off
     const sections = [html`
       <div class="insight-section">
-        <devtools-widget .widgetConfig=${widgetConfig(Table, {
+        ${widget(Table, {
            data: {
             insight: this,
             headers: [i18nString(UIStrings.total), ''],
@@ -116,8 +116,7 @@ export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsight
               {values: [i18nString(UIStrings.matchCount), this.model.totalMatchCount]},
               {values: [i18nString(UIStrings.elapsed), i18n.TimeUtilities.millisToString(this.model.totalElapsedMs)]},
             ],
-          }})}>
-        </devtools-widget>
+          }})}
       </div>
     `];
     // clang-format on
@@ -127,14 +126,13 @@ export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsight
       // clang-format off
       sections.push(html`
         <div class="insight-section">
-          <devtools-widget .widgetConfig=${widgetConfig(Table, {
+          ${widget(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))}`]}]
-            }})}>
-          </devtools-widget>
+            }})}
         </div>
       `);
       // clang-format on
@@ -145,15 +143,14 @@ export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsight
       // clang-format off
       sections.push(html`
         <div class="insight-section">
-          <devtools-widget .widgetConfig=${widgetConfig(Table, {
+          ${widget(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],
               }]
-            }})}>
-          </devtools-widget>
+            }})}
         </div>
       `);
       // clang-format on

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

@@ -14,7 +14,7 @@ import {createLimitedRows, renderOthersLabel, type RowLimitAggregator, Table} fr
 const {UIStrings, i18nString, createOverlaysForSummary} = Trace.Insights.Models.ThirdParties;
 
 const {html} = Lit;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 const MAX_TO_SHOW = 5;
 
@@ -79,13 +79,12 @@ export class ThirdParties extends BaseInsightComponent<ThirdPartiesInsightModel>
       // clang-format off
       sections.push(html`
         <div class="insight-section">
-          <devtools-widget .widgetConfig=${widgetConfig(Table, {
+          ${widget(Table, {
            data: {
               insight: this,
               headers: [i18nString(UIStrings.columnThirdParty), i18nString(UIStrings.columnTransferSize)],
               rows,
-            }})}>
-          </devtools-widget>
+            }})}
         </div>
       `);
       // clang-format on
@@ -96,13 +95,12 @@ export class ThirdParties extends BaseInsightComponent<ThirdPartiesInsightModel>
       // clang-format off
       sections.push(html`
         <div class="insight-section">
-          <devtools-widget .widgetConfig=${widgetConfig(Table, {
+          ${widget(Table, {
            data: {
               insight: this,
               headers: [i18nString(UIStrings.columnThirdParty), i18nString(UIStrings.columnMainThreadTime)],
               rows,
-            }})}>
-          </devtools-widget>
+            }})}
         </div>
       `);
       // clang-format on

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

@@ -4,6 +4,7 @@
 
 import * as BaseInsightComponent from './BaseInsightComponent.js';
 import * as Cache from './Cache.js';
+import * as CharacterSet from './CharacterSet.js';
 import * as Checklist from './Checklist.js';
 import * as CLSCulprits from './CLSCulprits.js';
 import * as DocumentLatency from './DocumentLatency.js';
@@ -33,6 +34,7 @@ import * as Viewport from './Viewport.js';
 export {
   BaseInsightComponent,
   Cache,
+  CharacterSet,
   Checklist,
   CLSCulprits,
   DocumentLatency,