chrome-devtools-frontend 1.0.938678 → 1.0.939473

package/front_end/core/sdk/CSSModel.ts

@@ -47,6 +47,7 @@ import {CSSStyleDeclaration, Type} from './CSSStyleDeclaration.js';
 import {CSSStyleSheetHeader} from './CSSStyleSheetHeader.js';
 import type {DOMNode} from './DOMModel.js';
 import {DOMModel} from './DOMModel.js';
+import type {ResourceTreeFrame} from './ResourceTreeModel.js';
 import {Events as ResourceTreeModelEvents, ResourceTreeModel} from './ResourceTreeModel.js';
 import type {Target} from './Target.js';
 import {Capability} from './Target.js';
@@ -54,37 +55,37 @@ import {SDKModel} from './SDKModel.js';
 import {SourceMapManager} from './SourceMapManager.js';
 
 export class CSSModel extends SDKModel<EventTypes> {
-  #isEnabledInternal: boolean;
-  #cachedMatchedCascadeNode: DOMNode|null;
-  #cachedMatchedCascadePromise: Promise<CSSMatchedStyles|null>|null;
-  readonly #domModelInternal: DOMModel;
-  readonly #sourceMapManagerInternal: SourceMapManager<CSSStyleSheetHeader>;
-  agent: ProtocolProxyApi.CSSApi;
-  readonly #styleLoader: ComputedStyleLoader;
+  readonly agent: ProtocolProxyApi.CSSApi;
+  readonly #domModel: DOMModel;
+  readonly #fontFaces: Map<string, CSSFontFace>;
+  readonly #originalStyleSheetText: Map<CSSStyleSheetHeader, Promise<string|null>>;
   readonly #resourceTreeModel: ResourceTreeModel|null;
-  #styleSheetIdToHeader: Map<Protocol.CSS.StyleSheetId, CSSStyleSheetHeader>;
+  readonly #sourceMapManager: SourceMapManager<CSSStyleSheetHeader>;
+  readonly #styleLoader: ComputedStyleLoader;
+  readonly #stylePollingThrottler: Common.Throttler.Throttler;
   readonly #styleSheetIdsForURL: Map<string, Map<string, Set<Protocol.CSS.StyleSheetId>>>;
-  readonly #originalStyleSheetTextInternal: Map<CSSStyleSheetHeader, Promise<string|null>>;
-  #isRuleUsageTrackingEnabled: boolean;
-  readonly #fontFacesInternal: Map<string, CSSFontFace>;
+  readonly #styleSheetIdToHeader: Map<Protocol.CSS.StyleSheetId, CSSStyleSheetHeader>;
+  #cachedMatchedCascadeNode: DOMNode|null;
+  #cachedMatchedCascadePromise: Promise<CSSMatchedStyles|null>|null;
   #cssPropertyTracker: CSSPropertyTracker|null;
   #isCSSPropertyTrackingEnabled: boolean;
+  #isEnabled: boolean;
+  #isRuleUsageTrackingEnabled: boolean;
   #isTrackingRequestPending: boolean;
-  readonly #trackedCSSProperties: Map<number, Protocol.CSS.CSSComputedStyleProperty[]>;
-  readonly #stylePollingThrottler: Common.Throttler.Throttler;
 
   constructor(target: Target) {
     super(target);
-    this.#isEnabledInternal = false;
+    this.#isEnabled = false;
     this.#cachedMatchedCascadeNode = null;
     this.#cachedMatchedCascadePromise = null;
-    this.#domModelInternal = (target.model(DOMModel) as DOMModel);
-    this.#sourceMapManagerInternal = new SourceMapManager(target);
+    this.#domModel = (target.model(DOMModel) as DOMModel);
+    this.#sourceMapManager = new SourceMapManager(target);
     this.agent = target.cssAgent();
     this.#styleLoader = new ComputedStyleLoader(this);
     this.#resourceTreeModel = target.model(ResourceTreeModel);
     if (this.#resourceTreeModel) {
-      this.#resourceTreeModel.addEventListener(ResourceTreeModelEvents.MainFrameNavigated, this.resetStyleSheets, this);
+      this.#resourceTreeModel.addEventListener(
+          ResourceTreeModelEvents.MainFrameNavigated, this.onMainFrameNavigated, this);
     }
     target.registerCSSDispatcher(new CSSDispatcher(this));
     if (!target.suspended()) {
@@ -93,23 +94,21 @@ export class CSSModel extends SDKModel<EventTypes> {
     this.#styleSheetIdToHeader = new Map();
     this.#styleSheetIdsForURL = new Map();
 
-    this.#originalStyleSheetTextInternal = new Map();
+    this.#originalStyleSheetText = new Map();
 
     this.#isRuleUsageTrackingEnabled = false;
 
-    this.#fontFacesInternal = new Map();
+    this.#fontFaces = new Map();
 
     this.#cssPropertyTracker = null;  // TODO: support multiple trackers when we refactor the backend
     this.#isCSSPropertyTrackingEnabled = false;
     this.#isTrackingRequestPending = false;
-    this.#trackedCSSProperties = new Map();
     this.#stylePollingThrottler = new Common.Throttler.Throttler(StylePollingInterval);
 
-    this.#sourceMapManagerInternal.setEnabled(
-        Common.Settings.Settings.instance().moduleSetting('cssSourceMapsEnabled').get());
+    this.#sourceMapManager.setEnabled(Common.Settings.Settings.instance().moduleSetting('cssSourceMapsEnabled').get());
     Common.Settings.Settings.instance()
         .moduleSetting('cssSourceMapsEnabled')
-        .addChangeListener(event => this.#sourceMapManagerInternal.setEnabled((event.data as boolean)));
+        .addChangeListener(event => this.#sourceMapManager.setEnabled((event.data as boolean)));
   }
 
   headersForSourceURL(sourceURL: string): CSSStyleSheetHeader[] {
@@ -148,7 +147,7 @@ export class CSSModel extends SDKModel<EventTypes> {
   }
 
   sourceMapManager(): SourceMapManager<CSSStyleSheetHeader> {
-    return this.#sourceMapManagerInternal;
+    return this.#sourceMapManager;
   }
 
   static trimSourceURL(text: string): string {
@@ -172,7 +171,7 @@ export class CSSModel extends SDKModel<EventTypes> {
   }
 
   domModel(): DOMModel {
-    return this.#domModelInternal;
+    return this.#domModel;
   }
 
   async setStyleText(
@@ -187,7 +186,7 @@ export class CSSModel extends SDKModel<EventTypes> {
         return false;
       }
 
-      this.#domModelInternal.markUndoableState(!majorChange);
+      this.#domModel.markUndoableState(!majorChange);
       const edit = new Edit(styleSheetId, range, text, styles[0]);
       this.fireStyleSheetChanged(styleSheetId, edit);
       return true;
@@ -207,7 +206,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       if (!selectorList) {
         return false;
       }
-      this.#domModelInternal.markUndoableState();
+      this.#domModel.markUndoableState();
       const edit = new Edit(styleSheetId, range, text, selectorList);
       this.fireStyleSheetChanged(styleSheetId, edit);
       return true;
@@ -227,7 +226,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       if (!keyText) {
         return false;
       }
-      this.#domModelInternal.markUndoableState();
+      this.#domModel.markUndoableState();
       const edit = new Edit(styleSheetId, range, text, keyText);
       this.fireStyleSheetChanged(styleSheetId, edit);
       return true;
@@ -268,12 +267,12 @@ export class CSSModel extends SDKModel<EventTypes> {
   }
 
   isEnabled(): boolean {
-    return this.#isEnabledInternal;
+    return this.#isEnabled;
   }
 
   private async enable(): Promise<void> {
     await this.agent.invoke_enable();
-    this.#isEnabledInternal = true;
+    this.#isEnabled = true;
     if (this.#isRuleUsageTrackingEnabled) {
       await this.startCoverage();
     }
@@ -287,7 +286,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       return null;
     }
 
-    const node = this.#domModelInternal.nodeForId(nodeId);
+    const node = this.#domModel.nodeForId(nodeId);
     if (!node) {
       return null;
     }
@@ -399,7 +398,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       if (!media) {
         return false;
       }
-      this.#domModelInternal.markUndoableState();
+      this.#domModel.markUndoableState();
       const edit = new Edit(styleSheetId, range, newMediaText, media);
       this.fireStyleSheetChanged(styleSheetId, edit);
       return true;
@@ -421,7 +420,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       if (!containerQuery) {
         return false;
       }
-      this.#domModelInternal.markUndoableState();
+      this.#domModel.markUndoableState();
       const edit = new Edit(styleSheetId, range, newContainerQueryText, containerQuery);
       this.fireStyleSheetChanged(styleSheetId, edit);
       return true;
@@ -439,7 +438,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       if (!rule) {
         return null;
       }
-      this.#domModelInternal.markUndoableState();
+      this.#domModel.markUndoableState();
       const edit = new Edit(styleSheetId, ruleLocation, ruleText, rule);
       this.fireStyleSheetChanged(styleSheetId, edit);
       return new CSSStyleRule(this, rule);
@@ -477,13 +476,13 @@ export class CSSModel extends SDKModel<EventTypes> {
 
   fontsUpdated(fontFace?: Protocol.CSS.FontFace|null): void {
     if (fontFace) {
-      this.#fontFacesInternal.set(fontFace.src, new CSSFontFace(fontFace));
+      this.#fontFaces.set(fontFace.src, new CSSFontFace(fontFace));
     }
     this.dispatchEventToListeners(Events.FontsUpdated);
   }
 
   fontFaces(): CSSFontFace[] {
-    return [...this.#fontFacesInternal.values()];
+    return [...this.#fontFaces.values()];
   }
 
   styleSheetHeaderForId(id: Protocol.CSS.StyleSheetId): CSSStyleSheetHeader|null {
@@ -503,10 +502,10 @@ export class CSSModel extends SDKModel<EventTypes> {
     if (!header) {
       return Promise.resolve(null);
     }
-    let promise = this.#originalStyleSheetTextInternal.get(header);
+    let promise = this.#originalStyleSheetText.get(header);
     if (!promise) {
       promise = this.getStyleSheetText(header.id);
-      this.#originalStyleSheetTextInternal.set(header, promise);
+      this.#originalStyleSheetText.set(header, promise);
       this.originalContentRequestedForTest(header);
     }
     return promise;
@@ -541,8 +540,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       }
       styleSheetIds.add(styleSheetHeader.id);
     }
-    this.#sourceMapManagerInternal.attachSourceMap(
-        styleSheetHeader, styleSheetHeader.sourceURL, styleSheetHeader.sourceMapURL);
+    this.#sourceMapManager.attachSourceMap(styleSheetHeader, styleSheetHeader.sourceURL, styleSheetHeader.sourceMapURL);
     this.dispatchEventToListeners(Events.StyleSheetAdded, styleSheetHeader);
   }
 
@@ -569,8 +567,8 @@ export class CSSModel extends SDKModel<EventTypes> {
         }
       }
     }
-    this.#originalStyleSheetTextInternal.delete(header);
-    this.#sourceMapManagerInternal.detachSourceMap(header);
+    this.#originalStyleSheetText.delete(header);
+    this.#sourceMapManager.detachSourceMap(header);
     this.dispatchEventToListeners(Events.StyleSheetRemoved, header);
   }
 
@@ -602,13 +600,13 @@ export class CSSModel extends SDKModel<EventTypes> {
     const response = await this.agent.invoke_setStyleSheetText({styleSheetId: header.id, text: newText});
     const sourceMapURL = response.sourceMapURL;
 
-    this.#sourceMapManagerInternal.detachSourceMap(header);
+    this.#sourceMapManager.detachSourceMap(header);
     header.setSourceMapURL(sourceMapURL);
-    this.#sourceMapManagerInternal.attachSourceMap(header, header.sourceURL, header.sourceMapURL);
+    this.#sourceMapManager.attachSourceMap(header, header.sourceURL, header.sourceMapURL);
     if (sourceMapURL === null) {
       return 'Error in CSS.setStyleSheetText';
     }
-    this.#domModelInternal.markUndoableState(!majorChange);
+    this.#domModel.markUndoableState(!majorChange);
     this.fireStyleSheetChanged(styleSheetId);
     return null;
   }
@@ -622,22 +620,38 @@ export class CSSModel extends SDKModel<EventTypes> {
     }
   }
 
+  private async onMainFrameNavigated(event: Common.EventTarget.EventTargetEvent<ResourceTreeFrame>): Promise<void> {
+    // If the main frame was restored from the back-forward cache, the order of CDP
+    // is different from the regular navigations. In this case, events about CSS
+    // stylesheet has already been received and they are mixed with the previous page
+    // stylesheets. Therefore, we re-enable the CSS agent to get fresh events.
+    // For the regular navigatons, we can just clear the local data because events about
+    // stylesheets will arrive later.
+    if (event.data.backForwardCacheDetails.restoredFromCache) {
+      await this.suspendModel();
+      await this.resumeModel();
+    } else {
+      this.resetStyleSheets();
+      this.resetFontFaces();
+    }
+  }
+
   private resetStyleSheets(): void {
     const headers = [...this.#styleSheetIdToHeader.values()];
     this.#styleSheetIdsForURL.clear();
     this.#styleSheetIdToHeader.clear();
     for (const header of headers) {
-      this.#sourceMapManagerInternal.detachSourceMap(header);
+      this.#sourceMapManager.detachSourceMap(header);
       this.dispatchEventToListeners(Events.StyleSheetRemoved, header);
     }
   }
 
   private resetFontFaces(): void {
-    this.#fontFacesInternal.clear();
+    this.#fontFaces.clear();
   }
 
   async suspendModel(): Promise<void> {
-    this.#isEnabledInternal = false;
+    this.#isEnabled = false;
     await this.agent.invoke_disable();
     this.resetStyleSheets();
     this.resetFontFaces();
@@ -713,7 +727,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       if (this.#cssPropertyTracker) {
         this.#cssPropertyTracker.dispatchEventToListeners(
             CSSPropertyTrackerEvents.TrackedCSSPropertiesUpdated,
-            result.nodeIds.map(nodeId => this.#domModelInternal.nodeForId(nodeId)));
+            result.nodeIds.map(nodeId => this.#domModel.nodeForId(nodeId)));
       }
     }
 
@@ -725,7 +739,7 @@ export class CSSModel extends SDKModel<EventTypes> {
   dispose(): void {
     this.disableCSSPropertyTracker();
     super.dispose();
-    this.#sourceMapManagerInternal.dispose();
+    this.#sourceMapManager.dispose();
   }
 
   getAgent(): ProtocolProxyApi.CSSApi {

package/front_end/core/sdk/CategorizedBreakpoint.ts

@@ -0,0 +1,35 @@
+// 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.
+
+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;
+  }
+}

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', []);
@@ -933,19 +902,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 +927,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 +944,7 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
     return result;
   }
 
-  eventListenerBreakpoints(): EventListenerBreakpoint[] {
+  eventListenerBreakpoints(): DOMEventListenerBreakpoint[] {
     return this.#eventListenerBreakpointsInternal.slice();
   }
 
@@ -1008,7 +977,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/EmulationModel.ts

@@ -76,6 +76,8 @@ export class EmulationModel extends SDKModel<void> {
         Common.Settings.Settings.instance().moduleSetting<string>('emulatedCSSMediaFeatureColorGamut');
     const mediaFeaturePrefersColorSchemeSetting =
         Common.Settings.Settings.instance().moduleSetting<string>('emulatedCSSMediaFeaturePrefersColorScheme');
+    const mediaFeatureForcedColorsSetting =
+        Common.Settings.Settings.instance().moduleSetting('emulatedCSSMediaFeatureForcedColors');
     const mediaFeaturePrefersContrastSetting =
         Common.Settings.Settings.instance().moduleSetting<string>('emulatedCSSMediaFeaturePrefersContrast');
     const mediaFeaturePrefersReducedDataSetting =
@@ -90,6 +92,7 @@ export class EmulationModel extends SDKModel<void> {
       ['type', mediaTypeSetting.get()],
       ['color-gamut', mediaFeatureColorGamutSetting.get()],
       ['prefers-color-scheme', mediaFeaturePrefersColorSchemeSetting.get()],
+      ['forced-colors', mediaFeatureForcedColorsSetting.get()],
       ['prefers-contrast', mediaFeaturePrefersContrastSetting.get()],
       ['prefers-reduced-data', mediaFeaturePrefersReducedDataSetting.get()],
       ['prefers-reduced-motion', mediaFeaturePrefersReducedMotionSetting.get()],
@@ -106,6 +109,10 @@ export class EmulationModel extends SDKModel<void> {
       this.#mediaConfiguration.set('prefers-color-scheme', mediaFeaturePrefersColorSchemeSetting.get());
       this.updateCssMedia();
     });
+    mediaFeatureForcedColorsSetting.addChangeListener(() => {
+      this.#mediaConfiguration.set('forced-colors', mediaFeatureForcedColorsSetting.get());
+      this.updateCssMedia();
+    });
     mediaFeaturePrefersContrastSetting.addChangeListener(() => {
       this.#mediaConfiguration.set('prefers-contrast', mediaFeaturePrefersContrastSetting.get());
       this.updateCssMedia();
@@ -367,6 +374,10 @@ export class EmulationModel extends SDKModel<void> {
         name: 'prefers-color-scheme',
         value: this.#mediaConfiguration.get('prefers-color-scheme') ?? '',
       },
+      {
+        name: 'forced-colors',
+        value: this.#mediaConfiguration.get('forced-colors') ?? '',
+      },
       {
         name: 'prefers-contrast',
         value: this.#mediaConfiguration.get('prefers-contrast') ?? '',

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});