chrome-devtools-frontend 1.0.1550444 → 1.0.1553956

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -176,19 +176,6 @@ const UIStrings = {
    * @description Text that appears on a button for the manifest resource type filter.
    */
   manifest: 'Manifest',
-  /**
-   * @description Text in App Manifest View of the Application panel
-   */
-  noManifestDetected: 'No manifest detected',
-  /**
-   * @description Description text on manifests in App Manifest View of the Application panel which describes the app manifest view tab
-   */
-  manifestDescription:
-      'A manifest defines how your app appears on phone’s home screens and what the app looks like on launch.',
-  /**
-   * @description Text in App Manifest View of the Application panel
-   */
-  appManifest: 'Manifest',
   /**
    * @description Text in Application Panel Sidebar of the Application panel
    */
@@ -1156,10 +1143,7 @@ export class AppManifestTreeElement extends ApplicationPanelTreeElement {
     const icon = createIcon('document');
     this.setLeadingIcons([icon]);
     self.onInvokeElement(this.listItemElement, this.onInvoke.bind(this));
-    const emptyView = new UI.EmptyWidget.EmptyWidget(
-        i18nString(UIStrings.noManifestDetected), i18nString(UIStrings.manifestDescription));
-    const reportView = new UI.ReportView.ReportView(i18nString(UIStrings.appManifest));
-    this.view = new AppManifestView(emptyView, reportView, new Common.Throttler.Throttler(1000));
+    this.view = new AppManifestView();
     UI.ARIAUtils.setLabel(this.listItemElement, i18nString(UIStrings.onInvokeManifestAlert));
     const handleExpansion = (hasManifest: boolean): void => {
       this.setExpandable(hasManifest);

package/front_end/panels/application/ExtensionStorageItemsView.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 */
 
 /*
  * Copyright (C) 2008 Nokia Inc.  All rights reserved.
@@ -74,10 +73,9 @@ export class ExtensionStorageItemsView extends KeyValueStorageItemsView {
       Common.ObjectWrapper.ObjectWrapper<ExtensionStorageItemsDispatcher.EventTypes>;
 
   constructor(extensionStorage: ExtensionStorage, view?: KeyValueStorageItemsViewFunction) {
-    super(i18nString(UIStrings.extensionStorageItems), 'extension-storage', true, view);
-
-    this.element.setAttribute('jslog', `${VisualLogging.pane().context('extension-storage-data')}`);
-    this.element.classList.add('storage-view', 'table');
+    super(
+        i18nString(UIStrings.extensionStorageItems), 'extension-storage', true, view, undefined,
+        {jslog: `${VisualLogging.pane().context('extension-storage-data')}`, classes: ['storage-view', 'table']});
 
     this.extensionStorageItemsDispatcher =
         new Common.ObjectWrapper.ObjectWrapper<ExtensionStorageItemsDispatcher.EventTypes>();

package/front_end/panels/application/KeyValueStorageItemsView.ts

@@ -31,6 +31,7 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Geometry from '../../models/geometry/geometry.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import type {WidgetOptions} from '../../ui/legacy/Widget.js';
 import {Directives as LitDirectives, html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -110,7 +111,7 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
 
   constructor(
       title: string, id: string, editable: boolean, view?: View,
-      metadataView?: ApplicationComponents.StorageMetadataView.StorageMetadataView) {
+      metadataView?: ApplicationComponents.StorageMetadataView.StorageMetadataView, opts?: WidgetOptions) {
     metadataView ??= new ApplicationComponents.StorageMetadataView.StorageMetadataView();
     if (!view) {
       view = (input: ViewInput, output: ViewOutput, target: HTMLElement) => {
@@ -168,7 +169,7 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
             target);
       };
     }
-    super();
+    super(opts);
     this.metadataView = metadataView;
     this.#editable = editable;
     this.#view = view;

package/front_end/panels/application/components/BackForwardCacheView.ts

@@ -2,10 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../ui/components/chrome_link/chrome_link.js';
 import '../../../ui/components/expandable_list/expandable_list.js';
 import '../../../ui/components/report_view/report_view.js';
 import '../../../ui/legacy/legacy.js';
+import '../../../ui/kit/kit.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -341,7 +341,7 @@ function maybeRenderReasonContext(explanation: Protocol.Page.BackForwardCacheNot
     const link = 'chrome://extensions/?id=' + explanation.context as Platform.DevToolsPath.UrlString;
     // clang-format off
     return html`${i18nString(UIStrings.blockingExtensionId)}
-      <devtools-chrome-link .href=${link}>${explanation.context}</devtools-chrome-link>`;
+      <devtools-link .href=${link}>${explanation.context}</devtools-link>`;
     // clang-format on
   }
   return nothing;

package/front_end/panels/application/preloading/PreloadingView.ts

@@ -16,7 +16,7 @@ import * as Buttons from '../../../ui/components/buttons/buttons.js';
 // eslint-disable-next-line @devtools/es-modules-import
 import emptyWidgetStyles from '../../../ui/legacy/emptyWidget.css.js';
 import * as UI from '../../../ui/legacy/legacy.js';
-import {html, render} from '../../../ui/lit/lit.js';
+import {Directives, html, render} from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import * as PreloadingComponents from './components/components.js';
@@ -25,6 +25,8 @@ import type * as PreloadingHelper from './helper/helper.js';
 import preloadingViewStyles from './preloadingView.css.js';
 import preloadingViewDropDownStyles from './preloadingViewDropDown.css.js';
 
+const {createRef, ref} = Directives;
+
 const UIStrings = {
   /**
    * @description DropDown title for filtering preloading attempts by rule set
@@ -195,10 +197,12 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
   private focusedRuleSetId: Protocol.Preload.RuleSetId|null = null;
 
   private readonly warningsContainer: HTMLDivElement;
-  private readonly warningsView = new PreloadingWarningsView();
+  private readonly warningsView = new PreloadingComponents.PreloadingDisabledInfobar.PreloadingDisabledInfobar();
   private readonly hsplit: HTMLElement;
   private readonly ruleSetGrid = new PreloadingComponents.RuleSetGrid.RuleSetGrid();
-  private readonly ruleSetDetails = new PreloadingComponents.RuleSetDetailsView.RuleSetDetailsView();
+  private readonly ruleSetGridContainerRef = createRef<HTMLDivElement>();
+  private readonly ruleSetDetailsRef:
+      Directives.Ref<UI.Widget.WidgetElement<PreloadingComponents.RuleSetDetailsView.RuleSetDetailsView>>;
 
   private shouldPrettyPrint = Common.Settings.Settings.instance().moduleSetting('auto-pretty-print-minified').get();
 
@@ -212,8 +216,9 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
         SDK.PreloadingModel.PreloadingModel, SDK.PreloadingModel.Events.MODEL_UPDATED, this.render, this,
         {scoped: true});
     SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.PreloadingModel.PreloadingModel, SDK.PreloadingModel.Events.WARNINGS_UPDATED,
-        this.warningsView.onWarningsUpdated, this.warningsView, {scoped: true});
+        SDK.PreloadingModel.PreloadingModel, SDK.PreloadingModel.Events.WARNINGS_UPDATED, e => {
+          Object.assign(this.warningsView, e.data);
+        }, this, {scoped: true});
 
     // this (VBox)
     //   +- warningsContainer
@@ -232,7 +237,10 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
     this.contentElement.insertBefore(this.warningsContainer, this.contentElement.firstChild);
     this.warningsView.show(this.warningsContainer);
 
-    this.ruleSetGrid.addEventListener('select', this.onRuleSetsGridCellFocused.bind(this));
+    this.ruleSetGrid.addEventListener(
+        PreloadingComponents.RuleSetGrid.Events.SELECT, this.onRuleSetsGridCellFocused, this);
+    this.ruleSetDetailsRef =
+        createRef<UI.Widget.WidgetElement<PreloadingComponents.RuleSetDetailsView.RuleSetDetailsView>>();
     const onPrettyPrintToggle = (): void => {
       this.shouldPrettyPrint = !this.shouldPrettyPrint;
       this.updateRuleSetDetails();
@@ -253,11 +261,13 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
           </div>
         </div>
         <devtools-split-view sidebar-position="second">
-          <div slot="main">
-            ${this.ruleSetGrid}
+          <div slot="main" ${ref(this.ruleSetGridContainerRef)}>
           </div>
           <div slot="sidebar" jslog=${VisualLogging.section('rule-set-details')}>
-            ${this.ruleSetDetails}
+            <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(PreloadingComponents.RuleSetDetailsView.RuleSetDetailsView, {
+              ruleSet: this.getRuleSet(),
+              shouldPrettyPrint: this.shouldPrettyPrint,
+            })} ${ref(this.ruleSetDetailsRef)}></devtools-widget>
           </div>
         </devtools-split-view>
         <div class="pretty-print-button" style="border-top: 1px solid var(--sys-color-divider)">
@@ -298,10 +308,12 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
   }
 
   private updateRuleSetDetails(): void {
-    const id = this.focusedRuleSetId;
-    const ruleSet = id === null ? null : this.model.getRuleSetById(id);
-    this.ruleSetDetails.shouldPrettyPrint = this.shouldPrettyPrint;
-    this.ruleSetDetails.data = ruleSet;
+    const ruleSet = this.getRuleSet();
+    const widget = this.ruleSetDetailsRef.value?.getWidget();
+    if (widget) {
+      widget.shouldPrettyPrint = this.shouldPrettyPrint;
+      widget.ruleSet = ruleSet;
+    }
 
     if (ruleSet === null) {
       this.hsplit.setAttribute('sidebar-visibility', 'hidden');
@@ -310,6 +322,11 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
     }
   }
 
+  private getRuleSet(): Protocol.Preload.RuleSet|null {
+    const id = this.focusedRuleSetId;
+    return id === null ? null : this.model.getRuleSetById(id);
+  }
+
   render(): void {
     // Update rule sets grid
     const countsByRuleSetId = this.model.getPreloadCountsByRuleSetId();
@@ -320,14 +337,18 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
         preloadsStatusSummary: PreloadingUIUtils.preloadsStatusSummary(countsByStatus),
       };
     });
-    this.ruleSetGrid.update({rows: ruleSetRows, pageURL: pageURL()});
+    this.ruleSetGrid.data = {rows: ruleSetRows, pageURL: pageURL()};
     this.contentElement.classList.toggle('empty', ruleSetRows.length === 0);
     this.updateRuleSetDetails();
+
+    const container = this.ruleSetGridContainerRef.value;
+    if (container && this.ruleSetGrid.element.parentElement !== container) {
+      this.ruleSetGrid.show(container);
+    }
   }
 
-  private onRuleSetsGridCellFocused(event: Event): void {
-    const focusedEvent = event as CustomEvent<Protocol.Preload.RuleSetId>;
-    this.focusedRuleSetId = focusedEvent.detail;
+  private onRuleSetsGridCellFocused(event: Common.EventTarget.EventTargetEvent<Protocol.Preload.RuleSetId>): void {
+    this.focusedRuleSetId = event.data;
     this.render();
   }
 
@@ -338,10 +359,6 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
   getRuleSetGridForTest(): PreloadingComponents.RuleSetGrid.RuleSetGrid {
     return this.ruleSetGrid;
   }
-
-  getRuleSetDetailsForTest(): PreloadingComponents.RuleSetDetailsView.RuleSetDetailsView {
-    return this.ruleSetDetails;
-  }
 }
 
 export class PreloadingAttemptView extends UI.Widget.VBox {
@@ -351,7 +368,7 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
   private focusedPreloadingAttemptId: SDK.PreloadingModel.PreloadingAttemptId|null = null;
 
   private readonly warningsContainer: HTMLDivElement;
-  private readonly warningsView = new PreloadingWarningsView();
+  private readonly warningsView = new PreloadingComponents.PreloadingDisabledInfobar.PreloadingDisabledInfobar();
   private readonly preloadingGrid = new PreloadingComponents.PreloadingGrid.PreloadingGrid();
   private readonly preloadingDetails =
       new PreloadingComponents.PreloadingDetailsReportView.PreloadingDetailsReportView();
@@ -370,8 +387,9 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
         SDK.PreloadingModel.PreloadingModel, SDK.PreloadingModel.Events.MODEL_UPDATED, this.render, this,
         {scoped: true});
     SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.PreloadingModel.PreloadingModel, SDK.PreloadingModel.Events.WARNINGS_UPDATED,
-        this.warningsView.onWarningsUpdated, this.warningsView, {scoped: true});
+        SDK.PreloadingModel.PreloadingModel, SDK.PreloadingModel.Events.WARNINGS_UPDATED, e => {
+          Object.assign(this.warningsView, e.data);
+        }, this, {scoped: true});
 
     // this (VBox)
     //   +- warningsContainer
@@ -515,7 +533,7 @@ export class PreloadingSummaryView extends UI.Widget.VBox {
   private model: SDK.PreloadingModel.PreloadingModel;
 
   private readonly warningsContainer: HTMLDivElement;
-  private readonly warningsView = new PreloadingWarningsView();
+  private readonly warningsView = new PreloadingComponents.PreloadingDisabledInfobar.PreloadingDisabledInfobar();
   private readonly usedPreloading = new PreloadingComponents.UsedPreloadingView.UsedPreloadingView();
 
   constructor(model: SDK.PreloadingModel.PreloadingModel) {
@@ -531,8 +549,9 @@ export class PreloadingSummaryView extends UI.Widget.VBox {
         SDK.PreloadingModel.PreloadingModel, SDK.PreloadingModel.Events.MODEL_UPDATED, this.render, this,
         {scoped: true});
     SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.PreloadingModel.PreloadingModel, SDK.PreloadingModel.Events.WARNINGS_UPDATED,
-        this.warningsView.onWarningsUpdated, this.warningsView, {scoped: true});
+        SDK.PreloadingModel.PreloadingModel, SDK.PreloadingModel.Events.WARNINGS_UPDATED, e => {
+          Object.assign(this.warningsView, e.data);
+        }, this, {scoped: true});
 
     this.warningsContainer = document.createElement('div');
     this.warningsContainer.classList.add('flex-none');
@@ -715,21 +734,3 @@ class PreloadingRuleSetSelector implements
       _toElement: Element|null): void {
   }
 }
-
-export class PreloadingWarningsView extends UI.Widget.VBox {
-  private readonly infobar = new PreloadingComponents.PreloadingDisabledInfobar.PreloadingDisabledInfobar();
-
-  constructor() {
-    super();
-    this.registerRequiredCSS(emptyWidgetStyles);
-  }
-
-  override wasShown(): void {
-    super.wasShown();
-    this.contentElement.append(this.infobar);
-  }
-
-  onWarningsUpdated(args: Common.EventTarget.EventTargetEvent<Protocol.Preload.PreloadEnabledStateUpdatedEvent>): void {
-    this.infobar.data = args.data;
-  }
-}

package/front_end/panels/application/preloading/components/MismatchedPreloadingGrid.ts

@@ -1,7 +1,6 @@
 // Copyright 2023 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 '../../../../ui/legacy/components/data_grid/data_grid.js';
 
@@ -10,8 +9,7 @@ import type * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
 import * as Diff from '../../../../third_party/diff/diff.js';
-import * as LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import type * as UI from '../../../../ui/legacy/legacy.js';
+import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
 import {capitalizedAction} from './PreloadingString.js';
@@ -88,6 +86,70 @@ class PreloadingUIUtils {
   }
 }
 
+export interface ViewInput {
+  rows: MismatchedPreloadingGridRow[];
+  pageURL: string;
+}
+
+export const DEFAULT_VIEW = (input: ViewInput, _output: Record<string, never>, target: HTMLElement): void => {
+  // clang-format off
+  render(html`
+    <devtools-data-grid striped inline>
+      <table>
+        <tr>
+          <th id="url" weight="40" sortable>
+            ${i18nString(UIStrings.url)}
+          </th>
+          <th id="action" weight="15" sortable>
+            ${i18nString(UIStrings.action)}
+          </th>
+          <th id="status" weight="15" sortable>
+            ${i18nString(UIStrings.status)}
+          </th>
+        </tr>
+        ${input.rows
+            .map(row => ({
+              row,
+              diffScore: Diff.Diff.DiffWrapper.characterScore(row.url, input.pageURL),
+            }))
+            .sort((a, b) => b.diffScore - a.diffScore)
+            .map(({row}) => html`
+              <tr>
+                <td>
+                  <div>${charDiff(row.url, input.pageURL).map(diffOp => {
+                      const s = diffOp[1];
+                      switch (diffOp[0]) {
+                        case Diff.Diff.Operation.Equal:
+                          return html`<span>${s}</span>`;
+                        case Diff.Diff.Operation.Insert:
+                          return html`<span style=${styleMap({
+                            color: 'var(--sys-color-green)',
+                            'text-decoration': 'line-through'
+                          })}
+                              >${s}</span>`;
+                        case Diff.Diff.Operation.Delete:
+                          return html`<span style=${styleMap({color: 'var(--sys-color-error)'})}>${s}</span>`;
+                        case Diff.Diff.Operation.Edit:
+                          return html`<span style=${styleMap({
+                            color: 'var(--sys-color-green',
+                            'text-decoration': 'line-through'
+                          })}
+                          >${s}</span>`;
+                        default:
+                          throw new Error('unreachable');
+                      }
+                    })}
+                  </div>
+                </td>
+                <td>${capitalizedAction(row.action)}</td>
+                <td>${PreloadingUIUtils.status(row.status)}</td>
+              </tr>
+            `)}
+      </table>
+    </devtools-data-grid>`, target);
+  // clang-format on
+};
+
 export interface MismatchedPreloadingGridRow {
   action: Protocol.Preload.SpeculationAction;
   url: string;
@@ -99,90 +161,33 @@ export interface MismatchedPreloadingGridData {
   rows: MismatchedPreloadingGridRow[];
 }
 
+type ViewFunction = typeof DEFAULT_VIEW;
+
 /** Grid component to show prerendering attempts. **/
-export class MismatchedPreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+export class MismatchedPreloadingGrid extends UI.Widget.Widget {
   #data: MismatchedPreloadingGridData|null = null;
+  #view: ViewFunction;
 
-  connectedCallback(): void {
-    this.#render();
+  constructor(element?: HTMLElement, view: typeof DEFAULT_VIEW = DEFAULT_VIEW) {
+    super(element, {classes: ['devtools-resources-mismatched-preloading-grid'], useShadowDom: true});
+    this.#view = view;
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
   }
 
   set data(data: MismatchedPreloadingGridData) {
     this.#data = data;
-    this.#render();
+    this.requestUpdate();
   }
 
-  #render(): void {
+  override performUpdate(): void {
     if (!this.#data) {
       return;
     }
 
-    const {pageURL} = this.#data;
-
-    render(
-        html`<devtools-data-grid striped inline>
-          <table>
-            <tr>
-              <th id="url" weight="40" sortable>
-                ${i18nString(UIStrings.url)}
-              </th>
-              <th id="action" weight="15" sortable>
-                ${i18nString(UIStrings.action)}
-              </th>
-              <th id="status" weight="15" sortable>
-                ${i18nString(UIStrings.status)}
-              </th>
-            </tr>
-            ${
-            this.#data.rows
-                .map(row => ({
-                       row,
-                       diffScore: Diff.Diff.DiffWrapper.characterScore(row.url, pageURL),
-                     }))
-                .sort((a, b) => b.diffScore - a.diffScore)
-                .map(({row}) => html`
-                <tr>
-                  <td>
-                    <div>${charDiff(row.url, pageURL).map(diffOp => {
-                       const s = diffOp[1];
-                       switch (diffOp[0]) {
-                         case Diff.Diff.Operation.Equal:
-                           return html`<span>${s}</span>`;
-                         case Diff.Diff.Operation.Insert:
-                           return html`<span style=${styleMap({
-                             color: 'var(--sys-color-green)',
-                             'text-decoration': 'line-through'
-                           })}
-                               >${s}</span>`;
-                         case Diff.Diff.Operation.Delete:
-                           return html`<span style=${styleMap({color: 'var(--sys-color-error)'})}>${s}</span>`;
-                         case Diff.Diff.Operation.Edit:
-                           return html`<span style=${styleMap({
-                             color: 'var(--sys-color-green',
-                             'text-decoration': 'line-through'
-                           })}
-                            >${s}</span>`;
-                         default:
-                           throw new Error('unreachable');
-                       }
-                     })}
-                    </div>
-                  </td>
-                  <td>${capitalizedAction(row.action)}</td>
-                  <td>${PreloadingUIUtils.status(row.status)}</td>
-                </tr>
-              `)}
-          </table>
-        </devtools-data-grid>`,
-        this.#shadow, {host: this});
-  }
-}
-
-customElements.define('devtools-resources-mismatched-preloading-grid', MismatchedPreloadingGrid);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-resources-mismatched-preloading-grid': MismatchedPreloadingGrid;
+    this.#view(this.#data, {}, this.contentElement);
   }
 }