chrome-devtools-frontend 1.0.981004 → 1.0.995227

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -814,8 +814,8 @@ export class BackgroundServiceTreeElement extends ApplicationPanelTreeElement {
     }
   }
 
-  get itemURL(): string {
-    return `background-service://${this.serviceName}`;
+  get itemURL(): Platform.DevToolsPath.UrlString {
+    return `background-service://${this.serviceName}` as Platform.DevToolsPath.UrlString;
   }
 
   onselect(selectedByUser?: boolean): boolean {
@@ -848,8 +848,8 @@ export class DatabaseTreeElement extends ApplicationPanelTreeElement {
     this.setLeadingIcons([icon]);
   }
 
-  get itemURL(): string {
-    return 'database://' + encodeURI(this.database.name);
+  get itemURL(): Platform.DevToolsPath.UrlString {
+    return 'database://' + encodeURI(this.database.name) as Platform.DevToolsPath.UrlString;
   }
 
   onselect(selectedByUser?: boolean): boolean {
@@ -886,8 +886,9 @@ export class DatabaseTableTreeElement extends ApplicationPanelTreeElement {
     this.setLeadingIcons([icon]);
   }
 
-  get itemURL(): string {
-    return 'database://' + encodeURI(this.database.name) + '/' + encodeURI(this.tableName);
+  get itemURL(): Platform.DevToolsPath.UrlString {
+    return 'database://' + encodeURI(this.database.name) + '/' + encodeURI(this.tableName) as
+        Platform.DevToolsPath.UrlString;
   }
 
   onselect(selectedByUser?: boolean): boolean {
@@ -907,8 +908,8 @@ export class ServiceWorkersTreeElement extends ApplicationPanelTreeElement {
     this.setLeadingIcons([icon]);
   }
 
-  get itemURL(): string {
-    return 'service-workers://';
+  get itemURL(): Platform.DevToolsPath.UrlString {
+    return 'service-workers://' as Platform.DevToolsPath.UrlString;
   }
 
   onselect(selectedByUser?: boolean): boolean {
@@ -930,8 +931,8 @@ export class AppManifestTreeElement extends ApplicationPanelTreeElement {
     this.setLeadingIcons([icon]);
   }
 
-  get itemURL(): string {
-    return 'manifest://';
+  get itemURL(): Platform.DevToolsPath.UrlString {
+    return 'manifest://' as Platform.DevToolsPath.UrlString;
   }
 
   onselect(selectedByUser?: boolean): boolean {
@@ -953,8 +954,8 @@ export class ClearStorageTreeElement extends ApplicationPanelTreeElement {
     this.setLeadingIcons([icon]);
   }
 
-  get itemURL(): string {
-    return 'clear-storage://';
+  get itemURL(): Platform.DevToolsPath.UrlString {
+    return 'clear-storage://' as Platform.DevToolsPath.UrlString;
   }
 
   onselect(selectedByUser?: boolean): boolean {
@@ -1101,8 +1102,9 @@ export class IDBDatabaseTreeElement extends ApplicationPanelTreeElement {
     this.model.addEventListener(IndexedDBModelEvents.DatabaseNamesRefreshed, this.refreshIndexedDB, this);
   }
 
-  get itemURL(): string {
-    return 'indexedDB://' + this.databaseId.securityOrigin + '/' + this.databaseId.name;
+  get itemURL(): Platform.DevToolsPath.UrlString {
+    return 'indexedDB://' + this.databaseId.securityOrigin + '/' + this.databaseId.name as
+        Platform.DevToolsPath.UrlString;
   }
 
   onattach(): void {
@@ -1215,8 +1217,9 @@ export class IDBObjectStoreTreeElement extends ApplicationPanelTreeElement {
     this.setLeadingIcons([icon]);
   }
 
-  get itemURL(): string {
-    return 'indexedDB://' + this.databaseId.securityOrigin + '/' + this.databaseId.name + '/' + this.objectStore.name;
+  get itemURL(): Platform.DevToolsPath.UrlString {
+    return 'indexedDB://' + this.databaseId.securityOrigin + '/' + this.databaseId.name + '/' + this.objectStore.name as
+        Platform.DevToolsPath.UrlString;
   }
 
   onattach(): void {
@@ -1351,9 +1354,9 @@ export class IDBIndexTreeElement extends ApplicationPanelTreeElement {
     this.refreshObjectStore = refreshObjectStore;
   }
 
-  get itemURL(): string {
+  get itemURL(): Platform.DevToolsPath.UrlString {
     return 'indexedDB://' + this.databaseId.securityOrigin + '/' + this.databaseId.name + '/' + this.objectStore.name +
-        '/' + this.index.name;
+        '/' + this.index.name as Platform.DevToolsPath.UrlString;
   }
 
   markNeedsRefresh(): void {
@@ -1420,8 +1423,9 @@ export class DOMStorageTreeElement extends ApplicationPanelTreeElement {
     this.setLeadingIcons([icon]);
   }
 
-  get itemURL(): string {
-    return 'storage://' + this.domStorage.securityOrigin + '/' + (this.domStorage.isLocalStorage ? 'local' : 'session');
+  get itemURL(): Platform.DevToolsPath.UrlString {
+    return 'storage://' + this.domStorage.securityOrigin + '/' +
+        (this.domStorage.isLocalStorage ? 'local' : 'session') as Platform.DevToolsPath.UrlString;
   }
 
   onselect(selectedByUser?: boolean): boolean {
@@ -1456,8 +1460,8 @@ export class CookieTreeElement extends ApplicationPanelTreeElement {
     this.setLeadingIcons([icon]);
   }
 
-  get itemURL(): string {
-    return 'cookies://' + this.cookieDomainInternal;
+  get itemURL(): Platform.DevToolsPath.UrlString {
+    return 'cookies://' + this.cookieDomainInternal as Platform.DevToolsPath.UrlString;
   }
 
   cookieDomain(): string {
@@ -1804,14 +1808,14 @@ export class FrameTreeElement extends ApplicationPanelTreeElement {
     }
   }
 
-  get itemURL(): string {
+  get itemURL(): Platform.DevToolsPath.UrlString {
     // This is used to persist over reloads/navigation which frame was selected.
     // A frame's title can change on DevTools refresh, so we resort to using
     // the URL instead (even though it is not guaranteed to be unique).
     if (this.frame.isTopFrame()) {
-      return 'frame://';
+      return 'frame://' as Platform.DevToolsPath.UrlString;
     }
-    return 'frame://' + encodeURI(this.frame.url);
+    return 'frame://' + encodeURI(this.frame.url) as Platform.DevToolsPath.UrlString;
   }
 
   onselect(selectedByUser?: boolean): boolean {
@@ -1965,7 +1969,7 @@ export class FrameResourceTreeElement extends ApplicationPanelTreeElement {
     return resourceToFrameResourceTreeElement.get(resource);
   }
 
-  get itemURL(): string {
+  get itemURL(): Platform.DevToolsPath.UrlString {
     return this.resource.url;
   }
 
@@ -2082,8 +2086,8 @@ class FrameWindowTreeElement extends ApplicationPanelTreeElement {
     return false;
   }
 
-  get itemURL(): string {
-    return this.targetInfo.url;
+  get itemURL(): Platform.DevToolsPath.UrlString {
+    return this.targetInfo.url as Platform.DevToolsPath.UrlString;
   }
 }
 
@@ -2111,7 +2115,7 @@ class WorkerTreeElement extends ApplicationPanelTreeElement {
     return false;
   }
 
-  get itemURL(): string {
-    return this.targetInfo.url;
+  get itemURL(): Platform.DevToolsPath.UrlString {
+    return this.targetInfo.url as Platform.DevToolsPath.UrlString;
   }
 }

package/front_end/panels/application/ApplicationPanelTreeElement.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type {ResourcesPanel} from './ResourcesPanel.js';
@@ -16,7 +17,7 @@ export class ApplicationPanelTreeElement extends UI.TreeOutline.TreeElement {
     UI.ARIAUtils.setAccessibleName(this.listItemElement, title);
   }
 
-  get itemURL(): string {
+  get itemURL(): Platform.DevToolsPath.UrlString {
     throw new Error('Unimplemented Method');
   }
 
@@ -25,7 +26,7 @@ export class ApplicationPanelTreeElement extends UI.TreeOutline.TreeElement {
       return false;
     }
 
-    const path: string[] = [];
+    const path: Platform.DevToolsPath.UrlString[] = [];
     for (let el: UI.TreeOutline.TreeElement|null = this; el; el = el.parent) {
       const url = el instanceof ApplicationPanelTreeElement && el.itemURL;
       if (!url) {
@@ -56,8 +57,8 @@ export class ExpandableApplicationPanelTreeElement extends ApplicationPanelTreeE
     this.categoryLink = null;
   }
 
-  get itemURL(): string {
-    return 'category://' + this.categoryName;
+  get itemURL(): Platform.DevToolsPath.UrlString {
+    return 'category://' + this.categoryName as Platform.DevToolsPath.UrlString;
   }
 
   setLink(link: string): void {

package/front_end/panels/application/BackgroundServiceView.ts

@@ -457,7 +457,8 @@ export class BackgroundServiceView extends UI.Widget.VBox {
    * Saves all currently displayed events in a file (JSON format).
    */
   private async saveToFile(): Promise<void> {
-    const fileName = `${this.serviceName}-${Platform.DateUtilities.toISO8601Compact(new Date())}.json`;
+    const fileName = `${this.serviceName}-${Platform.DateUtilities.toISO8601Compact(new Date())}.json` as
+        Platform.DevToolsPath.RawPathString;
     const stream = new Bindings.FileUtils.FileOutputStream();
 
     const accepted = await stream.open(fileName);

package/front_end/panels/application/DatabaseQueryView.ts

@@ -29,6 +29,7 @@
 
 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 * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -159,7 +160,7 @@ export class DatabaseQueryView extends Common.ObjectWrapper.eventMixin<EventType
 
     const selectedElement = index >= 0 ? this.queryResults[index] : null;
     const changed = this.lastSelectedElement !== selectedElement;
-    const containerHasFocus = this.queryWrapper === this.element.ownerDocument.deepActiveElement();
+    const containerHasFocus = this.queryWrapper === Platform.DOMUtilities.deepActiveElement(this.element.ownerDocument);
 
     if (selectedElement && (changed || containerHasFocus) && this.element.hasFocus()) {
       if (!selectedElement.hasFocus()) {

package/front_end/panels/application/InterestGroupTreeElement.ts

@@ -4,6 +4,7 @@
 
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -35,8 +36,8 @@ export class InterestGroupTreeElement extends ApplicationPanelTreeElement {
     this.view = new InterestGroupStorageView(this);
   }
 
-  get itemURL(): string {
-    return 'interest-groups://';
+  get itemURL(): Platform.DevToolsPath.UrlString {
+    return 'interest-groups://' as Platform.DevToolsPath.UrlString;
   }
 
   async getInterestGroupDetails(owner: string, name: string): Promise<Protocol.Storage.InterestGroupDetails|null> {

package/front_end/panels/application/ReportingApiTreeElement.ts

@@ -4,6 +4,7 @@
 
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
@@ -28,8 +29,8 @@ export class ReportingApiTreeElement extends ApplicationPanelTreeElement {
     this.setLeadingIcons([icon]);
   }
 
-  get itemURL(): string {
-    return 'reportingApi://';
+  get itemURL(): Platform.DevToolsPath.UrlString {
+    return 'reportingApi://' as Platform.DevToolsPath.UrlString;
   }
 
   onselect(selectedByUser?: boolean): boolean {

package/front_end/panels/application/ResourcesPanel.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -20,7 +21,7 @@ import {StorageItemsView} from './StorageItemsView.js';
 let resourcesPanelInstance: ResourcesPanel;
 
 export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
-  private readonly resourcesLastSelectedItemSetting: Common.Settings.Setting<string[]>;
+  private readonly resourcesLastSelectedItemSetting: Common.Settings.Setting<Platform.DevToolsPath.UrlString[]>;
   visibleView: UI.Widget.Widget|null;
   private pendingViewPromise: Promise<UI.Widget.Widget>|null;
   private categoryView: StorageCategoryView|null;
@@ -90,11 +91,11 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
     this.sidebar.focus();
   }
 
-  lastSelectedItemPath(): string[] {
+  lastSelectedItemPath(): Platform.DevToolsPath.UrlString[] {
     return this.resourcesLastSelectedItemSetting.get();
   }
 
-  setLastSelectedItemPath(path: string[]): void {
+  setLastSelectedItemPath(path: Platform.DevToolsPath.UrlString[]): void {
     this.resourcesLastSelectedItemSetting.set(path);
   }
 

package/front_end/panels/application/ServiceWorkerCacheViews.ts

@@ -480,7 +480,12 @@ export class DataGridNode extends DataGrid.DataGrid.DataGridNode<DataGridNode> {
         tooltip = i18nString(UIStrings.varyHeaderWarning);
       }
     }
-    DataGrid.DataGrid.DataGridImpl.setElementText(cell, value || '', true);
+    const parentElement = cell.parentElement;
+    let gridNode;
+    if (parentElement && this.dataGrid) {
+      gridNode = this.dataGrid.elementToDataGridNode.get(parentElement);
+    }
+    DataGrid.DataGrid.DataGridImpl.setElementText(cell, value || '', /* longText= */ true, gridNode);
     UI.Tooltip.Tooltip.install(cell, tooltip);
     return cell;
   }

package/front_end/panels/application/TrustTokensTreeElement.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../core/i18n/i18n.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -32,8 +33,8 @@ export class TrustTokensTreeElement extends ApplicationPanelTreeElement {
     this.setLeadingIcons([icon]);
   }
 
-  get itemURL(): string {
-    return 'trustTokens://';
+  get itemURL(): Platform.DevToolsPath.UrlString {
+    return 'trustTokens://' as Platform.DevToolsPath.UrlString;
   }
 
   onselect(selectedByUser?: boolean): boolean {

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

@@ -502,6 +502,14 @@ const UIStrings = {
  */
   embedderExtensionSentMessageToCachedFrame:
       'Extensions with long-lived connection attempted to send messages to frames in back/forward cache.',
+  /**
+ *  @description Description text for not restored reason ErrorDocument.
+ */
+  errorDocument: 'Back/forward cache is disabled due to a document error.',
+  /**
+ *  @description Description text for not restored reason ErrorDocument.
+ */
+  fencedFramesEmbedder: 'Pages using FencedFrames cannot be stored in bfcache.',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/BackForwardCacheStrings.ts', UIStrings);
@@ -544,7 +552,6 @@ export const NotRestoredReasonDescription = {
   'UserAgentOverrideDiffers': {name: i18nLazyString(UIStrings.userAgentOverrideDiffers)},
   'ForegroundCacheLimit': {name: i18nLazyString(UIStrings.foregroundCacheLimit)},
   'BackForwardCacheDisabledForDelegate': {name: i18nLazyString(UIStrings.backForwardCacheDisabledForDelegate)},
-  'OptInUnloadHeaderNotPresent': {name: i18nLazyString(UIStrings.unloadHandlerExistsInMainFrame)},
   'UnloadHandlerExistsInMainFrame': {name: i18nLazyString(UIStrings.unloadHandlerExistsInMainFrame)},
   'UnloadHandlerExistsInSubFrame': {name: i18nLazyString(UIStrings.unloadHandlerExistsInSubFrame)},
   'ServiceWorkerUnregistration': {name: i18nLazyString(UIStrings.serviceWorkerUnregistration)},
@@ -639,4 +646,6 @@ export const NotRestoredReasonDescription = {
   'EmbedderExtensionMessagingForOpenPort': {name: i18nLazyString(UIStrings.embedderExtensionMessagingForOpenPort)},
   'EmbedderExtensionSentMessageToCachedFrame':
       {name: i18nLazyString(UIStrings.embedderExtensionSentMessageToCachedFrame)},
+  'ErrorDocument': {name: i18nLazyString(UIStrings.errorDocument)},
+  'FencedFramesEmbedder': {name: i18nLazyString(UIStrings.fencedFramesEmbedder)},
 };

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

@@ -7,6 +7,7 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as Root from '../../../core/root/root.js';
 import * as ReportView from '../../../ui/components/report_view/report_view.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Protocol from '../../../generated/protocol.js';
@@ -14,6 +15,7 @@ import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 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 {NotRestoredReasonDescription} from './BackForwardCacheStrings.js';
 import backForwardCacheViewStyles from './backForwardCacheView.css.js';
@@ -102,7 +104,32 @@ const UIStrings = {
    * @description Text that precedes displaying a link to the extension which blocked the page from being eligible for back/forward cache.
    */
   blockingExtensionId: 'Extension id: ',
+  /**
+   * @description Label for the 'Frames' section of the back/forward cache view, which shows a frame tree of the
+   * page with reasons why the frames can't be cached.
+   */
+  framesTitle: 'Frames',
+  /**
+   * @description Top level summary of the total number of issues found in a single frame.
+   */
+  issuesInSingleFrame: '{n, plural, =1 {# issue found in 1 frame.} other {# issues found in 1 frame.}}',
+  /**
+   * @description Top level summary of the total number of issues found and the number of frames they were found in.
+   * 'm' is never less than 2.
+   * @example {3} m
+   */
+  issuesInMultipleFrames: '{n, plural, =1 {# issue found in {m} frames.} other {# issues found in {m} frames.}}',
+  /**
+   * @description Shows the number of frames with a particular issue.
+   */
+  framesPerIssue: '{n, plural, =1 {# frame} other {# frames}}',
+  /**
+  *@description Title for a frame in the frame tree that doesn't have a URL. Placeholder indicates which number frame with a blank URL it is.
+  *@example {3} PH1
+  */
+  blankURLTitle: 'Blank URL [{PH1}]',
 };
+
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/BackForwardCacheView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
@@ -226,7 +253,7 @@ export class BackForwardCacheView extends HTMLElement {
       // 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');
+      void resourceTreeModel.navigate('chrome://terms' as Platform.DevToolsPath.UrlString);
     }
   }
 
@@ -249,14 +276,15 @@ export class BackForwardCacheView extends HTMLElement {
     // clang-format off
     return LitHtml.html`
       ${this.#renderBackForwardCacheStatus(this.#frame.backForwardCacheDetails.restoredFromCache)}
-      <div class='url'>
-        <div class='url-key'>
+      <div class='report-line'>
+        <div class='report-key'>
           ${i18nString(UIStrings.url)}
         </div>
-        <div class='url-value'>
+        <div class='report-value'>
           ${this.#frame.url}
         </div>
       </div>
+      ${this.#maybeRenderFrameTree(this.#frame.backForwardCacheDetails.explanationsTree)}
       <${ReportView.ReportView.ReportSection.litTagName}>
         <${Buttons.Button.Button.litTagName}
           .disabled=${isTestRunning || isTestingForbidden}
@@ -271,7 +299,8 @@ export class BackForwardCacheView extends HTMLElement {
       </${ReportView.ReportView.ReportSection.litTagName}>
       <${ReportView.ReportView.ReportSectionDivider.litTagName}>
       </${ReportView.ReportView.ReportSectionDivider.litTagName}>
-        ${this.#maybeRenderExplanations(this.#frame.backForwardCacheDetails.explanations)}
+      ${this.#maybeRenderExplanations(this.#frame.backForwardCacheDetails.explanations,
+          this.#frame.backForwardCacheDetails.explanationsTree)}
       <${ReportView.ReportView.ReportSection.litTagName}>
         <x-link href="https://web.dev/bfcache/" class="link">
           ${i18nString(UIStrings.learnMore)}
@@ -281,6 +310,81 @@ export class BackForwardCacheView extends HTMLElement {
     // clang-format on
   }
 
+  #maybeRenderFrameTree(explanationTree: Protocol.Page.BackForwardCacheNotRestoredExplanationTree|
+                        undefined): LitHtml.TemplateResult|{} {
+    if (!explanationTree || (explanationTree.explanations.length === 0 && explanationTree.children.length === 0) ||
+        !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);
+    // 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});
+    } 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')]);
+    }
+    return LitHtml.html`
+    <div class='report-line'>
+    <div class='report-key'>
+      ${i18nString(UIStrings.framesTitle)}
+    </div>
+    <div class='report-value'>
+      ${treeOutline.element}
+    </div>
+  </div>`;
+  }
+
+  // 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;
+    } else {
+      treeElementURL = i18nString(UIStrings.blankURLTitle, {PH1: String(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);
+    }
+
+    return {frameCount: framecount, issueCount: issuecount};
+  }
+
   #renderBackForwardCacheStatus(status: boolean|undefined): LitHtml.TemplateResult {
     switch (status) {
       case true:
@@ -327,8 +431,32 @@ export class BackForwardCacheView extends HTMLElement {
     // clang-format on
   }
 
-  #maybeRenderExplanations(explanations: Protocol.Page.BackForwardCacheNotRestoredExplanation[]): LitHtml.TemplateResult
-      |{} {
+  #buildReasonToFramesMap(
+      explanationTree: Protocol.Page.BackForwardCacheNotRestoredExplanationTree,
+      nextBlankURLCount: {blankCount: number},
+      outputMap: Map<Protocol.Page.BackForwardCacheNotRestoredReason, string[]>): void {
+    let url = explanationTree.url;
+    if (url.length === 0) {
+      url = i18nString(UIStrings.blankURLTitle, {PH1: String(nextBlankURLCount.blankCount)});
+      nextBlankURLCount.blankCount += 1;
+    }
+    explanationTree.explanations.forEach(explanation => {
+      let frames: string[]|undefined = outputMap.get(explanation.reason);
+      if (frames === undefined) {
+        frames = [url];
+        outputMap.set(explanation.reason, frames);
+      } else {
+        frames.push(url);
+      }
+    });
+    explanationTree.children.map(child => {
+      this.#buildReasonToFramesMap(child, nextBlankURLCount, outputMap);
+    });
+  }
+
+  #maybeRenderExplanations(
+      explanations: Protocol.Page.BackForwardCacheNotRestoredExplanation[],
+      explanationTree: Protocol.Page.BackForwardCacheNotRestoredExplanationTree|undefined): LitHtml.TemplateResult|{} {
     if (explanations.length === 0) {
       return LitHtml.nothing;
     }
@@ -340,19 +468,24 @@ export class BackForwardCacheView extends HTMLElement {
     const circumstantial = explanations.filter(
         explanation => explanation.type === Protocol.Page.BackForwardCacheNotRestoredReasonType.Circumstantial);
 
+    const reasonToFramesMap: Map<Protocol.Page.BackForwardCacheNotRestoredReason, string[]> = new Map();
+    if (explanationTree) {
+      this.#buildReasonToFramesMap(explanationTree, {blankCount: 1}, reasonToFramesMap);
+    }
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return LitHtml.html`
-      ${this.#renderExplanations(i18nString(UIStrings.pageSupportNeeded), i18nString(UIStrings.pageSupportNeededExplanation), pageSupportNeeded)}
-      ${this.#renderExplanations(i18nString(UIStrings.supportPending), i18nString(UIStrings.supportPendingExplanation), supportPending)}
-      ${this.#renderExplanations(i18nString(UIStrings.circumstantial), i18nString(UIStrings.circumstantialExplanation), circumstantial)}
+      ${this.#renderExplanations(i18nString(UIStrings.pageSupportNeeded), i18nString(UIStrings.pageSupportNeededExplanation), pageSupportNeeded, reasonToFramesMap)}
+      ${this.#renderExplanations(i18nString(UIStrings.supportPending), i18nString(UIStrings.supportPendingExplanation), supportPending, reasonToFramesMap)}
+      ${this.#renderExplanations(i18nString(UIStrings.circumstantial), i18nString(UIStrings.circumstantialExplanation), circumstantial, reasonToFramesMap)}
     `;
     // clang-format on
   }
 
   #renderExplanations(
       category: Platform.UIString.LocalizedString, explainerText: Platform.UIString.LocalizedString,
-      explanations: Protocol.Page.BackForwardCacheNotRestoredExplanation[]): LitHtml.TemplateResult {
+      explanations: Protocol.Page.BackForwardCacheNotRestoredExplanation[],
+      reasonToFramesMap: Map<Protocol.Page.BackForwardCacheNotRestoredReason, string[]>): LitHtml.TemplateResult {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return LitHtml.html`
@@ -369,7 +502,7 @@ export class BackForwardCacheView extends HTMLElement {
             </${IconButton.Icon.Icon.litTagName}>
           </div>
         </${ReportView.ReportView.ReportSectionHeader.litTagName}>
-        ${explanations.map(explanation => this.#renderReason(explanation))}
+        ${explanations.map(explanation => this.#renderReason(explanation, reasonToFramesMap.get(explanation.reason)))}
       ` : LitHtml.nothing}
     `;
     // clang-format on
@@ -389,7 +522,23 @@ export class BackForwardCacheView extends HTMLElement {
     return LitHtml.nothing;
   }
 
-  #renderReason(explanation: Protocol.Page.BackForwardCacheNotRestoredExplanation): LitHtml.TemplateResult {
+  #renderFramesPerReason(frames: string[]|undefined): LitHtml.TemplateResult|{} {
+    if (frames === undefined || frames.length === 0 || !Root.Runtime.experiments.isEnabled('bfcacheDisplayTree')) {
+      return LitHtml.nothing;
+    }
+    const rows = [LitHtml.html`<div>${i18nString(UIStrings.framesPerIssue, {n: frames.length})}</div>`];
+    rows.push(...frames.map(url => LitHtml.html`<div class='text-ellipsis' title=${url}>${url}</div>`));
+    return LitHtml.html`
+      <div class='explanation-frames'>
+        <${ExpandableList.ExpandableList.ExpandableList.litTagName} .data=${
+        {rows} as
+        ExpandableList.ExpandableList.ExpandableListData}></${ExpandableList.ExpandableList.ExpandableList.litTagName}>
+      </div>
+    `;
+  }
+
+  #renderReason(explanation: Protocol.Page.BackForwardCacheNotRestoredExplanation, frames: string[]|undefined):
+      LitHtml.TemplateResult {
     // clang-format off
     return LitHtml.html`
       <${ReportView.ReportView.ReportSection.litTagName}>
@@ -413,6 +562,7 @@ export class BackForwardCacheView extends HTMLElement {
       <div class='gray-text'>
         ${explanation.reason}
       </div>
+      ${this.#renderFramesPerReason(frames)}
     `;
     // clang-format on
   }