chrome-devtools-frontend 1.0.1689415 → 1.0.1690116

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -40,6 +40,7 @@ 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 Buttons from '../../ui/components/buttons/buttons.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';
@@ -179,11 +180,13 @@ interface ViewInput {
   onToggleAdoptedStyleSheetExpanded?: (sheet: SDK.DOMModel.AdoptedStyleSheet, expanded: boolean) => void;
   selectedAdoptedStyleSheet?: SDK.DOMModel.AdoptedStyleSheet|null;
   onSelectAdoptedStyleSheet?: (sheet: SDK.DOMModel.AdoptedStyleSheet) => void;
+  expandedChildrenLimit?: (node: SDK.DOMModel.DOMNode) => number;
+  onExpandAllChildren?: (node: SDK.DOMModel.DOMNode) => void;
+  updateRecordForNode?: (node: SDK.DOMModel.DOMNode) => Elements.ElementUpdateRecord.ElementUpdateRecord | null;
 }
 
 interface ViewOutput {
   elementsTreeOutline?: ElementsTreeOutline;
-  imagePreviewPopover?: ImagePreviewPopover;
   highlightedTreeElement: ElementsTreeElement|null;
   searchMatchTreeElement?: ElementsTreeElement|null;
   searchMatchQuery?: string;
@@ -230,84 +233,6 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
     elementsTreeOutline.elementInternal.addEventListener('clipboard-paste', (event: Event) => {
       input.onPaste?.(event);
     }, false);
-    output.imagePreviewPopover = new ImagePreviewPopover(
-        elementsTreeOutline.contentElement,
-        event => {
-          let link: (Element|null) = (event.target as Element | null);
-          while (link && !ImagePreviewPopover.getImageURL(link)) {
-            link = link.parentElementOrShadowHost();
-          }
-          return link;
-        },
-        async link => {
-          const listItem = UI.UIUtils.enclosingNodeOrSelfWithNodeName(link, 'li');
-          if (!listItem) {
-            return undefined;
-          }
-
-          const treeElement =
-              (UI.TreeOutline.TreeElement.getTreeElementBylistItemNode(listItem) as ElementsTreeElement | undefined);
-          return await UIComponentUtils.ImagePreview.loadPrecomputedFeatures(treeElement?.node());
-        });
-    // TODO(changhaohan): refactor the popover to use tooltip component.
-    const popupHelper = new UI.PopoverHelper.PopoverHelper(elementsTreeOutline.elementInternal, event => {
-      const hoveredNode = event.composedPath()[0];
-      if (!(hoveredNode instanceof Element) || !hoveredNode.matches('.violating-element')) {
-        return null;
-      }
-
-      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;
-      }
-
-      return {
-        box: hoveredNode.boxInWindow(),
-        show: async (popover: UI.GlassPane.GlassPane) => {
-          popover.setIgnoreLeftMargin(true);
-          // clang-format off
-          render(html`
-            <div class="squiggles-content">
-              ${issues.map(issue => {
-            const elementIssueDetails = getElementIssueDetails(issue);
-            if (!elementIssueDetails) {
-              return nothing;
-            }
-            const issueKindIconName = IssueCounter.IssueCounter.getIssueKindIconName(issue.getKind());
-            const openIssueEvent = (): Promise<void> => Common.Revealer.reveal(issue);
-            return html`
-                  <div class="squiggles-content-item">
-                  <devtools-icon .name=${issueKindIconName} @click=${openIssueEvent}></devtools-icon>
-                  <devtools-link class="link" @click=${openIssueEvent}>${i18nString(UIStrings.viewIssue)}</devtools-link>
-                  <span>${elementIssueDetails.tooltip}</span>
-                  </div>`;
-          })}
-            </div>`, popover.contentElement);
-          // clang-format on
-          return true;
-        },
-      };
-    }, 'elements.issue');
-    popupHelper.setTimeout(300);
     target.appendChild(elementsTreeOutline.element);
   }
 
@@ -333,9 +258,6 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
   }
   if (input.visible !== undefined) {
     output.elementsTreeOutline.setVisible(input.visible);
-    if (!input.visible) {
-      output.imagePreviewPopover?.hide();
-    }
   }
   output.elementsTreeOutline.maxRowsShown = input.maxRowsShown;
   output.elementsTreeOutline.setWordWrap(input.wrap);
