chrome-devtools-frontend 1.0.1548870 → 1.0.1549484

package/front_end/panels/application/AppManifestView.ts

@@ -517,7 +517,7 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.protocolHandlersSection =
         this.reportView.appendSection(i18nString(UIStrings.protocolHandlers), 'undefined,protocol-handlers');
     this.protocolHandlersView = new ApplicationComponents.ProtocolHandlersView.ProtocolHandlersView();
-    this.protocolHandlersSection.appendFieldWithCustomView(this.protocolHandlersView);
+    this.protocolHandlersView.show(this.protocolHandlersSection.getFieldElement());
     this.iconsSection = this.reportView.appendSection(i18nString(UIStrings.icons), 'report-section-icons', 'icons');
     this.windowControlsSection =
         this.reportView.appendSection(UIStrings.windowControlsOverlay, undefined, 'window-controls-overlay');
@@ -753,7 +753,8 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
     }
 
     const protocolHandlers = parsedManifest['protocol_handlers'] || [];
-    this.protocolHandlersView.data = {protocolHandlers, manifestLink: url};
+    this.protocolHandlersView.protocolHandlers = protocolHandlers;
+    this.protocolHandlersView.manifestLink = url;
 
     const icons = parsedManifest['icons'] || [];
     this.iconsSection.clearContent();

package/front_end/panels/application/FrameDetailsView.ts

@@ -297,12 +297,11 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
       ${renderIsolationSection(input)}
       ${renderApiAvailabilitySection(input.frame)}
       ${renderOriginTrial(input.trials)}
-      ${input.permissionsPolicies ?
-        html`
-          <devtools-resources-permissions-policy-section
-             .data=${{policies: input.permissionsPolicies, showDetails: false} as ApplicationComponents.PermissionsPolicySection.PermissionsPolicySectionData}>
-          </devtools-resources-permissions-policy-section>
-        ` : nothing}
+      ${input.permissionsPolicies ? html`
+          <devtools-widget .widgetConfig=${widgetConfig(ApplicationComponents.PermissionsPolicySection.PermissionsPolicySection, {
+             policies: input.permissionsPolicies,
+             showDetails: false})}>
+          </devtools-widget>` : nothing}
       ${input.protocolMonitorExperimentEnabled ? renderAdditionalInfoSection(input.frame) : nothing}
     </devtools-report>
   `, target);

package/front_end/panels/application/ServiceWorkersView.ts

@@ -706,9 +706,9 @@ export class Section {
         this.routerField = this.wrapWidget(this.section.appendField(title));
       }
       if (!this.routerField.lastElementChild) {
-        this.routerField.appendChild(this.routerView);
+        this.routerView.show(this.routerField);
       }
-      this.routerView.update(active.routerRules);
+      this.routerView.rules = active.routerRules;
     } else {
       // If no active worker or no registered rules, remove the field.
       this.section.removeField(title);

package/front_end/panels/application/TrustTokensTreeElement.ts

@@ -6,8 +6,6 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
-import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import * as UI from '../../ui/legacy/legacy.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import * as ApplicationComponents from './components/components.js';
@@ -24,8 +22,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/application/TrustTokensTreeElem
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class TrustTokensTreeElement extends ApplicationPanelTreeElement {
-  private view?: LegacyWrapper.LegacyWrapper
-      .LegacyWrapper<UI.Widget.Widget, ApplicationComponents.TrustTokensView.TrustTokensView>;
+  private view?: ApplicationComponents.TrustTokensView.TrustTokensView;
 
   constructor(storagePanel: ResourcesPanel) {
     super(storagePanel, i18nString(UIStrings.trustTokens), false, 'private-state-tokens');
@@ -40,8 +37,7 @@ export class TrustTokensTreeElement extends ApplicationPanelTreeElement {
   override onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     if (!this.view) {
-      this.view = LegacyWrapper.LegacyWrapper.legacyWrapper(
-          UI.Widget.Widget, new ApplicationComponents.TrustTokensView.TrustTokensView(), 'trust-tokens');
+      this.view = new ApplicationComponents.TrustTokensView.TrustTokensView();
     }
     this.showView(this.view);
     Host.userMetrics.panelShown('trust-tokens');

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

@@ -1,7 +1,6 @@
 // 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/components/report_view/report_view.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);
   }
 }