chrome-devtools-frontend 1.0.1690116 → 1.0.1695017

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -73,7 +73,7 @@ import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {ShortcutTreeElement} from './ShortcutTreeElement.js';
 import {TopLayerContainer} from './TopLayerContainer.js';
 
-const {html, nothing, render, Directives: {classMap}} = Lit;
+const {html, nothing, render, Directives: {classMap, styleMap}} = Lit;
 
 const UIStrings = {
   /**
@@ -129,10 +129,12 @@ interface ViewInput {
   deindentSingleNode: boolean;
   currentHighlightedNode: SDK.DOMModel.DOMNode|null;
   hoveredNode?: SDK.DOMModel.DOMNode|null;
+  hoveredClosingTag?: boolean;
   searchMatchNode?: SDK.DOMModel.DOMNode|null;
   searchMatchQuery?: string|null;
 
   selectedNode: SDK.DOMModel.DOMNode|null;
+  selectedClosingTag?: boolean;
 
   onSelectedNodeChanged:
       (event: Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode | null, focus: boolean}>) => void;
@@ -140,10 +142,10 @@ interface ViewInput {
   onElementCollapsed: () => void;
   onElementExpanded: () => void;
 
-  onSelect?: (node: SDK.DOMModel.DOMNode, selectedByUser?: boolean) => void;
+  onSelect?: (node: SDK.DOMModel.DOMNode, isClosingTag?: boolean, 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;
+  onHoverNode?: (node: SDK.DOMModel.DOMNode|null, showInfo?: boolean, isClosingTag?: boolean) => void;
   onLeave?: () => void;
   onToggleHideElement?: (node: SDK.DOMModel.DOMNode) => void;
   onKeyDown?: (event: KeyboardEvent) => void;
@@ -157,6 +159,7 @@ interface ViewInput {
                            moveDirection?: string) => void;
   nodeToEdit?: ({node: SDK.DOMModel.DOMNode}&InitialEditState)|null;
   onInitialEditCompleted?: () => void;
+  multilineEditingNode?: SDK.DOMModel.DOMNode|null;
   dragOverNode?: {node: SDK.DOMModel.DOMNode, isClosingTag: boolean}|null;
   isValidDragSource?: (node: SDK.DOMModel.DOMNode) => boolean;
   onDragStart?: (node: SDK.DOMModel.DOMNode, event: DragEvent, textContent?: string) => boolean;
@@ -520,12 +523,13 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
       SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
     };
 
+    // clang-format off
     return html`
       <li role="treeitem"
           ?selected=${isShortcutSelected}
           ?open=${isShortcutExpanded}
           class="elements-tree-shortcut"
-          style="--indent: ${computeLeftIndent(shortcutDepth, hasShortcutChildren)}px"
+          style=${styleMap({'--indent': `${computeLeftIndent(shortcutDepth, hasShortcutChildren)}px`})}
           @select=${onShortcutSelect}
           @expand=${onShortcutExpand}
           @mousemove=${on(onShortcutMouseMove)}
@@ -534,34 +538,31 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
         <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()}>
+            .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`
+        ${hasShortcutChildren ? html`
           <ul role="group">
             ${UI.TreeOutline.ifExpanded(html`
               ${shortcut.childShortcuts.map(child => renderShortcut(child, shortcutDepth + 1))}
             `)}
           </ul>
-        ` :
-                              nothing}
+        ` : nothing}
       </li>
     `;
+    // clang-format on
   };
 
   const renderTopLayerContainer =
@@ -578,23 +579,25 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
           input.onSelectTopLayerContainer?.(doc);
         };
 
+        // clang-format off
         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>
-    `;
+          <li role="treeitem"
+              ?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>
+            <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>
+        `;
+        // clang-format on
       };
 
   const renderAdoptedStyleSheet = (sheet: SDK.DOMModel.AdoptedStyleSheet, depth: number): Lit.LitTemplate => {
@@ -615,7 +618,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
           ?selected=${isSelected}
           ?open=${isExpanded}
           class="elements-tree-adopted-style-sheet"
-          style="--indent: ${computeLeftIndent(depth, true)}px"
+          style=${styleMap({'--indent': `${computeLeftIndent(depth, true)}px`})}
           @select=${onSelect}
           @expand=${onExpand}
           jslog=${VisualLogging.treeItem('adopted-style-sheet').parent('elementsTreeOutline')}>
@@ -630,7 +633,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
             ${header ? html`
               <li role="treeitem"
                   class="elements-tree-adopted-style-sheet-contents"
-                  style="--indent: ${computeLeftIndent(depth + 1, false)}px"
+                  style=${styleMap({'--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})}
@@ -661,7 +664,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
       <li role="treeitem"
           ?open=${isExpanded}
           class="elements-tree-adopted-style-sheets"
-          style="--indent: ${computeLeftIndent(depth, true)}px"
+          style=${styleMap({'--indent': `${computeLeftIndent(depth, true)}px`})}
           @select=${onSelect}
           @expand=${onExpand}
           jslog=${VisualLogging.treeItem('adopted-style-sheets').parent('elementsTreeOutline')}>
@@ -679,14 +682,23 @@ 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 isHovered = (input.currentHighlightedNode === node) || (input.hoveredNode === node);
+    const isOpeningHovered =
+        (input.currentHighlightedNode === node) || (input.hoveredNode === node && !input.hoveredClosingTag);
+    const isClosingHovered = input.hoveredNode === node && Boolean(input.hoveredClosingTag);
     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 isEditingAsHTML = input.multilineEditingNode === node ||
+        (input.nodeToEdit?.node === node && Boolean(input.nodeToEdit.isEditAsHTML));
+    const hasChildren =
+        !isEditingAsHTML && nodeHasVisibleChildren(node, input.rootDOMNode, input.maxTreeDepth, input.omitRootDOMNode);
+    const isCollapsible = !isEditingAsHTML &&
+        !(node.nodeType() === Node.ELEMENT_NODE && node.parentNode?.nodeType() === Node.DOCUMENT_NODE &&
+          !node.parentNode.parentNode);
+    const isExpandable = hasChildren && isCollapsible;
     const allVisibleChildren = hasChildren ? getVisibleChildren(node, input.showComments ?? true) : [];
     const limit = input.expandedChildrenLimit ? input.expandedChildrenLimit(node) : InitialChildrenLimit;
     const children = allVisibleChildren.slice(0, limit);
@@ -697,11 +709,14 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
 
     const on = Lit.Directive.directive(Lit.CustomDirectives.InterceptBindingDirective);
 
-    const onSelect = (): void => {
-      input.onSelect?.(node, /* selectedByUser= */ true);
+    const onSelect = (isClosingTag = false): void => {
+      input.onSelect?.(node, isClosingTag, /* selectedByUser= */ true);
     };
 
     const onExpand = (event: UI.TreeOutline.TreeViewElement.ExpandEvent): void => {
+      if (isEditingAsHTML) {
+        return;
+      }
       input.onExpand?.(node, event.detail.expanded);
     };
 