@@ -556,11 +478,14 @@ function computeLeftIndent(depth: number, isExpandable: boolean): number {
 }
 
 export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLElement): void => {
+  let allRootNodes: SDK.DOMModel.DOMNode[] = [];
   let rootNodes: SDK.DOMModel.DOMNode[] = [];
   const rootDOMNode = input.rootDOMNode;
   if (rootDOMNode) {
     if (input.omitRootDOMNode) {
-      rootNodes = getVisibleChildren(rootDOMNode, input.showComments ?? true);
+      allRootNodes = getVisibleChildren(rootDOMNode, input.showComments ?? true);
+      const rootLimit = input.expandedChildrenLimit ? input.expandedChildrenLimit(rootDOMNode) : InitialChildrenLimit;
+      rootNodes = allRootNodes.slice(0, rootLimit);
     } else {
       rootNodes = [rootDOMNode];
     }
@@ -762,15 +687,14 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
              (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 allVisibleChildren = hasChildren ? getVisibleChildren(node, input.showComments ?? true) : [];
+    const limit = input.expandedChildrenLimit ? input.expandedChildrenLimit(node) : InitialChildrenLimit;
+    const children = allVisibleChildren.slice(0, limit);
+    const remainingChildrenCount = allVisibleChildren.length - children.length;
     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 => {
@@ -893,12 +817,29 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
               input.onContextMenu?.(node, event, widget);
             }
           },
+          updateRecord: input.updateRecordForNode?.(node) ?? null,
         })}
         ${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))}
+              ${remainingChildrenCount > 0 ? html`
+                <li role="treeitem"
+                    class="elements-tree-expand-all"
+                    style="--indent: ${computeLeftIndent(depth + 1, false)}px"
+                    jslog=${VisualLogging.treeItem('show-all-nodes').parent('elementsTreeOutline')}>
+                  <devtools-button
+                      .variant=${Buttons.Button.Variant.OUTLINED}
+                      title=${i18nString(UIStrings.showAllNodesDMore, {PH1: remainingChildrenCount})}
+                      @click=${on((event: Event) => {
+                        event.stopPropagation();
+                        input.onExpandAllChildren?.(node);
+                      })}>
+                    ${i18nString(UIStrings.showAllNodesDMore, {PH1: remainingChildrenCount})}
+                  </devtools-button>
+                </li>
+              ` : nothing}
               ${node instanceof SDK.DOMModel.DOMDocument ? renderTopLayerContainer(node, depth + 1) : nothing}
               ${needsClosingTag ? html`
                 <li role="treeitem"
@@ -924,6 +865,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
                         input.onContextMenu?.(node, event, widget);
                       }
                     },
+                    updateRecord: input.updateRecordForNode?.(node) ?? null,
                   })}
                 </li>
               ` : nothing}
@@ -957,7 +899,30 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
           <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}
