chrome-devtools-frontend 1.0.1555174 → 1.0.1556696

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

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

@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import './Table.js';
-
 import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
@@ -11,15 +9,17 @@ import * as Bindings from '../../../../models/bindings/bindings.js';
 import type {
   LegacyJavaScriptInsightModel, PatternMatchResult} from '../../../../models/trace/insights/LegacyJavaScript.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 {scriptRef} from './ScriptRef.js';
-import type {TableData, TableDataRow} from './Table.js';
+import {Table, type TableDataRow} from './Table.js';
 
 const {UIStrings, i18nString} = Trace.Insights.Models.LegacyJavaScript;
 
 const {html} = Lit;
+const {widgetConfig} = UI.Widget;
 
 export class LegacyJavaScript extends BaseInsightComponent<LegacyJavaScriptInsightModel> {
   override internalName = 'legacy-javascript';
@@ -85,13 +85,13 @@ export class LegacyJavaScript extends BaseInsightComponent<LegacyJavaScriptInsig
     // clang-format off
     return html`
       <div class="insight-section">
-        <devtools-performance-table
-          .data=${{
+        <devtools-widget .widgetConfig=${widgetConfig(Table, {
+           data: {
             insight: this,
             headers: [i18nString(UIStrings.columnScript), i18nString(UIStrings.columnWastedBytes)],
             rows,
-          } as TableData}>
-        </devtools-performance-table>
+          }})}>
+        </devtools-widget>
       </div>
     `;
     // clang-format on

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

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

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

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

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

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

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

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