chrome-devtools-frontend 1.0.1040337 → 1.0.1070764

package/front_end/panels/application/application.ts

@@ -16,14 +16,17 @@ import * as IndexedDBModel from './IndexedDBModel.js';
 import * as IndexedDBViews from './IndexedDBViews.js';
 import * as InterestGroupStorageModel from './InterestGroupStorageModel.js';
 import * as InterestGroupStorageView from './InterestGroupStorageView.js';
+import * as InterestGroupTreeElement from './InterestGroupTreeElement.js';
 import * as OpenedWindowDetailsView from './OpenedWindowDetailsView.js';
 import * as ReportingApiReportsView from './ReportingApiReportsView.js';
+import * as ReportingApiView from './ReportingApiView.js';
 import * as ResourcesPanel from './ResourcesPanel.js';
 import * as ServiceWorkerCacheViews from './ServiceWorkerCacheViews.js';
 import * as ServiceWorkersView from './ServiceWorkersView.js';
 import * as ServiceWorkerUpdateCycleView from './ServiceWorkerUpdateCycleView.js';
 import * as StorageItemsView from './StorageItemsView.js';
 import * as StorageView from './StorageView.js';
+import * as TrustTokensTreeElement from './TrustTokensTreeElement.js';
 
 export {
   ApplicationPanelSidebar,
@@ -40,12 +43,15 @@ export {
   IndexedDBViews,
   InterestGroupStorageModel,
   InterestGroupStorageView,
+  InterestGroupTreeElement,
   OpenedWindowDetailsView,
   ReportingApiReportsView,
+  ReportingApiView,
   ResourcesPanel,
   ServiceWorkerCacheViews,
   ServiceWorkersView,
   ServiceWorkerUpdateCycleView,
   StorageItemsView,
   StorageView,
+  TrustTokensTreeElement,
 };

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

@@ -507,9 +507,13 @@ const UIStrings = {
  */
   errorDocument: 'Back/forward cache is disabled due to a document error.',
   /**
- *  @description Description text for not restored reason ErrorDocument.
+ *  @description Description text for not restored reason FencedFramesEmbedder.
  */
   fencedFramesEmbedder: 'Pages using FencedFrames cannot be stored in bfcache.',
+  /**
+ *  @description Description text for not restored reason KeepaliveRequest.
+ */
+  keepaliveRequest: 'Back/forward cache is disabled due to a keepalive request.',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/BackForwardCacheStrings.ts', UIStrings);
@@ -648,4 +652,5 @@ export const NotRestoredReasonDescription = {
       {name: i18nLazyString(UIStrings.embedderExtensionSentMessageToCachedFrame)},
   'ErrorDocument': {name: i18nLazyString(UIStrings.errorDocument)},
   'FencedFramesEmbedder': {name: i18nLazyString(UIStrings.fencedFramesEmbedder)},
+  'KeepaliveRequest': {name: i18nLazyString(UIStrings.keepaliveRequest)},
 };

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

@@ -16,6 +16,7 @@ import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as ChromeLink from '../../../ui/components/chrome_link/chrome_link.js';
 import * as ExpandableList from '../../../ui/components/expandable_list/expandable_list.js';
+import * as TreeOutline from '../../../ui/components/tree_outline/tree_outline.js';
 
 import {NotRestoredReasonDescription} from './BackForwardCacheStrings.js';
 import backForwardCacheViewStyles from './backForwardCacheView.css.js';
@@ -143,10 +144,11 @@ const enum ScreenStatusType {
 }
 
 export class BackForwardCacheViewWrapper extends UI.ThrottledWidget.ThrottledWidget {
-  readonly #bfcacheView = new BackForwardCacheView();
+  readonly #bfcacheView: BackForwardCacheView;
 
-  constructor() {
+  constructor(bfcacheView: BackForwardCacheView) {
     super(true, 1000);
+    this.#bfcacheView = bfcacheView;
     this.#getMainResourceTreeModel()?.addEventListener(
         SDK.ResourceTreeModel.Events.MainFrameNavigated, this.update, this);
     this.#getMainResourceTreeModel()?.addEventListener(
@@ -161,7 +163,7 @@ export class BackForwardCacheViewWrapper extends UI.ThrottledWidget.ThrottledWid
   }
 
   #getMainResourceTreeModel(): SDK.ResourceTreeModel.ResourceTreeModel|null {
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainFrameTarget();
     return mainTarget?.model(SDK.ResourceTreeModel.ResourceTreeModel) || null;
   }
 
@@ -181,6 +183,8 @@ export class BackForwardCacheView extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #frame: SDK.ResourceTreeModel.ResourceTreeFrame|null = null;
   #screenStatus = ScreenStatusType.Result;
+  #nextNodeId = 0;
+  #historyIndex = 0;
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [backForwardCacheViewStyles];
@@ -214,51 +218,57 @@ export class BackForwardCacheView extends HTMLElement {
     void this.#render();
   }
 
-  async #goBackOneHistoryEntry(): Promise<void> {
+  async #onNavigatedAway(): Promise<void> {
     SDK.TargetManager.TargetManager.instance().removeModelListener(
-        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated,
-        this.#goBackOneHistoryEntry, this);
-    this.#screenStatus = ScreenStatusType.Running;
-    void this.#render();
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
-    if (!mainTarget) {
-      return;
-    }
-    const resourceTreeModel = mainTarget.model(SDK.ResourceTreeModel.ResourceTreeModel);
-    if (!resourceTreeModel) {
+        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated, this.#onNavigatedAway,
+        this);
+    await this.#waitAndGoBackInHistory(50);
+  }
+
+  async #waitAndGoBackInHistory(delay: number): Promise<void> {
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainFrameTarget();
+    const resourceTreeModel = mainTarget?.model(SDK.ResourceTreeModel.ResourceTreeModel);
+    const historyResults = await resourceTreeModel?.navigationHistory();
+    if (!resourceTreeModel || !historyResults) {
       return;
     }
-    const historyResults = await resourceTreeModel.navigationHistory();
-    if (!historyResults) {
-      return;
+    // The navigation history can be delayed. If this is the case we wait and
+    // check again later. Otherwise it would be possible to press the 'Test
+    // BFCache' button again too soon, leading to the browser stepping back in
+    // history without returning to the correct page.
+    if (historyResults.currentIndex === this.#historyIndex) {
+      window.setTimeout(this.#waitAndGoBackInHistory.bind(this, delay * 2), delay);
+    } else {
+      SDK.TargetManager.TargetManager.instance().addModelListener(
+          SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated,
+          this.#renderBackForwardCacheTestResult, this);
+      resourceTreeModel.navigateToHistoryEntry(historyResults.entries[historyResults.currentIndex - 1]);
     }
-    SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated,
-        this.#renderBackForwardCacheTestResult, this);
-    resourceTreeModel.navigateToHistoryEntry(historyResults.entries[historyResults.currentIndex - 1]);
   }
 
   async #navigateAwayAndBack(): Promise<void> {
     // Checking BFCache Compatibility
 
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
-    if (!mainTarget) {
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainFrameTarget();
+    const resourceTreeModel = mainTarget?.model(SDK.ResourceTreeModel.ResourceTreeModel);
+    const historyResults = await resourceTreeModel?.navigationHistory();
+    if (!resourceTreeModel || !historyResults) {
       return;
     }
-    const resourceTreeModel = mainTarget.model(SDK.ResourceTreeModel.ResourceTreeModel);
-
-    if (resourceTreeModel) {
-      // This event is removed by inside of goBackOneHistoryEntry().
-      SDK.TargetManager.TargetManager.instance().addModelListener(
-          SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated,
-          this.#goBackOneHistoryEntry, this);
+    this.#historyIndex = historyResults.currentIndex;
+    this.#screenStatus = ScreenStatusType.Running;
+    void this.#render();
 
-      // We can know whether the current page can use BFCache
-      // as the browser navigates to another unrelated page and goes back to the current page.
-      // We chose "chrome://terms" because it must be cross-site.
-      // Ideally, We want to have our own testing page like "chrome: //bfcache-test".
-      void resourceTreeModel.navigate('chrome://terms' as Platform.DevToolsPath.UrlString);
-    }
+    // This event listener is removed inside of onNavigatedAway().
+    SDK.TargetManager.TargetManager.instance().addModelListener(
+        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated, this.#onNavigatedAway,
+        this);
+
+    // We can know whether the current page can use BFCache
+    // as the browser navigates to another unrelated page and goes back to the current page.
+    // We chose "chrome://terms" because it must be cross-site.
+    // Ideally, We want to have our own testing page like "chrome: //bfcache-test".
+    void resourceTreeModel.navigate('chrome://terms' as Platform.DevToolsPath.UrlString);
   }
 
   #renderMainFrameInformation(): LitHtml.TemplateResult {
@@ -291,6 +301,7 @@ export class BackForwardCacheView extends HTMLElement {
       ${this.#maybeRenderFrameTree(this.#frame.backForwardCacheDetails.explanationsTree)}
       <${ReportView.ReportView.ReportSection.litTagName}>
         <${Buttons.Button.Button.litTagName}
+          aria-label=${i18nString(UIStrings.runTest)}
           .disabled=${isTestRunning || isTestingForbidden}
           .spinner=${isTestRunning}
           .variant=${Buttons.Button.Variant.PRIMARY}
@@ -320,73 +331,114 @@ export class BackForwardCacheView extends HTMLElement {
         !Root.Runtime.experiments.isEnabled('bfcacheDisplayTree')) {
       return LitHtml.nothing;
     }
-    const treeOutline = new UI.TreeOutline.TreeOutlineInShadow();
-    treeOutline.registerCSSFiles([backForwardCacheViewStyles]);
-    const urlTreeElement = new UI.TreeOutline.TreeElement();
-    treeOutline.appendChild(urlTreeElement);
-    const {frameCount, issueCount} = this.#maybeAddFrameSubTree(urlTreeElement, {blankCount: 1}, explanationTree);
+
+    function treeNodeRenderer(node: TreeOutline.TreeOutlineUtils.TreeNode<FrameTreeNodeData>): LitHtml.TemplateResult {
+      // clang-format off
+      return LitHtml.html`
+        <div class="text-ellipsis">
+          ${node.treeNodeData.iconName ? LitHtml.html`
+            <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+              iconName: node.treeNodeData.iconName,
+              color: 'var(--color-text-secondary)',
+              width: '16px',
+              height: '16px',
+            } as IconButton.Icon.IconData}>
+            </${IconButton.Icon.Icon.litTagName}>
+          ` : LitHtml.nothing}
+          ${node.treeNodeData.text}
+        </div>
+      `;
+      // clang-format on
+    }
+
+    const frameTreeData = this.#buildFrameTreeDataRecursive(explanationTree, {blankCount: 1});
+    // Override the icon for the top frame.
+    frameTreeData.node.treeNodeData.iconName = 'frame-icon';
+    let title = '';
     // The translation pipeline does not support nested plurals. We avoid this
     // here by pulling out the logic for one of the plurals into code instead.
-    if (frameCount === 1) {
-      urlTreeElement.title = i18nString(UIStrings.issuesInSingleFrame, {n: issueCount});
+    if (frameTreeData.frameCount === 1) {
+      title = i18nString(UIStrings.issuesInSingleFrame, {n: frameTreeData.issueCount});
     } else {
-      urlTreeElement.title = i18nString(UIStrings.issuesInMultipleFrames, {n: issueCount, m: frameCount});
-    }
-    // The first element is always the root, so expand it by default (and override its icon).
-    const topFrameElement = urlTreeElement.childAt(0);
-    if (topFrameElement) {
-      topFrameElement.expand();
-      topFrameElement.setLeadingIcons([UI.Icon.Icon.create('mediumicon-frame')]);
+      title = i18nString(UIStrings.issuesInMultipleFrames, {n: frameTreeData.issueCount, m: frameTreeData.frameCount});
     }
+    const root: TreeOutline.TreeOutlineUtils.TreeNode<FrameTreeNodeData> = {
+      treeNodeData: {
+        text: title,
+      },
+      id: 'root',
+      children: () => Promise.resolve([frameTreeData.node]),
+    };
+
+    // clang-format off
     return LitHtml.html`
-    <div class="report-line">
-    <div class="report-key">
-      ${i18nString(UIStrings.framesTitle)}
-    </div>
-    <div class="report-value">
-      ${treeOutline.element}
-    </div>
-  </div>`;
+      <div class="report-line">
+        <div class="report-key">
+          ${i18nString(UIStrings.framesTitle)}
+        </div>
+        <div class="report-value">
+          <${TreeOutline.TreeOutline.TreeOutline.litTagName} .data=${{
+            tree: [root],
+            defaultRenderer: treeNodeRenderer,
+            compact: true,
+          } as TreeOutline.TreeOutline.TreeOutlineData<FrameTreeNodeData>}>
+          </${TreeOutline.TreeOutline.TreeOutline.litTagName}>
+        </div>
+      </div>
+    `;
+    // clang-format on
   }
 
-  // Potentially adds a subtree of the frame tree, if there are any issues. Returns a tuple of how many frames were added,
-  // and how many issues there were in total over all those frames.
-  #maybeAddFrameSubTree(
-      root: UI.TreeOutline.TreeElement, nextBlankURLCount: {blankCount: number},
-      explanationTree: Protocol.Page.BackForwardCacheNotRestoredExplanationTree|
-      undefined): {frameCount: number, issueCount: number} {
-    if (!explanationTree || (explanationTree.explanations.length === 0 && explanationTree.children.length === 0)) {
-      return {frameCount: 0, issueCount: 0};
-    }
-    const icon = UI.Icon.Icon.create('mediumicon-frame-embedded');
-    let issuecount = explanationTree.explanations.length;
-    let framecount = 0;
-    let treeElementURL: string;
-    if (explanationTree.url.length > 0) {
-      treeElementURL = explanationTree.url;
+  // Builds a subtree of the frame tree, conaining only frames with BFCache issues and their ancestors.
+  // Returns the root node, the number of frames in the subtree, and the number of issues in the subtree.
+  #buildFrameTreeDataRecursive(
+      explanationTree: Protocol.Page.BackForwardCacheNotRestoredExplanationTree,
+      nextBlankURLCount: {blankCount: number}):
+      {node: TreeOutline.TreeOutlineUtils.TreeNode<FrameTreeNodeData>, frameCount: number, issueCount: number} {
+    let frameCount = 1;
+    let issueCount = 0;
+    const children: TreeOutline.TreeOutlineUtils.TreeNode<FrameTreeNodeData>[] = [];
+
+    let nodeUrlText = '';
+    if (explanationTree.url.length) {
+      nodeUrlText = explanationTree.url;
     } else {
-      treeElementURL = i18nString(UIStrings.blankURLTitle, {PH1: String(nextBlankURLCount.blankCount)});
+      nodeUrlText = i18nString(UIStrings.blankURLTitle, {PH1: nextBlankURLCount.blankCount});
       nextBlankURLCount.blankCount += 1;
     }
-    const urlTreeElement = new UI.TreeOutline.TreeElement();
-    root.appendChild(urlTreeElement);
-    urlTreeElement.setLeadingIcons([icon]);
-    explanationTree.explanations.forEach(explanation => {
-      urlTreeElement.appendChild(new UI.TreeOutline.TreeElement(explanation.reason));
-    });
-    explanationTree.children.forEach(child => {
-      const counts = this.#maybeAddFrameSubTree(urlTreeElement, nextBlankURLCount, child);
-      framecount += counts.frameCount;
-      issuecount += counts.issueCount;
-    });
-    if (issuecount > 0) {
-      urlTreeElement.title = '(' + String(issuecount) + ') ' + treeElementURL;
-      framecount += 1;
-    } else if (framecount === 0) {
-      root.removeChild(urlTreeElement);
+
+    for (const explanation of explanationTree.explanations) {
+      const child = {treeNodeData: {text: explanation.reason}, id: String(this.#nextNodeId++)};
+      issueCount += 1;
+      children.push(child);
+    }
+    for (const child of explanationTree.children) {
+      const frameTreeData = this.#buildFrameTreeDataRecursive(child, nextBlankURLCount);
+      if (frameTreeData.issueCount > 0) {
+        children.push(frameTreeData.node);
+        issueCount += frameTreeData.issueCount;
+        frameCount += frameTreeData.frameCount;
+      }
     }
 
-    return {frameCount: framecount, issueCount: issuecount};
+    let node: TreeOutline.TreeOutlineUtils.TreeNode<FrameTreeNodeData> = {
+      treeNodeData: {
+        text: `(${issueCount}) ${nodeUrlText}`,
+      },
+      id: String(this.#nextNodeId++),
+    };
+    if (children.length) {
+      node = {
+        ...node,
+        children: () => Promise.resolve(children),
+      };
+      node.treeNodeData.iconName = 'frame-embedded-icon';
+    } else if (!explanationTree.url.length) {
+      // If the current node increased the blank count, but it has no children and
+      // is therefore not shown, decrement the blank count again.
+      nextBlankURLCount.blankCount -= 1;
+    }
+    return {node, frameCount, issueCount};
   }
 
   #renderBackForwardCacheStatus(status: boolean|undefined): LitHtml.TemplateResult {
@@ -441,7 +493,7 @@ export class BackForwardCacheView extends HTMLElement {
       outputMap: Map<Protocol.Page.BackForwardCacheNotRestoredReason, string[]>): void {
     let url = explanationTree.url;
     if (url.length === 0) {
-      url = i18nString(UIStrings.blankURLTitle, {PH1: String(nextBlankURLCount.blankCount)});
+      url = i18nString(UIStrings.blankURLTitle, {PH1: nextBlankURLCount.blankCount});
       nextBlankURLCount.blankCount += 1;
     }
     explanationTree.explanations.forEach(explanation => {
@@ -583,6 +635,11 @@ export class BackForwardCacheView extends HTMLElement {
   }
 }
 
+interface FrameTreeNodeData {
+  text: string;
+  iconName?: string;
+}
+
 ComponentHelpers.CustomElements.defineComponent('devtools-resources-back-forward-cache-view', BackForwardCacheView);
 
 declare global {

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

@@ -262,22 +262,39 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class FrameDetailsView extends UI.ThrottledWidget.ThrottledWidget {
   readonly #reportView = new FrameDetailsReportView();
   readonly #frame: SDK.ResourceTreeModel.ResourceTreeFrame;
+  #prerenderedUrl: string;
 
   constructor(frame: SDK.ResourceTreeModel.ResourceTreeFrame) {
     super();
     this.#frame = frame;
+    this.#prerenderedUrl = '';
     this.contentElement.classList.add('overflow-auto');
     this.contentElement.appendChild(this.#reportView);
     this.update();
+
+    SDK.TargetManager.TargetManager.instance().addModelListener(
+        SDK.ChildTargetManager.ChildTargetManager, SDK.ChildTargetManager.Events.TargetInfoChanged, this.targetChanged,
+        this);
     frame.resourceTreeModel().addEventListener(
         SDK.ResourceTreeModel.Events.PrerenderingStatusUpdated, this.update, this);
   }
 
+  targetChanged(event: Common.EventTarget.EventTargetEvent<Protocol.Target.TargetInfo>): void {
+    const targetInfo = event.data;
+    if (targetInfo.subtype === 'prerender') {
+      this.#prerenderedUrl = targetInfo.url;
+      this.update();
+    }
+  }
+
   async doUpdate(): Promise<void> {
-    const debuggerId = this.#frame?.getDebuggerId();
-    const debuggerModel = debuggerId ? await SDK.DebuggerModel.DebuggerModel.modelForDebuggerId(debuggerId) : null;
+    const adScriptId = await this.#frame?.parentFrame()?.getAdScriptId(this.#frame?.id);
+    const debuggerModel = adScriptId?.debuggerId ?
+        await SDK.DebuggerModel.DebuggerModel.modelForDebuggerId(adScriptId?.debuggerId) :
+        null;
     const target = debuggerModel?.target();
-    this.#reportView.data = {frame: this.#frame, target};
+    this.#reportView
+        .data = {frame: this.#frame, target, prerenderedUrl: this.#prerenderedUrl, adScriptId: adScriptId || null};
   }
 }
 
@@ -286,6 +303,8 @@ const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 export interface FrameDetailsReportViewData {
   frame: SDK.ResourceTreeModel.ResourceTreeFrame;
   target?: SDK.Target.Target;
+  prerenderedUrl?: string;
+  adScriptId: Protocol.Page.AdScriptId|null;
 }
 
 export class FrameDetailsReportView extends HTMLElement {
@@ -293,11 +312,13 @@ export class FrameDetailsReportView extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #frame?: SDK.ResourceTreeModel.ResourceTreeFrame;
   #target?: SDK.Target.Target;
+  #prerenderedUrl?: string;
   #protocolMonitorExperimentEnabled = false;
   #permissionsPolicies: Promise<Protocol.Page.PermissionsPolicyFeatureState[]|null>|null = null;
   #permissionsPolicySectionData: PermissionsPolicySectionData = {policies: [], showDetails: false};
   #originTrialTreeView: OriginTrialTreeView = new OriginTrialTreeView();
   #linkifier = new Components.Linkifier.Linkifier();
+  #adScriptId: Protocol.Page.AdScriptId|null = null;
 
   connectedCallback(): void {
     this.#protocolMonitorExperimentEnabled = Root.Runtime.experiments.isEnabled('protocolMonitor');
@@ -306,7 +327,10 @@ export class FrameDetailsReportView extends HTMLElement {
 
   set data(data: FrameDetailsReportViewData) {
     this.#frame = data.frame;
+    this.#adScriptId = data.adScriptId;
     this.#target = data.target;
+
+    this.#prerenderedUrl = data.prerenderedUrl;
     if (!this.#permissionsPolicies && this.#frame) {
       this.#permissionsPolicies = this.#frame.getPermissionsPolicyState();
     }
@@ -589,10 +613,10 @@ export class FrameDetailsReportView extends HTMLElement {
       rows.push(LitHtml.html`<div>${this.#getAdFrameExplanationString(explanation)}</div>`);
     }
 
-    const adScriptLinkElement = this.#target ?
-        this.#linkifier.linkifyScriptLocation(
-            this.#target, this.#frame.getAdScriptId(), Platform.DevToolsPath.EmptyUrlString, undefined, undefined) :
-        null;
+    const adScriptLinkElement = this.#target ? this.#linkifier.linkifyScriptLocation(
+                                                   this.#target, this.#adScriptId?.scriptId || null,
+                                                   Platform.DevToolsPath.EmptyUrlString, undefined, undefined) :
+                                               null;
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
@@ -792,10 +816,45 @@ export class FrameDetailsReportView extends HTMLElement {
   }
 
   #renderPrerenderingSection(): LitHtml.LitTemplate {
+    if (this.#prerenderedUrl && this.#prerenderedUrl !== '') {
+      const status = Prerender2ReasonDescription['PrerenderingOngoing'].name() + ' ' + this.#prerenderedUrl;
+      return LitHtml.html`
+      <${ReportView.ReportView.ReportSectionHeader.litTagName}>
+      ${i18nString(UIStrings.prerendering)}</${ReportView.ReportView.ReportSectionHeader.litTagName}>
+      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.prerenderingStatus)}</${
+          ReportView.ReportView.ReportKey.litTagName}>
+      <${ReportView.ReportView.ReportValue.litTagName}>
+      <div class="text-ellipsis" title=${status}>${status}</div>
+      </${ReportView.ReportView.ReportValue.litTagName}>
+      <${ReportView.ReportView.ReportSectionDivider.litTagName}></${
+          ReportView.ReportView.ReportSectionDivider.litTagName}>`;
+    }
+
     if (!this.#frame || !this.#frame.prerenderFinalStatus) {
       return LitHtml.nothing;
     }
+
     const finalStatus = Prerender2ReasonDescription[this.#frame.prerenderFinalStatus].name();
+
+    if (this.#frame.prerenderDisallowedApiMethod) {
+      const detailSection = Prerender2ReasonDescription['DisallowedApiMethod'].name();
+      return LitHtml.html`
+      <${ReportView.ReportView.ReportSectionHeader.litTagName}>
+      ${i18nString(UIStrings.prerendering)}</${ReportView.ReportView.ReportSectionHeader.litTagName}>
+      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.prerenderingStatus)}</${
+          ReportView.ReportView.ReportKey.litTagName}>
+      <${ReportView.ReportView.ReportValue.litTagName}>
+      <div class="text-ellipsis" title=${finalStatus}>${finalStatus}</div>
+      </${ReportView.ReportView.ReportValue.litTagName}>
+      <${ReportView.ReportView.ReportKey.litTagName}>${detailSection}</${ReportView.ReportView.ReportKey.litTagName}>
+      <${ReportView.ReportView.ReportValue.litTagName}>
+      <div class="text-ellipsis" title=${this.#frame.prerenderDisallowedApiMethod}>
+        ${this.#frame.prerenderDisallowedApiMethod}
+      </div>
+      </${ReportView.ReportView.ReportValue.litTagName}>
+      <${ReportView.ReportView.ReportSectionDivider.litTagName}></${
+          ReportView.ReportView.ReportSectionDivider.litTagName}>`;
+    }
     return LitHtml.html`
       <${ReportView.ReportView.ReportSectionHeader.litTagName}>
       ${i18nString(UIStrings.prerendering)}</${ReportView.ReportView.ReportSectionHeader.litTagName}>

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

@@ -11,7 +11,6 @@ import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import badgeStyles from './badge.css.js';
 import originTrialTokenRowsStyles from './originTrialTokenRows.css.js';
-import originTrialTreeViewStyles from './originTrialTreeView.css.js';
 
 const UIStrings = {
   /**
@@ -323,10 +322,6 @@ export class OriginTrialTreeView extends HTMLElement {
     this.#render(data.trials);
   }
 
-  connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [originTrialTreeViewStyles];
-  }
-
   #render(trials: Protocol.Page.OriginTrial[]): void {
     if (!trials.length) {
       return;