chrome-devtools-frontend 1.0.1697595 → 1.0.1698733

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -39,6 +39,7 @@ 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 ChangeTracker from '../../models/change_tracker/change_tracker.js';
 import * as Elements from '../../models/elements/elements.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
@@ -60,6 +61,7 @@ import {showContextMenu} from './DOMTreeContextMenu.js';
 import {getElementIssueDetails} from './ElementIssueUtils.js';
 import {
   adornerRef,
+  buildChangeSelector,
   ElementsTreeElement,
   ElementsTreeWidget,
   ForbiddenClosingTagElements,
@@ -73,7 +75,7 @@ import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {ShortcutTreeElement} from './ShortcutTreeElement.js';
 import {TopLayerContainer} from './TopLayerContainer.js';
 
-const {html, nothing, render, Directives: {classMap, styleMap}} = Lit;
+const {html, nothing, render, Directives: {classMap, repeat, styleMap}} = Lit;
 
 const UIStrings = {
   /**
@@ -148,7 +150,7 @@ interface ViewInput {
   onClearMaxRows?: () => void;
   onHoverNode?: (node: SDK.DOMModel.DOMNode|null, showInfo?: boolean, isClosingTag?: boolean) => void;
   onLeave?: () => void;
-  onToggleHideElement?: (node: SDK.DOMModel.DOMNode) => void;
+  onToggleHideElement?: (node: SDK.DOMModel.DOMNode) => Promise<void>;
   onKeyDown?: (event: KeyboardEvent) => void;
   isToggledToHidden?: (node: SDK.DOMModel.DOMNode) => boolean;
   onDuplicateNode?: (node: SDK.DOMModel.DOMNode) => void;
@@ -521,6 +523,13 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
   }
 
   const on = Lit.Directive.directive(Lit.CustomDirectives.InterceptBindingDirective);
+  const treeItemJslog = (context?: string, drag?: boolean): ReturnType<typeof VisualLogging.treeItem> =>
+      VisualLogging.treeItem(context).parent('elementsTreeOutline').track({
+        keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Backspace|Delete|Enter|Space|Home|End',
+        resize: true,
+        ...(drag ? {drag: true} : {}),
+        click: true,
+      });
 
   const renderShortcut = (shortcut: SDK.DOMModel.DOMNodeShortcut, shortcutDepth: number): Lit.LitTemplate => {
     const hasShortcutChildren = shortcut.childShortcuts.length > 0;
@@ -556,12 +565,11 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
           ?open=${isShortcutExpanded}
           class="elements-tree-shortcut"
           style=${styleMap({'--indent': `${computeLeftIndent(shortcutDepth, hasShortcutChildren)}px`})}
-          @select=${onShortcutSelect}
-          @expand=${onShortcutExpand}
+          @select=${on(onShortcutSelect)}
+          @expand=${on(onShortcutExpand)}
           @mousemove=${on(onShortcutMouseMove)}
           @mouseleave=${on(onShortcutMouseLeave)}
-          jslog=${VisualLogging.treeItem().parent('elementsTreeOutline')}>
-        <div class="selection fill"></div>
+          jslog=${treeItemJslog()}>
         <span class="elements-tree-shortcut-title">\u21AA ${title}</span>
         <devtools-adorner
             .name=${ElementsComponents.AdornerManager.RegisteredAdorners.REVEAL}
@@ -581,9 +589,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
         </devtools-adorner>
         ${hasShortcutChildren ? html`
           <ul role="group">
-            ${UI.TreeOutline.ifExpanded(html`
-              ${shortcut.childShortcuts.map(child => renderShortcut(child, shortcutDepth + 1))}
-            `)}
+            ${shortcut.childShortcuts.map(child => renderShortcut(child, shortcutDepth + 1))}
           </ul>
         ` : nothing}
       </li>
@@ -611,15 +617,12 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
               ?open=${isTopLayerExpanded}
               class="elements-tree-top-layer-container"
               style=${styleMap({'--indent': `${computeLeftIndent(containerDepth, true)}px`})}
-              @select=${onTopLayerSelect}
-              @expand=${onTopLayerExpand}
-              jslog=${VisualLogging.treeItem().parent('elementsTreeOutline')}>
-            <div class="selection fill"></div>
+              @select=${on(onTopLayerSelect)}
+              @expand=${on(onTopLayerExpand)}
+              jslog=${treeItemJslog()}>
             <span class="elements-tree-shortcut-title">#top-layer</span>
             <ul role="group">
-              ${UI.TreeOutline.ifExpanded(html`
-                ${shortcuts.map(sc => renderShortcut(sc, containerDepth + 1))}
-              `)}
+              ${shortcuts.map(sc => renderShortcut(sc, containerDepth + 1))}
             </ul>
           </li>
         `;
@@ -645,10 +648,9 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
           ?open=${isExpanded}
           class="elements-tree-adopted-style-sheet"
           style=${styleMap({'--indent': `${computeLeftIndent(depth, true)}px`})}
-          @select=${onSelect}
-          @expand=${onExpand}
-          jslog=${VisualLogging.treeItem('adopted-style-sheet').parent('elementsTreeOutline')}>
-        <div class="selection fill"></div>
+          @select=${on(onSelect)}
+          @expand=${on(onExpand)}
+          jslog=${treeItemJslog('adopted-style-sheet')}>
         <span class="elements-tree-shortcut-title">#adopted-style-sheet${linkText ? html` (${UIComponentUtils.Linkifier.Linkifier.linkifyURL(linkText, {
           text: linkText,
           preventClick: true,
@@ -660,8 +662,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
               <li role="treeitem"
                   class="elements-tree-adopted-style-sheet-contents"
                   style=${styleMap({'--indent': `${computeLeftIndent(depth + 1, false)}px`})}
-                  jslog=${VisualLogging.treeItem('adopted-style-sheet-contents').parent('elementsTreeOutline')}>
-                <div class="selection fill"></div>
+                  jslog=${treeItemJslog('adopted-style-sheet-contents')}>
                 ${UI.Widget.widget(AdoptedStyleSheetContentsWidget, {styleSheetHeader: header})}
               </li>
             ` : nothing}
@@ -691,10 +692,9 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
           ?open=${isExpanded}
           class="elements-tree-adopted-style-sheets"
           style=${styleMap({'--indent': `${computeLeftIndent(depth, true)}px`})}
-          @select=${onSelect}
-          @expand=${onExpand}
-          jslog=${VisualLogging.treeItem('adopted-style-sheets').parent('elementsTreeOutline')}>
-        <div class="selection fill"></div>
+          @select=${on(onSelect)}
+          @expand=${on(onExpand)}
+          jslog=${treeItemJslog('adopted-style-sheets')}>
         <span class="elements-tree-shortcut-title">#adopted-style-sheets</span>
         <ul role="group">
           ${UI.TreeOutline.ifExpanded(html`
@@ -809,7 +809,8 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
   };
 
   const renderNode = (node: SDK.DOMModel.DOMNode, depth = 0): Lit.LitTemplate => {
-    const isSelected = input.selectedNode === node;
+    const isDOMNodeSelected = input.selectedNode === node;
+    const isSelected = Boolean(input.selectEnabled) && isDOMNodeSelected;
     const isOpeningHovered =
         (input.currentHighlightedNode === node) || (input.hoveredNode === node && !input.hoveredClosingTag);
     const isClosingHovered = input.hoveredNode === node && Boolean(input.hoveredClosingTag);
@@ -832,12 +833,12 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
 
     const on = Lit.Directive.directive(Lit.CustomDirectives.InterceptBindingDirective);
 
-    const onSelect = (isClosingTag = false): void => {
-      input.onSelect?.(node, isClosingTag, /* selectedByUser= */ true);
+    const onSelect = (isClosingTag = false, selectedByUser = false): void => {
+      input.onSelect?.(node, isClosingTag, selectedByUser);
     };
 
     const onExpand = (event: UI.TreeOutline.TreeViewElement.ExpandEvent): void => {
-      if (isEditingAsHTML) {
+      if (isEditingAsHTML || !isCollapsible) {
         return;
       }
       input.onExpand?.(node, event.detail.expanded);
@@ -848,6 +849,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
     const isDraggable = !input.disableEdits && Boolean(input.isValidDragSource?.(node));
 
     const classes = classMap({
+      selected: isSelected && !input.selectedClosingTag,
       hovered: isOpeningHovered,
       'in-clipboard': Boolean(input.isNodeInClipboard?.(node)),
       'elements-drag-over': isDragOver,
@@ -855,13 +857,19 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
     });
 
     const onOpeningMouseMove = (event: MouseEvent): void => {
-      event.stopPropagation();
+      const currentTarget = event.currentTarget as Element | null;
+      if (currentTarget && (event.target as Element).closest('li[role="treeitem"]') !== currentTarget) {
+        return;
+      }
       const showInfo = !UI.KeyboardShortcut.KeyboardShortcut.eventHasEitherCtrlOrMeta(event);
       input.onHoverNode?.(node, showInfo, /* isClosingTag= */ false);
     };
 
     const onClosingMouseMove = (event: MouseEvent): void => {
-      event.stopPropagation();
+      const currentTarget = event.currentTarget as Element | null;
+      if (currentTarget && (event.target as Element).closest('li[role="treeitem"]') !== currentTarget) {
+        return;
+      }
       const showInfo = !UI.KeyboardShortcut.KeyboardShortcut.eventHasEitherCtrlOrMeta(event);
       input.onHoverNode?.(node, showInfo, /* isClosingTag= */ true);
     };
@@ -914,10 +922,10 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
           ?selected=${isSelected && !input.selectedClosingTag}
           class=${classes}
           style=${styleMap({'--indent': `${computeLeftIndent(depth, isExpandable)}px`})}
-          ?open=${isExpanded && !isEditingAsHTML}
+          ?open=${hasChildren && isExpanded && !isEditingAsHTML}
           draggable=${isDraggable ? 'true' : 'false'}
-          @select=${on(() => onSelect(false))}
-          @expand=${onExpand}
+          @select=${on((event: UI.TreeOutline.TreeViewElement.SelectEvent) => onSelect(false, Boolean(event.detail?.selectedByUser)))}
+          @expand=${on(onExpand)}
           @mousemove=${on(onOpeningMouseMove)}
           @contextmenu=${on(onContextMenu)}
           @dragstart=${on(onDragStart)}
@@ -925,19 +933,15 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
           @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,
-          })}>
+          jslog=${treeItemJslog(undefined, true)}>
         ${UI.Widget.widget(ElementsTreeWidget, {
           node,
           isClosingTag: false,
+          renderSelection: false,
           expanded: isExpanded && !isEditingAsHTML,
           isExpandable: hasChildren,
           selected: isSelected && !input.selectedClosingTag,
-          isDOMNodeSelected: isSelected,
+          isDOMNodeSelected,
           hovered: isOpeningHovered,
           searchQuery: input.searchMatchNode === node ? (input.searchMatchQuery ?? null) : null,
           inClipboard: input.isNodeInClipboard?.(node) ?? false,
@@ -963,8 +967,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
             input.onSelectNodeAfterEdit?.(wasExpanded, error, newNode, moveDirection);
           },
           toggleHideElement: (n: SDK.DOMModel.DOMNode) => {
-            input.onToggleHideElement?.(n);
-            return Promise.resolve();
+            return input.onToggleHideElement?.(n) ?? Promise.resolve();
           },
           isToggledToHidden: (n: SDK.DOMModel.DOMNode) => input.isToggledToHidden?.(n) ?? false,
           showContextMenu: (event: Event) => {
@@ -978,12 +981,12 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
           <ul role="group">
             ${UI.TreeOutline.ifExpanded(html`
               ${node.adoptedStyleSheetsForNode.length > 0 ? renderAdoptedStyleSheets(node, depth + 1) : nothing}
-              ${children.map(child => renderNode(child, depth + 1))}
+              ${repeat(children, child => child.id, child => renderNode(child, depth + 1))}
               ${remainingChildrenCount > 0 ? html`
                 <li role="treeitem"
                     class="elements-tree-expand-all"
                     style=${styleMap({'--indent': `${computeLeftIndent(depth + 1, false)}px`})}
-                    jslog=${VisualLogging.treeItem('show-all-nodes').parent('elementsTreeOutline')}>
+                    jslog=${treeItemJslog('show-all-nodes')}>
                   <devtools-button
                       .variant=${Buttons.Button.Variant.OUTLINED}
                       title=${i18nString(UIStrings.showAllNodesDMore, {PH1: remainingChildrenCount})}
@@ -995,15 +998,21 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
                   </devtools-button>
                 </li>
               ` : nothing}
+              ${node.isInsertionPoint() ? node.distributedNodes().map(distributedNode => renderShortcut(distributedNode, depth + 1)) : nothing}
               ${node instanceof SDK.DOMModel.DOMDocument ? renderTopLayerContainer(node, depth + 1) : nothing}
               ${needsClosingTag ? html`
                 <li role="treeitem"
                     ?selected=${isSelected && Boolean(input.selectedClosingTag)}
-                    class=${classMap({hovered: isClosingHovered, 'elements-drag-over': isClosingTagDragOver})}
+                    class=${classMap({
+                      selected: isSelected && Boolean(input.selectedClosingTag),
+                      hovered: isClosingHovered,
+                      'elements-drag-over': isClosingTagDragOver,
+                    })}
                     style=${styleMap({'--indent': `${computeLeftIndent(depth + 1, false)}px`})}
                     draggable=${isDraggable ? 'true' : 'false'}
-                    jslog=${VisualLogging.treeItem().parent('elementsTreeOutline')}
-                    @select=${on(() => onSelect(true))}
+                    jslog=${treeItemJslog(undefined, true)}
+                    @select=${on((event: UI.TreeOutline.TreeViewElement.SelectEvent) => onSelect(true, Boolean(event.detail?.selectedByUser)))}
+                    @contextmenu=${on(onContextMenu)}
                     @mousemove=${on(onClosingMouseMove)}
                     @dragstart=${on(onDragStart)}
                     @dragover=${on(onClosingTagDragOver)}
@@ -1013,10 +1022,11 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
                   ${UI.Widget.widget(ElementsTreeWidget, {
                     node,
                     isClosingTag: true,
+                    renderSelection: false,
                     expanded: false,
                     isExpandable: false,
                     selected: isSelected && Boolean(input.selectedClosingTag),
-                    isDOMNodeSelected: isSelected,
+                    isDOMNodeSelected,
                     hovered: isClosingHovered,
                     computeLeftIndent: computeLeftIndent(depth + 1, false),
                     disableEdits: input.disableEdits ?? false,
@@ -1062,7 +1072,6 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
       <devtools-tree
         class="elements-tree-outline source-code ${input.wrap ? '' : 'elements-tree-nowrap'} ${input.hideGutter ? 'elements-hide-gutter' : ''} ${isSingleNode ? 'single-node' : ''}"
         disclosure-class="elements-disclosure ${isSingleNode ? 'single-node' : ''} ${input.maxRowsShown ? 'elements-tree-truncated' : ''}"
-        aria-label=${i18nString(UIStrings.pageDom)}
         jslog=${VisualLogging.tree('elements')}
         ?show-selection-on-keyboard-focus=${input.showSelectionOnKeyboardFocus}
         @enter=${(event: Event) => event.preventDefault()}
@@ -1075,10 +1084,10 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
           <style>${UI.inspectorCommonStyles}</style>
           <style>${elementsTreeOutlineStyles}</style>
           <style>${CodeHighlighter.codeHighlighterStyles}</style>
-          <ul role="tree">
+          <ul role="tree" class="elements-tree-outline source-code ${input.wrap ? '' : 'elements-tree-nowrap'} ${input.hideGutter ? 'elements-hide-gutter' : ''} ${isSingleNode ? 'single-node' : ''}" aria-label=${i18nString(UIStrings.pageDom)}>
             ${input.omitRootDOMNode && input.rootDOMNode && input.rootDOMNode.adoptedStyleSheetsForNode.length > 0 ?
                 renderAdoptedStyleSheets(input.rootDOMNode, 0) : nothing}
-            ${rootNodes.map(node => renderNode(node))}
+            ${repeat(rootNodes, node => node.id, node => renderNode(node))}
             ${input.omitRootDOMNode && input.rootDOMNode ? (() => {
               const remaining = allRootNodes.length - rootNodes.length;
               if (remaining <= 0) {
@@ -1089,14 +1098,14 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
                 <li role="treeitem"
                     class="elements-tree-expand-all"
                     style=${styleMap({'--indent': `${computeLeftIndent(0, false)}px`})}
-                    jslog=${VisualLogging.treeItem('show-all-nodes').parent('elementsTreeOutline')}>
+                    jslog=${treeItemJslog('show-all-nodes')}>
                   <devtools-button
-                      .variant=${Buttons.Button.Variant.OUTLINED}
-                      title=${i18nString(UIStrings.showAllNodesDMore, {PH1: remaining})}
-                      @click=${on((event: Event) => {
-                        event.stopPropagation();
-                        input.onExpandAllChildren?.(root);
-                      })}>
+                    .variant=${Buttons.Button.Variant.OUTLINED}
+                    title=${i18nString(UIStrings.showAllNodesDMore, {PH1: remaining})}
+                    @click=${on((event: Event) => {
+                      event.stopPropagation();
+                      input.onExpandAllChildren?.(root);
+                    })}>
                     ${i18nString(UIStrings.showAllNodesDMore, {PH1: remaining})}
                   </devtools-button>
                 </li>
@@ -1154,6 +1163,8 @@ function getElementsTreeWidgetAndNode(element: Element): {node?: SDK.DOMModel.DO
  * to DOMTreeWidget.ts.
  */
 export class DOMTreeWidget extends UI.Widget.Widget {
+  static override readonly INJECT: readonly[typeof ChangeTracker.ChangeTracker.ChangeTracker] =
+      [ChangeTracker.ChangeTracker.ChangeTracker] as const;
   omitRootDOMNode = false;
   selectEnabled = false;
   hideGutter = false;
@@ -1179,6 +1190,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   #visibleWidth?: number;
   #wrap = false;
   #maxRows?: number;
+  #changeTracker?: ChangeTracker.ChangeTracker.ChangeTracker;
 
   // If maxRows is undefined, all rows are shown. If it is set to a number, only that many rows are shown.
   set maxRows(maxRows: number|undefined) {
@@ -1210,9 +1222,11 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     }
     this.#expandedNodes.add(node);
     const expandChildren = (): void => {
-      if (this.#expandRoot && this.omitRootDOMNode && node.children()) {
-        for (const child of node.children() ?? []) {
-          this.#expandedNodes.add(child);
+      for (const child of node.children() ?? []) {
+        const isNotCollapsible = child.nodeType() === Node.ELEMENT_NODE &&
+            child.parentNode?.nodeType() === Node.DOCUMENT_NODE && !child.parentNode.parentNode;
+        if (isNotCollapsible || (this.#expandRoot && this.omitRootDOMNode)) {
+          this.setNodeExpanded(child, true);
         }
       }
     };
@@ -1275,6 +1289,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
 
   set showComments(showComments: boolean) {
     this.#showComments = showComments;
+    this.#validateSelectedNode();
     this.performUpdate();
   }
 
@@ -1330,8 +1345,20 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   };
   #highlightThrottler = new Common.Throttler.Throttler(100);
 
+  get changeTracker(): ChangeTracker.ChangeTracker.ChangeTracker|undefined {
+    // The widget is also created without dependency injection (e.g. by
+    // ElementsPanel), so the changeTracker can be empty, relying on the manual
+    // resolution. Note that this only works once the widget is attached to the
+    // DOM.
+    this.#changeTracker ??=
+        UI.Widget.lookupUniverseForElement(this.contentElement)?.get(ChangeTracker.ChangeTracker.ChangeTracker);
+    return this.#changeTracker;
+  }
+
   constructor(
       element?: HTMLElement,
+      [changeTracker]:
+          UI.Widget.WidgetDependencies<typeof DOMTreeWidget>|[ChangeTracker.ChangeTracker.ChangeTracker?] = [],
       view: View = DEFAULT_VIEW,
   ) {
     super(element, {
@@ -1339,6 +1366,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       delegatesFocus: false,
     });
     this.#view = view;
+    this.#changeTracker = changeTracker;
     this.#showHTMLCommentsSetting.addChangeListener(this.#onShowHTMLCommentsChange, this);
     if (Common.Settings.Settings.instance().moduleSetting('highlight-node-on-hover-in-overlay').get()) {
       SDK.TargetManager.TargetManager.instance().addModelListener(
@@ -1470,10 +1498,40 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     this.#updateModifiedNodesSoon();
   }
 
+  #findNextNodeOnRemoval(node: SDK.DOMModel.DOMNode, parent: SDK.DOMModel.DOMNode|null): SDK.DOMModel.DOMNode|null {
+    const visibleChildren = parent ? getVisibleChildren(parent, this.#showComments) : [];
+    if (visibleChildren.length > 0) {
+      let candidate: SDK.DOMModel.DOMNode|null = node.nextSibling;
+      while (candidate) {
+        if (visibleChildren.includes(candidate)) {
+          return candidate;
+        }
+        candidate = candidate.nextSibling;
+      }
+      candidate = node.previousSibling;
+      while (candidate) {
+        if (visibleChildren.includes(candidate)) {
+          return candidate;
+        }
+        candidate = candidate.previousSibling;
+      }
+    }
+    if (parent) {
+      if (parent.nodeType() === Node.DOCUMENT_NODE) {
+        return parent.parentNode;
+      }
+      return parent;
+    }
+    return null;
+  }
+
   #onNodeRemoved(
       event: Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode, parent: SDK.DOMModel.DOMNode}>): void {
     const {node, parent} = event.data;
     this.resetClipboardIfNeeded(node);
+    if (this.#selectedDOMNode && (this.#selectedDOMNode === node || node.isAncestor(this.#selectedDOMNode))) {
+      this.selectDOMNode(this.#findNextNodeOnRemoval(node, parent), true);
+    }
     if (parent) {
       this.#addUpdateRecord(parent).nodeRemoved(node);
     }
@@ -1524,8 +1582,12 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     this.#updateModifiedNodesSoon();
   }
 
-  #onMarkersChanged(): void {
-    this.#updateModifiedNodesSoon();
+  #onMarkersChanged(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode>): void {
+    const node = event.data;
+    if (node) {
+      this.#addUpdateRecord(node);
+    }
+    this.performUpdate();
   }
 
   updateModifiedNodes(): void {
@@ -1534,6 +1596,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       this.#updateModifiedNodesTimeout = undefined;
     }
     if (this.#view === DECLARATIVE_VIEW) {
+      this.#validateSelectedNode();
       this.performUpdate();
       return;
     }
@@ -1554,9 +1617,17 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     domModel.addEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this.#onDistributedNodesChanged, this);
     domModel.addEventListener(SDK.DOMModel.Events.DocumentURLChanged, this.#onDocumentURLChanged, this);
     domModel.addEventListener(SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated, this.requestUpdate, this);
+    const cssModel = domModel.target().model(SDK.CSSModel.CSSModel);
+    if (cssModel) {
+      cssModel.addEventListener(SDK.CSSModel.Events.StyleSheetAdded, this.requestUpdate, this);
+    }
   }
 
   #unwireDOMModel(domModel: SDK.DOMModel.DOMModel): void {
+    const cssModel = domModel.target().model(SDK.CSSModel.CSSModel);
+    if (cssModel) {
+      cssModel.removeEventListener(SDK.CSSModel.Events.StyleSheetAdded, this.requestUpdate, this);
+    }
     domModel.removeEventListener(SDK.DOMModel.Events.DocumentUpdated, this.#onDocumentUpdated, this);
     domModel.removeEventListener(SDK.DOMModel.Events.NodeInserted, this.#onNodeInserted, this);
     domModel.removeEventListener(SDK.DOMModel.Events.NodeRemoved, this.#onNodeRemoved, this);
@@ -1575,6 +1646,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
 
   #onShowHTMLCommentsChange(): void {
     this.#showComments = this.#showHTMLCommentsSetting.get();
+    this.#validateSelectedNode();
     const selectedNode = this.selectedDOMNode();
     if (selectedNode && selectedNode.nodeType() === Node.COMMENT_NODE && !this.#showComments) {
       this.selectDOMNode(selectedNode.parentNode);
@@ -1601,7 +1673,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   }
 
   selectDOMNode(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet|null, focus?: boolean,
-                isClosingTag = false): void {
+                isClosingTag?: boolean): void {
     this.#imagePreviewPopover?.hide();
     this.#issuePopoverHelper?.hidePopover();
     if (node instanceof SDK.DOMModel.AdoptedStyleSheet) {
@@ -1610,9 +1682,9 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     }
     this.#selectedAdoptedStyleSheet = null;
     if (this.#view === DECLARATIVE_VIEW) {
-      this.#selectedClosingTag = Boolean(isClosingTag);
-      const isSameNode = this.#selectedDOMNode === node;
+      const isSameNode = this.#selectedDOMNode === node && this.#selectedClosingTag === Boolean(isClosingTag);
       this.#selectedDOMNode = node;
+      this.#selectedClosingTag = Boolean(isClosingTag);
       if (node) {
         const ancestors: SDK.DOMModel.DOMNode[] = [];
         for (let current: (SDK.DOMModel.DOMNode|null) = node.parentNode; current; current = current.parentNode) {
@@ -1646,6 +1718,15 @@ export class DOMTreeWidget extends UI.Widget.Widget {
             Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode | null, focus: boolean}>);
       }
       this.performUpdate();
+      if (focus) {
+        this.focus();
+      }
+      return;
+    }
+    if (isClosingTag && node) {
+      const rootTreeElement = this.#viewOutput?.elementsTreeOutline?.findTreeElement(node);
+      const closingTreeElement = rootTreeElement?.childAt(rootTreeElement.childCount() - 1);
+      closingTreeElement?.select(!focus, true);
       return;
     }
     this.#viewOutput?.elementsTreeOutline?.selectDOMNode(node, focus);
@@ -1684,7 +1765,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     if (this.#view === DECLARATIVE_VIEW) {
       if (expanded) {
         this.#expandedNodes.add(node);
-        if (!node.children() && node.childNodeCount()) {
+        if (!node.children() && (node.childNodeCount() || node.isIframe() || node.nodeType() === Node.DOCUMENT_NODE)) {
           void node.getChildNodes(() => {
             this.performUpdate();
           });
@@ -1710,6 +1791,11 @@ export class DOMTreeWidget extends UI.Widget.Widget {
 
   isNodeExpanded(node: SDK.DOMModel.DOMNode): boolean {
     if (this.#view === DECLARATIVE_VIEW) {
+      const isNotCollapsible = node.nodeType() === Node.ELEMENT_NODE &&
+          node.parentNode?.nodeType() === Node.DOCUMENT_NODE && !node.parentNode.parentNode;
+      if (isNotCollapsible) {
+        return true;
+      }
       return this.#expandedNodes.has(node);
     }
     return Boolean(this.#viewOutput.elementsTreeOutline?.findTreeElement(node)?.expanded);
@@ -1741,22 +1827,26 @@ export class DOMTreeWidget extends UI.Widget.Widget {
 
   async expandRecursively(node: SDK.DOMModel.DOMNode, maxDepth: number = 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() ?? []));
-          });
+        if (n.childDocumentPromiseForTesting) {
+          await n.childDocumentPromiseForTesting;
+        }
+        if (!n.children() && !n.contentDocument() &&
+            (n === node || n.childNodeCount() || n.isIframe() || n.nodeType() === Node.DOCUMENT_NODE)) {
+          await n.getSubtree(100, true);
         }
-        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)));
+        if (nodeHasVisibleChildren(n, this.rootDOMNode, this.maxTreeDepth, this.omitRootDOMNode)) {
+          this.#expandedNodes.add(n);
+        }
+        const visibleChildren = getVisibleChildren(n, this.#showComments);
+        if (visibleChildren.length) {
+          if (visibleChildren.length > this.expandedChildrenLimit(n)) {
+            this.setExpandedChildrenLimit(n, visibleChildren.length);
+          }
+          await Promise.all(visibleChildren.map(child => expand(child, depth + 1)));
         }
       };
       await expand(node, 0);
@@ -1812,7 +1902,6 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   treeElementForNode(node: SDK.DOMModel.DOMNode): ElementsTreeElement|null {
     return this.#viewOutput.elementsTreeOutline?.findTreeElement(node) || null;
   }
-
   #hoveredDOMNode: SDK.DOMModel.DOMNode|null = null;
   #hoveredClosingTag = false;
   #selectedClosingTag = false;
@@ -1827,6 +1916,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   #draggedNode: SDK.DOMModel.DOMNode|null = null;
   #draggedNodeWasExpanded = false;
   #dragOverNode: {node: SDK.DOMModel.DOMNode, isClosingTag: boolean}|null = null;
+  #isFocusing = false;
 
   hoveredDOMNode(): SDK.DOMModel.DOMNode|null {
     if (this.#view === DECLARATIVE_VIEW) {
@@ -1871,16 +1961,83 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     if (this.#view === DECLARATIVE_VIEW) {
       this.performUpdate();
     } else {
-      const treeElement = node ? this.treeElementForNode(node) : null;
+      let treeElement = node ? this.treeElementForNode(node) : null;
+      if (isClosingTag && treeElement) {
+        treeElement = treeElement.childAt(treeElement.childCount() - 1) as ElementsTreeElement | null;
+      }
       this.#viewOutput.elementsTreeOutline?.setHoverEffect(treeElement);
     }
   }
 
+  #findValidSelectedNode(selectedNode: SDK.DOMModel.DOMNode): SDK.DOMModel.DOMNode|null {
+    if (!this.#rootDOMNode) {
+      return null;
+    }
+    if (selectedNode === this.#rootDOMNode) {
+      return selectedNode;
+    }
+    let current: SDK.DOMModel.DOMNode|null = selectedNode;
+    let fallback: SDK.DOMModel.DOMNode|null = null;
+    while (current && current !== this.#rootDOMNode) {
+      const parent: SDK.DOMModel.DOMNode|null = current.parentNode;
+      if (!parent) {
+        return fallback ?? this.#rootDOMNode;
+      }
+      if (parent.children() !== null || parent.childNodeCount() === 0 || parent.isIframe()) {
+        const visibleChildren = getVisibleChildren(parent, this.#showComments);
+        if (!visibleChildren.includes(current)) {
+          let sibling: SDK.DOMModel.DOMNode|null = null;
+          let candidate: SDK.DOMModel.DOMNode|null = current.nextSibling;
+          while (candidate) {
+            if (visibleChildren.includes(candidate)) {
+              sibling = candidate;
+              break;
+            }
+            candidate = candidate.nextSibling;
+          }
+          if (!sibling) {
+            candidate = current.previousSibling;
+            while (candidate) {
+              if (visibleChildren.includes(candidate)) {
+                sibling = candidate;
+                break;
+              }
+              candidate = candidate.previousSibling;
+            }
+          }
+          if (sibling) {
+            return this.#findValidSelectedNode(sibling);
+          }
+          return this.#findValidSelectedNode(parent);
+        }
+      }
+      fallback = parent;
+      current = parent;
+    }
+    return current === this.#rootDOMNode ? selectedNode : (fallback ?? this.#rootDOMNode);
+  }
+
+  #validateSelectedNode(): void {
+    if (!this.#selectedDOMNode) {
+      return;
+    }
+    const validNode = this.#findValidSelectedNode(this.#selectedDOMNode);
+    if (validNode !== this.#selectedDOMNode) {
+      this.#selectedDOMNode = validNode;
+      this.#selectedClosingTag = false;
+      this.#clearHighlightedNode();
+      this.onSelectedNodeChanged(
+          {data: {node: validNode, focus: false}} as
+          Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode | null, focus: boolean}>);
+    }
+  }
+
   override performUpdate(): void {
     if (this.#updateModifiedNodesTimeout) {
       clearTimeout(this.#updateModifiedNodesTimeout);
       this.#updateModifiedNodesTimeout = undefined;
     }
+    this.#validateSelectedNode();
     const firstRender = !this.#viewOutput.elementsTreeOutline;
     const updatedNodes = this.#view === DECLARATIVE_VIEW ? [...this.#updateRecords.keys()] : [];
     this.#view({
@@ -1931,6 +2088,9 @@ export class DOMTreeWidget extends UI.Widget.Widget {
         this.setHoveredNode(null);
       },
       onSelect: (node: SDK.DOMModel.DOMNode, isClosingTag = false, selectedByUser?: boolean) => {
+        if (!selectedByUser) {
+          return;
+        }
         this.selectDOMNode(node, selectedByUser, isClosingTag);
       },
       onExpand: (node: SDK.DOMModel.DOMNode, expanded: boolean) => {
@@ -1940,7 +2100,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
         void this.showContextMenu(node, event);
       },
       onToggleHideElement: (node: SDK.DOMModel.DOMNode) => {
-        this.toggleHideElement(node);
+        return this.toggleHideElement(node);
       },
       onKeyDown: (event: KeyboardEvent) => {
         this.onKeyDown(event);
@@ -2134,6 +2294,20 @@ export class DOMTreeWidget extends UI.Widget.Widget {
    * FIXME: which node is selected should be part of the view input.
    */
   selectDOMNodeWithoutReveal(node: SDK.DOMModel.DOMNode): void {
+    if (this.#view === DECLARATIVE_VIEW) {
+      const isSameNode = this.#selectedDOMNode === node && !this.#selectedClosingTag;
+      if (isSameNode) {
+        return;
+      }
+      this.#selectedDOMNode = node;
+      this.#selectedClosingTag = false;
+      this.#clearHighlightedNode();
+      this.onSelectedNodeChanged(
+          {data: {node, focus: false}} as
+          Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode | null, focus: boolean}>);
+      this.performUpdate();
+      return;
+    }
     this.#viewOutput.elementsTreeOutline?.findTreeElement(node)?.select();
   }
 
@@ -2165,8 +2339,11 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     }
   }
 
-  toggleHideElement(node: SDK.DOMModel.DOMNode): void {
-    void node.toggleHideElement();
+  async toggleHideElement(node: SDK.DOMModel.DOMNode): Promise<void> {
+    const changeTracker = this.changeTracker;
+    Elements.DOMChanges.trackVisibilityToggle(changeTracker, node, buildChangeSelector(changeTracker, node),
+                                              !this.isToggledToHidden(node));
+    await node.toggleHideElement();
   }
 
   async removeNode(node: SDK.DOMModel.DOMNode): Promise<void> {
@@ -2180,7 +2357,14 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     if (!node.parentNode || node.parentNode.nodeType() === Node.DOCUMENT_NODE) {
       return;
     }
-    void node.removeNode();
+    // The selector has to be resolved before the node is detached from the tree.
+    const changeTracker = this.changeTracker;
+    const selector = buildChangeSelector(changeTracker, node);
+    await node.removeNode((err: string|null) => {
+      if (!err) {
+        Elements.DOMChanges.trackNodeRemoval(changeTracker, node, selector);
+      }
+    });
   }
 
   isToggledToHidden(node: SDK.DOMModel.DOMNode): boolean {
@@ -2292,7 +2476,14 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   }
 
   duplicateNode(node: SDK.DOMModel.DOMNode): void {
-    void node.duplicate();
+    void node.duplicate().then(({error, node: newNode}) => {
+      if (!error) {
+        const duplicatedNode = newNode ?? node;
+        const changeTracker = this.changeTracker;
+        Elements.DOMChanges.trackNodeDuplication(changeTracker, duplicatedNode,
+                                                 buildChangeSelector(changeTracker, duplicatedNode));
+      }
+    });
   }
 
   nodeBeingDragged(): SDK.DOMModel.DOMNode|null {
@@ -2431,6 +2622,11 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     }
     const wasExpanded = this.#draggedNodeWasExpanded;
     draggedNode.moveTo(parentNode, anchorNode, (error, newNode) => {
+      if (!error) {
+        const movedNode = newNode ?? draggedNode;
+        const changeTracker = this.changeTracker;
+        Elements.DOMChanges.trackNodeDrop(changeTracker, movedNode, buildChangeSelector(changeTracker, movedNode));
+      }
       this.selectNodeAfterEdit(wasExpanded, error, newNode);
     });
   }
@@ -2595,7 +2791,8 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       }
       this.performUpdate();
     } else if (nodeType === Node.TEXT_NODE) {
-      this.startEditingTextNode(node);
+      this.#nodeToEdit = {node, isTextNode: true};
+      this.performUpdate();
     } else if (nodeType === Node.PROCESSING_INSTRUCTION_NODE) {
       this.#nodeToEdit = {node, isProcessingInstruction: true};
       this.performUpdate();
@@ -2615,6 +2812,12 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       const wasExpanded = this.isNodeExpanded(node);
       if (event.key === 'ArrowUp' && node.previousSibling) {
         node.moveTo(node.parentNode, node.previousSibling, (error, newNode) => {
+          if (!error) {
+            const movedNode = newNode ?? node;
+            const changeTracker = this.changeTracker;
+            Elements.DOMChanges.trackNodeMove(changeTracker, movedNode, buildChangeSelector(changeTracker, movedNode),
+                                              /* directionUp= */ true);
+          }
           this.selectNodeAfterEdit(wasExpanded, error, newNode);
         });
         event.consume(true);
@@ -2622,6 +2825,12 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       }
       if (event.key === 'ArrowDown' && node.nextSibling) {
         node.moveTo(node.parentNode, node.nextSibling.nextSibling, (error, newNode) => {
+          if (!error) {
+            const movedNode = newNode ?? node;
+            const changeTracker = this.changeTracker;
+            Elements.DOMChanges.trackNodeMove(changeTracker, movedNode, buildChangeSelector(changeTracker, movedNode),
+                                              /* directionUp= */ false);
+          }
           this.selectNodeAfterEdit(wasExpanded, error, newNode);
         });
         event.consume(true);
@@ -2648,7 +2857,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     }
 
     if (event.key === 'h' || event.key === 'H') {
-      this.toggleHideElement(node);
+      void this.toggleHideElement(node);
       event.consume(true);
       return true;
     }
@@ -2783,11 +2992,23 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     const clipboardNode = this.#clipboardData.node;
     if (this.#clipboardData.isCut) {
       clipboardNode.moveTo(targetNode, null, (error, newNode) => {
+        if (!error) {
+          const movedNode = newNode ?? clipboardNode;
+          const changeTracker = this.changeTracker;
+          Elements.DOMChanges.trackNodePaste(changeTracker, movedNode, buildChangeSelector(changeTracker, movedNode),
+                                             /* isCut= */ true);
+        }
         this.selectNodeAfterEdit(wasExpanded, error, newNode);
       });
       this.setClipboardData(null);
     } else {
       clipboardNode.copyTo(targetNode, null, (error, newNode) => {
+        if (!error) {
+          const addedNode = newNode ?? clipboardNode;
+          const changeTracker = this.changeTracker;
+          Elements.DOMChanges.trackNodePaste(changeTracker, addedNode, buildChangeSelector(changeTracker, addedNode),
+                                             /* isCut= */ false);
+        }
         this.selectNodeAfterEdit(wasExpanded, error, newNode);
       });
     }
@@ -2852,8 +3073,20 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   }
 
   override focus(): void {
-    super.focus();
-    this.#viewOutput.elementsTreeOutline?.focus();
+    if (this.#isFocusing) {
+      return;
+    }
+    this.#isFocusing = true;
+    try {
+      super.focus();
+      if (this.#view === DECLARATIVE_VIEW) {
+        this.contentElement.querySelector('devtools-tree')?.focus();
+      } else {
+        this.#viewOutput.elementsTreeOutline?.focus();
+      }
+    } finally {
+      this.#isFocusing = false;
+    }
   }
 
   override wasShown(): void {
@@ -2871,6 +3104,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     }
     if (this.#view === DECLARATIVE_VIEW) {
       this.#updateRecords.clear();
+      return;
     }
     this.performUpdate();
   }
@@ -2885,6 +3119,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     }
     if (this.#view === DECLARATIVE_VIEW) {
       this.#updateRecords.clear();
+      return;
     }
     this.performUpdate();
   }