chrome-devtools-frontend 1.0.1550444 → 1.0.1555174

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

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

@@ -1,26 +1,21 @@
 // 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/components/report_view/report_view.js';
+import '../../../../ui/kit/kit.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
-import type * as Platform from '../../../../core/platform/platform.js';
-import type * as Protocol from '../../../../generated/protocol.js';
+import * as Platform from '../../../../core/platform/platform.js';
 import * as Buttons from '../../../../ui/components/buttons/buttons.js';
-import * as ChromeLink from '../../../../ui/components/chrome_link/chrome_link.js';
 import * as Dialogs from '../../../../ui/components/dialogs/dialogs.js';
-import * as LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import * as RenderCoordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
-import * as uiI18n from '../../../../ui/i18n/i18n.js';
-import type * as UI from '../../../../ui/legacy/legacy.js';
-import * as Lit from '../../../../ui/lit/lit.js';
+import * as UI from '../../../../ui/legacy/legacy.js';
+import {html, i18nTemplate, type LitTemplate, nothing, render} from '../../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
 
 import preloadingDisabledInfobarStyles from './preloadingDisabledInfobar.css.js';
 
-const {html} = Lit;
+const {urlString} = Platform.DevToolsPath;
 
 const UIStrings = {
   /**
@@ -100,154 +95,195 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const LINK = 'https://developer.chrome.com/blog/prerender-pages/';
 
-export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #data: Protocol.Preload.PreloadEnabledStateUpdatedEvent = {
-    disabledByPreference: false,
-    disabledByDataSaver: false,
-    disabledByBatterySaver: false,
-    disabledByHoldbackPrefetchSpeculationRules: false,
-    disabledByHoldbackPrerenderSpeculationRules: false,
-  };
-
-  connectedCallback(): void {
-    void this.#render();
-  }
+export interface ViewInput {
+  header: Platform.UIString.LocalizedString|null;
+  warnings: Array<{
+    key: Platform.UIString.LocalizedString,
+    valueId: string,
+    placeholders?: Record<string, {
+                  title: Platform.UIString.LocalizedString,
+                  href: Platform.DevToolsPath.UrlString,
+                }>,
+  }>;
+}
+
+type ViewOutput = unknown;
+
+export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement|DocumentFragment) => void;
 
-  set data(data: Protocol.Preload.PreloadEnabledStateUpdatedEvent) {
-    this.#data = data;
-    void this.#render();
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  let template: LitTemplate = nothing;
+  if (input.header !== null) {
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    template = html`
+        <style>${preloadingDisabledInfobarStyles}</style>
+        <div id="container">
+          <span id="header">${input.header}</span>
+          <devtools-button-dialog .data=${{
+                                    iconName: 'info',
+                                    variant: Buttons.Button.Variant.ICON,
+                                    closeButton: true,
+                                    position: Dialogs.Dialog.DialogVerticalPosition.AUTO,
+                                    horizontalAlignment: Dialogs.Dialog.DialogHorizontalAlignment.AUTO,
+                                    closeOnESC: true,
+                                    closeOnScroll: false,
+                                    dialogTitle: i18nString(UIStrings.titleReasonsPreventingPreloading),
+                                  } as Dialogs.ButtonDialog.ButtonDialogData}
+                                  jslog=${VisualLogging.dialog('preloading-disabled').track({resize: true, keydown: 'Escape'})}>
+            <div id="contents">
+              <devtools-report>
+                ${input.warnings.map(({key, valueId, placeholders = {}}) => {
+                  const value = i18nTemplate(
+                      str_, valueId,
+                      Object.fromEntries(Object.entries(placeholders).map(
+                          ([key, {title, href}]) =>
+                              [key, html`<devtools-link href=${href}>${title}</devtools-link>`])));
+                  return html`
+                      <div class="key">${key}</div>
+                      <div class="value">${value}</div>
+                    `;
+                })}
+              </devtools-report>
+              <div id="footer">
+                <devtools-link href=${LINK} jslogcontext="learn-more">
+                  ${i18nString(UIStrings.footerLearnMore)}
+                </devtools-link>
+              </div>
+            </div>
+          </devtools-button-dialog>
+        </div>`;
+    // clang-format on
   }
+  render(template, target);
+};
+
+export class PreloadingDisabledInfobar extends UI.Widget.VBox {
+  #view: View;
+  #disabledByPreference = false;
+  #disabledByDataSaver = false;
+  #disabledByBatterySaver = false;
+  #disabledByHoldbackPrefetchSpeculationRules = false;
+  #disabledByHoldbackPrerenderSpeculationRules = false;
 
-  async #render(): Promise<void> {
-    await RenderCoordinator.write('PreloadingDisabledInfobar render', () => {
-      Lit.render(this.#renderTemplate(), this.#shadow, {host: this});
-    });
+  constructor(view: View = DEFAULT_VIEW) {
+    super({useShadowDom: true});
+    this.#view = view;
   }
 
-  #renderTemplate(): Lit.LitTemplate {
-    const forceEnabled =
-        this.#data.disabledByHoldbackPrefetchSpeculationRules || this.#data.disabledByHoldbackPrerenderSpeculationRules;
-    const disabled =
-        this.#data.disabledByPreference || this.#data.disabledByDataSaver || this.#data.disabledByBatterySaver;
+  get disabledByPreference(): boolean {
+    return this.#disabledByPreference;
+  }
 
-    let header;
-    if (disabled) {
-      header = i18nString(UIStrings.infobarPreloadingIsDisabled);
-    } else if (forceEnabled) {
-      header = i18nString(UIStrings.infobarPreloadingIsForceEnabled);
-    } else {
-      return Lit.nothing;
+  set disabledByPreference(value: boolean) {
+    if (this.#disabledByPreference !== value) {
+      this.#disabledByPreference = value;
+      this.requestUpdate();
     }
-
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    return html`
-      <style>${preloadingDisabledInfobarStyles}</style>
-      <div id='container'>
-        <span id='header'>
-          ${header}
-        </span>
-
-        <devtools-button-dialog
-          .data=${{
-            iconName: 'info',
-            variant: Buttons.Button.Variant.ICON,
-            closeButton: true,
-            position: Dialogs.Dialog.DialogVerticalPosition.AUTO,
-            horizontalAlignment: Dialogs.Dialog.DialogHorizontalAlignment.AUTO,
-            closeOnESC: true,
-            closeOnScroll: false,
-            dialogTitle: i18nString(UIStrings.titleReasonsPreventingPreloading),
-          } as Dialogs.ButtonDialog.ButtonDialogData}
-          jslog=${VisualLogging.dialog('preloading-disabled').track({resize: true, keydown: 'Escape'})}
-        >
-          ${this.#dialogContents()}
-        </devtools-button-dialog>
-      </div>
-    `;
-    // clang-format on
   }
 
-  #dialogContents(): Lit.LitTemplate {
-    return html`
-      <div id='contents'>
-        <devtools-report>
-          ${this.#maybeDisableByPreference()}
-          ${this.#maybeDisableByDataSaver()}
-          ${this.#maybeDisableByBatterySaver()}
-          ${this.#maybeDisableByHoldbackPrefetchSpeculationRules()}
-          ${this.#maybeDisableByHoldbackPrerenderSpeculationRules()}
-        </devtools-report>
-        <div id='footer'>
-          <x-link class="devtools-link" tabindex="0" href=${LINK} 
-          jslog=${VisualLogging.link().track({click: true, keydown: 'Enter|Space'}).context('learn-more')}
-          >${i18nString(UIStrings.footerLearnMore)}</x-link>
-          <x-link class="icon-link devtools-link" tabindex="0" href=${LINK}></x-link>
-        </div>
-      </div>
-    `;
+  get disabledByDataSaver(): boolean {
+    return this.#disabledByDataSaver;
   }
 
-  #maybeKeyValue(shouldShow: boolean, header: string, description: string|Element): Lit.LitTemplate {
-    if (!shouldShow) {
-      return Lit.nothing;
+  set disabledByDataSaver(value: boolean) {
+    if (this.#disabledByDataSaver !== value) {
+      this.#disabledByDataSaver = value;
+      this.requestUpdate();
     }
+  }
 
-    return html`
-      <div class='key'>
-        ${header}
-      </div>
-      <div class='value'>
-        ${description}
-      </div>
-    `;
+  get disabledByBatterySaver(): boolean {
+    return this.#disabledByBatterySaver;
   }
 
-  #maybeDisableByPreference(): Lit.LitTemplate {
-    const preloadingSettingLink = new ChromeLink.ChromeLink.ChromeLink();
-    preloadingSettingLink.href = 'chrome://settings/performance' as Platform.DevToolsPath.UrlString;
-    preloadingSettingLink.textContent = i18nString(UIStrings.preloadingPagesSettings);
-    const extensionsSettingLink = new ChromeLink.ChromeLink.ChromeLink();
-    extensionsSettingLink.href = 'chrome://extensions' as Platform.DevToolsPath.UrlString;
-    extensionsSettingLink.textContent = i18nString(UIStrings.extensionsSettings);
-    const description = uiI18n.getFormatLocalizedString(
-        str_, UIStrings.descriptionDisabledByPreference, {PH1: preloadingSettingLink, PH2: extensionsSettingLink});
-    return this.#maybeKeyValue(
-        this.#data.disabledByPreference, i18nString(UIStrings.headerDisabledByPreference), description);
+  set disabledByBatterySaver(value: boolean) {
+    if (this.#disabledByBatterySaver !== value) {
+      this.#disabledByBatterySaver = value;
+      this.requestUpdate();
+    }
   }
 
-  #maybeDisableByDataSaver(): Lit.LitTemplate {
-    return this.#maybeKeyValue(
-        this.#data.disabledByDataSaver, i18nString(UIStrings.headerDisabledByDataSaver),
-        i18nString(UIStrings.descriptionDisabledByDataSaver));
+  get disabledByHoldbackPrefetchSpeculationRules(): boolean {
+    return this.#disabledByHoldbackPrefetchSpeculationRules;
   }
 
-  #maybeDisableByBatterySaver(): Lit.LitTemplate {
-    return this.#maybeKeyValue(
-        this.#data.disabledByBatterySaver, i18nString(UIStrings.headerDisabledByBatterySaver),
-        i18nString(UIStrings.descriptionDisabledByBatterySaver));
+  set disabledByHoldbackPrefetchSpeculationRules(value: boolean) {
+    if (this.#disabledByHoldbackPrefetchSpeculationRules !== value) {
+      this.#disabledByHoldbackPrefetchSpeculationRules = value;
+      this.requestUpdate();
+    }
   }
 
-  #maybeDisableByHoldbackPrefetchSpeculationRules(): Lit.LitTemplate {
-    return this.#maybeKeyValue(
-        this.#data.disabledByHoldbackPrefetchSpeculationRules,
-        i18nString(UIStrings.headerDisabledByHoldbackPrefetchSpeculationRules),
-        i18nString(UIStrings.descriptionDisabledByHoldbackPrefetchSpeculationRules));
+  get disabledByHoldbackPrerenderSpeculationRules(): boolean {
+    return this.#disabledByHoldbackPrerenderSpeculationRules;
   }
 
-  #maybeDisableByHoldbackPrerenderSpeculationRules(): Lit.LitTemplate {
-    return this.#maybeKeyValue(
-        this.#data.disabledByHoldbackPrerenderSpeculationRules,
-        i18nString(UIStrings.headerDisabledByHoldbackPrerenderSpeculationRules),
-        i18nString(UIStrings.descriptionDisabledByHoldbackPrerenderSpeculationRules));
+  set disabledByHoldbackPrerenderSpeculationRules(value: boolean) {
+    if (this.#disabledByHoldbackPrerenderSpeculationRules !== value) {
+      this.#disabledByHoldbackPrerenderSpeculationRules = value;
+      this.requestUpdate();
+    }
   }
-}
 
-customElements.define('devtools-resources-preloading-disabled-infobar', PreloadingDisabledInfobar);
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
+  }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-resources-preloading-disabled-infobar': PreloadingDisabledInfobar;
+  override performUpdate(): void {
+    let header: Platform.UIString.LocalizedString|null = null;
+    if (this.#disabledByPreference || this.#disabledByDataSaver || this.#disabledByBatterySaver) {
+      header = i18nString(UIStrings.infobarPreloadingIsDisabled);
+    } else if (this.#disabledByHoldbackPrefetchSpeculationRules || this.#disabledByHoldbackPrerenderSpeculationRules) {
+      header = i18nString(UIStrings.infobarPreloadingIsForceEnabled);
+    }
+    const warnings = [];
+    if (this.#disabledByPreference) {
+      warnings.push({
+        key: i18nString(UIStrings.headerDisabledByPreference),
+        valueId: UIStrings.descriptionDisabledByPreference,
+        placeholders: {
+          PH1: {
+            title: i18nString(UIStrings.preloadingPagesSettings),
+            href: urlString`chrome://settings/performance`,
+          },
+          PH2: {
+            title: i18nString(UIStrings.extensionsSettings),
+            href: urlString`chrome://extensions`,
+          },
+        },
+      });
+    }
+    if (this.#disabledByDataSaver) {
+      warnings.push({
+        key: i18nString(UIStrings.headerDisabledByDataSaver),
+        valueId: UIStrings.descriptionDisabledByDataSaver,
+      });
+    }
+    if (this.#disabledByBatterySaver) {
+      warnings.push({
+        key: i18nString(UIStrings.headerDisabledByBatterySaver),
+        valueId: UIStrings.descriptionDisabledByBatterySaver,
+      });
+    }
+    if (this.#disabledByHoldbackPrefetchSpeculationRules) {
+      warnings.push({
+        key: i18nString(UIStrings.headerDisabledByHoldbackPrefetchSpeculationRules),
+        valueId: UIStrings.descriptionDisabledByHoldbackPrefetchSpeculationRules,
+      });
+    }
+    if (this.#disabledByHoldbackPrerenderSpeculationRules) {
+      warnings.push({
+        key: i18nString(UIStrings.headerDisabledByHoldbackPrerenderSpeculationRules),
+        valueId: UIStrings.descriptionDisabledByHoldbackPrerenderSpeculationRules,
+      });
+    }
+    const input: ViewInput = {
+      header,
+      warnings,
+    };
+    const output: ViewOutput = undefined;
+    this.#view(input, output, this.contentElement);
   }
 }