chrome-devtools-frontend 1.0.934332 → 1.0.935974

package/front_end/models/emulation/EmulatedDevices.ts

@@ -502,12 +502,14 @@ export class EmulatedDevicesList extends Common.ObjectWrapper.ObjectWrapper<Even
   constructor() {
     super();
 
-    this.#standardSetting = Common.Settings.Settings.instance().createSetting('standardEmulatedDeviceList', []);
+    this.#standardSetting = Common.Settings.Settings.instance().createSetting(
+        'standardEmulatedDeviceList', [], Common.Settings.SettingStorageType.Synced);
     this.#standardInternal = new Set();
     this.listFromJSONV1(this.#standardSetting.get(), this.#standardInternal);
     this.updateStandardDevices();
 
-    this.#customSetting = Common.Settings.Settings.instance().createSetting('customEmulatedDeviceList', []);
+    this.#customSetting = Common.Settings.Settings.instance().createSetting(
+        'customEmulatedDeviceList', [], Common.Settings.SettingStorageType.Synced);
     this.#customInternal = new Set();
     if (!this.listFromJSONV1(this.#customSetting.get(), this.#customInternal)) {
       this.saveCustomDevices();
@@ -643,6 +645,288 @@ export interface JSONMode {
 }
 
 const emulatedDevices = [
+  {
+    'order': 10,
+    'show-by-default': true,
+    'title': 'iPhone SE',
+    'screen': {
+      'horizontal': {
+        'width': 667,
+        'height': 375,
+      },
+      'device-pixel-ratio': 2,
+      'vertical': {
+        'width': 375,
+        'height': 667,
+      },
+    },
+    'capabilities': ['touch', 'mobile'],
+    'user-agent':
+        'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1',
+    'type': 'phone',
+  },
+  {
+    'order': 12,
+    'show-by-default': true,
+    'title': 'iPhone XR',
+    'screen': {
+      'horizontal': {
+        'width': 896,
+        'height': 414,
+      },
+      'device-pixel-ratio': 2,
+      'vertical': {
+        'width': 414,
+        'height': 896,
+      },
+    },
+    'capabilities': ['touch', 'mobile'],
+    'user-agent':
+        'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1',
+    'type': 'phone',
+  },
+  {
+    'order': 14,
+    'show-by-default': true,
+    'title': 'iPhone 12 Pro',
+    'screen': {
+      'horizontal': {
+        'width': 844,
+        'height': 390,
+      },
+      'device-pixel-ratio': 3,
+      'vertical': {
+        'width': 390,
+        'height': 844,
+      },
+    },
+    'capabilities': ['touch', 'mobile'],
+    'user-agent':
+        'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1',
+    'type': 'phone',
+  },
+  {
+    'order': 16,
+    'show-by-default': false,
+    'title': 'Pixel 3 XL',
+    'screen': {
+      'horizontal': {
+        'width': 786,
+        'height': 393,
+      },
+      'device-pixel-ratio': 2.75,
+      'vertical': {
+        'width': 393,
+        'height': 786,
+      },
+    },
+    'capabilities': ['touch', 'mobile'],
+    'user-agent':
+        'Mozilla/5.0 (Linux; Android 11; Pixel 3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.181 Mobile Safari/537.36',
+    'type': 'phone',
+  },
+  {
+    'order': 18,
+    'show-by-default': true,
+    'title': 'Pixel 5',
+    'screen': {
+      'horizontal': {
+        'width': 851,
+        'height': 393,
+      },
+      'device-pixel-ratio': 2.75,
+      'vertical': {
+        'width': 393,
+        'height': 851,
+      },
+    },
+    'capabilities': ['touch', 'mobile'],
+    'user-agent':
+        'Mozilla/5.0 (Linux; Android 11; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.91 Mobile Safari/537.36',
+    'type': 'phone',
+  },
+  {
+    'order': 20,
+    'show-by-default': true,
+    'title': 'Samsung Galaxy S8+',
+    'screen': {
+      'horizontal': {
+        'width': 740,
+        'height': 360,
+      },
+      'device-pixel-ratio': 4,
+      'vertical': {
+        'width': 360,
+        'height': 740,
+      },
+    },
+    'capabilities': ['touch', 'mobile'],
+    'user-agent':
+        'Mozilla/5.0 (Linux; Android 8.0.0; SM-G955U Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Mobile Safari/537.36',
+    'type': 'phone',
+  },
+  {
+    'order': 24,
+    'show-by-default': true,
+    'title': 'Samsung Galaxy S20 Ultra',
+    'screen': {
+      'horizontal': {
+        'width': 915,
+        'height': 412,
+      },
+      'device-pixel-ratio': 3.5,
+      'vertical': {
+        'width': 412,
+        'height': 915,
+      },
+    },
+    'capabilities': ['touch', 'mobile'],
+    'user-agent':
+        'Mozilla/5.0 (Linux; Android 10; SM-G981B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.162 Mobile Safari/537.36',
+    'type': 'phone',
+  },
+  {
+    'order': 26,
+    'show-by-default': true,
+    'title': 'iPad Air',
+    'screen': {
+      'horizontal': {
+        'width': 1180,
+        'height': 820,
+      },
+      'device-pixel-ratio': 2,
+      'vertical': {
+        'width': 820,
+        'height': 1180,
+      },
+    },
+    'capabilities': ['touch', 'mobile'],
+    'user-agent':
+        'Mozilla/5.0 (iPad; CPU OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/87.0.4280.77 Mobile/15E148 Safari/604.1',
+    'type': 'tablet',
+  },
+  {
+    'order': 28,
+    'show-by-default': true,
+    'title': 'iPad Mini',
+    'screen': {
+      'horizontal': {
+        'width': 1024,
+        'height': 768,
+      },
+      'device-pixel-ratio': 2,
+      'vertical': {
+        'width': 768,
+        'height': 1024,
+      },
+    },
+    'capabilities': ['touch', 'mobile'],
+    'user-agent':
+        'Mozilla/5.0 (iPad; CPU OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/87.0.4280.77 Mobile/15E148 Safari/604.1',
+    'type': 'tablet',
+  },
+  {
+    'order': 30,
+    'show-by-default': true,
+    'title': 'Surface Pro 7',
+    'screen': {
+      'horizontal': {
+        'width': 1368,
+        'height': 912,
+      },
+      'device-pixel-ratio': 2,
+      'vertical': {
+        'width': 912,
+        'height': 1368,
+      },
+    },
+    'capabilities': ['touch', 'mobile'],
+    'user-agent':
+        'Mozilla/5.0 (iPad; CPU OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/87.0.4280.77 Mobile/15E148 Safari/604.1',
+    'type': 'tablet',
+  },
+  {
+    'order': 32,
+    'show-by-default': true,
+    'dual-screen': true,
+    'title': 'Surface Duo',
+    'screen': {
+      'horizontal': {'width': 720, 'height': 540},
+      'device-pixel-ratio': 2.5,
+      'vertical': {'width': 540, 'height': 720},
+      'vertical-spanned': {
+        'width': 1114,
+        'height': 720,
+        'hinge': {'width': 34, 'height': 720, 'x': 540, 'y': 0, 'contentColor': {'r': 38, 'g': 38, 'b': 38, 'a': 1}},
+      },
+      'horizontal-spanned': {
+        'width': 720,
+        'height': 1114,
+        'hinge': {'width': 720, 'height': 34, 'x': 0, 'y': 540, 'contentColor': {'r': 38, 'g': 38, 'b': 38, 'a': 1}},
+      },
+    },
+    'capabilities': ['touch', 'mobile'],
+    'user-agent':
+        'Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36',
+    'type': 'phone',
+    'modes': [
+      {'title': 'default', 'orientation': 'vertical', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
+      {'title': 'default', 'orientation': 'horizontal', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
+      {'title': 'spanned', 'orientation': 'vertical-spanned', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
+      {
+        'title': 'spanned',
+        'orientation': 'horizontal-spanned',
+        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
+      },
+    ],
+  },
+  {
+    'order': 34,
+    'show-by-default': true,
+    'dual-screen': true,
+    'title': 'Galaxy Fold',
+    'screen': {
+      'horizontal': {'width': 653, 'height': 280},
+      'device-pixel-ratio': 3,
+      'vertical': {'width': 280, 'height': 653},
+      'vertical-spanned': {'width': 717, 'height': 512},
+      'horizontal-spanned': {'width': 512, 'height': 717},
+    },
+    'capabilities': ['touch', 'mobile'],
+    'user-agent':
+        'Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36',
+    'type': 'phone',
+    'modes': [
+      {'title': 'default', 'orientation': 'vertical', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
+      {'title': 'default', 'orientation': 'horizontal', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
+      {'title': 'spanned', 'orientation': 'vertical-spanned', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
+      {
+        'title': 'spanned',
+        'orientation': 'horizontal-spanned',
+        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
+      },
+    ],
+  },
+  {
+    'order': 36,
+    'show-by-default': true,
+    'title': 'Samsung Galaxy A51/71',
+    'screen': {
+      'horizontal': {
+        'width': 914,
+        'height': 412,
+      },
+      'device-pixel-ratio': 2.625,
+      'vertical': {
+        'width': 412,
+        'height': 914,
+      },
+    },
+    'capabilities': ['touch', 'mobile'],
+    'user-agent':
+        'Mozilla/5.0 (Linux; Android 8.0.0; SM-G955U Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Mobile Safari/537.36',
+    'type': 'phone',
+  },
   {
     'order': 52,
     'show-by-default': true,
@@ -668,7 +952,6 @@ const emulatedDevices = [
     'type': 'tablet',
     'modes': [{'title': 'default', 'orientation': 'horizontal'}],
   },
-
   {
     'order': 50,
     'show-by-default': true,
@@ -694,6 +977,7 @@ const emulatedDevices = [
     'type': 'tablet',
     'modes': [{'title': 'default', 'orientation': 'horizontal'}],
   },
+
   {
     'show-by-default': false,
     'title': 'iPhone 4',
@@ -708,8 +992,8 @@ const emulatedDevices = [
     'type': 'phone',
   },
   {
-    'order': 30,
-    'show-by-default': true,
+    'order': 130,
+    'show-by-default': false,
     'title': 'iPhone 5/SE',
     'screen': {
       'horizontal': {
@@ -736,8 +1020,8 @@ const emulatedDevices = [
     'type': 'phone',
   },
   {
-    'order': 31,
-    'show-by-default': true,
+    'order': 131,
+    'show-by-default': false,
     'title': 'iPhone 6/7/8',
     'screen': {
       'horizontal': {
@@ -764,8 +1048,8 @@ const emulatedDevices = [
     'type': 'phone',
   },
   {
-    'order': 32,
-    'show-by-default': true,
+    'order': 132,
+    'show-by-default': false,
     'title': 'iPhone 6/7/8 Plus',
     'screen': {
       'horizontal': {
@@ -792,8 +1076,8 @@ const emulatedDevices = [
     'type': 'phone',
   },
   {
-    'order': 33,
-    'show-by-default': true,
+    'order': 133,
+    'show-by-default': false,
     'title': 'iPhone X',
     'screen': {
       'horizontal': {'width': 812, 'height': 375},
@@ -1010,8 +1294,8 @@ const emulatedDevices = [
     'type': 'phone',
   },
   {
-    'order': 20,
-    'show-by-default': true,
+    'order': 120,
+    'show-by-default': false,
     'title': 'Pixel 2',
     'screen': {
       'horizontal': {'width': 731, 'height': 411},
@@ -1026,8 +1310,8 @@ const emulatedDevices = [
     'type': 'phone',
   },
   {
-    'order': 21,
-    'show-by-default': true,
+    'order': 121,
+    'show-by-default': false,
     'title': 'Pixel 2 XL',
     'screen': {
       'horizontal': {'width': 823, 'height': 411},
@@ -1154,8 +1438,8 @@ const emulatedDevices = [
     'type': 'phone',
   },
   {
-    'order': 10,
-    'show-by-default': true,
+    'order': 110,
+    'show-by-default': false,
     'title': 'Galaxy S5',
     'screen': {
       'horizontal': {'width': 640, 'height': 360},
@@ -1255,8 +1539,8 @@ const emulatedDevices = [
     'type': 'tablet',
   },
   {
-    'order': 40,
-    'show-by-default': true,
+    'order': 140,
+    'show-by-default': false,
     'title': 'iPad',
     'screen': {
       'horizontal': {
@@ -1283,8 +1567,8 @@ const emulatedDevices = [
     'type': 'tablet',
   },
   {
-    'order': 41,
-    'show-by-default': true,
+    'order': 141,
+    'show-by-default': false,
     'title': 'iPad Pro',
     'screen': {
       'horizontal': {'width': 1366, 'height': 1024},
@@ -1409,7 +1693,7 @@ const emulatedDevices = [
     'modes': [{'title': 'default', 'orientation': 'horizontal'}],
   },
   {
-    'show-by-default': true,
+    'show-by-default': false,
     'title': 'Moto G4',
     'screen': {
       'horizontal': {
@@ -1437,66 +1721,4 @@ const emulatedDevices = [
         {'platform': 'Android', 'platformVersion': '6.0.1', 'architecture': '', 'model': 'Moto G (4)', 'mobile': true},
     'type': 'phone',
   },
-  {
-    'order': 45,
-    'show-by-default': true,
-    'dual-screen': true,
-    'title': 'Surface Duo',
-    'screen': {
-      'horizontal': {'width': 720, 'height': 540},
-      'device-pixel-ratio': 2.5,
-      'vertical': {'width': 540, 'height': 720},
-      'vertical-spanned': {
-        'width': 1114,
-        'height': 720,
-        'hinge': {'width': 34, 'height': 720, 'x': 540, 'y': 0, 'contentColor': {'r': 38, 'g': 38, 'b': 38, 'a': 1}},
-      },
-      'horizontal-spanned': {
-        'width': 720,
-        'height': 1114,
-        'hinge': {'width': 720, 'height': 34, 'x': 0, 'y': 540, 'contentColor': {'r': 38, 'g': 38, 'b': 38, 'a': 1}},
-      },
-    },
-    'capabilities': ['touch', 'mobile'],
-    'user-agent':
-        'Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36',
-    'type': 'phone',
-    'modes': [
-      {'title': 'default', 'orientation': 'vertical', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
-      {'title': 'default', 'orientation': 'horizontal', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
-      {'title': 'spanned', 'orientation': 'vertical-spanned', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
-      {
-        'title': 'spanned',
-        'orientation': 'horizontal-spanned',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
-      },
-    ],
-  },
-  {
-    'order': 46,
-    'show-by-default': true,
-    'dual-screen': true,
-    'title': 'Galaxy Fold',
-    'screen': {
-      'horizontal': {'width': 653, 'height': 280},
-      'device-pixel-ratio': 3,
-      'vertical': {'width': 280, 'height': 653},
-      'vertical-spanned': {'width': 717, 'height': 512},
-      'horizontal-spanned': {'width': 512, 'height': 717},
-    },
-    'capabilities': ['touch', 'mobile'],
-    'user-agent':
-        'Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36',
-    'type': 'phone',
-    'modes': [
-      {'title': 'default', 'orientation': 'vertical', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
-      {'title': 'default', 'orientation': 'horizontal', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
-      {'title': 'spanned', 'orientation': 'vertical-spanned', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
-      {
-        'title': 'spanned',
-        'orientation': 'horizontal-spanned',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
-      },
-    ],
-  },
 ];

package/front_end/models/issues_manager/IssuesManager.ts

@@ -11,13 +11,13 @@ import {AttributionReportingIssue} from './AttributionReportingIssue.js';
 import {ContentSecurityPolicyIssue} from './ContentSecurityPolicyIssue.js';
 import {CorsIssue} from './CorsIssue.js';
 import {CrossOriginEmbedderPolicyIssue, isCrossOriginEmbedderPolicyIssue} from './CrossOriginEmbedderPolicyIssue.js';
-import {DeprecationIssue} from './DeprecationIssue.js';
 import {GenericIssue} from './GenericIssue.js';
 import {HeavyAdIssue} from './HeavyAdIssue.js';
 import type {Issue, IssueKind} from './Issue.js';
 import {Events} from './IssuesManagerEvents.js';
 import {LowTextContrastIssue} from './LowTextContrastIssue.js';
 import {MixedContentIssue} from './MixedContentIssue.js';
+import {NavigatorUserAgentIssue} from './NavigatorUserAgentIssue.js';
 import {QuirksModeIssue} from './QuirksModeIssue.js';
 import {SameSiteCookieIssue} from './SameSiteCookieIssue.js';
 import {SharedArrayBufferIssue} from './SharedArrayBufferIssue.js';
@@ -85,7 +85,7 @@ const issueCodeHandlers = new Map<
   ],
   [
     Protocol.Audits.InspectorIssueCode.NavigatorUserAgentIssue,
-    DeprecationIssue.fromInspectorIssue,
+    NavigatorUserAgentIssue.fromInspectorIssue,
   ],
   [
     Protocol.Audits.InspectorIssueCode.AttributionReportingIssue,

package/front_end/models/issues_manager/{DeprecationIssue.ts → NavigatorUserAgentIssue.ts}

@@ -17,7 +17,7 @@ const UIStrings = {
    */
   userAgentReduction: 'User-Agent String Reduction',
 };
-const str_ = i18n.i18n.registerUIStrings('models/issues_manager/DeprecationIssue.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('models/issues_manager/NavigatorUserAgentIssue.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 // TODO(crbug.com/1167717): Make this a const enum again
@@ -26,7 +26,7 @@ export enum IssueCode {
   NavigatorUserAgentIssue = 'DeprecationIssue::NavigatorUserAgentIssue',
 }
 
-export class DeprecationIssue extends Issue<IssueCode> {
+export class NavigatorUserAgentIssue extends Issue<IssueCode> {
   private issueDetails: Protocol.Audits.NavigatorUserAgentIssueDetails;
 
   constructor(issueDetails: Protocol.Audits.NavigatorUserAgentIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel) {
@@ -73,12 +73,12 @@ export class DeprecationIssue extends Issue<IssueCode> {
   }
 
   static fromInspectorIssue(issuesModel: SDK.IssuesModel.IssuesModel, inspectorIssue: Protocol.Audits.InspectorIssue):
-      DeprecationIssue[] {
+      NavigatorUserAgentIssue[] {
     const details = inspectorIssue.details.navigatorUserAgentIssueDetails;
     if (!details) {
       console.warn('NavigatorUserAgent issue without details received.');
       return [];
     }
-    return [new DeprecationIssue(details, issuesModel)];
+    return [new NavigatorUserAgentIssue(details, issuesModel)];
   }
 }

package/front_end/models/issues_manager/issues_manager.ts

@@ -7,7 +7,6 @@ import * as ContentSecurityPolicyIssue from './ContentSecurityPolicyIssue.js';
 import * as ContrastCheckTrigger from './ContrastCheckTrigger.js';
 import * as CorsIssue from './CorsIssue.js';
 import * as CrossOriginEmbedderPolicyIssue from './CrossOriginEmbedderPolicyIssue.js';
-import * as DeprecationIssue from './DeprecationIssue.js';
 import * as GenericIssue from './GenericIssue.js';
 import * as HeavyAdIssue from './HeavyAdIssue.js';
 import * as Issue from './Issue.js';
@@ -16,6 +15,7 @@ import * as IssuesManager from './IssuesManager.js';
 import * as LowTextContrastIssue from './LowTextContrastIssue.js';
 import * as MarkdownIssueDescription from './MarkdownIssueDescription.js';
 import * as MixedContentIssue from './MixedContentIssue.js';
+import * as NavigatorUserAgentIssue from './NavigatorUserAgentIssue.js';
 import * as QuirksModeIssue from './QuirksModeIssue.js';
 import * as RelatedIssue from './RelatedIssue.js';
 import * as SameSiteCookieIssue from './SameSiteCookieIssue.js';
@@ -30,7 +30,6 @@ export {
   ContrastCheckTrigger,
   CorsIssue,
   CrossOriginEmbedderPolicyIssue,
-  DeprecationIssue,
   GenericIssue,
   HeavyAdIssue,
   Issue,
@@ -39,6 +38,7 @@ export {
   LowTextContrastIssue,
   MarkdownIssueDescription,
   MixedContentIssue,
+  NavigatorUserAgentIssue,
   QuirksModeIssue,
   RelatedIssue,
   SameSiteCookieIssue,

package/front_end/panels/application/BackForwardCacheView.ts

@@ -4,6 +4,7 @@
 
 import type * as Platform from '../../core/platform/platform.js';
 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 ReportView from '../../ui/components/report_view/report_view.js';
@@ -19,10 +20,6 @@ const UIStrings = {
    * @description Title text in Back-forward Cache view of the Application panel
    */
   mainFrame: 'Main Frame',
-  /**
-   * @description Section header text in Back-forward Cache view of the Application panel
-   */
-  lastMainFrameNavigation: 'Last Main Frame Navigation',
   /**
    * @description Title text in Back-forward Cache view of the Application panel
    */
@@ -83,6 +80,10 @@ const UIStrings = {
    * of chrome they will not prevent back-forward cache usage anymore.
    */
   supportPending: 'Pending Support',
+  /**
+   * @description Button name for showing whether BFCache is available in the pages.
+   */
+  runTest: 'Run Test',
   /**
    * @description Explanation for 'pending support' items which prevent the page from being eligible
    * for back-forward cache.
@@ -131,6 +132,48 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
     return this.getMainResourceTreeModel()?.mainFrame || null;
   }
 
+  private async goBackOneHistoryEntry(): Promise<void> {
+    SDK.TargetManager.TargetManager.instance().removeModelListener(
+        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated,
+        this.goBackOneHistoryEntry, this);
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    if (!mainTarget) {
+      return;
+    }
+    const resourceTreeModel = mainTarget.model(SDK.ResourceTreeModel.ResourceTreeModel);
+    if (!resourceTreeModel) {
+      return;
+    }
+    const historyResults = await resourceTreeModel.navigationHistory();
+    if (!historyResults) {
+      return;
+    }
+    resourceTreeModel.navigateToHistoryEntry(historyResults.entries[historyResults.currentIndex - 1]);
+  }
+
+  private async navigateAwayAndBack(): Promise<void> {
+    // Checking BFCache Compatibility
+
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    if (!mainTarget) {
+      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);
+
+      // 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://version" because it must be cross-site.
+      // Ideally, We want to have our own testing page like "chrome: //bfcache-test".
+      resourceTreeModel.navigate('chrome://version/');
+    }
+  }
+
   private renderMainFrameInformation(mainFrame: SDK.ResourceTreeModel.ResourceTreeFrame|null): LitHtml.TemplateResult {
     if (!mainFrame) {
       return LitHtml.html`<${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.mainFrame)}</${
@@ -140,8 +183,13 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
       </${ReportView.ReportView.ReportValue.litTagName}>`;
     }
     return LitHtml.html`
-      <${ReportView.ReportView.ReportSectionHeader.litTagName}>${i18nString(UIStrings.lastMainFrameNavigation)}</${
-        ReportView.ReportView.ReportSectionHeader.litTagName}>
+      <${ReportView.ReportView.ReportSectionHeader.litTagName}>
+      <${Buttons.Button.Button.litTagName}
+            .variant=${Buttons.Button.Variant.PRIMARY}
+            @click=${this.navigateAwayAndBack}>
+            ${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}</${