chrome-devtools-frontend 1.0.1683520 → 1.0.1689415

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -35,29 +35,45 @@
  */
 
 import * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Badges from '../../models/badges/badges.js';
 import * as Elements from '../../models/elements/elements.js';
-import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
 import * as Highlighting from '../../ui/components/highlighting/highlighting.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
 import * as UIComponentUtils from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html, nothing, render} from '../../ui/lit/lit.js';
+import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import {AdoptedStyleSheetSetTreeElement, AdoptedStyleSheetTreeElement} from './AdoptedStyleSheetTreeElement.js';
+import {
+  AdoptedStyleSheetContentsWidget,
+  AdoptedStyleSheetSetTreeElement,
+  AdoptedStyleSheetTreeElement,
+} from './AdoptedStyleSheetTreeElement.js';
+import * as ElementsComponents from './components/components.js';
+import {cssPath, jsPath, xPath} from './DOMPath.js';
 import {showContextMenu} from './DOMTreeContextMenu.js';
 import {getElementIssueDetails} from './ElementIssueUtils.js';
-import {ElementsTreeElement, InitialChildrenLimit, isOpeningTag} from './ElementsTreeElement.js';
+import {
+  adornerRef,
+  ElementsTreeElement,
+  ElementsTreeWidget,
+  ForbiddenClosingTagElements,
+  handleAdornerKeydown,
+  InitialChildrenLimit,
+  type InitialEditState,
+  isOpeningTag,
+} from './ElementsTreeElement.js';
 import elementsTreeOutlineStyles from './elementsTreeOutline.css.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
-import type {MarkerDecoratorRegistration} from './MarkerDecorator.js';
 import {ShortcutTreeElement} from './ShortcutTreeElement.js';
 import {TopLayerContainer} from './TopLayerContainer.js';
 
