chrome-devtools-frontend 1.0.1543472 → 1.0.1545096

package/front_end/panels/application/{components/FrameDetailsView.ts → FrameDetailsView.ts}

@@ -1,39 +1,32 @@
 // 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/expandable_list/expandable_list.js';
-import '../../../ui/components/report_view/report_view.js';
-import './StackTrace.js';
-
-import * as Common from '../../../core/common/common.js';
-import * as i18n from '../../../core/i18n/i18n.js';
-import type * as Platform from '../../../core/platform/platform.js';
-import * as Root from '../../../core/root/root.js';
-import * as SDK from '../../../core/sdk/sdk.js';
-import * as Protocol from '../../../generated/protocol.js';
-import * as Bindings from '../../../models/bindings/bindings.js';
-import * as Workspace from '../../../models/workspace/workspace.js';
-import * as NetworkForward from '../../../panels/network/forward/forward.js';
-import * as CspEvaluator from '../../../third_party/csp_evaluator/csp_evaluator.js';
-import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import type * as ExpandableList from '../../../ui/components/expandable_list/expandable_list.js';
-import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
-import type * as ReportView from '../../../ui/components/report_view/report_view.js';
-import * as Components from '../../../ui/legacy/components/utils/utils.js';
-import * as UI from '../../../ui/legacy/legacy.js';
-import {Directives, html, type LitTemplate, nothing, render} from '../../../ui/lit/lit.js';
-import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
+import '../../ui/components/expandable_list/expandable_list.js';
+import '../../ui/components/report_view/report_view.js';
+
+import * as Common from '../../core/common/common.js';
+import * as i18n from '../../core/i18n/i18n.js';
+import type * as Platform from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import * as Protocol from '../../generated/protocol.js';
+import * as Bindings from '../../models/bindings/bindings.js';
+import * as Workspace from '../../models/workspace/workspace.js';
+import * as PanelCommon from '../../panels/common/common.js';
+import * as NetworkForward from '../../panels/network/forward/forward.js';
+import * as CspEvaluator from '../../third_party/csp_evaluator/csp_evaluator.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
+import type * as ExpandableList from '../../ui/components/expandable_list/expandable_list.js';
+import type * as ReportView from '../../ui/components/report_view/report_view.js';
+import * as Components from '../../ui/legacy/components/utils/utils.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+
+import * as ApplicationComponents from './components/components.js';
 import frameDetailsReportViewStyles from './frameDetailsReportView.css.js';
 import {OriginTrialTreeView} from './OriginTrialTreeView.js';
-import {
-  type PermissionsPolicySectionData,
-  renderIconLink,
-} from './PermissionsPolicySection.js';
-import type {StackTraceData} from './StackTrace.js';
 
 const {until} = Directives;
 const {widgetConfig} = UI.Widget;
