chrome-devtools-frontend 1.0.1553956 → 1.0.1555430

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

@@ -2,17 +2,19 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import './Checklist.js';
-
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type {LCPDiscoveryInsightModel} from '../../../../models/trace/insights/LCPDiscovery.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as uiI18n from '../../../../ui/i18n/i18n.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';
 import {imageRef} from './ImageRef.js';
 
+const {widgetConfig} = UI.Widget;
+
 const {UIStrings, i18nString, getImageData} = Trace.Insights.Models.LCPDiscovery;
 
 const {html} = Lit;
@@ -89,7 +91,9 @@ export class LCPDiscovery extends BaseInsightComponent<LCPDiscoveryInsightModel>
     // clang-format off
     return html`
       <div class="insight-section">
-        <devtools-performance-checklist class="insight-section" .checklist=${imageData.checklist}></devtools-performance-checklist>
+        <devtools-widget .widgetConfig=${widgetConfig(Checklist, {
+          checklist: imageData.checklist,
+        })}></devtools-widget>
         <div class="insight-section">${imageRef(imageData.request)}${delayEl}</div>
       </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