chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

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);
   }
 }