chrome-devtools-frontend/front_end/core/sdk/DOMDebuggerModel.ts

Chrome DevTools UI

// Copyright 2017 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
import * as Protocol from '../../generated/protocol.js';
import * as Common from '../common/common.js';
import * as Platform from '../platform/platform.js';

import {CategorizedBreakpoint, Category} from './CategorizedBreakpoint.js';
import type {EventListenerPausedDetailsAuxData, Location} from './DebuggerModel.js';
import {DOMModel, type DOMNode, Events as DOMModelEvents} from './DOMModel.js';
import {RemoteObject} from './RemoteObject.js';
import {RuntimeModel} from './RuntimeModel.js';
import {SDKModel} from './SDKModel.js';
import {Capability, type Target} from './Target.js';
import {type SDKModelObserver, TargetManager} from './TargetManager.js';

export class DOMDebuggerModel extends SDKModel<EventTypes> {
  readonly agent: ProtocolProxyApi.DOMDebuggerApi;
  readonly #runtimeModel: RuntimeModel;
  #domModel: DOMModel;
  #domBreakpoints: DOMBreakpoint[];
  readonly #domBreakpointsSetting: Common.Settings.Setting<Array<{
    url: Platform.DevToolsPath.UrlString,
    path: string,
    type: Protocol.DOMDebugger.DOMBreakpointType,
    enabled: boolean,
  }>>;
  suspended = false;

  constructor(target: Target) {
    super(target);
    this.agent = target.domdebuggerAgent();
    this.#runtimeModel = (target.model(RuntimeModel) as RuntimeModel);
    this.#domModel = (target.model(DOMModel) as DOMModel);
    this.#domModel.addEventListener(DOMModelEvents.DocumentUpdated, this.documentUpdated, this);
    this.#domModel.addEventListener(DOMModelEvents.NodeRemoved, this.nodeRemoved, this);

    this.#domBreakpoints = [];
    this.#domBreakpointsSetting = Common.Settings.Settings.instance().createLocalSetting('dom-breakpoints', []);
    if (this.#domModel.existingDocument()) {
      void this.documentUpdated();
    }
  }

  runtimeModel(): RuntimeModel {
    return this.#runtimeModel;
  }

  override async suspendModel(): Promise<void> {
    this.suspended = true;
  }

  override async resumeModel(): Promise<void> {
    this.suspended = false;
  }

  async eventListeners(remoteObject: RemoteObject): Promise<EventListener[]> {
    console.assert(remoteObject.runtimeModel() === this.#runtimeModel);
    if (!remoteObject.objectId) {
      return [];
    }

    const listeners = await this.agent.invoke_getEventListeners({objectId: remoteObject.objectId});
    const eventListeners = [];
    for (const payload of listeners.listeners || []) {
      const location = this.#runtimeModel.debuggerModel().createRawLocationByScriptId(
          payload.scriptId, payload.lineNumber, payload.columnNumber);
      if (!location) {
        continue;
      }
      eventListeners.push(new EventListener(
          this, remoteObject, payload.type, payload.useCapture, payload.passive, payload.once,
          payload.handler ? this.#runtimeModel.createRemoteObject(payload.handler) : null,
          payload.originalHandler ? this.#runtimeModel.createRemoteObject(payload.originalHandler) : null, location,
          null));
    }
    return eventListeners;
  }

  retrieveDOMBreakpoints(): void {
    void this.#domModel.requestDocument();
  }

  domBreakpoints(): DOMBreakpoint[] {
    return this.#domBreakpoints.slice();
  }

  hasDOMBreakpoint(node: DOMNode, type: Protocol.DOMDebugger.DOMBreakpointType): boolean {
    return this.#domBreakpoints.some(breakpoint => (breakpoint.node === node && breakpoint.type === type));
  }

  setDOMBreakpoint(node: DOMNode, type: Protocol.DOMDebugger.DOMBreakpointType): DOMBreakpoint {
    for (const breakpoint of this.#domBreakpoints) {
      if (breakpoint.node === node && breakpoint.type === type) {
        this.toggleDOMBreakpoint(breakpoint, true);
        return breakpoint;
      }
    }
    const breakpoint = new DOMBreakpoint(this, node, type, true);
    this.#domBreakpoints.push(breakpoint);
    this.enableDOMBreakpoint(breakpoint);
    this.saveDOMBreakpoints();
    this.dispatchEventToListeners(Events.DOM_BREAKPOINT_ADDED, breakpoint);
    return breakpoint;
  }

  removeDOMBreakpoint(node: DOMNode, type: Protocol.DOMDebugger.DOMBreakpointType): void {
    this.removeDOMBreakpoints(breakpoint => breakpoint.node === node && breakpoint.type === type);
  }

  removeAllDOMBreakpoints(): void {
    this.removeDOMBreakpoints(_breakpoint => true);
  }

  toggleDOMBreakpoint(breakpoint: DOMBreakpoint, enabled: boolean): void {
    if (enabled === breakpoint.enabled) {
      return;
    }
    breakpoint.enabled = enabled;
    if (enabled) {
      this.enableDOMBreakpoint(breakpoint);
    } else {
      this.disableDOMBreakpoint(breakpoint);
    }
    this.saveDOMBreakpoints();
    this.dispatchEventToListeners(Events.DOM_BREAKPOINT_TOGGLED, breakpoint);
  }

  private enableDOMBreakpoint(breakpoint: DOMBreakpoint): void {
    if (breakpoint.node.id) {
      void this.agent.invoke_setDOMBreakpoint({nodeId: breakpoint.node.id, type: breakpoint.type});
      breakpoint.node.setMarker(Marker, true);
    }
  }

  private disableDOMBreakpoint(breakpoint: DOMBreakpoint): void {
    if (breakpoint.node.id) {
      void this.agent.invoke_removeDOMBreakpoint({nodeId: breakpoint.node.id, type: breakpoint.type});
      breakpoint.node.setMarker(Marker, this.nodeHasBreakpoints(breakpoint.node) ? true : null);
    }
  }

  private nodeHasBreakpoints(node: DOMNode): boolean {
    for (const breakpoint of this.#domBreakpoints) {
      if (breakpoint.node === node && breakpoint.enabled) {
        return true;
      }
    }
    return false;
  }

  resolveDOMBreakpointData(auxData: {
    type: Protocol.DOMDebugger.DOMBreakpointType,
    nodeId: Protocol.DOM.NodeId,
    targetNodeId: Protocol.DOM.NodeId,
    insertion: boolean,
  }): {
    type: Protocol.DOMDebugger.DOMBreakpointType,
    node: DOMNode,
    targetNode: DOMNode|null,
    insertion: boolean,
  }|null {
    const type = auxData['type'];
    const node = this.#domModel.nodeForId(auxData['nodeId']);
    if (!type || !node) {
      return null;
    }
    let targetNode: (DOMNode|null)|null = null;
    let insertion = false;
    if (type === Protocol.DOMDebugger.DOMBreakpointType.SubtreeModified) {
      insertion = auxData['insertion'] || false;
      targetNode = this.#domModel.nodeForId(auxData['targetNodeId']);
    }
    return {type, node, targetNode, insertion};
  }

  private currentURL(): Platform.DevToolsPath.UrlString {
    const domDocument = this.#domModel.existingDocument();
    return domDocument ? domDocument.documentURL : Platform.DevToolsPath.EmptyUrlString;
  }

  private async documentUpdated(): Promise<void> {
    if (this.suspended) {
      return;
    }
    const removed = this.#domBreakpoints;
    this.#domBreakpoints = [];
    this.dispatchEventToListeners(Events.DOM_BREAKPOINTS_REMOVED, removed);

    // this.currentURL() is empty when the page is reloaded because the
    // new document has not been requested yet and the old one has been
    // removed. Therefore, we need to request the document and wait for it.
    // Note that requestDocument() caches the document so that it is requested
    // only once.
    const document = await this.#domModel.requestDocument();
    const currentURL = document ? document.documentURL : Platform.DevToolsPath.EmptyUrlString;
    for (const breakpoint of this.#domBreakpointsSetting.get()) {
      if (breakpoint.url === currentURL) {
        void this.#domModel.pushNodeByPathToFrontend(breakpoint.path).then(appendBreakpoint.bind(this, breakpoint));
      }
    }

    function appendBreakpoint(
        this: DOMDebuggerModel, breakpoint: {
          type: Protocol.DOMDebugger.DOMBreakpointType,
          enabled: boolean,
        },
        nodeId: Protocol.DOM.NodeId|null): void {
      const node = nodeId ? this.#domModel.nodeForId(nodeId) : null;
      if (!node) {
        return;
      }

      // Before creating a new DOMBreakpoint, we need to ensure there's no
      // existing breakpoint with the same node and breakpoint type, else we would create
      // multiple DOMBreakpoints of the same type and for the same node.
      for (const existingBreakpoint of this.#domBreakpoints) {
        if (existingBreakpoint.node === node && existingBreakpoint.type === breakpoint.type) {
          return;
        }
      }

      const domBreakpoint = new DOMBreakpoint(this, node, breakpoint.type, breakpoint.enabled);
      this.#domBreakpoints.push(domBreakpoint);
      if (breakpoint.enabled) {
        this.enableDOMBreakpoint(domBreakpoint);
      }
      this.dispatchEventToListeners(Events.DOM_BREAKPOINT_ADDED, domBreakpoint);
    }
  }

  private removeDOMBreakpoints(filter: (arg0: DOMBreakpoint) => boolean): void {
    const removed = [];
    const left = [];
    for (const breakpoint of this.#domBreakpoints) {
      if (filter(breakpoint)) {
        removed.push(breakpoint);
        if (breakpoint.enabled) {
          breakpoint.enabled = false;
          this.disableDOMBreakpoint(breakpoint);
        }
      } else {
        left.push(breakpoint);
      }
    }

    if (!removed.length) {
      return;
    }
    this.#domBreakpoints = left;
    this.saveDOMBreakpoints();
    this.dispatchEventToListeners(Events.DOM_BREAKPOINTS_REMOVED, removed);
  }

  private nodeRemoved(event: Common.EventTarget.EventTargetEvent<{node: DOMNode, parent: DOMNode}>): void {
    if (this.suspended) {
      return;
    }
    const {node} = event.data;
    const children = node.children() || [];
    this.removeDOMBreakpoints(breakpoint => breakpoint.node === node || children.indexOf(breakpoint.node) !== -1);
  }

  private saveDOMBreakpoints(): void {
    const currentURL = this.currentURL();
    const breakpoints = this.#domBreakpointsSetting.get().filter((breakpoint: {
                                                                   url: Platform.DevToolsPath.UrlString,
                                                                 }) => breakpoint.url !== currentURL);
    for (const breakpoint of this.#domBreakpoints) {
      breakpoints.push(
          {url: currentURL, path: breakpoint.node.path(), type: breakpoint.type, enabled: breakpoint.enabled});
    }
    this.#domBreakpointsSetting.set(breakpoints);
  }
}

