chrome-devtools-frontend 1.0.1543082 → 1.0.1544076

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

@@ -9,7 +9,7 @@ import './StackTrace.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
-import * as Platform from '../../../core/platform/platform.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';
@@ -24,7 +24,7 @@ import * as RenderCoordinator from '../../../ui/components/render_coordinator/re
 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 * as Lit from '../../../ui/lit/lit.js';
+import {Directives, html, type LitTemplate, nothing, render} from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import frameDetailsReportViewStyles from './frameDetailsReportView.css.js';
@@ -35,7 +35,7 @@ import {
 } from './PermissionsPolicySection.js';
 import type {StackTraceData} from './StackTrace.js';
 
-const {html} = Lit;
+const {until} = Directives;
 const {widgetConfig} = UI.Widget;
 
 const UIStrings = {
@@ -278,85 +278,50 @@ export interface FrameDetailsReportViewData {
   adScriptAncestry: Protocol.Page.AdScriptAncestry|null;
 }
 
-export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #frame?: SDK.ResourceTreeModel.ResourceTreeFrame;
-  #target: SDK.Target.Target|null = null;
-  #protocolMonitorExperimentEnabled = false;
-  #permissionsPolicies: Promise<Protocol.Page.PermissionsPolicyFeatureState[]|null>|null = null;
-  #permissionsPolicySectionData: PermissionsPolicySectionData = {policies: [], showDetails: false};
-  #linkifier = new Components.Linkifier.Linkifier();
-  #adScriptAncestry: Protocol.Page.AdScriptAncestry|null = null;
+interface FrameDetailsViewInput {
+  frame: SDK.ResourceTreeModel.ResourceTreeFrame;
+  target: SDK.Target.Target|null;
+  adScriptAncestry: Protocol.Page.AdScriptAncestry|null;
+  linkTargetDOMNode?: Promise<SDK.DOMModel.DOMNode|null>;
+  permissionsPolicies: Promise<Protocol.Page.PermissionsPolicyFeatureState[]|null>|null;
+  protocolMonitorExperimentEnabled: boolean;
+  trials: Protocol.Page.OriginTrial[]|null;
+  securityIsolationInfo?: Promise<Protocol.Network.SecurityIsolationStatus|null>;
+  onRevealInSources: () => void;
+}
 
-  constructor(frame: SDK.ResourceTreeModel.ResourceTreeFrame) {
-    super();
-    this.#frame = frame;
-    void this.render();
+function renderFrameDetailsView(input: FrameDetailsViewInput, target: ShadowRoot): void {
+  if (!input.frame) {
+    return;
   }
+  // clang-format off
+  render(html`
+    <style>${frameDetailsReportViewStyles}</style>
+    <devtools-report .data=${{reportTitle: input.frame.displayName()} as ReportView.ReportView.ReportData}
+    jslog=${VisualLogging.pane('frames')}>
+      ${renderDocumentSection(input)}
+      ${renderIsolationSection(input)}
+      ${renderApiAvailabilitySection(input.frame)}
+      ${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>
+        `), nothing)}
+      ${input.protocolMonitorExperimentEnabled ? renderAdditionalInfoSection(input.frame) : nothing}
+    </devtools-report>
+  `, target);
+  // clang-format on
+}
 
-  connectedCallback(): void {
-    this.parentElement?.classList.add('overflow-auto');
-    this.#protocolMonitorExperimentEnabled = Root.Runtime.experiments.isEnabled('protocol-monitor');
-  }
-
-  override async render(): Promise<void> {
-    const result = await this.#frame?.parentFrame()?.getAdScriptAncestry(this.#frame?.id);
-    if (result && result.ancestryChain.length > 0) {
-      this.#adScriptAncestry = result;
-
-      // Obtain the Target associated with the first ad script, because in most scenarios all
-      // scripts share the same debuggerId. However, discrepancies might arise when content scripts
-      // from browser extensions are involved. We will monitor the debugging experiences and revisit
-      // this approach if it proves problematic.
-      const firstScript = this.#adScriptAncestry.ancestryChain[0];
-      const debuggerModel = firstScript?.debuggerId ?
-          await SDK.DebuggerModel.DebuggerModel.modelForDebuggerId(firstScript.debuggerId) :
-          null;
-      this.#target = debuggerModel?.target() ?? null;
-    }
-
-    if (!this.#permissionsPolicies && this.#frame) {
-      this.#permissionsPolicies = this.#frame.getPermissionsPolicyState();
-    }
-    await RenderCoordinator.write('FrameDetailsView render', async () => {
-      if (!this.#frame) {
-        return;
-      }
-
-      // Disabled until https://crbug.com/1079231 is fixed.
-      // clang-format off
-      Lit.render(html`
-        <style>${frameDetailsReportViewStyles}</style>
-        <devtools-report .data=${{reportTitle: this.#frame.displayName()} as ReportView.ReportView.ReportData}
-        jslog=${VisualLogging.pane('frames')}>
-          ${this.#renderDocumentSection()}
-          ${this.#renderIsolationSection()}
-          ${this.#renderApiAvailabilitySection()}
-          ${await this.#renderOriginTrial()}
-          ${Lit.Directives.until(this.#permissionsPolicies?.then(policies => {
-            this.#permissionsPolicySectionData.policies = policies || [];
-            return html`
-              <devtools-resources-permissions-policy-section
-                .data=${this.#permissionsPolicySectionData}
-              >
-              </devtools-resources-permissions-policy-section>
-            `;
-          }), Lit.nothing)}
-          ${this.#protocolMonitorExperimentEnabled ? this.#renderAdditionalInfoSection() : Lit.nothing}
-        </devtools-report>
-      `, this.#shadow, {host: this});
-      // clang-format on
-    });
+function renderOriginTrial(trials: Protocol.Page.OriginTrial[]|null): LitTemplate {
+  if (!trials) {
+    return nothing;
   }
 
-  async #renderOriginTrial(): Promise<Lit.LitTemplate> {
-    if (!this.#frame) {
-      return Lit.nothing;
-    }
-
-    const data = {trials: await this.#frame.getOriginTrials()};
-    // clang-format off
-    return html`
+  const data = {trials};
+  // clang-format off
+  return html`
     <devtools-report-section-header>
       ${i18n.i18n.lockedString('Origin trials')}
     </devtools-report-section-header>
@@ -372,166 +337,146 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
     <devtools-widget class="span-cols" .widgetConfig=${widgetConfig(OriginTrialTreeView, {data})}>
     </devtools-widget>
     <devtools-report-divider></devtools-report-divider>`;
-    // clang-format on
-  }
+  // clang-format on
+}
 
-  #renderDocumentSection(): Lit.LitTemplate {
-    if (!this.#frame) {
-      return Lit.nothing;
-    }
+function renderDocumentSection(input: FrameDetailsViewInput): LitTemplate {
+  if (!input.frame) {
+    return nothing;
+  }
 
-    return html`
+  return html`
       <devtools-report-section-header>${i18nString(UIStrings.document)}</devtools-report-section-header>
       <devtools-report-key>${i18nString(UIStrings.url)}</devtools-report-key>
       <devtools-report-value>
         <div class="inline-items">
-          ${this.#maybeRenderSourcesLinkForURL()}
-          ${this.#maybeRenderNetworkLinkForURL()}
-          <div class="text-ellipsis" title=${this.#frame.url}>${this.#frame.url}</div>
+          ${maybeRenderSourcesLinkForURL(input.frame, input.onRevealInSources)}
+          ${maybeRenderNetworkLinkForURL(input.frame)}
+          <div class="text-ellipsis" title=${input.frame.url}>${input.frame.url}</div>
         </div>
       </devtools-report-value>
-      ${this.#maybeRenderUnreachableURL()}
-      ${this.#maybeRenderOrigin()}
-      ${Lit.Directives.until(this.#renderOwnerElement(), Lit.nothing)}
-      ${this.#maybeRenderCreationStacktrace()}
-      ${this.#maybeRenderAdStatus()}
-      ${this.#maybeRenderCreatorAdScriptAncestry()}
+      ${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)}
       <devtools-report-divider></devtools-report-divider>
     `;
-  }
+}
 
-  #maybeRenderSourcesLinkForURL(): Lit.LitTemplate {
-    const frame = this.#frame;
-    if (!frame || frame.unreachableUrl()) {
-      return Lit.nothing;
-    }
-    return renderIconLink(
-        'label',
-        i18nString(UIStrings.clickToOpenInSourcesPanel),
-        async () => {
-          const sourceCode = this.#uiSourceCodeForFrame(frame);
-          if (sourceCode) {
-            await Common.Revealer.reveal(sourceCode);
-          }
-        },
-        'reveal-in-sources',
-    );
-  }
-
-  #maybeRenderNetworkLinkForURL(): Lit.LitTemplate {
-    if (this.#frame) {
-      const resource = this.#frame.resourceForURL(this.#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 Lit.nothing;
+function maybeRenderSourcesLinkForURL(
+    frame: SDK.ResourceTreeModel.ResourceTreeFrame|null, onRevealInSources: () => void): LitTemplate {
+  if (!frame || frame.unreachableUrl()) {
+    return nothing;
   }
+  return renderIconLink(
+      'label',
+      i18nString(UIStrings.clickToOpenInSourcesPanel),
+      onRevealInSources,
+      'reveal-in-sources',
+  );
+}
 
-  #uiSourceCodeForFrame(frame: SDK.ResourceTreeModel.ResourceTreeFrame): Workspace.UISourceCode.UISourceCode|null {
-    for (const project of Workspace.Workspace.WorkspaceImpl.instance().projects()) {
-      const projectTarget = Bindings.NetworkProject.NetworkProject.getTargetForProject(project);
-      if (projectTarget && projectTarget === frame.resourceTreeModel().target()) {
-        const uiSourceCode = project.uiSourceCodeForURL(frame.url);
-        if (uiSourceCode) {
-          return uiSourceCode;
-        }
-      }
+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 null;
   }
+  return nothing;
+}
 
-  #maybeRenderUnreachableURL(): Lit.LitTemplate {
-    if (!this.#frame || !this.#frame.unreachableUrl()) {
-      return Lit.nothing;
-    }
-    return html`
+function maybeRenderUnreachableURL(frame: SDK.ResourceTreeModel.ResourceTreeFrame|null): LitTemplate {
+  if (!frame?.unreachableUrl()) {
+    return nothing;
+  }
+  return html`
       <devtools-report-key>${i18nString(UIStrings.unreachableUrl)}</devtools-report-key>
       <devtools-report-value>
         <div class="inline-items">
-          ${this.#renderNetworkLinkForUnreachableURL()}
-          <div class="text-ellipsis" title=${this.#frame.unreachableUrl()}>${this.#frame.unreachableUrl()}</div>
+          ${renderNetworkLinkForUnreachableURL(frame)}
+          <div class="text-ellipsis" title=${frame.unreachableUrl()}>${frame.unreachableUrl()}</div>
         </div>
       </devtools-report-value>
     `;
-  }
+}
 
-  #renderNetworkLinkForUnreachableURL(): Lit.LitTemplate {
-    if (this.#frame) {
-      const unreachableUrl = Common.ParsedURL.ParsedURL.fromString(this.#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(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',
+      );
     }
-    return Lit.nothing;
   }
+  return nothing;
+}
 
-  #maybeRenderOrigin(): Lit.LitTemplate {
-    if (this.#frame && this.#frame.securityOrigin && this.#frame.securityOrigin !== '://') {
-      return html`
+function maybeRenderOrigin(frame: SDK.ResourceTreeModel.ResourceTreeFrame|null): LitTemplate {
+  if (frame?.securityOrigin && frame?.securityOrigin !== '://') {
+    return html`
         <devtools-report-key>${i18nString(UIStrings.origin)}</devtools-report-key>
         <devtools-report-value>
-          <div class="text-ellipsis" title=${this.#frame.securityOrigin}>${this.#frame.securityOrigin}</div>
+          <div class="text-ellipsis" title=${frame.securityOrigin}>${frame.securityOrigin}</div>
         </devtools-report-value>
       `;
-    }
-    return Lit.nothing;
-  }
-
-  async #renderOwnerElement(): Promise<Lit.LitTemplate> {
-    if (this.#frame) {
-      const linkTargetDOMNode = await this.#frame.getOwnerDOMNodeOrDocument();
-      if (linkTargetDOMNode) {
-        // Disabled until https://crbug.com/1079231 is fixed.
-        // clang-format off
-        return html`
-          <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=${() => this.#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>
-            </div>
-          </devtools-report-value>
-        `;
-        // clang-format on
-      }
-    }
-    return Lit.nothing;
   }
+  return nothing;
+}
+
+function renderOwnerElement(
+    frame: SDK.ResourceTreeModel.ResourceTreeFrame|null, linkTargetDOMNode: SDK.DOMModel.DOMNode|null): LitTemplate {
+  if (linkTargetDOMNode) {
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+      return html`
+        <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>
+          </div>
+        </devtools-report-value>
+      `;
+    // clang-format on
+  }
+  return nothing;
+}
 
-  #maybeRenderCreationStacktrace(): Lit.LitTemplate {
-    const creationStackTraceData = this.#frame?.getCreationStackTraceData();
-    if (creationStackTraceData?.creationStackTrace) {
-      // Disabled until https://crbug.com/1079231 is fixed.
-      // clang-format off
+function maybeRenderCreationStacktrace(frame: SDK.ResourceTreeModel.ResourceTreeFrame|null): LitTemplate {
+  const creationStackTraceData = frame?.getCreationStackTraceData();
+  if (creationStackTraceData?.creationStackTrace) {
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
       return html`
         <devtools-report-key title=${i18nString(UIStrings.creationStackTraceExplanation)}>${
           i18nString(UIStrings.creationStackTrace)}</devtools-report-key>
@@ -539,54 +484,54 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
         jslog=${VisualLogging.section('frame-creation-stack-trace')}
         >
           <devtools-resources-stack-trace .data=${{
-            frame: this.#frame,
+            frame,
             buildStackTraceRows: Components.JSPresentationUtils.buildStackTraceRowsForLegacyRuntimeStackTrace,
           } as StackTraceData}>
           </devtools-resources-stack-trace>
         </devtools-report-value>
       `;
-      // clang-format on
-    }
-    return Lit.nothing;
+    // clang-format on
   }
+  return nothing;
+}
 
-  #getAdFrameTypeStrings(type: Protocol.Page.AdFrameType.Child|Protocol.Page.AdFrameType.Root):
-      {value: Platform.UIString.LocalizedString, description: Platform.UIString.LocalizedString} {
-    switch (type) {
-      case Protocol.Page.AdFrameType.Child:
-        return {value: i18nString(UIStrings.child), description: i18nString(UIStrings.childDescription)};
-      case Protocol.Page.AdFrameType.Root:
-        return {value: i18nString(UIStrings.root), description: i18nString(UIStrings.rootDescription)};
-    }
+function getAdFrameTypeStrings(type: Protocol.Page.AdFrameType.Child|Protocol.Page.AdFrameType.Root):
+    {value: Platform.UIString.LocalizedString, description: Platform.UIString.LocalizedString} {
+  switch (type) {
+    case Protocol.Page.AdFrameType.Child:
+      return {value: i18nString(UIStrings.child), description: i18nString(UIStrings.childDescription)};
+    case Protocol.Page.AdFrameType.Root:
+      return {value: i18nString(UIStrings.root), description: i18nString(UIStrings.rootDescription)};
   }
+}
 
-  #getAdFrameExplanationString(explanation: Protocol.Page.AdFrameExplanation): Platform.UIString.LocalizedString {
-    switch (explanation) {
-      case Protocol.Page.AdFrameExplanation.CreatedByAdScript:
-        return i18nString(UIStrings.createdByAdScriptExplanation);
-      case Protocol.Page.AdFrameExplanation.MatchedBlockingRule:
-        return i18nString(UIStrings.matchedBlockingRuleExplanation);
-      case Protocol.Page.AdFrameExplanation.ParentIsAd:
-        return i18nString(UIStrings.parentIsAdExplanation);
-    }
+function getAdFrameExplanationString(explanation: Protocol.Page.AdFrameExplanation): Platform.UIString.LocalizedString {
+  switch (explanation) {
+    case Protocol.Page.AdFrameExplanation.CreatedByAdScript:
+      return i18nString(UIStrings.createdByAdScriptExplanation);
+    case Protocol.Page.AdFrameExplanation.MatchedBlockingRule:
+      return i18nString(UIStrings.matchedBlockingRuleExplanation);
+    case Protocol.Page.AdFrameExplanation.ParentIsAd:
+      return i18nString(UIStrings.parentIsAdExplanation);
   }
+}
 
-  #maybeRenderAdStatus(): Lit.LitTemplate {
-    if (!this.#frame) {
-      return Lit.nothing;
-    }
-    const adFrameType = this.#frame.adFrameType();
-    if (adFrameType === Protocol.Page.AdFrameType.None) {
-      return Lit.nothing;
-    }
-    const typeStrings = this.#getAdFrameTypeStrings(adFrameType);
-    const rows = [html`<div title=${typeStrings.description}>${typeStrings.value}</div>`];
-    for (const explanation of this.#frame.adFrameStatus()?.explanations || []) {
-      rows.push(html`<div>${this.#getAdFrameExplanationString(explanation)}</div>`);
-    }
+function maybeRenderAdStatus(frame: SDK.ResourceTreeModel.ResourceTreeFrame|null): LitTemplate {
+  if (!frame) {
+    return nothing;
+  }
+  const adFrameType = frame.adFrameType();
+  if (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 || []) {
+    rows.push(html`<div>${getAdFrameExplanationString(explanation)}</div>`);
+  }
 
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
+  // Disabled until https://crbug.com/1079231 is fixed.
+  // clang-format off
     return html`
       <devtools-report-key>${i18nString(UIStrings.adStatus)}</devtools-report-key>
       <devtools-report-value class="ad-status-list" jslog=${VisualLogging.section('ad-status')}>
@@ -594,40 +539,39 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
           {rows, title: i18nString(UIStrings.adStatus)} as ExpandableList.ExpandableList.ExpandableListData}>
         </devtools-expandable-list>
       </devtools-report-value>`;
-    // clang-format on
-  }
-
-  #maybeRenderCreatorAdScriptAncestry(): Lit.LitTemplate {
-    if (!this.#frame) {
-      return Lit.nothing;
-    }
-    const adFrameType = this.#frame.adFrameType();
-    if (adFrameType === Protocol.Page.AdFrameType.None) {
-      return Lit.nothing;
-    }
-
-    if (!this.#target || !this.#adScriptAncestry || this.#adScriptAncestry.ancestryChain.length === 0) {
-      return Lit.nothing;
-    }
-
-    const rows = this.#adScriptAncestry.ancestryChain.map(adScriptId => {
-      const adScriptLinkElement = this.#linkifier.linkifyScriptLocation(
-          this.#target,
-          adScriptId.scriptId || null,
-          Platform.DevToolsPath.EmptyUrlString,
-          undefined,
-          undefined,
-      );
-
-      adScriptLinkElement?.setAttribute('jslog', `${VisualLogging.link('ad-script').track({click: true})}`);
+  // clang-format on
+}
 
-      return html`<div>${adScriptLinkElement}</div>`;
-    });
+function maybeRenderCreatorAdScriptAncestry(
+    frame: SDK.ResourceTreeModel.ResourceTreeFrame|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;
+  }
 
-    const shouldRenderFilterlistRule = (this.#adScriptAncestry.rootScriptFilterlistRule !== undefined);
+  if (!target || !adScriptAncestry || adScriptAncestry.ancestryChain.length === 0) {
+    return nothing;
+  }
 
+  const rows = adScriptAncestry.ancestryChain.map(adScriptId => {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
+    return html`<div>
+      <devtools-widget .widgetConfig=${widgetConfig(Components.Linkifier.ScriptLocationLink, {
+        target, scriptId: adScriptId.scriptId, options: {jslogContext: 'ad-script'}})}>
+      </devtools-widget>
+    </div>`;
+    // clang-format on
+  });
+
+  const shouldRenderFilterlistRule = (adScriptAncestry.rootScriptFilterlistRule !== undefined);
+
+  // Disabled until https://crbug.com/1079231 is fixed.
+  // clang-format off
     return html`
       <devtools-report-key>${i18nString(UIStrings.creatorAdScriptAncestry)}</devtools-report-key>
       <devtools-report-value class="creator-ad-script-ancestry-list" jslog=${VisualLogging.section('creator-ad-script-ancestry')}>
@@ -637,142 +581,138 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
       </devtools-report-value>
       ${shouldRenderFilterlistRule ? html`
         <devtools-report-key>${i18nString(UIStrings.rootScriptFilterlistRule)}</devtools-report-key>
-        <devtools-report-value jslog=${VisualLogging.section('root-script-filterlist-rule')}>${this.#adScriptAncestry.rootScriptFilterlistRule}</devtools-report-value>
-      ` : Lit.nothing}
+        <devtools-report-value jslog=${VisualLogging.section('root-script-filterlist-rule')}>${adScriptAncestry.rootScriptFilterlistRule}</devtools-report-value>
+      ` : nothing}
     `;
-    // clang-format on
-  }
+  // clang-format on
+}
 
-  #renderIsolationSection(): Lit.LitTemplate {
-    if (!this.#frame) {
-      return Lit.nothing;
-    }
-    return html`
+function renderIsolationSection(input: FrameDetailsViewInput): LitTemplate {
+  if (!input.frame) {
+    return nothing;
+  }
+  return html`
       <devtools-report-section-header>${i18nString(UIStrings.securityIsolation)}</devtools-report-section-header>
       <devtools-report-key>${i18nString(UIStrings.secureContext)}</devtools-report-key>
       <devtools-report-value>
-        ${this.#frame.isSecureContext() ? i18nString(UIStrings.yes) : i18nString(UIStrings.no)}\xA0${
-        this.#maybeRenderSecureContextExplanation()}
+        ${input.frame.isSecureContext() ? i18nString(UIStrings.yes) : i18nString(UIStrings.no)}\xA0${
+      maybeRenderSecureContextExplanation(input.frame)}
       </devtools-report-value>
       <devtools-report-key>${i18nString(UIStrings.crossoriginIsolated)}</devtools-report-key>
       <devtools-report-value>
-        ${this.#frame.isCrossOriginIsolated() ? i18nString(UIStrings.yes) : i18nString(UIStrings.no)}
+        ${input.frame.isCrossOriginIsolated() ? i18nString(UIStrings.yes) : i18nString(UIStrings.no)}
       </devtools-report-value>
-      ${Lit.Directives.until(this.#maybeRenderCoopCoepCSPStatus(), Lit.nothing)}
+      ${until(input.securityIsolationInfo?.then?.(value => maybeRenderCoopCoepCSPStatus(value)), nothing)}
       <devtools-report-divider></devtools-report-divider>
     `;
+}
+
+function maybeRenderSecureContextExplanation(frame: SDK.ResourceTreeModel.ResourceTreeFrame|null): LitTemplate {
+  const explanation = getSecureContextExplanation(frame);
+  if (explanation) {
+    return html`<span class="inline-comment">${explanation}</span>`;
   }
+  return nothing;
+}
 
-  #maybeRenderSecureContextExplanation(): Lit.LitTemplate {
-    const explanation = this.#getSecureContextExplanation();
-    if (explanation) {
-      return html`<span class="inline-comment">${explanation}</span>`;
-    }
-    return Lit.nothing;
-  }
-
-  #getSecureContextExplanation(): Platform.UIString.LocalizedString|null {
-    switch (this.#frame?.getSecureContextType()) {
-      case Protocol.Page.SecureContextType.Secure:
-        return null;
-      case Protocol.Page.SecureContextType.SecureLocalhost:
-        return i18nString(UIStrings.localhostIsAlwaysASecureContext);
-      case Protocol.Page.SecureContextType.InsecureAncestor:
-        return i18nString(UIStrings.aFrameAncestorIsAnInsecure);
-      case Protocol.Page.SecureContextType.InsecureScheme:
-        return i18nString(UIStrings.theFramesSchemeIsInsecure);
-    }
-    return null;
+function getSecureContextExplanation(frame: SDK.ResourceTreeModel.ResourceTreeFrame|null):
+    Platform.UIString.LocalizedString|null {
+  switch (frame?.getSecureContextType()) {
+    case Protocol.Page.SecureContextType.Secure:
+      return null;
+    case Protocol.Page.SecureContextType.SecureLocalhost:
+      return i18nString(UIStrings.localhostIsAlwaysASecureContext);
+    case Protocol.Page.SecureContextType.InsecureAncestor:
+      return i18nString(UIStrings.aFrameAncestorIsAnInsecure);
+    case Protocol.Page.SecureContextType.InsecureScheme:
+      return i18nString(UIStrings.theFramesSchemeIsInsecure);
   }
+  return null;
+}
 
-  async #maybeRenderCoopCoepCSPStatus(): Promise<Lit.LitTemplate> {
-    if (this.#frame) {
-      const model = this.#frame.resourceTreeModel().target().model(SDK.NetworkManager.NetworkManager);
-      const info = model && await model.getSecurityIsolationStatus(this.#frame.id);
-      if (info) {
-        return html`
+async function maybeRenderCoopCoepCSPStatus(info: Protocol.Network.SecurityIsolationStatus|null): Promise<LitTemplate> {
+  if (info) {
+    return html`
           ${
-            this.#maybeRenderCrossOriginStatus(
-                info.coep, i18n.i18n.lockedString('Cross-Origin Embedder Policy (COEP)'),
-                Protocol.Network.CrossOriginEmbedderPolicyValue.None)}
+        maybeRenderCrossOriginStatus(
+            info.coep, i18n.i18n.lockedString('Cross-Origin Embedder Policy (COEP)'),
+            Protocol.Network.CrossOriginEmbedderPolicyValue.None)}
           ${
-            this.#maybeRenderCrossOriginStatus(
-                info.coop, i18n.i18n.lockedString('Cross-Origin Opener Policy (COOP)'),
-                Protocol.Network.CrossOriginOpenerPolicyValue.UnsafeNone)}
-          ${this.#renderCSPSection(info.csp)}
+        maybeRenderCrossOriginStatus(
+            info.coop, i18n.i18n.lockedString('Cross-Origin Opener Policy (COOP)'),
+            Protocol.Network.CrossOriginOpenerPolicyValue.UnsafeNone)}
+          ${renderCSPSection(info.csp)}
         `;
-      }
-    }
-    return Lit.nothing;
   }
+  return nothing;
+}
 
-  #maybeRenderCrossOriginStatus(
-      info: Protocol.Network.CrossOriginEmbedderPolicyStatus|Protocol.Network.CrossOriginOpenerPolicyStatus|undefined,
-      policyName: string,
-      noneValue: Protocol.Network.CrossOriginEmbedderPolicyValue|
-      Protocol.Network.CrossOriginOpenerPolicyValue): Lit.LitTemplate {
-    if (!info) {
-      return Lit.nothing;
-    }
-    function crossOriginValueToString(
-        value: Protocol.Network.CrossOriginEmbedderPolicyValue|Protocol.Network.CrossOriginOpenerPolicyValue): string {
-      switch (value) {
-        case Protocol.Network.CrossOriginEmbedderPolicyValue.Credentialless:
-          return 'credentialless';
-        case Protocol.Network.CrossOriginEmbedderPolicyValue.None:
-          return 'none';
-        case Protocol.Network.CrossOriginEmbedderPolicyValue.RequireCorp:
-          return 'require-corp';
-        case Protocol.Network.CrossOriginOpenerPolicyValue.NoopenerAllowPopups:
-          return 'noopenener-allow-popups';
-        case Protocol.Network.CrossOriginOpenerPolicyValue.SameOrigin:
-          return 'same-origin';
-        case Protocol.Network.CrossOriginOpenerPolicyValue.SameOriginAllowPopups:
-          return 'same-origin-allow-popups';
-        case Protocol.Network.CrossOriginOpenerPolicyValue.SameOriginPlusCoep:
-          return 'same-origin-plus-coep';
-        case Protocol.Network.CrossOriginOpenerPolicyValue.RestrictProperties:
-          return 'restrict-properties';
-        case Protocol.Network.CrossOriginOpenerPolicyValue.RestrictPropertiesPlusCoep:
-          return 'restrict-properties-plus-coep';
-        case Protocol.Network.CrossOriginOpenerPolicyValue.UnsafeNone:
-          return 'unsafe-none';
-      }
+function maybeRenderCrossOriginStatus(
+    info: Protocol.Network.CrossOriginEmbedderPolicyStatus|Protocol.Network.CrossOriginOpenerPolicyStatus|undefined,
+    policyName: string,
+    noneValue: Protocol.Network.CrossOriginEmbedderPolicyValue|
+    Protocol.Network.CrossOriginOpenerPolicyValue): LitTemplate {
+  if (!info) {
+    return nothing;
+  }
+  function crossOriginValueToString(
+      value: Protocol.Network.CrossOriginEmbedderPolicyValue|Protocol.Network.CrossOriginOpenerPolicyValue): string {
+    switch (value) {
+      case Protocol.Network.CrossOriginEmbedderPolicyValue.Credentialless:
+        return 'credentialless';
+      case Protocol.Network.CrossOriginEmbedderPolicyValue.None:
+        return 'none';
+      case Protocol.Network.CrossOriginEmbedderPolicyValue.RequireCorp:
+        return 'require-corp';
+      case Protocol.Network.CrossOriginOpenerPolicyValue.NoopenerAllowPopups:
+        return 'noopenener-allow-popups';
+      case Protocol.Network.CrossOriginOpenerPolicyValue.SameOrigin:
+        return 'same-origin';
+      case Protocol.Network.CrossOriginOpenerPolicyValue.SameOriginAllowPopups:
+        return 'same-origin-allow-popups';
+      case Protocol.Network.CrossOriginOpenerPolicyValue.SameOriginPlusCoep:
+        return 'same-origin-plus-coep';
+      case Protocol.Network.CrossOriginOpenerPolicyValue.RestrictProperties:
+        return 'restrict-properties';
+      case Protocol.Network.CrossOriginOpenerPolicyValue.RestrictPropertiesPlusCoep:
+        return 'restrict-properties-plus-coep';
+      case Protocol.Network.CrossOriginOpenerPolicyValue.UnsafeNone:
+        return 'unsafe-none';
     }
+  }
 
-    const isEnabled = info.value !== noneValue;
-    const isReportOnly = (!isEnabled && info.reportOnlyValue !== noneValue);
-    const endpoint = isEnabled ? info.reportingEndpoint : info.reportOnlyReportingEndpoint;
-    return html`
+  const isEnabled = info.value !== noneValue;
+  const isReportOnly = (!isEnabled && info.reportOnlyValue !== noneValue);
+  const endpoint = isEnabled ? info.reportingEndpoint : info.reportOnlyReportingEndpoint;
+  return html`
       <devtools-report-key>${policyName}</devtools-report-key>
       <devtools-report-value>
         ${crossOriginValueToString(isEnabled ? info.value : info.reportOnlyValue)}
-        ${isReportOnly ? html`<span class="inline-comment">report-only</span>` : Lit.nothing}
-        ${
-        endpoint ? html`<span class="inline-name">${i18nString(UIStrings.reportingTo)}</span>${endpoint}` : Lit.nothing}
+        ${isReportOnly ? html`<span class="inline-comment">report-only</span>` : nothing}
+        ${endpoint ? html`<span class="inline-name">${i18nString(UIStrings.reportingTo)}</span>${endpoint}` : nothing}
       </devtools-report-value>
     `;
-  }
+}
 
-  #renderEffectiveDirectives(directives: string): Lit.LitTemplate[] {
-    const parsedDirectives = new CspEvaluator.CspParser.CspParser(directives).csp.directives;
-    const result = [];
-    for (const directive in parsedDirectives) {
-      // Disabled until https://crbug.com/1079231 is fixed.
-      // clang-format off
+function renderEffectiveDirectives(directives: string): LitTemplate[] {
+  const parsedDirectives = new CspEvaluator.CspParser.CspParser(directives).csp.directives;
+  const result = [];
+  for (const directive in parsedDirectives) {
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
       result.push(html`
           <div>
             <span class="bold">${directive}</span>
             ${': ' + parsedDirectives[directive]?.join(', ')}
           </div>`);
-      // clang-format on
-    }
-    return result;
+    // clang-format on
   }
+  return result;
+}
 
-  #renderSingleCSP(cspInfo: Protocol.Network.ContentSecurityPolicyStatus, divider: boolean): Lit.LitTemplate {
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
+function renderSingleCSP(cspInfo: Protocol.Network.ContentSecurityPolicyStatus, divider: boolean): LitTemplate {
+  // Disabled until https://crbug.com/1079231 is fixed.
+  // clang-format off
     return html`
       <devtools-report-key>
         ${cspInfo.isEnforced ? i18n.i18n.lockedString('Content-Security-Policy') : html`
@@ -789,22 +729,22 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
       <devtools-report-value>
         ${cspInfo.source === Protocol.Network.ContentSecurityPolicySource.HTTP ?
           i18n.i18n.lockedString('HTTP header') : i18n.i18n.lockedString('Meta tag')}
-        ${this.#renderEffectiveDirectives(cspInfo.effectiveDirectives)}
+        ${renderEffectiveDirectives(cspInfo.effectiveDirectives)}
       </devtools-report-value>
-      ${divider ? html`<devtools-report-divider class="subsection-divider"></devtools-report-divider>` : Lit.nothing}
+      ${divider ? html`<devtools-report-divider class="subsection-divider"></devtools-report-divider>` : nothing}
     `;
-    // clang-format on
-  }
+  // clang-format on
+}
 
-  #renderCSPSection(cspInfos: Protocol.Network.ContentSecurityPolicyStatus[]|undefined): Lit.LitTemplate {
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
+function renderCSPSection(cspInfos: Protocol.Network.ContentSecurityPolicyStatus[]|undefined): LitTemplate {
+  // Disabled until https://crbug.com/1079231 is fixed.
+  // clang-format off
     return html`
       <devtools-report-divider></devtools-report-divider>
       <devtools-report-section-header>
         ${i18nString(UIStrings.contentSecurityPolicy)}
       </devtools-report-section-header>
-      ${(cspInfos?.length) ? cspInfos.map((cspInfo, index) => this.#renderSingleCSP(cspInfo, index < cspInfos?.length - 1)) : html`
+      ${(cspInfos?.length) ? cspInfos.map((cspInfo, index) => renderSingleCSP(cspInfo, index < cspInfos?.length - 1)) : html`
         <devtools-report-key>
           ${i18n.i18n.lockedString('Content-Security-Policy')}
         </devtools-report-key>
@@ -813,16 +753,16 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
         </devtools-report-value>
       `}
     `;
-    // clang-format on
-  }
+  // clang-format on
+}
 
-  #renderApiAvailabilitySection(): Lit.LitTemplate {
-    if (!this.#frame) {
-      return Lit.nothing;
-    }
+function renderApiAvailabilitySection(frame: SDK.ResourceTreeModel.ResourceTreeFrame|null): LitTemplate {
+  if (!frame) {
+    return nothing;
+  }
 
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
+  // Disabled until https://crbug.com/1079231 is fixed.
+  // clang-format off
     return html`
       <devtools-report-section-header>
         ${i18nString(UIStrings.apiAvailability)}
@@ -837,102 +777,183 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
           </x-link>
         </span>
       </devtools-report-section>
-      ${this.#renderSharedArrayBufferAvailability()}
-      ${this.#renderMeasureMemoryAvailability()}
+      ${renderSharedArrayBufferAvailability(frame)}
+      ${renderMeasureMemoryAvailability(frame)}
       <devtools-report-divider></devtools-report-divider>`;
-    // clang-format on
-  }
+  // clang-format on
+}
 
-  #renderSharedArrayBufferAvailability(): Lit.LitTemplate {
-    if (this.#frame) {
-      const features = this.#frame.getGatedAPIFeatures();
-      if (features) {
-        const sabAvailable = features.includes(Protocol.Page.GatedAPIFeatures.SharedArrayBuffers);
-        const sabTransferAvailable =
-            sabAvailable && features.includes(Protocol.Page.GatedAPIFeatures.SharedArrayBuffersTransferAllowed);
-        const availabilityText = sabTransferAvailable ?
-            i18nString(UIStrings.availableTransferable) :
-            (sabAvailable ? i18nString(UIStrings.availableNotTransferable) : i18nString(UIStrings.unavailable));
-        const tooltipText = sabTransferAvailable ?
-            i18nString(UIStrings.sharedarraybufferConstructorIs) :
-            (sabAvailable ? i18nString(UIStrings.sharedarraybufferConstructorIsAvailable) : '');
-
-        function renderHint(frame: SDK.ResourceTreeModel.ResourceTreeFrame): Lit.LitTemplate {
-          switch (frame.getCrossOriginIsolatedContextType()) {
-            case Protocol.Page.CrossOriginIsolatedContextType.Isolated:
-              return Lit.nothing;
-            case Protocol.Page.CrossOriginIsolatedContextType.NotIsolated:
-              if (sabAvailable) {
-                // clang-format off
+function renderSharedArrayBufferAvailability(frame: SDK.ResourceTreeModel.ResourceTreeFrame|null): LitTemplate {
+  if (frame) {
+    const features = frame.getGatedAPIFeatures();
+    if (features) {
+      const sabAvailable = features.includes(Protocol.Page.GatedAPIFeatures.SharedArrayBuffers);
+      const sabTransferAvailable =
+          sabAvailable && features.includes(Protocol.Page.GatedAPIFeatures.SharedArrayBuffersTransferAllowed);
+      const availabilityText = sabTransferAvailable ?
+          i18nString(UIStrings.availableTransferable) :
+          (sabAvailable ? i18nString(UIStrings.availableNotTransferable) : i18nString(UIStrings.unavailable));
+      const tooltipText = sabTransferAvailable ?
+          i18nString(UIStrings.sharedarraybufferConstructorIs) :
+          (sabAvailable ? i18nString(UIStrings.sharedarraybufferConstructorIsAvailable) : '');
+
+      function renderHint(frame: SDK.ResourceTreeModel.ResourceTreeFrame): LitTemplate {
+        switch (frame.getCrossOriginIsolatedContextType()) {
+          case Protocol.Page.CrossOriginIsolatedContextType.Isolated:
+            return nothing;
+          case Protocol.Page.CrossOriginIsolatedContextType.NotIsolated:
+            if (sabAvailable) {
+              // clang-format off
                 return html`
                   <span class="inline-comment">
                     ${i18nString(UIStrings.willRequireCrossoriginIsolated)}
                   </span>`;
-                // clang-format on
-              }
-              return html`<span class="inline-comment">${i18nString(UIStrings.requiresCrossoriginIsolated)}</span>`;
-            case Protocol.Page.CrossOriginIsolatedContextType.NotIsolatedFeatureDisabled:
-              if (!sabTransferAvailable) {
-                // clang-format off
+              // clang-format on
+            }
+            return html`<span class="inline-comment">${i18nString(UIStrings.requiresCrossoriginIsolated)}</span>`;
+          case Protocol.Page.CrossOriginIsolatedContextType.NotIsolatedFeatureDisabled:
+            if (!sabTransferAvailable) {
+              // clang-format off
                 return html`
                   <span class="inline-comment">
                     ${i18nString(UIStrings.transferRequiresCrossoriginIsolatedPermission)}
                     <code> cross-origin-isolated</code>
                   </span>`;
-                // clang-format on
-              }
-              break;
-          }
-          return Lit.nothing;
+              // clang-format on
+            }
+            break;
         }
+        return nothing;
+      }
 
-        // SharedArrayBuffer is an API name, so we don't translate it.
-        return html`
+      // SharedArrayBuffer is an API name, so we don't translate it.
+      return html`
           <devtools-report-key>SharedArrayBuffers</devtools-report-key>
           <devtools-report-value title=${tooltipText}>
-            ${availabilityText}\xA0${renderHint(this.#frame)}
+            ${availabilityText}\xA0${renderHint(frame)}
           </devtools-report-value>
         `;
-      }
     }
-    return Lit.nothing;
   }
+  return nothing;
+}
 
-  #renderMeasureMemoryAvailability(): Lit.LitTemplate {
-    if (this.#frame) {
-      const measureMemoryAvailable = this.#frame.isCrossOriginIsolated();
-      const availabilityText =
-          measureMemoryAvailable ? i18nString(UIStrings.available) : i18nString(UIStrings.unavailable);
-      const tooltipText = measureMemoryAvailable ? i18nString(UIStrings.thePerformanceAPI) :
-                                                   i18nString(UIStrings.thePerformancemeasureuseragentspecificmemory);
-      return html`
+function renderMeasureMemoryAvailability(frame: SDK.ResourceTreeModel.ResourceTreeFrame|null): LitTemplate {
+  if (frame) {
+    const measureMemoryAvailable = frame.isCrossOriginIsolated();
+    const availabilityText =
+        measureMemoryAvailable ? i18nString(UIStrings.available) : i18nString(UIStrings.unavailable);
+    const tooltipText = measureMemoryAvailable ? i18nString(UIStrings.thePerformanceAPI) :
+                                                 i18nString(UIStrings.thePerformancemeasureuseragentspecificmemory);
+    return html`
         <devtools-report-key>${i18nString(UIStrings.measureMemory)}</devtools-report-key>
         <devtools-report-value>
           <span title=${tooltipText}>${
-          availabilityText}</span>\xA0<x-link class="link" href="https://web.dev/monitor-total-page-memory-usage/" jslog=${
-          VisualLogging.link('learn-more.monitor-memory-usage').track({click: true})}>${
-          i18nString(UIStrings.learnMore)}</x-link>
+        availabilityText}</span>\xA0<x-link class="link" href="https://web.dev/monitor-total-page-memory-usage/" jslog=${
+        VisualLogging.link('learn-more.monitor-memory-usage').track({click: true})}>${
+        i18nString(UIStrings.learnMore)}</x-link>
         </devtools-report-value>
       `;
-    }
-    return Lit.nothing;
   }
+  return nothing;
+}
 
-  #renderAdditionalInfoSection(): Lit.LitTemplate {
-    if (!this.#frame) {
-      return Lit.nothing;
-    }
+function renderAdditionalInfoSection(frame: SDK.ResourceTreeModel.ResourceTreeFrame|null): LitTemplate {
+  if (!frame) {
+    return nothing;
+  }
 
-    return html`
+  return html`
       <devtools-report-section-header
         title=${i18nString(UIStrings.thisAdditionalDebugging)}
       >${i18nString(UIStrings.additionalInformation)}</devtools-report-section-header>
       <devtools-report-key>${i18nString(UIStrings.frameId)}</devtools-report-key>
       <devtools-report-value>
-        <div class="text-ellipsis" title=${this.#frame.id}>${this.#frame.id}</div>
+        <div class="text-ellipsis" title=${frame.id}>${frame.id}</div>
       </devtools-report-value>
       <devtools-report-divider></devtools-report-divider>
     `;
+}
+
+export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #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;
+
+  constructor(frame: SDK.ResourceTreeModel.ResourceTreeFrame) {
+    super();
+    this.#frame = frame;
+    void this.render();
+  }
+
+  connectedCallback(): void {
+    this.parentElement?.classList.add('overflow-auto');
+    this.#protocolMonitorExperimentEnabled = Root.Runtime.experiments.isEnabled('protocol-monitor');
+  }
+
+  override async render(): Promise<void> {
+    const result = await this.#frame?.parentFrame()?.getAdScriptAncestry(this.#frame?.id);
+    if (result && result.ancestryChain.length > 0) {
+      this.#adScriptAncestry = result;
+
+      // Obtain the Target associated with the first ad script, because in most scenarios all
+      // scripts share the same debuggerId. However, discrepancies might arise when content scripts
+      // from browser extensions are involved. We will monitor the debugging experiences and revisit
+      // this approach if it proves problematic.
+      const firstScript = this.#adScriptAncestry.ancestryChain[0];
+      const debuggerModel = firstScript?.debuggerId ?
+          await SDK.DebuggerModel.DebuggerModel.modelForDebuggerId(firstScript.debuggerId) :
+          null;
+      this.#target = debuggerModel?.target() ?? null;
+    }
+
+    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);
+    });
+  }
+
+  #uiSourceCodeForFrame(frame: SDK.ResourceTreeModel.ResourceTreeFrame): Workspace.UISourceCode.UISourceCode|null {
+    for (const project of Workspace.Workspace.WorkspaceImpl.instance().projects()) {
+      const projectTarget = Bindings.NetworkProject.NetworkProject.getTargetForProject(project);
+      if (projectTarget && projectTarget === frame.resourceTreeModel().target()) {
+        const uiSourceCode = project.uiSourceCodeForURL(frame.url);
+        if (uiSourceCode) {
+          return uiSourceCode;
+        }
+      }
+    }
+    return null;
   }
 }