+            ${input.omitRootDOMNode && input.rootDOMNode ? (() => {
+              const remaining = allRootNodes.length - rootNodes.length;
+              if (remaining <= 0) {
+                return nothing;
+              }
+              const root = input.rootDOMNode;
+              return html`
+                <li role="treeitem"
+                    class="elements-tree-expand-all"
+                    style="--indent: ${computeLeftIndent(0, false)}px"
+                    jslog=${VisualLogging.treeItem('show-all-nodes').parent('elementsTreeOutline')}>
+                  <devtools-button
+                      .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>
+              `;
+            })() : nothing}
+            ${input.omitRootDOMNode && input.rootDOMNode instanceof SDK.DOMModel.DOMDocument ? renderTopLayerContainer(input.rootDOMNode, 0) : nothing}
           </ul>
         `}>
       </devtools-tree>
@@ -966,6 +931,24 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
   /* clang-format on */
 };
 
+function getElementsTreeWidgetAndNode(element: Element): {node?: SDK.DOMModel.DOMNode, widget?: ElementsTreeWidget} {
+  let current: Element|null = element;
+  while (current) {
+    if (current.tagName === 'LI') {
+      const treeElement = UI.TreeOutline.TreeElement.getTreeElementBylistItemNode(current);
+      if (treeElement instanceof ElementsTreeElement) {
+        return {node: treeElement.node(), widget: treeElement.widget};
+      }
+    }
+    const widget = UI.Widget.Widget.get(current);
+    if (widget instanceof ElementsTreeWidget) {
+      return {node: widget.node, widget};
+    }
+    current = current.parentElementOrShadowHost();
+  }
+  return {};
+}
+
 /**
  * The main goal of this presenter is to wrap ElementsTreeOutline until
  * ElementsTreeOutline can be fully integrated into DOMTreeWidget.
@@ -1022,6 +1005,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   #rootDOMNode: SDK.DOMModel.DOMNode|null = null;
   #selectedDOMNode: SDK.DOMModel.DOMNode|null = null;
   #expandedNodes = new Set<SDK.DOMModel.DOMNode>();
+  #expandedChildrenLimitByNode = new WeakMap<SDK.DOMModel.DOMNode, number>();
 
   // FIXME: this is not declarative because ElementsTreeOutline can
   // change root node internally.
@@ -1119,6 +1103,10 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   #adoptedStyleSheetExpanded = new WeakMap<SDK.DOMModel.AdoptedStyleSheet, boolean>();
   #selectedAdoptedStyleSheet: SDK.DOMModel.AdoptedStyleSheet|null = null;
 
+  // TODO: Move #imagePreviewPopover and #issuePopoverHelper to the view once declarative versions exist.
+  #imagePreviewPopover?: ImagePreviewPopover;
+  #issuePopoverHelper?: UI.PopoverHelper.PopoverHelper;
+
   #view: View;
   #viewOutput: ViewOutput = {
     highlightedTreeElement: null,
@@ -1145,6 +1133,92 @@ export class DOMTreeWidget extends UI.Widget.Widget {
           SDK.OverlayModel.OverlayModel, SDK.OverlayModel.Events.INSPECT_MODE_WILL_BE_TOGGLED,
           this.#clearHighlightedNode, this, {scoped: true});
     }
+    this.#setupPopovers();
+  }
+
+  // TODO: Move imagePreviewPopover and issuePopoverHelper to the view once declarative versions exist.
+  #setupPopovers(): void {
+    this.#imagePreviewPopover = new ImagePreviewPopover(
+        this.contentElement,
+        event => {
+          let link: (Element|null) = (event.composedPath()[0] as Element | null);
+          while (link && link !== this.contentElement && !ImagePreviewPopover.getImageURL(link)) {
+            link = link.parentElementOrShadowHost();
+          }
+          return (link && link !== this.contentElement) ? link : null;
+        },
+        async link => {
+          const {node} = getElementsTreeWidgetAndNode(link);
+          return await UIComponentUtils.ImagePreview.loadPrecomputedFeatures(node);
+        });
+
+    this.#issuePopoverHelper = new UI.PopoverHelper.PopoverHelper(this.contentElement, event => {
+      const hoveredNode = event.composedPath()[0];
+      if (!(hoveredNode instanceof Element) || !hoveredNode.matches('.violating-element')) {
+        return null;
+      }
+
+      const {node, widget} = getElementsTreeWidgetAndNode(hoveredNode);
+      if (!node) {
+        return null;
+      }
+      let issues = 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;
+      }
+
+      return {
+        box: hoveredNode.boxInWindow(),
+        show: async (popover: UI.GlassPane.GlassPane) => {
+          popover.setIgnoreLeftMargin(true);
+          // clang-format off
+          render(html`
+            <div class="squiggles-content">
+              ${issues.map(issue => {
+            const elementIssueDetails = getElementIssueDetails(issue);
+            if (!elementIssueDetails) {
+              return nothing;
+            }
+            const issueKindIconName = IssueCounter.IssueCounter.getIssueKindIconName(issue.getKind());
+            const openIssueEvent = (): Promise<void> => Common.Revealer.reveal(issue);
+            return html`
+                  <div class="squiggles-content-item">
+                  <devtools-icon .name=${issueKindIconName} @click=${openIssueEvent}></devtools-icon>
+                  <devtools-link class="link" @click=${openIssueEvent}>${i18nString(UIStrings.viewIssue)}</devtools-link>
+                  <span>${elementIssueDetails.tooltip}</span>
+                  </div>`;
+          })}
+            </div>`, popover.contentElement);
+          // clang-format on
+          return true;
+        },
+      };
+    }, 'elements.issue');
+    this.#issuePopoverHelper.setTimeout(300);
+  }
+
+  #updateRecords = new Map<SDK.DOMModel.DOMNode, Elements.ElementUpdateRecord.ElementUpdateRecord>();
+
+  updateRecordsForTest(): Map<SDK.DOMModel.DOMNode, Elements.ElementUpdateRecord.ElementUpdateRecord> {
+    return this.#updateRecords;
+  }
+
+  #addUpdateRecord(node: SDK.DOMModel.DOMNode): Elements.ElementUpdateRecord.ElementUpdateRecord {
+    let record = this.#updateRecords.get(node);
+    if (!record) {
+      record = new Elements.ElementUpdateRecord.ElementUpdateRecord();
+      this.#updateRecords.set(node, record);
+    }
+    return record;
   }
 
   #onDocumentUpdated(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMModel>): void {
@@ -1153,6 +1227,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       this.#selectedDOMNode = null;
       this.#expandedNodes.clear();
       this.#currentHighlightedNode = null;
+      this.#updateRecords.clear();
     }
     if (domModel.existingDocument()) {
       this.rootDOMNode = domModel.existingDocument();
@@ -1160,8 +1235,123 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     this.onDocumentUpdated(domModel);
   }
 
-  #onDOMNodeChanged(): void {
-    this.requestUpdate();
+  #updateModifiedNodesTimeout?: number;
+
+  #updateModifiedNodesSoon(): void {
+    if (!this.#updateRecords.size) {
+      return;
+    }
+    if (this.#updateModifiedNodesTimeout) {
+      return;
+    }
+    this.#updateModifiedNodesTimeout = window.setTimeout(this.updateModifiedNodes.bind(this), 50);
+  }
+
+  #onNodeInserted(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode>): void {
+    const node = event.data;
+    if (node.parentNode) {
+      this.#addUpdateRecord(node.parentNode).nodeInserted(node);
+    }
+    this.#updateModifiedNodesSoon();
+  }
+
+  #onNodeRemoved(
+      event: Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode, parent: SDK.DOMModel.DOMNode}>): void {
+    const {node, parent} = event.data;
+    this.resetClipboardIfNeeded(node);
+    if (parent) {
+      this.#addUpdateRecord(parent).nodeRemoved(node);
+    }
+    this.#updateModifiedNodesSoon();
+  }
+
+  #onAttrModified(event: Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode, name: string}>): void {
+    const {node, name} = event.data;
+    this.#addUpdateRecord(node).attributeModified(name);
+    this.#updateModifiedNodesSoon();
+  }
+
+  #onAttrRemoved(event: Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode, name: string}>): void {
+    const {node, name} = event.data;
+    this.#addUpdateRecord(node).attributeRemoved(name);
+    this.#updateModifiedNodesSoon();
+  }
+
+  #onCharacterDataModified(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode>): void {
+    const node = event.data;
+    this.#addUpdateRecord(node).charDataModified();
+    if (node.parentNode && node.parentNode.firstChild === node.parentNode.lastChild) {
+      this.#addUpdateRecord(node.parentNode).childrenModified();
+    }
+    this.#updateModifiedNodesSoon();
+  }
+
+  #onChildNodeCountUpdated(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode>): void {
+    const node = event.data;
+    this.#addUpdateRecord(node).childrenModified();
+    this.#updateModifiedNodesSoon();
+  }
+
+  #onAdoptedStyleSheetsModified(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode>): void {
+    const node = event.data;
+    this.#addUpdateRecord(node).childrenModified();
+    this.#updateModifiedNodesSoon();
+  }
+
+  #onDistributedNodesChanged(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode>): void {
+    const node = event.data;
+    this.#addUpdateRecord(node).childrenModified();
+    this.#updateModifiedNodesSoon();
+  }
+
+  #onDocumentURLChanged(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMDocument>): void {
+    this.#addUpdateRecord(event.data).charDataModified();
+    this.#updateModifiedNodesSoon();
+  }
+
+  #onMarkersChanged(): void {
+    this.#updateModifiedNodesSoon();
+  }
+
+  updateModifiedNodes(): void {
+    if (this.#view === DECLARATIVE_VIEW) {
+      this.performUpdate();
+      return;
+    }
+    this.#viewOutput.elementsTreeOutline?.updateModifiedNodes();
+  }
+
+  #wireDOMModel(domModel: SDK.DOMModel.DOMModel): void {
+    domModel.addEventListener(SDK.DOMModel.Events.DocumentUpdated, this.#onDocumentUpdated, this);
+    domModel.addEventListener(SDK.DOMModel.Events.NodeInserted, this.#onNodeInserted, this);
+    domModel.addEventListener(SDK.DOMModel.Events.NodeRemoved, this.#onNodeRemoved, this);
+    domModel.addEventListener(SDK.DOMModel.Events.AttrModified, this.#onAttrModified, this);
+    domModel.addEventListener(SDK.DOMModel.Events.AttrRemoved, this.#onAttrRemoved, this);
+    domModel.addEventListener(SDK.DOMModel.Events.CharacterDataModified, this.#onCharacterDataModified, this);
+    domModel.addEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this.#onChildNodeCountUpdated, this);
+    domModel.addEventListener(SDK.DOMModel.Events.MarkersChanged, this.#onMarkersChanged, this);
+    domModel.addEventListener(SDK.DOMModel.Events.AdoptedStyleSheetsModified, this.#onAdoptedStyleSheetsModified, this);
+    domModel.addEventListener(SDK.DOMModel.Events.TopLayerElementsChanged, this.#onTopLayerElementsChanged, this);
+    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);
+  }
+
+  #unwireDOMModel(domModel: SDK.DOMModel.DOMModel): void {
+    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);
+    domModel.removeEventListener(SDK.DOMModel.Events.AttrModified, this.#onAttrModified, this);
+    domModel.removeEventListener(SDK.DOMModel.Events.AttrRemoved, this.#onAttrRemoved, this);
+    domModel.removeEventListener(SDK.DOMModel.Events.CharacterDataModified, this.#onCharacterDataModified, this);
+    domModel.removeEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this.#onChildNodeCountUpdated, this);
+    domModel.removeEventListener(SDK.DOMModel.Events.MarkersChanged, this.#onMarkersChanged, this);
+    domModel.removeEventListener(SDK.DOMModel.Events.AdoptedStyleSheetsModified, this.#onAdoptedStyleSheetsModified,
+                                 this);
+    domModel.removeEventListener(SDK.DOMModel.Events.TopLayerElementsChanged, this.#onTopLayerElementsChanged, this);
+    domModel.removeEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this.#onDistributedNodesChanged, this);
+    domModel.removeEventListener(SDK.DOMModel.Events.DocumentURLChanged, this.#onDocumentURLChanged, this);
+    domModel.removeEventListener(SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated, this.requestUpdate, this);
   }
 
   #onShowHTMLCommentsChange(): void {
@@ -1192,30 +1382,48 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   }
 
   selectDOMNode(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet|null, focus?: boolean): void {
+    this.#imagePreviewPopover?.hide();
+    this.#issuePopoverHelper?.hidePopover();
     if (node instanceof SDK.DOMModel.AdoptedStyleSheet) {
       this.highlightAdoptedStyleSheet(node);
       return;
     }
     this.#selectedAdoptedStyleSheet = null;
     if (this.#view === DECLARATIVE_VIEW) {
-      if (this.#selectedDOMNode === node) {
-        return;
-      }
+      const isSameNode = this.#selectedDOMNode === node;
       this.#selectedDOMNode = node;
       if (node) {
+        const ancestors: SDK.DOMModel.DOMNode[] = [];
         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(() => {
+          ancestors.unshift(current);
+        }
+        for (let i = 0; i < ancestors.length; ++i) {
+          const ancestor = ancestors[i];
+          const child = ancestors[i + 1] || node;
+          this.#expandedNodes.add(ancestor);
+          const visibleChildren = getVisibleChildren(ancestor, this.#showComments);
+          const childIndex = visibleChildren.indexOf(child);
+          if (childIndex !== -1 && childIndex >= this.expandedChildrenLimit(ancestor)) {
+            this.setExpandedChildrenLimit(ancestor, childIndex + 1);
+          }
+          if (!ancestor.children() && ancestor.childNodeCount()) {
+            void ancestor.getChildNodes(() => {
+              const visibleChildren = getVisibleChildren(ancestor, this.#showComments);
+              const childIndex = visibleChildren.indexOf(child);
+              if (childIndex !== -1 && childIndex >= this.expandedChildrenLimit(ancestor)) {
+                this.setExpandedChildrenLimit(ancestor, childIndex + 1);
+              }
               this.performUpdate();
             });
           }
         }
       }
       this.#clearHighlightedNode();
-      this.onSelectedNodeChanged(
-          {data: {node, focus: Boolean(focus)}} as
-          Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode | null, focus: boolean}>);
+      if (!isSameNode) {
+        this.onSelectedNodeChanged(
+            {data: {node, focus: Boolean(focus)}} as
+            Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode | null, focus: boolean}>);
+      }
       this.performUpdate();
       return;
     }
@@ -1281,6 +1489,30 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     return Boolean(this.#viewOutput.elementsTreeOutline?.findTreeElement(node)?.expanded);
   }
 
+  expandedChildrenLimit(node: SDK.DOMModel.DOMNode): number {
+    return this.#expandedChildrenLimitByNode.get(node) ?? InitialChildrenLimit;
+  }
+
+  setExpandedChildrenLimit(node: SDK.DOMModel.DOMNode, limit: number): void {
+    if (this.expandedChildrenLimit(node) === limit) {
+      return;
+    }
+    this.#expandedChildrenLimitByNode.set(node, limit);
+    if (this.#viewOutput.elementsTreeOutline) {
+      const treeElement = this.#viewOutput.elementsTreeOutline.findTreeElement(node);
+      if (treeElement && treeElement.expandedChildrenLimit() !== limit) {
+        this.#viewOutput.elementsTreeOutline.setExpandedChildrenLimit(treeElement, limit);
+      }
+    }
+    this.performUpdate();
+  }
+
+  expandAllChildren(node: SDK.DOMModel.DOMNode): void {
+    const currentLimit = this.expandedChildrenLimit(node);
+    const visibleChildren = getVisibleChildren(node, this.#showComments);
+    this.setExpandedChildrenLimit(node, Math.max(visibleChildren.length, currentLimit + InitialChildrenLimit));
+  }
+
   async expandRecursively(node: SDK.DOMModel.DOMNode, maxDepth = Number.MAX_VALUE): Promise<void> {
     if (this.#view === DECLARATIVE_VIEW) {
       await node.getSubtree(100, true);
@@ -1405,7 +1637,12 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   }
 
   override performUpdate(): void {
+    if (this.#updateModifiedNodesTimeout) {
+      clearTimeout(this.#updateModifiedNodesTimeout);
+      this.#updateModifiedNodesTimeout = undefined;
+    }
     const firstRender = !this.#viewOutput.elementsTreeOutline;
+    const updatedNodes = this.#view === DECLARATIVE_VIEW ? [...this.#updateRecords.keys()] : [];
     this.#view({
       domTreeWidget: this,
       rootDOMNode: this.#rootDOMNode,
@@ -1548,8 +1785,17 @@ export class DOMTreeWidget extends UI.Widget.Widget {
         this.selectDOMNode(null);
         this.performUpdate();
       },
+      expandedChildrenLimit: (node: SDK.DOMModel.DOMNode) => this.expandedChildrenLimit(node),
+      onExpandAllChildren: (node: SDK.DOMModel.DOMNode) => this.expandAllChildren(node),
+      updateRecordForNode: (node: SDK.DOMModel.DOMNode) => this.#updateRecords.get(node) ?? null,
     },
                this.#viewOutput, this.contentElement);
+    if (this.#view === DECLARATIVE_VIEW) {
+      this.#updateRecords.clear();
+      if (updatedNodes.length > 0) {
+        this.onElementsTreeUpdated({data: updatedNodes} as Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode[]>);
+      }
+    }
     if (this.#viewOutput.elementsTreeOutline) {
       this.#viewOutput.elementsTreeOutline.domTreeWidget = this;
     }
@@ -1564,16 +1810,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     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);
+        this.#wireDOMModel(domModel);
       }
       if (this.isShowing() && !domModel.parentModel() &&
           (!this.rootDOMNode || this.rootDOMNode.domModel() !== domModel)) {
@@ -1604,17 +1841,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     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.#unwireDOMModel(domModel);
       }
       this.performUpdate();
       return;
@@ -1698,8 +1925,10 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   }
 
   runPendingUpdates(): void {
-    this.#viewOutput.elementsTreeOutline?.runPendingUpdates();
-    this.performUpdate();
+    this.updateModifiedNodes();
+    if (this.#view !== DECLARATIVE_VIEW) {
+      this.performUpdate();
+    }
   }
 
   override onResize(): void {
@@ -1711,6 +1940,15 @@ export class DOMTreeWidget extends UI.Widget.Widget {
 
   override willHide(): void {
     super.willHide();
+    this.#imagePreviewPopover?.hide();
+    this.#issuePopoverHelper?.hidePopover();
+    if (this.#updateModifiedNodesTimeout) {
+      clearTimeout(this.#updateModifiedNodesTimeout);
+      this.#updateModifiedNodesTimeout = undefined;
+    }
+    if (this.#view === DECLARATIVE_VIEW) {
+      this.#updateRecords.clear();
+    }
     if (this.#multilineEditing) {
       this.#multilineEditing.cancel();
     }
@@ -2316,7 +2554,13 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   override wasHidden(): void {
     super.wasHidden();
     this.#visible = false;
-    this.#viewOutput.imagePreviewPopover?.hide();
+    if (this.#updateModifiedNodesTimeout) {
+      clearTimeout(this.#updateModifiedNodesTimeout);
+      this.#updateModifiedNodesTimeout = undefined;
+    }
+    if (this.#view === DECLARATIVE_VIEW) {
+      this.#updateRecords.clear();
+    }
     this.performUpdate();
   }
 
@@ -2324,10 +2568,28 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     super.detach(overrideHideOnDetach);
     this.#visible = false;
     this.#showHTMLCommentsSetting.removeChangeListener(this.#onShowHTMLCommentsChange, this);
-    this.#viewOutput.imagePreviewPopover?.hide();
+    if (this.#updateModifiedNodesTimeout) {
+      clearTimeout(this.#updateModifiedNodesTimeout);
+      this.#updateModifiedNodesTimeout = undefined;
+    }
+    if (this.#view === DECLARATIVE_VIEW) {
+      this.#updateRecords.clear();
+    }
     this.performUpdate();
   }
 
+  hideImagePreview(): void {
+    this.#imagePreviewPopover?.hide();
+  }
+
+  imagePreviewPopoverForTest(): ImagePreviewPopover|undefined {
+    return this.#imagePreviewPopover;
+  }
+
+  issuePopoverHelperForTest(): UI.PopoverHelper.PopoverHelper|undefined {
+    return this.#issuePopoverHelper;
+  }
+
   override show(parentElement: Element, insertBefore?: Node|null, suppressOrphanWidgetError = false): void {
     this.performUpdate();
     const domModels = SDK.TargetManager.TargetManager.instance().models(SDK.DOMModel.DOMModel, {scoped: true});
@@ -2355,9 +2617,13 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   }
 }
 
-export class ElementsTreeOutline extends
-    Common.ObjectWrapper.eventMixin<ElementsTreeOutline.EventTypes, typeof UI.TreeOutline.TreeOutline>(
-        UI.TreeOutline.TreeOutline) {
+const ElementsTreeOutlineBase:
+    Common.ObjectWrapper.EventMixin<ElementsTreeOutline.EventTypes, typeof UI.TreeOutline.TreeOutline> =
+    Common.ObjectWrapper.eventMixin(
+        UI.TreeOutline.TreeOutline,
+    );
+
+export class ElementsTreeOutline extends ElementsTreeOutlineBase {
   treeElementByNode: WeakMap<SDK.DOMModel.DOMNode, ElementsTreeElement>;
   private readonly shadowRoot: ShadowRoot;
   readonly elementInternal: HTMLElement;
@@ -3232,6 +3498,9 @@ export class ElementsTreeOutline extends
       return new AdoptedStyleSheetSetTreeElement(node);
     }
     const treeElement = new ElementsTreeElement(node, isClosingTag);
+    if (this.domTreeWidget) {
+      treeElement.setExpandedChildrenLimit(this.domTreeWidget.expandedChildrenLimit(node));
+    }
     treeElement.setExpandable(!isClosingTag && this.hasVisibleChildren(node));
     if (node.nodeType() === Node.ELEMENT_NODE && node.parentNode && node.parentNode.nodeType() === Node.DOCUMENT_NODE &&
         !node.parentNode.parentNode) {
@@ -3373,6 +3642,9 @@ export class ElementsTreeOutline extends
     }
 
     treeElement.setExpandedChildrenLimit(expandedChildrenLimit);
+    if (this.domTreeWidget && this.domTreeWidget.expandedChildrenLimit(treeElement.node()) !== expandedChildrenLimit) {
+      this.domTreeWidget.setExpandedChildrenLimit(treeElement.node(), expandedChildrenLimit);
+    }
     if (treeElement.treeOutline && !this.treeElementsBeingUpdated.has(treeElement)) {
       this.updateModifiedParentNode(treeElement.node());
     }