export const enum Events {
  DOM_BREAKPOINT_ADDED = 'DOMBreakpointAdded',
  DOM_BREAKPOINT_TOGGLED = 'DOMBreakpointToggled',
  DOM_BREAKPOINTS_REMOVED = 'DOMBreakpointsRemoved',
}

export interface EventTypes {
  [Events.DOM_BREAKPOINT_ADDED]: DOMBreakpoint;
  [Events.DOM_BREAKPOINT_TOGGLED]: DOMBreakpoint;
  [Events.DOM_BREAKPOINTS_REMOVED]: DOMBreakpoint[];
}

const Marker = 'breakpoint-marker';

export class DOMBreakpoint {
  domDebuggerModel: DOMDebuggerModel;
  node: DOMNode;
  type: Protocol.DOMDebugger.DOMBreakpointType;
  enabled: boolean;

  constructor(
      domDebuggerModel: DOMDebuggerModel, node: DOMNode, type: Protocol.DOMDebugger.DOMBreakpointType,
      enabled: boolean) {
    this.domDebuggerModel = domDebuggerModel;
    this.node = node;
    this.type = type;
    this.enabled = enabled;
  }
}

export class EventListener {
  readonly #domDebuggerModel: DOMDebuggerModel;
  readonly #eventTarget: RemoteObject;
  readonly #type: string;
  readonly #useCapture: boolean;
  readonly #passive: boolean;
  readonly #once: boolean;
  readonly #handler: RemoteObject|null;
  readonly #originalHandler: RemoteObject|null;
  readonly #location: Location;
  readonly #sourceURL: Platform.DevToolsPath.UrlString;
  readonly #customRemoveFunction: RemoteObject|null;
  #origin: string;

