chrome-devtools-frontend 1.0.939277 → 1.0.941095

package/front_end/core/sdk/DOMDebuggerModel.ts

@@ -7,6 +7,7 @@ import * as i18n from '../i18n/i18n.js';
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import * as Protocol from '../../generated/protocol.js';
 
+import {CategorizedBreakpoint} from './CategorizedBreakpoint.js';
 import type {Location} from './DebuggerModel.js';
 import type {DOMNode} from './DOMModel.js';
 import {DOMModel, Events as DOMModelEvents} from './DOMModel.js';
@@ -690,38 +691,6 @@ export namespace EventListener {
   }
 }
 
-export class CategorizedBreakpoint {
-  readonly #categoryInternal: string;
-  titleInternal: string;
-  enabledInternal: boolean;
-
-  constructor(category: string, title: string) {
-    this.#categoryInternal = category;
-    this.titleInternal = title;
-    this.enabledInternal = false;
-  }
-
-  category(): string {
-    return this.#categoryInternal;
-  }
-
-  enabled(): boolean {
-    return this.enabledInternal;
-  }
-
-  setEnabled(enabled: boolean): void {
-    this.enabledInternal = enabled;
-  }
-
-  title(): string {
-    return this.titleInternal;
-  }
-
-  setTitle(title: string): void {
-    this.titleInternal = title;
-  }
-}
-
 export class CSPViolationBreakpoint extends CategorizedBreakpoint {
   readonly #typeInternal: Protocol.DOMDebugger.CSPViolationType;
   constructor(category: string, title: string, type: Protocol.DOMDebugger.CSPViolationType) {
@@ -734,7 +703,7 @@ export class CSPViolationBreakpoint extends CategorizedBreakpoint {
   }
 }
 
-export class EventListenerBreakpoint extends CategorizedBreakpoint {
+export class DOMEventListenerBreakpoint extends CategorizedBreakpoint {
   readonly instrumentationName: string;
   readonly eventName: string;
   readonly eventTargetNames: string[];
@@ -784,7 +753,7 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
   readonly #xhrBreakpointsSetting: Common.Settings.Setting<{url: string, enabled: boolean}[]>;
   readonly #xhrBreakpointsInternal: Map<string, boolean>;
   readonly #cspViolationsToBreakOn: CSPViolationBreakpoint[];
-  readonly #eventListenerBreakpointsInternal: EventListenerBreakpoint[];
+  readonly #eventListenerBreakpointsInternal: DOMEventListenerBreakpoint[];
 
   constructor() {
     this.#xhrBreakpointsSetting = Common.Settings.Settings.instance().createLocalSetting('xhrBreakpoints', []);
@@ -861,7 +830,24 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
     this.createEventListenerBreakpoints(
         i18nString(UIStrings.keyboard), ['keydown', 'keyup', 'keypress', 'input'], ['*']);
     this.createEventListenerBreakpoints(
-        i18nString(UIStrings.load), ['load', 'beforeunload', 'unload', 'abort', 'error', 'hashchange', 'popstate'],
+        i18nString(UIStrings.load),
+        [
+          'load',
+          'beforeunload',
+          'unload',
+          'abort',
+          'error',
+          'hashchange',
+          'popstate',
+          'navigate',
+          'navigatesuccess',
+          'navigateerror',
+          'currentchange',
+          'navigateto',
+          'navigatefrom',
+          'finish',
+          'dispose',
+        ],
         ['*']);
     this.createEventListenerBreakpoints(
         i18nString(UIStrings.mouse),
@@ -933,19 +919,19 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
   private createInstrumentationBreakpoints(category: string, instrumentationNames: string[]): void {
     for (const instrumentationName of instrumentationNames) {
       this.#eventListenerBreakpointsInternal.push(
-          new EventListenerBreakpoint(instrumentationName, '', [], category, instrumentationName));
+          new DOMEventListenerBreakpoint(instrumentationName, '', [], category, instrumentationName));
     }
   }
 
   private createEventListenerBreakpoints(category: string, eventNames: string[], eventTargetNames: string[]): void {
     for (const eventName of eventNames) {
       this.#eventListenerBreakpointsInternal.push(
-          new EventListenerBreakpoint('', eventName, eventTargetNames, category, eventName));
+          new DOMEventListenerBreakpoint('', eventName, eventTargetNames, category, eventName));
     }
   }
 
-  private resolveEventListenerBreakpointInternal(eventName: string, eventTargetName?: string): EventListenerBreakpoint
-      |null {
+  private resolveEventListenerBreakpointInternal(eventName: string, eventTargetName?: string):
+      DOMEventListenerBreakpoint|null {
     const instrumentationPrefix = 'instrumentation:';
     const listenerPrefix = 'listener:';
     let instrumentationName = '';
@@ -958,7 +944,7 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
       return null;
     }
     eventTargetName = (eventTargetName || '*').toLowerCase();
-    let result: EventListenerBreakpoint|null = null;
+    let result: DOMEventListenerBreakpoint|null = null;
     for (const breakpoint of this.#eventListenerBreakpointsInternal) {
       if (instrumentationName && breakpoint.instrumentationName === instrumentationName) {
         result = breakpoint;
@@ -975,7 +961,7 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
     return result;
   }
 
-  eventListenerBreakpoints(): EventListenerBreakpoint[] {
+  eventListenerBreakpoints(): DOMEventListenerBreakpoint[] {
     return this.#eventListenerBreakpointsInternal.slice();
   }
 
@@ -1008,7 +994,7 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
   resolveEventListenerBreakpoint(auxData: {
     eventName: string,
     targetName: string,
-  }): EventListenerBreakpoint|null {
+  }): DOMEventListenerBreakpoint|null {
     return this.resolveEventListenerBreakpointInternal(auxData['eventName'], auxData['targetName']);
   }
 

package/front_end/core/sdk/EventBreakpointsModel.ts

@@ -0,0 +1,178 @@
+// Copyright 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as Common from '../common/common.js';
+import * as i18n from '../i18n/i18n.js';
+import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
+
+import {CategorizedBreakpoint} from './CategorizedBreakpoint.js';
+import type {Target} from './Target.js';
+import {Capability} from './Target.js';
+import {SDKModel} from './SDKModel.js';
+import type {SDKModelObserver} from './TargetManager.js';
+import {TargetManager} from './TargetManager.js';
+
+const UIStrings = {
+  /**
+   * @description Category of breakpoints
+   */
+  auctionWorklet: 'Ad Auction Worklet',
+
+  /**
+   * @description Name of a breakpoint type.
+   * https://github.com/WICG/turtledove/blob/main/FLEDGE.md#32-on-device-bidding
+   */
+  beforeBidderWorkletBiddingStart: 'Bidder Bidding Phase Start',
+
+  /**
+   * @description Name of a breakpoint type.
+   * https://github.com/WICG/turtledove/blob/main/FLEDGE.md#52-buyer-reporting-on-render-and-ad-events
+   */
+  beforeBidderWorkletReportingStart: 'Bidder Reporting Phase Start',
+
+  /**
+   * @description Name of a breakpoint type.
+   * https://github.com/WICG/turtledove/blob/main/FLEDGE.md#23-scoring-bids
+   */
+  beforeSellerWorkletScoringStart: 'Seller Scoring Phase Start',
+
+  /**
+   * @description Name of a breakpoint type.
+   * https://github.com/WICG/turtledove/blob/main/FLEDGE.md#51-seller-reporting-on-render
+   */
+  beforeSellerWorkletReportingStart: 'Seller Reporting Phase Start',
+};
+
+const str_ = i18n.i18n.registerUIStrings('core/sdk/EventBreakpointsModel.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const enum InstrumentationNames {
+  BeforeBidderWorkletBiddingStart = 'beforeBidderWorkletBiddingStart',
+  BeforeBidderWorkletReportingStart = 'beforeBidderWorkletReportingStart',
+  BeforeSellerWorkletScoringStart = 'beforeSellerWorkletScoringStart',
+  BeforeSellerWorkletReportingStart = 'beforeSellerWorkletReportingStart',
+}
+
+function getTitleForInstrumentationName(instrumentationName: InstrumentationNames): Common.UIString.LocalizedString {
+  switch (instrumentationName) {
+    case InstrumentationNames.BeforeBidderWorkletBiddingStart:
+      return i18nString(UIStrings.beforeBidderWorkletBiddingStart);
+
+    case InstrumentationNames.BeforeBidderWorkletReportingStart:
+      return i18nString(UIStrings.beforeBidderWorkletReportingStart);
+
+    case InstrumentationNames.BeforeSellerWorkletScoringStart:
+      return i18nString(UIStrings.beforeSellerWorkletScoringStart);
+
+    case InstrumentationNames.BeforeSellerWorkletReportingStart:
+      return i18nString(UIStrings.beforeSellerWorkletReportingStart);
+  }
+}
+
+export class EventBreakpointsModel extends SDKModel<void> {
+  readonly agent: ProtocolProxyApi.EventBreakpointsApi;
+
+  constructor(target: Target) {
+    super(target);
+    this.agent = target.eventBreakpointsAgent();
+  }
+}
+
+// This implementation (as opposed to similar class in DOMDebuggerModel) is for
+// instrumentation breakpoints in targets that run JS but do not have a DOM.
+class EventListenerBreakpoint extends CategorizedBreakpoint {
+  readonly instrumentationName: string;
+  constructor(instrumentationName: InstrumentationNames, category: string) {
+    super(category, getTitleForInstrumentationName(instrumentationName));
+    this.instrumentationName = instrumentationName;
+  }
+
+  setEnabled(enabled: boolean): void {
+    if (this.enabled() === enabled) {
+      return;
+    }
+    super.setEnabled(enabled);
+    for (const model of TargetManager.instance().models(EventBreakpointsModel)) {
+      this.updateOnModel(model);
+    }
+  }
+
+  updateOnModel(model: EventBreakpointsModel): void {
+    if (this.enabled()) {
+      model.agent.invoke_setInstrumentationBreakpoint({eventName: this.instrumentationName});
+    } else {
+      model.agent.invoke_removeInstrumentationBreakpoint({eventName: this.instrumentationName});
+    }
+  }
+
+  static readonly instrumentationPrefix = 'instrumentation:';
+}
+
+let eventBreakpointManagerInstance: EventBreakpointsManager;
+
+export class EventBreakpointsManager implements SDKModelObserver<EventBreakpointsModel> {
+  readonly #eventListenerBreakpointsInternal: EventListenerBreakpoint[] = [];
+
+  constructor() {
+    this.createInstrumentationBreakpoints(i18nString(UIStrings.auctionWorklet), [
+      InstrumentationNames.BeforeBidderWorkletBiddingStart,
+      InstrumentationNames.BeforeBidderWorkletReportingStart,
+      InstrumentationNames.BeforeSellerWorkletScoringStart,
+      InstrumentationNames.BeforeSellerWorkletReportingStart,
+    ]);
+
+    TargetManager.instance().observeModels(EventBreakpointsModel, this);
+  }
+
+  static instance(opts: {
+    forceNew: boolean|null,
+  } = {forceNew: null}): EventBreakpointsManager {
+    const {forceNew} = opts;
+    if (!eventBreakpointManagerInstance || forceNew) {
+      eventBreakpointManagerInstance = new EventBreakpointsManager();
+    }
+
+    return eventBreakpointManagerInstance;
+  }
+
+  private createInstrumentationBreakpoints(category: string, instrumentationNames: InstrumentationNames[]): void {
+    for (const instrumentationName of instrumentationNames) {
+      this.#eventListenerBreakpointsInternal.push(new EventListenerBreakpoint(instrumentationName, category));
+    }
+  }
+
+  eventListenerBreakpoints(): EventListenerBreakpoint[] {
+    return this.#eventListenerBreakpointsInternal.slice();
+  }
+
+  resolveEventListenerBreakpointTitle(auxData: {
+    eventName: string,
+  }): string|null {
+    const breakpoint = this.resolveEventListenerBreakpoint(auxData);
+    return breakpoint ? breakpoint.title() : null;
+  }
+
+  resolveEventListenerBreakpoint(auxData: {eventName: string}): EventListenerBreakpoint|null {
+    const eventName = auxData.eventName;
+    if (!eventName.startsWith(EventListenerBreakpoint.instrumentationPrefix)) {
+      return null;
+    }
+
+    const instrumentationName = eventName.substring(EventListenerBreakpoint.instrumentationPrefix.length);
+    return this.#eventListenerBreakpointsInternal.find(b => b.instrumentationName === instrumentationName) || null;
+  }
+
+  modelAdded(eventBreakpointModel: EventBreakpointsModel): void {
+    for (const breakpoint of this.#eventListenerBreakpointsInternal) {
+      if (breakpoint.enabled()) {
+        breakpoint.updateOnModel(eventBreakpointModel);
+      }
+    }
+  }
+
+  modelRemoved(_eventBreakpointModel: EventBreakpointsModel): void {
+  }
+}
+
+SDKModel.register(EventBreakpointsModel, {capabilities: Capability.EventBreakpoints, autostart: false});

package/front_end/core/sdk/Target.ts

@@ -67,7 +67,7 @@ export class Target extends ProtocolClient.InspectorBackend.TargetBase {
         this.#capabilitiesMask = Capability.JS;
         break;
       case Type.AuctionWorklet:
-        this.#capabilitiesMask = Capability.JS;
+        this.#capabilitiesMask = Capability.JS | Capability.EventBreakpoints;
         break;
       case Type.Browser:
         this.#capabilitiesMask = Capability.Target | Capability.IO;
@@ -249,5 +249,6 @@ export enum Capability {
   WebAuthn = 1 << 16,
   IO = 1 << 17,
   Media = 1 << 18,
+  EventBreakpoints = 1 << 19,
   None = 0,
 }

package/front_end/core/sdk/sdk.ts

@@ -11,6 +11,7 @@ import './NetworkManager.js';
 import './RuntimeModel.js';
 
 import * as AccessibilityModel from './AccessibilityModel.js';
+import * as CategorizedBreakpoint from './CategorizedBreakpoint.js';
 import * as ChildTargetManager from './ChildTargetManager.js';
 import * as CompilerSourceMappingContentProvider from './CompilerSourceMappingContentProvider.js';
 import * as Connections from './Connections.js';
@@ -37,6 +38,7 @@ import * as DebuggerModel from './DebuggerModel.js';
 import * as DOMDebuggerModel from './DOMDebuggerModel.js';
 import * as DOMModel from './DOMModel.js';
 import * as EmulationModel from './EmulationModel.js';
+import * as EventBreakpointsModel from './EventBreakpointsModel.js';
 import * as FilmStripModel from './FilmStripModel.js';
 import * as FrameManager from './FrameManager.js';
 import * as HeapProfilerModel from './HeapProfilerModel.js';
@@ -76,6 +78,7 @@ import * as WebAuthnModel from './WebAuthnModel.js';
 
 export {
   AccessibilityModel,
+  CategorizedBreakpoint,
   ChildTargetManager,
   CompilerSourceMappingContentProvider,
   Connections,
@@ -102,6 +105,7 @@ export {
   DOMDebuggerModel,
   DOMModel,
   EmulationModel,
+  EventBreakpointsModel,
   FilmStripModel,
   FrameManager,
   HeapProfilerModel,

package/front_end/devtools_compatibility.js

@@ -396,6 +396,11 @@
     LinearMemoryInspectorTarget: 'DevTools.LinearMemoryInspector.Target',
     Language: 'DevTools.Language',
     ConsoleShowsCorsErrors: 'DevTools.ConsoleShowsCorsErrors',
+    RecordingEdited: 'DevTools.RecordingEdited',
+    RecordingExported: 'DevTools.RecordingExported',
+    RecordingReplayFinished: 'DevTools.RecordingReplayFinished',
+    RecordingReplayStarted: 'DevTools.RecordingReplayStarted',
+    RecordingToggled: 'DevTools.RecordingToggled',
   };
 
   /**

package/front_end/entrypoints/main/MainImpl.ts

@@ -149,7 +149,10 @@ export class MainImpl {
     this.createSettings(prefs);
     await this.requestAndRegisterLocaleData();
 
-    Host.userMetrics.syncSetting(Common.Settings.Settings.instance().moduleSetting<boolean>('sync_preferences').get());
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.SYNC_SETTINGS)) {
+      Host.userMetrics.syncSetting(
+          Common.Settings.Settings.instance().moduleSetting<boolean>('sync_preferences').get());
+    }
 
     this.createAppUI();
   }
@@ -270,8 +273,8 @@ export class MainImpl {
         'keyboardShortcutEditor', 'Enable keyboard shortcut editor', true,
         'https://developer.chrome.com/blog/new-in-devtools-88/#keyboard-shortcuts');
 
-    // Back-forward cache
-    Root.Runtime.experiments.register('bfcacheDebugging', 'Enable back-forward cache debugging support');
+    // Back-Forward Cache
+    Root.Runtime.experiments.register('bfcacheDebugging', 'Enable Back-Forward Cache debugging support');
 
     // Timeline
     Root.Runtime.experiments.register('timelineEventInitiators', 'Timeline: event initiators');

package/front_end/entrypoints/main/main-meta.ts

@@ -223,8 +223,6 @@ let loadedInspectorMainModule: (typeof InspectorMain|undefined);
 
 async function loadMainModule(): Promise<typeof Main> {
   if (!loadedMainModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('entrypoints/main');
     loadedMainModule = await import('./main.js');
   }
   return loadedMainModule;
@@ -754,6 +752,7 @@ function filterLocalesForSettings(): string[] {
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.APPEARANCE,
+  storageType: Common.Settings.SettingStorageType.Synced,
   settingName: 'language',
   settingType: Common.Settings.SettingType.ENUM,
   title: i18nLazyString(UIStrings.language),

package/front_end/entrypoints/shell/shell.js

@@ -20,4 +20,5 @@ import '../../models/persistence/persistence-legacy.js';
 import '../../models/extensions/extensions-legacy.js';
 
 import './shell-meta-files.js';
+import '../main/main.js';
 // We generate the descriptors in this file, which depend on the runtime.

package/front_end/entrypoints/shell/shell.json

@@ -1,6 +1,5 @@
 {
   "modules": [
-    { "name": "entrypoints/main", "type": "autostart" },
     { "name": "ui/legacy", "type": "autostart" },
     { "name": "ui/legacy/components/text_editor", "type": "autostart" },
     { "name": "ui/legacy/components/source_frame", "type": "autostart" },

package/front_end/models/logs/LogManager.ts

@@ -49,6 +49,7 @@ export class LogManager implements SDK.TargetManager.SDKModelObserver<SDK.LogMod
       timestamp: entry.timestamp,
       workerId: entry.workerId,
       category: entry.category,
+      affectedResources: entry.networkRequestId ? {requestId: entry.networkRequestId} : undefined,
     };
     const consoleMessage = new SDK.ConsoleModel.ConsoleMessage(
         target.model(SDK.RuntimeModel.RuntimeModel), entry.source, entry.level, entry.text, details);

package/front_end/panels/accessibility/AXBreadcrumbsPane.ts

@@ -446,7 +446,7 @@ export class AXBreadcrumb {
       }
     }
 
-    if (this.axNodeInternal.hasOnlyUnloadedChildren()) {
+    if (!this.axNodeInternal.ignored() && this.axNodeInternal.hasOnlyUnloadedChildren()) {
       this.nodeElementInternal.classList.add('children-unloaded');
       UI.ARIAUtils.setExpanded(this.nodeElementInternal, false);
     }

package/front_end/panels/accessibility/AccessibilityNodeView.ts

@@ -673,7 +673,7 @@ export class AXNodeIgnoredReasonTreeElement extends AXNodePropertyTreeElement {
         reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.elementIsNotVisible, {});
         break;
       case 'presentationalRole': {
-        const role = axNode && axNode.role() || '';
+        const role = axNode && axNode.role()?.value || '';
         const rolePresentationSpan = document.createElement('span', {is: 'source-code'}).textContent = 'role=' + role;
         reasonElement =
             i18n.i18n.getFormatLocalizedString(str_, UIStrings.elementHasPlaceholder, {PH1: rolePresentationSpan});

package/front_end/panels/application/ApplicationPanelCacheSection.ts

@@ -20,7 +20,7 @@ const UIStrings = {
   /**
   *@description Text in Application Panel Sidebar of the Application panel
   */
-  backForwardCache: 'Back-forward Cache',
+  backForwardCache: 'Back-Forward Cache',
   /**
   *@description A context menu item in the Application Panel Sidebar of the Application panel
   */

package/front_end/panels/application/BackForwardCacheView.ts

@@ -17,67 +17,67 @@ import backForwardCacheViewStyles from './backForwardCacheView.css.js';
 
 const UIStrings = {
   /**
-   * @description Title text in Back-forward Cache view of the Application panel
+   * @description Title text in Back-Forward Cache view of the Application panel
    */
   mainFrame: 'Main Frame',
   /**
-   * @description Title text in Back-forward Cache view of the Application panel
+   * @description Title text in Back-Forward Cache view of the Application panel
    */
-  backForwardCacheTitle: 'Back-forward Cache',
+  backForwardCacheTitle: 'Back-Forward Cache',
   /**
    * @description Status text for the status of the main frame
    */
   unavailable: 'unavailable',
   /**
-   * @description Entry name text in the Back-forward Cache view of the Application panel
+   * @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
+   * @description Entry name text in the Back-Forward Cache view of the Application panel
    */
-  bfcacheStatus: 'Back-forward Cache Status',
+  bfcacheStatus: 'Back-Forward Cache Status',
   /**
-   * @description Status text for the status of the back-forward cache status
+   * @description Status text for the status of the Back-Forward Cache status
    */
   unknown: 'unknown',
   /**
-   * @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.
+   * @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: 'Normal navigation (Not restored from Back-Forward Cache)',
   /**
-   * @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.
+   * @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: 'Restored 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
-   * page eligible for back-forward cache.
+   * Back-Forward Cache. These reasons are actionable i.e. they can be cleaned up to make the
+   * page eligible for Back-Forward Cache.
    */
   pageSupportNeeded: 'Actionable',
   /**
    * @description Explanation for actionable items which prevent the page from being eligible
-   * for back-forward cache.
+   * for Back-Forward Cache.
    */
   pageSupportNeededExplanation:
-      'These reasons are actionable i.e. they can be cleaned up to make the page eligible for back-forward cache.',
+      'These reasons are actionable i.e. they can be cleaned up to make the page eligible for Back-Forward Cache.',
   /**
    * @description Label for a list of reasons which prevent the page from being eligible for
-   * back-forward cache. These reasons are circumstantial / not actionable i.e. they cannot be
-   * cleaned up by developers to make the page eligible for back-forward cache.
+   * Back-Forward Cache. These reasons are circumstantial / not actionable i.e. they cannot be
+   * cleaned up by developers to make the page eligible for Back-Forward Cache.
    */
   circumstantial: 'Not Actionable',
   /**
    * @description Explanation for circumstantial/non-actionable items which prevent the page from being eligible
-   * for back-forward cache.
+   * for Back-Forward Cache.
    */
   circumstantialExplanation:
       'These reasons are not actionable i.e. caching was prevented by something outside of the direct control of the page.',
   /**
    * @description Label for a list of reasons which prevent the page from being eligible for
-   * back-forward cache. These reasons are pending support by chrome i.e. in a future version
-   * of chrome they will not prevent back-forward cache usage anymore.
+   * Back-Forward Cache. These reasons are pending support by chrome i.e. in a future version
+   * of chrome they will not prevent Back-Forward Cache usage anymore.
    */
   supportPending: 'Pending Support',
   /**
@@ -86,10 +86,10 @@ const UIStrings = {
   runTest: 'Run Test',
   /**
    * @description Explanation for 'pending support' items which prevent the page from being eligible
-   * for back-forward cache.
+   * for Back-Forward Cache.
    */
   supportPendingExplanation:
-      'Chrome support for these reasons is pending i.e. they will not prevent the page from being eligible for back-forward cache in a future version of Chrome.',
+      'Chrome support for these reasons is pending i.e. they will not prevent the page from being eligible for Back-Forward Cache in a future version of Chrome.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/BackForwardCacheView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/panels/browser_debugger/CSPViolationBreakpointsSidebarPane.ts

@@ -26,14 +26,14 @@ export class CSPViolationBreakpointsSidebarPane extends CategorizedBreakpointsSi
   }
 
   protected getBreakpointFromPausedDetails(details: SDK.DebuggerModel.DebuggerPausedDetails):
-      SDK.DOMDebuggerModel.CategorizedBreakpoint|null {
+      SDK.CategorizedBreakpoint.CategorizedBreakpoint|null {
     const breakpointType = details.auxData && details.auxData['violationType'] ? details.auxData['violationType'] : '';
     const breakpoints = SDK.DOMDebuggerModel.DOMDebuggerManager.instance().cspViolationBreakpoints();
     const breakpoint = breakpoints.find(x => x.type() === breakpointType);
     return breakpoint ? breakpoint : null;
   }
 
-  protected toggleBreakpoint(breakpoint: SDK.DOMDebuggerModel.CategorizedBreakpoint, enabled: boolean): void {
+  protected toggleBreakpoint(breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint, enabled: boolean): void {
     breakpoint.setEnabled(enabled);
     SDK.DOMDebuggerModel.DOMDebuggerManager.instance().updateCSPViolationBreakpoints();
   }

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -24,10 +24,10 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
   readonly #viewId: string;
   readonly #detailsPausedReason: Protocol.Debugger.PausedEventReason;
   readonly #categories: Map<string, Item>;
-  readonly #breakpoints: Map<SDK.DOMDebuggerModel.CategorizedBreakpoint, Item>;
+  readonly #breakpoints: Map<SDK.CategorizedBreakpoint.CategorizedBreakpoint, Item>;
   #highlightedElement?: HTMLLIElement;
   constructor(
-      categories: string[], breakpoints: SDK.DOMDebuggerModel.CategorizedBreakpoint[], viewId: string,
+      categories: string[], breakpoints: SDK.CategorizedBreakpoint.CategorizedBreakpoint[], viewId: string,
       detailsPausedReason: Protocol.Debugger.PausedEventReason) {
     super(true);
     this.#categoriesTreeOutline = new UI.TreeOutline.TreeOutlineInShadow();
@@ -66,7 +66,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     return this.#categories;
   }
 
-  get breakpoints(): Map<SDK.DOMDebuggerModel.CategorizedBreakpoint, Item> {
+  get breakpoints(): Map<SDK.CategorizedBreakpoint.CategorizedBreakpoint, Item> {
     return this.#breakpoints;
   }
 
@@ -96,7 +96,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     this.#categories.set(name, {element: treeElement, checkbox: labelNode.checkboxElement});
   }
 
-  protected createBreakpoint(breakpoint: SDK.DOMDebuggerModel.CategorizedBreakpoint): void {
+  protected createBreakpoint(breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint): void {
     const labelNode = UI.UIUtils.CheckboxLabel.create(breakpoint.title());
     labelNode.classList.add('source-code');
     labelNode.checkboxElement.addEventListener('click', this.breakpointCheckboxClicked.bind(this, breakpoint), true);
@@ -124,7 +124,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
   }
 
   protected getBreakpointFromPausedDetails(_details: SDK.DebuggerModel.DebuggerPausedDetails):
-      SDK.DOMDebuggerModel.CategorizedBreakpoint|null {
+      SDK.CategorizedBreakpoint.CategorizedBreakpoint|null {
     return null;
   }
 
@@ -180,11 +180,11 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     }
   }
 
-  protected toggleBreakpoint(breakpoint: SDK.DOMDebuggerModel.CategorizedBreakpoint, enabled: boolean): void {
+  protected toggleBreakpoint(breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint, enabled: boolean): void {
     breakpoint.setEnabled(enabled);
   }
 
-  private breakpointCheckboxClicked(breakpoint: SDK.DOMDebuggerModel.CategorizedBreakpoint): void {
+  private breakpointCheckboxClicked(breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint): void {
     const item = this.#breakpoints.get(breakpoint);
     if (!item) {
       return;