chrome-devtools-frontend 1.0.943986 → 1.0.945579

package/front_end/core/sdk/OverlayModel.ts

@@ -79,9 +79,6 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
   #showScrollBottleneckRectsSetting: Common.Settings.Setting<any>;
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  #showHitTestBordersSetting: Common.Settings.Setting<any>;
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   #showWebVitalsSetting: Common.Settings.Setting<any>;
   #registeredListeners: Common.EventTarget.EventDescriptor[];
   #showViewportSizeOnResize: boolean;
@@ -123,7 +120,6 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
     this.#showFPSCounterSetting = Common.Settings.Settings.instance().moduleSetting('showFPSCounter');
     this.#showScrollBottleneckRectsSetting =
         Common.Settings.Settings.instance().moduleSetting('showScrollBottleneckRects');
-    this.#showHitTestBordersSetting = Common.Settings.Settings.instance().moduleSetting('showHitTestBorders');
     this.#showWebVitalsSetting = Common.Settings.Settings.instance().moduleSetting('showWebVitals');
 
     this.#registeredListeners = [];
@@ -213,8 +209,6 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
       this.#showScrollBottleneckRectsSetting.addChangeListener(
           () => this.overlayAgent.invoke_setShowScrollBottleneckRects(
               {show: this.#showScrollBottleneckRectsSetting.get()})),
-      this.#showHitTestBordersSetting.addChangeListener(
-          () => this.overlayAgent.invoke_setShowHitTestBorders({show: this.#showHitTestBordersSetting.get()})),
       this.#showWebVitalsSetting.addChangeListener(
           () => this.overlayAgent.invoke_setShowWebVitals({show: this.#showWebVitalsSetting.get()})),
     ];
@@ -237,9 +231,6 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
     if (this.#showScrollBottleneckRectsSetting.get()) {
       this.overlayAgent.invoke_setShowScrollBottleneckRects({show: true});
     }
-    if (this.#showHitTestBordersSetting.get()) {
-      this.overlayAgent.invoke_setShowHitTestBorders({show: true});
-    }
     if (this.#showWebVitalsSetting.get()) {
       this.overlayAgent.invoke_setShowWebVitals({show: true});
     }

package/front_end/core/sdk/Resource.ts

@@ -152,8 +152,8 @@ export class Resource implements TextUtils.ContentProvider.ContentProvider {
   }
 
   // TODO(crbug.com/1253323): Cast to RawPathString will be removed when migration to branded types is complete.
-  contentURL(): Platform.DevToolsPath.RawPathString {
-    return this.#urlInternal as Platform.DevToolsPath.RawPathString;
+  contentURL(): string {
+    return this.#urlInternal;
   }
 
   contentType(): Common.ResourceType.ResourceType {

package/front_end/core/sdk/Script.ts

@@ -30,7 +30,6 @@
 import * as Protocol from '../../generated/protocol.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Common from '../common/common.js';
-import type * as Platform from '../platform/platform.js';
 import * as i18n from '../i18n/i18n.js';
 
 import type {DebuggerModel} from './DebuggerModel.js';
@@ -165,8 +164,8 @@ export class Script implements TextUtils.ContentProvider.ContentProvider, FrameA
   }
 
   // TODO(crbug.com/1253323): Cast to RawPathString will be removed when migration to branded types is complete.
-  contentURL(): Platform.DevToolsPath.RawPathString {
-    return this.sourceURL as Platform.DevToolsPath.RawPathString;
+  contentURL(): string {
+    return this.sourceURL;
   }
 
   contentType(): Common.ResourceType.ResourceType {

package/front_end/core/sdk/sdk-meta.ts

@@ -155,14 +155,6 @@ const UIStrings = {
   */
   hideScrollPerformanceBottlenecks: 'Hide scroll performance bottlenecks',
   /**
-  *@description Title of a setting under the Rendering category that can be invoked through the Command Menu
-  */
-  showHittestBorders: 'Show hit-test borders',
-  /**
-  *@description Title of a setting under the Rendering category that can be invoked through the Command Menu
-  */
-  hideHittestBorders: 'Hide hit-test borders',
-  /**
   *@description Title of a Rendering setting that can be invoked through the Command Menu
   */
   emulateAFocusedPage: 'Emulate a focused page',
@@ -665,24 +657,6 @@ Common.Settings.registerSettingExtension({
   defaultValue: false,
 });
 
-Common.Settings.registerSettingExtension({
-  category: Common.Settings.SettingCategory.RENDERING,
-  settingName: 'showHitTestBorders',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  storageType: Common.Settings.SettingStorageType.Session,
-  options: [
-    {
-      value: true,
-      title: i18nLazyString(UIStrings.showHittestBorders),
-    },
-    {
-      value: false,
-      title: i18nLazyString(UIStrings.hideHittestBorders),
-    },
-  ],
-  defaultValue: false,
-});
-
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.RENDERING,
   title: i18nLazyString(UIStrings.emulateAFocusedPage),

package/front_end/entrypoints/inspector_main/RenderingOptions.ts

@@ -95,16 +95,6 @@ const UIStrings = {
   */
   highlightsFramesRedDetectedToBe: 'Highlights frames (red) detected to be ads.',
   /**
-  * @description The name of a checkbox setting in the Rendering tool. This setting shows borders
-  * around hit-test regions. 'hit-test regions' are areas on the page where the browser is listening
-  * for mouse clicks.
-  */
-  hittestBorders: 'Hit-test borders',
-  /**
-  * @description Explanation text for the 'Hit-test borders' setting in the Rendering tool.
-  */
-  showsBordersAroundHittestRegions: 'Shows borders around hit-test regions.',
-  /**
   * @description The name of a checkbox setting in the Rendering tool. This setting shows an overlay
   * with Core Web Vitals. Core Web Vitals: https://support.google.com/webmasters/answer/9205520?hl=en
   */
@@ -246,9 +236,6 @@ export class RenderingOptionsView extends UI.Widget.VBox {
     this.appendCheckbox(
         i18nString(UIStrings.highlightAdFrames), i18nString(UIStrings.highlightsFramesRedDetectedToBe),
         Common.Settings.Settings.instance().moduleSetting('showAdHighlights'));
-    this.appendCheckbox(
-        i18nString(UIStrings.hittestBorders), i18nString(UIStrings.showsBordersAroundHittestRegions),
-        Common.Settings.Settings.instance().moduleSetting('showHitTestBorders'));
     this.appendCheckbox(
         i18nString(UIStrings.coreWebVitals), i18nString(UIStrings.showsAnOverlayWithCoreWebVitals),
         Common.Settings.Settings.instance().moduleSetting('showWebVitals'));

package/front_end/entrypoints/main/MainImpl.ts

@@ -365,11 +365,15 @@ export class MainImpl {
         'Enable CSS <length> authoring tool in the Styles pane (https://goo.gle/length-feedback)', undefined,
         'https://developer.chrome.com/blog/new-in-devtools-96/#length');
 
+    // Display precise changes in the Changes tab.
+    Root.Runtime.experiments.register('preciseChanges', 'Display more precise changes in the Changes tab');
+
     Root.Runtime.experiments.enableExperimentsByDefault([
       'sourceOrderViewer',
       'hideIssuesFeature',
       'bfcacheDebugging',
       'cssTypeComponentLength',
+      'preciseChanges',
       Root.Runtime.ExperimentName.SYNC_SETTINGS,
     ]);
 

package/front_end/generated/protocol.d.ts

@@ -10442,10 +10442,6 @@ declare namespace Protocol {
        * The fantasy font-family.
        */
       fantasy?: string;
-      /**
-       * The pictograph font-family.
-       */
-      pictograph?: string;
     }
 
     /**

package/front_end/models/bindings/BreakpointManager.ts

@@ -32,7 +32,6 @@
 
 import * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import type * as Platform from '../../core/platform/platform.js';
 import type * as Protocol from '../../generated/protocol.js';
 import type * as TextUtils from '../text_utils/text_utils.js';
 import * as Workspace from '../workspace/workspace.js';
@@ -630,7 +629,7 @@ export class ModelBreakpoint {
         const positions = debuggerLocations.map(loc => {
           const script = loc.script() as SDK.Script.Script;
           return {
-            url: script.sourceURL as Platform.DevToolsPath.RawPathString,
+            url: script.sourceURL,
             scriptId: script.scriptId,
             scriptHash: script.hash,
             lineNumber: loc.lineNumber,
@@ -645,7 +644,7 @@ export class ModelBreakpoint {
         // at least signal a warning to the developer that this #breakpoint wasn't
         // really resolved.
         const position = {
-          url: this.#breakpoint.url() as Platform.DevToolsPath.RawPathString,
+          url: this.#breakpoint.url(),
           scriptId: '' as Protocol.Runtime.ScriptId,
           scriptHash: '',
           lineNumber,
@@ -794,7 +793,7 @@ export class ModelBreakpoint {
 }
 
 interface Position {
-  url: Platform.DevToolsPath.RawPathString;
+  url: string;
   scriptId: Protocol.Runtime.ScriptId;
   scriptHash: string;
   lineNumber: number;

package/front_end/models/bindings/ResourceMapping.ts

@@ -3,7 +3,6 @@
 // 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 TextUtils from '../text_utils/text_utils.js';
 import * as Workspace from '../workspace/workspace.js';
@@ -421,7 +420,7 @@ class Binding implements TextUtils.ContentProvider.ContentProvider {
     return this.resources.values().next().value;
   }
 
-  contentURL(): Platform.DevToolsPath.RawPathString {
+  contentURL(): string {
     return this.firstResource().contentURL();
   }
 

package/front_end/models/bindings/StylesSourceMapping.ts

@@ -29,7 +29,6 @@
  */
 
 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 type * as TextUtils from '../text_utils/text_utils.js';
 import * as Workspace from '../workspace/workspace.js';
@@ -298,7 +297,7 @@ export class StyleFile implements TextUtils.ContentProvider.ContentProvider {
     Common.EventTarget.removeEventListeners(this.#eventListeners);
   }
 
-  contentURL(): Platform.DevToolsPath.RawPathString {
+  contentURL(): string {
     console.assert(this.headers.size > 0);
     return this.headers.values().next().value.originalContentProvider().contentURL();
   }

package/front_end/models/emulation/EmulatedDevices.ts

@@ -502,14 +502,12 @@ export class EmulatedDevicesList extends Common.ObjectWrapper.ObjectWrapper<Even
   constructor() {
     super();
 
-    this.#standardSetting = Common.Settings.Settings.instance().createSetting(
-        'standardEmulatedDeviceList', [], Common.Settings.SettingStorageType.Synced);
+    this.#standardSetting = Common.Settings.Settings.instance().createSetting('standardEmulatedDeviceList', []);
     this.#standardInternal = new Set();
     this.listFromJSONV1(this.#standardSetting.get(), this.#standardInternal);
     this.updateStandardDevices();
 
-    this.#customSetting = Common.Settings.Settings.instance().createSetting(
-        'customEmulatedDeviceList', [], Common.Settings.SettingStorageType.Synced);
+    this.#customSetting = Common.Settings.Settings.instance().createSetting('customEmulatedDeviceList', []);
     this.#customInternal = new Set();
     if (!this.listFromJSONV1(this.#customSetting.get(), this.#customInternal)) {
       this.saveCustomDevices();

package/front_end/models/persistence/IsolatedFileSystem.ts

@@ -28,6 +28,8 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+// TODO(crbug.com/1253323): All casts to UrlString will be removed from this file when migration to branded types is complete.
+
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -82,7 +84,7 @@ export class IsolatedFileSystem extends PlatformFileSystem {
   constructor(
       manager: IsolatedFileSystemManager, path: string, embedderPath: string, domFileSystem: FileSystem, type: string) {
     // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
-    super(path as Platform.DevToolsPath.UrlString, type);
+    super(path, type);
     this.manager = manager;
     this.embedderPathInternal = embedderPath;
     this.domFileSystem = domFileSystem;
@@ -174,9 +176,8 @@ export class IsolatedFileSystem extends PlatformFileSystem {
               this.initialGitFoldersInternal.add(parentFolder);
             }
             if (this.isFileExcluded(entry.fullPath + '/')) {
-              // TODO(crbug.com/1253323): Cast to RawPathString will be removed when migration to branded types is complete.
               this.excludedEmbedderFolders.push(Common.ParsedURL.ParsedURL.capFilePrefix(
-                  this.path() + entry.fullPath as Platform.DevToolsPath.RawPathString, Host.Platform.isWin()));
+                  this.path() + entry.fullPath as Platform.DevToolsPath.UrlString, Host.Platform.isWin()));
               continue;
             }
             ++pendingRequests;
@@ -552,9 +553,9 @@ export class IsolatedFileSystem extends PlatformFileSystem {
                                              Common.ResourceType.resourceTypes.Document;
   }
 
-  tooltipForURL(url: Platform.DevToolsPath.RawPathString): string {
-    const path =
-        Platform.StringUtilities.trimMiddle(Common.ParsedURL.ParsedURL.capFilePrefix(url, Host.Platform.isWin()), 150);
+  tooltipForURL(url: string): string {
+    const path = Platform.StringUtilities.trimMiddle(
+        Common.ParsedURL.ParsedURL.capFilePrefix(url as Platform.DevToolsPath.UrlString, Host.Platform.isWin()), 150);
     return i18nString(UIStrings.linkedToS, {PH1: path});
   }
 

package/front_end/models/persistence/PersistenceActions.ts

@@ -5,6 +5,7 @@
 import * as Common from '../../core/common/common.js';
 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 type * as TextUtils from '../text_utils/text_utils.js';
@@ -92,7 +93,9 @@ export class ContextMenuProvider implements UI.ContextMenu.Provider {
     const binding = uiSourceCode && PersistenceImpl.instance().binding(uiSourceCode);
     const fileURL = binding ? binding.fileSystem.contentURL() : contentProvider.contentURL();
     if (fileURL.startsWith('file://')) {
-      const path = Common.ParsedURL.ParsedURL.capFilePrefix(fileURL, Host.Platform.isWin());
+      // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
+      const path =
+          Common.ParsedURL.ParsedURL.capFilePrefix(fileURL as Platform.DevToolsPath.UrlString, Host.Platform.isWin());
       contextMenu.revealSection().appendItem(
           i18nString(UIStrings.openInContainingFolder),
           () => Host.InspectorFrontendHost.InspectorFrontendHostInstance.showItemInFolder(path));

package/front_end/models/persistence/PlatformFileSystem.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import type * as Common from '../../core/common/common.js';
-import type * as Platform from '../../core/platform/platform.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as TextUtils from '../text_utils/text_utils.js';
 
@@ -16,9 +15,9 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('models/persistence/PlatformFileSystem.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class PlatformFileSystem {
-  private readonly pathInternal: Platform.DevToolsPath.UrlString;
+  private readonly pathInternal: string;
   private readonly typeInternal: string;
-  constructor(path: Platform.DevToolsPath.UrlString, type: string) {
+  constructor(path: string, type: string) {
     this.pathInternal = path;
     this.typeInternal = type;
   }
@@ -35,7 +34,7 @@ export class PlatformFileSystem {
     return [];
   }
 
-  path(): Platform.DevToolsPath.UrlString {
+  path(): string {
     return this.pathInternal;
   }
 

package/front_end/models/text_utils/ContentProvider.ts

@@ -29,10 +29,9 @@
  */
 
 import type * as Common from '../../core/common/common.js';
-import type * as Platform from '../../core/platform/platform.js';
 
 export abstract class ContentProvider {
-  abstract contentURL(): Platform.DevToolsPath.RawPathString;
+  abstract contentURL(): string;
   abstract contentType(): Common.ResourceType.ResourceType;
   abstract contentEncoded(): Promise<boolean>;
   abstract requestContent(): Promise<DeferredContent>;

package/front_end/models/text_utils/StaticContentProvider.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import type * as Common from '../../core/common/common.js';
-import type * as Platform from '../../core/platform/platform.js';
 
 import type {ContentProvider, DeferredContent, SearchMatch} from './ContentProvider.js';
 import {performSearchInContent} from './TextUtils.js';
@@ -30,8 +29,8 @@ export class StaticContentProvider implements ContentProvider {
   }
 
   // TODO(crbug.com/1253323): Cast to PawPathString will be removed when migration to branded types is complete.
-  contentURL(): Platform.DevToolsPath.RawPathString {
-    return this.contentURLInternal as Platform.DevToolsPath.RawPathString;
+  contentURL(): string {
+    return this.contentURLInternal;
   }
 
   contentType(): Common.ResourceType.ResourceType {

package/front_end/models/workspace/UISourceCode.ts

@@ -192,8 +192,8 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   }
 
   // TODO(crbug.com/1253323): Cast to RawPathString will be removed when migration to branded types is complete.
-  contentURL(): Platform.DevToolsPath.RawPathString {
-    return this.url() as Platform.DevToolsPath.RawPathString;
+  contentURL(): string {
+    return this.url();
   }
 
   contentType(): Common.ResourceType.ResourceType {

package/front_end/models/workspace_diff/WorkspaceDiff.ts

@@ -5,9 +5,14 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as Diff from '../../third_party/diff/diff.js';
+import * as FormatterModule from '../formatter/formatter.js';
 import * as Persistence from '../persistence/persistence.js';
 import * as Workspace from '../workspace/workspace.js';
 
+interface DiffRequestOptions {
+  shouldFormatDiff: boolean;
+}
+
 export class WorkspaceDiffImpl extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   private readonly uiSourceCodeDiffs: WeakMap<Workspace.UISourceCode.UISourceCode, UISourceCodeDiff>;
   private readonly loadingUISourceCodes:
@@ -29,8 +34,9 @@ export class WorkspaceDiffImpl extends Common.ObjectWrapper.ObjectWrapper<EventT
     workspace.uiSourceCodes().forEach(this.updateModifiedState.bind(this));
   }
 
-  requestDiff(uiSourceCode: Workspace.UISourceCode.UISourceCode): Promise<Diff.Diff.DiffArray|null> {
-    return this.uiSourceCodeDiff(uiSourceCode).requestDiff();
+  requestDiff(uiSourceCode: Workspace.UISourceCode.UISourceCode, diffRequestOptions: DiffRequestOptions):
+      Promise<Diff.Diff.DiffArray|null> {
+    return this.uiSourceCodeDiff(uiSourceCode).requestDiff(diffRequestOptions);
   }
 
   subscribeToDiffChange(uiSourceCode: Workspace.UISourceCode.UISourceCode, callback: () => void, thisObj?: Object):
@@ -212,9 +218,9 @@ export class UISourceCodeDiff extends Common.ObjectWrapper.ObjectWrapper<UISourc
     }
   }
 
-  requestDiff(): Promise<Diff.Diff.DiffArray|null> {
+  requestDiff(diffRequestOptions: DiffRequestOptions): Promise<Diff.Diff.DiffArray|null> {
     if (!this.requestDiffPromise) {
-      this.requestDiffPromise = this.innerRequestDiff();
+      this.requestDiffPromise = this.innerRequestDiff(diffRequestOptions);
     }
     return this.requestDiffPromise;
   }
@@ -231,12 +237,12 @@ export class UISourceCodeDiff extends Common.ObjectWrapper.ObjectWrapper<UISourc
     return content.content || ('error' in content && content.error) || '';
   }
 
-  private async innerRequestDiff(): Promise<Diff.Diff.DiffArray|null> {
+  private async innerRequestDiff({shouldFormatDiff}: DiffRequestOptions): Promise<Diff.Diff.DiffArray|null> {
     if (this.dispose) {
       return null;
     }
 
-    const baseline = await this.originalContent();
+    let baseline = await this.originalContent();
     if (baseline === null) {
       return null;
     }
@@ -264,6 +270,14 @@ export class UISourceCodeDiff extends Common.ObjectWrapper.ObjectWrapper<UISourc
     if (current === null || baseline === null) {
       return null;
     }
+    if (shouldFormatDiff) {
+      baseline = (await FormatterModule.ScriptFormatter.format(
+                      this.uiSourceCode.contentType(), this.uiSourceCode.mimeType(), baseline))
+                     .formattedContent;
+      current = (await FormatterModule.ScriptFormatter.format(
+                     this.uiSourceCode.contentType(), this.uiSourceCode.mimeType(), current))
+                    .formattedContent;
+    }
     return Diff.Diff.DiffWrapper.lineDiff(baseline.split(/\r\n|\n|\r/), current.split(/\r\n|\n|\r/));
   }
 }

package/front_end/panels/animation/animationTimeline.css

@@ -24,6 +24,8 @@
   margin-bottom: -1px;
   background-color: var(--color-background-elevation-1);
   display: flex;
+  flex-direction: column;
+  justify-content: space-around;
   align-items: center;
   flex: 0 0 150px;
 }

package/front_end/panels/application/BackForwardCacheStrings.ts

@@ -424,66 +424,6 @@ const UIStrings = {
       * @description Description text for not restored reason ContentMediaPlay.
       */
   contentMediaPlay: 'A media player was playing upon navigating away.',
-  /**
-      * @description Description text for not restored reason EmbedderPopupBlockerTabHelper.
-      */
-  embedderPopupBlockerTabHelper: 'EmbedderPopupBlockerTabHelper',
-  /**
-      * @description Description text for not restored reason EmbedderSafeBrowsingTriggeredPopupBlocker.
-      */
-  embedderSafeBrowsingTriggeredPopupBlocker: 'EmbedderSafeBrowsingTriggeredPopupBlocker',
-  /**
-      * @description Description text for not restored reason EmbedderSafeBrowsingThreatDetails.
-      */
-  embedderSafeBrowsingThreatDetails: 'EmbedderSafeBrowsingThreatDetails',
-  /**
-      * @description Description text for not restored reason EmbedderAppBannerManager.
-      */
-  embedderAppBannerManager: 'EmbedderAppBannerManager',
-  /**
-      * @description Description text for not restored reason EmbedderDomDistillerViewerSource.
-      */
-  embedderDomDistillerViewerSource: 'EmbedderDomDistillerViewerSource',
-  /**
-      * @description Description text for not restored reason EmbedderDomDistillerSelfDeletingRequestDelegate.
-      */
-  embedderDomDistillerSelfDeletingRequestDelegate: 'EmbedderDomDistillerSelfDeletingRequestDelegate',
-  /**
-      * @description Description text for not restored reason EmbedderOomInterventionTabHelper.
-      */
-  embedderOomInterventionTabHelper: 'EmbedderOomInterventionTabHelper',
-  /**
-      * @description Description text for not restored reason EmbedderOfflinePage.
-      */
-  embedderOfflinePage: 'EmbedderOfflinePage',
-  /**
-      * @description Description text for not restored reason EmbedderChromePasswordManagerClientBindCredentialManager.
-      */
-  embedderChromePasswordManagerClientBindCredentialManager: 'EmbedderChromePasswordManagerClientBindCredentialManager',
-  /**
-      * @description Description text for not restored reason EmbedderPermissionRequestManager.
-      */
-  embedderPermissionRequestManager: 'EmbedderPermissionRequestManager',
-  /**
-      * @description Description text for not restored reason EmbedderModalDialog.
-      */
-  embedderModalDialog: 'EmbedderModalDialog',
-  /**
-      * @description Description text for not restored reason EmbedderExtensions.
-      */
-  embedderExtensions: 'EmbedderExtensions',
-  /**
-      * @description Description text for not restored reason EmbedderExtensionMessaging.
-      */
-  embedderExtensionMessaging: 'EmbedderExtensionMessaging',
-  /**
-      * @description Description text for not restored reason EmbedderExtensionMessagingForOpenPort.
-      */
-  embedderExtensionMessagingForOpenPort: 'EmbedderExtensionMessagingForOpenPort',
-  /**
-      * @description Description text for not restored reason EmbedderExtensionSentMessageToCachedFrame.
-      */
-  embedderExtensionSentMessageToCachedFrame: 'EmbedderExtensionSentMessageToCachedFrame',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/application/BackForwardCacheStrings.ts', UIStrings);
@@ -601,23 +541,23 @@ export const NotRestoredReasonDescription = {
   'ContentMediaSession': {name: i18nLazyString(UIStrings.contentMediaSession)},
   'ContentMediaSessionService': {name: i18nLazyString(UIStrings.contentMediaSessionService)},
   'ContentMediaPlay': {name: i18nLazyString(UIStrings.contentMediaPlay)},
-  'EmbedderPopupBlockerTabHelper': {name: i18nLazyString(UIStrings.embedderPopupBlockerTabHelper)},
+  'EmbedderPopupBlockerTabHelper': {name: i18n.i18n.lockedLazyString('EmbedderPopupBlockerTabHelper')},
   'EmbedderSafeBrowsingTriggeredPopupBlocker':
-      {name: i18nLazyString(UIStrings.embedderSafeBrowsingTriggeredPopupBlocker)},
-  'EmbedderSafeBrowsingThreatDetails': {name: i18nLazyString(UIStrings.embedderSafeBrowsingThreatDetails)},
-  'EmbedderAppBannerManager': {name: i18nLazyString(UIStrings.embedderAppBannerManager)},
-  'EmbedderDomDistillerViewerSource': {name: i18nLazyString(UIStrings.embedderDomDistillerViewerSource)},
+      {name: i18n.i18n.lockedLazyString('EmbedderSafeBrowsingTriggeredPopupBlocker')},
+  'EmbedderSafeBrowsingThreatDetails': {name: i18n.i18n.lockedLazyString('EmbedderSafeBrowsingThreatDetails')},
+  'EmbedderAppBannerManager': {name: i18n.i18n.lockedLazyString('EmbedderAppBannerManager')},
+  'EmbedderDomDistillerViewerSource': {name: i18n.i18n.lockedLazyString('EmbedderDomDistillerViewerSource')},
   'EmbedderDomDistillerSelfDeletingRequestDelegate':
-      {name: i18nLazyString(UIStrings.embedderDomDistillerSelfDeletingRequestDelegate)},
-  'EmbedderOomInterventionTabHelper': {name: i18nLazyString(UIStrings.embedderOomInterventionTabHelper)},
-  'EmbedderOfflinePage': {name: i18nLazyString(UIStrings.embedderOfflinePage)},
+      {name: i18n.i18n.lockedLazyString('EmbedderDomDistillerSelfDeletingRequestDelegate')},
+  'EmbedderOomInterventionTabHelper': {name: i18n.i18n.lockedLazyString('EmbedderOomInterventionTabHelper')},
+  'EmbedderOfflinePage': {name: i18n.i18n.lockedLazyString('EmbedderOfflinePage')},
   'EmbedderChromePasswordManagerClientBindCredentialManager':
-      {name: i18nLazyString(UIStrings.embedderChromePasswordManagerClientBindCredentialManager)},
-  'EmbedderPermissionRequestManager': {name: i18nLazyString(UIStrings.embedderPermissionRequestManager)},
-  'EmbedderModalDialog': {name: i18nLazyString(UIStrings.embedderModalDialog)},
-  'EmbedderExtensions': {name: i18nLazyString(UIStrings.embedderExtensions)},
-  'EmbedderExtensionMessaging': {name: i18nLazyString(UIStrings.embedderExtensionMessaging)},
-  'EmbedderExtensionMessagingForOpenPort': {name: i18nLazyString(UIStrings.embedderExtensionMessagingForOpenPort)},
+      {name: i18n.i18n.lockedLazyString('EmbedderChromePasswordManagerClientBindCredentialManager')},
+  'EmbedderPermissionRequestManager': {name: i18n.i18n.lockedLazyString('EmbedderPermissionRequestManager')},
+  'EmbedderModalDialog': {name: i18n.i18n.lockedLazyString('EmbedderModalDialog')},
+  'EmbedderExtensions': {name: i18n.i18n.lockedLazyString('EmbedderExtensions')},
+  'EmbedderExtensionMessaging': {name: i18n.i18n.lockedLazyString('EmbedderExtensionMessaging')},
+  'EmbedderExtensionMessagingForOpenPort': {name: i18n.i18n.lockedLazyString('EmbedderExtensionMessagingForOpenPort')},
   'EmbedderExtensionSentMessageToCachedFrame':
-      {name: i18nLazyString(UIStrings.embedderExtensionSentMessageToCachedFrame)},
+      {name: i18n.i18n.lockedLazyString('EmbedderExtensionSentMessageToCachedFrame')},
 };

package/front_end/panels/application/BackForwardCacheView.ts

@@ -262,7 +262,14 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
 
   private renderReason(explanation: Protocol.Page.BackForwardCacheNotRestoredExplanation): LitHtml.TemplateResult {
     return LitHtml.html`
-      <li>${explanation.reason} : ${
+      <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>

package/front_end/panels/application/ReportingApiView.ts

@@ -5,22 +5,36 @@
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ApplicationComponents from './components/components.js';
+import type * as Protocol from '../../generated/protocol.js';
 
 import {ReportingApiReportsView} from './ReportingApiReportsView.js';
 
 export class ReportingApiView extends UI.SplitWidget.SplitWidget {
+  private readonly endpointsGrid = new ApplicationComponents.EndpointsGrid.EndpointsGrid();
+  private endpoints: Map<string, Protocol.Network.ReportingApiEndpoint[]>;
+
   constructor() {
     super(/* isVertical: */ false, /* secondIsSidebar: */ true);
+    this.endpoints = new Map();
     const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
     const networkManager = mainTarget && mainTarget.model(SDK.NetworkManager.NetworkManager);
     if (networkManager) {
+      networkManager.addEventListener(
+          SDK.NetworkManager.Events.ReportingApiEndpointsChangedForOrigin,
+          event => this.onEndpointsChangedForOrigin(event.data), this);
+
       const reportingApiReportsView = new ReportingApiReportsView(networkManager);
       const reportingApiEndpointsView = new UI.Widget.VBox();
       reportingApiEndpointsView.setMinimumSize(0, 40);
-      reportingApiEndpointsView.contentElement.appendChild(new ApplicationComponents.EndpointsGrid.EndpointsGrid());
+      reportingApiEndpointsView.contentElement.appendChild(this.endpointsGrid);
       this.setMainWidget(reportingApiReportsView);
       this.setSidebarWidget(reportingApiEndpointsView);
       networkManager.enableReportingApi();
     }
   }
+
+  private onEndpointsChangedForOrigin(data: Protocol.Network.ReportingApiEndpointsChangedForOriginEvent): void {
+    this.endpoints.set(data.origin, data.endpoints);
+    this.endpointsGrid.data = {endpoints: this.endpoints};
+  }
 }