  constructor(
      domDebuggerModel: DOMDebuggerModel, eventTarget: RemoteObject, type: string, useCapture: boolean,
      passive: boolean, once: boolean, handler: RemoteObject|null, originalHandler: RemoteObject|null,
      location: Location, customRemoveFunction: RemoteObject|null, origin?: string) {
    this.#domDebuggerModel = domDebuggerModel;
    this.#eventTarget = eventTarget;
    this.#type = type;
    this.#useCapture = useCapture;
    this.#passive = passive;
    this.#once = once;
    this.#handler = handler;
    this.#originalHandler = originalHandler || handler;
    this.#location = location;
    const script = location.script();
    this.#sourceURL = script ? script.contentURL() : Platform.DevToolsPath.EmptyUrlString;
    this.#customRemoveFunction = customRemoveFunction;
    this.#origin = origin || EventListener.Origin.RAW;
  }

  domDebuggerModel(): DOMDebuggerModel {
    return this.#domDebuggerModel;
  }

  type(): string {
    return this.#type;
  }

  useCapture(): boolean {
    return this.#useCapture;
  }

  passive(): boolean {
    return this.#passive;
  }

  once(): boolean {
    return this.#once;
  }

  handler(): RemoteObject|null {
    return this.#handler;
  }

  location(): Location {
    return this.#location;
  }

