chrome-devtools-frontend 1.0.943709 → 1.0.945329

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 {
@@ -313,10 +312,6 @@ export class Script implements TextUtils.ContentProvider.ContentProvider, FrameA
     return !this.sourceURL;
   }
 
-  isInlineScriptWithSourceURL(): boolean {
-    return Boolean(this.hasSourceURL) && this.isInlineScript();
-  }
-
   async setBlackboxedRanges(positions: Protocol.Debugger.ScriptPosition[]): Promise<boolean> {
     const response = await this.debuggerModel.target().debuggerAgent().invoke_setBlackboxedRanges(
         {scriptId: this.scriptId, positions});

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/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/DefaultScriptMapping.ts

@@ -75,11 +75,7 @@ export class DefaultScriptMapping implements DebuggerSourceMapping {
     if (!uiSourceCode) {
       return null;
     }
-    const lineNumber = rawLocation.lineNumber - (script.isInlineScriptWithSourceURL() ? script.lineOffset : 0);
-    let columnNumber = rawLocation.columnNumber || 0;
-    if (script.isInlineScriptWithSourceURL() && !lineNumber && columnNumber) {
-      columnNumber -= script.columnOffset;
-    }
+    const {lineNumber, columnNumber = 0} = rawLocation;
     return uiSourceCode.uiLocation(lineNumber, columnNumber);
   }
 
@@ -89,10 +85,6 @@ export class DefaultScriptMapping implements DebuggerSourceMapping {
     if (!script) {
       return [];
     }
-    if (script.isInlineScriptWithSourceURL()) {
-      return [this.#debuggerModel.createRawLocation(
-          script, lineNumber + script.lineOffset, lineNumber ? columnNumber : columnNumber + script.columnOffset)];
-    }
     return [this.#debuggerModel.createRawLocation(script, lineNumber, columnNumber)];
   }
 

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/ResourceScriptMapping.ts

@@ -127,30 +127,22 @@ export class ResourceScriptMapping implements DebuggerSourceMapping {
     if (!scriptFile.hasScripts([script])) {
       return null;
     }
-    const lineNumber = rawLocation.lineNumber - (script.isInlineScriptWithSourceURL() ? script.lineOffset : 0);
-    let columnNumber = rawLocation.columnNumber || 0;
-    if (script.isInlineScriptWithSourceURL() && !lineNumber && columnNumber) {
-      columnNumber -= script.columnOffset;
-    }
+    const {lineNumber, columnNumber = 0} = rawLocation;
     return uiSourceCode.uiLocation(lineNumber, columnNumber);
   }
 
   uiLocationToRawLocations(uiSourceCode: Workspace.UISourceCode.UISourceCode, lineNumber: number, columnNumber: number):
       SDK.DebuggerModel.Location[] {
     const scriptFile = this.#uiSourceCodeToScriptFile.get(uiSourceCode);
-    if (!scriptFile || typeof scriptFile.script === 'undefined') {
+    if (!scriptFile) {
       return [];
     }
 
-    const script = scriptFile.script;
+    const {script} = scriptFile;
     if (!script) {
       return [];
     }
 
-    if (script.isInlineScriptWithSourceURL()) {
-      return [this.debuggerModel.createRawLocation(
-          script, lineNumber + script.lineOffset, lineNumber ? columnNumber : columnNumber + script.columnOffset)];
-    }
     return [this.debuggerModel.createRawLocation(script, lineNumber, columnNumber)];
   }
 

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/formatter/SourceFormatter.ts

@@ -165,21 +165,6 @@ class ScriptMapping implements Bindings.DebuggerWorkspaceBinding.DebuggerSourceM
     if (!formatData || !script) {
       return null;
     }
-    if (script.isInlineScriptWithSourceURL()) {
-      // Inline scripts with #sourceURL= have lineEndings wrt. the inline script (and not wrt. the containing document),
-      // but `rawLocation` will always use locations wrt. the containing document, because that is what the back-end is
-      // sending. This is a hack, because what we are really doing here is deciding the location based on /how/ the
-      // script is displayed, which is really something this layer cannot and should not have to decide: The
-      // SourceFormatter should not have to know whether a script is displayed inline (in its containing document) or
-      // stand-alone.
-      const [relativeLineNumber, relativeColumnNumber] = script.toRelativeLocation(rawLocation);
-      const [formattedLineNumber, formattedColumnNumber] =
-          formatData.mapping.originalToFormatted(relativeLineNumber, relativeColumnNumber);
-      return formatData.formattedSourceCode.uiLocation(formattedLineNumber, formattedColumnNumber);
-    }
-    // Here we either have an inline script without a #sourceURL= or a stand-alone script. For stand-alone scripts, no
-    // translation must be applied. For inline scripts, also no translation must be applied, because the line-endings
-    // tables in the mapping are the same as in the containing document.
     const [lineNumber, columnNumber] =
         formatData.mapping.originalToFormatted(rawLocation.lineNumber, rawLocation.columnNumber || 0);
     return formatData.formattedSourceCode.uiLocation(lineNumber, columnNumber);

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/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};
+  }
 }