chrome-devtools-frontend 1.0.1550444 → 1.0.1553956

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

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

@@ -1,25 +1,19 @@
 // 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 * as i18n from '../../../../core/i18n/i18n.js';
-import {assertNotNullOrUndefined} from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
 import * as Formatter from '../../../../models/formatter/formatter.js';
 import * as CodeMirror from '../../../../third_party/codemirror.next/codemirror.next.js';
 import * as CodeHighlighter from '../../../../ui/components/code_highlighter/code_highlighter.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 TextEditor from '../../../../ui/components/text_editor/text_editor.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
-import * as Lit from '../../../../ui/lit/lit.js';
+import {html, nothing, render} from '../../../../ui/lit/lit.js';
 
 import ruleSetDetailsViewStyles from './RuleSetDetailsView.css.js';
 
-const {html} = Lit;
-
 const UIStrings = {
   /**
    * @description Text in RuleSetDetailsView of the Application panel if no element is selected. An element here is an item in a
@@ -41,118 +35,105 @@ type RuleSet = Protocol.Preload.RuleSet;
 
 const codeMirrorJsonType = await CodeHighlighter.CodeHighlighter.languageFromMIME('application/json');
 
-export type RuleSetDetailsViewData = RuleSet|null;
-
-export class RuleSetDetailsView extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #data: RuleSetDetailsViewData = null;
-  #shouldPrettyPrint = true;
-  #editorState?: CodeMirror.EditorState;
-
-  set data(data: RuleSetDetailsViewData) {
-    this.#data = data;
-    void this.#render();
-  }
-
-  set shouldPrettyPrint(shouldPrettyPrint: boolean) {
-    this.#shouldPrettyPrint = shouldPrettyPrint;
-  }
+export interface ViewInput {
+  url: string;
+  errorMessage?: string;
+  editorState: CodeMirror.EditorState;
+  sourceText: string;
+}
 
-  async #render(): Promise<void> {
-    await RenderCoordinator.write('RuleSetDetailsView render', async () => {
-      if (this.#data === null) {
-        Lit.render(
-            html`
-          <style>${ruleSetDetailsViewStyles}</style>
-          <style>${UI.inspectorCommonStyles}</style>
+export const DEFAULT_VIEW = (input: ViewInput|null, _output: object, target: HTMLElement): void => {
+  // clang-format off
+  render(html`
+    <style>${ruleSetDetailsViewStyles}</style>
+    <style>${UI.inspectorCommonStyles}</style>
+    ${input
+      ? html`
+        <div class="content">
+          <div class="ruleset-header" id="ruleset-url">${input.url}</div>
+          ${input.errorMessage ? html`
+            <div class="ruleset-header">
+              <devtools-icon name="cross-circle" class="medium">
+              </devtools-icon>
+              <span id="error-message-text">${input.errorMessage}</span>
+            </div>
+          ` : nothing}
+        </div>
+        <div class="text-ellipsis">
+          <devtools-text-editor .style.flexGrow=${'1'} .state=${input.editorState}></devtools-text-editor>
+        </div>`
+      : html`
           <div class="placeholder">
             <div class="empty-state">
               <span class="empty-state-header">${i18nString(UIStrings.noElementSelected)}</span>
               <span class="empty-state-description">${i18nString(UIStrings.selectAnElementForMoreDetails)}</span>
             </div>
-          </div>
-      `,
-            this.#shadow, {host: this});
-        // clang-format on
-        return;
-      }
-
-      const sourceText = await this.#getSourceText();
-
-      // Disabled until https://crbug.com/1079231 is fixed.
-      // clang-format off
-      Lit.render(html`
-        <style>${ruleSetDetailsViewStyles}</style>
-        <style>${UI.inspectorCommonStyles}</style>
-        <div class="content">
-          <div class="ruleset-header" id="ruleset-url">${this.#data?.url || SDK.TargetManager.TargetManager.instance().inspectedURL()}</div>
-          ${this.#maybeError()}
-        </div>
-        <div class="text-ellipsis">
-          ${this.#renderSource(sourceText)}
-        </div>
-      `, this.#shadow, {host: this});
-      // clang-format on
-    });
+          </div>`
+    }
+    `, target);
+  // clang-format on
+};
+
+export class RuleSetDetailsView extends UI.Widget.VBox {
+  readonly #view: typeof DEFAULT_VIEW;
+  #ruleSet: RuleSet|null = null;
+  #shouldPrettyPrint = true;
+
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
   }
 
-  // TODO(https://crbug.com/1425354): Support i18n.
-  #maybeError(): Lit.LitTemplate {
-    assertNotNullOrUndefined(this.#data);
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
+  }
 
-    if (this.#data.errorMessage === undefined) {
-      return Lit.nothing;
-    }
+  set ruleSet(ruleSet: RuleSet|null) {
+    this.#ruleSet = ruleSet;
+    this.requestUpdate();
+  }
 
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    return html`
-      <div class="ruleset-header">
-        <devtools-icon name="cross-circle" class="medium">
-        </devtools-icon>
-        <span id="error-message-text">${this.#data.errorMessage}</span>
-      </div>
-    `;
-    // clang-format on
+  set shouldPrettyPrint(shouldPrettyPrint: boolean) {
+    this.#shouldPrettyPrint = shouldPrettyPrint;
+    this.requestUpdate();
   }
 
-  #renderSource(sourceText: string): Lit.LitTemplate {
-    this.#editorState = CodeMirror.EditorState.create({
+  override async performUpdate(): Promise<void> {
+    if (!this.#ruleSet) {
+      this.#view(null, {}, this.contentElement);
+      return;
+    }
+
+    const sourceText = await this.#getSourceText();
+    const editorState = CodeMirror.EditorState.create({
       doc: sourceText,
       extensions: [
-        TextEditor.Config.baseConfiguration(sourceText || ''),
+        TextEditor.Config.baseConfiguration(sourceText),
         CodeMirror.lineNumbers(),
         CodeMirror.EditorState.readOnly.of(true),
         codeMirrorJsonType as CodeMirror.Extension,
         CodeMirror.syntaxHighlighting(CodeHighlighter.CodeHighlighter.highlightStyle),
       ],
     });
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    // TODO(https://crbug.com/1425354): Add Raw button.
-    return html`
-      <devtools-text-editor .style.flexGrow=${'1'} .state=${
-        this.#editorState
-      }></devtools-text-editor>
-    `;
-    // clang-format on
+
+    this.#view(
+        {
+          url: this.#ruleSet.url || SDK.TargetManager.TargetManager.instance().inspectedURL(),
+          errorMessage: this.#ruleSet.errorMessage,
+          editorState,
+          sourceText,
+        },
+        {}, this.contentElement);
   }
 
   async #getSourceText(): Promise<string> {
-    if (this.#shouldPrettyPrint && this.#data?.sourceText !== undefined) {
+    if (this.#shouldPrettyPrint && this.#ruleSet?.sourceText !== undefined) {
       const formattedResult =
-          await Formatter.ScriptFormatter.formatScriptContent('application/json', this.#data.sourceText);
+          await Formatter.ScriptFormatter.formatScriptContent('application/json', this.#ruleSet.sourceText);
       return formattedResult.formattedContent;
     }
 
-    return this.#data?.sourceText || '';
-  }
-}
-
-customElements.define('devtools-resources-rulesets-details-view', RuleSetDetailsView);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-resources-rulesets-details-view': RuleSetDetailsView;
+    return this.#ruleSet?.sourceText || '';
   }
 }