  sourceURL(): Platform.DevToolsPath.UrlString {
    return this.#sourceURL;
  }

  originalHandler(): RemoteObject|null {
    return this.#originalHandler;
  }

  canRemove(): boolean {
    return Boolean(this.#customRemoveFunction) || this.#origin !== EventListener.Origin.FRAMEWORK_USER;
  }

  remove(): Promise<void> {
    if (!this.canRemove()) {
      return Promise.resolve(undefined);
    }

    if (this.#origin !== EventListener.Origin.FRAMEWORK_USER) {
      function removeListener(
          this: {
            removeEventListener: (arg0: string, arg1: () => void, arg2: boolean) => void,
          },
          type: string, listener: () => void, useCapture: boolean): void {
        this.removeEventListener(type, listener, useCapture);
        // @ts-expect-error:
        if (this['on' + type]) {
          // @ts-expect-error:
          this['on' + type] = undefined;
        }
      }

      return this.#eventTarget
          .callFunction(
              removeListener,
              [
                RemoteObject.toCallArgument(this.#type),
                RemoteObject.toCallArgument(this.#originalHandler),
                RemoteObject.toCallArgument(this.#useCapture),
              ])
          .then(() => undefined);
    }

    if (this.#customRemoveFunction) {
      function callCustomRemove(
          this: (arg0: string, arg1: () => void, arg2: boolean, arg3: boolean) => void, type: string,
          listener: () => void, useCapture: boolean, passive: boolean): void {
        this.call(null, type, listener, useCapture, passive);
      }

      return this.#customRemoveFunction
          .callFunction(
              callCustomRemove,
              [
                RemoteObject.toCallArgument(this.#type),
                RemoteObject.toCallArgument(this.#originalHandler),
                RemoteObject.toCallArgument(this.#useCapture),
                RemoteObject.toCallArgument(this.#passive),
              ])
          .then(() => undefined);
    }
    return Promise.resolve(undefined);
  }

  canTogglePassive(): boolean {
    return this.#origin !== EventListener.Origin.FRAMEWORK_USER;
  }

  togglePassive(): Promise<undefined> {
    return this.#eventTarget
        .callFunction(
            callTogglePassive,
            [
              RemoteObject.toCallArgument(this.#type),
              RemoteObject.toCallArgument(this.#originalHandler),
              RemoteObject.toCallArgument(this.#useCapture),
              RemoteObject.toCallArgument(this.#passive),
            ])
        .then(() => undefined);

    function callTogglePassive(
        this: {
          addEventListener: (arg0: string, arg1: () => void, arg2: {
            capture: boolean,
            passive: boolean,
          }) => void,
          removeEventListener: (arg0: string, arg1: () => void, arg2: {
            capture: boolean,
          }) => void,
        },
        type: string, listener: () => void, useCapture: boolean, passive: boolean): void {
      this.removeEventListener(type, listener, {capture: useCapture});
      this.addEventListener(type, listener, {capture: useCapture, passive: !passive});
    }
  }

  origin(): string {
    return this.#origin;
  }

  markAsFramework(): void {
    this.#origin = EventListener.Origin.FRAMEWORK;
  }

  isScrollBlockingType(): boolean {
    return this.#type === 'touchstart' || this.#type === 'touchmove' || this.#type === 'mousewheel' ||
        this.#type === 'wheel';
  }
}

export namespace EventListener {
  export const enum Origin {
    RAW = 'Raw',
    FRAMEWORK = 'Framework',
    FRAMEWORK_USER = 'FrameworkUser',
  }
}

export class CSPViolationBreakpoint extends CategorizedBreakpoint {
  readonly #type: Protocol.DOMDebugger.CSPViolationType;
  constructor(category: Category, type: Protocol.DOMDebugger.CSPViolationType) {
    super(category, type);
    this.#type = type;
  }

  type(): Protocol.DOMDebugger.CSPViolationType {
    return this.#type;
  }
}

export class DOMEventListenerBreakpoint extends CategorizedBreakpoint {
  readonly eventTargetNames: string[];
  constructor(eventName: string, eventTargetNames: string[], category: Category) {
    super(category, eventName);
    this.eventTargetNames = eventTargetNames;
  }

  override setEnabled(enabled: boolean): void {
    if (this.enabled() === enabled) {
      return;
    }
    super.setEnabled(enabled);
    for (const model of TargetManager.instance().models(DOMDebuggerModel)) {
      this.updateOnModel(model);
    }
  }

  updateOnModel(model: DOMDebuggerModel): void {
    for (const eventTargetName of this.eventTargetNames) {
      if (this.enabled()) {
        void model.agent.invoke_setEventListenerBreakpoint({eventName: this.name, targetName: eventTargetName});
      } else {
        void model.agent.invoke_removeEventListenerBreakpoint({eventName: this.name, targetName: eventTargetName});
      }
    }
  }

  static readonly listener = 'listener:';
}

let domDebuggerManagerInstance: DOMDebuggerManager;

export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
  readonly #xhrBreakpointsSetting: Common.Settings.Setting<Array<{url: string, enabled: boolean}>>;
  readonly #xhrBreakpoints = new Map<string, boolean>();

  readonly #cspViolationsToBreakOn: CSPViolationBreakpoint[] = [];
  readonly #eventListenerBreakpoints: DOMEventListenerBreakpoint[] = [];

  constructor() {
    this.#xhrBreakpointsSetting = Common.Settings.Settings.instance().createLocalSetting('xhr-breakpoints', []);
    for (const breakpoint of this.#xhrBreakpointsSetting.get()) {
      this.#xhrBreakpoints.set(breakpoint.url, breakpoint.enabled);
    }

    this.#cspViolationsToBreakOn.push(new CSPViolationBreakpoint(
        Category.TRUSTED_TYPE_VIOLATION, Protocol.DOMDebugger.CSPViolationType.TrustedtypeSinkViolation));
    this.#cspViolationsToBreakOn.push(new CSPViolationBreakpoint(
        Category.TRUSTED_TYPE_VIOLATION, Protocol.DOMDebugger.CSPViolationType.TrustedtypePolicyViolation));

    this.createEventListenerBreakpoints(
        Category.MEDIA,
        [
          'play',      'pause',          'playing',    'canplay',    'canplaythrough', 'seeking',
          'seeked',    'timeupdate',     'ended',      'ratechange', 'durationchange', 'volumechange',
          'loadstart', 'progress',       'suspend',    'abort',      'error',          'emptied',
          'stalled',   'loadedmetadata', 'loadeddata', 'waiting',
        ],
        ['audio', 'video']);
    this.createEventListenerBreakpoints(
        Category.PICTURE_IN_PICTURE, ['enterpictureinpicture', 'leavepictureinpicture'], ['video']);
    this.createEventListenerBreakpoints(Category.PICTURE_IN_PICTURE, ['resize'], ['PictureInPictureWindow']);
    this.createEventListenerBreakpoints(Category.PICTURE_IN_PICTURE, ['enter'], ['documentPictureInPicture']);
    this.createEventListenerBreakpoints(
        Category.CLIPBOARD, ['copy', 'cut', 'paste', 'beforecopy', 'beforecut', 'beforepaste'], ['*']);
    this.createEventListenerBreakpoints(
        Category.CONTROL,
        [
          'resize',
          'scroll',
          'scrollend',
          'scrollsnapchange',
          'scrollsnapchanging',
          'zoom',
          'focus',
          'blur',
          'select',
          'change',
          'submit',
          'reset',
        ],
        ['*']);
    this.createEventListenerBreakpoints(Category.DEVICE, ['deviceorientation', 'devicemotion'], ['*']);
    this.createEventListenerBreakpoints(
        Category.DOM_MUTATION,
        [
          'DOMActivate',
          'DOMFocusIn',
          'DOMFocusOut',
          'DOMAttrModified',
          'DOMCharacterDataModified',
          'DOMNodeInserted',
          'DOMNodeInsertedIntoDocument',
          'DOMNodeRemoved',
          'DOMNodeRemovedFromDocument',
          'DOMSubtreeModified',
          'DOMContentLoaded',
        ],
        ['*']);
    this.createEventListenerBreakpoints(
        Category.DRAG_DROP, ['drag', 'dragstart', 'dragend', 'dragenter', 'dragover', 'dragleave', 'drop'], ['*']);

    this.createEventListenerBreakpoints(Category.KEYBOARD, ['keydown', 'keyup', 'keypress', 'input'], ['*']);
    this.createEventListenerBreakpoints(
        Category.LOAD,
        [
          'load',
          'beforeunload',
          'unload',
          'abort',
          'error',
          'hashchange',
          'popstate',
          'navigate',
          'navigatesuccess',
          'navigateerror',
          'currentchange',
          'navigateto',
          'navigatefrom',
          'finish',
          'dispose',
        ],
        ['*']);
    this.createEventListenerBreakpoints(
        Category.MOUSE,
        [
          'auxclick',
          'click',
          'dblclick',
          'mousedown',
          'mouseup',
          'mouseover',
          'mousemove',
          'mouseout',
          'mouseenter',
          'mouseleave',
          'mousewheel',
          'wheel',
          'contextmenu',
        ],
        ['*']);
    this.createEventListenerBreakpoints(
        Category.POINTER,
        [
          'pointerover',
          'pointerout',
          'pointerenter',
          'pointerleave',
          'pointerdown',
          'pointerup',
          'pointermove',
          'pointercancel',
          'gotpointercapture',
          'lostpointercapture',
          'pointerrawupdate',
        ],
        ['*']);
    this.createEventListenerBreakpoints(Category.TOUCH, ['touchstart', 'touchmove', 'touchend', 'touchcancel'], ['*']);
    this.createEventListenerBreakpoints(Category.WORKER, ['message', 'messageerror'], ['*']);
    this.createEventListenerBreakpoints(
        Category.XHR, ['readystatechange', 'load', 'loadstart', 'loadend', 'abort', 'error', 'progress', 'timeout'],
        ['xmlhttprequest', 'xmlhttprequestupload']);

    TargetManager.instance().observeModels(DOMDebuggerModel, this);
  }

  static instance(opts: {
    forceNew: boolean|null,
  } = {forceNew: null}): DOMDebuggerManager {
    const {forceNew} = opts;
    if (!domDebuggerManagerInstance || forceNew) {
      domDebuggerManagerInstance = new DOMDebuggerManager();
    }

    return domDebuggerManagerInstance;
  }

  cspViolationBreakpoints(): CSPViolationBreakpoint[] {
    return this.#cspViolationsToBreakOn.slice();
  }

  private createEventListenerBreakpoints(category: Category, eventNames: string[], eventTargetNames: string[]): void {
    for (const eventName of eventNames) {
      this.#eventListenerBreakpoints.push(new DOMEventListenerBreakpoint(eventName, eventTargetNames, category));
    }
  }

  resolveEventListenerBreakpoint({eventName, targetName}: EventListenerPausedDetailsAuxData): DOMEventListenerBreakpoint
      |null {
    const listenerPrefix = 'listener:';
    if (eventName.startsWith(listenerPrefix)) {
      eventName = eventName.substring(listenerPrefix.length);
    } else {
      return null;
    }
    targetName = (targetName || '*').toLowerCase();
    let result: DOMEventListenerBreakpoint|null = null;
    for (const breakpoint of this.#eventListenerBreakpoints) {
      if (eventName && breakpoint.name === eventName && breakpoint.eventTargetNames.indexOf(targetName) !== -1) {
        result = breakpoint;
      }
      if (!result && eventName && breakpoint.name === eventName && breakpoint.eventTargetNames.indexOf('*') !== -1) {
        result = breakpoint;
      }
    }
    return result;
  }

  eventListenerBreakpoints(): DOMEventListenerBreakpoint[] {
    return this.#eventListenerBreakpoints.slice();
  }

  updateCSPViolationBreakpoints(): void {
    const violationTypes = this.#cspViolationsToBreakOn.filter(v => v.enabled()).map(v => v.type());
    for (const model of TargetManager.instance().models(DOMDebuggerModel)) {
      this.updateCSPViolationBreakpointsForModel(model, violationTypes);
    }
  }

  private updateCSPViolationBreakpointsForModel(
      model: DOMDebuggerModel, violationTypes: Protocol.DOMDebugger.CSPViolationType[]): void {
    void model.agent.invoke_setBreakOnCSPViolation({violationTypes});
  }

  xhrBreakpoints(): Map<string, boolean> {
    return this.#xhrBreakpoints;
  }

  private saveXHRBreakpoints(): void {
    const breakpoints = [];
    for (const url of this.#xhrBreakpoints.keys()) {
      breakpoints.push({url, enabled: this.#xhrBreakpoints.get(url) || false});
    }
    this.#xhrBreakpointsSetting.set(breakpoints);
  }

  addXHRBreakpoint(url: string, enabled: boolean): void {
    this.#xhrBreakpoints.set(url, enabled);
    if (enabled) {
      for (const model of TargetManager.instance().models(DOMDebuggerModel)) {
        void model.agent.invoke_setXHRBreakpoint({url});
      }
    }
    this.saveXHRBreakpoints();
  }

  removeXHRBreakpoint(url: string): void {
    const enabled = this.#xhrBreakpoints.get(url);
    this.#xhrBreakpoints.delete(url);
    if (enabled) {
      for (const model of TargetManager.instance().models(DOMDebuggerModel)) {
        void model.agent.invoke_removeXHRBreakpoint({url});
      }
    }
    this.saveXHRBreakpoints();
  }

  toggleXHRBreakpoint(url: string, enabled: boolean): void {
    this.#xhrBreakpoints.set(url, enabled);
    for (const model of TargetManager.instance().models(DOMDebuggerModel)) {
      if (enabled) {
        void model.agent.invoke_setXHRBreakpoint({url});
      } else {
        void model.agent.invoke_removeXHRBreakpoint({url});
      }
    }
    this.saveXHRBreakpoints();
  }

  modelAdded(domDebuggerModel: DOMDebuggerModel): void {
    for (const url of this.#xhrBreakpoints.keys()) {
      if (this.#xhrBreakpoints.get(url)) {
        void domDebuggerModel.agent.invoke_setXHRBreakpoint({url});
      }
    }
    for (const breakpoint of this.#eventListenerBreakpoints) {
      if (breakpoint.enabled()) {
        breakpoint.updateOnModel(domDebuggerModel);
      }
    }
    const violationTypes = this.#cspViolationsToBreakOn.filter(v => v.enabled()).map(v => v.type());
    this.updateCSPViolationBreakpointsForModel(domDebuggerModel, violationTypes);
  }

  modelRemoved(_domDebuggerModel: DOMDebuggerModel): void {
  }
}

SDKModel.register(DOMDebuggerModel, {capabilities: Capability.DOM, autostart: false});