+const {html, nothing, render, Directives: {classMap}} = Lit;
+
 const UIStrings = {
   /**
    * @description ARIA accessible name in the DOM tree outline of the Elements panel.
@@ -77,6 +93,10 @@ const UIStrings = {
    * @description Text for popover that directs to the Issues panel.
    */
   viewIssue: 'View issue:',
+  /**
+   * @description Link text content in the DOM tree outline of the Elements panel.
+   */
+  reveal: 'reveal',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/elements/ElementsTreeOutline.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -84,10 +104,12 @@ const elementsTreeOutlineByDOMModel = new WeakMap<SDK.DOMModel.DOMModel, Element
 
 const populatedTreeElements = new WeakSet<ElementsTreeElement>();
 
-export type View = typeof DEFAULT_VIEW;
+export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
 export {elementsTreeOutlineStyles};
 
 interface ViewInput {
+  domTreeWidget?: DOMTreeWidget;
+  rootDOMNode: SDK.DOMModel.DOMNode|null;
   omitRootDOMNode: boolean;
   selectEnabled: boolean;
   hideGutter: boolean;
@@ -105,6 +127,9 @@ interface ViewInput {
   preventTabOrder: boolean;
   deindentSingleNode: boolean;
   currentHighlightedNode: SDK.DOMModel.DOMNode|null;
+  hoveredNode?: SDK.DOMModel.DOMNode|null;
+  searchMatchNode?: SDK.DOMModel.DOMNode|null;
+  searchMatchQuery?: string|null;
 
   selectedNode: SDK.DOMModel.DOMNode|null;
 
@@ -113,12 +138,55 @@ interface ViewInput {
   onElementsTreeUpdated: (event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode[]>) => void;
   onElementCollapsed: () => void;
   onElementExpanded: () => void;
+
+  onSelect?: (node: SDK.DOMModel.DOMNode, selectedByUser?: boolean) => void;
+  onExpand?: (node: SDK.DOMModel.DOMNode, expanded: boolean) => void;
+  onContextMenu?: (node: SDK.DOMModel.DOMNode, event: MouseEvent, widget?: ElementsTreeWidget) => void;
+  onHoverNode?: (node: SDK.DOMModel.DOMNode, showInfo?: boolean) => void;
+  onLeave?: () => void;
+  onToggleHideElement?: (node: SDK.DOMModel.DOMNode) => void;
+  onKeyDown?: (event: KeyboardEvent) => void;
+  isToggledToHidden?: (node: SDK.DOMModel.DOMNode) => boolean;
+  onDuplicateNode?: (node: SDK.DOMModel.DOMNode) => void;
+  isNodeExpanded?: (node: SDK.DOMModel.DOMNode) => boolean;
+  isNodeInClipboard?: (node: SDK.DOMModel.DOMNode) => boolean;
+  onCopyOrCut?: (isCut: boolean, event: Event) => void;
+  onPaste?: (event: Event) => void;
+  onSelectNodeAfterEdit?: (wasExpanded: boolean, error: string|null, newNode: SDK.DOMModel.DOMNode|null,
+                           moveDirection?: string) => void;
+  nodeToEdit?: ({node: SDK.DOMModel.DOMNode}&InitialEditState)|null;
+  onInitialEditCompleted?: () => void;
+  dragOverNode?: {node: SDK.DOMModel.DOMNode, isClosingTag: boolean}|null;
+  isValidDragSource?: (node: SDK.DOMModel.DOMNode) => boolean;
+  onDragStart?: (node: SDK.DOMModel.DOMNode, event: DragEvent, textContent?: string) => boolean;
+  onDragOver?: (node: SDK.DOMModel.DOMNode, isClosingTag: boolean, event: DragEvent) => boolean;
+  onDragLeave?: (event: DragEvent) => void;
+  onDrop?: (node: SDK.DOMModel.DOMNode, isClosingTag: boolean, event: DragEvent) => void;
+  onDragEnd?: (event: DragEvent) => void;
+  getTopLayerShortcuts?: (doc: SDK.DOMModel.DOMDocument) => SDK.DOMModel.DOMNodeShortcut[];
+  isTopLayerExpanded?: (doc: SDK.DOMModel.DOMDocument) => boolean;
+  onToggleTopLayerExpanded?: (doc: SDK.DOMModel.DOMDocument, expanded: boolean) => void;
+  onSelectTopLayerContainer?: (doc: SDK.DOMModel.DOMDocument) => void;
+  isTopLayerShortcutExpanded?: (shortcut: SDK.DOMModel.DOMNodeShortcut) => boolean;
+  onToggleTopLayerShortcutExpanded?: (shortcut: SDK.DOMModel.DOMNodeShortcut, expanded: boolean) => void;
+  selectedTopLayerShortcut?: SDK.DOMModel.DOMNodeShortcut|null;
+  onSelectTopLayerShortcut?: (shortcut: SDK.DOMModel.DOMNodeShortcut) => void;
+  onRevealTopLayerShortcut?: (shortcut: SDK.DOMModel.DOMNodeShortcut) => void;
+  isAdoptedStyleSheetsExpanded?: (node: SDK.DOMModel.DOMNode) => boolean;
+  onToggleAdoptedStyleSheetsExpanded?: (node: SDK.DOMModel.DOMNode, expanded: boolean) => void;
+  onSelectAdoptedStyleSheets?: (node: SDK.DOMModel.DOMNode) => void;
+  isAdoptedStyleSheetExpanded?: (sheet: SDK.DOMModel.AdoptedStyleSheet) => boolean;
+  onToggleAdoptedStyleSheetExpanded?: (sheet: SDK.DOMModel.AdoptedStyleSheet, expanded: boolean) => void;
+  selectedAdoptedStyleSheet?: SDK.DOMModel.AdoptedStyleSheet|null;
+  onSelectAdoptedStyleSheet?: (sheet: SDK.DOMModel.AdoptedStyleSheet) => void;
 }
 
 interface ViewOutput {
   elementsTreeOutline?: ElementsTreeOutline;
   imagePreviewPopover?: ImagePreviewPopover;
   highlightedTreeElement: ElementsTreeElement|null;
+  searchMatchTreeElement?: ElementsTreeElement|null;
+  searchMatchQuery?: string;
   isUpdatingHighlights: boolean;
   alreadyExpandedParentTreeElement: ElementsTreeElement|null;
 }
@@ -128,9 +196,9 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
     // FIXME: this is basically a ref to existing imperative
     // implementation. Once this is declarative the ref should not be
     // needed.
-    const elementsTreeOutline = new ElementsTreeOutline(input.omitRootDOMNode, input.selectEnabled, input.hideGutter,
-                                                        input.maxTreeDepth, input.enableContextMenu, input.showComments,
-                                                        input.showAIButton, input.disableEdits, input.expandRoot);
+    const elementsTreeOutline = new ElementsTreeOutline(
+        input.omitRootDOMNode, input.selectEnabled, input.hideGutter, input.maxTreeDepth, input.enableContextMenu,
+        input.showComments, input.showAIButton, input.disableEdits, input.expandRoot, input.domTreeWidget);
     output.elementsTreeOutline = elementsTreeOutline;
     elementsTreeOutline.addEventListener(ElementsTreeOutline.Events.SelectedNodeChanged, input.onSelectedNodeChanged,
                                          this);
@@ -147,9 +215,21 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
     elementsTreeOutline.elementInternal.addEventListener('contextmenu', (event: MouseEvent) => {
       const treeElement = elementsTreeOutline.treeElementFromEventInternal(event);
       if (treeElement instanceof ElementsTreeElement) {
-        output.elementsTreeOutline?.showContextMenu(treeElement, event);
+        input.onContextMenu?.(treeElement.node(), event, treeElement.widget);
       }
     }, false);
+    elementsTreeOutline.elementInternal.addEventListener('keydown', (event: KeyboardEvent) => {
+      input.onKeyDown?.(event);
+    }, false);
+    elementsTreeOutline.elementInternal.addEventListener('clipboard-copy', (event: Event) => {
+      input.onCopyOrCut?.(false, event);
+    }, false);
+    elementsTreeOutline.elementInternal.addEventListener('clipboard-cut', (event: Event) => {
+      input.onCopyOrCut?.(true, event);
+    }, false);
+    elementsTreeOutline.elementInternal.addEventListener('clipboard-paste', (event: Event) => {
+      input.onPaste?.(event);
+    }, false);
     output.imagePreviewPopover = new ImagePreviewPopover(
         elementsTreeOutline.contentElement,
         event => {
@@ -176,8 +256,27 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         return null;
       }
 
-      const issues = elementsTreeOutline.issuesByNodeElement(hoveredNode);
-      if (!issues) {
+      const listItem = UI.UIUtils.enclosingNodeOrSelfWithNodeName(hoveredNode, 'li');
+      if (!listItem) {
+        return null;
+      }
+      const treeElement =
+          UI.TreeOutline.TreeElement.getTreeElementBylistItemNode(listItem) as ElementsTreeElement | undefined;
+      const node = treeElement?.node();
+      if (!node) {
+        return null;
+      }
+      let issues = treeElement?.widget?.issues ?? [];
+      if (hoveredNode.classList.contains('webkit-html-attribute-name')) {
+        const attrName = hoveredNode.textContent;
+        issues = issues.filter(issue => getElementIssueDetails(issue)?.attribute === attrName);
+      } else if (hoveredNode.classList.contains('webkit-html-tag-name')) {
+        issues = issues.filter(issue => {
+          const details = getElementIssueDetails(issue);
+          return Boolean(details && !details.attribute);
+        });
+      }
+      if (issues.length === 0) {
         return null;
       }
 
@@ -191,7 +290,6 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
               ${issues.map(issue => {
             const elementIssueDetails = getElementIssueDetails(issue);
             if (!elementIssueDetails) {
-              // This shouldn't happen, but add this if check to pass ts check.
               return nothing;
             }
             const issueKindIconName = IssueCounter.IssueCounter.getIssueKindIconName(issue.getKind());
@@ -216,7 +314,9 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
   output.elementsTreeOutline.maxTreeDepth = input.maxTreeDepth;
   output.elementsTreeOutline.enableContextMenu = input.enableContextMenu ?? true;
   output.elementsTreeOutline.showContextMenu = (treeElement, event) => {
-    void showContextMenu(treeElement, event);
+    if (event instanceof MouseEvent) {
+      input.onContextMenu?.(treeElement.node(), event, treeElement.widget);
+    }
   };
   let needsUpdate = false;
   const showComments = input.showComments ?? true;
@@ -292,6 +392,578 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
     treeElement?.reveal(true);
     output.isUpdatingHighlights = false;
   }
+
+  const previousSearchMatchNode = output.searchMatchTreeElement?.node() ?? null;
+  if (previousSearchMatchNode !== input.searchMatchNode || output.searchMatchQuery !== input.searchMatchQuery) {
+    if (output.searchMatchTreeElement) {
+      output.searchMatchTreeElement.hideSearchHighlights();
+      output.searchMatchTreeElement = null;
+    }
+    output.searchMatchQuery = input.searchMatchQuery ?? undefined;
+    if (input.searchMatchNode) {
+      const treeElement = output.elementsTreeOutline.findTreeElement(input.searchMatchNode);
+      if (treeElement) {
+        output.searchMatchTreeElement = treeElement;
+        if (input.searchMatchQuery) {
+          treeElement.highlightSearchResults(input.searchMatchQuery);
+        }
+        treeElement.reveal();
+        const matches =
+            treeElement.listItemElement.getElementsByClassName(Highlighting.highlightedSearchResultClassName);
+        if (matches.length) {
+          matches[0].scrollIntoViewIfNeeded(false);
+        }
+      }
+    }
+  }
+
+  if (input.nodeToEdit) {
+    const treeElement = output.elementsTreeOutline.findTreeElement(input.nodeToEdit.node);
+    if (treeElement) {
+      const edit = input.nodeToEdit;
+      input.onInitialEditCompleted?.();
+      if (edit.isEditAsHTML) {
+        treeElement.widget.toggleEditAsHTML(edit.editAsHTMLCallback);
+      } else if (edit.isProcessingInstruction) {
+        treeElement.widget.startEditingProcessingInstructionValue();
+      } else if (edit.isTextNode) {
+        const textNode = treeElement.widget.contentElement.querySelector('.webkit-html-text-node');
+        if (textNode) {
+          treeElement.widget.startEditingTextNode(textNode);
+        }
+      } else if (edit.isNewAttribute) {
+        treeElement.widget.addNewAttribute();
+      } else if (edit.attributeName) {
+        treeElement.widget.triggerEditAttribute(edit.attributeName);
+      }
+    }
+  }
+};
+
+function isMaxDepthReached(node: SDK.DOMModel.DOMNode, rootDOMNode: SDK.DOMModel.DOMNode|null, maxTreeDepth?: number,
+                           omitRootDOMNode?: boolean): boolean {
+  if (maxTreeDepth === undefined || maxTreeDepth === Infinity) {
+    return false;
+  }
+  if (node.nodeType() === Node.DOCUMENT_NODE || node.isShadowRoot()) {
+    return false;
+  }
+  let depth = 0;
+  let current: SDK.DOMModel.DOMNode|null = node;
+  while (current && current !== rootDOMNode) {
+    depth++;
+    current = current.parentNode;
+  }
+  if (!omitRootDOMNode) {
+    depth++;
+  }
+  return depth >= maxTreeDepth;
+}
+
+function nodeHasVisibleChildren(node: SDK.DOMModel.DOMNode, rootDOMNode: SDK.DOMModel.DOMNode|null = null,
+                                maxTreeDepth?: number, omitRootDOMNode?: boolean): boolean {
+  if (isMaxDepthReached(node, rootDOMNode, maxTreeDepth, omitRootDOMNode)) {
+    return false;
+  }
+  if (node.isIframe() || node.contentDocument() || node.templateContent() ||
+      ElementsTreeWidget.visibleShadowRoots(node).length || node.hasPseudoElements() || node.isInsertionPoint() ||
+      node.adoptedStyleSheetsForNode.length) {
+    return true;
+  }
+  return Boolean(node.childNodeCount()) && !ElementsTreeWidget.canShowInlineText(node);
+}
+
+function getVisibleChildren(node: SDK.DOMModel.DOMNode, showComments = true): SDK.DOMModel.DOMNode[] {
+  const children: SDK.DOMModel.DOMNode[] = [];
+  children.push(...ElementsTreeWidget.visibleShadowRoots(node));
+
+  const contentDocument = node.contentDocument();
+  if (contentDocument) {
+    children.push(contentDocument);
+  }
+
+  const templateContent = node.templateContent();
+  if (templateContent) {
+    children.push(templateContent);
+  }
+
+  children.push(...node.viewTransitionPseudoElements());
+
+  const markerPseudo = node.markerPseudoElement();
+  if (markerPseudo) {
+    children.push(markerPseudo);
+  }
+
+  const checkmarkPseudo = node.checkmarkPseudoElement();
+  if (checkmarkPseudo) {
+    children.push(checkmarkPseudo);
+  }
+
+  const beforePseudo = node.beforePseudoElement();
+  if (beforePseudo) {
+    children.push(beforePseudo);
+  }
+
+  children.push(...node.carouselPseudoElements());
+
+  if (node.childNodeCount()) {
+    const nodeChildren = node.children();
+    if (nodeChildren) {
+      let filteredChildren = nodeChildren;
+      if (!showComments) {
+        filteredChildren = filteredChildren.filter(n => n.nodeType() !== Node.COMMENT_NODE);
+      }
+      children.push(...filteredChildren);
+    }
+  }
+
+  const afterPseudo = node.afterPseudoElement();
+  if (afterPseudo) {
+    children.push(afterPseudo);
+  }
+
+  const pickerIconPseudo = node.pickerIconPseudoElement();
+  if (pickerIconPseudo) {
+    children.push(pickerIconPseudo);
+  }
+
+  const interestButtonPseudo = node.interestButtonPseudoElement();
+  if (interestButtonPseudo) {
+    children.push(interestButtonPseudo);
+  }
+
+  const backdropPseudo = node.backdropPseudoElement();
+  if (backdropPseudo) {
+    children.push(backdropPseudo);
+  }
+
+  return children;
+}
+
+function isAncestorOf(ancestor: SDK.DOMModel.DOMNode, descendant: SDK.DOMModel.DOMNode): boolean {
+  let current: SDK.DOMModel.DOMNode|null = descendant.parentNode;
+  while (current) {
+    if (current === ancestor) {
+      return true;
+    }
+    current = current.parentNode;
+  }
+  return false;
+}
+
+function computeLeftIndent(depth: number, isExpandable: boolean): number {
+  return 12 * (depth - 1) + (isExpandable ? 1 : 12);
+}
+
+export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLElement): void => {
+  let rootNodes: SDK.DOMModel.DOMNode[] = [];
+  const rootDOMNode = input.rootDOMNode;
+  if (rootDOMNode) {
+    if (input.omitRootDOMNode) {
+      rootNodes = getVisibleChildren(rootDOMNode, input.showComments ?? true);
+    } else {
+      rootNodes = [rootDOMNode];
+    }
+  }
+
+  const on = Lit.Directive.directive(Lit.CustomDirectives.InterceptBindingDirective);
+
+  const renderShortcut = (shortcut: SDK.DOMModel.DOMNodeShortcut, shortcutDepth: number): Lit.LitTemplate => {
+    const hasShortcutChildren = shortcut.childShortcuts.length > 0;
+    const isShortcutExpanded = Boolean(input.isTopLayerShortcutExpanded?.(shortcut));
+    const isShortcutSelected = input.selectedTopLayerShortcut === shortcut;
+    let title = shortcut.nodeName.toLowerCase();
+    if (shortcut.nodeType === Node.ELEMENT_NODE) {
+      title = '<' + title + '>';
+    }
+    const onShortcutExpand = (event: UI.TreeOutline.TreeViewElement.ExpandEvent): void => {
+      input.onToggleTopLayerShortcutExpanded?.(shortcut, event.detail.expanded);
+    };
+    const onShortcutSelect = (): void => {
+      input.onSelectTopLayerShortcut?.(shortcut);
+    };
+    const onReveal = (event: Event): void => {
+      event.stopPropagation();
+      input.onRevealTopLayerShortcut?.(shortcut);
+    };
+    const onShortcutMouseMove = (event: MouseEvent): void => {
+      event.stopPropagation();
+      shortcut.deferredNode.highlight();
+    };
+    const onShortcutMouseLeave = (event: MouseEvent): void => {
+      event.stopPropagation();
+      SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
+    };
+
+    return html`
+      <li role="treeitem"
+          ?selected=${isShortcutSelected}
+          ?open=${isShortcutExpanded}
+          class="elements-tree-shortcut"
+          style="--indent: ${computeLeftIndent(shortcutDepth, hasShortcutChildren)}px"
+          @select=${onShortcutSelect}
+          @expand=${onShortcutExpand}
+          @mousemove=${on(onShortcutMouseMove)}
+          @mouseleave=${on(onShortcutMouseLeave)}
+          jslog=${VisualLogging.treeItem().parent('elementsTreeOutline')}>
+        <div class="selection fill"></div>
+        <span class="elements-tree-shortcut-title">\u21AA ${title}</span>
+        <devtools-adorner
+          .name=${ElementsComponents.AdornerManager.RegisteredAdorners.REVEAL}
+          class="adorner-reveal clickable"
+          role=button
+          tabindex=0
+          jslog=${VisualLogging.adorner('reveal').track({
+      click: true,
+    })}
+          aria-label=${i18nString(UIStrings.reveal)}
+          @click=${on(onReveal)}
+          @keydown=${handleAdornerKeydown(onReveal)}
+          @mousedown=${(e: Event) => e.consume()}
+          ${adornerRef()}>
+          <span class="adorner-with-icon">
+            <devtools-icon name="select-element"></devtools-icon>
+            <span>${ElementsComponents.AdornerManager.RegisteredAdorners.REVEAL}</span>
+          </span>
+        </devtools-adorner>
+        ${
+        hasShortcutChildren ? html`
+          <ul role="group">
+            ${UI.TreeOutline.ifExpanded(html`
+              ${shortcut.childShortcuts.map(child => renderShortcut(child, shortcutDepth + 1))}
+            `)}
+          </ul>
+        ` :
+                              nothing}
+      </li>
+    `;
+  };
+
+  const renderTopLayerContainer =
+      (doc: SDK.DOMModel.DOMDocument, containerDepth: number): Lit.LitTemplate|typeof nothing => {
+        const shortcuts = input.getTopLayerShortcuts?.(doc) ?? [];
+        if (shortcuts.length === 0) {
+          return nothing;
+        }
+        const isTopLayerExpanded = Boolean(input.isTopLayerExpanded?.(doc));
+        const onTopLayerExpand = (event: UI.TreeOutline.TreeViewElement.ExpandEvent): void => {
+          input.onToggleTopLayerExpanded?.(doc, event.detail.expanded);
+        };
+        const onTopLayerSelect = (): void => {
+          input.onSelectTopLayerContainer?.(doc);
+        };
+
+        return html`
+      <li role="treeitem"
+          ?open=${isTopLayerExpanded}
+          class="elements-tree-top-layer-container"
+          style="--indent: ${computeLeftIndent(containerDepth, true)}px"
+          @select=${onTopLayerSelect}
+          @expand=${onTopLayerExpand}
+          jslog=${VisualLogging.treeItem().parent('elementsTreeOutline')}>
+        <div class="selection fill"></div>
+        <span class="elements-tree-shortcut-title">#top-layer</span>
+        <ul role="group">
+          ${UI.TreeOutline.ifExpanded(html`
+            ${shortcuts.map(sc => renderShortcut(sc, containerDepth + 1))}
+          `)}
+        </ul>
+      </li>
+    `;
+      };
+
+  const renderAdoptedStyleSheet = (sheet: SDK.DOMModel.AdoptedStyleSheet, depth: number): Lit.LitTemplate => {
+    const header = sheet.cssModel.styleSheetHeaderForId(sheet.id);
+    const linkText = header?.sourceURL;
+    const isExpanded = Boolean(input.isAdoptedStyleSheetExpanded?.(sheet));
+    const isSelected = input.selectedAdoptedStyleSheet === sheet;
+    const onExpand = (event: UI.TreeOutline.TreeViewElement.ExpandEvent): void => {
+      input.onToggleAdoptedStyleSheetExpanded?.(sheet, event.detail.expanded);
+    };
+    const onSelect = (): void => {
+      input.onSelectAdoptedStyleSheet?.(sheet);
+    };
+
+    // clang-format off
+    return html`
+      <li role="treeitem"
+          ?selected=${isSelected}
+          ?open=${isExpanded}
+          class="elements-tree-adopted-style-sheet"
+          style="--indent: ${computeLeftIndent(depth, true)}px"
+          @select=${onSelect}
+          @expand=${onExpand}
+          jslog=${VisualLogging.treeItem('adopted-style-sheet').parent('elementsTreeOutline')}>
+        <div class="selection fill"></div>
+        <span class="elements-tree-shortcut-title">#adopted-style-sheet${linkText ? html` (${UIComponentUtils.Linkifier.Linkifier.linkifyURL(linkText, {
+          text: linkText,
+          preventClick: true,
+          showColumnNumber: false,
+        })})` : nothing}</span>
+        <ul role="group">
+          ${UI.TreeOutline.ifExpanded(html`
+            ${header ? html`
+              <li role="treeitem"
+                  class="elements-tree-adopted-style-sheet-contents"
+                  style="--indent: ${computeLeftIndent(depth + 1, false)}px"
+                  jslog=${VisualLogging.treeItem('adopted-style-sheet-contents').parent('elementsTreeOutline')}>
+                <div class="selection fill"></div>
+                ${UI.Widget.widget(AdoptedStyleSheetContentsWidget, {styleSheetHeader: header})}
+              </li>
+            ` : nothing}
+          `)}
+        </ul>
+      </li>
+    `;
+    // clang-format on
+  };
+
+  const renderAdoptedStyleSheets = (node: SDK.DOMModel.DOMNode, depth: number): Lit.LitTemplate|typeof nothing => {
+    const sheets = node.adoptedStyleSheetsForNode;
+    if (!sheets || sheets.length === 0) {
+      return nothing;
+    }
+    const isExpanded = Boolean(input.isAdoptedStyleSheetsExpanded?.(node));
+    const onExpand = (event: UI.TreeOutline.TreeViewElement.ExpandEvent): void => {
+      input.onToggleAdoptedStyleSheetsExpanded?.(node, event.detail.expanded);
+    };
+    const onSelect = (): void => {
+      input.onSelectAdoptedStyleSheets?.(node);
+    };
+
+    // clang-format off
+    return html`
+      <li role="treeitem"
+          ?open=${isExpanded}
+          class="elements-tree-adopted-style-sheets"
+          style="--indent: ${computeLeftIndent(depth, true)}px"
+          @select=${onSelect}
+          @expand=${onExpand}
+          jslog=${VisualLogging.treeItem('adopted-style-sheets').parent('elementsTreeOutline')}>
+        <div class="selection fill"></div>
+        <span class="elements-tree-shortcut-title">#adopted-style-sheets</span>
+        <ul role="group">
+          ${UI.TreeOutline.ifExpanded(html`
+            ${sheets.map(sheet => renderAdoptedStyleSheet(sheet, depth + 1))}
+          `)}
+        </ul>
+      </li>
+    `;
+    // clang-format on
+  };
+
+  const renderNode = (node: SDK.DOMModel.DOMNode, depth = 0): Lit.LitTemplate => {
+    const isSelected = input.selectedNode === node;
+    const isHovered = (input.currentHighlightedNode === node) || (input.hoveredNode === node);
+    const isExpanded = Boolean(
+        (input.currentHighlightedNode && isAncestorOf(node, input.currentHighlightedNode)) ||
+        (input.isNodeExpanded ?
+             input.isNodeExpanded(node) :
+             (input.expandRoot &&
+              (node === input.rootDOMNode || (input.omitRootDOMNode && node.parentNode === input.rootDOMNode)))));
+    const hasChildren = nodeHasVisibleChildren(node, input.rootDOMNode, input.maxTreeDepth, input.omitRootDOMNode);
+    const children = hasChildren ? getVisibleChildren(node, input.showComments ?? true) : [];
+    const tagName = node.nodeName().toLowerCase();
+    const needsClosingTag = node.nodeType() === Node.ELEMENT_NODE && !ForbiddenClosingTagElements.has(tagName) &&
+        !node.pseudoType() && (hasChildren || !ElementsTreeWidget.canShowInlineText(node));
+
+    // TODO: Move tree node pagination ("Show all nodes" button and expandedChildrenLimit) to a declarative tree slice model.
+    // TODO: Move ImagePreviewPopover and issue tooltip helpers into declarative Lit directives or tooltip components.
+    // TODO: Move DOMModel event subscription and reactive state synchronization (updateRecords, DOM update animations) directly into DOMTreeWidget.
+
+    const on = Lit.Directive.directive(Lit.CustomDirectives.InterceptBindingDirective);
+
+    const onSelect = (): void => {
+      input.onSelect?.(node, /* selectedByUser= */ true);
+    };
+
+    const onExpand = (event: UI.TreeOutline.TreeViewElement.ExpandEvent): void => {
+      input.onExpand?.(node, event.detail.expanded);
+    };
+
+    const isDragOver = input.dragOverNode?.node === node && !input.dragOverNode.isClosingTag;
+    const isClosingTagDragOver = input.dragOverNode?.node === node && Boolean(input.dragOverNode.isClosingTag);
+    const isDraggable = !input.disableEdits && Boolean(input.isValidDragSource?.(node));
+
+    const classes = classMap({
+      hovered: isHovered,
+      'in-clipboard': Boolean(input.isNodeInClipboard?.(node)),
+      'elements-drag-over': isDragOver,
+    });
+
+    const onMouseMove = (event: MouseEvent): void => {
+      event.stopPropagation();
+      const showInfo = !UI.KeyboardShortcut.KeyboardShortcut.eventHasEitherCtrlOrMeta(event);
+      input.onHoverNode?.(node, showInfo);
+    };
+
+    const onContextMenu = (event: MouseEvent): void => {
+      event.stopPropagation();
+      input.onContextMenu?.(node, event);
+    };
+
+    const onDragStart = (event: DragEvent): void => {
+      event.stopPropagation();
+      const currentTarget = event.currentTarget as HTMLElement | null;
+      const textContent = currentTarget?.firstElementChild?.textContent ?? currentTarget?.textContent ?? undefined;
+      input.onDragStart?.(node, event, textContent);
+    };
+
+    const onDragOver = (event: DragEvent): void => {
+      event.stopPropagation();
+      input.onDragOver?.(node, /* isClosingTag= */ false, event);
+    };
+
+    const onClosingTagDragOver = (event: DragEvent): void => {
+      event.stopPropagation();
+      input.onDragOver?.(node, /* isClosingTag= */ true, event);
+    };
+
+    const onDragLeave = (event: DragEvent): void => {
+      event.stopPropagation();
+      input.onDragLeave?.(event);
+    };
+
+    const onDrop = (event: DragEvent): void => {
+      event.stopPropagation();
+      input.onDrop?.(node, /* isClosingTag= */ false, event);
+    };
+
+    const onClosingTagDrop = (event: DragEvent): void => {
+      event.stopPropagation();
+      input.onDrop?.(node, /* isClosingTag= */ true, event);
+    };
+
+    const onDragEnd = (event: DragEvent): void => {
+      event.stopPropagation();
+      input.onDragEnd?.(event);
+    };
+
+    /* clang-format off */
+    return html`
+      <li role="treeitem"
+          ?selected=${isSelected}
+          class=${classes}
+          ?open=${isExpanded}
+          draggable=${isDraggable ? 'true' : 'false'}
+          @select=${onSelect}
+          @expand=${onExpand}
+          @mousemove=${on(onMouseMove)}
+          @contextmenu=${on(onContextMenu)}
+          @dragstart=${on(onDragStart)}
+          @dragover=${on(onDragOver)}
+          @dragleave=${on(onDragLeave)}
+          @drop=${on(onDrop)}
+          @dragend=${on(onDragEnd)}
+          jslog=${VisualLogging.treeItem().parent('elementsTreeOutline').track({
+            keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Backspace|Delete|Enter|Space|Home|End',
+            resize: true,
+            drag: true,
+            click: true,
+          })}>
+        ${UI.Widget.widget(ElementsTreeWidget, {
+          node,
+          isClosingTag: false,
+          expanded: isExpanded,
+          isExpandable: hasChildren,
+          selected: isSelected,
+          isDOMNodeSelected: isSelected,
+          hovered: isHovered,
+          searchQuery: input.searchMatchNode === node ? (input.searchMatchQuery ?? null) : null,
+          inClipboard: input.isNodeInClipboard?.(node) ?? false,
+          computeLeftIndent: computeLeftIndent(depth, hasChildren),
+          disableEdits: input.disableEdits ?? false,
+          showAIButton: input.showAIButton ?? true,
+          initialEdit: input.nodeToEdit?.node === node ? input.nodeToEdit : null,
+          onInitialEditCompleted: input.onInitialEditCompleted,
+          revealInTopLayer: (n: SDK.DOMModel.DOMNode) => input.domTreeWidget?.revealInTopLayer(n),
+          setMultilineEditing: multilineEditing => input.domTreeWidget?.setMultilineEditing(multilineEditing),
+          visibleWidth: () => input.domTreeWidget?.visibleWidth ?? 0,
+          selectDOMNode: (n: SDK.DOMModel.DOMNode, selectedByUser?: boolean) => input.onSelect?.(n, selectedByUser),
+          selectNodeAfterEdit: (wasExpanded: boolean, error: string|null, newNode: SDK.DOMModel.DOMNode|null, moveDirection?: string) => {
+            input.onSelectNodeAfterEdit?.(wasExpanded, error, newNode, moveDirection);
+          },
+          toggleHideElement: (n: SDK.DOMModel.DOMNode) => {
+            input.onToggleHideElement?.(n);
+            return Promise.resolve();
+          },
+          isToggledToHidden: (n: SDK.DOMModel.DOMNode) => input.isToggledToHidden?.(n) ?? false,
+          showContextMenu: (event: Event, widget?: ElementsTreeWidget) => {
+            if (event instanceof MouseEvent) {
+              input.onContextMenu?.(node, event, widget);
+            }
+          },
+        })}
+        ${hasChildren ? html`
+          <ul role="group">
+            ${UI.TreeOutline.ifExpanded(html`
+              ${node.adoptedStyleSheetsForNode.length > 0 ? renderAdoptedStyleSheets(node, depth + 1) : nothing}
+              ${children.map(child => renderNode(child, depth + 1))}
+              ${node instanceof SDK.DOMModel.DOMDocument ? renderTopLayerContainer(node, depth + 1) : nothing}
+              ${needsClosingTag ? html`
+                <li role="treeitem"
+                    class=${classMap({hovered: isHovered, 'elements-drag-over': isClosingTagDragOver})}
+                    jslog=${VisualLogging.treeItem().parent('elementsTreeOutline')}
+                    @mousemove=${on(onMouseMove)}
+                    @dragover=${on(onClosingTagDragOver)}
+                    @dragleave=${on(onDragLeave)}
+                    @drop=${on(onClosingTagDrop)}>
+                  ${UI.Widget.widget(ElementsTreeWidget, {
+                    node,
+                    isClosingTag: true,
+                    expanded: false,
+                    isExpandable: false,
+                    selected: false,
+                    isDOMNodeSelected: false,
+                    hovered: isHovered,
+                    computeLeftIndent: computeLeftIndent(depth, false),
+                    disableEdits: input.disableEdits ?? false,
+                    showAIButton: false,
+                    showContextMenu: (event: Event, widget?: ElementsTreeWidget) => {
+                      if (event instanceof MouseEvent) {
+                        input.onContextMenu?.(node, event, widget);
+                      }
+                    },
+                  })}
+                </li>
+              ` : nothing}
+            `)}
+          </ul>
+        ` : nothing}
+      </li>
+    `;
+    /* clang-format on */
+  };
+
+  /* clang-format off */
+  render(html`
+    <style>${UI.inspectorCommonStyles}</style>
+    <style>${elementsTreeOutlineStyles}</style>
+    <style>${CodeHighlighter.codeHighlighterStyles}</style>
+    <div class="elements-disclosure ${input.deindentSingleNode && rootNodes.length === 1 && !nodeHasVisibleChildren(rootNodes[0], input.rootDOMNode, input.maxTreeDepth, input.omitRootDOMNode) ? 'single-node' : ''}">
+      <devtools-tree
+        class="elements-tree-outline source-code ${input.wrap ? '' : 'elements-tree-nowrap'} ${input.hideGutter ? 'elements-hide-gutter' : ''}"
+        aria-label=${i18nString(UIStrings.pageDom)}
+        jslog=${VisualLogging.tree('elements')}
+        ?show-selection-on-keyboard-focus=${input.showSelectionOnKeyboardFocus}
+        @keydown=${input.onKeyDown}
+        @clipboard-copy=${(event: Event) => input.onCopyOrCut?.(false, event)}
+        @clipboard-cut=${(event: Event) => input.onCopyOrCut?.(true, event)}
+        @clipboard-paste=${(event: Event) => input.onPaste?.(event)}
+        @mouseleave=${input.onLeave}
+        .template=${html`
+          <style>${UI.inspectorCommonStyles}</style>
+          <style>${elementsTreeOutlineStyles}</style>
+          <style>${CodeHighlighter.codeHighlighterStyles}</style>
+          <ul role="tree">
+            ${rootNodes.map(node => renderNode(node))}
+            ${input.omitRootDOMNode && input.rootDOMNode instanceof SDK.DOMModel.DOMDocument ? renderTopLayerContainer(input.rootDOMNode, 1) : nothing}
+          </ul>
+        `}>
+      </devtools-tree>
+    </div>
+  `, target);
+  /* clang-format on */
 };
 
 /**
@@ -312,6 +984,8 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       (event:
            Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode | null, focus: boolean}>) => void = () => {};
   onElementsTreeUpdated: (event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode[]>) => void = () => {};
+  onElementCollapsed: () => void = () => {};
+  onElementExpanded: () => void = () => {};
   onDocumentUpdated: (domModel: SDK.DOMModel.DOMModel) => void = () => {};
 
   #maxTreeDepth?: number;
@@ -336,14 +1010,37 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     return this.#maxRows;
   }
 
+  get visibleWidth(): number {
+    return this.#visibleWidth ?? this.contentElement.offsetWidth;
+  }
+
   set visibleWidth(width: number) {
     this.#visibleWidth = width;
     this.performUpdate();
   }
 
+  #rootDOMNode: SDK.DOMModel.DOMNode|null = null;
+  #selectedDOMNode: SDK.DOMModel.DOMNode|null = null;
+  #expandedNodes = new Set<SDK.DOMModel.DOMNode>();
+
   // FIXME: this is not declarative because ElementsTreeOutline can
   // change root node internally.
   set rootDOMNode(node: SDK.DOMModel.DOMNode|null) {
+    if (this.#view === DECLARATIVE_VIEW) {
+      this.#rootDOMNode = node;
+      if (node) {
+        if (this.expandRoot || this.omitRootDOMNode) {
+          this.#expandedNodes.add(node);
+        }
+        if (!node.children() && node.childNodeCount()) {
+          void node.getChildNodes(() => {
+            this.performUpdate();
+          });
+        }
+      }
+      this.performUpdate();
+      return;
+    }
     this.performUpdate();
     if (!this.#viewOutput.elementsTreeOutline) {
       throw new Error('Unexpected: missing elementsTreeOutline');
@@ -352,6 +1049,9 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     this.performUpdate();
   }
   get rootDOMNode(): SDK.DOMModel.DOMNode|null {
+    if (this.#view === DECLARATIVE_VIEW) {
+      return this.#rootDOMNode;
+    }
     return this.#viewOutput.elementsTreeOutline?.rootDOMNode ?? null;
   }
 
@@ -410,6 +1110,14 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   }
 
   #currentHighlightedNode: SDK.DOMModel.DOMNode|null = null;
+  #wiredDOMModels = new Set<SDK.DOMModel.DOMModel>();
+  #topLayerShortcutsByDocument = new WeakMap<SDK.DOMModel.DOMDocument, SDK.DOMModel.DOMNodeShortcut[]>();
+  #topLayerContainerExpandedByDocument = new WeakMap<SDK.DOMModel.DOMDocument, boolean>();
+  #topLayerShortcutExpanded = new WeakMap<SDK.DOMModel.DOMNodeShortcut, boolean>();
+  #selectedTopLayerShortcut: SDK.DOMModel.DOMNodeShortcut|null = null;
+  #adoptedStyleSheetsExpandedByNode = new WeakMap<SDK.DOMModel.DOMNode, boolean>();
+  #adoptedStyleSheetExpanded = new WeakMap<SDK.DOMModel.AdoptedStyleSheet, boolean>();
+  #selectedAdoptedStyleSheet: SDK.DOMModel.AdoptedStyleSheet|null = null;
 
   #view: View;
   #viewOutput: ViewOutput = {
@@ -419,12 +1127,15 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   };
   #highlightThrottler = new Common.Throttler.Throttler(100);
 
-  constructor(element?: HTMLElement, view?: View) {
+  constructor(
+      element?: HTMLElement,
+      view: View = DEFAULT_VIEW,
+  ) {
     super(element, {
       useShadowDom: false,
       delegatesFocus: false,
     });
-    this.#view = view ?? DEFAULT_VIEW;
+    this.#view = view;
     this.#showHTMLCommentsSetting.addChangeListener(this.#onShowHTMLCommentsChange, this);
     if (Common.Settings.Settings.instance().moduleSetting('highlight-node-on-hover-in-overlay').get()) {
       SDK.TargetManager.TargetManager.instance().addModelListener(
@@ -436,6 +1147,23 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     }
   }
 
+  #onDocumentUpdated(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMModel>): void {
+    const domModel = event.data;
+    if (this.#view === DECLARATIVE_VIEW) {
+      this.#selectedDOMNode = null;
+      this.#expandedNodes.clear();
+      this.#currentHighlightedNode = null;
+    }
+    if (domModel.existingDocument()) {
+      this.rootDOMNode = domModel.existingDocument();
+    }
+    this.onDocumentUpdated(domModel);
+  }
+
+  #onDOMNodeChanged(): void {
+    this.requestUpdate();
+  }
+
   #onShowHTMLCommentsChange(): void {
     this.#showComments = this.#showHTMLCommentsSetting.get();
     const selectedNode = this.selectedDOMNode();
@@ -465,10 +1193,33 @@ export class DOMTreeWidget extends UI.Widget.Widget {
 
   selectDOMNode(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet|null, focus?: boolean): void {
     if (node instanceof SDK.DOMModel.AdoptedStyleSheet) {
-      this.#viewOutput?.elementsTreeOutline?.highlightAdoptedStyleSheet(node);
-    } else {
-      this.#viewOutput?.elementsTreeOutline?.selectDOMNode(node, focus);
+      this.highlightAdoptedStyleSheet(node);
+      return;
+    }
+    this.#selectedAdoptedStyleSheet = null;
+    if (this.#view === DECLARATIVE_VIEW) {
+      if (this.#selectedDOMNode === node) {
+        return;
+      }
+      this.#selectedDOMNode = node;
+      if (node) {
+        for (let current: (SDK.DOMModel.DOMNode|null) = node.parentNode; current; current = current.parentNode) {
+          this.#expandedNodes.add(current);
+          if (!current.children() && current.childNodeCount()) {
+            void current.getChildNodes(() => {
+              this.performUpdate();
+            });
+          }
+        }
+      }
+      this.#clearHighlightedNode();
+      this.onSelectedNodeChanged(
+          {data: {node, focus: Boolean(focus)}} as
+          Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode | null, focus: boolean}>);
+      this.performUpdate();
+      return;
     }
+    this.#viewOutput?.elementsTreeOutline?.selectDOMNode(node, focus);
   }
 
   highlightNodeAttribute(node: SDK.DOMModel.DOMNode, attribute: string): void {
@@ -489,9 +1240,103 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   }
 
   selectedDOMNode(): SDK.DOMModel.DOMNode|null {
+    if (this.#view === DECLARATIVE_VIEW) {
+      return this.#selectedDOMNode;
+    }
     return this.#viewOutput.elementsTreeOutline?.selectedDOMNode() ?? null;
   }
 
+  setNodeExpanded(node: SDK.DOMModel.DOMNode, expanded: boolean): void {
+    if (this.#view === DECLARATIVE_VIEW) {
+      if (expanded) {
+        this.#expandedNodes.add(node);
+        if (!node.children() && node.childNodeCount()) {
+          void node.getChildNodes(() => {
+            this.performUpdate();
+          });
+        }
+        this.onElementExpanded();
+      } else {
+        this.#expandedNodes.delete(node);
+        this.onElementCollapsed();
+      }
+      if (!this.#currentHighlightedNode || !isAncestorOf(node, this.#currentHighlightedNode)) {
+        this.#clearHighlightedNode();
+      }
+      this.performUpdate();
+      return;
+    }
+    const treeElement = this.#viewOutput.elementsTreeOutline?.findTreeElement(node);
+    if (expanded) {
+      treeElement?.expand();
+    } else {
+      treeElement?.collapse();
+    }
+  }
+
+  isNodeExpanded(node: SDK.DOMModel.DOMNode): boolean {
+    if (this.#view === DECLARATIVE_VIEW) {
+      return this.#expandedNodes.has(node);
+    }
+    return Boolean(this.#viewOutput.elementsTreeOutline?.findTreeElement(node)?.expanded);
+  }
+
+  async expandRecursively(node: SDK.DOMModel.DOMNode, maxDepth = Number.MAX_VALUE): Promise<void> {
+    if (this.#view === DECLARATIVE_VIEW) {
+      await node.getSubtree(100, true);
+      const expand = async(n: SDK.DOMModel.DOMNode, depth: number): Promise<void> => {
+        if (depth > maxDepth) {
+          return;
+        }
+        this.#expandedNodes.add(n);
+        let children = n.children();
+        if (!children && n.childNodeCount()) {
+          children = await new Promise<SDK.DOMModel.DOMNode[]>(resolve => {
+            void n.getChildNodes(() => resolve(n.children() ?? []));
+          });
+        }
+        const pseudoElements = Array.from(n.pseudoElements().values()).flat();
+        const allChildren = [...(children ?? []), ...pseudoElements];
+        if (allChildren.length) {
+          await Promise.all(allChildren.map(child => expand(child, depth + 1)));
+        }
+      };
+      await expand(node, 0);
+      this.performUpdate();
+      return;
+    }
+    const treeElement = this.#viewOutput.elementsTreeOutline?.findTreeElement(node);
+    if (treeElement) {
+      await treeElement.expandRecursively();
+    }
+  }
+
+  collapseChildren(node: SDK.DOMModel.DOMNode): void {
+    if (this.#view === DECLARATIVE_VIEW) {
+      const collapse = (n: SDK.DOMModel.DOMNode): void => {
+        const pseudoElements = Array.from(n.pseudoElements().values()).flat();
+        const allChildren = [...(n.children() ?? []), ...pseudoElements];
+        for (const child of allChildren) {
+          this.#expandedNodes.delete(child);
+          collapse(child);
+        }
+      };
+      collapse(node);
+      this.performUpdate();
+      return;
+    }
+    const treeElement = this.#viewOutput.elementsTreeOutline?.findTreeElement(node);
+    treeElement?.collapseChildren();
+  }
+
+  showContextMenu(node: SDK.DOMModel.DOMNode, event: MouseEvent,
+                  widget?: ElementsTreeWidget): Promise<UI.ContextMenu.ContextMenu|undefined> {
+    if (!this.#enableContextMenu) {
+      return Promise.resolve(undefined);
+    }
+    return showContextMenu(this, node, event, widget);
+  }
+
   /**
    * FIXME: this is called to re-render everything from scratch, for
    * example, if global settings changed. Instead, the setting values
@@ -512,9 +1357,58 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     return this.#viewOutput.elementsTreeOutline?.findTreeElement(node) || null;
   }
 
+  #hoveredDOMNode: SDK.DOMModel.DOMNode|null = null;
+  #searchMatchNode: SDK.DOMModel.DOMNode|null = null;
+  #searchMatchQuery: string|null = null;
+  #nodeToEdit: ({node: SDK.DOMModel.DOMNode}&InitialEditState)|null = null;
+  #draggedNode: SDK.DOMModel.DOMNode|null = null;
+  #draggedNodeWasExpanded = false;
+  #dragOverNode: {node: SDK.DOMModel.DOMNode, isClosingTag: boolean}|null = null;
+
+  hoveredDOMNode(): SDK.DOMModel.DOMNode|null {
+    if (this.#view === DECLARATIVE_VIEW) {
+      return this.#hoveredDOMNode;
+    }
+    const hoveredElement = this.#viewOutput.elementsTreeOutline?.hoveredTreeElement;
+    if (hoveredElement instanceof ElementsTreeElement) {
+      return hoveredElement.node();
+    }
+    return null;
+  }
+
+  searchMatchNode(): SDK.DOMModel.DOMNode|null {
+    return this.#searchMatchNode;
+  }
+
+  searchMatchQuery(): string|null {
+    return this.#searchMatchQuery;
+  }
+
+  setHoveredNode(node: SDK.DOMModel.DOMNode|null, showInfo = true): void {
+    if (this.#hoveredDOMNode === node) {
+      return;
+    }
+    this.#hoveredDOMNode = node;
+    if (node) {
+      const treeElement = this.treeElementForNode(node);
+      const selectorList = treeElement?.isDisplayContents() ? '*' : undefined;
+      node.domModel().overlayModel().highlightInOverlay({node, selectorList}, 'all', showInfo);
+    } else {
+      SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
+    }
+    if (this.#view === DECLARATIVE_VIEW) {
+      this.performUpdate();
+    } else {
+      const treeElement = node ? this.treeElementForNode(node) : null;
+      this.#viewOutput.elementsTreeOutline?.setHoverEffect(treeElement);
+    }
+  }
+
   override performUpdate(): void {
     const firstRender = !this.#viewOutput.elementsTreeOutline;
     this.#view({
+      domTreeWidget: this,
+      rootDOMNode: this.#rootDOMNode,
       omitRootDOMNode: this.omitRootDOMNode,
       selectEnabled: this.selectEnabled,
       hideGutter: this.hideGutter,
@@ -533,6 +1427,9 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       deindentSingleNode: this.deindentSingleNode,
 
       currentHighlightedNode: this.#currentHighlightedNode,
+      hoveredNode: this.#hoveredDOMNode,
+      searchMatchNode: this.#searchMatchNode,
+      searchMatchQuery: this.#searchMatchQuery,
       selectedNode: this.selectedDOMNode(),
       onElementsTreeUpdated: this.onElementsTreeUpdated.bind(this),
       onSelectedNodeChanged: event => {
@@ -545,8 +1442,117 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       onElementExpanded: () => {
         this.#clearHighlightedNode();
       },
+      onHoverNode: (node: SDK.DOMModel.DOMNode, showInfo?: boolean) => {
+        this.setHoveredNode(node, showInfo);
+      },
+      onLeave: () => {
+        this.setHoveredNode(null);
+      },
+      onSelect: (node: SDK.DOMModel.DOMNode, selectedByUser?: boolean) => {
+        this.selectDOMNode(node, selectedByUser);
+      },
+      onExpand: (node: SDK.DOMModel.DOMNode, expanded: boolean) => {
+        this.setNodeExpanded(node, expanded);
+      },
+      onContextMenu: (node: SDK.DOMModel.DOMNode, event: MouseEvent, widget?: ElementsTreeWidget) => {
+        void this.showContextMenu(node, event, widget);
+      },
+      onToggleHideElement: (node: SDK.DOMModel.DOMNode) => {
+        this.toggleHideElement(node);
+      },
+      onKeyDown: (event: KeyboardEvent) => {
+        this.onKeyDown(event);
+      },
+      isToggledToHidden: (node: SDK.DOMModel.DOMNode) => {
+        return this.isToggledToHidden(node);
+      },
+      onDuplicateNode: (node: SDK.DOMModel.DOMNode) => {
+        this.duplicateNode(node);
+      },
+      isNodeExpanded: (node: SDK.DOMModel.DOMNode) => {
+        return this.isNodeExpanded(node);
+      },
+      isNodeInClipboard: (node: SDK.DOMModel.DOMNode) => {
+        return this.isNodeInClipboard(node);
+      },
+      onCopyOrCut: (isCut: boolean, event: Event) => {
+        this.onCopyOrCut(isCut, event);
+      },
+      onPaste: (event: Event) => {
+        this.onPaste(event);
+      },
+      onSelectNodeAfterEdit:
+          (wasExpanded: boolean, error: string|null, newNode: SDK.DOMModel.DOMNode|null, moveDirection?: string) => {
+            this.selectNodeAfterEdit(wasExpanded, error, newNode, moveDirection);
+          },
+      nodeToEdit: this.#nodeToEdit,
+      onInitialEditCompleted: () => {
+        this.#nodeToEdit = null;
+      },
+      dragOverNode: this.#dragOverNode,
+      isValidDragSource: (node: SDK.DOMModel.DOMNode) => this.isValidDragSource(node),
+      onDragStart: (node: SDK.DOMModel.DOMNode, event: DragEvent, textContent?: string) =>
+          this.onDragStart(node, event, textContent),
+      onDragOver: (node: SDK.DOMModel.DOMNode, isClosingTag: boolean, event: DragEvent) =>
+          this.onDragOver(node, isClosingTag, event),
+      onDragLeave: (event: DragEvent) => this.onDragLeave(event),
+      onDrop: (node: SDK.DOMModel.DOMNode, isClosingTag: boolean, event: DragEvent) =>
+          this.onDrop(node, isClosingTag, event),
+      onDragEnd: (event: DragEvent) => this.onDragEnd(event),
+      getTopLayerShortcuts: (doc: SDK.DOMModel.DOMDocument) => this.topLayerShortcuts(doc),
+      isTopLayerExpanded: (doc: SDK.DOMModel.DOMDocument) => this.isTopLayerExpanded(doc),
+      onToggleTopLayerExpanded: (doc: SDK.DOMModel.DOMDocument, expanded: boolean) =>
+          this.setTopLayerExpanded(doc, expanded),
+      onSelectTopLayerContainer: (_doc: SDK.DOMModel.DOMDocument) => {
+        this.#selectedTopLayerShortcut = null;
+        this.selectDOMNode(null);
+        this.performUpdate();
+      },
+      isTopLayerShortcutExpanded: (shortcut: SDK.DOMModel.DOMNodeShortcut) => this.isTopLayerShortcutExpanded(shortcut),
+      onToggleTopLayerShortcutExpanded: (shortcut: SDK.DOMModel.DOMNodeShortcut, expanded: boolean) =>
+          this.setTopLayerShortcutExpanded(shortcut, expanded),
+      selectedTopLayerShortcut: this.#selectedTopLayerShortcut,
+      onSelectTopLayerShortcut: (shortcut: SDK.DOMModel.DOMNodeShortcut) => {
+        this.#selectedTopLayerShortcut = shortcut;
+        this.selectDOMNode(null);
+        shortcut.deferredNode.highlight();
+        shortcut.deferredNode.resolve(node => {
+          if (node) {
+            this.selectDOMNode(node, true);
+          }
+        });
+        this.performUpdate();
+      },
+      onRevealTopLayerShortcut: (shortcut: SDK.DOMModel.DOMNodeShortcut) => {
+        shortcut.deferredNode.resolve(node => {
+          if (node) {
+            this.selectDOMNode(node, true);
+            node.highlight();
+          }
+        });
+      },
+      isAdoptedStyleSheetsExpanded: (node: SDK.DOMModel.DOMNode) => this.isAdoptedStyleSheetsExpanded(node),
+      onToggleAdoptedStyleSheetsExpanded: (node: SDK.DOMModel.DOMNode, expanded: boolean) =>
+          this.setAdoptedStyleSheetsExpanded(node, expanded),
+      onSelectAdoptedStyleSheets: (_node: SDK.DOMModel.DOMNode) => {
+        this.#selectedAdoptedStyleSheet = null;
+        this.selectDOMNode(null);
+        this.performUpdate();
+      },
+      isAdoptedStyleSheetExpanded: (sheet: SDK.DOMModel.AdoptedStyleSheet) => this.isAdoptedStyleSheetExpanded(sheet),
+      onToggleAdoptedStyleSheetExpanded: (sheet: SDK.DOMModel.AdoptedStyleSheet, expanded: boolean) =>
+          this.setAdoptedStyleSheetExpanded(sheet, expanded),
+      selectedAdoptedStyleSheet: this.#selectedAdoptedStyleSheet,
+      onSelectAdoptedStyleSheet: (sheet: SDK.DOMModel.AdoptedStyleSheet) => {
+        this.#selectedAdoptedStyleSheet = sheet;
+        this.selectDOMNode(null);
+        this.performUpdate();
+      },
     },
                this.#viewOutput, this.contentElement);
+    if (this.#viewOutput.elementsTreeOutline) {
+      this.#viewOutput.elementsTreeOutline.domTreeWidget = this;
+    }
     if (firstRender && this.#viewOutput.elementsTreeOutline) {
       this.#viewOutput.elementsTreeOutline.addEventListener(ElementsTreeOutline.Events.ShowAllRows, () => {
         this.maxRows = undefined;
@@ -555,6 +1561,37 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   }
 
   modelAdded(domModel: SDK.DOMModel.DOMModel): void {
+    if (this.#view === DECLARATIVE_VIEW) {
+      if (!this.#wiredDOMModels.has(domModel)) {
+        this.#wiredDOMModels.add(domModel);
+        domModel.addEventListener(SDK.DOMModel.Events.DocumentUpdated, this.#onDocumentUpdated, this);
+        domModel.addEventListener(SDK.DOMModel.Events.NodeInserted, this.#onDOMNodeChanged, this);
+        domModel.addEventListener(SDK.DOMModel.Events.NodeRemoved, this.#onDOMNodeChanged, this);
+        domModel.addEventListener(SDK.DOMModel.Events.AttrModified, this.#onDOMNodeChanged, this);
+        domModel.addEventListener(SDK.DOMModel.Events.AttrRemoved, this.#onDOMNodeChanged, this);
+        domModel.addEventListener(SDK.DOMModel.Events.CharacterDataModified, this.#onDOMNodeChanged, this);
+        domModel.addEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this.#onDOMNodeChanged, this);
+        domModel.addEventListener(SDK.DOMModel.Events.MarkersChanged, this.#onDOMNodeChanged, this);
+        domModel.addEventListener(SDK.DOMModel.Events.AdoptedStyleSheetsModified, this.#onDOMNodeChanged, this);
+        domModel.addEventListener(SDK.DOMModel.Events.TopLayerElementsChanged, this.#onTopLayerElementsChanged, this);
+      }
+      if (this.isShowing() && !domModel.parentModel() &&
+          (!this.rootDOMNode || this.rootDOMNode.domModel() !== domModel)) {
+        if (domModel.existingDocument()) {
+          this.rootDOMNode = domModel.existingDocument();
+          this.onDocumentUpdated(domModel);
+        } else {
+          void domModel.requestDocument().then(document => {
+            if (document && this.isShowing()) {
+              this.rootDOMNode = document;
+              this.onDocumentUpdated(domModel);
+            }
+          });
+        }
+      }
+      this.performUpdate();
+      return;
+    }
     this.performUpdate();
     if (!this.#viewOutput.elementsTreeOutline) {
       throw new Error('Unexpected: missing elementsTreeOutline');
@@ -564,6 +1601,24 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   }
 
   modelRemoved(domModel: SDK.DOMModel.DOMModel): void {
+    if (this.#view === DECLARATIVE_VIEW) {
+      if (this.#wiredDOMModels.has(domModel)) {
+        this.#wiredDOMModels.delete(domModel);
+        domModel.removeEventListener(SDK.DOMModel.Events.DocumentUpdated, this.#onDocumentUpdated, this);
+        domModel.removeEventListener(SDK.DOMModel.Events.NodeInserted, this.#onDOMNodeChanged, this);
+        domModel.removeEventListener(SDK.DOMModel.Events.NodeRemoved, this.#onDOMNodeChanged, this);
+        domModel.removeEventListener(SDK.DOMModel.Events.AttrModified, this.#onDOMNodeChanged, this);
+        domModel.removeEventListener(SDK.DOMModel.Events.AttrRemoved, this.#onDOMNodeChanged, this);
+        domModel.removeEventListener(SDK.DOMModel.Events.CharacterDataModified, this.#onDOMNodeChanged, this);
+        domModel.removeEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this.#onDOMNodeChanged, this);
+        domModel.removeEventListener(SDK.DOMModel.Events.MarkersChanged, this.#onDOMNodeChanged, this);
+        domModel.removeEventListener(SDK.DOMModel.Events.AdoptedStyleSheetsModified, this.#onDOMNodeChanged, this);
+        domModel.removeEventListener(SDK.DOMModel.Events.TopLayerElementsChanged, this.#onTopLayerElementsChanged,
+                                     this);
+      }
+      this.performUpdate();
+      return;
+    }
     this.#viewOutput.elementsTreeOutline?.unwireFromDOMModel(domModel);
     this.performUpdate();
   }
@@ -593,71 +1648,674 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   }
 
   highlightMatch(node: SDK.DOMModel.DOMNode, query?: string): void {
-    const treeElement = this.#viewOutput.elementsTreeOutline?.findTreeElement(node);
-    if (!treeElement) {
-      return;
-    }
-    if (query) {
-      treeElement.highlightSearchResults(query);
-    }
-    treeElement.reveal();
-    const matches = treeElement.listItemElement.getElementsByClassName(Highlighting.highlightedSearchResultClassName);
-    if (matches.length) {
-      matches[0].scrollIntoViewIfNeeded(false);
+    this.#searchMatchNode = node;
+    this.#searchMatchQuery = query ?? null;
+    if (this.selectedDOMNode() !== node) {
+      this.selectDOMNode(node, /* focus= */ false);
+    } else {
+      this.performUpdate();
     }
-    treeElement.select(/* omitFocus */ true);
   }
 
   hideMatchHighlights(node: SDK.DOMModel.DOMNode): void {
-    const treeElement = this.#viewOutput.elementsTreeOutline?.findTreeElement(node);
-    if (!treeElement) {
-      return;
+    if (this.#searchMatchNode === node) {
+      this.#searchMatchNode = null;
+      this.#searchMatchQuery = null;
+      this.performUpdate();
     }
-    treeElement.hideSearchHighlights();
   }
 
   toggleHideElement(node: SDK.DOMModel.DOMNode): void {
     void node.toggleHideElement();
   }
 
+  async removeNode(node: SDK.DOMModel.DOMNode): Promise<void> {
+    if (this.isToggledToHidden(node)) {
+      // Unhide the node before removing. This avoids inconsistent state if the node is restored via undo.
+      this.toggleHideElement(node);
+    }
+    if (node.pseudoType()) {
+      return;
+    }
+    if (!node.parentNode || node.parentNode.nodeType() === Node.DOCUMENT_NODE) {
+      return;
+    }
+    void node.removeNode();
+  }
+
   isToggledToHidden(node: SDK.DOMModel.DOMNode): boolean {
     return node.isToggledToHidden();
   }
 
-  toggleEditAsHTML(node: SDK.DOMModel.DOMNode): void {
-    this.#viewOutput.elementsTreeOutline?.toggleEditAsHTML(node);
-  }
+  #multilineEditing: MultilineEditorController|null = null;
 
-  duplicateNode(node: SDK.DOMModel.DOMNode): void {
-    node.duplicate();
+  setMultilineEditing(multilineEditing: MultilineEditorController|null): void {
+    this.#multilineEditing = multilineEditing;
   }
 
-  copyStyles(node: SDK.DOMModel.DOMNode): void {
-    void this.#viewOutput.elementsTreeOutline?.findTreeElement(node)?.copyStyles();
+  multilineEditing(): MultilineEditorController|null {
+    return this.#multilineEditing;
   }
 
-  /**
-   * FIXME: used to determine focus state, probably we can have a better
-   * way to do it.
-   */
-  empty(): boolean {
-    return !this.#viewOutput.elementsTreeOutline;
+  runPendingUpdates(): void {
+    this.#viewOutput.elementsTreeOutline?.runPendingUpdates();
+    this.performUpdate();
   }
 
-  override focus(): void {
-    super.focus();
-    this.#viewOutput.elementsTreeOutline?.focus();
+  override onResize(): void {
+    super.onResize();
+    if (this.#multilineEditing) {
+      this.#multilineEditing.resize();
+    }
   }
 
-  override wasShown(): void {
-    super.wasShown();
-    this.#visible = true;
-    this.performUpdate();
+  override willHide(): void {
+    super.willHide();
+    if (this.#multilineEditing) {
+      this.#multilineEditing.cancel();
+    }
   }
 
-  override wasHidden(): void {
-    super.wasHidden();
-    this.#visible = false;
+  toggleEditAsHTML(node: SDK.DOMModel.DOMNode, startEditing?: boolean, callback?: (() => void)): void {
+    if (node.pseudoType() || node.isShadowRoot() || node.nodeType() === Node.DOCUMENT_NODE) {
+      return;
+    }
+    const parentNode = node.parentNode;
+    const index = node.index;
+    const wasExpanded = this.isNodeExpanded(node);
+
+    const editingFinished = (success: boolean): void => {
+      if (callback) {
+        callback();
+      }
+      if (!success) {
+        return;
+      }
+
+      Badges.UserBadges.instance().recordAction(Badges.BadgeAction.DOM_ELEMENT_OR_ATTRIBUTE_EDITED);
+
+      this.runPendingUpdates();
+
+      if (index === undefined) {
+        return;
+      }
+
+      const children = parentNode?.children();
+      const newNode = children ? children[index] || parentNode : parentNode;
+      if (!newNode) {
+        return;
+      }
+
+      this.selectDOMNode(newNode, true);
+
+      if (wasExpanded) {
+        this.setNodeExpanded(newNode, true);
+      }
+    };
+
+    if (this.#multilineEditing) {
+      this.#multilineEditing.commit();
+      return;
+    }
+
+    if (startEditing === false) {
+      return;
+    }
+
+    this.#nodeToEdit = {
+      node,
+      isEditAsHTML: true,
+      editAsHTMLCallback: editingFinished,
+    };
+    this.performUpdate();
+  }
+
+  duplicateNode(node: SDK.DOMModel.DOMNode): void {
+    node.duplicate();
+  }
+
+  nodeBeingDragged(): SDK.DOMModel.DOMNode|null {
+    return this.#draggedNode;
+  }
+
+  dragOverNode(): {node: SDK.DOMModel.DOMNode, isClosingTag: boolean}|null {
+    return this.#dragOverNode;
+  }
+
+  isValidDragSource(node: SDK.DOMModel.DOMNode): boolean {
+    if (this.disableEdits) {
+      return false;
+    }
+    if (!node.parentNode || node.parentNode.nodeType() !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const nodeName = node.nodeName();
+    if (nodeName === 'BODY' || nodeName === 'HEAD') {
+      return false;
+    }
+    return true;
+  }
+
+  isValidDragTarget(targetNode: SDK.DOMModel.DOMNode): boolean {
+    if (!this.#draggedNode) {
+      return false;
+    }
+    if (!targetNode.parentNode || targetNode.parentNode.nodeType() !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    let current: SDK.DOMModel.DOMNode|null = targetNode;
+    while (current) {
+      if (current === this.#draggedNode) {
+        return false;
+      }
+      current = current.parentNode;
+    }
+    return true;
+  }
+
+  onDragStart(node: SDK.DOMModel.DOMNode, event: DragEvent, textContent?: string): boolean {
+    const target = (event.target as Node | null);
+    if (!target) {
+      return false;
+    }
+    const selection = target.getComponentSelection();
+    if (selection && selection.type === 'Range' && !selection.isCollapsed && selection.toString().length > 0 &&
+        target.hasSelection()) {
+      return false;
+    }
+    if (target.nodeName === 'A') {
+      return false;
+    }
+    if (!this.isValidDragSource(node)) {
+      return false;
+    }
+    this.#draggedNode = node;
+    this.#draggedNodeWasExpanded = this.isNodeExpanded(node);
+
+    if (event.dataTransfer) {
+      const text = textContent ?? node.nodeName().toLowerCase();
+      event.dataTransfer.setData('text/plain', text.replace(/\u200b/g, ''));
+      event.dataTransfer.effectAllowed = 'copyMove';
+    }
+
+    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
+    return true;
+  }
+
+  onDragOver(node: SDK.DOMModel.DOMNode, isClosingTag: boolean, event: DragEvent): boolean {
+    if (!this.#draggedNode) {
+      return false;
+    }
+    if (!this.isValidDragTarget(node)) {
+      return false;
+    }
+    event.preventDefault();
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = 'move';
+    }
+    if (this.#dragOverNode?.node !== node || this.#dragOverNode?.isClosingTag !== isClosingTag) {
+      this.#dragOverNode = {node, isClosingTag};
+      if (this.#view === DECLARATIVE_VIEW) {
+        this.performUpdate();
+      }
+    }
+    return true;
+  }
+
+  onDragLeave(event: DragEvent): void {
+    event.preventDefault();
+    if (this.#dragOverNode) {
+      this.#dragOverNode = null;
+      if (this.#view === DECLARATIVE_VIEW) {
+        this.performUpdate();
+      }
+    }
+  }
+
+  onDrop(node: SDK.DOMModel.DOMNode, isClosingTag: boolean, event: DragEvent): void {
+    event.preventDefault();
+    if (!this.#draggedNode) {
+      return;
+    }
+    this.moveNode(this.#draggedNode, node, isClosingTag);
+    this.#draggedNode = null;
+    this.#dragOverNode = null;
+    if (this.#view === DECLARATIVE_VIEW) {
+      this.performUpdate();
+    }
+  }
+
+  onDragEnd(event: DragEvent): void {
+    event.preventDefault();
+    this.#draggedNode = null;
+    this.#dragOverNode = null;
+    if (this.#view === DECLARATIVE_VIEW) {
+      this.performUpdate();
+    }
+  }
+
+  moveNode(draggedNode: SDK.DOMModel.DOMNode, targetNode: SDK.DOMModel.DOMNode, isClosingTag: boolean): void {
+    let parentNode: SDK.DOMModel.DOMNode|null;
+    let anchorNode: SDK.DOMModel.DOMNode|null;
+    if (isClosingTag) {
+      // Drop onto closing tag -> insert as last child.
+      parentNode = targetNode;
+      anchorNode = null;
+    } else {
+      parentNode = targetNode.parentNode;
+      anchorNode = targetNode;
+    }
+    if (!parentNode) {
+      return;
+    }
+    const wasExpanded = this.#draggedNodeWasExpanded;
+    draggedNode.moveTo(parentNode, anchorNode,
+                       (error, newNode) => this.selectNodeAfterEdit(wasExpanded, error, newNode));
+  }
+
+  selectNodeAfterEdit(wasExpanded: boolean, error: string|null, newNode: SDK.DOMModel.DOMNode|null,
+                      moveDirection?: string): void {
+    if (error || !newNode) {
+      return;
+    }
+    this.selectDOMNode(newNode, /* selectedByUser= */ true);
+    if (wasExpanded) {
+      this.setNodeExpanded(newNode, true);
+    }
+    if (moveDirection) {
+      if (newNode.nodeType() === Node.PROCESSING_INSTRUCTION_NODE) {
+        this.#nodeToEdit = {node: newNode, isProcessingInstruction: true};
+      } else if (moveDirection !== 'forward') {
+        this.#nodeToEdit = {node: newNode, isNewAttribute: true};
+      } else {
+        const attributes = newNode.attributes();
+        if (attributes.length > 0) {
+          this.#nodeToEdit = {node: newNode, attributeName: attributes[0].name};
+        } else {
+          this.#nodeToEdit = {node: newNode, isNewAttribute: true};
+        }
+      }
+      this.performUpdate();
+    }
+  }
+
+  topLayerShortcuts(document: SDK.DOMModel.DOMDocument): SDK.DOMModel.DOMNodeShortcut[] {
+    return this.#topLayerShortcutsByDocument.get(document) ?? [];
+  }
+
+  isTopLayerExpanded(document: SDK.DOMModel.DOMDocument): boolean {
+    return this.#topLayerContainerExpandedByDocument.get(document) ?? false;
+  }
+
+  setTopLayerExpanded(document: SDK.DOMModel.DOMDocument, expanded: boolean): void {
+    this.#topLayerContainerExpandedByDocument.set(document, expanded);
+    this.performUpdate();
+  }
+
+  isTopLayerShortcutExpanded(shortcut: SDK.DOMModel.DOMNodeShortcut): boolean {
+    return this.#topLayerShortcutExpanded.get(shortcut) ?? false;
+  }
+
+  setTopLayerShortcutExpanded(shortcut: SDK.DOMModel.DOMNodeShortcut, expanded: boolean): void {
+    this.#topLayerShortcutExpanded.set(shortcut, expanded);
+    this.performUpdate();
+  }
+
+  #onTopLayerElementsChanged(
+      event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.EventTypes['TopLayerElementsChanged']>): void {
+    this.#topLayerShortcutsByDocument.set(event.data.document, event.data.documentShortcuts);
+    this.performUpdate();
+  }
+
+  revealInTopLayer(node: SDK.DOMModel.DOMNode): void {
+    const document = node.ownerDocument;
+    if (!document) {
+      return;
+    }
+    if (this.#viewOutput.elementsTreeOutline) {
+      this.#viewOutput.elementsTreeOutline.revealInTopLayer(node);
+      return;
+    }
+    const shortcuts = this.topLayerShortcuts(document);
+    const findShortcut = (list: SDK.DOMModel.DOMNodeShortcut[]): SDK.DOMModel.DOMNodeShortcut|null => {
+      for (const sc of list) {
+        if (sc.deferredNode.backendNodeId() === node.backendNodeId()) {
+          return sc;
+        }
+        const found = findShortcut(sc.childShortcuts);
+        if (found) {
+          return found;
+        }
+      }
+      return null;
+    };
+    const shortcut = findShortcut(shortcuts);
+    if (shortcut) {
+      this.#topLayerContainerExpandedByDocument.set(document, true);
+      this.#selectedTopLayerShortcut = shortcut;
+      this.performUpdate();
+    }
+  }
+
+  isAdoptedStyleSheetsExpanded(node: SDK.DOMModel.DOMNode): boolean {
+    return this.#adoptedStyleSheetsExpandedByNode.get(node) ?? false;
+  }
+
+  setAdoptedStyleSheetsExpanded(node: SDK.DOMModel.DOMNode, expanded: boolean): void {
+    this.#adoptedStyleSheetsExpandedByNode.set(node, expanded);
+    this.performUpdate();
+  }
+
+  isAdoptedStyleSheetExpanded(sheet: SDK.DOMModel.AdoptedStyleSheet): boolean {
+    return this.#adoptedStyleSheetExpanded.get(sheet) ?? false;
+  }
+
+  setAdoptedStyleSheetExpanded(sheet: SDK.DOMModel.AdoptedStyleSheet, expanded: boolean): void {
+    this.#adoptedStyleSheetExpanded.set(sheet, expanded);
+    this.performUpdate();
+  }
+
+  highlightAdoptedStyleSheet(adoptedStyleSheet: SDK.DOMModel.AdoptedStyleSheet): void {
+    if (this.#viewOutput.elementsTreeOutline) {
+      this.#viewOutput.elementsTreeOutline.highlightAdoptedStyleSheet(adoptedStyleSheet);
+      return;
+    }
+    const parent = adoptedStyleSheet.parent;
+    if (!parent) {
+      return;
+    }
+    for (let current: (SDK.DOMModel.DOMNode|null) = parent; current; current = current.parentNode) {
+      this.#expandedNodes.add(current);
+    }
+    this.setAdoptedStyleSheetsExpanded(parent, true);
+    this.#selectedAdoptedStyleSheet = adoptedStyleSheet;
+    this.selectDOMNode(null);
+    this.performUpdate();
+  }
+
+  startEditing(node: SDK.DOMModel.DOMNode): void {
+    if (UI.UIUtils.isEditing()) {
+      return;
+    }
+    const nodeType = node.nodeType();
+    if (nodeType === Node.ELEMENT_NODE) {
+      if (node.isShadowRoot() || node.ancestorUserAgentShadowRoot()) {
+        return;
+      }
+      const attributes = node.attributes();
+      if (attributes.length > 0) {
+        this.#nodeToEdit = {node, attributeName: attributes[0].name};
+      } else {
+        this.#nodeToEdit = {node, isNewAttribute: true};
+      }
+      this.performUpdate();
+    } else if (nodeType === Node.TEXT_NODE) {
+      this.#nodeToEdit = {node, isTextNode: true};
+      this.performUpdate();
+    } else if (nodeType === Node.PROCESSING_INSTRUCTION_NODE) {
+      this.#nodeToEdit = {node, isProcessingInstruction: true};
+      this.performUpdate();
+    }
+  }
+
+  onKeyDown(event: KeyboardEvent): boolean {
+    if (UI.UIUtils.isEditing()) {
+      return false;
+    }
+    const node = this.selectedDOMNode();
+    if (!node) {
+      return false;
+    }
+
+    if (UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(event) && node.parentNode) {
+      const wasExpanded = this.isNodeExpanded(node);
+      if (event.key === 'ArrowUp' && node.previousSibling) {
+        node.moveTo(node.parentNode, node.previousSibling, (error, newNode) => {
+          this.selectNodeAfterEdit(wasExpanded, error, newNode);
+        });
+        event.consume(true);
+        return true;
+      }
+      if (event.key === 'ArrowDown' && node.nextSibling) {
+        node.moveTo(node.parentNode, node.nextSibling.nextSibling, (error, newNode) => {
+          this.selectNodeAfterEdit(wasExpanded, error, newNode);
+        });
+        event.consume(true);
+        return true;
+      }
+    }
+
+    if (event.key === 'Enter') {
+      this.startEditing(node);
+      event.consume(true);
+      return true;
+    }
+
+    if (event.key === 'F2') {
+      this.toggleEditAsHTML(node);
+      event.consume(true);
+      return true;
+    }
+
+    if (event.key === 'Delete' || event.key === 'Backspace') {
+      void this.removeNode(node);
+      event.consume(true);
+      return true;
+    }
+
+    if (event.key === 'h' || event.key === 'H') {
+      this.toggleHideElement(node);
+      event.consume(true);
+      return true;
+    }
+
+    return false;
+  }
+
+  #clipboardData: ClipboardData|null = null;
+
+  clipboardData(): ClipboardData|null {
+    return this.#clipboardData;
+  }
+
+  setClipboardData(data: ClipboardData|null): void {
+    if (this.#clipboardData) {
+      const prevTreeElement = this.#viewOutput.elementsTreeOutline?.findTreeElement(this.#clipboardData.node);
+      if (prevTreeElement) {
+        prevTreeElement.setInClipboard(false);
+      }
+      this.#clipboardData = null;
+    }
+
+    if (data) {
+      const treeElement = this.#viewOutput.elementsTreeOutline?.findTreeElement(data.node);
+      if (treeElement) {
+        treeElement.setInClipboard(true);
+      }
+      this.#clipboardData = data;
+    }
+    this.requestUpdate();
+  }
+
+  resetClipboardIfNeeded(removedNode: SDK.DOMModel.DOMNode): void {
+    if (this.#clipboardData?.node === removedNode) {
+      this.setClipboardData(null);
+    }
+  }
+
+  isNodeInClipboard(node: SDK.DOMModel.DOMNode): boolean {
+    return Boolean(this.#clipboardData?.isCut && this.#clipboardData?.node === node);
+  }
+
+  async copyOuterHTML(node: SDK.DOMModel.DOMNode, includeShadowRoots = false): Promise<void> {
+    const outerHTML = await node.getOuterHTML(includeShadowRoots);
+    if (outerHTML !== null) {
+      UI.UIUtils.copyTextToClipboard(outerHTML);
+    }
+  }
+
+  copyCSSPath(node: SDK.DOMModel.DOMNode): void {
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(cssPath(node, true));
+  }
+
+  copyJSPath(node: SDK.DOMModel.DOMNode): void {
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(jsPath(node, true));
+  }
+
+  copyXPath(node: SDK.DOMModel.DOMNode, optimized = true): void {
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(xPath(node, optimized));
+  }
+
+  copyFullXPath(node: SDK.DOMModel.DOMNode): void {
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(xPath(node, false));
+  }
+
+  async copyStyles(node: SDK.DOMModel.DOMNode): Promise<void> {
+    const cssModel = node.domModel().cssModel();
+    const cascade = await cssModel.cachedMatchedCascadeForNode(node);
+    if (!cascade) {
+      return;
+    }
+
+    const indent = Common.Settings.Settings.instance().moduleSetting('text-editor-indent').get();
+    const lines: string[] = [];
+    for (const style of cascade.nodeStyles().reverse()) {
+      for (const property of style.leadingProperties()) {
+        if (!property.parsedOk || property.disabled || !property.activeInStyle() || property.implicit) {
+          continue;
+        }
+        if (cascade.isInherited(style) && !SDK.CSSMetadata.cssMetadata().isPropertyInherited(property.name)) {
+          continue;
+        }
+        if (style.parentRule?.isUserAgent()) {
+          continue;
+        }
+        if (cascade.propertyState(property) !== SDK.CSSMatchedStyles.PropertyState.ACTIVE) {
+          continue;
+        }
+        lines.push(`${indent}${property.name}: ${property.value};`);
+      }
+    }
+
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(lines.join('\n'));
+  }
+
+  performCopyOrCut(isCut: boolean, node: SDK.DOMModel.DOMNode|null, includeShadowRoots = false): void {
+    if (!node) {
+      return;
+    }
+    if (isCut && (node.isShadowRoot() || node.ancestorUserAgentShadowRoot())) {
+      return;
+    }
+    void this.copyOuterHTML(node, includeShadowRoots);
+    this.setClipboardData({node, isCut});
+  }
+
+  canPaste(targetNode: SDK.DOMModel.DOMNode): boolean {
+    if (targetNode.isShadowRoot() || targetNode.ancestorUserAgentShadowRoot()) {
+      return false;
+    }
+
+    if (!this.#clipboardData) {
+      return false;
+    }
+
+    const node = this.#clipboardData.node;
+    if (this.#clipboardData.isCut && (node === targetNode || node.isAncestor(targetNode))) {
+      return false;
+    }
+
+    if (targetNode.domModel() !== node.domModel()) {
+      return false;
+    }
+    return true;
+  }
+
+  pasteNode(targetNode: SDK.DOMModel.DOMNode): void {
+    if (!this.canPaste(targetNode) || !this.#clipboardData) {
+      return;
+    }
+    const wasExpanded = this.isNodeExpanded(this.#clipboardData.node);
+    if (this.#clipboardData.isCut) {
+      this.#clipboardData.node.moveTo(targetNode, null, this.selectNodeAfterEdit.bind(this, wasExpanded));
+      this.setClipboardData(null);
+    } else {
+      this.#clipboardData.node.copyTo(targetNode, null, this.selectNodeAfterEdit.bind(this, wasExpanded));
+    }
+  }
+
+  onCopyOrCut(isCut: boolean, event: Event): void {
+    this.setClipboardData(null);
+    // @ts-expect-error this bound in the main entry point
+    const originalEvent = (event as CustomEvent)['original'] || event;
+
+    if (!originalEvent?.target) {
+      return;
+    }
+
+    // Don't prevent the normal copy if the user has a selection.
+    if (originalEvent.target instanceof Node && (originalEvent.target as HTMLElement).hasSelection?.()) {
+      return;
+    }
+
+    // Do not interfere with text editing.
+    if (UI.UIUtils.isEditing()) {
+      return;
+    }
+
+    const targetNode = this.selectedDOMNode();
+    if (!targetNode) {
+      return;
+    }
+
+    if (originalEvent.clipboardData) {
+      originalEvent.clipboardData.clearData();
+    }
+    (event as {handled?: boolean}).handled = true;
+
+    this.performCopyOrCut(isCut, targetNode);
+  }
+
+  onPaste(event: Event): void {
+    // Do not interfere with text editing.
+    if (UI.UIUtils.isEditing()) {
+      return;
+    }
+
+    const targetNode = this.selectedDOMNode();
+    if (!targetNode || !this.canPaste(targetNode)) {
+      return;
+    }
+
+    (event as {handled?: boolean}).handled = true;
+    this.pasteNode(targetNode);
+  }
+
+  /**
+   * FIXME: used to determine focus state, probably we can have a better
+   * way to do it.
+   */
+  empty(): boolean {
+    if (this.#view === DECLARATIVE_VIEW) {
+      return !this.#rootDOMNode;
+    }
+    return !this.#viewOutput.elementsTreeOutline;
+  }
+
+  override focus(): void {
+    super.focus();
+    this.#viewOutput.elementsTreeOutline?.focus();
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    this.#visible = true;
+    this.performUpdate();
+  }
+
+  override wasHidden(): void {
+    super.wasHidden();
+    this.#visible = false;
     this.#viewOutput.imagePreviewPopover?.hide();
     this.performUpdate();
   }
@@ -681,6 +2339,13 @@ export class DOMTreeWidget extends UI.Widget.Widget {
         if (domModel.existingDocument()) {
           this.rootDOMNode = domModel.existingDocument();
           this.onDocumentUpdated(domModel);
+        } else if (this.#view === DECLARATIVE_VIEW) {
+          void domModel.requestDocument().then(document => {
+            if (document && this.isShowing()) {
+              this.rootDOMNode = document;
+              this.onDocumentUpdated(domModel);
+            }
+          });
         } else {
           void domModel.requestDocument();
         }
@@ -703,19 +2368,13 @@ export class ElementsTreeOutline extends
   private visible: boolean;
   private updateRecords: Map<SDK.DOMModel.DOMNode, Elements.ElementUpdateRecord.ElementUpdateRecord>;
   private treeElementsBeingUpdated: Set<ElementsTreeElement>;
-  decoratorExtensions: MarkerDecoratorRegistration[]|null;
-  private multilineEditing?: MultilineEditorController|null;
   private visibleWidthInternal?: number;
-  private clipboardNodeData?: ClipboardData;
   private isXMLMimeTypeInternal?: boolean|null;
   suppressRevealAndSelect = false;
   private previousHoveredElement?: UI.TreeOutline.TreeElement;
-  private treeElementBeingDragged?: ElementsTreeElement;
   private dragOverTreeElement?: ElementsTreeElement;
   private updateModifiedNodesTimeout?: number;
   #topLayerContainerByDocument = new WeakMap<SDK.DOMModel.DOMDocument, TopLayerContainer>();
-  #issuesManager?: IssuesManager.IssuesManager.IssuesManager;
-  #nodeElementToIssues = new Map<Element, IssuesManager.Issue.Issue[]>();
   maxTreeDepth?: number;
   enableContextMenu: boolean;
   showComments: boolean;
@@ -724,18 +2383,19 @@ export class ElementsTreeOutline extends
   expandRoot: boolean;
   #maxRowsShown?: number;
   #showAllButton?: HTMLElement;
+  domTreeWidget: DOMTreeWidget|null = null;
 
-  constructor(
-      omitRootDOMNode?: boolean, selectEnabled?: boolean, hideGutter?: boolean, maxTreeDepth?: number,
-      enableContextMenu?: boolean, showComments?: boolean, showAIButton?: boolean, disableEdits?: boolean,
-      expandRoot?: boolean) {
-    super();
+  get hoveredTreeElement(): UI.TreeOutline.TreeElement|null {
+    return this.previousHoveredElement ?? null;
+  }
 
-    this.#issuesManager = IssuesManager.IssuesManager.IssuesManager.instance();
-    this.#issuesManager.addEventListener(IssuesManager.IssuesManager.Events.ISSUE_ADDED, this.#onIssueAdded, this);
-    this.#issuesManager.addEventListener(
-        IssuesManager.IssuesManager.Events.ISSUE_HIDDEN_STATUS_UPDATED, this.#onIssueHiddenStatusUpdated, this);
+  constructor(omitRootDOMNode?: boolean, selectEnabled?: boolean, hideGutter?: boolean, maxTreeDepth?: number,
+              enableContextMenu?: boolean, showComments?: boolean, showAIButton?: boolean, disableEdits?: boolean,
+              expandRoot?: boolean, domTreeWidget?: DOMTreeWidget|null) {
+    super();
 
+    this.domTreeWidget = domTreeWidget ?? null;
+    this.renderSelection = true;
     this.treeElementByNode = new WeakMap();
     const shadowContainer = document.createElement('div');
     this.shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(
@@ -756,120 +2416,34 @@ export class ElementsTreeOutline extends
     this.elementInternal.addEventListener('mousedown', this.onmousedown.bind(this), false);
     this.elementInternal.addEventListener('mousemove', this.onmousemove.bind(this), false);
     this.elementInternal.addEventListener('mouseleave', this.onmouseleave.bind(this), false);
-    this.elementInternal.addEventListener('keydown', this.onKeyDown.bind(this), false);
 
     if (!this.disableEdits) {
       this.elementInternal.addEventListener('dragstart', this.ondragstart.bind(this), false);
       this.elementInternal.addEventListener('dragover', this.ondragover.bind(this), false);
       this.elementInternal.addEventListener('dragleave', this.ondragleave.bind(this), false);
       this.elementInternal.addEventListener('drop', this.ondrop.bind(this), false);
-      this.elementInternal.addEventListener('dragend', this.ondragend.bind(this), false);
-      this.elementInternal.addEventListener('clipboard-beforecopy', this.onBeforeCopy.bind(this), false);
-      this.elementInternal.addEventListener('clipboard-copy', this.onCopyOrCut.bind(this, false), false);
-      this.elementInternal.addEventListener('clipboard-cut', this.onCopyOrCut.bind(this, true), false);
-      this.elementInternal.addEventListener('clipboard-paste', this.onPaste.bind(this), false);
-    }
-
-    outlineDisclosureElement.appendChild(this.elementInternal);
-    this.element = shadowContainer;
-    this.contentElement.setAttribute('jslog', `${VisualLogging.tree('elements')}`);
-
-    this.includeRootDOMNode = !omitRootDOMNode;
-    this.selectEnabled = selectEnabled;
-    this.rootDOMNodeInternal = null;
-    this.selectedDOMNodeInternal = null;
-
-    this.visible = false;
-
-    this.updateRecords = new Map();
-    this.treeElementsBeingUpdated = new Set();
-
-    this.decoratorExtensions = null;
-    this.setUseLightSelectionColor(true);
-  }
-
-  static forDOMModel(domModel: SDK.DOMModel.DOMModel): ElementsTreeOutline|null {
-    return elementsTreeOutlineByDOMModel.get(domModel) || null;
-  }
-
-  #onIssueAdded(event: Common.EventTarget.EventTargetEvent<IssuesManager.IssuesManager.IssueAddedEvent>): void {
-    void this.#addTreeElementIssue(event.data.issue);
-  }
-
-  #onIssueHiddenStatusUpdated(
-      event: Common.EventTarget.EventTargetEvent<IssuesManager.IssuesManager.IssueHiddenStatusUpdatedEvent>): void {
-    const issue = event.data.issue;
-    if (!issue) {
-      return;
-    }
-
-    if (issue.isHidden()) {
-      void this.#removeTreeElementIssue(issue);
-      return;
-    }
-    void this.#addTreeElementIssue(issue);
-  }
-
-  #addAllElementIssues(): void {
-    if (!this.#issuesManager) {
-      return;
-    }
-    for (const issue of this.#issuesManager.issues()) {
-      void this.#addTreeElementIssue(issue);
-    }
-  }
-
-  async #addTreeElementIssue(issue: IssuesManager.Issue.Issue): Promise<void> {
-    if (issue.isHidden()) {
-      return;
-    }
-
-    const elementIssueDetails = getElementIssueDetails(issue);
-    if (!elementIssueDetails) {
-      return;
-    }
-    const {nodeId} = elementIssueDetails;
-    if (!this.rootDOMNode || !nodeId) {
-      return;
-    }
-    const deferredDOMNode = new SDK.DOMModel.DeferredDOMNode(this.rootDOMNode.domModel().target(), nodeId);
-    const node = await deferredDOMNode.resolvePromise();
-
-    if (!node) {
-      return;
+      this.elementInternal.addEventListener('dragend', this.ondragend.bind(this), false);
     }
 
-    const treeElement = this.findTreeElement(node);
-    if (treeElement) {
-      treeElement.addIssue(issue);
-      const treeElementNodeElementsToIssues = treeElement.issuesByNodeElement;
-      // This element could be the treeElement tags name or an attribute.
-      for (const [element, issues] of treeElementNodeElementsToIssues) {
-        this.#nodeElementToIssues.set(element, issues);
-      }
-    }
-  }
+    outlineDisclosureElement.appendChild(this.elementInternal);
+    this.element = shadowContainer;
+    this.contentElement.setAttribute('jslog', `${VisualLogging.tree('elements')}`);
 
-  async #removeTreeElementIssue(issue: IssuesManager.Issue.Issue): Promise<void> {
-    const elementIssueDetails = getElementIssueDetails(issue);
-    if (!elementIssueDetails) {
-      return;
-    }
-    const {nodeId} = elementIssueDetails;
-    if (!this.rootDOMNode || !nodeId) {
-      return;
-    }
-    const deferredDOMNode = new SDK.DOMModel.DeferredDOMNode(this.rootDOMNode.domModel().target(), nodeId);
-    const node = await deferredDOMNode.resolvePromise();
+    this.includeRootDOMNode = !omitRootDOMNode;
+    this.selectEnabled = selectEnabled;
+    this.rootDOMNodeInternal = null;
+    this.selectedDOMNodeInternal = null;
 
-    if (!node) {
-      return;
-    }
+    this.visible = false;
 
-    const treeElement = this.findTreeElement(node);
-    if (treeElement) {
-      treeElement.removeIssue(issue);
-    }
+    this.updateRecords = new Map();
+    this.treeElementsBeingUpdated = new Set();
+
+    this.setUseLightSelectionColor(true);
+  }
+
+  static forDOMModel(domModel: SDK.DOMModel.DOMModel): ElementsTreeOutline|null {
+    return elementsTreeOutlineByDOMModel.get(domModel) || null;
   }
 
   deindentSingleNode(): void {
@@ -879,176 +2453,44 @@ export class ElementsTreeOutline extends
     }
   }
 
-  updateNodeElementToIssue(element: Element, issues: IssuesManager.Issue.Issue[]): void {
-    if (!issues || issues.length === 0) {
-      this.#nodeElementToIssues.delete(element);
-      return;
-    }
-    this.#nodeElementToIssues.set(element, issues);
-  }
-
-  issuesByNodeElement(element: Element): IssuesManager.Issue.Issue[]|undefined {
-    return this.#nodeElementToIssues.get(element);
-  }
-
   setWordWrap(wrap: boolean): void {
     this.elementInternal.classList.toggle('elements-tree-nowrap', !wrap);
   }
 
   setMultilineEditing(multilineEditing: MultilineEditorController|null): void {
-    this.multilineEditing = multilineEditing;
+    this.domTreeWidget?.setMultilineEditing(multilineEditing);
   }
 
   visibleWidth(): number {
-    return this.visibleWidthInternal || 0;
+    return this.domTreeWidget?.visibleWidth ?? this.visibleWidthInternal ?? 0;
   }
 
   setVisibleWidth(width: number): void {
     this.visibleWidthInternal = width;
-    if (this.multilineEditing) {
-      this.multilineEditing.resize();
-    }
   }
 
-  private setClipboardData(data: ClipboardData|null): void {
-    if (this.clipboardNodeData) {
-      const treeElement = this.findTreeElement(this.clipboardNodeData.node);
-      if (treeElement) {
-        treeElement.setInClipboard(false);
-      }
-      delete this.clipboardNodeData;
-    }
-
-    if (data) {
-      const treeElement = this.findTreeElement(data.node);
-      if (treeElement) {
-        treeElement.setInClipboard(true);
-      }
-      this.clipboardNodeData = data;
-    }
+  setClipboardData(data: ClipboardData|null): void {
+    this.domTreeWidget?.setClipboardData(data);
   }
 
   resetClipboardIfNeeded(removedNode: SDK.DOMModel.DOMNode): void {
-    if (this.clipboardNodeData?.node === removedNode) {
-      this.setClipboardData(null);
-    }
-  }
-
-  private onBeforeCopy(event: Event): void {
-    event.handled = true;
-  }
-
-  private onCopyOrCut(isCut: boolean, event: Event): void {
-    this.setClipboardData(null);
-    // @ts-expect-error this bound in the main entry point
-    const originalEvent = event['original'];
-
-    if (!originalEvent?.target) {
-      return;
-    }
-
-    // Don't prevent the normal copy if the user has a selection.
-    if (originalEvent.target instanceof Node && originalEvent.target.hasSelection()) {
-      return;
-    }
-
-    // Do not interfere with text editing.
-    if (UI.UIUtils.isEditing()) {
-      return;
-    }
-
-    const targetNode = this.selectedDOMNode();
-    if (!targetNode) {
-      return;
-    }
-
-    if (!originalEvent.clipboardData) {
-      return;
-    }
-    originalEvent.clipboardData.clearData();
-    event.handled = true;
-
-    this.performCopyOrCut(isCut, targetNode);
+    this.domTreeWidget?.resetClipboardIfNeeded(removedNode);
   }
 
   performCopyOrCut(isCut: boolean, node: SDK.DOMModel.DOMNode|null, includeShadowRoots = false): void {
-    if (!node) {
-      return;
-    }
-    if (isCut && (node.isShadowRoot() || node.ancestorUserAgentShadowRoot())) {
-      return;
-    }
-    void node.getOuterHTML(includeShadowRoots).then(outerHTML => {
-      if (outerHTML !== null) {
-        UI.UIUtils.copyTextToClipboard(outerHTML);
-      }
-    });
-    this.setClipboardData({node, isCut});
+    this.domTreeWidget?.performCopyOrCut(isCut, node, includeShadowRoots);
   }
 
   canPaste(targetNode: SDK.DOMModel.DOMNode): boolean {
-    if (targetNode.isShadowRoot() || targetNode.ancestorUserAgentShadowRoot()) {
-      return false;
-    }
-
-    if (!this.clipboardNodeData) {
-      return false;
-    }
-
-    const node = this.clipboardNodeData.node;
-    if (this.clipboardNodeData.isCut && (node === targetNode || node.isAncestor(targetNode))) {
-      return false;
-    }
-
-    if (targetNode.domModel() !== node.domModel()) {
-      return false;
-    }
-    return true;
+    return this.domTreeWidget?.canPaste(targetNode) ?? false;
   }
 
   pasteNode(targetNode: SDK.DOMModel.DOMNode): void {
-    if (this.canPaste(targetNode)) {
-      this.performPaste(targetNode);
-    }
+    this.domTreeWidget?.pasteNode(targetNode);
   }
 
   duplicateNode(targetNode: SDK.DOMModel.DOMNode): void {
-    targetNode.duplicate();
-  }
-
-  private onPaste(event: Event): void {
-    // Do not interfere with text editing.
-    if (UI.UIUtils.isEditing()) {
-      return;
-    }
-
-    const targetNode = this.selectedDOMNode();
-    if (!targetNode || !this.canPaste(targetNode)) {
-      return;
-    }
-
-    event.handled = true;
-    this.performPaste(targetNode);
-  }
-
-  private performPaste(targetNode: SDK.DOMModel.DOMNode): void {
-    if (!this.clipboardNodeData) {
-      return;
-    }
-    if (this.clipboardNodeData.isCut) {
-      this.clipboardNodeData.node.moveTo(targetNode, null, expandCallback.bind(this));
-      this.setClipboardData(null);
-    } else {
-      this.clipboardNodeData.node.copyTo(targetNode, null, expandCallback.bind(this));
-    }
-
-    function expandCallback(
-        this: ElementsTreeOutline, error: string|null, pastedNode: SDK.DOMModel.DOMNode|null): void {
-      if (error || !pastedNode) {
-        return;
-      }
-      this.selectDOMNode(pastedNode);
-    }
+    this.domTreeWidget?.duplicateNode(targetNode);
   }
 
   setVisible(visible: boolean): void {
@@ -1057,9 +2499,7 @@ export class ElementsTreeOutline extends
     }
     this.visible = visible;
     if (!this.visible) {
-      if (this.multilineEditing) {
-        this.multilineEditing.cancel();
-      }
+      this.domTreeWidget?.multilineEditing()?.cancel();
       return;
     }
 
@@ -1330,13 +2770,22 @@ export class ElementsTreeOutline extends
   }
 
   treeElementFromEventInternal(event: MouseEvent): UI.TreeOutline.TreeElement|null {
+    for (const target of event.composedPath()) {
+      if (target instanceof HTMLLIElement) {
+        const element = UI.TreeOutline.TreeElement.getTreeElementBylistItemNode(target);
+        if (element) {
+          return element;
+        }
+      }
+    }
+
     const scrollContainer = this.element.parentElement;
     if (!scrollContainer) {
       return null;
     }
 
-    const x = event.pageX;
-    const y = event.pageY;
+    const x = event.clientX;
+    const y = event.clientY;
 
     // Our list items have 1-pixel cracks between them vertically. We avoid
     // the cracks by checking slightly above and slightly below the mouse
@@ -1386,9 +2835,15 @@ export class ElementsTreeOutline extends
       return;
     }
 
+    const showInfo = !UI.KeyboardShortcut.KeyboardShortcut.eventHasEitherCtrlOrMeta(event);
+    if (this.domTreeWidget && element instanceof ElementsTreeElement) {
+      this.domTreeWidget.setHoveredNode(element.node(), showInfo);
+      return;
+    }
+
+    this.domTreeWidget?.setHoveredNode(null);
     this.setHoverEffect(element);
-    this.highlightTreeElement(
-        (element as UI.TreeOutline.TreeElement), !UI.KeyboardShortcut.KeyboardShortcut.eventHasEitherCtrlOrMeta(event));
+    this.highlightTreeElement((element as UI.TreeOutline.TreeElement), showInfo);
   }
 
   private highlightTreeElement(element: UI.TreeOutline.TreeElement, showInfo: boolean): void {
@@ -1406,131 +2861,61 @@ export class ElementsTreeOutline extends
   }
 
   private onmouseleave(_event: MouseEvent): void {
+    this.domTreeWidget?.setHoveredNode(null);
     this.setHoverEffect(null);
     SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
   }
 
   private ondragstart(event: DragEvent): boolean|undefined {
-    const node = (event.target as Node | null);
-    if (!node || node.hasSelection()) {
-      return false;
-    }
-    if (node.nodeName === 'A') {
-      return false;
-    }
-
-    const treeElement = this.validDragSourceOrTarget(this.treeElementFromEventInternal(event));
-    if (!treeElement) {
-      return false;
-    }
-
-    if (treeElement.node().nodeName() === 'BODY' || treeElement.node().nodeName() === 'HEAD') {
+    const treeElement = this.treeElementFromEventInternal(event);
+    if (!(treeElement instanceof ElementsTreeElement)) {
       return false;
     }
-
-    if (!event.dataTransfer || !treeElement.listItemElement.textContent) {
-      return;
-    }
-    event.dataTransfer.setData('text/plain', treeElement.listItemElement.textContent.replace(/\u200b/g, ''));
-    event.dataTransfer.effectAllowed = 'copyMove';
-    this.treeElementBeingDragged = treeElement;
-
-    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
-
-    return true;
+    const textContent = treeElement.widget.contentElement.textContent || treeElement.listItemElement.textContent ||
+        treeElement.node().nodeName().toLowerCase();
+    const success = this.domTreeWidget?.onDragStart(treeElement.node(), event, textContent);
+    return success;
   }
 
   private ondragover(event: DragEvent): boolean {
-    if (!this.treeElementBeingDragged) {
-      return false;
-    }
-
-    const treeElement = this.validDragSourceOrTarget(this.treeElementFromEventInternal(event));
-    if (!treeElement) {
+    const treeElement = this.treeElementFromEventInternal(event);
+    if (!(treeElement instanceof ElementsTreeElement)) {
+      this.clearDragOverTreeElementMarker();
       return false;
     }
-
-    let node: (SDK.DOMModel.DOMNode|null) = (treeElement.node() as SDK.DOMModel.DOMNode | null);
-    while (node) {
-      if (node === this.treeElementBeingDragged.nodeInternal) {
-        return false;
+    const success = this.domTreeWidget?.onDragOver(treeElement.node(), treeElement.isClosingTag(), event);
+    if (success) {
+      if (this.dragOverTreeElement !== treeElement) {
+        this.clearDragOverTreeElementMarker();
+        treeElement.listItemElement.classList.add('elements-drag-over');
+        this.dragOverTreeElement = treeElement;
       }
-      node = node.parentNode;
-    }
-
-    treeElement.listItemElement.classList.add('elements-drag-over');
-    this.dragOverTreeElement = treeElement;
-    event.preventDefault();
-    if (event.dataTransfer) {
-      event.dataTransfer.dropEffect = 'move';
+    } else {
+      this.clearDragOverTreeElementMarker();
     }
-    return false;
+    return !success;
   }
 
   private ondragleave(event: DragEvent): boolean {
     this.clearDragOverTreeElementMarker();
+    this.domTreeWidget?.onDragLeave(event);
     event.preventDefault();
     return false;
   }
 
-  private validDragSourceOrTarget(treeElement: UI.TreeOutline.TreeElement|null): ElementsTreeElement|null {
-    if (!treeElement) {
-      return null;
-    }
-
-    if (!(treeElement instanceof ElementsTreeElement)) {
-      return null;
-    }
-    const elementsTreeElement = (treeElement);
-
-    const node = elementsTreeElement.node();
-    if (!node.parentNode || node.parentNode.nodeType() !== Node.ELEMENT_NODE) {
-      return null;
-    }
-
-    return elementsTreeElement;
-  }
-
   private ondrop(event: DragEvent): void {
     event.preventDefault();
     const treeElement = this.treeElementFromEventInternal(event);
     if (treeElement instanceof ElementsTreeElement) {
-      this.doMove(treeElement);
-    }
-  }
-
-  private doMove(treeElement: ElementsTreeElement): void {
-    if (!this.treeElementBeingDragged) {
-      return;
-    }
-
-    let parentNode;
-    let anchorNode;
-
-    if (treeElement.isClosingTag()) {
-      // Drop onto closing tag -> insert as last child.
-      parentNode = treeElement.node();
-      anchorNode = null;
-    } else {
-      const dragTargetNode = treeElement.node();
-      parentNode = dragTargetNode.parentNode;
-      anchorNode = dragTargetNode;
+      this.domTreeWidget?.onDrop(treeElement.node(), treeElement.isClosingTag(), event);
     }
-
-    if (!parentNode) {
-      return;
-    }
-    const wasExpanded = this.treeElementBeingDragged.expanded;
-    this.treeElementBeingDragged.nodeInternal.moveTo(
-        parentNode, anchorNode, this.selectNodeAfterEdit.bind(this, wasExpanded));
-
-    delete this.treeElementBeingDragged;
+    this.clearDragOverTreeElementMarker();
   }
 
   private ondragend(event: DragEvent): void {
     event.preventDefault();
     this.clearDragOverTreeElementMarker();
-    delete this.treeElementBeingDragged;
+    this.domTreeWidget?.onDragEnd(event);
   }
 
   private clearDragOverTreeElementMarker(): void {
@@ -1546,83 +2931,8 @@ export class ElementsTreeOutline extends
     this.updateModifiedNodes();
   }
 
-  private onKeyDown(event: Event): void {
-    const keyboardEvent = (event as KeyboardEvent);
-    if (UI.UIUtils.isEditing()) {
-      return;
-    }
-    const node = this.selectedDOMNode();
-    if (!node) {
-      return;
-    }
-    const treeElement = this.treeElementByNode.get(node);
-    if (!treeElement) {
-      return;
-    }
-
-    if (UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(keyboardEvent) && node.parentNode) {
-      if (keyboardEvent.key === 'ArrowUp' && node.previousSibling) {
-        node.moveTo(node.parentNode, node.previousSibling, this.selectNodeAfterEdit.bind(this, treeElement.expanded));
-        keyboardEvent.consume(true);
-        return;
-      }
-      if (keyboardEvent.key === 'ArrowDown' && node.nextSibling) {
-        node.moveTo(
-            node.parentNode, node.nextSibling.nextSibling, this.selectNodeAfterEdit.bind(this, treeElement.expanded));
-        keyboardEvent.consume(true);
-        return;
-      }
-    }
-  }
-
   toggleEditAsHTML(node: SDK.DOMModel.DOMNode, startEditing?: boolean, callback?: (() => void)): void {
-    const treeElement = this.treeElementByNode.get(node);
-    if (!treeElement?.hasEditableNode()) {
-      return;
-    }
-
-    if (node.pseudoType()) {
-      return;
-    }
-
-    const parentNode = node.parentNode;
-    const index = node.index;
-    const wasExpanded = treeElement.expanded;
-
-    treeElement.toggleEditAsHTML(editingFinished.bind(this), startEditing);
-
-    function editingFinished(this: ElementsTreeOutline, success: boolean): void {
-      if (callback) {
-        callback();
-      }
-      if (!success) {
-        return;
-      }
-
-      Badges.UserBadges.instance().recordAction(Badges.BadgeAction.DOM_ELEMENT_OR_ATTRIBUTE_EDITED);
-
-      // Select it and expand if necessary. We force tree update so that it processes dom events and is up to date.
-      this.runPendingUpdates();
-
-      if (!index) {
-        return;
-      }
-
-      const children = parentNode?.children();
-      const newNode = children ? children[index] || parentNode : parentNode;
-      if (!newNode) {
-        return;
-      }
-
-      this.selectDOMNode(newNode, true);
-
-      if (wasExpanded) {
-        const newTreeItem = this.findTreeElement(newNode);
-        if (newTreeItem) {
-          newTreeItem.expand();
-        }
-      }
-    }
+    this.domTreeWidget?.toggleEditAsHTML(node, startEditing, callback);
   }
 
   selectNodeAfterEdit(wasExpanded: boolean, error: string|null, newNode: SDK.DOMModel.DOMNode|null): ElementsTreeElement
@@ -1660,7 +2970,7 @@ export class ElementsTreeOutline extends
   private reset(): void {
     this.rootDOMNode = null;
     this.selectDOMNode(null, false);
-    delete this.clipboardNodeData;
+    this.setClipboardData(null);
     SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
     this.updateRecords.clear();
   }
@@ -1720,7 +3030,6 @@ export class ElementsTreeOutline extends
     this.reset();
     if (domModel.existingDocument()) {
       this.rootDOMNode = domModel.existingDocument();
-      this.#addAllElementIssues();
     }
   }