chrome-devtools-frontend 1.0.1548870 → 1.0.1549484

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

@@ -1,7 +1,6 @@
 // Copyright 2022 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/icon_button/icon_button.js';
 
@@ -12,13 +11,18 @@ import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Input from '../../../ui/components/input/input.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 {
+  html,
+  i18nTemplate as unboundI18nTemplate,
+  type LitTemplate,
+  nothing,
+  render,
+  type TemplateResult
+} from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import protocolHandlersViewStyles from './protocolHandlersView.css.js';
 
-const {html} = Lit;
-
 const PROTOCOL_DOCUMENT_URL = 'https://web.dev/url-protocol-handler/';
 const UIStrings = {
   /**
@@ -66,6 +70,50 @@ const UIStrings = {
 
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/ProtocolHandlersView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const i18nTemplate = unboundI18nTemplate.bind(undefined, str_);
+
+function renderStatusMessage(
+    protocolHandlers: readonly ProtocolHandler[], manifestLink: Platform.DevToolsPath.UrlString): TemplateResult {
+  const manifestInTextLink =
+      UI.XLink.XLink.create(manifestLink, i18nString(UIStrings.manifest), undefined, undefined, 'manifest');
+  const statusString = protocolHandlers.length > 0 ? UIStrings.protocolDetected : UIStrings.protocolNotDetected;
+  // clang-format off
+  return html`
+    <div class="protocol-handlers-row status">
+      <devtools-icon class="inline-icon"
+                     name=${protocolHandlers.length > 0 ? 'check-circle' : 'info'}>
+      </devtools-icon>
+      ${uiI18n.getFormatLocalizedString(str_, statusString, {PH1: manifestInTextLink })}
+    </div>`;
+  // clang-format on
+}
+
+function renderProtocolTest(
+    protocolHandlers: readonly ProtocolHandler[], queryInputState: string,
+    protocolSelectHandler: (evt: HTMLSelectElementEvent) => void,
+    queryInputChangeHandler: (evt: HTMLInputElementEvent) => void, testProtocolClickHandler: () => void): LitTemplate {
+  if (protocolHandlers.length === 0) {
+    return nothing;
+  }
+  // clang-format off
+  return html`
+    <div class="protocol-handlers-row">
+      <select class="protocol-select" @change=${protocolSelectHandler}
+              aria-label=${i18nString(UIStrings.dropdownLabel)}>
+        ${protocolHandlers.filter(p => p.protocol).map(({protocol}) => html`
+          <option value=${protocol} jslog=${VisualLogging.item(protocol).track({click: true})}>
+            ${protocol}://
+          </option>`)}
+      </select>
+      <input .value=${queryInputState} class="devtools-text-input" type="text"
+             @change=${queryInputChangeHandler} aria-label=${i18nString(UIStrings.textboxLabel)}
+             placeholder=${i18nString(UIStrings.textboxPlaceholder)} />
+      <devtools-button .variant=${Buttons.Button.Variant.PRIMARY} @click=${testProtocolClickHandler}>
+        ${i18nString(UIStrings.testProtocol)}
+      </devtools-button>
+    </div>`;
+  // clang-format on
+}
 
 interface HTMLSelectElementEvent extends Event {
   target: HTMLSelectElement;
@@ -75,6 +123,38 @@ interface HTMLInputElementEvent extends Event {
   target: HTMLInputElement;
 }
 
+interface ViewInput {
+  protocolHandler: ProtocolHandler[];
+  manifestLink: Platform.DevToolsPath.UrlString;
+  queryInputState: string;
+  protocolSelectHandler: (evt: HTMLSelectElementEvent) => void;
+  queryInputChangeHandler: (evt: HTMLInputElementEvent) => void;
+  testProtocolClickHandler: () => void;
+}
+
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+const DEFAULT_VIEW: View = (input, _output, target) => {
+  // inspectorCommonStyles is used for the <select> styling that is used for the dropdown
+  // clang-format off
+  render(html`
+    <style>${protocolHandlersViewStyles}</style>
+    <style>${UI.inspectorCommonStyles}</style>
+    <style>${Input.textInputStyles}</style>
+    ${renderStatusMessage(input.protocolHandler, input.manifestLink)}
+    <div class="protocol-handlers-row">
+      ${i18nTemplate(UIStrings.needHelpReadOur, {PH1: html`
+        <x-link href=${PROTOCOL_DOCUMENT_URL} tabindex=0 class="devtools-link" jslog=${
+            VisualLogging.link('learn-more').track({click: true, keydown: 'Enter|Space'})}>
+          ${i18nString(UIStrings.protocolHandlerRegistrations)}
+        </x-link>`})}
+    </div>
+    ${renderProtocolTest(input.protocolHandler, input.queryInputState, input.protocolSelectHandler,
+                         input.queryInputChangeHandler, input.testProtocolClickHandler)}
+  `, target);
+  // clang-format on
+};
+
 export interface ProtocolHandler {
   protocol: string;
   url: string;
@@ -85,69 +165,39 @@ export interface ProtocolHandlersData {
   manifestLink: Platform.DevToolsPath.UrlString;
 }
 
-export class ProtocolHandlersView extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+export class ProtocolHandlersView extends UI.Widget.Widget {
   #protocolHandlers: ProtocolHandler[] = [];
   #manifestLink: Platform.DevToolsPath.UrlString = Platform.DevToolsPath.EmptyUrlString;
   #selectedProtocolState = '';
   #queryInputState = '';
+  #view: View;
 
-  set data(data: ProtocolHandlersData) {
-    const isNewManifest = this.#manifestLink !== data.manifestLink;
-    this.#protocolHandlers = data.protocolHandlers;
-    this.#manifestLink = data.manifestLink;
-    if (isNewManifest) {
-      this.#update();
-    }
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: false});
+    this.#view = view;
   }
 
-  #update(): void {
-    this.#queryInputState = '';
-    this.#selectedProtocolState = this.#protocolHandlers[0]?.protocol ?? '';
-    this.#render();
+  set protocolHandlers(protocolHandlers: ProtocolHandler[]) {
+    this.#protocolHandlers = protocolHandlers;
+    this.requestUpdate();
   }
 
-  #renderStatusMessage(): Lit.TemplateResult {
-    const manifestInTextLink =
-        UI.XLink.XLink.create(this.#manifestLink, i18nString(UIStrings.manifest), undefined, undefined, 'manifest');
-    const statusString = this.#protocolHandlers.length > 0 ? UIStrings.protocolDetected : UIStrings.protocolNotDetected;
-    // clang-format off
-    return html`
-    <div class="protocol-handlers-row status">
-            <devtools-icon class="inline-icon"
-                           name=${this.#protocolHandlers.length > 0 ? 'check-circle' : 'info'}>
-            </devtools-icon>
-            ${uiI18n.getFormatLocalizedString(str_, statusString, {
-      PH1: manifestInTextLink,
-    })}
-    </div>
-    `;
-    // clang-format on
+  get protocolHandlers(): ProtocolHandler[] {
+    return this.#protocolHandlers;
   }
 
-  #renderProtocolTest(): Lit.LitTemplate {
-    if (this.#protocolHandlers.length === 0) {
-      return Lit.nothing;
+  set manifestLink(manifestLink: Platform.DevToolsPath.UrlString) {
+    const isNewManifest = this.#manifestLink !== manifestLink;
+    this.#manifestLink = manifestLink;
+    if (isNewManifest) {
+      this.#queryInputState = '';
+      this.#selectedProtocolState = this.#protocolHandlers[0]?.protocol ?? '';
     }
-    const protocolOptions =
-        this.#protocolHandlers.filter(p => p.protocol)
-            .map(p => html`<option value=${p.protocol} jslog=${VisualLogging.item(p.protocol).track({
-                   click: true,
-                 })}>${p.protocol}://</option>`);
-    return html`
-       <div class="protocol-handlers-row">
-        <select class="protocol-select" @change=${this.#handleProtocolSelect} aria-label=${
-        i18nString(UIStrings.dropdownLabel)}>
-           ${protocolOptions}
-        </select>
-        <input .value=${this.#queryInputState} class="devtools-text-input" type="text" @change=${
-        this.#handleQueryInputChange} aria-label=${i18nString(UIStrings.textboxLabel)}
-        placeholder=${i18nString(UIStrings.textboxPlaceholder)} />
-        <devtools-button .variant=${Buttons.Button.Variant.PRIMARY} @click=${this.#handleTestProtocolClick}>
-            ${i18nString(UIStrings.testProtocol)}
-        </devtools-button>
-        </div>
-      `;
+    this.requestUpdate();
+  }
+
+  get manifestLink(): Platform.DevToolsPath.UrlString {
+    return this.#manifestLink;
   }
 
   #handleProtocolSelect = (evt: HTMLSelectElementEvent): void => {
@@ -156,7 +206,7 @@ export class ProtocolHandlersView extends HTMLElement {
 
   #handleQueryInputChange = (evt: HTMLInputElementEvent): void => {
     this.#queryInputState = evt.target.value;
-    this.#render();
+    this.requestUpdate();
   };
 
   #handleTestProtocolClick = (): void => {
@@ -165,29 +215,16 @@ export class ProtocolHandlersView extends HTMLElement {
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.CaptureTestProtocolClicked);
   };
 
-  #render(): void {
-    const protocolDocLink = UI.XLink.XLink.create(
-        PROTOCOL_DOCUMENT_URL, i18nString(UIStrings.protocolHandlerRegistrations), undefined, undefined, 'learn-more');
-    // inspectorCommonStyles is used for the <select> styling that is used for the dropdown
-    // clang-format off
-    Lit.render(html`
-      <style>${protocolHandlersViewStyles}</style>
-      <style>${UI.inspectorCommonStyles}</style>
-      <style>${Input.textInputStyles}</style>
-      ${this.#renderStatusMessage()}
-      <div class="protocol-handlers-row">
-          ${uiI18n.getFormatLocalizedString(str_, UIStrings.needHelpReadOur, {PH1: protocolDocLink})}
-      </div>
-      ${this.#renderProtocolTest()}
-    `, this.#shadow, {host: this});
-    // clang-format on
-  }
-}
-
-customElements.define('devtools-protocol-handlers-view', ProtocolHandlersView);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-protocol-handlers-view': ProtocolHandlersView;
+  override performUpdate(): void {
+    this.#view(
+        {
+          protocolHandler: this.#protocolHandlers,
+          manifestLink: this.#manifestLink,
+          queryInputState: this.#queryInputState,
+          protocolSelectHandler: this.#handleProtocolSelect,
+          queryInputChangeHandler: this.#handleQueryInputChange,
+          testProtocolClickHandler: this.#handleTestProtocolClick,
+        },
+        undefined, this.contentElement);
   }
 }

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

@@ -1,61 +1,67 @@
 // 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 type * as SDK from '../../../core/sdk/sdk.js';
-import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import * as Lit from '../../../ui/lit/lit.js';
+import * as UI from '../../../ui/legacy/legacy.js';
+import {html, render, type TemplateResult} from '../../../ui/lit/lit.js';
 
 import serviceWorkerRouterViewStyles from './serviceWorkerRouterView.css.js';
 
-const {html, render} = Lit;
+function renderRouterRule(rule: SDK.ServiceWorkerManager.ServiceWorkerRouterRule): TemplateResult {
+  return html`
+    <li class="router-rule">
+      <div class="rule-id">Rule ${rule.id}</div>
+      <ul class="item">
+        <li class="condition">
+          <div class="rule-type">Condition</div>
+          <div class="rule-value">${rule.condition}</div>
+        </li>
+        <li class="source">
+          <div class="rule-type">Source</div>
+          <div class="rule-value">${rule.source}</div>
+        </li>
+      </ul>
+    </li>`;
+}
+
+interface ViewInterface {
+  rules: SDK.ServiceWorkerManager.ServiceWorkerRouterRule[];
+}
 
-export class ServiceWorkerRouterView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+type View = (input: ViewInterface, output: undefined, target: HTMLElement) => void;
+
+const DEFAULT_VIEW: View = (input, _output, target) => {
+  // clang-format off
+  render(html`
+    <style>${serviceWorkerRouterViewStyles}</style>
+    <ul class="router-rules">
+      ${input.rules.map(renderRouterRule)}
+    </ul>`, target);
+  // clang-format on
+};
+
+export class ServiceWorkerRouterView extends UI.Widget.Widget {
   #rules: SDK.ServiceWorkerManager.ServiceWorkerRouterRule[] = [];
+  #view: View;
 
-  update(rules: SDK.ServiceWorkerManager.ServiceWorkerRouterRule[]): void {
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
+
+  set rules(rules: SDK.ServiceWorkerManager.ServiceWorkerRouterRule[]) {
     this.#rules = rules;
     if (this.#rules.length > 0) {
-      this.#render();
+      this.requestUpdate();
     }
   }
 
-  #render(): void {
-    // clang-format off
-    render(html`
-      <style>${serviceWorkerRouterViewStyles}</style>
-      <ul class="router-rules">
-        ${this.#rules.map(this.#renderRouterRule)}
-      </ul>
-    `, this.#shadow, {host: this});
-    // clang-format on
-  }
-
-  #renderRouterRule(rule: SDK.ServiceWorkerManager.ServiceWorkerRouterRule): Lit.TemplateResult {
-    return html`
-      <li class="router-rule">
-        <div class="rule-id">Rule ${rule.id}</div>
-        <ul class="item">
-          <li class="condition">
-            <div class="rule-type">Condition</div>
-            <div class="rule-value">${rule.condition}</div>
-          </li>
-          <li class="source">
-            <div class="rule-type">Source</div>
-            <div class="rule-value">${rule.source}</div>
-          </li>
-        </ul>
-      </li>
-    `;
+  get rules(): SDK.ServiceWorkerManager.ServiceWorkerRouterRule[] {
+    return this.#rules;
   }
-}
-
-customElements.define('devtools-service-worker-router-view', ServiceWorkerRouterView);
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-service-worker-router-view': ServiceWorkerRouterView;
+  override performUpdate(): void {
+    this.#view({rules: this.#rules}, undefined, this.contentElement);
   }
 }

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

@@ -12,12 +12,10 @@ import * as Buttons from '../../../ui/components/buttons/buttons.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 UI from '../../../ui/legacy/legacy.js';
-import * as Lit from '../../../ui/lit/lit.js';
+import {html, type LitTemplate, nothing, render, type TemplateResult} from '../../../ui/lit/lit.js';
 
 import storageMetadataViewStyle from './storageMetadataView.css.js';
 
-const {html} = Lit;
-
 const UIStrings = {
   /**
    * @description The origin of a URL (https://web.dev/same-site-same-origin/#origin).
@@ -147,10 +145,8 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
     return RenderCoordinator.write('StorageMetadataView render', async () => {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      Lit.render(html`
-        <style>
-          ${storageMetadataViewStyle}
-        </style>
+      render(html`
+        <style>${storageMetadataViewStyle}</style>
         <devtools-report .data=${{reportTitle: this.getTitle() ?? i18nString(UIStrings.loading)}}>
           ${await this.renderReportContent()}
         </devtools-report>`, this.#shadow, {host: this});
@@ -167,17 +163,17 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
     return this.#storageBucketsModel ? `${bucketName} - ${origin}` : origin;
   }
 
-  key(content: string|Lit.TemplateResult): Lit.TemplateResult {
+  key(content: string|TemplateResult): TemplateResult {
     return html`<devtools-report-key>${content}</devtools-report-key>`;
   }
 
-  value(content: string|Lit.TemplateResult): Lit.TemplateResult {
+  value(content: string|TemplateResult): TemplateResult {
     return html`<devtools-report-value>${content}</devtools-report-value>`;
   }
 
-  async renderReportContent(): Promise<Lit.LitTemplate> {
+  async renderReportContent(): Promise<LitTemplate> {
     if (!this.#storageKey) {
-      return Lit.nothing;
+      return nothing;
     }
     const origin = this.#storageKey.origin;
     const ancestorChainHasCrossSite =
@@ -196,26 +192,28 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return html`
+  return html`
         ${(isIframeOrEmbedded) ?
           html`${this.key(i18nString(UIStrings.origin))}
             ${this.value(html`<div class="text-ellipsis" title=${origin}>${origin}</div>`)}`
-          : Lit.nothing}
-        ${(topLevelSite || topLevelSiteIsOpaque) ? this.key(i18nString(UIStrings.topLevelSite)) : Lit.nothing}
-        ${topLevelSite ? this.value(topLevelSite) : Lit.nothing}
-        ${topLevelSiteIsOpaque ? this.value(i18nString(UIStrings.opaque)) : Lit.nothing}
-        ${thirdPartyReason ? html`${this.key(i18nString(UIStrings.isThirdParty))}${this.value(thirdPartyReason)}` : Lit.nothing}
+          : nothing}
+        ${(topLevelSite || topLevelSiteIsOpaque) ?
+          this.key(i18nString(UIStrings.topLevelSite)) : nothing}
+        ${topLevelSite ? this.value(topLevelSite) : nothing}
+        ${topLevelSiteIsOpaque ? this.value(i18nString(UIStrings.opaque)) : nothing}
+        ${thirdPartyReason ?  html`
+          ${this.key(i18nString(UIStrings.isThirdParty))}${this.value(thirdPartyReason)}` : nothing}
         ${hasNonce || topLevelSiteIsOpaque ?
-        this.key(i18nString(UIStrings.isOpaque)) : Lit.nothing}
-        ${hasNonce ? this.value(i18nString(UIStrings.yes)) : Lit.nothing}
+          this.key(i18nString(UIStrings.isOpaque)) : nothing}
+        ${hasNonce ? this.value(i18nString(UIStrings.yes)) : nothing}
         ${topLevelSiteIsOpaque ?
-        this.value(i18nString(UIStrings.yesBecauseTopLevelIsOpaque)) : Lit.nothing}
-        ${this.#storageBucket ? this.#renderStorageBucketInfo() : Lit.nothing}
-        ${this.#storageBucketsModel ? this.#renderBucketControls() : Lit.nothing}`;
+          this.value(i18nString(UIStrings.yesBecauseTopLevelIsOpaque)) : nothing}
+        ${this.#storageBucket ? this.#renderStorageBucketInfo() : nothing}
+        ${this.#storageBucketsModel ? this.#renderBucketControls() : nothing}`;
     // clang-format on
   }
 
-  #renderStorageBucketInfo(): Lit.LitTemplate {
+  #renderStorageBucketInfo(): LitTemplate {
     if (!this.#storageBucket) {
       throw new Error('Should not call #renderStorageBucketInfo if #bucket is null.');
     }
@@ -260,18 +258,17 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
     return (new Date(expiration * 1000)).toLocaleString();
   }
 
-  #renderBucketControls(): Lit.TemplateResult {
+  #renderBucketControls(): TemplateResult {
     // clang-format off
-    return html`
-      <devtools-report-divider></devtools-report-divider>
-      <devtools-report-section>
-        <devtools-button
-          aria-label=${i18nString(UIStrings.deleteBucket)}
-          .variant=${Buttons.Button.Variant.OUTLINED}
-          @click=${this.#deleteBucket}>
-          ${i18nString(UIStrings.deleteBucket)}
-        </devtools-button>
-      </devtools-report-section>`;
+  return html`
+    <devtools-report-divider></devtools-report-divider>
+    <devtools-report-section>
+      <devtools-button aria-label=${i18nString(UIStrings.deleteBucket)}
+                       .variant=${Buttons.Button.Variant.OUTLINED}
+                       @click=${this.#deleteBucket}>
+        ${i18nString(UIStrings.deleteBucket)}
+      </devtools-button>
+    </devtools-report-section>`;
     // clang-format on
   }