@@ -87,10 +80,6 @@ const UIStrings = {
    * @description Related node label in Timeline UIUtils of the Performance panel
    */
   ownerElement: 'Owner Element',
-  /**
-   * @description Title for a link to the Elements panel
-   */
-  clickToOpenInElementsPanel: 'Click to open in Elements panel',
   /**
    * @description Title for ad frame type field
    */
@@ -269,7 +258,7 @@ const UIStrings = {
    */
   originTrialsExplanation: 'Origin trials give you access to a new or experimental feature.',
 } as const;
-const str_ = i18n.i18n.registerUIStrings('panels/application/components/FrameDetailsView.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/application/FrameDetailsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface FrameDetailsReportViewData {
@@ -287,10 +276,13 @@ interface FrameDetailsViewInput {
   protocolMonitorExperimentEnabled: boolean;
   trials: Protocol.Page.OriginTrial[]|null;
   securityIsolationInfo?: Promise<Protocol.Network.SecurityIsolationStatus|null>;
+  onRevealInNetwork?: () => void;
   onRevealInSources: () => void;
 }
 
-function renderFrameDetailsView(input: FrameDetailsViewInput, target: ShadowRoot): void {
+type View = (input: FrameDetailsViewInput, output: undefined, target: HTMLElement) => void;
+
+const DEFAULT_VIEW: View = (input, _output, target) => {
   if (!input.frame) {
     return;
   }
@@ -305,14 +297,14 @@ function renderFrameDetailsView(input: FrameDetailsViewInput, target: ShadowRoot
       ${renderOriginTrial(input.trials)}
       ${until(input.permissionsPolicies?.then?.(policies =>
         html`
-          <devtools-resources-permissions-policy-section .data=${{policies, showDetails: false} as PermissionsPolicySectionData}>
+          <devtools-resources-permissions-policy-section .data=${{policies, showDetails: false} as ApplicationComponents.PermissionsPolicySection.PermissionsPolicySectionData}>
           </devtools-resources-permissions-policy-section>
         `), nothing)}
       ${input.protocolMonitorExperimentEnabled ? renderAdditionalInfoSection(input.frame) : nothing}
     </devtools-report>
   `, target);
   // clang-format on
-}
+};
 
 function renderOriginTrial(trials: Protocol.Page.OriginTrial[]|null): LitTemplate {
   if (!trials) {
@@ -350,27 +342,23 @@ function renderDocumentSection(input: FrameDetailsViewInput): LitTemplate {
       <devtools-report-key>${i18nString(UIStrings.url)}</devtools-report-key>
       <devtools-report-value>
         <div class="inline-items">
-          ${maybeRenderSourcesLinkForURL(input.frame, input.onRevealInSources)}
-          ${maybeRenderNetworkLinkForURL(input.frame)}
+          ${!input.frame?.unreachableUrl() ? renderSourcesLinkForURL(input.onRevealInSources) : nothing}
+          ${input.onRevealInNetwork ? renderNetworkLinkForURL(input.onRevealInNetwork) : nothing}
           <div class="text-ellipsis" title=${input.frame.url}>${input.frame.url}</div>
         </div>
       </devtools-report-value>
-      ${maybeRenderUnreachableURL(input.frame)}
-      ${maybeRenderOrigin(input.frame)}
-      ${until(input.linkTargetDOMNode?.then?.(value => renderOwnerElement(input.frame, value)), nothing)}
-      ${maybeRenderCreationStacktrace(input.frame)}
-      ${maybeRenderAdStatus(input.frame)}
-      ${maybeRenderCreatorAdScriptAncestry(input.frame, input.target, input.adScriptAncestry)}
+      ${maybeRenderUnreachableURL(input.frame?.unreachableUrl())}
+      ${maybeRenderOrigin(input.frame?.securityOrigin)}
+      ${until(input.linkTargetDOMNode?.then?.(value => renderOwnerElement(value)), nothing)}
+      ${maybeRenderCreationStacktrace(input.frame.getCreationStackTraceData())}
+      ${maybeRenderAdStatus(input.frame?.adFrameType(), input.frame?.adFrameStatus())}
+      ${maybeRenderCreatorAdScriptAncestry(input.frame?.adFrameType(), input.target, input.adScriptAncestry)}
       <devtools-report-divider></devtools-report-divider>
     `;
 }
 
-function maybeRenderSourcesLinkForURL(
-    frame: SDK.ResourceTreeModel.ResourceTreeFrame|null, onRevealInSources: () => void): LitTemplate {
-  if (!frame || frame.unreachableUrl()) {
-    return nothing;
-  }
-  return renderIconLink(
+function renderSourcesLinkForURL(onRevealInSources: () => void): LitTemplate {
+  return ApplicationComponents.PermissionsPolicySection.renderIconLink(
       'label',
       i18nString(UIStrings.clickToOpenInSourcesPanel),
       onRevealInSources,
@@ -378,77 +366,64 @@ function maybeRenderSourcesLinkForURL(
   );
 }
 
-function maybeRenderNetworkLinkForURL(frame: SDK.ResourceTreeModel.ResourceTreeFrame|null): LitTemplate {
-  if (frame) {
-    const resource = frame.resourceForURL(frame.url);
-    if (resource?.request) {
-      const request = resource.request;
-      return renderIconLink('arrow-up-down-circle', i18nString(UIStrings.clickToOpenInNetworkPanel), () => {
-        const requestLocation = NetworkForward.UIRequestLocation.UIRequestLocation.tab(
-            request, NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT);
-        return Common.Revealer.reveal(requestLocation);
-      }, 'reveal-in-network');
-    }
-  }
-  return nothing;
+function renderNetworkLinkForURL(onRevealInNetwork: () => void): LitTemplate {
+  return ApplicationComponents.PermissionsPolicySection.renderIconLink(
+      'arrow-up-down-circle', i18nString(UIStrings.clickToOpenInNetworkPanel), onRevealInNetwork, 'reveal-in-network');
 }
 
-function maybeRenderUnreachableURL(frame: SDK.ResourceTreeModel.ResourceTreeFrame|null): LitTemplate {
-  if (!frame?.unreachableUrl()) {
+function maybeRenderUnreachableURL(unreachableUrl: Platform.DevToolsPath.UrlString): LitTemplate {
+  if (!unreachableUrl) {
     return nothing;
   }
   return html`
       <devtools-report-key>${i18nString(UIStrings.unreachableUrl)}</devtools-report-key>
       <devtools-report-value>
         <div class="inline-items">
-          ${renderNetworkLinkForUnreachableURL(frame)}
-          <div class="text-ellipsis" title=${frame.unreachableUrl()}>${frame.unreachableUrl()}</div>
+          ${renderNetworkLinkForUnreachableURL(unreachableUrl)}
+          <div class="text-ellipsis" title=${unreachableUrl}>${unreachableUrl}</div>
         </div>
       </devtools-report-value>
     `;
 }
 
-function renderNetworkLinkForUnreachableURL(frame: SDK.ResourceTreeModel.ResourceTreeFrame|null): LitTemplate {
-  if (frame) {
-    const unreachableUrl = Common.ParsedURL.ParsedURL.fromString(frame.unreachableUrl());
-    if (unreachableUrl) {
-      return renderIconLink(
-          'arrow-up-down-circle',
-          i18nString(UIStrings.clickToOpenInNetworkPanelMight),
-          ():
-              void => {
-                void Common.Revealer.reveal(NetworkForward.UIFilter.UIRequestFilter.filters([
-                  {
-                    filterType: NetworkForward.UIFilter.FilterType.Domain,
-                    filterValue: unreachableUrl.domain(),
-                  },
-                  {
-                    filterType: null,
-                    filterValue: unreachableUrl.path,
-                  },
-                ]));
-              },
-          'unreachable-url.reveal-in-network',
-      );
-    }
+function renderNetworkLinkForUnreachableURL(unreachableUrlString: Platform.DevToolsPath.UrlString): LitTemplate {
+  const unreachableUrl = Common.ParsedURL.ParsedURL.fromString(unreachableUrlString);
+  if (unreachableUrl) {
+    return ApplicationComponents.PermissionsPolicySection.renderIconLink(
+        'arrow-up-down-circle',
+        i18nString(UIStrings.clickToOpenInNetworkPanelMight),
+        ():
+            void => {
+              void Common.Revealer.reveal(NetworkForward.UIFilter.UIRequestFilter.filters([
+                {
+                  filterType: NetworkForward.UIFilter.FilterType.Domain,
+                  filterValue: unreachableUrl.domain(),
+                },
+                {
+                  filterType: null,
+                  filterValue: unreachableUrl.path,
+                },
+              ]));
+            },
+        'unreachable-url.reveal-in-network',
+    );
   }
   return nothing;
 }
 
-function maybeRenderOrigin(frame: SDK.ResourceTreeModel.ResourceTreeFrame|null): LitTemplate {
-  if (frame?.securityOrigin && frame?.securityOrigin !== '://') {
+function maybeRenderOrigin(securityOrigin: string|null): LitTemplate {
+  if (securityOrigin && securityOrigin !== '://') {
     return html`
         <devtools-report-key>${i18nString(UIStrings.origin)}</devtools-report-key>
         <devtools-report-value>
-          <div class="text-ellipsis" title=${frame.securityOrigin}>${frame.securityOrigin}</div>
+          <div class="text-ellipsis" title=${securityOrigin}>${securityOrigin}</div>
         </devtools-report-value>
       `;
   }
   return nothing;
 }
 
-function renderOwnerElement(
-    frame: SDK.ResourceTreeModel.ResourceTreeFrame|null, linkTargetDOMNode: SDK.DOMModel.DOMNode|null): LitTemplate {
+function renderOwnerElement(linkTargetDOMNode: SDK.DOMModel.DOMNode|null): LitTemplate {
   if (linkTargetDOMNode) {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
@@ -456,14 +431,10 @@ function renderOwnerElement(
         <devtools-report-key>${i18nString(UIStrings.ownerElement)}</devtools-report-key>
         <devtools-report-value class="without-min-width">
           <div class="inline-items">
-            <button class="link text-link" role="link" tabindex=0 title=${i18nString(UIStrings.clickToOpenInElementsPanel)}
-              @mouseenter=${() => frame?.highlight()}
-              @mouseleave=${() => SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight()}
-              @click=${() => Common.Revealer.reveal(linkTargetDOMNode)}
-              jslog=${VisualLogging.action('reveal-in-elements').track({click: true})}
-            >
-              &lt;${linkTargetDOMNode.nodeName().toLocaleLowerCase()}&gt;
-            </button>
+            <devtools-widget .widgetConfig=${widgetConfig(PanelCommon.DOMLinkifier.DOMNodeLink, {
+              node: linkTargetDOMNode
+            })}>
+            </devtools-widget>
           </div>
         </devtools-report-value>
       `;
@@ -472,8 +443,10 @@ function renderOwnerElement(
   return nothing;
 }
 
-function maybeRenderCreationStacktrace(frame: SDK.ResourceTreeModel.ResourceTreeFrame|null): LitTemplate {
-  const creationStackTraceData = frame?.getCreationStackTraceData();
+function maybeRenderCreationStacktrace(
+    creationStackTraceData:
+        {creationStackTrace: Protocol.Runtime.StackTrace|null, creationStackTraceTarget: SDK.Target.Target}|
+    null): LitTemplate {
   if (creationStackTraceData?.creationStackTrace) {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
@@ -484,9 +457,9 @@ function maybeRenderCreationStacktrace(frame: SDK.ResourceTreeModel.ResourceTree
         jslog=${VisualLogging.section('frame-creation-stack-trace')}
         >
           <devtools-resources-stack-trace .data=${{
-            frame,
+            creationStackTraceData,
             buildStackTraceRows: Components.JSPresentationUtils.buildStackTraceRowsForLegacyRuntimeStackTrace,
-          } as StackTraceData}>
+          } as ApplicationComponents.StackTrace.StackTraceData}>
           </devtools-resources-stack-trace>
         </devtools-report-value>
       `;
@@ -516,17 +489,15 @@ function getAdFrameExplanationString(explanation: Protocol.Page.AdFrameExplanati
   }
 }
 
-function maybeRenderAdStatus(frame: SDK.ResourceTreeModel.ResourceTreeFrame|null): LitTemplate {
-  if (!frame) {
-    return nothing;
-  }
-  const adFrameType = frame.adFrameType();
-  if (adFrameType === Protocol.Page.AdFrameType.None) {
+function maybeRenderAdStatus(
+    adFrameType: Protocol.Page.AdFrameType|undefined,
+    adFrameStatus: Protocol.Page.AdFrameStatus|undefined): LitTemplate {
+  if (adFrameType === undefined || adFrameType === Protocol.Page.AdFrameType.None) {
     return nothing;
   }
   const typeStrings = getAdFrameTypeStrings(adFrameType);
   const rows = [html`<div title=${typeStrings.description}>${typeStrings.value}</div>`];
-  for (const explanation of frame.adFrameStatus()?.explanations || []) {
+  for (const explanation of adFrameStatus?.explanations || []) {
     rows.push(html`<div>${getAdFrameExplanationString(explanation)}</div>`);
   }
 
@@ -543,12 +514,8 @@ function maybeRenderAdStatus(frame: SDK.ResourceTreeModel.ResourceTreeFrame|null
 }
 
 function maybeRenderCreatorAdScriptAncestry(
-    frame: SDK.ResourceTreeModel.ResourceTreeFrame|null, target: SDK.Target.Target|null,
+    adFrameType: Protocol.Page.AdFrameType|null, target: SDK.Target.Target|null,
     adScriptAncestry: Protocol.Page.AdScriptAncestry|null): LitTemplate {
-  if (!frame) {
-    return nothing;
-  }
-  const adFrameType = frame.adFrameType();
   if (adFrameType === Protocol.Page.AdFrameType.None) {
     return nothing;
   }
@@ -875,27 +842,31 @@ function renderAdditionalInfoSection(frame: SDK.ResourceTreeModel.ResourceTreeFr
     `;
 }
 
-export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+export class FrameDetailsReportView extends UI.Widget.Widget {
   #frame?: SDK.ResourceTreeModel.ResourceTreeFrame;
   #target: SDK.Target.Target|null = null;
   #protocolMonitorExperimentEnabled = false;
   #permissionsPolicies: Promise<Protocol.Page.PermissionsPolicyFeatureState[]|null>|null = null;
   #linkifier = new Components.Linkifier.Linkifier();
   #adScriptAncestry: Protocol.Page.AdScriptAncestry|null = null;
+  #view: View;
 
-  constructor(frame: SDK.ResourceTreeModel.ResourceTreeFrame) {
-    super();
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#protocolMonitorExperimentEnabled = Root.Runtime.experiments.isEnabled('protocol-monitor');
+    this.#view = view;
+  }
+
+  set frame(frame: SDK.ResourceTreeModel.ResourceTreeFrame) {
     this.#frame = frame;
-    void this.render();
+    this.requestUpdate();
   }
 
-  connectedCallback(): void {
-    this.parentElement?.classList.add('overflow-auto');
-    this.#protocolMonitorExperimentEnabled = Root.Runtime.experiments.isEnabled('protocol-monitor');
+  get frame(): SDK.ResourceTreeModel.ResourceTreeFrame|undefined {
+    return this.#frame;
   }
 
-  override async render(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     const result = await this.#frame?.parentFrame()?.getAdScriptAncestry(this.#frame?.id);
     if (result && result.ancestryChain.length > 0) {
       this.#adScriptAncestry = result;
@@ -914,33 +885,39 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
     if (!this.#permissionsPolicies && this.#frame) {
       this.#permissionsPolicies = this.#frame.getPermissionsPolicyState();
     }
-    await RenderCoordinator.write('FrameDetailsView render', async () => {
-      const frame = this.#frame;
-      if (!frame) {
-        return;
-      }
-      const networkManager = frame.resourceTreeModel().target().model(SDK.NetworkManager.NetworkManager);
-      const securityIsolationInfo = networkManager?.getSecurityIsolationStatus(frame.id);
-      const linkTargetDOMNode = frame.getOwnerDOMNodeOrDocument();
-      const input = {
-        frame,
-        target: this.#target,
-        protocolMonitorExperimentEnabled: this.#protocolMonitorExperimentEnabled,
-        permissionsPolicies: this.#permissionsPolicies,
-        adScriptAncestry: this.#adScriptAncestry,
-        linkifier: this.#linkifier,
-        linkTargetDOMNode,
-        trials: await frame.getOriginTrials(),
-        securityIsolationInfo,
-        onRevealInSources: async () => {
-          const sourceCode = this.#uiSourceCodeForFrame(frame);
-          if (sourceCode) {
-            await Common.Revealer.reveal(sourceCode);
-          }
-        },
-      };
-      renderFrameDetailsView(input, this.#shadow);
-    });
+    const frame = this.#frame;
+    if (!frame) {
+      return;
+    }
+    const networkManager = frame.resourceTreeModel().target().model(SDK.NetworkManager.NetworkManager);
+    const securityIsolationInfo = networkManager?.getSecurityIsolationStatus(frame.id);
+    const linkTargetDOMNode = frame.getOwnerDOMNodeOrDocument();
+    const frameRequest = frame.resourceForURL(frame.url)?.request;
+    const input = {
+      frame,
+      target: this.#target,
+      protocolMonitorExperimentEnabled: this.#protocolMonitorExperimentEnabled,
+      permissionsPolicies: this.#permissionsPolicies,
+      adScriptAncestry: this.#adScriptAncestry,
+      linkifier: this.#linkifier,
+      linkTargetDOMNode,
+      trials: await frame.getOriginTrials(),
+      securityIsolationInfo,
+      onRevealInNetwork: frameRequest ?
+          () => {
+            const requestLocation = NetworkForward.UIRequestLocation.UIRequestLocation.tab(
+                frameRequest, NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT);
+            return Common.Revealer.reveal(requestLocation);
+          } :
+          undefined,
+      onRevealInSources: async () => {
+        const sourceCode = this.#uiSourceCodeForFrame(frame);
+        if (sourceCode) {
+          await Common.Revealer.reveal(sourceCode);
+        }
+      },
+    };
+    this.#view(input, undefined, this.contentElement);
   }
 
   #uiSourceCodeForFrame(frame: SDK.ResourceTreeModel.ResourceTreeFrame): Workspace.UISourceCode.UISourceCode|null {
@@ -956,11 +933,3 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
     return null;
   }
 }
-
-customElements.define('devtools-resources-frame-details-view', FrameDetailsReportView);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-resources-frame-details-view': FrameDetailsReportView;
-  }
-}

package/front_end/panels/application/{components/OriginTrialTreeView.ts → OriginTrialTreeView.ts}

@@ -2,15 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../ui/components/icon_button/icon_button.js';
-import '../../../ui/legacy/legacy.js';
-import '../../../ui/components/adorners/adorners.js';
+import '../../ui/components/icon_button/icon_button.js';
+import '../../ui/legacy/legacy.js';
+import '../../ui/components/adorners/adorners.js';
 
-import * as i18n from '../../../core/i18n/i18n.js';
-import * as Protocol from '../../../generated/protocol.js';
-import type * as TreeOutline from '../../../ui/components/tree_outline/tree_outline.js';
-import * as UI from '../../../ui/legacy/legacy.js';
-import {Directives, html, type LitTemplate, nothing, render, type TemplateResult} from '../../../ui/lit/lit.js';
+import * as i18n from '../../core/i18n/i18n.js';
+import * as Protocol from '../../generated/protocol.js';
+import type * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, type LitTemplate, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
 
 import originTrialTokenRowsStyles from './originTrialTokenRows.css.js';
 import originTrialTreeViewStyles from './originTrialTreeView.css.js';
@@ -70,7 +70,7 @@ const UIStrings = {
    */
   noTrialTokens: 'No trial tokens',
 } as const;
-const str_ = i18n.i18n.registerUIStrings('panels/application/components/OriginTrialTreeView.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/application/OriginTrialTreeView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 type TreeNode<DataType> = TreeOutline.TreeOutlineUtils.TreeNode<DataType>;

package/front_end/panels/application/application.ts

@@ -12,6 +12,7 @@ import * as DOMStorageItemsView from './DOMStorageItemsView.js';
 import * as DOMStorageModel from './DOMStorageModel.js';
 import * as ExtensionStorageItemsView from './ExtensionStorageItemsView.js';
 import * as ExtensionStorageModel from './ExtensionStorageModel.js';
+import * as FrameDetailsView from './FrameDetailsView.js';
 import * as IndexedDBModel from './IndexedDBModel.js';
 import * as IndexedDBViews from './IndexedDBViews.js';
 import * as InterestGroupStorageModel from './InterestGroupStorageModel.js';
@@ -19,6 +20,7 @@ import * as InterestGroupStorageView from './InterestGroupStorageView.js';
 import * as InterestGroupTreeElement from './InterestGroupTreeElement.js';
 import * as KeyValueStorageItemsView from './KeyValueStorageItemsView.js';
 import * as OpenedWindowDetailsView from './OpenedWindowDetailsView.js';
+import * as OriginTrialTreeView from './OriginTrialTreeView.js';
 import * as PreloadingView from './preloading/PreloadingView.js';
 import * as PreloadingTreeElement from './PreloadingTreeElement.js';
 import * as ReportingApiView from './ReportingApiView.js';
@@ -47,6 +49,7 @@ export {
   DOMStorageModel,
   ExtensionStorageItemsView,
   ExtensionStorageModel,
+  FrameDetailsView,
   IndexedDBModel,
   IndexedDBViews,
   InterestGroupStorageModel,
@@ -54,6 +57,7 @@ export {
   InterestGroupTreeElement,
   KeyValueStorageItemsView,
   OpenedWindowDetailsView,
+  OriginTrialTreeView,
   PreloadingTreeElement,
   PreloadingView,
   ReportingApiView,

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

@@ -108,8 +108,13 @@ export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLEl
           <span class="empty-state-header">${i18nString(UIStrings.noReportsToDisplay)}</span>
           <div class="empty-state-description">
             <span>${i18nString(UIStrings.reportingApiDescription)}</span>
-            ${UI.XLink.XLink.create(REPORTING_API_EXPLANATION_URL, i18nString(UIStrings.learnMore), undefined,
-              undefined, 'learn-more')}
+            <x-link
+              class="devtools-link"
+              href=${REPORTING_API_EXPLANATION_URL}
+              jslog=${VisualLogging.link()
+                      .track({ click: true, keydown: 'Enter|Space' })
+                      .context('learn-more')}
+            >${i18nString(UIStrings.learnMore)}</x-link>
           </div>
         </div>
       `}

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

@@ -97,9 +97,11 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           <div class="empty-state-header">${i18nString(UIStrings.noEvents)}</div>
           <div class="empty-state-description">
             <span>${i18nString(UIStrings.sharedStorageDescription)}</span>
-            ${
-          UI.XLink.XLink.create(
-              SHARED_STORAGE_EXPLANATION_URL, i18nString(UIStrings.learnMore), 'x-link', undefined, 'learn-more')}
+            <x-link
+              class="x-link devtools-link"
+              href=${SHARED_STORAGE_EXPLANATION_URL}
+              jslog=${VisualLogging.link().track({click: true, keydown: 'Enter|Space'}).context('learn-more')}
+            >${i18nString(UIStrings.learnMore)}</x-link>
           </div>
         </div>`
       : html`

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

@@ -40,7 +40,10 @@ const str_ = i18n.i18n.registerUIStrings('panels/application/components/StackTra
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface StackTraceData {
-  frame: SDK.ResourceTreeModel.ResourceTreeFrame;
+  creationStackTraceData: {
+    creationStackTrace: Protocol.Runtime.StackTrace|null,
+    creationStackTraceTarget: SDK.Target.Target|null,
+  };
   buildStackTraceRows: (
       stackTrace: Protocol.Runtime.StackTrace,
       target: SDK.Target.Target|null,
@@ -135,8 +138,7 @@ export class StackTrace extends HTMLElement {
   #showHidden = false;
 
   set data(data: StackTraceData) {
-    const frame = data.frame;
-    const {creationStackTrace, creationStackTraceTarget} = frame.getCreationStackTraceData();
+    const {creationStackTrace, creationStackTraceTarget} = data.creationStackTraceData;
     if (creationStackTrace) {
       this.#stackTraceRows = data.buildStackTraceRows(
           creationStackTrace, creationStackTraceTarget, this.#linkifier, true,

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

@@ -115,7 +115,13 @@ export class TrustTokensView extends LegacyWrapper.LegacyWrapper.WrappableCompon
           <div class="empty-state-header">${i18nString(UIStrings.noTrustTokens)}</div>
           <div class="empty-state-description">
             <span>${i18nString(UIStrings.trustTokensDescription)}</span>
-            ${UI.XLink.XLink.create(PRIVATE_STATE_TOKENS_EXPLANATION_URL, i18nString(UIStrings.learnMore), 'x-link', undefined, 'learn-more')}
+            <x-link
+              class="x-link devtools-link"
+              href=${PRIVATE_STATE_TOKENS_EXPLANATION_URL}
+              jslog=${VisualLogging.link()
+                      .track({ click: true, keydown: 'Enter|Space' })
+                      .context('learn-more')}
+            >${i18nString(UIStrings.learnMore)}</x-link>
           </div>
         </div>
       `;

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

@@ -5,9 +5,8 @@
 import * as BackForwardCacheView from './BackForwardCacheView.js';
 import * as BounceTrackingMitigationsView from './BounceTrackingMitigationsView.js';
 import * as EndpointsGrid from './EndpointsGrid.js';
-import * as FrameDetailsView from './FrameDetailsView.js';
 import * as InterestGroupAccessGrid from './InterestGroupAccessGrid.js';
-import * as OriginTrialTreeView from './OriginTrialTreeView.js';
+import * as PermissionsPolicySection from './PermissionsPolicySection.js';
 import * as ProtocolHandlersView from './ProtocolHandlersView.js';
 import * as ReportsGrid from './ReportsGrid.js';
 import * as ServiceWorkerRouterView from './ServiceWorkerRouterView.js';
@@ -21,9 +20,8 @@ export {
   BackForwardCacheView,
   BounceTrackingMitigationsView,
   EndpointsGrid,
-  FrameDetailsView,
   InterestGroupAccessGrid,
-  OriginTrialTreeView,
+  PermissionsPolicySection,
   ProtocolHandlersView,
   ReportsGrid,
   ServiceWorkerRouterView,

package/front_end/panels/application/{components/frameDetailsReportView.css → frameDetailsReportView.css}

@@ -4,6 +4,10 @@
  * found in the LICENSE file.
  */
 
+:host {
+  overflow: auto;
+}
+
 .text-ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -111,4 +115,4 @@ button.text-link {
     color: linktext;
     text-decoration-color: linktext;
   }
-}
+}