chrome-devtools-frontend 1.0.1548980 → 1.0.1550444

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

@@ -1,9 +1,8 @@
 // Copyright 2021 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';
+import '../../../ui/kit/kit.js';
 import '../../../ui/components/report_view/report_view.js';
 
 import * as Common from '../../../core/common/common.js';
@@ -13,14 +12,12 @@ import * as SDK from '../../../core/sdk/sdk.js';
 import * as Protocol from '../../../generated/protocol.js';
 import * as NetworkForward from '../../../panels/network/forward/forward.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
-import * as Lit from '../../../ui/lit/lit.js';
+import * as UI from '../../../ui/legacy/legacy.js';
+import {html, type LitTemplate, nothing, render, type TemplateResult} from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import permissionsPolicySectionStyles from './permissionsPolicySection.css.js';
 
-const {html} = Lit;
-
 const UIStrings = {
   /**
    * @description Label for a button. When clicked more details (for the content this button refers to) will be shown.
@@ -72,179 +69,226 @@ export interface PermissionsPolicySectionData {
 
 export function renderIconLink(
     iconName: string, title: Platform.UIString.LocalizedString, clickHandler: (() => void)|(() => Promise<void>),
-    jsLogContext: string): Lit.TemplateResult {
+    jsLogContext: string): TemplateResult {
   // Disabled until https://crbug.com/1079231 is fixed.
   // clang-format off
   return html`
-  <devtools-button
-    .iconName=${iconName}
-    title=${title}
-    aria-label=${title}
-    .variant=${Buttons.Button.Variant.ICON}
-    .size=${Buttons.Button.Size.SMALL}
-    @click=${clickHandler}
-    jslog=${VisualLogging.action().track({click: true}).context(jsLogContext)}></devtools-button>
-  `;
+    <devtools-button
+      .iconName=${iconName}
+      title=${title}
+      aria-label=${title}
+      .variant=${Buttons.Button.Variant.ICON}
+      .size=${Buttons.Button.Size.SMALL}
+      @click=${clickHandler}
+      jslog=${VisualLogging.action().track({click: true}).context(jsLogContext)}>
+    </devtools-button>`;
   // clang-format on
 }
 
-export class PermissionsPolicySection extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #permissionsPolicySectionData: PermissionsPolicySectionData = {policies: [], showDetails: false};
-
-  set data(data: PermissionsPolicySectionData) {
-    this.#permissionsPolicySectionData = data;
-    void this.#render();
+function renderAllowed(allowed: Protocol.Page.PermissionsPolicyFeatureState[]): LitTemplate {
+  if (!allowed.length) {
+    return nothing;
   }
+  return html`
+    <devtools-report-key>${i18nString(UIStrings.allowedFeatures)}</devtools-report-key>
+    <devtools-report-value>${allowed.map(({feature}) => feature).join(', ')}</devtools-report-value>`;
+}
 
-  #toggleShowPermissionsDisallowedDetails(): void {
-    this.#permissionsPolicySectionData.showDetails = !this.#permissionsPolicySectionData.showDetails;
-    void this.#render();
+function renderDisallowed(
+    data: Array<{
+      policy: Protocol.Page.PermissionsPolicyFeatureState,
+      blockReason?: Protocol.Page.PermissionsPolicyBlockReason,
+      linkTargetDOMNode?: SDK.DOMModel.DOMNode,
+      linkTargetRequest?: SDK.NetworkRequest.NetworkRequest,
+    }>,
+    showDetails: boolean,
+    onToggleShowDetails: () => void,
+    onRevealDOMNode: (linkTargetDOMNode: SDK.DOMModel.DOMNode) => Promise<void>,
+    onRevealHeader: (linkTargetRequest: SDK.NetworkRequest.NetworkRequest) => Promise<void>,
+    ): LitTemplate {
+  if (!data.length) {
+    return nothing;
   }
-
-  #renderAllowed(): Lit.LitTemplate {
-    const allowed = this.#permissionsPolicySectionData.policies.filter(p => p.allowed).map(p => p.feature).sort();
-    if (!allowed.length) {
-      return Lit.nothing;
-    }
+  if (!showDetails) {
+    // clang-format off
     return html`
-      <devtools-report-key>${i18nString(UIStrings.allowedFeatures)}</devtools-report-key>
+      <devtools-report-key>${i18nString(UIStrings.disabledFeatures)}</devtools-report-key>
       <devtools-report-value>
-        ${allowed.join(', ')}
-      </devtools-report-value>
-    `;
-  }
-
-  async #renderDisallowed(): Promise<Lit.LitTemplate> {
-    const disallowed = this.#permissionsPolicySectionData.policies.filter(p => !p.allowed)
-                           .sort((a, b) => a.feature.localeCompare(b.feature));
-    if (!disallowed.length) {
-      return Lit.nothing;
-    }
-    if (!this.#permissionsPolicySectionData.showDetails) {
-      return html`
-        <devtools-report-key>${i18nString(UIStrings.disabledFeatures)}</devtools-report-key>
-        <devtools-report-value>
-          ${disallowed.map(p => p.feature).join(', ')}
-          <devtools-button
-          class="disabled-features-button"
-          .variant=${Buttons.Button.Variant.OUTLINED}
-          @click=${() => this.#toggleShowPermissionsDisallowedDetails()}
-          jslog=${VisualLogging.action('show-disabled-features-details').track({
-        click: true,
-      })}>${i18nString(UIStrings.showDetails)}
+        ${data.map(({policy}) => policy.feature).join(', ')}
+        <devtools-button
+            class="disabled-features-button"
+            .variant=${Buttons.Button.Variant.OUTLINED}
+            @click=${onToggleShowDetails}
+            jslog=${VisualLogging.action('show-disabled-features-details').track({click: true})}>
+          ${i18nString(UIStrings.showDetails)}
         </devtools-button>
-        </devtools-report-value>
-      `;
-    }
+      </devtools-report-value>`;
+    // clang-format on
+  }
 
-    const frameManager = SDK.FrameManager.FrameManager.instance();
-    const featureRows = await Promise.all(disallowed.map(async policy => {
-      const frame = policy.locator ? frameManager.getFrame(policy.locator.frameId) : null;
-      const blockReason = policy.locator?.blockReason;
-      const linkTargetDOMNode = await (blockReason === Protocol.Page.PermissionsPolicyBlockReason.IframeAttribute &&
-                                       frame?.getOwnerDOMNodeOrDocument());
-      const resource = frame?.resourceForURL(frame.url);
-      const linkTargetRequest = blockReason === Protocol.Page.PermissionsPolicyBlockReason.Header && resource?.request;
-      const blockReasonText = (() => {
-        switch (blockReason) {
-          case Protocol.Page.PermissionsPolicyBlockReason.IframeAttribute:
-            return i18nString(UIStrings.disabledByIframe);
-          case Protocol.Page.PermissionsPolicyBlockReason.Header:
-            return i18nString(UIStrings.disabledByHeader);
-          case Protocol.Page.PermissionsPolicyBlockReason.InFencedFrameTree:
-            return i18nString(UIStrings.disabledByFencedFrame);
-          default:
-            return '';
-        }
-      })();
-      const revealHeader = async(): Promise<void> => {
-        if (!linkTargetRequest) {
-          return;
-        }
-        const headerName =
-            linkTargetRequest.responseHeaderValue('permissions-policy') ? 'permissions-policy' : 'feature-policy';
-        const requestLocation = NetworkForward.UIRequestLocation.UIRequestLocation.responseHeaderMatch(
-            linkTargetRequest,
-            {name: headerName, value: ''},
-        );
-        await Common.Revealer.reveal(requestLocation);
-      };
-
-      // Disabled until https://crbug.com/1079231 is fixed.
-      // clang-format off
-      return html`
-        <div class="permissions-row">
-          <div>
-            <devtools-icon class="allowed-icon extra-large" name="cross-circle">
-            </devtools-icon>
-          </div>
-          <div class="feature-name text-ellipsis">
-            ${policy.feature}
-          </div>
-          <div class="block-reason">${blockReasonText}</div>
-          <div>
-            ${
-          linkTargetDOMNode ? renderIconLink(
-                                  'code-circle', i18nString(UIStrings.clickToShowIframe),
-                                  () => Common.Revealer.reveal(linkTargetDOMNode), 'reveal-in-elements') :
-                              Lit.nothing}
-            ${
-          linkTargetRequest ? renderIconLink(
-                                  'arrow-up-down-circle',
-                                  i18nString(UIStrings.clickToShowHeader),
-                                  revealHeader,
-                                  'reveal-in-network') :
-                              Lit.nothing}
-          </div>
+  const featureRows = data.map(({policy, blockReason, linkTargetDOMNode, linkTargetRequest}) => {
+    const blockReasonText = (() => {
+      switch (blockReason) {
+        case Protocol.Page.PermissionsPolicyBlockReason.IframeAttribute:
+          return i18nString(UIStrings.disabledByIframe);
+        case Protocol.Page.PermissionsPolicyBlockReason.Header:
+          return i18nString(UIStrings.disabledByHeader);
+        case Protocol.Page.PermissionsPolicyBlockReason.InFencedFrameTree:
+          return i18nString(UIStrings.disabledByFencedFrame);
+        default:
+          return '';
+      }
+    })();
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    return html`
+      <div class="permissions-row">
+        <div>
+          <devtools-icon class="allowed-icon extra-large" name="cross-circle">
+          </devtools-icon>
         </div>
-      `;
-      // clang-format on
-    }));
+        <div class="feature-name text-ellipsis">${policy.feature}</div>
+        <div class="block-reason">${blockReasonText}</div>
+        <div>
+          ${linkTargetDOMNode ?
+            renderIconLink('code-circle', i18nString(UIStrings.clickToShowIframe),
+                           () => onRevealDOMNode(linkTargetDOMNode), 'reveal-in-elements') :
+            nothing}
+          ${linkTargetRequest ?
+            renderIconLink('arrow-up-down-circle', i18nString(UIStrings.clickToShowHeader),
+                           () => onRevealHeader(linkTargetRequest), 'reveal-in-network') :
+            nothing}
+        </div>
+      </div>`;
+    // clang-format on
+  });
 
-    return html`
-      <devtools-report-key>${i18nString(UIStrings.disabledFeatures)}</devtools-report-key>
-      <devtools-report-value class="policies-list">
-        ${featureRows}
-        <div class="permissions-row">
+  // clang-format off
+  return html`
+    <devtools-report-key>${i18nString(UIStrings.disabledFeatures)}</devtools-report-key>
+    <devtools-report-value class="policies-list">
+      ${featureRows}
+      <div class="permissions-row">
         <devtools-button
-          .variant=${Buttons.Button.Variant.OUTLINED}
-          @click=${() => this.#toggleShowPermissionsDisallowedDetails()}
-          jslog=${VisualLogging.action('hide-disabled-features-details').track({
-      click: true,
-    })}>${i18nString(UIStrings.hideDetails)}
+            .variant=${Buttons.Button.Variant.OUTLINED}
+            @click=${onToggleShowDetails}
+            jslog=${VisualLogging.action('hide-disabled-features-details').track({click: true})}>
+          ${i18nString(UIStrings.hideDetails)}
         </devtools-button>
-        </div>
-      </devtools-report-value>
-    `;
+      </div>
+    </devtools-report-value>`;
+  // clang-format on
+}
+
+interface ViewInput {
+  allowed: Protocol.Page.PermissionsPolicyFeatureState[];
+  disallowed: Array<{
+    policy: Protocol.Page.PermissionsPolicyFeatureState,
+    blockReason?: Protocol.Page.PermissionsPolicyBlockReason,
+    linkTargetDOMNode?: SDK.DOMModel.DOMNode,
+    linkTargetRequest?: SDK.NetworkRequest.NetworkRequest,
+  }>;
+  showDetails: boolean;
+  onToggleShowDetails: () => void;
+  onRevealDOMNode: (linkTargetDOMNode: SDK.DOMModel.DOMNode) => Promise<void>;
+  onRevealHeader: (linkTargetRequest: SDK.NetworkRequest.NetworkRequest) => Promise<void>;
+}
+
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+const DEFAULT_VIEW: View = (input, output, target) => {
+  // clang-format off
+  render(html`
+    <style>${permissionsPolicySectionStyles}</style>
+    <devtools-report-section-header>
+      ${i18n.i18n.lockedString('Permissions Policy')}
+    </devtools-report-section-header>
+    ${renderAllowed(input.allowed)}
+    ${(input.allowed.length > 0 && input.disallowed.length > 0) ?
+      html`<devtools-report-divider class="subsection-divider"></devtools-report-divider>` : nothing}
+    ${renderDisallowed(
+        input.disallowed, input.showDetails,
+        input.onToggleShowDetails, input.onRevealDOMNode, input.onRevealHeader)}
+    <devtools-report-divider></devtools-report-divider>`, target);
+  // clang-format on
+};
+
+export class PermissionsPolicySection extends UI.Widget.Widget {
+  #policies: Protocol.Page.PermissionsPolicyFeatureState[] = [];
+  #showDetails = false;
+  #view: View;
+
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
   }
 
-  async #render(): Promise<void> {
-    await RenderCoordinator.write('PermissionsPolicySection render', () => {
-      // Disabled until https://crbug.com/1079231 is fixed.
-      // clang-format off
-      Lit.render(
-        html`
-          <style>${permissionsPolicySectionStyles}</style>
-          <devtools-report-section-header>${i18n.i18n.lockedString('Permissions Policy')}</devtools-report-section-header>
-          ${this.#renderAllowed()}
-          ${(this.#permissionsPolicySectionData.policies.findIndex(p => p.allowed) > 0 ||
-            this.#permissionsPolicySectionData.policies.findIndex(p => !p.allowed) > 0) ?
-            html`<devtools-report-divider class="subsection-divider"></devtools-report-divider>` : Lit.nothing}
-          ${Lit.Directives.until(this.#renderDisallowed(), Lit.nothing)}
-          <devtools-report-divider></devtools-report-divider>
-        `,
-        this.#shadow, {host: this},
-      );
-      // clang-format on
-    });
+  set policies(policies: Protocol.Page.PermissionsPolicyFeatureState[]) {
+    this.#policies = policies;
+    this.requestUpdate();
+  }
+
+  get policies(): Protocol.Page.PermissionsPolicyFeatureState[] {
+    return this.#policies;
+  }
+
+  set showDetails(showDetails: boolean) {
+    this.#showDetails = showDetails;
+    this.requestUpdate();
   }
-}
 
-customElements.define('devtools-resources-permissions-policy-section', PermissionsPolicySection);
+  get showDetails(): boolean {
+    return this.#showDetails;
+  }
+
+  #toggleShowPermissionsDisallowedDetails(): void {
+    this.showDetails = !this.showDetails;
+  }
+
+  async #revealDOMNode(linkTargetDOMNode: SDK.DOMModel.DOMNode): Promise<void> {
+    await Common.Revealer.reveal(linkTargetDOMNode);
+  }
+
+  async #revealHeader(linkTargetRequest: SDK.NetworkRequest.NetworkRequest): Promise<void> {
+    if (!linkTargetRequest) {
+      return;
+    }
+    const headerName =
+        linkTargetRequest.responseHeaderValue('permissions-policy') ? 'permissions-policy' : 'feature-policy';
+    const requestLocation = NetworkForward.UIRequestLocation.UIRequestLocation.responseHeaderMatch(
+        linkTargetRequest,
+        {name: headerName, value: ''},
+    );
+    await Common.Revealer.reveal(requestLocation);
+  }
+
+  override async performUpdate(): Promise<void> {
+    const frameManager = SDK.FrameManager.FrameManager.instance();
+    const policies = this.#policies.sort((a, b) => a.feature.localeCompare(b.feature));
+    const allowed = policies.filter(p => p.allowed).sort((a, b) => a.feature.localeCompare(b.feature));
+    const disallowed = policies.filter(p => !p.allowed).sort((a, b) => a.feature.localeCompare(b.feature));
+    const disallowedData = this.#showDetails ? await Promise.all(disallowed.map(async policy => {
+      const frame = policy.locator ? frameManager.getFrame(policy.locator.frameId) : undefined;
+      const blockReason = policy.locator?.blockReason;
+      const linkTargetDOMNode = await ((blockReason === Protocol.Page.PermissionsPolicyBlockReason.IframeAttribute &&
+                                        frame?.getOwnerDOMNodeOrDocument()) ||
+                                       undefined);
+      const resource = frame?.resourceForURL(frame.url);
+      const linkTargetRequest =
+          (blockReason === Protocol.Page.PermissionsPolicyBlockReason.Header && resource?.request) || undefined;
+      return {policy, blockReason, linkTargetDOMNode, linkTargetRequest};
+    })) :
+                                               disallowed.map(policy => ({policy}));
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-resources-permissions-policy-section': PermissionsPolicySection;
+    this.#view(
+        {
+          allowed,
+          disallowed: disallowedData,
+          showDetails: this.#showDetails,
+          onToggleShowDetails: this.#toggleShowPermissionsDisallowedDetails.bind(this),
+          onRevealDOMNode: this.#revealDOMNode.bind(this),
+          onRevealHeader: this.#revealHeader.bind(this),
+        },
+        undefined, this.contentElement);
   }
 }

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

@@ -1,9 +1,8 @@
 // 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';
+import '../../../ui/kit/kit.js';
 
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.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);
   }
 }