@@ -710,15 +725,22 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
     const isDraggable = !input.disableEdits && Boolean(input.isValidDragSource?.(node));
 
     const classes = classMap({
-      hovered: isHovered,
+      hovered: isOpeningHovered,
       'in-clipboard': Boolean(input.isNodeInClipboard?.(node)),
       'elements-drag-over': isDragOver,
+      'always-parent': !isCollapsible && !isEditingAsHTML,
     });
 
-    const onMouseMove = (event: MouseEvent): void => {
+    const onOpeningMouseMove = (event: MouseEvent): void => {
       event.stopPropagation();
       const showInfo = !UI.KeyboardShortcut.KeyboardShortcut.eventHasEitherCtrlOrMeta(event);
-      input.onHoverNode?.(node, showInfo);
+      input.onHoverNode?.(node, showInfo, /* isClosingTag= */ false);
+    };
+
+    const onClosingMouseMove = (event: MouseEvent): void => {
+      event.stopPropagation();
+      const showInfo = !UI.KeyboardShortcut.KeyboardShortcut.eventHasEitherCtrlOrMeta(event);
+      input.onHoverNode?.(node, showInfo, /* isClosingTag= */ true);
     };
 
     const onContextMenu = (event: MouseEvent): void => {
@@ -763,16 +785,17 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
       input.onDragEnd?.(event);
     };
 
-    /* clang-format off */
+    // clang-format off
     return html`
       <li role="treeitem"
-          ?selected=${isSelected}
+          ?selected=${isSelected && !input.selectedClosingTag}
           class=${classes}
-          ?open=${isExpanded}
+          style=${styleMap({'--indent': `${computeLeftIndent(depth, isExpandable)}px`})}
+          ?open=${isExpanded && !isEditingAsHTML}
           draggable=${isDraggable ? 'true' : 'false'}
-          @select=${onSelect}
+          @select=${on(() => onSelect(false))}
           @expand=${onExpand}
-          @mousemove=${on(onMouseMove)}
+          @mousemove=${on(onOpeningMouseMove)}
           @contextmenu=${on(onContextMenu)}
           @dragstart=${on(onDragStart)}
           @dragover=${on(onDragOver)}
@@ -788,22 +811,22 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
         ${UI.Widget.widget(ElementsTreeWidget, {
           node,
           isClosingTag: false,
-          expanded: isExpanded,
+          expanded: isExpanded && !isEditingAsHTML,
           isExpandable: hasChildren,
-          selected: isSelected,
+          selected: isSelected && !input.selectedClosingTag,
           isDOMNodeSelected: isSelected,
-          hovered: isHovered,
+          hovered: isOpeningHovered,
           searchQuery: input.searchMatchNode === node ? (input.searchMatchQuery ?? null) : null,
           inClipboard: input.isNodeInClipboard?.(node) ?? false,
-          computeLeftIndent: computeLeftIndent(depth, hasChildren),
+          computeLeftIndent: computeLeftIndent(depth, isExpandable),
           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),
+          setMultilineEditing: (multilineEditing, n) => input.domTreeWidget?.setMultilineEditing(multilineEditing, n ?? node),
           visibleWidth: () => input.domTreeWidget?.visibleWidth ?? 0,
-          selectDOMNode: (n: SDK.DOMModel.DOMNode, selectedByUser?: boolean) => input.onSelect?.(n, selectedByUser),
+          selectDOMNode: (n: SDK.DOMModel.DOMNode, selectedByUser?: boolean) => input.onSelect?.(n, false, selectedByUser),
           selectNodeAfterEdit: (wasExpanded: boolean, error: string|null, newNode: SDK.DOMModel.DOMNode|null, moveDirection?: string) => {
             input.onSelectNodeAfterEdit?.(wasExpanded, error, newNode, moveDirection);
           },
@@ -827,7 +850,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
               ${remainingChildrenCount > 0 ? html`
                 <li role="treeitem"
                     class="elements-tree-expand-all"
-                    style="--indent: ${computeLeftIndent(depth + 1, false)}px"
+                    style=${styleMap({'--indent': `${computeLeftIndent(depth + 1, false)}px`})}
                     jslog=${VisualLogging.treeItem('show-all-nodes').parent('elementsTreeOutline')}>
                   <devtools-button
                       .variant=${Buttons.Button.Variant.OUTLINED}
@@ -843,21 +866,27 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
               ${node instanceof SDK.DOMModel.DOMDocument ? renderTopLayerContainer(node, depth + 1) : nothing}
               ${needsClosingTag ? html`
                 <li role="treeitem"
-                    class=${classMap({hovered: isHovered, 'elements-drag-over': isClosingTagDragOver})}
+                    ?selected=${isSelected && Boolean(input.selectedClosingTag)}
+                    class=${classMap({hovered: isClosingHovered, 'elements-drag-over': isClosingTagDragOver})}
+                    style=${styleMap({'--indent': `${computeLeftIndent(depth + 1, false)}px`})}
+                    draggable=${isDraggable ? 'true' : 'false'}
                     jslog=${VisualLogging.treeItem().parent('elementsTreeOutline')}
-                    @mousemove=${on(onMouseMove)}
+                    @select=${on(() => onSelect(true))}
+                    @mousemove=${on(onClosingMouseMove)}
+                    @dragstart=${on(onDragStart)}
                     @dragover=${on(onClosingTagDragOver)}
                     @dragleave=${on(onDragLeave)}
-                    @drop=${on(onClosingTagDrop)}>
+                    @drop=${on(onClosingTagDrop)}
+                    @dragend=${on(onDragEnd)}>
                   ${UI.Widget.widget(ElementsTreeWidget, {
                     node,
                     isClosingTag: true,
                     expanded: false,
                     isExpandable: false,
-                    selected: false,
-                    isDOMNodeSelected: false,
-                    hovered: isHovered,
-                    computeLeftIndent: computeLeftIndent(depth, false),
+                    selected: isSelected && Boolean(input.selectedClosingTag),
+                    isDOMNodeSelected: isSelected,
+                    hovered: isClosingHovered,
+                    computeLeftIndent: computeLeftIndent(depth + 1, false),
                     disableEdits: input.disableEdits ?? false,
                     showAIButton: false,
                     showContextMenu: (event: Event, widget?: ElementsTreeWidget) => {
@@ -874,10 +903,10 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
         ` : nothing}
       </li>
     `;
-    /* clang-format on */
+    // clang-format on
   };
 
-  /* clang-format off */
+  // clang-format off
   render(html`
     <style>${UI.inspectorCommonStyles}</style>
     <style>${elementsTreeOutlineStyles}</style>
@@ -888,6 +917,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
         aria-label=${i18nString(UIStrings.pageDom)}
         jslog=${VisualLogging.tree('elements')}
         ?show-selection-on-keyboard-focus=${input.showSelectionOnKeyboardFocus}
+        @enter=${(event: Event) => event.preventDefault()}
         @keydown=${input.onKeyDown}
         @clipboard-copy=${(event: Event) => input.onCopyOrCut?.(false, event)}
         @clipboard-cut=${(event: Event) => input.onCopyOrCut?.(true, event)}
@@ -898,6 +928,8 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
           <style>${elementsTreeOutlineStyles}</style>
           <style>${CodeHighlighter.codeHighlighterStyles}</style>
           <ul role="tree">
+            ${input.omitRootDOMNode && input.rootDOMNode && input.rootDOMNode.adoptedStyleSheetsForNode.length > 0 ?
+                renderAdoptedStyleSheets(input.rootDOMNode, 0) : nothing}
             ${rootNodes.map(node => renderNode(node))}
             ${input.omitRootDOMNode && input.rootDOMNode ? (() => {
               const remaining = allRootNodes.length - rootNodes.length;
@@ -908,7 +940,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
               return html`
                 <li role="treeitem"
                     class="elements-tree-expand-all"
-                    style="--indent: ${computeLeftIndent(0, false)}px"
+                    style=${styleMap({'--indent': `${computeLeftIndent(0, false)}px`})}
                     jslog=${VisualLogging.treeItem('show-all-nodes').parent('elementsTreeOutline')}>
                   <devtools-button
                       .variant=${Buttons.Button.Variant.OUTLINED}
@@ -928,7 +960,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
       </devtools-tree>
     </div>
   `, target);
-  /* clang-format on */
+  // clang-format on
 };
 
 function getElementsTreeWidgetAndNode(element: Element): {node?: SDK.DOMModel.DOMNode, widget?: ElementsTreeWidget} {
@@ -1007,20 +1039,35 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   #expandedNodes = new Set<SDK.DOMModel.DOMNode>();
   #expandedChildrenLimitByNode = new WeakMap<SDK.DOMModel.DOMNode, number>();
 
+  #expandRootNode(node: SDK.DOMModel.DOMNode): void {
+    if (!this.#expandRoot && !this.omitRootDOMNode) {
+      return;
+    }
+    this.#expandedNodes.add(node);
+    const expandChildren = (): void => {
+      if (this.#expandRoot && this.omitRootDOMNode && node.children()) {
+        for (const child of node.children() ?? []) {
+          this.#expandedNodes.add(child);
+        }
+      }
+    };
+    if (node.children()) {
+      expandChildren();
+    } else if (node.childNodeCount()) {
+      void node.getChildNodes(() => {
+        expandChildren();
+        this.performUpdate();
+      });
+    }
+  }
+
   // 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.#expandRootNode(node);
       }
       this.performUpdate();
       return;
@@ -1090,6 +1137,9 @@ export class DOMTreeWidget extends UI.Widget.Widget {
 
   set expandRoot(expandRoot: boolean) {
     this.#expandRoot = expandRoot;
+    if (this.#rootDOMNode) {
+      this.#expandRootNode(this.#rootDOMNode);
+    }
     this.performUpdate();
   }
 
@@ -1314,6 +1364,10 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   }
 
   updateModifiedNodes(): void {
+    if (this.#updateModifiedNodesTimeout) {
+      clearTimeout(this.#updateModifiedNodesTimeout);
+      this.#updateModifiedNodesTimeout = undefined;
+    }
     if (this.#view === DECLARATIVE_VIEW) {
       this.performUpdate();
       return;
@@ -1381,7 +1435,8 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     this.performUpdate();
   }
 
-  selectDOMNode(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet|null, focus?: boolean): void {
+  selectDOMNode(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet|null, focus?: boolean,
+                isClosingTag = false): void {
     this.#imagePreviewPopover?.hide();
     this.#issuePopoverHelper?.hidePopover();
     if (node instanceof SDK.DOMModel.AdoptedStyleSheet) {
@@ -1390,6 +1445,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     }
     this.#selectedAdoptedStyleSheet = null;
     if (this.#view === DECLARATIVE_VIEW) {
+      this.#selectedClosingTag = Boolean(isClosingTag);
       const isSameNode = this.#selectedDOMNode === node;
       this.#selectedDOMNode = node;
       if (node) {
@@ -1455,6 +1511,9 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   }
 
   setNodeExpanded(node: SDK.DOMModel.DOMNode, expanded: boolean): void {
+    if (!expanded && this.#multilineEditingNode === node) {
+      return;
+    }
     if (this.#view === DECLARATIVE_VIEW) {
       if (expanded) {
         this.#expandedNodes.add(node);
@@ -1513,7 +1572,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     this.setExpandedChildrenLimit(node, Math.max(visibleChildren.length, currentLimit + InitialChildrenLimit));
   }
 
-  async expandRecursively(node: SDK.DOMModel.DOMNode, maxDepth = Number.MAX_VALUE): Promise<void> {
+  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> => {
@@ -1546,11 +1605,10 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   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);
+        for (const child of getVisibleChildren(n, this.#showComments)) {
+          if (this.#expandedNodes.delete(child)) {
+            collapse(child);
+          }
         }
       };
       collapse(node);
@@ -1590,6 +1648,8 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   }
 
   #hoveredDOMNode: SDK.DOMModel.DOMNode|null = null;
+  #hoveredClosingTag = false;
+  #selectedClosingTag = false;
   #searchMatchNode: SDK.DOMModel.DOMNode|null = null;
   #searchMatchQuery: string|null = null;
   #nodeToEdit: ({node: SDK.DOMModel.DOMNode}&InitialEditState)|null = null;
@@ -1608,6 +1668,14 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     return null;
   }
 
+  hoveredClosingTag(): boolean {
+    return this.#hoveredClosingTag;
+  }
+
+  selectedClosingTag(): boolean {
+    return this.#selectedClosingTag;
+  }
+
   searchMatchNode(): SDK.DOMModel.DOMNode|null {
     return this.#searchMatchNode;
   }
@@ -1616,11 +1684,12 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     return this.#searchMatchQuery;
   }
 
-  setHoveredNode(node: SDK.DOMModel.DOMNode|null, showInfo = true): void {
-    if (this.#hoveredDOMNode === node) {
+  setHoveredNode(node: SDK.DOMModel.DOMNode|null, showInfo = true, isClosingTag = false): void {
+    if (this.hoveredDOMNode() === node && this.#hoveredClosingTag === Boolean(isClosingTag)) {
       return;
     }
     this.#hoveredDOMNode = node;
+    this.#hoveredClosingTag = Boolean(isClosingTag);
     if (node) {
       const treeElement = this.treeElementForNode(node);
       const selectorList = treeElement?.isDisplayContents() ? '*' : undefined;
@@ -1665,9 +1734,11 @@ export class DOMTreeWidget extends UI.Widget.Widget {
 
       currentHighlightedNode: this.#currentHighlightedNode,
       hoveredNode: this.#hoveredDOMNode,
+      hoveredClosingTag: this.#hoveredClosingTag,
       searchMatchNode: this.#searchMatchNode,
       searchMatchQuery: this.#searchMatchQuery,
       selectedNode: this.selectedDOMNode(),
+      selectedClosingTag: this.#selectedClosingTag,
       onElementsTreeUpdated: this.onElementsTreeUpdated.bind(this),
       onSelectedNodeChanged: event => {
         this.#clearHighlightedNode();
@@ -1679,14 +1750,14 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       onElementExpanded: () => {
         this.#clearHighlightedNode();
       },
-      onHoverNode: (node: SDK.DOMModel.DOMNode, showInfo?: boolean) => {
-        this.setHoveredNode(node, showInfo);
+      onHoverNode: (node: SDK.DOMModel.DOMNode|null, showInfo?: boolean, isClosingTag = false) => {
+        this.setHoveredNode(node, showInfo, isClosingTag);
       },
       onLeave: () => {
         this.setHoveredNode(null);
       },
-      onSelect: (node: SDK.DOMModel.DOMNode, selectedByUser?: boolean) => {
-        this.selectDOMNode(node, selectedByUser);
+      onSelect: (node: SDK.DOMModel.DOMNode, isClosingTag = false, selectedByUser?: boolean) => {
+        this.selectDOMNode(node, selectedByUser, isClosingTag);
       },
       onExpand: (node: SDK.DOMModel.DOMNode, expanded: boolean) => {
         this.setNodeExpanded(node, expanded);
@@ -1726,6 +1797,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       onInitialEditCompleted: () => {
         this.#nodeToEdit = null;
       },
+      multilineEditingNode: this.#multilineEditingNode,
       dragOverNode: this.#dragOverNode,
       isValidDragSource: (node: SDK.DOMModel.DOMNode) => this.isValidDragSource(node),
       onDragStart: (node: SDK.DOMModel.DOMNode, event: DragEvent, textContent?: string) =>
@@ -1850,12 +1922,10 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     this.performUpdate();
   }
 
-  /**
-   * FIXME: which node is expanded should be part of the view input.
-   */
   expand(): void {
-    if (this.#viewOutput.elementsTreeOutline?.selectedTreeElement) {
-      this.#viewOutput.elementsTreeOutline.selectedTreeElement.expand();
+    const selectedNode = this.selectedDOMNode();
+    if (selectedNode) {
+      this.setNodeExpanded(selectedNode, true);
     }
   }
 
@@ -1915,15 +1985,22 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   }
 
   #multilineEditing: MultilineEditorController|null = null;
+  #multilineEditingNode: SDK.DOMModel.DOMNode|null = null;
 
-  setMultilineEditing(multilineEditing: MultilineEditorController|null): void {
+  setMultilineEditing(multilineEditing: MultilineEditorController|null, node?: SDK.DOMModel.DOMNode): void {
     this.#multilineEditing = multilineEditing;
+    this.#multilineEditingNode = multilineEditing ? (node ?? this.#multilineEditingNode) : null;
+    this.performUpdate();
   }
 
   multilineEditing(): MultilineEditorController|null {
     return this.#multilineEditing;
   }
 
+  multilineEditingNode(): SDK.DOMModel.DOMNode|null {
+    return this.#multilineEditingNode;
+  }
+
   runPendingUpdates(): void {
     this.updateModifiedNodes();
     if (this.#view !== DECLARATIVE_VIEW) {
@@ -1963,10 +2040,12 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     const wasExpanded = this.isNodeExpanded(node);
 
     const editingFinished = (success: boolean): void => {
+      this.#multilineEditingNode = null;
       if (callback) {
         callback();
       }
       if (!success) {
+        this.performUpdate();
         return;
       }
 
@@ -2000,6 +2079,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       return;
     }
 
+    this.#multilineEditingNode = node;
     this.#nodeToEdit = {
       node,
       isEditAsHTML: true,
@@ -2723,8 +2803,8 @@ export class ElementsTreeOutline extends ElementsTreeOutlineBase {
     this.elementInternal.classList.toggle('elements-tree-nowrap', !wrap);
   }
 
-  setMultilineEditing(multilineEditing: MultilineEditorController|null): void {
-    this.domTreeWidget?.setMultilineEditing(multilineEditing);
+  setMultilineEditing(multilineEditing: MultilineEditorController|null, node?: SDK.DOMModel.DOMNode): void {
+    this.domTreeWidget?.setMultilineEditing(multilineEditing, node);
   }
 
   visibleWidth(): number {
@@ -3101,18 +3181,12 @@ export class ElementsTreeOutline extends ElementsTreeOutlineBase {
       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), showInfo);
+    const showInfo = !UI.KeyboardShortcut.KeyboardShortcut.eventHasEitherCtrlOrMeta(event);
+    this.highlightTreeElement((element as UI.TreeOutline.TreeElement | null), showInfo);
   }
 
-  private highlightTreeElement(element: UI.TreeOutline.TreeElement, showInfo: boolean): void {
+  private highlightTreeElement(element: UI.TreeOutline.TreeElement|null, showInfo: boolean): void {
     if (element instanceof ElementsTreeElement) {
       const selectorList = element.isDisplayContents() ? '*' : undefined;
       element.node().domModel().overlayModel().highlightInOverlay({node: element.node(), selectorList}, 'all',
@@ -3123,11 +3197,13 @@ export class ElementsTreeOutline extends ElementsTreeOutlineBase {
     if (element instanceof ShortcutTreeElement) {
       element.domModel().overlayModel().highlightInOverlay(
           {deferredNode: element.deferredNode(), selectorList: undefined}, 'all', showInfo);
+      return;
     }
+
+    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
   }
 
   private onmouseleave(_event: MouseEvent): void {
-    this.domTreeWidget?.setHoveredNode(null);
     this.setHoverEffect(null);
     SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
   }
@@ -3816,7 +3892,7 @@ export namespace ElementsTreeOutline {
 }
 
 // clang-format off
-export const MappedCharToEntity = new Map<string, string>([
+export const MappedCharToEntity: Map<string, string> = new Map<string, string>([
   ['\xA0', 'nbsp'],
   ['\xAD', 'shy'],
   ['\u2002', 'ensp'],