devtools-tracing 1.1.0 → 1.2.0

package/lib/front_end/core/sdk/DOMModel.ts

@@ -1,1961 +0,0 @@
-// Copyright 2021 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-/*
- * Copyright (C) 2009, 2010 Google Inc. All rights reserved.
- * Copyright (C) 2009 Joseph Pecoraro
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are
- * met:
- *
- *     * Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- *     * Redistributions in binary form must reproduce the above
- * copyright notice, this list of conditions and the following disclaimer
- * in the documentation and/or other materials provided with the
- * distribution.
- *     * Neither the #name of Google Inc. nor the names of its
- * contributors may be used to endorse or promote products derived from
- * this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
- * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
- * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
- * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
- * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
- * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
- * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
- * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
- * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-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 * as Root from '../root/root.js';
-
-import {CSSModel} from './CSSModel.js';
-import {FrameManager} from './FrameManager.js';
-import {OverlayModel} from './OverlayModel.js';
-import {RemoteObject} from './RemoteObject.js';
-import {ResourceTreeModel} from './ResourceTreeModel.js';
-import {RuntimeModel} from './RuntimeModel.js';
-import {SDKModel} from './SDKModel.js';
-import {Capability, type Target} from './Target.js';
-import {TargetManager} from './TargetManager.js';
-
-/** Keep this list in sync with https://w3c.github.io/aria/#state_prop_def **/
-export const ARIA_ATTRIBUTES = new Set<string>([
-  'role',
-  'aria-activedescendant',
-  'aria-atomic',
-  'aria-autocomplete',
-  'aria-braillelabel',
-  'aria-brailleroledescription',
-  'aria-busy',
-  'aria-checked',
-  'aria-colcount',
-  'aria-colindex',
-  'aria-colindextext',
-  'aria-colspan',
-  'aria-controls',
-  'aria-current',
-  'aria-describedby',
-  'aria-description',
-  'aria-details',
-  'aria-disabled',
-  'aria-dropeffect',
-  'aria-errormessage',
-  'aria-expanded',
-  'aria-flowto',
-  'aria-grabbed',
-  'aria-haspopup',
-  'aria-hidden',
-  'aria-invalid',
-  'aria-keyshortcuts',
-  'aria-label',
-  'aria-labelledby',
-  'aria-level',
-  'aria-live',
-  'aria-modal',
-  'aria-multiline',
-  'aria-multiselectable',
-  'aria-orientation',
-  'aria-owns',
-  'aria-placeholder',
-  'aria-posinset',
-  'aria-pressed',
-  'aria-readonly',
-  'aria-relevant',
-  'aria-required',
-  'aria-roledescription',
-  'aria-rowcount',
-  'aria-rowindex',
-  'aria-rowindextext',
-  'aria-rowspan',
-  'aria-selected',
-  'aria-setsize',
-  'aria-sort',
-  'aria-valuemax',
-  'aria-valuemin',
-  'aria-valuenow',
-  'aria-valuetext',
-]);
-
-export class DOMNode {
-  #domModel: DOMModel;
-  #agent: ProtocolProxyApi.DOMApi;
-  ownerDocument!: DOMDocument|null;
-  #isInShadowTree!: boolean;
-  id!: Protocol.DOM.NodeId;
-  index: number|undefined = undefined;
-  #backendNodeId!: Protocol.DOM.BackendNodeId;
-  #nodeType!: number;
-  #nodeName!: string;
-  #localName!: string;
-  nodeValueInternal!: string;
-  #pseudoType!: Protocol.DOM.PseudoType|undefined;
-  #pseudoIdentifier?: string;
-  #shadowRootType!: Protocol.DOM.ShadowRootType|undefined;
-  #frameOwnerFrameId!: Protocol.Page.FrameId|null;
-  #xmlVersion!: string|undefined;
-  #isSVGNode!: boolean;
-  #isScrollable!: boolean;
-  #affectedByStartingStyles!: boolean;
-  #creationStackTrace: Promise<Protocol.Runtime.StackTrace|null>|null = null;
-  #pseudoElements = new Map<string, DOMNode[]>();
-  #distributedNodes: DOMNodeShortcut[] = [];
-  assignedSlot: DOMNodeShortcut|null = null;
-  readonly shadowRootsInternal: DOMNode[] = [];
-  #attributes = new Map<string, Attribute>();
-  #markers = new Map<string, unknown>();
-  #subtreeMarkerCount = 0;
-  childNodeCountInternal!: number;
-  childrenInternal: DOMNode[]|null = null;
-  nextSibling: DOMNode|null = null;
-  previousSibling: DOMNode|null = null;
-  firstChild: DOMNode|null = null;
-  lastChild: DOMNode|null = null;
-  parentNode: DOMNode|null = null;
-  templateContentInternal?: DOMNode;
-  contentDocumentInternal?: DOMDocument;
-  childDocumentPromiseForTesting?: Promise<DOMDocument|null>;
-  #importedDocument?: DOMNode;
-  publicId?: string;
-  systemId?: string;
-  internalSubset?: string;
-  name?: string;
-  value?: string;
-  /**
-   * Set when a DOMNode is retained in a detached sub-tree.
-   */
-  retained = false;
-  /**
-   * Set if a DOMNode is a root of a detached sub-tree.
-   */
-  detached = false;
-  #retainedNodes?: Set<Protocol.DOM.BackendNodeId>;
-
-  constructor(domModel: DOMModel) {
-    this.#domModel = domModel;
-    this.#agent = this.#domModel.getAgent();
-  }
-
-  static create(
-      domModel: DOMModel, doc: DOMDocument|null, isInShadowTree: boolean, payload: Protocol.DOM.Node,
-      retainedNodes?: Set<Protocol.DOM.BackendNodeId>): DOMNode {
-    const node = new DOMNode(domModel);
-    node.init(doc, isInShadowTree, payload, retainedNodes);
-    return node;
-  }
-
-  init(
-      doc: DOMDocument|null, isInShadowTree: boolean, payload: Protocol.DOM.Node,
-      retainedNodes?: Set<Protocol.DOM.BackendNodeId>): void {
-    this.#agent = this.#domModel.getAgent();
-    this.ownerDocument = doc;
-    this.#isInShadowTree = isInShadowTree;
-
-    this.id = payload.nodeId;
-    this.#backendNodeId = payload.backendNodeId;
-    this.#domModel.registerNode(this);
-    this.#nodeType = payload.nodeType;
-    this.#nodeName = payload.nodeName;
-    this.#localName = payload.localName;
-    this.nodeValueInternal = payload.nodeValue;
-    this.#pseudoType = payload.pseudoType;
-    this.#pseudoIdentifier = payload.pseudoIdentifier;
-    this.#shadowRootType = payload.shadowRootType;
-    this.#frameOwnerFrameId = payload.frameId || null;
-    this.#xmlVersion = payload.xmlVersion;
-    this.#isSVGNode = Boolean(payload.isSVG);
-    this.#isScrollable = Boolean(payload.isScrollable);
-    this.#affectedByStartingStyles = Boolean(payload.affectedByStartingStyles);
-    this.#retainedNodes = retainedNodes;
-
-    if (this.#retainedNodes?.has(this.backendNodeId())) {
-      this.retained = true;
-    }
-
-    if (payload.attributes) {
-      this.setAttributesPayload(payload.attributes);
-    }
-
-    this.childNodeCountInternal = payload.childNodeCount || 0;
-    if (payload.shadowRoots) {
-      for (let i = 0; i < payload.shadowRoots.length; ++i) {
-        const root = payload.shadowRoots[i];
-        const node = DOMNode.create(this.#domModel, this.ownerDocument, true, root, retainedNodes);
-        this.shadowRootsInternal.push(node);
-        node.parentNode = this;
-      }
-    }
-
-    if (payload.templateContent) {
-      this.templateContentInternal =
-          DOMNode.create(this.#domModel, this.ownerDocument, true, payload.templateContent, retainedNodes);
-      this.templateContentInternal.parentNode = this;
-      this.childrenInternal = [];
-    }
-
-    const frameOwnerTags = new Set(['EMBED', 'IFRAME', 'OBJECT', 'FENCEDFRAME']);
-    if (payload.contentDocument) {
-      this.contentDocumentInternal = new DOMDocument(this.#domModel, payload.contentDocument);
-      this.contentDocumentInternal.parentNode = this;
-      this.childrenInternal = [];
-    } else if (payload.frameId && frameOwnerTags.has(payload.nodeName)) {
-      // At this point we know we are in an OOPIF, otherwise `payload.contentDocument` would have been set.
-      this.childDocumentPromiseForTesting = this.requestChildDocument(payload.frameId, this.#domModel.target());
-      this.childrenInternal = [];
-    }
-
-    if (payload.importedDocument) {
-      this.#importedDocument =
-          DOMNode.create(this.#domModel, this.ownerDocument, true, payload.importedDocument, retainedNodes);
-      this.#importedDocument.parentNode = this;
-      this.childrenInternal = [];
-    }
-
-    if (payload.distributedNodes) {
-      this.setDistributedNodePayloads(payload.distributedNodes);
-    }
-
-    if (payload.assignedSlot) {
-      this.setAssignedSlot(payload.assignedSlot);
-    }
-
-    if (payload.children) {
-      this.setChildrenPayload(payload.children);
-    }
-
-    this.setPseudoElements(payload.pseudoElements);
-
-    if (this.#nodeType === Node.ELEMENT_NODE) {
-      // HTML and BODY from internal iframes should not overwrite top-level ones.
-      if (this.ownerDocument && !this.ownerDocument.documentElement && this.#nodeName === 'HTML') {
-        this.ownerDocument.documentElement = this;
-      }
-      if (this.ownerDocument && !this.ownerDocument.body && this.#nodeName === 'BODY') {
-        this.ownerDocument.body = this;
-      }
-    } else if (this.#nodeType === Node.DOCUMENT_TYPE_NODE) {
-      this.publicId = payload.publicId;
-      this.systemId = payload.systemId;
-      this.internalSubset = payload.internalSubset;
-    } else if (this.#nodeType === Node.ATTRIBUTE_NODE) {
-      this.name = payload.name;
-      this.value = payload.value;
-    }
-  }
-
-  private async requestChildDocument(frameId: Protocol.Page.FrameId, notInTarget: Target): Promise<DOMDocument|null> {
-    const frame = await FrameManager.instance().getOrWaitForFrame(frameId, notInTarget);
-    const childModel = frame.resourceTreeModel()?.target().model(DOMModel);
-    return await (childModel?.requestDocument() || null);
-  }
-
-  isAdFrameNode(): boolean {
-    if (this.isIframe() && this.#frameOwnerFrameId) {
-      const frame = FrameManager.instance().getFrame(this.#frameOwnerFrameId);
-      if (!frame) {
-        return false;
-      }
-      return frame.adFrameType() !== Protocol.Page.AdFrameType.None;
-    }
-    return false;
-  }
-
-  isSVGNode(): boolean {
-    return this.#isSVGNode;
-  }
-
-  isScrollable(): boolean {
-    return this.#isScrollable;
-  }
-
-  affectedByStartingStyles(): boolean {
-    return this.#affectedByStartingStyles;
-  }
-
-  isMediaNode(): boolean {
-    return this.#nodeName === 'AUDIO' || this.#nodeName === 'VIDEO';
-  }
-
-  isViewTransitionPseudoNode(): boolean {
-    if (!this.#pseudoType) {
-      return false;
-    }
-
-    return [
-      Protocol.DOM.PseudoType.ViewTransition,
-      Protocol.DOM.PseudoType.ViewTransitionGroup,
-      Protocol.DOM.PseudoType.ViewTransitionGroupChildren,
-      Protocol.DOM.PseudoType.ViewTransitionImagePair,
-      Protocol.DOM.PseudoType.ViewTransitionOld,
-      Protocol.DOM.PseudoType.ViewTransitionNew,
-    ].includes(this.#pseudoType);
-  }
-
-  creationStackTrace(): Promise<Protocol.Runtime.StackTrace|null> {
-    if (this.#creationStackTrace) {
-      return this.#creationStackTrace;
-    }
-
-    const stackTracesPromise = this.#agent.invoke_getNodeStackTraces({nodeId: this.id});
-    this.#creationStackTrace = stackTracesPromise.then(res => res.creation || null);
-    return this.#creationStackTrace;
-  }
-
-  get subtreeMarkerCount(): number {
-    return this.#subtreeMarkerCount;
-  }
-
-  domModel(): DOMModel {
-    return this.#domModel;
-  }
-
-  backendNodeId(): Protocol.DOM.BackendNodeId {
-    return this.#backendNodeId;
-  }
-
-  children(): DOMNode[]|null {
-    return this.childrenInternal ? this.childrenInternal.slice() : null;
-  }
-
-  setChildren(children: DOMNode[]): void {
-    this.childrenInternal = children;
-  }
-
-  setIsScrollable(isScrollable: boolean): void {
-    this.#isScrollable = isScrollable;
-  }
-
-  setAffectedByStartingStyles(affectedByStartingStyles: boolean): void {
-    this.#affectedByStartingStyles = affectedByStartingStyles;
-  }
-
-  hasAttributes(): boolean {
-    return this.#attributes.size > 0;
-  }
-
-  childNodeCount(): number {
-    return this.childNodeCountInternal;
-  }
-
-  setChildNodeCount(childNodeCount: number): void {
-    this.childNodeCountInternal = childNodeCount;
-  }
-
-  shadowRoots(): DOMNode[] {
-    return this.shadowRootsInternal.slice();
-  }
-
-  templateContent(): DOMNode|null {
-    return this.templateContentInternal || null;
-  }
-
-  contentDocument(): DOMDocument|null {
-    return this.contentDocumentInternal || null;
-  }
-
-  setContentDocument(node: DOMDocument): void {
-    this.contentDocumentInternal = node;
-  }
-
-  isIframe(): boolean {
-    return this.#nodeName === 'IFRAME';
-  }
-
-  importedDocument(): DOMNode|null {
-    return this.#importedDocument || null;
-  }
-
-  nodeType(): number {
-    return this.#nodeType;
-  }
-
-  nodeName(): string {
-    return this.#nodeName;
-  }
-
-  pseudoType(): string|undefined {
-    return this.#pseudoType;
-  }
-
-  pseudoIdentifier(): string|undefined {
-    return this.#pseudoIdentifier;
-  }
-
-  hasPseudoElements(): boolean {
-    return this.#pseudoElements.size > 0;
-  }
-
-  pseudoElements(): Map<string, DOMNode[]> {
-    return this.#pseudoElements;
-  }
-
-  checkmarkPseudoElement(): DOMNode|undefined {
-    return this.#pseudoElements.get(Protocol.DOM.PseudoType.Checkmark)?.at(-1);
-  }
-
-  beforePseudoElement(): DOMNode|undefined {
-    return this.#pseudoElements.get(Protocol.DOM.PseudoType.Before)?.at(-1);
-  }
-
-  afterPseudoElement(): DOMNode|undefined {
-    return this.#pseudoElements.get(Protocol.DOM.PseudoType.After)?.at(-1);
-  }
-
-  pickerIconPseudoElement(): DOMNode|undefined {
-    return this.#pseudoElements.get(Protocol.DOM.PseudoType.PickerIcon)?.at(-1);
-  }
-
-  markerPseudoElement(): DOMNode|undefined {
-    return this.#pseudoElements.get(Protocol.DOM.PseudoType.Marker)?.at(-1);
-  }
-
-  backdropPseudoElement(): DOMNode|undefined {
-    return this.#pseudoElements.get(Protocol.DOM.PseudoType.Backdrop)?.at(-1);
-  }
-
-  viewTransitionPseudoElements(): DOMNode[] {
-    return [
-      ...this.#pseudoElements.get(Protocol.DOM.PseudoType.ViewTransition) || [],
-      ...this.#pseudoElements.get(Protocol.DOM.PseudoType.ViewTransitionGroup) || [],
-      ...this.#pseudoElements.get(Protocol.DOM.PseudoType.ViewTransitionGroupChildren) || [],
-      ...this.#pseudoElements.get(Protocol.DOM.PseudoType.ViewTransitionImagePair) || [],
-      ...this.#pseudoElements.get(Protocol.DOM.PseudoType.ViewTransitionOld) || [],
-      ...this.#pseudoElements.get(Protocol.DOM.PseudoType.ViewTransitionNew) || [],
-    ];
-  }
-
-  carouselPseudoElements(): DOMNode[] {
-    return [
-      ...this.#pseudoElements.get(Protocol.DOM.PseudoType.ScrollButton) || [],
-      ...this.#pseudoElements.get(Protocol.DOM.PseudoType.Column) || [],
-      ...this.#pseudoElements.get(Protocol.DOM.PseudoType.ScrollMarker) || [],
-      ...this.#pseudoElements.get(Protocol.DOM.PseudoType.ScrollMarkerGroup) || [],
-    ];
-  }
-
-  hasAssignedSlot(): boolean {
-    return this.assignedSlot !== null;
-  }
-
-  isInsertionPoint(): boolean {
-    return !this.isXMLNode() &&
-        (this.#nodeName === 'SHADOW' || this.#nodeName === 'CONTENT' || this.#nodeName === 'SLOT');
-  }
-
-  distributedNodes(): DOMNodeShortcut[] {
-    return this.#distributedNodes;
-  }
-
-  isInShadowTree(): boolean {
-    return this.#isInShadowTree;
-  }
-
-  getTreeRoot(): DOMNode {
-    return this.isShadowRoot() ? this : (this.ancestorShadowRoot() ?? this.ownerDocument ?? this);
-  }
-
-  ancestorShadowHost(): DOMNode|null {
-    const ancestorShadowRoot = this.ancestorShadowRoot();
-    return ancestorShadowRoot ? ancestorShadowRoot.parentNode : null;
-  }
-
-  ancestorShadowRoot(): DOMNode|null {
-    if (!this.#isInShadowTree) {
-      return null;
-    }
-
-    let current: DOMNode|null = this;
-    while (current && !current.isShadowRoot()) {
-      current = current.parentNode;
-    }
-    return current;
-  }
-
-  ancestorUserAgentShadowRoot(): DOMNode|null {
-    const ancestorShadowRoot = this.ancestorShadowRoot();
-    if (!ancestorShadowRoot) {
-      return null;
-    }
-    return ancestorShadowRoot.shadowRootType() === DOMNode.ShadowRootTypes.UserAgent ? ancestorShadowRoot : null;
-  }
-
-  isShadowRoot(): boolean {
-    return Boolean(this.#shadowRootType);
-  }
-
-  shadowRootType(): string|null {
-    return this.#shadowRootType || null;
-  }
-
-  nodeNameInCorrectCase(): string {
-    const shadowRootType = this.shadowRootType();
-    if (shadowRootType) {
-      return '#shadow-root (' + shadowRootType + ')';
-    }
-
-    // If there is no local #name, it's case sensitive
-    if (!this.localName()) {
-      return this.nodeName();
-    }
-
-    // If the names are different lengths, there is a prefix and it's case sensitive
-    if (this.localName().length !== this.nodeName().length) {
-      return this.nodeName();
-    }
-
-    // Return the localname, which will be case insensitive if its an html node
-    return this.localName();
-  }
-
-  setNodeName(name: string, callback?: ((arg0: string|null, arg1: DOMNode|null) => void)): void {
-    void this.#agent.invoke_setNodeName({nodeId: this.id, name}).then(response => {
-      if (!response.getError()) {
-        this.#domModel.markUndoableState();
-      }
-      if (callback) {
-        callback(response.getError() || null, this.#domModel.nodeForId(response.nodeId));
-      }
-    });
-  }
-
-  localName(): string {
-    return this.#localName;
-  }
-
-  nodeValue(): string {
-    return this.nodeValueInternal;
-  }
-
-  setNodeValueInternal(nodeValue: string): void {
-    this.nodeValueInternal = nodeValue;
-  }
-
-  setNodeValue(value: string, callback?: ((arg0: string|null) => void)): void {
-    void this.#agent.invoke_setNodeValue({nodeId: this.id, value}).then(response => {
-      if (!response.getError()) {
-        this.#domModel.markUndoableState();
-      }
-      if (callback) {
-        callback(response.getError() || null);
-      }
-    });
-  }
-
-  getAttribute(name: string): string|undefined {
-    const attr = this.#attributes.get(name);
-    return attr ? attr.value : undefined;
-  }
-
-  setAttribute(name: string, text: string, callback?: ((arg0: string|null) => void)): void {
-    void this.#agent.invoke_setAttributesAsText({nodeId: this.id, text, name}).then(response => {
-      if (!response.getError()) {
-        this.#domModel.markUndoableState();
-      }
-      if (callback) {
-        callback(response.getError() || null);
-      }
-    });
-  }
-
-  setAttributeValue(name: string, value: string, callback?: ((arg0: string|null) => void)): void {
-    void this.#agent.invoke_setAttributeValue({nodeId: this.id, name, value}).then(response => {
-      if (!response.getError()) {
-        this.#domModel.markUndoableState();
-      }
-      if (callback) {
-        callback(response.getError() || null);
-      }
-    });
-  }
-
-  setAttributeValuePromise(name: string, value: string): Promise<string|null> {
-    return new Promise(fulfill => this.setAttributeValue(name, value, fulfill));
-  }
-
-  attributes(): Attribute[] {
-    return [...this.#attributes.values()];
-  }
-
-  async removeAttribute(name: string): Promise<void> {
-    const response = await this.#agent.invoke_removeAttribute({nodeId: this.id, name});
-    if (response.getError()) {
-      return;
-    }
-    this.#attributes.delete(name);
-    this.#domModel.markUndoableState();
-  }
-
-  getChildNodesPromise(): Promise<DOMNode[]|null> {
-    return new Promise(resolve => {
-      return this.getChildNodes(childNodes => resolve(childNodes));
-    });
-  }
-
-  getChildNodes(callback: (arg0: DOMNode[]|null) => void): void {
-    if (this.childrenInternal) {
-      callback(this.children());
-      return;
-    }
-    void this.#agent.invoke_requestChildNodes({nodeId: this.id}).then(response => {
-      callback(response.getError() ? null : this.children());
-    });
-  }
-
-  async getSubtree(depth: number, pierce: boolean): Promise<DOMNode[]|null> {
-    const response = await this.#agent.invoke_requestChildNodes({nodeId: this.id, depth, pierce});
-    return response.getError() ? null : this.childrenInternal;
-  }
-
-  async getOuterHTML(includeShadowDOM = false): Promise<string|null> {
-    const {outerHTML} = await this.#agent.invoke_getOuterHTML({nodeId: this.id, includeShadowDOM});
-    return outerHTML;
-  }
-
-  setOuterHTML(html: string, callback?: ((arg0: string|null) => void)): void {
-    void this.#agent.invoke_setOuterHTML({nodeId: this.id, outerHTML: html}).then(response => {
-      if (!response.getError()) {
-        this.#domModel.markUndoableState();
-      }
-      if (callback) {
-        callback(response.getError() || null);
-      }
-    });
-  }
-
-  removeNode(callback?: ((arg0: string|null, arg1?: Protocol.DOM.NodeId|undefined) => void)): Promise<void> {
-    return this.#agent.invoke_removeNode({nodeId: this.id}).then(response => {
-      if (!response.getError()) {
-        this.#domModel.markUndoableState();
-      }
-      if (callback) {
-        callback(response.getError() || null);
-      }
-    });
-  }
-
-  path(): string {
-    function getNodeKey(node: DOMNode): number|'u'|'a'|'d'|null {
-      if (!node.#nodeName.length) {
-        return null;
-      }
-      if (node.index !== undefined) {
-        return node.index;
-      }
-      if (!node.parentNode) {
-        return null;
-      }
-      if (node.isShadowRoot()) {
-        return node.shadowRootType() === DOMNode.ShadowRootTypes.UserAgent ? 'u' : 'a';
-      }
-      if (node.nodeType() === Node.DOCUMENT_NODE) {
-        return 'd';
-      }
-      return null;
-    }
-
-    const path = [];
-    let node: (DOMNode|null) = this;
-    while (node) {
-      const key = getNodeKey(node);
-      if (key === null) {
-        break;
-      }
-
-      path.push([key, node.#nodeName]);
-      node = node.parentNode;
-    }
-    path.reverse();
-    return path.join(',');
-  }
-
-  isAncestor(node: DOMNode): boolean {
-    if (!node) {
-      return false;
-    }
-
-    let currentNode: (DOMNode|null) = node.parentNode;
-    while (currentNode) {
-      if (this === currentNode) {
-        return true;
-      }
-      currentNode = currentNode.parentNode;
-    }
-    return false;
-  }
-
-  isDescendant(descendant: DOMNode): boolean {
-    return descendant.isAncestor(this);
-  }
-
-  frameOwnerFrameId(): Protocol.Page.FrameId|null {
-    return this.#frameOwnerFrameId;
-  }
-
-  frameId(): Protocol.Page.FrameId|null {
-    let node: DOMNode = this.parentNode || this;
-    while (!node.#frameOwnerFrameId && node.parentNode) {
-      node = node.parentNode;
-    }
-    return node.#frameOwnerFrameId;
-  }
-
-  setAttributesPayload(attrs: string[]): boolean {
-    let attributesChanged: true|boolean = !this.#attributes || attrs.length !== this.#attributes.size * 2;
-    const oldAttributesMap = this.#attributes || new Map();
-
-    this.#attributes = new Map();
-
-    for (let i = 0; i < attrs.length; i += 2) {
-      const name = attrs[i];
-      const value = attrs[i + 1];
-      this.addAttribute(name, value);
-
-      if (attributesChanged) {
-        continue;
-      }
-
-      const oldAttribute = oldAttributesMap.get(name);
-      if (!oldAttribute || oldAttribute.value !== value) {
-        attributesChanged = true;
-      }
-    }
-    return attributesChanged;
-  }
-
-  insertChild(prev: DOMNode|undefined, payload: Protocol.DOM.Node): DOMNode {
-    if (!this.childrenInternal) {
-      throw new Error('DOMNode._children is expected to not be null.');
-    }
-    const node = DOMNode.create(this.#domModel, this.ownerDocument, this.#isInShadowTree, payload, this.#retainedNodes);
-    this.childrenInternal.splice(prev ? this.childrenInternal.indexOf(prev) + 1 : 0, 0, node);
-    this.renumber();
-    return node;
-  }
-
-  removeChild(node: DOMNode): void {
-    const pseudoType = node.pseudoType();
-    if (pseudoType) {
-      const updatedPseudoElements = this.#pseudoElements.get(pseudoType)?.filter(element => element !== node);
-      if (updatedPseudoElements && updatedPseudoElements.length > 0) {
-        this.#pseudoElements.set(pseudoType, updatedPseudoElements);
-      } else {
-        this.#pseudoElements.delete(pseudoType);
-      }
-    } else {
-      const shadowRootIndex = this.shadowRootsInternal.indexOf(node);
-      if (shadowRootIndex !== -1) {
-        this.shadowRootsInternal.splice(shadowRootIndex, 1);
-      } else {
-        if (!this.childrenInternal) {
-          throw new Error('DOMNode._children is expected to not be null.');
-        }
-        if (this.childrenInternal.indexOf(node) === -1) {
-          throw new Error('DOMNode._children is expected to contain the node to be removed.');
-        }
-        this.childrenInternal.splice(this.childrenInternal.indexOf(node), 1);
-      }
-    }
-    node.parentNode = null;
-    this.#subtreeMarkerCount -= node.#subtreeMarkerCount;
-    if (node.#subtreeMarkerCount) {
-      this.#domModel.dispatchEventToListeners(Events.MarkersChanged, this);
-    }
-    this.renumber();
-  }
-
-  setChildrenPayload(payloads: Protocol.DOM.Node[]): void {
-    this.childrenInternal = [];
-    for (let i = 0; i < payloads.length; ++i) {
-      const payload = payloads[i];
-      const node =
-          DOMNode.create(this.#domModel, this.ownerDocument, this.#isInShadowTree, payload, this.#retainedNodes);
-      this.childrenInternal.push(node);
-    }
-    this.renumber();
-  }
-
-  private setPseudoElements(payloads: Protocol.DOM.Node[]|undefined): void {
-    if (!payloads) {
-      return;
-    }
-
-    for (let i = 0; i < payloads.length; ++i) {
-      const node =
-          DOMNode.create(this.#domModel, this.ownerDocument, this.#isInShadowTree, payloads[i], this.#retainedNodes);
-      node.parentNode = this;
-      const pseudoType = node.pseudoType();
-      if (!pseudoType) {
-        throw new Error('DOMNode.pseudoType() is expected to be defined.');
-      }
-      const currentPseudoElements = this.#pseudoElements.get(pseudoType);
-      if (currentPseudoElements) {
-        currentPseudoElements.push(node);
-      } else {
-        this.#pseudoElements.set(pseudoType, [node]);
-      }
-    }
-  }
-
-  setDistributedNodePayloads(payloads: Protocol.DOM.BackendNode[]): void {
-    this.#distributedNodes = [];
-    for (const payload of payloads) {
-      this.#distributedNodes.push(
-          new DOMNodeShortcut(this.#domModel.target(), payload.backendNodeId, payload.nodeType, payload.nodeName));
-    }
-  }
-
-  setAssignedSlot(payload: Protocol.DOM.BackendNode): void {
-    this.assignedSlot =
-        new DOMNodeShortcut(this.#domModel.target(), payload.backendNodeId, payload.nodeType, payload.nodeName);
-  }
-
-  private renumber(): void {
-    if (!this.childrenInternal) {
-      throw new Error('DOMNode._children is expected to not be null.');
-    }
-    this.childNodeCountInternal = this.childrenInternal.length;
-    if (this.childNodeCountInternal === 0) {
-      this.firstChild = null;
-      this.lastChild = null;
-      return;
-    }
-    this.firstChild = this.childrenInternal[0];
-    this.lastChild = this.childrenInternal[this.childNodeCountInternal - 1];
-    for (let i = 0; i < this.childNodeCountInternal; ++i) {
-      const child = this.childrenInternal[i];
-      child.index = i;
-      child.nextSibling = i + 1 < this.childNodeCountInternal ? this.childrenInternal[i + 1] : null;
-      child.previousSibling = i - 1 >= 0 ? this.childrenInternal[i - 1] : null;
-      child.parentNode = this;
-    }
-  }
-
-  private addAttribute(name: string, value: string): void {
-    const attr = {name, value, _node: this};
-    this.#attributes.set(name, attr);
-  }
-
-  setAttributeInternal(name: string, value: string): void {
-    const attr = this.#attributes.get(name);
-    if (attr) {
-      attr.value = value;
-    } else {
-      this.addAttribute(name, value);
-    }
-  }
-
-  removeAttributeInternal(name: string): void {
-    this.#attributes.delete(name);
-  }
-
-  copyTo(targetNode: DOMNode, anchorNode: DOMNode|null, callback?: ((arg0: string|null, arg1: DOMNode|null) => void)):
-      void {
-    void this.#agent
-        .invoke_copyTo(
-            {nodeId: this.id, targetNodeId: targetNode.id, insertBeforeNodeId: anchorNode ? anchorNode.id : undefined})
-        .then(response => {
-          if (!response.getError()) {
-            this.#domModel.markUndoableState();
-          }
-          const pastedNode = this.#domModel.nodeForId(response.nodeId);
-          if (pastedNode) {
-            // For every marker in this.#markers, set a marker in the copied node.
-            for (const [name, value] of this.#markers) {
-              pastedNode.setMarker(name, value);
-            }
-          }
-          if (callback) {
-            callback(response.getError() || null, pastedNode);
-          }
-        });
-  }
-
-  moveTo(targetNode: DOMNode, anchorNode: DOMNode|null, callback?: ((arg0: string|null, arg1: DOMNode|null) => void)):
-      void {
-    void this.#agent
-        .invoke_moveTo(
-            {nodeId: this.id, targetNodeId: targetNode.id, insertBeforeNodeId: anchorNode ? anchorNode.id : undefined})
-        .then(response => {
-          if (!response.getError()) {
-            this.#domModel.markUndoableState();
-          }
-          if (callback) {
-            callback(response.getError() || null, this.#domModel.nodeForId(response.nodeId));
-          }
-        });
-  }
-
-  isXMLNode(): boolean {
-    return Boolean(this.#xmlVersion);
-  }
-
-  setMarker(name: string, value: unknown): void {
-    if (value === null) {
-      if (!this.#markers.has(name)) {
-        return;
-      }
-
-      this.#markers.delete(name);
-      for (let node: (DOMNode|null) = this; node; node = node.parentNode) {
-        --node.#subtreeMarkerCount;
-      }
-      for (let node: (DOMNode|null) = this; node; node = node.parentNode) {
-        this.#domModel.dispatchEventToListeners(Events.MarkersChanged, node);
-      }
-      return;
-    }
-
-    if (this.parentNode && !this.#markers.has(name)) {
-      for (let node: (DOMNode|null) = this; node; node = node.parentNode) {
-        ++node.#subtreeMarkerCount;
-      }
-    }
-    this.#markers.set(name, value);
-    for (let node: (DOMNode|null) = this; node; node = node.parentNode) {
-      this.#domModel.dispatchEventToListeners(Events.MarkersChanged, node);
-    }
-  }
-
-  marker<T>(name: string): T|null {
-    return this.#markers.get(name) as T || null;
-  }
-
-  getMarkerKeysForTest(): string[] {
-    return [...this.#markers.keys()];
-  }
-
-  traverseMarkers(visitor: (arg0: DOMNode, arg1: string) => void): void {
-    function traverse(node: DOMNode): void {
-      if (!node.#subtreeMarkerCount) {
-        return;
-      }
-      for (const marker of node.#markers.keys()) {
-        visitor(node, marker);
-      }
-      if (!node.childrenInternal) {
-        return;
-      }
-      for (const child of node.childrenInternal) {
-        traverse(child);
-      }
-    }
-    traverse(this);
-  }
-
-  resolveURL(url: string): Platform.DevToolsPath.UrlString|null {
-    if (!url) {
-      return url as Platform.DevToolsPath.UrlString;
-    }
-    for (let frameOwnerCandidate: (DOMNode|null) = this; frameOwnerCandidate;
-         frameOwnerCandidate = frameOwnerCandidate.parentNode) {
-      if (frameOwnerCandidate instanceof DOMDocument && frameOwnerCandidate.baseURL) {
-        return Common.ParsedURL.ParsedURL.completeURL(frameOwnerCandidate.baseURL, url);
-      }
-    }
-    return null;
-  }
-
-  highlight(mode?: string): void {
-    this.#domModel.overlayModel().highlightInOverlay({node: this, selectorList: undefined}, mode);
-  }
-
-  highlightForTwoSeconds(): void {
-    this.#domModel.overlayModel().highlightInOverlayForTwoSeconds({node: this, selectorList: undefined});
-  }
-
-  async resolveToObject(objectGroup?: string, executionContextId?: Protocol.Runtime.ExecutionContextId):
-      Promise<RemoteObject|null> {
-    const {object} = await this.#agent.invoke_resolveNode(
-        {nodeId: this.id, backendNodeId: undefined, executionContextId, objectGroup});
-    return object && this.#domModel.runtimeModelInternal.createRemoteObject(object) || null;
-  }
-
-  async boxModel(): Promise<Protocol.DOM.BoxModel|null> {
-    const {model} = await this.#agent.invoke_getBoxModel({nodeId: this.id});
-    return model;
-  }
-
-  async setAsInspectedNode(): Promise<void> {
-    let node: DOMNode|null = this;
-    if (node?.pseudoType()) {
-      node = node.parentNode;
-    }
-    while (node) {
-      let ancestor = node.ancestorUserAgentShadowRoot();
-      if (!ancestor) {
-        break;
-      }
-      ancestor = node.ancestorShadowHost();
-      if (!ancestor) {
-        break;
-      }
-      // User #agent shadow root, keep climbing up.
-      node = ancestor;
-    }
-    if (!node) {
-      throw new Error('In DOMNode.setAsInspectedNode: node is expected to not be null.');
-    }
-    await this.#agent.invoke_setInspectedNode({nodeId: node.id});
-  }
-
-  enclosingElementOrSelf(): DOMNode|null {
-    let node: DOMNode|null = this;
-    if (node && node.nodeType() === Node.TEXT_NODE && node.parentNode) {
-      node = node.parentNode;
-    }
-
-    if (node && node.nodeType() !== Node.ELEMENT_NODE) {
-      node = null;
-    }
-    return node;
-  }
-
-  async callFunction<T, U extends string|number>(fn: (this: HTMLElement, ...args: U[]) => T, args: U[] = []):
-      Promise<{value: T}|null> {
-    const object = await this.resolveToObject();
-    if (!object) {
-      return null;
-    }
-
-    const result = await object.callFunction(fn, args.map(arg => RemoteObject.toCallArgument(arg)));
-    object.release();
-    if (result.wasThrown || !result.object) {
-      return null;
-    }
-    return {
-      value: result.object.value as T,
-    };
-  }
-
-  async scrollIntoView(): Promise<void> {
-    const node = this.enclosingElementOrSelf();
-    if (!node) {
-      return;
-    }
-
-    const result = await node.callFunction(scrollIntoViewInPage);
-    if (!result) {
-      return;
-    }
-
-    node.highlightForTwoSeconds();
-
-    function scrollIntoViewInPage(this: Element): void {
-      this.scrollIntoViewIfNeeded(true);
-    }
-  }
-
-  async focus(): Promise<void> {
-    const node = this.enclosingElementOrSelf();
-    if (!node) {
-      throw new Error('DOMNode.focus expects node to not be null.');
-    }
-    const result = await node.callFunction(focusInPage);
-    if (!result) {
-      return;
-    }
-
-    node.highlightForTwoSeconds();
-    await this.#domModel.target().pageAgent().invoke_bringToFront();
-
-    function focusInPage(this: HTMLElement): void {
-      this.focus();
-    }
-  }
-
-  simpleSelector(): string {
-    const lowerCaseName = this.localName() || this.nodeName().toLowerCase();
-    if (this.nodeType() !== Node.ELEMENT_NODE) {
-      return lowerCaseName;
-    }
-    const type = this.getAttribute('type');
-    const id = this.getAttribute('id');
-    const classes = this.getAttribute('class');
-
-    if (lowerCaseName === 'input' && type && !id && !classes) {
-      return lowerCaseName + '[type="' + CSS.escape(type) + '"]';
-    }
-    if (id) {
-      return lowerCaseName + '#' + CSS.escape(id);
-    }
-    if (classes) {
-      const classList = classes.trim().split(/\s+/g);
-      return (lowerCaseName === 'div' ? '' : lowerCaseName) + '.' + classList.map(cls => CSS.escape(cls)).join('.');
-    }
-    if (this.pseudoIdentifier()) {
-      return `${lowerCaseName}(${this.pseudoIdentifier()})`;
-    }
-    return lowerCaseName;
-  }
-
-  async getAnchorBySpecifier(specifier?: string): Promise<DOMNode|null> {
-    const response = await this.#agent.invoke_getAnchorElement({
-      nodeId: this.id,
-      anchorSpecifier: specifier,
-    });
-
-    if (response.getError()) {
-      return null;
-    }
-
-    return this.domModel().nodeForId(response.nodeId);
-  }
-
-  classNames(): string[] {
-    const classes = this.getAttribute('class');
-    return classes ? classes.split(/\s+/) : [];
-  }
-}
-
-export namespace DOMNode {
-  export enum ShadowRootTypes {
-    /* eslint-disable @typescript-eslint/naming-convention -- Used by web_tests. */
-    UserAgent = 'user-agent',
-    Open = 'open',
-    Closed = 'closed',
-    /* eslint-enable @typescript-eslint/naming-convention */
-  }
-}
-
-export class DeferredDOMNode {
-  readonly #domModelInternal: DOMModel;
-  readonly #backendNodeIdInternal: Protocol.DOM.BackendNodeId;
-
-  constructor(target: Target, backendNodeId: Protocol.DOM.BackendNodeId) {
-    this.#domModelInternal = (target.model(DOMModel) as DOMModel);
-    this.#backendNodeIdInternal = backendNodeId;
-  }
-
-  resolve(callback: (arg0: DOMNode|null) => void): void {
-    void this.resolvePromise().then(callback);
-  }
-
-  async resolvePromise(): Promise<DOMNode|null> {
-    const nodeIds =
-        await this.#domModelInternal.pushNodesByBackendIdsToFrontend(new Set([this.#backendNodeIdInternal]));
-    return nodeIds?.get(this.#backendNodeIdInternal) || null;
-  }
-
-  backendNodeId(): Protocol.DOM.BackendNodeId {
-    return this.#backendNodeIdInternal;
-  }
-
-  domModel(): DOMModel {
-    return this.#domModelInternal;
-  }
-
-  highlight(): void {
-    this.#domModelInternal.overlayModel().highlightInOverlay({deferredNode: this, selectorList: undefined});
-  }
-}
-
-export class DOMNodeShortcut {
-  nodeType: number;
-  nodeName: string;
-  deferredNode: DeferredDOMNode;
-  constructor(target: Target, backendNodeId: Protocol.DOM.BackendNodeId, nodeType: number, nodeName: string) {
-    this.nodeType = nodeType;
-    this.nodeName = nodeName;
-    this.deferredNode = new DeferredDOMNode(target, backendNodeId);
-  }
-}
-
-export class DOMDocument extends DOMNode {
-  body: DOMNode|null;
-  documentElement: DOMNode|null;
-  documentURL: Platform.DevToolsPath.UrlString;
-  baseURL: Platform.DevToolsPath.UrlString;
-  constructor(domModel: DOMModel, payload: Protocol.DOM.Node) {
-    super(domModel);
-    this.body = null;
-    this.documentElement = null;
-    this.init(this, false, payload);
-    this.documentURL = (payload.documentURL || '') as Platform.DevToolsPath.UrlString;
-    this.baseURL = (payload.baseURL || '') as Platform.DevToolsPath.UrlString;
-  }
-}
-
-export class DOMModel extends SDKModel<EventTypes> {
-  agent: ProtocolProxyApi.DOMApi;
-  idToDOMNode = new Map<Protocol.DOM.NodeId, DOMNode>();
-  #document: DOMDocument|null = null;
-  readonly #attributeLoadNodeIds = new Set<Protocol.DOM.NodeId>();
-  readonly runtimeModelInternal: RuntimeModel;
-  #lastMutationId!: number;
-  #pendingDocumentRequestPromise: Promise<DOMDocument|null>|null = null;
-  #frameOwnerNode?: DOMNode|null;
-  #loadNodeAttributesTimeout?: number;
-  #searchId?: string;
-  constructor(target: Target) {
-    super(target);
-
-    this.agent = target.domAgent();
-
-    target.registerDOMDispatcher(new DOMDispatcher(this));
-    this.runtimeModelInternal = (target.model(RuntimeModel) as RuntimeModel);
-
-    if (!target.suspended()) {
-      void this.agent.invoke_enable({});
-    }
-
-    if (Root.Runtime.experiments.isEnabled('capture-node-creation-stacks')) {
-      void this.agent.invoke_setNodeStackTracesEnabled({enable: true});
-    }
-  }
-
-  runtimeModel(): RuntimeModel {
-    return this.runtimeModelInternal;
-  }
-
-  cssModel(): CSSModel {
-    return this.target().model(CSSModel) as CSSModel;
-  }
-
-  overlayModel(): OverlayModel {
-    return this.target().model(OverlayModel) as OverlayModel;
-  }
-
-  static cancelSearch(): void {
-    for (const domModel of TargetManager.instance().models(DOMModel)) {
-      domModel.cancelSearch();
-    }
-  }
-
-  private scheduleMutationEvent(node: DOMNode): void {
-    if (!this.hasEventListeners(Events.DOMMutated)) {
-      return;
-    }
-
-    this.#lastMutationId = (this.#lastMutationId || 0) + 1;
-    void Promise.resolve().then(callObserve.bind(this, node, this.#lastMutationId));
-
-    function callObserve(this: DOMModel, node: DOMNode, mutationId: number): void {
-      if (!this.hasEventListeners(Events.DOMMutated) || this.#lastMutationId !== mutationId) {
-        return;
-      }
-
-      this.dispatchEventToListeners(Events.DOMMutated, node);
-    }
-  }
-
-  requestDocument(): Promise<DOMDocument|null> {
-    if (this.#document) {
-      return Promise.resolve(this.#document);
-    }
-    if (!this.#pendingDocumentRequestPromise) {
-      this.#pendingDocumentRequestPromise = this.requestDocumentInternal();
-    }
-    return this.#pendingDocumentRequestPromise;
-  }
-
-  async getOwnerNodeForFrame(frameId: Protocol.Page.FrameId): Promise<DeferredDOMNode|null> {
-    // Returns an error if the frameId does not belong to the current target.
-    const response = await this.agent.invoke_getFrameOwner({frameId});
-    if (response.getError()) {
-      return null;
-    }
-    return new DeferredDOMNode(this.target(), response.backendNodeId);
-  }
-
-  private async requestDocumentInternal(): Promise<DOMDocument|null> {
-    const response = await this.agent.invoke_getDocument({});
-    if (response.getError()) {
-      return null;
-    }
-    const {root: documentPayload} = response;
-    this.#pendingDocumentRequestPromise = null;
-
-    if (documentPayload) {
-      this.setDocument(documentPayload);
-    }
-    if (!this.#document) {
-      console.error('No document');
-      return null;
-    }
-
-    const parentModel = this.parentModel();
-    if (parentModel && !this.#frameOwnerNode) {
-      await parentModel.requestDocument();
-      const mainFrame = this.target().model(ResourceTreeModel)?.mainFrame;
-      if (mainFrame) {
-        const response = await parentModel.agent.invoke_getFrameOwner({frameId: mainFrame.id});
-        if (!response.getError() && response.nodeId) {
-          this.#frameOwnerNode = parentModel.nodeForId(response.nodeId);
-        }
-      }
-    }
-
-    // Document could have been cleared by now.
-    if (this.#frameOwnerNode) {
-      const oldDocument = this.#frameOwnerNode.contentDocument();
-      this.#frameOwnerNode.setContentDocument(this.#document);
-      this.#frameOwnerNode.setChildren([]);
-      if (this.#document) {
-        this.#document.parentNode = this.#frameOwnerNode;
-        this.dispatchEventToListeners(Events.NodeInserted, this.#document);
-      } else if (oldDocument) {
-        this.dispatchEventToListeners(Events.NodeRemoved, {node: oldDocument, parent: this.#frameOwnerNode});
-      }
-    }
-    return this.#document;
-  }
-
-  existingDocument(): DOMDocument|null {
-    return this.#document;
-  }
-
-  async pushNodeToFrontend(objectId: Protocol.Runtime.RemoteObjectId): Promise<DOMNode|null> {
-    await this.requestDocument();
-    const {nodeId} = await this.agent.invoke_requestNode({objectId});
-    return this.nodeForId(nodeId);
-  }
-
-  pushNodeByPathToFrontend(path: string): Promise<Protocol.DOM.NodeId|null> {
-    return this.requestDocument()
-        .then(() => this.agent.invoke_pushNodeByPathToFrontend({path}))
-        .then(({nodeId}) => nodeId);
-  }
-
-  async pushNodesByBackendIdsToFrontend(backendNodeIds: Set<Protocol.DOM.BackendNodeId>):
-      Promise<Map<Protocol.DOM.BackendNodeId, DOMNode|null>|null> {
-    await this.requestDocument();
-    const backendNodeIdsArray = [...backendNodeIds];
-    const {nodeIds} = await this.agent.invoke_pushNodesByBackendIdsToFrontend({backendNodeIds: backendNodeIdsArray});
-    if (!nodeIds) {
-      return null;
-    }
-    const map = new Map<Protocol.DOM.BackendNodeId, DOMNode|null>();
-    for (let i = 0; i < nodeIds.length; ++i) {
-      if (nodeIds[i]) {
-        map.set(backendNodeIdsArray[i], this.nodeForId(nodeIds[i]));
-      }
-    }
-    return map;
-  }
-
-  attributeModified(nodeId: Protocol.DOM.NodeId, name: string, value: string): void {
-    const node = this.idToDOMNode.get(nodeId);
-    if (!node) {
-      return;
-    }
-
-    node.setAttributeInternal(name, value);
-    this.dispatchEventToListeners(Events.AttrModified, {node, name});
-    this.scheduleMutationEvent(node);
-  }
-
-  attributeRemoved(nodeId: Protocol.DOM.NodeId, name: string): void {
-    const node = this.idToDOMNode.get(nodeId);
-    if (!node) {
-      return;
-    }
-    node.removeAttributeInternal(name);
-    this.dispatchEventToListeners(Events.AttrRemoved, {node, name});
-    this.scheduleMutationEvent(node);
-  }
-
-  inlineStyleInvalidated(nodeIds: Protocol.DOM.NodeId[]): void {
-    nodeIds.forEach(nodeId => this.#attributeLoadNodeIds.add(nodeId));
-    if (!this.#loadNodeAttributesTimeout) {
-      this.#loadNodeAttributesTimeout = window.setTimeout(this.loadNodeAttributes.bind(this), 20);
-    }
-  }
-
-  private loadNodeAttributes(): void {
-    this.#loadNodeAttributesTimeout = undefined;
-    for (const nodeId of this.#attributeLoadNodeIds) {
-      void this.agent.invoke_getAttributes({nodeId}).then(({attributes}) => {
-        if (!attributes) {
-          // We are calling loadNodeAttributes asynchronously, it is ok if node is not found.
-          return;
-        }
-        const node = this.idToDOMNode.get(nodeId);
-        if (!node) {
-          return;
-        }
-        if (node.setAttributesPayload(attributes)) {
-          this.dispatchEventToListeners(Events.AttrModified, {node, name: 'style'});
-          this.scheduleMutationEvent(node);
-        }
-      });
-    }
-    this.#attributeLoadNodeIds.clear();
-  }
-
-  characterDataModified(nodeId: Protocol.DOM.NodeId, newValue: string): void {
-    const node = this.idToDOMNode.get(nodeId);
-    if (!node) {
-      console.error('nodeId could not be resolved to a node');
-      return;
-    }
-    node.setNodeValueInternal(newValue);
-    this.dispatchEventToListeners(Events.CharacterDataModified, node);
-    this.scheduleMutationEvent(node);
-  }
-
-  nodeForId(nodeId: Protocol.DOM.NodeId|null): DOMNode|null {
-    return nodeId ? this.idToDOMNode.get(nodeId) || null : null;
-  }
-
-  documentUpdated(): void {
-    // If this frame doesn't have a document now,
-    // it means that its document is not requested yet and
-    // it will be requested when needed. (ex: setChildNodes event is received for the frame owner node)
-    // So, we don't need to request the document if we don't
-    // already have a document.
-    const alreadyHasDocument = Boolean(this.#document);
-    this.setDocument(null);
-    // If we have this.#pendingDocumentRequestPromise in flight,
-    // it will contain most recent result.
-    if (this.parentModel() && alreadyHasDocument && !this.#pendingDocumentRequestPromise) {
-      void this.requestDocument();
-    }
-  }
-
-  private setDocument(payload: Protocol.DOM.Node|null): void {
-    this.idToDOMNode = new Map();
-    if (payload && 'nodeId' in payload) {
-      this.#document = new DOMDocument(this, payload);
-    } else {
-      this.#document = null;
-    }
-    DOMModelUndoStack.instance().dispose(this);
-
-    if (!this.parentModel()) {
-      this.dispatchEventToListeners(Events.DocumentUpdated, this);
-    }
-  }
-
-  setDocumentForTest(document: Protocol.DOM.Node|null): void {
-    this.setDocument(document);
-  }
-
-  private setDetachedRoot(payload: Protocol.DOM.Node): void {
-    if (payload.nodeName === '#document') {
-      new DOMDocument(this, payload);
-    } else {
-      DOMNode.create(this, null, false, payload);
-    }
-  }
-
-  setChildNodes(parentId: Protocol.DOM.NodeId, payloads: Protocol.DOM.Node[]): void {
-    if (!parentId && payloads.length) {
-      this.setDetachedRoot(payloads[0]);
-      return;
-    }
-
-    const parent = this.idToDOMNode.get(parentId);
-    parent?.setChildrenPayload(payloads);
-  }
-
-  childNodeCountUpdated(nodeId: Protocol.DOM.NodeId, newValue: number): void {
-    const node = this.idToDOMNode.get(nodeId);
-    if (!node) {
-      console.error('nodeId could not be resolved to a node');
-      return;
-    }
-    node.setChildNodeCount(newValue);
-    this.dispatchEventToListeners(Events.ChildNodeCountUpdated, node);
-    this.scheduleMutationEvent(node);
-  }
-
-  childNodeInserted(parentId: Protocol.DOM.NodeId, prevId: Protocol.DOM.NodeId, payload: Protocol.DOM.Node): void {
-    const parent = this.idToDOMNode.get(parentId);
-    const prev = this.idToDOMNode.get(prevId);
-    if (!parent) {
-      console.error('parentId could not be resolved to a node');
-      return;
-    }
-    const node = parent.insertChild(prev, payload);
-    this.idToDOMNode.set(node.id, node);
-    this.dispatchEventToListeners(Events.NodeInserted, node);
-    this.scheduleMutationEvent(node);
-  }
-
-  childNodeRemoved(parentId: Protocol.DOM.NodeId, nodeId: Protocol.DOM.NodeId): void {
-    const parent = this.idToDOMNode.get(parentId);
-    const node = this.idToDOMNode.get(nodeId);
-    if (!parent || !node) {
-      console.error('parentId or nodeId could not be resolved to a node');
-      return;
-    }
-    parent.removeChild(node);
-    this.unbind(node);
-    this.dispatchEventToListeners(Events.NodeRemoved, {node, parent});
-    this.scheduleMutationEvent(node);
-  }
-
-  shadowRootPushed(hostId: Protocol.DOM.NodeId, root: Protocol.DOM.Node): void {
-    const host = this.idToDOMNode.get(hostId);
-    if (!host) {
-      return;
-    }
-    const node = DOMNode.create(this, host.ownerDocument, true, root);
-    node.parentNode = host;
-    this.idToDOMNode.set(node.id, node);
-    host.shadowRootsInternal.unshift(node);
-    this.dispatchEventToListeners(Events.NodeInserted, node);
-    this.scheduleMutationEvent(node);
-  }
-
-  shadowRootPopped(hostId: Protocol.DOM.NodeId, rootId: Protocol.DOM.NodeId): void {
-    const host = this.idToDOMNode.get(hostId);
-    if (!host) {
-      return;
-    }
-    const root = this.idToDOMNode.get(rootId);
-    if (!root) {
-      return;
-    }
-    host.removeChild(root);
-    this.unbind(root);
-    this.dispatchEventToListeners(Events.NodeRemoved, {node: root, parent: host});
-    this.scheduleMutationEvent(root);
-  }
-
-  pseudoElementAdded(parentId: Protocol.DOM.NodeId, pseudoElement: Protocol.DOM.Node): void {
-    const parent = this.idToDOMNode.get(parentId);
-    if (!parent) {
-      return;
-    }
-    const node = DOMNode.create(this, parent.ownerDocument, false, pseudoElement);
-    node.parentNode = parent;
-    this.idToDOMNode.set(node.id, node);
-    const pseudoType = node.pseudoType();
-    if (!pseudoType) {
-      throw new Error('DOMModel._pseudoElementAdded expects pseudoType to be defined.');
-    }
-    const currentPseudoElements = parent.pseudoElements().get(pseudoType);
-    if (currentPseudoElements && currentPseudoElements.length > 0) {
-      if (!(pseudoType.startsWith('view-transition') || pseudoType.startsWith('scroll-') || pseudoType === 'column')) {
-        throw new Error(
-            'DOMModel.pseudoElementAdded expects parent to not already have this pseudo type added; only view-transition* and scrolling pseudo elements can coexist under the same parent.' +
-            ` ${currentPseudoElements.length} elements of type ${pseudoType} already exist on parent.`);
-      }
-      currentPseudoElements.push(node);
-    } else {
-      parent.pseudoElements().set(pseudoType, [node]);
-    }
-    this.dispatchEventToListeners(Events.NodeInserted, node);
-    this.scheduleMutationEvent(node);
-  }
-
-  scrollableFlagUpdated(nodeId: Protocol.DOM.NodeId, isScrollable: boolean): void {
-    const node = this.nodeForId(nodeId);
-    if (!node || node.isScrollable() === isScrollable) {
-      return;
-    }
-    node.setIsScrollable(isScrollable);
-    this.dispatchEventToListeners(Events.ScrollableFlagUpdated, {node});
-  }
-
-  affectedByStartingStylesFlagUpdated(nodeId: Protocol.DOM.NodeId, affectedByStartingStyles: boolean): void {
-    const node = this.nodeForId(nodeId);
-    if (!node || node.affectedByStartingStyles() === affectedByStartingStyles) {
-      return;
-    }
-    node.setAffectedByStartingStyles(affectedByStartingStyles);
-    this.dispatchEventToListeners(Events.AffectedByStartingStylesFlagUpdated, {node});
-  }
-
-  topLayerElementsUpdated(): void {
-    this.dispatchEventToListeners(Events.TopLayerElementsChanged);
-  }
-
-  pseudoElementRemoved(parentId: Protocol.DOM.NodeId, pseudoElementId: Protocol.DOM.NodeId): void {
-    const parent = this.idToDOMNode.get(parentId);
-    if (!parent) {
-      return;
-    }
-    const pseudoElement = this.idToDOMNode.get(pseudoElementId);
-    if (!pseudoElement) {
-      return;
-    }
-    parent.removeChild(pseudoElement);
-    this.unbind(pseudoElement);
-    this.dispatchEventToListeners(Events.NodeRemoved, {node: pseudoElement, parent});
-    this.scheduleMutationEvent(pseudoElement);
-  }
-
-  distributedNodesUpdated(insertionPointId: Protocol.DOM.NodeId, distributedNodes: Protocol.DOM.BackendNode[]): void {
-    const insertionPoint = this.idToDOMNode.get(insertionPointId);
-    if (!insertionPoint) {
-      return;
-    }
-    insertionPoint.setDistributedNodePayloads(distributedNodes);
-    this.dispatchEventToListeners(Events.DistributedNodesChanged, insertionPoint);
-    this.scheduleMutationEvent(insertionPoint);
-  }
-
-  private unbind(node: DOMNode): void {
-    this.idToDOMNode.delete(node.id);
-    const children = node.children();
-    for (let i = 0; children && i < children.length; ++i) {
-      this.unbind(children[i]);
-    }
-    for (let i = 0; i < node.shadowRootsInternal.length; ++i) {
-      this.unbind(node.shadowRootsInternal[i]);
-    }
-    const pseudoElements = node.pseudoElements();
-    for (const value of pseudoElements.values()) {
-      for (const pseudoElement of value) {
-        this.unbind(pseudoElement);
-      }
-    }
-    const templateContent = node.templateContent();
-    if (templateContent) {
-      this.unbind(templateContent);
-    }
-  }
-
-  async getNodesByStyle(
-      computedStyles: Array<{
-        name: string,
-        value: string,
-      }>,
-      pierce = false): Promise<Protocol.DOM.NodeId[]> {
-    await this.requestDocument();
-    if (!this.#document) {
-      throw new Error('DOMModel.getNodesByStyle expects to have a document.');
-    }
-    const response =
-        await this.agent.invoke_getNodesForSubtreeByStyle({nodeId: this.#document.id, computedStyles, pierce});
-    if (response.getError()) {
-      throw new Error(response.getError());
-    }
-    return response.nodeIds;
-  }
-
-  async performSearch(query: string, includeUserAgentShadowDOM: boolean): Promise<number> {
-    const response = await this.agent.invoke_performSearch({query, includeUserAgentShadowDOM});
-    if (!response.getError()) {
-      this.#searchId = response.searchId;
-    }
-    return response.getError() ? 0 : response.resultCount;
-  }
-
-  async searchResult(index: number): Promise<DOMNode|null> {
-    if (!this.#searchId) {
-      return null;
-    }
-    const {nodeIds} =
-        await this.agent.invoke_getSearchResults({searchId: this.#searchId, fromIndex: index, toIndex: index + 1});
-    return nodeIds && nodeIds.length === 1 ? this.nodeForId(nodeIds[0]) : null;
-  }
-
-  private cancelSearch(): void {
-    if (!this.#searchId) {
-      return;
-    }
-    void this.agent.invoke_discardSearchResults({searchId: this.#searchId});
-    this.#searchId = undefined;
-  }
-
-  classNamesPromise(nodeId: Protocol.DOM.NodeId): Promise<string[]> {
-    return this.agent.invoke_collectClassNamesFromSubtree({nodeId}).then(({classNames}) => classNames || []);
-  }
-
-  querySelector(nodeId: Protocol.DOM.NodeId, selector: string): Promise<Protocol.DOM.NodeId|null> {
-    return this.agent.invoke_querySelector({nodeId, selector}).then(({nodeId}) => nodeId);
-  }
-
-  querySelectorAll(nodeId: Protocol.DOM.NodeId, selector: string): Promise<Protocol.DOM.NodeId[]|null> {
-    return this.agent.invoke_querySelectorAll({nodeId, selector}).then(({nodeIds}) => nodeIds);
-  }
-
-  getTopLayerElements(): Promise<Protocol.DOM.NodeId[]|null> {
-    return this.agent.invoke_getTopLayerElements().then(({nodeIds}) => nodeIds);
-  }
-
-  getDetachedDOMNodes(): Promise<Protocol.DOM.DetachedElementInfo[]|null> {
-    return this.agent.invoke_getDetachedDomNodes().then(({detachedNodes}) => detachedNodes);
-  }
-
-  getElementByRelation(nodeId: Protocol.DOM.NodeId, relation: Protocol.DOM.GetElementByRelationRequestRelation):
-      Promise<Protocol.DOM.NodeId|null> {
-    return this.agent.invoke_getElementByRelation({nodeId, relation}).then(({nodeId}) => nodeId);
-  }
-
-  markUndoableState(minorChange?: boolean): void {
-    void DOMModelUndoStack.instance().markUndoableState(this, minorChange || false);
-  }
-
-  async nodeForLocation(x: number, y: number, includeUserAgentShadowDOM: boolean): Promise<DOMNode|null> {
-    const response = await this.agent.invoke_getNodeForLocation({x, y, includeUserAgentShadowDOM});
-    if (response.getError() || !response.nodeId) {
-      return null;
-    }
-    return this.nodeForId(response.nodeId);
-  }
-
-  async getContainerForNode(
-      nodeId: Protocol.DOM.NodeId, containerName?: string, physicalAxes?: Protocol.DOM.PhysicalAxes,
-      logicalAxes?: Protocol.DOM.LogicalAxes, queriesScrollState?: boolean,
-      queriesAnchored?: boolean): Promise<DOMNode|null> {
-    const {nodeId: containerNodeId} = await this.agent.invoke_getContainerForNode(
-        {nodeId, containerName, physicalAxes, logicalAxes, queriesScrollState, queriesAnchored});
-    if (!containerNodeId) {
-      return null;
-    }
-    return this.nodeForId(containerNodeId);
-  }
-
-  pushObjectAsNodeToFrontend(object: RemoteObject): Promise<DOMNode|null> {
-    return object.isNode() && object.objectId ? this.pushNodeToFrontend(object.objectId) : Promise.resolve(null);
-  }
-
-  override suspendModel(): Promise<void> {
-    return this.agent.invoke_disable().then(() => this.setDocument(null));
-  }
-
-  override async resumeModel(): Promise<void> {
-    await this.agent.invoke_enable({});
-  }
-
-  override dispose(): void {
-    DOMModelUndoStack.instance().dispose(this);
-  }
-
-  parentModel(): DOMModel|null {
-    const parentTarget = this.target().parentTarget();
-    return parentTarget ? parentTarget.model(DOMModel) : null;
-  }
-
-  getAgent(): ProtocolProxyApi.DOMApi {
-    return this.agent;
-  }
-
-  registerNode(node: DOMNode): void {
-    this.idToDOMNode.set(node.id, node);
-  }
-}
-
-export enum Events {
-  /* eslint-disable @typescript-eslint/naming-convention -- Used by web_tests. */
-  AttrModified = 'AttrModified',
-  AttrRemoved = 'AttrRemoved',
-  CharacterDataModified = 'CharacterDataModified',
-  DOMMutated = 'DOMMutated',
-  NodeInserted = 'NodeInserted',
-  NodeRemoved = 'NodeRemoved',
-  DocumentUpdated = 'DocumentUpdated',
-  ChildNodeCountUpdated = 'ChildNodeCountUpdated',
-  DistributedNodesChanged = 'DistributedNodesChanged',
-  MarkersChanged = 'MarkersChanged',
-  TopLayerElementsChanged = 'TopLayerElementsChanged',
-  ScrollableFlagUpdated = 'ScrollableFlagUpdated',
-  AffectedByStartingStylesFlagUpdated = 'AffectedByStartingStylesFlagUpdated',
-  /* eslint-enable @typescript-eslint/naming-convention */
-}
-
-export interface EventTypes {
-  [Events.AttrModified]: {node: DOMNode, name: string};
-  [Events.AttrRemoved]: {node: DOMNode, name: string};
-  [Events.CharacterDataModified]: DOMNode;
-  [Events.DOMMutated]: DOMNode;
-  [Events.NodeInserted]: DOMNode;
-  [Events.NodeRemoved]: {node: DOMNode, parent: DOMNode};
-  [Events.DocumentUpdated]: DOMModel;
-  [Events.ChildNodeCountUpdated]: DOMNode;
-  [Events.DistributedNodesChanged]: DOMNode;
-  [Events.MarkersChanged]: DOMNode;
-  [Events.TopLayerElementsChanged]: void;
-  [Events.ScrollableFlagUpdated]: {node: DOMNode};
-  [Events.AffectedByStartingStylesFlagUpdated]: {node: DOMNode};
-}
-
-class DOMDispatcher implements ProtocolProxyApi.DOMDispatcher {
-  readonly #domModel: DOMModel;
-  constructor(domModel: DOMModel) {
-    this.#domModel = domModel;
-  }
-
-  documentUpdated(): void {
-    this.#domModel.documentUpdated();
-  }
-
-  attributeModified({nodeId, name, value}: Protocol.DOM.AttributeModifiedEvent): void {
-    this.#domModel.attributeModified(nodeId, name, value);
-  }
-
-  attributeRemoved({nodeId, name}: Protocol.DOM.AttributeRemovedEvent): void {
-    this.#domModel.attributeRemoved(nodeId, name);
-  }
-
-  inlineStyleInvalidated({nodeIds}: Protocol.DOM.InlineStyleInvalidatedEvent): void {
-    this.#domModel.inlineStyleInvalidated(nodeIds);
-  }
-
-  characterDataModified({nodeId, characterData}: Protocol.DOM.CharacterDataModifiedEvent): void {
-    this.#domModel.characterDataModified(nodeId, characterData);
-  }
-
-  setChildNodes({parentId, nodes}: Protocol.DOM.SetChildNodesEvent): void {
-    this.#domModel.setChildNodes(parentId, nodes);
-  }
-
-  childNodeCountUpdated({nodeId, childNodeCount}: Protocol.DOM.ChildNodeCountUpdatedEvent): void {
-    this.#domModel.childNodeCountUpdated(nodeId, childNodeCount);
-  }
-
-  childNodeInserted({parentNodeId, previousNodeId, node}: Protocol.DOM.ChildNodeInsertedEvent): void {
-    this.#domModel.childNodeInserted(parentNodeId, previousNodeId, node);
-  }
-
-  childNodeRemoved({parentNodeId, nodeId}: Protocol.DOM.ChildNodeRemovedEvent): void {
-    this.#domModel.childNodeRemoved(parentNodeId, nodeId);
-  }
-
-  shadowRootPushed({hostId, root}: Protocol.DOM.ShadowRootPushedEvent): void {
-    this.#domModel.shadowRootPushed(hostId, root);
-  }
-
-  shadowRootPopped({hostId, rootId}: Protocol.DOM.ShadowRootPoppedEvent): void {
-    this.#domModel.shadowRootPopped(hostId, rootId);
-  }
-
-  pseudoElementAdded({parentId, pseudoElement}: Protocol.DOM.PseudoElementAddedEvent): void {
-    this.#domModel.pseudoElementAdded(parentId, pseudoElement);
-  }
-
-  pseudoElementRemoved({parentId, pseudoElementId}: Protocol.DOM.PseudoElementRemovedEvent): void {
-    this.#domModel.pseudoElementRemoved(parentId, pseudoElementId);
-  }
-
-  distributedNodesUpdated({insertionPointId, distributedNodes}: Protocol.DOM.DistributedNodesUpdatedEvent): void {
-    this.#domModel.distributedNodesUpdated(insertionPointId, distributedNodes);
-  }
-
-  topLayerElementsUpdated(): void {
-    this.#domModel.topLayerElementsUpdated();
-  }
-
-  scrollableFlagUpdated({nodeId, isScrollable}: Protocol.DOM.ScrollableFlagUpdatedEvent): void {
-    this.#domModel.scrollableFlagUpdated(nodeId, isScrollable);
-  }
-
-  affectedByStartingStylesFlagUpdated({nodeId, affectedByStartingStyles}:
-                                          Protocol.DOM.AffectedByStartingStylesFlagUpdatedEvent): void {
-    this.#domModel.affectedByStartingStylesFlagUpdated(nodeId, affectedByStartingStyles);
-  }
-}
-
-let domModelUndoStackInstance: DOMModelUndoStack|null = null;
-
-export class DOMModelUndoStack {
-  #stack: DOMModel[];
-  #index: number;
-  #lastModelWithMinorChange: DOMModel|null;
-  constructor() {
-    this.#stack = [];
-    this.#index = 0;
-    this.#lastModelWithMinorChange = null;
-  }
-
-  static instance(opts: {
-    forceNew: boolean|null,
-  } = {forceNew: null}): DOMModelUndoStack {
-    const {forceNew} = opts;
-    if (!domModelUndoStackInstance || forceNew) {
-      domModelUndoStackInstance = new DOMModelUndoStack();
-    }
-
-    return domModelUndoStackInstance;
-  }
-
-  async markUndoableState(model: DOMModel, minorChange: boolean): Promise<void> {
-    // Both minor and major changes get into the #stack, but minor updates are coalesced.
-    // Commit major undoable state in the old model upon model switch.
-    if (this.#lastModelWithMinorChange && model !== this.#lastModelWithMinorChange) {
-      this.#lastModelWithMinorChange.markUndoableState();
-      this.#lastModelWithMinorChange = null;
-    }
-
-    // Previous minor change is already in the #stack.
-    if (minorChange && this.#lastModelWithMinorChange === model) {
-      return;
-    }
-
-    this.#stack = this.#stack.slice(0, this.#index);
-    this.#stack.push(model);
-    this.#index = this.#stack.length;
-
-    // Delay marking as major undoable states in case of minor operations until the
-    // major or model switch.
-    if (minorChange) {
-      this.#lastModelWithMinorChange = model;
-    } else {
-      await model.getAgent().invoke_markUndoableState();
-      this.#lastModelWithMinorChange = null;
-    }
-  }
-
-  async undo(): Promise<void> {
-    if (this.#index === 0) {
-      return await Promise.resolve();
-    }
-    --this.#index;
-    this.#lastModelWithMinorChange = null;
-    await this.#stack[this.#index].getAgent().invoke_undo();
-  }
-
-  async redo(): Promise<void> {
-    if (this.#index >= this.#stack.length) {
-      return await Promise.resolve();
-    }
-    ++this.#index;
-    this.#lastModelWithMinorChange = null;
-    await this.#stack[this.#index - 1].getAgent().invoke_redo();
-  }
-
-  dispose(model: DOMModel): void {
-    let shift = 0;
-    for (let i = 0; i < this.#index; ++i) {
-      if (this.#stack[i] === model) {
-        ++shift;
-      }
-    }
-    Platform.ArrayUtilities.removeElement(this.#stack, model);
-    this.#index -= shift;
-    if (this.#lastModelWithMinorChange === model) {
-      this.#lastModelWithMinorChange = null;
-    }
-  }
-}
-
-SDKModel.register(DOMModel, {capabilities: Capability.DOM, autostart: true});
-export interface Attribute {
-  name: string;
-  value: string;
-  _node: DOMNode;
-}