chrome-devtools-frontend 1.0.947377 → 1.0.948916

package/front_end/legacy_test_runner/test_runner/TestRunner.js

@@ -23,6 +23,10 @@ self.Platform = self.Platform || {};
 self.Platform.StringUtilities = Platform.StringUtilities;
 self.Platform.MapUtilities = Platform.MapUtilities;
 self.Platform.ArrayUtilities = Platform.ArrayUtilities;
+self.createPlainTextSearchRegex = Platform.StringUtilities.createPlainTextSearchRegex;
+String.sprintf = Platform.StringUtilities.sprintf;
+String.regexSpecialCharacters = Platform.StringUtilities.regexSpecialCharacters;
+String.caseInsensetiveComparator = Platform.StringUtilities.caseInsensetiveComparator;
 
 /**
  * @return {boolean}
@@ -229,23 +233,36 @@ export function addSnifferPromise(receiver, methodName) {
   });
 }
 
-/** @type {function():void} */
-let _resolveOnFinishInits;
-
-/**
- * @param {string} module
- * @return {!Promise<undefined>}
- */
-export async function loadModule(module) {
-  const promise = new Promise(resolve => {
-    _resolveOnFinishInits = resolve;
-  });
-  await self.runtime.loadModulePromise(module);
-  if (!_pendingInits) {
-    return;
-  }
-  return promise;
-}
+const mappingForLayoutTests = new Map([
+  ['panels/animation', 'animation'],
+  ['panels/browser_debugger', 'browser_debugger'],
+  ['panels/changes', 'changes'],
+  ['panels/console', 'console'],
+  ['panels/elements', 'elements'],
+  ['panels/emulation', 'emulation'],
+  ['panels/mobile_throttling', 'mobile_throttling'],
+  ['panels/network', 'network'],
+  ['panels/profiler', 'profiler'],
+  ['panels/application', 'resources'],
+  ['panels/search', 'search'],
+  ['panels/sources', 'sources'],
+  ['panels/snippets', 'snippets'],
+  ['panels/settings', 'settings'],
+  ['panels/timeline', 'timeline'],
+  ['panels/web_audio', 'web_audio'],
+  ['models/persistence', 'persistence'],
+  ['models/workspace_diff', 'workspace_diff'],
+  ['entrypoints/main', 'main'],
+  ['third_party/diff', 'diff'],
+  ['ui/legacy/components/inline_editor', 'inline_editor'],
+  ['ui/legacy/components/data_grid', 'data_grid'],
+  ['ui/legacy/components/perf_ui', 'perf_ui'],
+  ['ui/legacy/components/source_frame', 'source_frame'],
+  ['ui/legacy/components/color_picker', 'color_picker'],
+  ['ui/legacy/components/cookie_table', 'cookie_table'],
+  ['ui/legacy/components/quick_open', 'quick_open'],
+  ['ui/legacy/components/utils', 'components'],
+]);
 
 /**
  * @param {string} module
@@ -253,7 +270,7 @@ export async function loadModule(module) {
  */
 export async function loadLegacyModule(module) {
   let containingFolder = module;
-  for (const [remappedFolder, originalFolder] of Root.Runtime.mappingForLayoutTests.entries()) {
+  for (const [remappedFolder, originalFolder] of mappingForLayoutTests.entries()) {
     if (originalFolder === module) {
       containingFolder = remappedFolder;
     }
@@ -667,9 +684,6 @@ export function addIframe(path, options = {}) {
   `);
 }
 
-/** @type {number} */
-let _pendingInits = 0;
-
 /**
  * The old test framework executed certain snippets in the inspected page
  * context as part of loading a test helper file.
@@ -685,12 +699,7 @@ let _pendingInits = 0;
  * @param {string} code
  */
 export async function deprecatedInitAsync(code) {
-  _pendingInits++;
   await TestRunner.RuntimeAgent.invoke_evaluate({expression: code, objectGroup: 'console'});
-  _pendingInits--;
-  if (!_pendingInits && _resolveOnFinishInits !== undefined) {
-    _resolveOnFinishInits();
-  }
 }
 
 /**
@@ -1290,36 +1299,6 @@ export class MockSetting {
   }
 }
 
-/**
- * @return {!Array<!Root.Runtime.Module>}
- */
-export function loadedModules() {
-  return self.runtime.modules.filter(module => module.loadedForTest)
-      .filter(module => module.name() !== 'help')
-      .filter(module => module.name().indexOf('test_runner') === -1);
-}
-
-/**
- * @param {!Array<!Root.Runtime.Module>} relativeTo
- * @return {!Array<!Root.Runtime.Module>}
- */
-export function dumpLoadedModules(relativeTo) {
-  const previous = new Set(relativeTo || []);
-  function moduleSorter(left, right) {
-    return Platform.StringUtilities.naturalOrderComparator(left.descriptor.name, right.descriptor.name);
-  }
-
-  addResult('Loaded modules:');
-  const sortedLoadedModules = loadedModules().sort(moduleSorter);
-  for (const module of sortedLoadedModules) {
-    if (previous.has(module)) {
-      continue;
-    }
-    addResult('    ' + module.descriptor.name);
-  }
-  return sortedLoadedModules;
-}
-
 /**
  * @param {string} urlSuffix
  * @param {!Workspace.Workspace.projectTypes=} projectType
@@ -1511,13 +1490,10 @@ TestRunner.override = override;
 TestRunner.clearSpecificInfoFromStackFrames = clearSpecificInfoFromStackFrames;
 TestRunner.hideInspectorView = hideInspectorView;
 TestRunner.mainFrame = mainFrame;
-TestRunner.loadedModules = loadedModules;
-TestRunner.dumpLoadedModules = dumpLoadedModules;
 TestRunner.waitForUISourceCode = waitForUISourceCode;
 TestRunner.waitForUISourceCodeRemoved = waitForUISourceCodeRemoved;
 TestRunner.url = url;
 TestRunner.dumpSyntaxHighlight = dumpSyntaxHighlight;
-TestRunner.loadModule = loadModule;
 TestRunner.loadLegacyModule = loadLegacyModule;
 TestRunner.loadTestModule = loadTestModule;
 TestRunner.evaluateInPageRemoteObject = evaluateInPageRemoteObject;

package/front_end/models/issues_manager/AttributionReportingIssue.ts

@@ -17,8 +17,13 @@ export const enum IssueCode {
   AttributionSourceUntrustworthyOrigin = 'AttributionReportingIssue::AttributionSourceUntrustworthyOrigin',
   AttributionUntrustworthyFrameOrigin = 'AttributionReportingIssue::AttributionUntrustworthyFrameOrigin',
   AttributionUntrustworthyOrigin = 'AttributionReportingIssue::AttributionUntrustworthyOrigin',
-  AttributionTriggerDataTooLarge = 'AttrubtionReportingIssue::AttributionTriggerDataTooLarge',
-  AttributionEventSourceTriggerDataTooLarge = 'AttrubtionReportingIssue::AttributionEventSourceTriggerDataTooLarge',
+  AttributionTriggerDataTooLarge = 'AttributionReportingIssue::AttributionTriggerDataTooLarge',
+  AttributionEventSourceTriggerDataTooLarge = 'AttributionReportingIssue::AttributionEventSourceTriggerDataTooLarge',
+  InvalidAttributionSourceExpiry = 'AttributionReportingIssue::InvalidAttributionSourceExpiry',
+  InvalidAttributionSourcePriority = 'AttributionReportingIssue::InvalidAttributionSourcePriority',
+  InvalidEventSourceTriggerData = 'AttributionReportingIssue::InvalidEventSourceTriggerData',
+  InvalidTriggerPriority = 'AttributionReportingIssue::InvalidTriggerPriority',
+  InvalidTriggerDedupKey = 'AttributionReportingIssue::InvalidTriggerDedupKey',
 }
 
 function getIssueCode(details: Protocol.Audits.AttributionReportingIssueDetails): IssueCode {
@@ -40,6 +45,16 @@ function getIssueCode(details: Protocol.Audits.AttributionReportingIssueDetails)
       return IssueCode.AttributionTriggerDataTooLarge;
     case Protocol.Audits.AttributionReportingIssueType.AttributionEventSourceTriggerDataTooLarge:
       return IssueCode.AttributionEventSourceTriggerDataTooLarge;
+    case Protocol.Audits.AttributionReportingIssueType.InvalidAttributionSourceExpiry:
+      return IssueCode.InvalidAttributionSourceExpiry;
+    case Protocol.Audits.AttributionReportingIssueType.InvalidAttributionSourcePriority:
+      return IssueCode.InvalidAttributionSourcePriority;
+    case Protocol.Audits.AttributionReportingIssueType.InvalidEventSourceTriggerData:
+      return IssueCode.InvalidEventSourceTriggerData;
+    case Protocol.Audits.AttributionReportingIssueType.InvalidTriggerPriority:
+      return IssueCode.InvalidTriggerPriority;
+    case Protocol.Audits.AttributionReportingIssueType.InvalidTriggerDedupKey:
+      return IssueCode.InvalidTriggerDedupKey;
   }
 }
 
@@ -108,6 +123,16 @@ export class AttributionReportingIssue extends Issue<IssueCode> {
           file: 'arAttributionEventSourceTriggerDataTooLarge.md',
           links: [],
         };
+      case IssueCode.InvalidAttributionSourceExpiry:
+        return null;
+      case IssueCode.InvalidAttributionSourcePriority:
+        return null;
+      case IssueCode.InvalidEventSourceTriggerData:
+        return null;
+      case IssueCode.InvalidTriggerPriority:
+        return null;
+      case IssueCode.InvalidTriggerDedupKey:
+        return null;
     }
   }
 

package/front_end/models/issues_manager/CorsIssue.ts

@@ -13,7 +13,7 @@ const UIStrings = {
   /**
   *@description Label for the link for CORS private network issues
   */
-  corsForPrivateNetworksRfc: 'CORS for private networks (RFC1918)',
+  corsPrivateNetworkAccess: 'Private Network Access',
   /**
   *@description Label for the link for CORS network issues
   */
@@ -26,7 +26,6 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 // eslint-disable-next-line rulesdir/const_enum
 export enum IssueCode {
   InsecurePrivateNetwork = 'CorsIssue::InsecurePrivateNetwork',
-  InsecurePrivateNetworkPreflight = 'CorsIssue::InsecurePrivateNetworkPreflight',
   InvalidHeaderValues = 'CorsIssue::InvalidHeaders',
   WildcardOriginNotAllowed = 'CorsIssue::WildcardOriginWithCredentials',
   PreflightResponseInvalid = 'CorsIssue::PreflightResponseInvalid',
@@ -37,14 +36,15 @@ export enum IssueCode {
   RedirectContainsCredentials = 'CorsIssue::RedirectContainsCredentials',
   DisallowedByMode = 'CorsIssue::DisallowedByMode',
   CorsDisabledScheme = 'CorsIssue::CorsDisabledScheme',
+  // TODO(https://crbug.com/1263483): Remove this once it's removed from CDP.
   PreflightMissingAllowExternal = 'CorsIssue::PreflightMissingAllowExternal',
+  // TODO(https://crbug.com/1263483): Remove this once it's removed from CDP.
   PreflightInvalidAllowExternal = 'CorsIssue::PreflightInvalidAllowExternal',
   InvalidResponse = 'CorsIssue::InvalidResponse',
   NoCorsRedirectModeNotFollow = 'CorsIssue::NoCorsRedirectModeNotFollow',
   InvalidPrivateNetworkAccess = 'CorsIssue::InvalidPrivateNetworkAccess',
   UnexpectedPrivateNetworkAccess = 'CorsIssue::UnexpectedPrivateNetworkAccess',
-  PreflightMissingAllowPrivateNetwork = 'CorsIssue::PreflightMissingAllowPrivateNetwork',
-  PreflightInvalidAllowPrivateNetwork = 'CorsIssue::PreflightInvalidAllowPrivateNetwork',
+  PreflightAllowPrivateNetworkError = 'CorsIssue::PreflightAllowPrivateNetworkError',
 }
 
 function getIssueCode(details: Protocol.Audits.CorsIssueDetails): IssueCode {
@@ -87,8 +87,7 @@ function getIssueCode(details: Protocol.Audits.CorsIssueDetails): IssueCode {
     case Protocol.Network.CorsError.InvalidResponse:
       return IssueCode.InvalidResponse;
     case Protocol.Network.CorsError.InsecurePrivateNetwork:
-      return details.clientSecurityState?.initiatorIsSecureContext ? IssueCode.InsecurePrivateNetworkPreflight :
-                                                                     IssueCode.InsecurePrivateNetwork;
+      return IssueCode.InsecurePrivateNetwork;
     case Protocol.Network.CorsError.NoCorsRedirectModeNotFollow:
       return IssueCode.NoCorsRedirectModeNotFollow;
     case Protocol.Network.CorsError.InvalidPrivateNetworkAccess:
@@ -96,9 +95,8 @@ function getIssueCode(details: Protocol.Audits.CorsIssueDetails): IssueCode {
     case Protocol.Network.CorsError.UnexpectedPrivateNetworkAccess:
       return IssueCode.UnexpectedPrivateNetworkAccess;
     case Protocol.Network.CorsError.PreflightMissingAllowPrivateNetwork:
-      return IssueCode.PreflightMissingAllowPrivateNetwork;
     case Protocol.Network.CorsError.PreflightInvalidAllowPrivateNetwork:
-      return IssueCode.PreflightInvalidAllowPrivateNetwork;
+      return IssueCode.PreflightAllowPrivateNetworkError;
   }
 }
 
@@ -127,15 +125,15 @@ export class CorsIssue extends Issue<IssueCode> {
           file: 'corsInsecurePrivateNetwork.md',
           links: [{
             link: 'https://developer.chrome.com/blog/private-network-access-update',
-            linkTitle: i18nString(UIStrings.corsForPrivateNetworksRfc),
+            linkTitle: i18nString(UIStrings.corsPrivateNetworkAccess),
           }],
         };
-      case IssueCode.InsecurePrivateNetworkPreflight:
+      case IssueCode.PreflightAllowPrivateNetworkError:
         return {
-          file: 'corsInsecurePrivateNetworkPreflight.md',
+          file: 'corsPreflightAllowPrivateNetworkError.md',
           links: [{
             link: 'https://developer.chrome.com/blog/private-network-access-update',
-            linkTitle: i18nString(UIStrings.corsForPrivateNetworksRfc),
+            linkTitle: i18nString(UIStrings.corsPrivateNetworkAccess),
           }],
         };
       case IssueCode.InvalidHeaderValues:
@@ -231,8 +229,6 @@ export class CorsIssue extends Issue<IssueCode> {
       case IssueCode.InvalidResponse:
       case IssueCode.InvalidPrivateNetworkAccess:
       case IssueCode.UnexpectedPrivateNetworkAccess:
-      case IssueCode.PreflightMissingAllowPrivateNetwork:
-      case IssueCode.PreflightInvalidAllowPrivateNetwork:
         return null;
     }
   }
@@ -243,7 +239,11 @@ export class CorsIssue extends Issue<IssueCode> {
 
   getKind(): IssueKind {
     if (this.issueDetails.isWarning &&
-        this.issueDetails.corsErrorStatus.corsError === Protocol.Network.CorsError.InsecurePrivateNetwork) {
+        (this.issueDetails.corsErrorStatus.corsError === Protocol.Network.CorsError.InsecurePrivateNetwork ||
+         this.issueDetails.corsErrorStatus.corsError ===
+             Protocol.Network.CorsError.PreflightMissingAllowPrivateNetwork ||
+         this.issueDetails.corsErrorStatus.corsError ===
+             Protocol.Network.CorsError.PreflightInvalidAllowPrivateNetwork)) {
       return IssueKind.BreakingChange;
     }
     return IssueKind.PageError;

package/front_end/models/issues_manager/descriptions/{corsInsecurePrivateNetworkPreflight.md → corsPreflightAllowPrivateNetworkError.md}

@@ -3,7 +3,7 @@
 A site requested a resource from a network that it could only access because of its users' privileged network position.
 These requests expose devices and servers to the internet, increasing the risk of a cross-site request forgery (CSRF) attack, and/or information leakage.
 
-To mitigate these risks, a future version of Chrome will require non-public subresources to opt-into being accessed with a preflight request.
+To mitigate these risks, Chrome will require non-public subresources to opt-into being accessed with a preflight request and will start blocking them in Chrome 101 (April 2022).
 
 To fix this issue, ensure that response to the [preflight request](issueCorsPreflightRequest) for the private network resource has the `Access-Control-Allow-Private-Network` header set to `true`.
 

package/front_end/panels/accessibility/AccessibilitySidebarView.ts

@@ -107,7 +107,9 @@ export class AccessibilitySidebarView extends UI.ThrottledWidget.ThrottledWidget
     if (!accessibilityModel) {
       return;
     }
-    accessibilityModel.clear();
+    if (!Root.Runtime.experiments.isEnabled('fullAccessibilityTree')) {
+      accessibilityModel.clear();
+    }
     await accessibilityModel.requestPartialAXTree(node);
     this.accessibilityNodeCallback(accessibilityModel.axNodeForDOMNode(node));
   }

package/front_end/panels/application/BackForwardCacheStrings.ts

@@ -154,10 +154,6 @@ const UIStrings = {
       * @description Description text for not restored reason BackForwardCacheDisabledForDelegate.
       */
   backForwardCacheDisabledForDelegate: 'Back/forward cache is not supported by delegate.',
-  /**
-      * @description Description text for not restored reason OptInUnloadHeaderNotPresent.
-      */
-  optInUnloadHeaderNotPresent: 'The page has unload handler without the back/forward cache opt-in header.',
   /**
       * @description Description text for not restored reason UnloadHandlerExistsInMainFrame.
       */
@@ -466,7 +462,7 @@ export const NotRestoredReasonDescription = {
   'UserAgentOverrideDiffers': {name: i18nLazyString(UIStrings.userAgentOverrideDiffers)},
   'ForegroundCacheLimit': {name: i18nLazyString(UIStrings.foregroundCacheLimit)},
   'BackForwardCacheDisabledForDelegate': {name: i18nLazyString(UIStrings.backForwardCacheDisabledForDelegate)},
-  'OptInUnloadHeaderNotPresent': {name: i18nLazyString(UIStrings.optInUnloadHeaderNotPresent)},
+  'OptInUnloadHeaderNotPresent': {name: i18nLazyString(UIStrings.unloadHandlerExistsInMainFrame)},
   'UnloadHandlerExistsInMainFrame': {name: i18nLazyString(UIStrings.unloadHandlerExistsInMainFrame)},
   'UnloadHandlerExistsInSubFrame': {name: i18nLazyString(UIStrings.unloadHandlerExistsInSubFrame)},
   'ServiceWorkerUnregistration': {name: i18nLazyString(UIStrings.serviceWorkerUnregistration)},

package/front_end/panels/application/BackForwardCacheView.ts

@@ -31,25 +31,22 @@ const UIStrings = {
   /**
    * @description Entry name text in the back/forward cache view of the Application panel
    */
-  url: 'URL',
-  /**
-   * @description Entry name text in the back/forward cache view of the Application panel
-   */
-  bfcacheStatus: 'Back/forward cache Status',
+  url: 'URL:',
   /**
    * @description Status text for the status of the back/forward cache status
    */
-  unknown: 'unknown',
+  unknown: 'Unknown Status',
   /**
    * @description Status text for the status of the back/forward cache status indicating that
    * the back/forward cache was not used and a normal navigation occured instead.
    */
-  normalNavigation: 'Normal navigation (Not restored from back/forward cache)',
+  normalNavigation:
+      'Not served from back/forward cache: to trigger back/forward cache, use Chrome\'s back/forward buttons, or use the test button below to automatically navigate away and back.',
   /**
    * @description Status text for the status of the back/forward cache status indicating that
    * the back/forward cache was used to restore the page instead of reloading it.
    */
-  restoredFromBFCache: 'Restored from back/forward cache',
+  restoredFromBFCache: 'Successfully served from back/forward cache.',
   /**
    * @description Label for a list of reasons which prevent the page from being eligible for
    * back/forward cache. These reasons are actionable i.e. they can be cleaned up to make the
@@ -81,9 +78,17 @@ const UIStrings = {
    */
   supportPending: 'Pending Support',
   /**
-   * @description Button name for showing whether BFCache is available in the pages.
+   * @description Label for the button to test whether BFCache is available for the page
+   */
+  runTest: 'Test back/forward cache',
+  /**
+   * @description Label for the disabled button while the test is running
    */
-  runTest: 'Run Test',
+  runningTest: 'Running test',
+  /**
+   * @description Link Text about explanation of back/forward cache
+   */
+  learnMore: 'Learn more: back/forward cache eligibility',
   /**
    * @description Explanation for 'pending support' items which prevent the page from being eligible
    * for back/forward cache.
@@ -94,6 +99,11 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/application/BackForwardCacheView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+const enum ScreenStatusType {
+  Running = 'Running',
+  Result = 'Result',
+}
+
 export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
   constructor() {
     super(true, 1000);
@@ -102,8 +112,11 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
     this.getMainResourceTreeModel()?.addEventListener(
         SDK.ResourceTreeModel.Events.BackForwardCacheDetailsUpdated, this.onBackForwardCacheUpdate, this);
     this.update();
+    this.screenStatus = ScreenStatusType.Result;
   }
 
+  private screenStatus: ScreenStatusType;
+
   wasShown(): void {
     super.wasShown();
     this.registerCSSFiles([backForwardCacheViewStyles]);
@@ -117,7 +130,7 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
     const data = {reportTitle: i18nString(UIStrings.backForwardCacheTitle)};
     const html = LitHtml.html`
       <${ReportView.ReportView.Report.litTagName} .data=${data as ReportView.ReportView.ReportData}>
-      ${this.renderMainFrameInformation(this.getMainFrame())}
+        ${this.renderMainFrameInformation(this.getMainFrame())}
       </${ReportView.ReportView.Report.litTagName}>
     `;
     LitHtml.render(html, this.contentElement, {host: this});
@@ -132,10 +145,20 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
     return this.getMainResourceTreeModel()?.mainFrame || null;
   }
 
+  private renderBackForwardCacheTestResult(): void {
+    SDK.TargetManager.TargetManager.instance().removeModelListener(
+        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated,
+        this.renderBackForwardCacheTestResult, this);
+    this.screenStatus = ScreenStatusType.Result;
+    this.update();
+  }
+
   private async goBackOneHistoryEntry(): Promise<void> {
     SDK.TargetManager.TargetManager.instance().removeModelListener(
         SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated,
         this.goBackOneHistoryEntry, this);
+    this.screenStatus = ScreenStatusType.Running;
+    this.update();
     const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
     if (!mainTarget) {
       return;
@@ -148,6 +171,9 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
     if (!historyResults) {
       return;
     }
+    SDK.TargetManager.TargetManager.instance().addModelListener(
+        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated,
+        this.renderBackForwardCacheTestResult, this);
     resourceTreeModel.navigateToHistoryEntry(historyResults.entries[historyResults.currentIndex - 1]);
   }
 
@@ -176,41 +202,97 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
 
   private renderMainFrameInformation(mainFrame: SDK.ResourceTreeModel.ResourceTreeFrame|null): LitHtml.TemplateResult {
     if (!mainFrame) {
-      return LitHtml.html`<${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.mainFrame)}</${
-          ReportView.ReportView.ReportKey.litTagName}>
-      <${ReportView.ReportView.ReportValue.litTagName}>
-      ${i18nString(UIStrings.unavailable)}
-      </${ReportView.ReportView.ReportValue.litTagName}>`;
+      // clang-format off
+      return LitHtml.html`
+        <${ReportView.ReportView.ReportKey.litTagName}>
+          ${i18nString(UIStrings.mainFrame)}
+        </${ReportView.ReportView.ReportKey.litTagName}>
+        <${ReportView.ReportView.ReportValue.litTagName}>
+          ${i18nString(UIStrings.unavailable)}
+        </${ReportView.ReportView.ReportValue.litTagName}>
+      `;
+      // clang-format on
     }
+    const isDisabled = this.screenStatus === ScreenStatusType.Running;
+    // clang-format off
     return LitHtml.html`
-      <${ReportView.ReportView.ReportSectionHeader.litTagName}>
-      <${Buttons.Button.Button.litTagName}
-            .variant=${Buttons.Button.Variant.PRIMARY}
-            @click=${this.navigateAwayAndBack}>
+      ${this.renderBackForwardCacheStatus(mainFrame.backForwardCacheDetails.restoredFromCache)}
+      <div class='url'>
+        <div class='url-key'>
+          ${i18nString(UIStrings.url)}
+        </div>
+        <div class='url-value'>
+          ${mainFrame.url}
+        </div>
+      </div>
+      <${ReportView.ReportView.ReportSection.litTagName}>
+        <${Buttons.Button.Button.litTagName}
+          .disabled=${isDisabled}
+          .spinner=${isDisabled}
+          .variant=${Buttons.Button.Variant.PRIMARY}
+          @click=${this.navigateAwayAndBack}>
+          ${isDisabled ? LitHtml.html`
+            ${i18nString(UIStrings.runningTest)}`:`
             ${i18nString(UIStrings.runTest)}
-      </${Buttons.Button.Button.litTagName}>
-      </${ReportView.ReportView.ReportSectionHeader.litTagName}>
-      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.url)}</${
-        ReportView.ReportView.ReportKey.litTagName}>
-      <${ReportView.ReportView.ReportValue.litTagName}>${mainFrame.url}</${
-        ReportView.ReportView.ReportValue.litTagName}>
-      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.bfcacheStatus)}</${
-        ReportView.ReportView.ReportKey.litTagName}>
-      <${ReportView.ReportView.ReportValue.litTagName}>${
-        this.renderBackForwardCacheStatus(
-            mainFrame.backForwardCacheDetails.restoredFromCache)}</${ReportView.ReportView.ReportValue.litTagName}>
-       ${this.maybeRenderExplanations(mainFrame.backForwardCacheDetails.explanations)}
+          `}
+        </${Buttons.Button.Button.litTagName}>
+      </${ReportView.ReportView.ReportSection.litTagName}>
+      <${ReportView.ReportView.ReportSectionDivider.litTagName}>
+      </${ReportView.ReportView.ReportSectionDivider.litTagName}>
+        ${this.maybeRenderExplanations(mainFrame.backForwardCacheDetails.explanations)}
+      <${ReportView.ReportView.ReportSection.litTagName}>
+        <x-link href="https://web.dev/bfcache/" class="link">
+          ${i18nString(UIStrings.learnMore)}
+        </x-link>
+      </${ReportView.ReportView.ReportSection.litTagName}>
     `;
+    // clang-format on
   }
 
-  private renderBackForwardCacheStatus(status: boolean|undefined): Platform.UIString.LocalizedString {
+  private renderBackForwardCacheStatus(status: boolean|undefined): LitHtml.TemplateResult {
     switch (status) {
       case true:
-        return i18nString(UIStrings.restoredFromBFCache);
+        // clang-format off
+        return LitHtml.html`
+          <${ReportView.ReportView.ReportSection.litTagName}>
+            <div class='status'>
+              <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+                iconName: 'ic_checkmark_16x16',
+                color: 'green',
+                width: '16px',
+                height: '16px',
+                } as IconButton.Icon.IconData}>
+              </${IconButton.Icon.Icon.litTagName}>
+            </div>
+            ${i18nString(UIStrings.restoredFromBFCache)}
+          </${ReportView.ReportView.ReportSection.litTagName}>
+        `;
+        // clang-format on
       case false:
-        return i18nString(UIStrings.normalNavigation);
+        // clang-format off
+        return LitHtml.html`
+          <${ReportView.ReportView.ReportSection.litTagName}>
+            <div class='status'>
+              <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+                  iconName: 'circled_backslash_icon',
+                  color: 'var(--color-text-secondary)',
+                  width: '16px',
+                  height: '16px',
+                  } as IconButton.Icon.IconData}>
+              </${IconButton.Icon.Icon.litTagName}>
+            </div>
+            ${i18nString(UIStrings.normalNavigation)}
+          </${ReportView.ReportView.ReportSection.litTagName}>
+        `;
+        // clang-format on
     }
-    return i18nString(UIStrings.unknown);
+    // clang-format off
+    return LitHtml.html`
+    <${ReportView.ReportView.ReportSection.litTagName}>
+      ${i18nString(UIStrings.unknown)}
+    </${ReportView.ReportView.ReportSection.litTagName}>
+    `;
+    // clang-format on
   }
 
   private maybeRenderExplanations(explanations: Protocol.Page.BackForwardCacheNotRestoredExplanation[]):
@@ -243,36 +325,46 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
     // clang-format off
     return LitHtml.html`
       ${explanations.length > 0 ? LitHtml.html`
-        <${ReportView.ReportView.ReportKey.litTagName}>
+        <${ReportView.ReportView.ReportSectionHeader.litTagName}>
           ${category}
-          <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
-            iconName: 'help_outline',
-            color: 'var(--color-text-secondary)',
-            width: '16px',
-            height: '16px',
-            } as IconButton.Icon.IconData} title=${explainerText}></${IconButton.Icon.Icon.litTagName}>
-        </${ReportView.ReportView.ReportKey.litTagName}>
-        <${ReportView.ReportView.ReportValue.litTagName}>
-          <ul class='not-restored-reason-list'>${explanations.map(explanation => this.renderReason(explanation))}</ul>
-        </${ReportView.ReportView.ReportValue.litTagName}>
+          <div class='help-outline-icon'>
+            <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+              iconName: 'help_outline',
+              color: 'var(--color-text-secondary)',
+              width: '16px',
+              height: '16px',
+              } as IconButton.Icon.IconData} title=${explainerText}>
+            </${IconButton.Icon.Icon.litTagName}>
+          </div>
+        </${ReportView.ReportView.ReportSectionHeader.litTagName}>
+        ${explanations.map(explanation => this.renderReason(explanation))}
       ` : LitHtml.nothing}
     `;
     // clang-format on
   }
 
   private renderReason(explanation: Protocol.Page.BackForwardCacheNotRestoredExplanation): LitHtml.TemplateResult {
+    // clang-format off
     return LitHtml.html`
-      <li>
-      <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
-      iconName: 'circled_exclamation_icon',
-      color: 'orange',
-      width: '16px',
-      height: '16px',
-    } as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}>
-        ${explanation.reason} : ${
-        (explanation.reason in NotRestoredReasonDescription) ?
-            LitHtml.html`${NotRestoredReasonDescription[explanation.reason].name()}` :
-            LitHtml.nothing} </li>
+      <${ReportView.ReportView.ReportSection.litTagName}>
+        ${(explanation.reason in NotRestoredReasonDescription) ?
+          LitHtml.html`
+            <div class='circled-exclamation-icon'>
+              <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+                iconName: 'circled_exclamation_icon',
+                color: 'orange',
+                width: '16px',
+                height: '16px',
+              } as IconButton.Icon.IconData}>
+              </${IconButton.Icon.Icon.litTagName}>
+            </div>
+            ${NotRestoredReasonDescription[explanation.reason].name()}` :
+            LitHtml.nothing}
+      </${ReportView.ReportView.ReportSection.litTagName}>
+      <div class='gray-text'>
+        ${explanation.reason}
+      </div>
     `;
+    // clang-format on
   }
 }