chrome-devtools-frontend 1.0.1675430 → 1.0.1678416

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -1238,9 +1238,50 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
   // clang-format on
 };
 
+type View = typeof DEFAULT_VIEW;
+
 export class ElementsTreeWidget extends UI.Widget.Widget {
-  treeElement: ElementsTreeElement&{treeOutline: ElementsTreeOutline | null};
-  nodeInternal: SDK.DOMModel.DOMNode;
+  #node!: SDK.DOMModel.DOMNode;
+  isClosingTag = false;
+  #expanded = false;
+  #isExpandable = false;
+  #selected = false;
+  isXMLMimeType = false;
+  disableEdits = false;
+  showAIButton = false;
+  isDOMNodeSelected = false;
+
+  expand?: () => void;
+  collapse?: () => void;
+  selectTreeElement?: (omitFocus?: boolean, selectedByUser?: boolean) => boolean | void;
+  expandRecursively?: (maxDepth?: number) => Promise<void>;
+  collapseChildren?: () => void;
+  childCount?: () => number;
+  closingTagElement?: () => Element | null;
+  updateShadowRootDepth?: (depth: number) => void;
+  computeLeftIndent?: () => number;
+  setChildrenListElementVisible?: (visible: boolean) => void;
+
+  findStartTagWidget?: () => ElementsTreeWidget | null;
+  selectDOMNode?: (node: SDK.DOMModel.DOMNode, selectedByUser?: boolean) => void;
+  revealInTopLayer?: (node: SDK.DOMModel.DOMNode) => void;
+  showContextMenu?: (event: Event) => void;
+  populateTreeElement?: () => Promise<void>;
+  updateNodeElementToIssue?: (nodeElement: Element, issues: IssuesManager.Issue.Issue[]) => void;
+  performCopyOrCut?: (isCut: boolean, node: SDK.DOMModel.DOMNode, isElement?: boolean) => void;
+  duplicateNode?: (node: SDK.DOMModel.DOMNode) => void;
+  pasteNode?: (node: SDK.DOMModel.DOMNode) => void;
+  canPaste?: (node: SDK.DOMModel.DOMNode) => boolean;
+  toggleHideElement?: (node: SDK.DOMModel.DOMNode) => Promise<void>;
+  isToggledToHidden?: (node: SDK.DOMModel.DOMNode) => boolean;
+  selectNodeAfterEdit?: (wasExpanded: boolean, error: string|null,
+                         newNode: SDK.DOMModel.DOMNode|null) => ElementsTreeWidget | null;
+  runPendingUpdates?: () => void;
+  focusOutline?: () => void;
+  setMultilineEditing?: (multilineEditing: EditorHandles|null) => void;
+  visibleWidth?: () => number;
+
+  #view: View;
 
   private searchQuery: string|null;
   #expandedChildrenLimit: number;
@@ -1279,16 +1320,57 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
   #updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null = null;
 
-  // Used to add the content to TreeElement's title element.
-  // Relied on by web tests.
+  get node(): SDK.DOMModel.DOMNode {
+    return this.#node;
+  }
 
-  constructor(treeElement: ElementsTreeElement) {
-    super();
-    this.treeElement = treeElement as ElementsTreeElement & {treeOutline: ElementsTreeOutline | null};
-    const node = treeElement.node();
-    const isClosingTag = treeElement.isClosingTag();
-    this.nodeInternal = node;
-    this.treeElement.treeOutline = null;
+  set node(node: SDK.DOMModel.DOMNode) {
+    this.#node = node;
+    if (!this.isClosingTag) {
+      void this.#updateAdorners();
+    }
+  }
+
+  get expanded(): boolean {
+    return this.#expanded;
+  }
+
+  set expanded(expanded: boolean) {
+    this.#expanded = expanded;
+    this.requestUpdate();
+  }
+
+  get isExpandable(): boolean {
+    return this.#isExpandable;
+  }
+
+  set isExpandable(isExpandable: boolean) {
+    this.#isExpandable = isExpandable;
+    this.requestUpdate();
+  }
+
+  get selected(): boolean {
+    return this.#selected;
+  }
+
+  set selected(selected: boolean) {
+    this.#selected = selected;
+    this.requestUpdate();
+  }
+
+  get tagTypeContext(): TagTypeContext {
+    if (this.isClosingTag) {
+      return {tagType: TagType.CLOSING};
+    }
+    return {
+      tagType: TagType.OPENING,
+      canAddAttributes: this.#node ? this.#node.nodeType() === Node.ELEMENT_NODE : false,
+    };
+  }
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
 
     this.searchQuery = null;
     this.#expandedChildrenLimit = InitialChildrenLimit;
@@ -1298,18 +1380,9 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     this.#hovered = false;
 
     this.editing = null;
-
-    if (!isClosingTag) {
-      void this.#updateAdorners();
-    }
     this.expandAllButtonElement = null;
   }
 
-  static animateOnDOMUpdate(treeElement: ElementsTreeElement): void {
-    const tagName = treeElement.listItemElement.querySelector('.webkit-html-tag-name');
-    UI.UIUtils.runCSSAnimationOnce(tagName || treeElement.listItemElement, DOM_UPDATE_ANIMATION_CLASS_NAME);
-  }
-
   static visibleShadowRoots(node: SDK.DOMModel.DOMNode): SDK.DOMModel.DOMNode[] {
     let roots = node.shadowRoots();
     if (roots.length && !Common.Settings.Settings.instance().moduleSetting('show-ua-shadow-dom').get()) {
@@ -1358,6 +1431,11 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     }
   }
 
+  animateOnDOMUpdate(): void {
+    const tagName = this.contentElement.querySelector('.webkit-html-tag-name');
+    UI.UIUtils.runCSSAnimationOnce(tagName || this.contentElement, DOM_UPDATE_ANIMATION_CLASS_NAME);
+  }
+
   #clearDOMNextUpdate = false;
 
   override performUpdate(): void {
@@ -1371,108 +1449,90 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       this.#clearDOMNextUpdate = false;
       Lit.render(Lit.nothing, this.contentElement, {host: this});
     }
-    const isClosingTag = this.treeElement.isClosingTag();
+    const isClosingTag = this.isClosingTag;
     const output: ViewOutput = {};
-    DEFAULT_VIEW({
-      node: this.nodeInternal,
+    this.#view({
+      node: this.node,
       isClosingTag,
-      expanded: this.treeElement.expanded,
-      isExpandable: this.treeElement.isExpandable(),
-      isXMLMimeType: Boolean(this.treeElement.treeOutline?.isXMLMimeType),
+      expanded: this.#expanded,
+      isExpandable: this.#isExpandable,
+      isXMLMimeType: this.isXMLMimeType,
       updateRecord: this.#updateRecord,
       onHighlightSearchResults: () => this.#highlightSearchResults(),
-      onExpand: () => this.treeElement.expand(),
+      onExpand: () => this.expand?.(),
 
       containerAdornerActive: this.#containerAdornerActive,
-      adProvenance: this.nodeInternal.adProvenance(),
+      adProvenance: this.node.adProvenance(),
       adTooltipId: this.#adTooltipId,
-      target: this.nodeInternal.domModel().target(),
+      target: this.node.domModel().target(),
       showContainerAdorner: Boolean(this.#layout?.containerType) && !isClosingTag,
       containerType: this.#layout?.containerType,
       showFlexAdorner: Boolean(this.#layout?.isFlex) && !isClosingTag,
       flexAdornerActive: this.#flexAdornerActive,
       showGridAdorner: Boolean(this.#layout?.isGrid) && !isClosingTag,
       showGridLanesAdorner: Boolean(this.#layout?.isGridLanes) && !isClosingTag,
-      showMediaAdorner: this.node().isMediaNode() && !isClosingTag,
-      showPopoverAdorner: Boolean(this.node().attributes().find(attr => attr.name === 'popover')) && !isClosingTag,
+      showMediaAdorner: this.node.isMediaNode() && !isClosingTag,
+      showPopoverAdorner: Boolean(this.node.attributes().find(attr => attr.name === 'popover')) && !isClosingTag,
       showInterestAdorner: Boolean(Root.Runtime.hostConfig.devToolsAllowInterestForcing?.enabled) &&
-          Boolean(this.node().attributes().find(attr =>
-                                                    attr.name === 'interesttarget' || attr.name === 'interestfor')) &&
+          Boolean(this.node.attributes().find(attr => attr.name === 'interesttarget' || attr.name === 'interestfor')) &&
           !isClosingTag,
-      showTopLayerAdorner: this.node().topLayerIndex() !== -1 && !isClosingTag,
+      showTopLayerAdorner: this.node.topLayerIndex() !== -1 && !isClosingTag,
       gridAdornerActive: this.#gridAdornerActive,
       popoverAdornerActive: this.#popoverAdornerActive,
       interestAdornerActive: this.#interestAdornerActive,
       isSubgrid: Boolean(this.#layout?.isSubgrid),
-      showViewSourceAdorner: this.nodeInternal.isRootNode() && isOpeningTag(this.treeElement.tagTypeContext),
-      showScrollAdorner: ((this.node().nodeName() === 'HTML' && this.node().ownerDocument?.isScrollable()) ||
-                          (this.node().nodeName() !== '#document' && this.node().isScrollable())) &&
+      showViewSourceAdorner: this.node.isRootNode() && isOpeningTag(this.tagTypeContext),
+      showScrollAdorner: ((this.node.nodeName() === 'HTML' && this.node.ownerDocument?.isScrollable()) ||
+                          (this.node.nodeName() !== '#document' && this.node.isScrollable())) &&
           !isClosingTag,
       decorations: this.#decorations,
-      descendantDecorations: this.treeElement.expanded ? [] : this.#descendantDecorations,
+      descendantDecorations: this.#expanded ? [] : this.#descendantDecorations,
       decorationsTooltip: this.#decorationsTooltip,
-      indent: this.computeLeftIndent(),
+      indent: this.computeLeftIndent ? this.computeLeftIndent() : 0,
       showScrollSnapAdorner: Boolean(this.#layout?.hasScroll) && !isClosingTag,
       scrollSnapAdornerActive: this.#scrollSnapAdornerActive,
-      showSlotAdorner: Boolean(this.nodeInternal.assignedSlot) && !isClosingTag,
-      showCustomElementAdorner: this.node().isCustomElement() && !isClosingTag,
-      onCustomElementAdornerClick: this.treeElement.treeOutline?.disableEdits ?
-          () => {} :
-          (event: Event) => void this.#onCustomElementAdornerClick(event),
-      showStartingStyleAdorner: this.nodeInternal.affectedByStartingStyles() && !isClosingTag,
+      showSlotAdorner: Boolean(this.node.assignedSlot) && !isClosingTag,
+      showCustomElementAdorner: this.node.isCustomElement() && !isClosingTag,
+      onCustomElementAdornerClick: this.disableEdits ? () => {} :
+                                                       (event: Event) => void this.#onCustomElementAdornerClick(event),
+      showStartingStyleAdorner: this.node.affectedByStartingStyles() && !isClosingTag,
       startingStyleAdornerActive: this.#startingStyleAdornerActive,
-      onStartingStyleAdornerClick: this.treeElement.treeOutline?.disableEdits ?
-          () => {} :
-          (event: Event) => this.#onStartingStyleAdornerClick(event),
+      onStartingStyleAdornerClick: this.disableEdits ? () => {} :
+                                                       (event: Event) => this.#onStartingStyleAdornerClick(event),
       onSlotAdornerClick:
           () => {
-            if (this.nodeInternal.assignedSlot) {
-              const deferredNode = this.nodeInternal.assignedSlot.deferredNode;
+            if (this.node.assignedSlot) {
+              const deferredNode = this.node.assignedSlot.deferredNode;
               deferredNode.resolve(node => {
                 void Common.Revealer.reveal(node);
               });
             }
           },
-      topLayerIndex: this.node().topLayerIndex(),
-      onViewSourceAdornerClick: this.treeElement.treeOutline?.disableEdits ? () => {} :
-                                                                             this.revealHTMLInSources.bind(this),
-      onGutterClick: this.showContextMenu.bind(this),
-      onContainerAdornerClick: this.treeElement.treeOutline?.disableEdits ?
-          () => {} :
-          (event: Event) => this.#onContainerAdornerClick(event),
-      onFlexAdornerClick:
-          this.treeElement.treeOutline?.disableEdits ? () => {} : (event: Event) => this.#onFlexAdornerClick(event),
-      onGridAdornerClick:
-          this.treeElement.treeOutline?.disableEdits ? () => {} : (event: Event) => this.#onGridAdornerClick(event),
-      onMediaAdornerClick:
-          this.treeElement.treeOutline?.disableEdits ? () => {} : (event: Event) => this.#onMediaAdornerClick(event),
-      onPopoverAdornerClick:
-          this.treeElement.treeOutline?.disableEdits ? () => {} : (event: Event) => this.#onPopoverAdornerClick(event),
-      onInterestAdornerClick:
-          this.treeElement.treeOutline?.disableEdits ? () => {} : (event: Event) => this.#onInterestAdornerClick(event),
-      onScrollSnapAdornerClick: this.treeElement.treeOutline?.disableEdits ?
-          () => {} :
-          (event: Event) => this.#onScrollSnapAdornerClick(event),
-      onTopLayerAdornerClick: this.treeElement.treeOutline?.disableEdits ?
-          () => {} :
-          () => {
-            if (!this.treeElement.treeOutline) {
-              return;
-            }
-            this.treeElement.treeOutline.revealInTopLayer(this.node());
-          },
+      topLayerIndex: this.node.topLayerIndex(),
+      onViewSourceAdornerClick: this.disableEdits ? () => {} : this.revealHTMLInSources.bind(this),
+      onGutterClick: this.showContextMenu ? (event: Event) => this.showContextMenu?.(event) : () => {},
+      onContainerAdornerClick: this.disableEdits ? () => {} : (event: Event) => this.#onContainerAdornerClick(event),
+      onFlexAdornerClick: this.disableEdits ? () => {} : (event: Event) => this.#onFlexAdornerClick(event),
+      onGridAdornerClick: this.disableEdits ? () => {} : (event: Event) => this.#onGridAdornerClick(event),
+      onMediaAdornerClick: this.disableEdits ? () => {} : (event: Event) => this.#onMediaAdornerClick(event),
+      onPopoverAdornerClick: this.disableEdits ? () => {} : (event: Event) => this.#onPopoverAdornerClick(event),
+      onInterestAdornerClick: this.disableEdits ? () => {} : (event: Event) => this.#onInterestAdornerClick(event),
+      onScrollSnapAdornerClick: this.disableEdits ? () => {} : (event: Event) => this.#onScrollSnapAdornerClick(event),
+      onTopLayerAdornerClick: this.disableEdits ? () => {} :
+                                                  () => {
+                                                    this.revealInTopLayer?.(this.node);
+                                                  },
       isHovered: this.#hovered,
-      isSelected: this.treeElement.selected,
-      canInspect: this.node().canInspectNode(),
-      showAiButton: Boolean(this.#hovered || this.treeElement.selected) &&
-          this.node().nodeType() === Node.ELEMENT_NODE && this.isAiButtonEnabled() &&
-          (this.treeElement.treeOutline as ElementsTreeOutline)?.showAIButton,
+      isSelected: this.#selected,
+      canInspect: this.node.canInspectNode(),
+      showAiButton: Boolean(this.#hovered || this.#selected) && this.node.nodeType() === Node.ELEMENT_NODE &&
+          this.isAiButtonEnabled() && this.showAIButton,
       aiButtonTitle: this.isAiButtonEnabled() ?
           UI.ActionRegistry.ActionRegistry.instance().getAction('freestyler.elements-floating-button').title() :
           undefined,
       onAiButtonClick: (ev: Event) => {
         ev.stopPropagation();
-        this.treeElement.select(true, false);
+        this.selectTreeElement?.(true, false);
         const action = UI.ActionRegistry.ActionRegistry.instance().getAction('freestyler.elements-floating-button');
         if (action) {
           void action.execute();
@@ -1481,7 +1541,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       editorState: this.#editorState,
       editorWidth: this.#editorWidth,
     },
-                 output, this.contentElement);
+               output, this.contentElement);
 
     this.#editorRef = output.editorRef;
     if (this.#updateRecord) {
@@ -1491,7 +1551,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
   async #onCustomElementAdornerClick(event: Event): Promise<void> {
     event.stopPropagation();
-    const node = this.node();
+    const node = this.node;
     const object = await node.resolveToObject('');
     if (!object) {
       return;
@@ -1529,7 +1589,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
   #onContainerAdornerClick(event: Event): void {
     event.stopPropagation();
-    const node = this.node();
+    const node = this.node;
     const nodeId = node.id;
     if (!nodeId) {
       return;
@@ -1548,7 +1608,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
   #onFlexAdornerClick(event: Event): void {
     event.stopPropagation();
-    const node = this.node();
+    const node = this.node;
     const nodeId = node.id;
     if (!nodeId) {
       return;
@@ -1567,7 +1627,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
   #onGridAdornerClick(event: Event): void {
     event.stopPropagation();
-    const node = this.node();
+    const node = this.node;
     const nodeId = node.id;
     if (!nodeId) {
       return;
@@ -1594,7 +1654,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       const widget = await view.widget();
       if (widget instanceof Media.MainView.MainView) {
         await widget.waitForInitialPlayers();
-        widget.selectPlayerByDOMNodeId(this.node().backendNodeId());
+        widget.selectPlayerByDOMNodeId(this.node.backendNodeId());
       }
     }
   }
@@ -1603,7 +1663,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     // If the attribute is not found, we highlight the tag name instead.
     let animationElement = this.contentElement.querySelector('.webkit-html-tag-name') ?? this.element;
 
-    if (this.nodeInternal.getAttribute(attributeName) !== undefined) {
+    if (this.node.getAttribute(attributeName) !== undefined) {
       const tag = this.contentElement.querySelector('.webkit-html-tag');
       const attributes = tag?.getElementsByClassName('webkit-html-attribute') ?? [];
       for (const attribute of attributes) {
@@ -1621,10 +1681,6 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     return Boolean(this.#layout?.isContents);
   }
 
-  node(): SDK.DOMModel.DOMNode {
-    return this.nodeInternal;
-  }
-
   get isEditing(): boolean {
     return Boolean(this.editing);
   }
@@ -1695,7 +1751,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       if (attribute.getElementsByClassName('webkit-html-attribute-name')[0].textContent === name) {
         const attributeElement = attribute.getElementsByClassName('webkit-html-attribute-name')[0];
         attributeElement.classList.add('violating-element');
-        this.#updateNodeElementToIssue(attributeElement, issue);
+        this.#recordAndNotifyIssue(attributeElement, issue);
       }
     }
   }
@@ -1703,17 +1759,17 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
   #highlightTagAsViolating(issue: IssuesManager.Issue.Issue): void {
     const tagElement = this.contentElement.querySelectorAll('.webkit-html-tag-name')[0];
     tagElement.classList.add('violating-element');
-    this.#updateNodeElementToIssue(tagElement, issue);
+    this.#recordAndNotifyIssue(tagElement, issue);
   }
 
-  #updateNodeElementToIssue(nodeElement: Element, issue: IssuesManager.Issue.Issue): void {
+  #recordAndNotifyIssue(nodeElement: Element, issue: IssuesManager.Issue.Issue): void {
     let issues = this.#nodeElementToIssue.get(nodeElement);
     if (!issues) {
       issues = [];
       this.#nodeElementToIssue.set(nodeElement, issues);
     }
     issues.push(issue);
-    this.treeElement.treeOutline?.updateNodeElementToIssue(nodeElement, issues);
+    this.updateNodeElementToIssue?.(nodeElement, issues);
   }
 
   removeIssue(issue: IssuesManager.Issue.Issue): void {
@@ -1774,7 +1830,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     } else {
       this.#nodeElementToIssue.set(nodeElement, issues);
     }
-    this.treeElement.treeOutline?.updateNodeElementToIssue(nodeElement, issues);
+    this.updateNodeElementToIssue?.(nodeElement, issues);
   }
 
   expandedChildrenLimit(): number {
@@ -1791,25 +1847,20 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
   onbind(): void {
     this.requestUpdate();
-    if (this.treeElement.treeOutline && !this.treeElement.isClosingTag()) {
-      this.treeElement.treeOutline.treeElementByNode.set(this.nodeInternal, this.treeElement);
-      this.nodeInternal.addEventListener(
-          SDK.DOMModel.DOMNodeEvents.TOP_LAYER_INDEX_CHANGED, this.onTopLayerIndexChanged, this);
-      this.nodeInternal.addEventListener(
-          SDK.DOMModel.DOMNodeEvents.SCROLLABLE_FLAG_UPDATED, this.#onScrollableFlagUpdated, this);
-      this.nodeInternal.addEventListener(
-          SDK.DOMModel.DOMNodeEvents.AD_RELATED_STATE_UPDATED, this.#onAdRelatedStateUpdated, this);
-      this.nodeInternal.addEventListener(
-          SDK.DOMModel.DOMNodeEvents.CONTAINER_QUERY_OVERLAY_STATE_CHANGED,
-          this.#onPersistentContainerQueryOverlayStateChanged, this);
-      this.nodeInternal.addEventListener(
-          SDK.DOMModel.DOMNodeEvents.FLEX_CONTAINER_OVERLAY_STATE_CHANGED,
-          this.#onPersistentFlexContainerOverlayStateChanged, this);
-      this.nodeInternal.addEventListener(
-          SDK.DOMModel.DOMNodeEvents.GRID_OVERLAY_STATE_CHANGED, this.#onPersistentGridOverlayStateChanged, this);
-      this.nodeInternal.addEventListener(
-          SDK.DOMModel.DOMNodeEvents.SCROLL_SNAP_OVERLAY_STATE_CHANGED, this.#onPersistentScrollSnapOverlayStateChanged,
-          this);
+    if (!this.isClosingTag) {
+      this.node.addEventListener(SDK.DOMModel.DOMNodeEvents.TOP_LAYER_INDEX_CHANGED, this.onTopLayerIndexChanged, this);
+      this.node.addEventListener(SDK.DOMModel.DOMNodeEvents.SCROLLABLE_FLAG_UPDATED, this.#onScrollableFlagUpdated,
+                                 this);
+      this.node.addEventListener(SDK.DOMModel.DOMNodeEvents.AD_RELATED_STATE_UPDATED, this.#onAdRelatedStateUpdated,
+                                 this);
+      this.node.addEventListener(SDK.DOMModel.DOMNodeEvents.CONTAINER_QUERY_OVERLAY_STATE_CHANGED,
+                                 this.#onPersistentContainerQueryOverlayStateChanged, this);
+      this.node.addEventListener(SDK.DOMModel.DOMNodeEvents.FLEX_CONTAINER_OVERLAY_STATE_CHANGED,
+                                 this.#onPersistentFlexContainerOverlayStateChanged, this);
+      this.node.addEventListener(SDK.DOMModel.DOMNodeEvents.GRID_OVERLAY_STATE_CHANGED,
+                                 this.#onPersistentGridOverlayStateChanged, this);
+      this.node.addEventListener(SDK.DOMModel.DOMNodeEvents.SCROLL_SNAP_OVERLAY_STATE_CHANGED,
+                                 this.#onPersistentScrollSnapOverlayStateChanged, this);
     }
   }
 
@@ -1818,7 +1869,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     // ElementsPanel.
     // We do not change the ElementsTreeElement state in case the
     // element is bound again.
-    DEFAULT_VIEW({
+    this.#view({
       node: null,
       isClosingTag: false,
       expanded: false,
@@ -1879,7 +1930,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       editorState: null,
       editorWidth: null,
     },
-                 {}, this.contentElement);
+               {}, this.contentElement);
   }
 
   onunbind(): void {
@@ -1887,27 +1938,20 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       this.editing.cancel();
     }
     this.clearView();
-    if (this.treeElement.treeOutline &&
-        this.treeElement.treeOutline.treeElementByNode.get(this.nodeInternal) === this.treeElement) {
-      this.treeElement.treeOutline.treeElementByNode.delete(this.nodeInternal);
-    }
-    this.nodeInternal.removeEventListener(
-        SDK.DOMModel.DOMNodeEvents.TOP_LAYER_INDEX_CHANGED, this.onTopLayerIndexChanged, this);
-    this.nodeInternal.removeEventListener(
-        SDK.DOMModel.DOMNodeEvents.SCROLLABLE_FLAG_UPDATED, this.#onScrollableFlagUpdated, this);
-    this.nodeInternal.removeEventListener(
-        SDK.DOMModel.DOMNodeEvents.AD_RELATED_STATE_UPDATED, this.#onAdRelatedStateUpdated, this);
-    this.nodeInternal.removeEventListener(
-        SDK.DOMModel.DOMNodeEvents.CONTAINER_QUERY_OVERLAY_STATE_CHANGED,
-        this.#onPersistentContainerQueryOverlayStateChanged, this);
-    this.nodeInternal.removeEventListener(
-        SDK.DOMModel.DOMNodeEvents.FLEX_CONTAINER_OVERLAY_STATE_CHANGED,
-        this.#onPersistentFlexContainerOverlayStateChanged, this);
-    this.nodeInternal.removeEventListener(
-        SDK.DOMModel.DOMNodeEvents.GRID_OVERLAY_STATE_CHANGED, this.#onPersistentGridOverlayStateChanged, this);
-    this.nodeInternal.removeEventListener(
-        SDK.DOMModel.DOMNodeEvents.SCROLL_SNAP_OVERLAY_STATE_CHANGED, this.#onPersistentScrollSnapOverlayStateChanged,
-        this);
+    this.node.removeEventListener(SDK.DOMModel.DOMNodeEvents.TOP_LAYER_INDEX_CHANGED, this.onTopLayerIndexChanged,
+                                  this);
+    this.node.removeEventListener(SDK.DOMModel.DOMNodeEvents.SCROLLABLE_FLAG_UPDATED, this.#onScrollableFlagUpdated,
+                                  this);
+    this.node.removeEventListener(SDK.DOMModel.DOMNodeEvents.AD_RELATED_STATE_UPDATED, this.#onAdRelatedStateUpdated,
+                                  this);
+    this.node.removeEventListener(SDK.DOMModel.DOMNodeEvents.CONTAINER_QUERY_OVERLAY_STATE_CHANGED,
+                                  this.#onPersistentContainerQueryOverlayStateChanged, this);
+    this.node.removeEventListener(SDK.DOMModel.DOMNodeEvents.FLEX_CONTAINER_OVERLAY_STATE_CHANGED,
+                                  this.#onPersistentFlexContainerOverlayStateChanged, this);
+    this.node.removeEventListener(SDK.DOMModel.DOMNodeEvents.GRID_OVERLAY_STATE_CHANGED,
+                                  this.#onPersistentGridOverlayStateChanged, this);
+    this.node.removeEventListener(SDK.DOMModel.DOMNodeEvents.SCROLL_SNAP_OVERLAY_STATE_CHANGED,
+                                  this.#onPersistentScrollSnapOverlayStateChanged, this);
   }
 
   #onScrollableFlagUpdated(): void {
@@ -1940,7 +1984,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
   #onScrollSnapAdornerClick(event: Event): void {
     event.stopPropagation();
-    const node = this.node();
+    const node = this.node;
     const nodeId = node.id;
     if (!nodeId) {
       return;
@@ -1959,53 +2003,42 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       this.requestUpdate();
     }
 
-    this.treeElement.updateTitle();
+    this.updateTitle();
     this.element.draggable = true;
   }
 
   async onpopulate(): Promise<void> {
-    if (this.treeElement.treeOutline) {
-      return await this.treeElement.treeOutline.populateTreeElement(this.treeElement);
+    if (this.populateTreeElement) {
+      return await this.populateTreeElement();
     }
   }
 
   onexpand(): void {
-    if (this.treeElement.isClosingTag()) {
+    if (this.isClosingTag) {
       return;
     }
 
-    this.treeElement.updateTitle();
+    this.updateTitle();
   }
 
   oncollapse(): void {
-    if (this.treeElement.isClosingTag()) {
+    if (this.isClosingTag) {
       return;
     }
 
-    this.treeElement.updateTitle();
+    this.updateTitle();
   }
 
   onselect(selectedByUser?: boolean): boolean {
-    if (!this.treeElement.treeOutline) {
+    if (!this.selectDOMNode) {
       return false;
     }
-    this.treeElement.treeOutline.suppressRevealAndSelect = true;
-    this.treeElement.treeOutline.selectDOMNode(this.nodeInternal, selectedByUser);
+    this.selectDOMNode(this.node, selectedByUser);
     if (selectedByUser) {
-      this.nodeInternal.highlight();
+      this.node.highlight();
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.ChangeInspectedNodeInElementsPanel);
     }
     this.requestUpdate();
-    this.treeElement.treeOutline.suppressRevealAndSelect = false;
-    return true;
-  }
-
-  ondelete(): boolean {
-    if (!this.treeElement.treeOutline) {
-      return false;
-    }
-    const startTagTreeElement = this.treeElement.treeOutline.findTreeElement(this.nodeInternal);
-    startTagTreeElement ? (void (startTagTreeElement as ElementsTreeElement).remove()) : (void this.remove());
     return true;
   }
 
@@ -2023,7 +2056,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
   }
 
   ondblclick(event: Event): boolean {
-    if (this.editing || this.treeElement.isClosingTag()) {
+    if (this.editing || this.isClosingTag) {
       return false;
     }
     const target = (event.composedPath()[0] || event.target) as Element;
@@ -2031,14 +2064,13 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       return false;
     }
 
-    if (this.treeElement.isExpandable() && !this.treeElement.expanded) {
-      this.treeElement.expand();
+    if (this.#isExpandable && !this.#expanded) {
+      this.expand?.();
     }
     return false;
   }
-
   hasEditableNode(): boolean {
-    return !this.nodeInternal.isShadowRoot() && !this.nodeInternal.ancestorUserAgentShadowRoot();
+    return !this.node.isShadowRoot() && !this.node.ancestorUserAgentShadowRoot();
   }
 
   private insertInLastAttributePosition(tag: Element, node: Element): void {
@@ -2058,12 +2090,12 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
   }
 
   private startEditingTarget(eventTarget: Element): boolean {
-    if (!this.treeElement.treeOutline || this.treeElement.treeOutline.selectedDOMNode() !== this.nodeInternal) {
+    if (!this.isDOMNodeSelected) {
       return false;
     }
 
-    if (this.nodeInternal.nodeType() !== Node.ELEMENT_NODE && this.nodeInternal.nodeType() !== Node.TEXT_NODE &&
-        this.nodeInternal.nodeType() !== Node.PROCESSING_INSTRUCTION_NODE) {
+    if (this.node.nodeType() !== Node.ELEMENT_NODE && this.node.nodeType() !== Node.TEXT_NODE &&
+        this.node.nodeType() !== Node.PROCESSING_INSTRUCTION_NODE) {
       return false;
     }
 
@@ -2080,23 +2112,19 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
     const tagName = eventTarget.enclosingNodeOrSelfWithClass('webkit-html-tag-name');
     if (tagName) {
-      return this.treeElement.startEditingTagName(tagName);
+      return this.startEditingTagName(tagName);
     }
 
     const newAttribute = eventTarget.enclosingNodeOrSelfWithClass('add-attribute');
     if (newAttribute) {
-      return this.treeElement.addNewAttribute();
+      return this.addNewAttribute();
     }
 
     return false;
   }
 
-  private showContextMenu(event: Event): void {
-    this.treeElement.treeOutline && void this.treeElement.treeOutline.showContextMenu(this.treeElement, event);
-  }
-
   private revealHTMLInSources(): void {
-    const frameOwnerId = this.nodeInternal.frameOwnerFrameId();
+    const frameOwnerId = this.node.frameOwnerFrameId();
     if (frameOwnerId) {
       const frame = SDK.FrameManager.FrameManager.instance().getFrame(frameOwnerId);
       if (frame) {
@@ -2107,16 +2135,13 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
   }
 
   async populateTagContextMenu(contextMenu: UI.ContextMenu.ContextMenu, event: Event): Promise<void> {
-    // Add attribute-related actions.
-    const treeElement = this.treeElement.isClosingTag() && this.treeElement.treeOutline ?
-        this.treeElement.treeOutline.findTreeElement(this.nodeInternal) as ElementsTreeElement | null :
-        this.treeElement;
-    if (!treeElement) {
+    const targetWidget = this.isClosingTag ? this.findStartTagWidget?.() : this;
+    if (!targetWidget) {
       return;
     }
-    contextMenu.editSection().appendItem(
-        i18nString(UIStrings.addAttribute), treeElement.addNewAttribute.bind(treeElement),
-        {jslogContext: 'add-attribute'});
+    contextMenu.editSection().appendItem(i18nString(UIStrings.addAttribute),
+                                         targetWidget.addNewAttribute.bind(targetWidget),
+                                         {jslogContext: 'add-attribute'});
 
     const target = (event.composedPath()[0] || event.target) as Element;
     const attribute = target.enclosingNodeOrSelfWithClass('webkit-html-attribute');
@@ -2127,15 +2152,15 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
           {jslogContext: 'edit-attribute'});
     }
     await this.populateNodeContextMenu(contextMenu);
-    ElementsTreeWidget.populateForcedPseudoStateItems(contextMenu, treeElement.node());
+    ElementsTreeWidget.populateForcedPseudoStateItems(contextMenu, this.node);
     this.populateScrollIntoView(contextMenu);
     contextMenu.viewSection().appendItem(i18nString(UIStrings.focus), async () => {
-      await this.nodeInternal.focus();
+      await this.node.focus();
     }, {jslogContext: 'focus'});
   }
 
   populatePseudoElementContextMenu(contextMenu: UI.ContextMenu.ContextMenu): void {
-    if (this.treeElement.childCount() !== 0) {
+    if ((this.childCount?.() ?? 0) !== 0) {
       this.populateExpandRecursively(contextMenu);
     }
 
@@ -2143,15 +2168,15 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
   }
 
   private populateExpandRecursively(contextMenu: UI.ContextMenu.ContextMenu): void {
-    contextMenu.viewSection().appendItem(i18nString(UIStrings.expandRecursively),
-                                         this.treeElement.expandRecursively.bind(this.treeElement),
-                                         {jslogContext: 'expand-recursively'});
+    if (this.expandRecursively) {
+      contextMenu.viewSection().appendItem(i18nString(UIStrings.expandRecursively),
+                                           () => void this.expandRecursively?.(), {jslogContext: 'expand-recursively'});
+    }
   }
 
   private populateScrollIntoView(contextMenu: UI.ContextMenu.ContextMenu): void {
-    contextMenu.viewSection().appendItem(
-        i18nString(UIStrings.scrollIntoView), () => this.nodeInternal.scrollIntoView(),
-        {jslogContext: 'scroll-into-view'});
+    contextMenu.viewSection().appendItem(i18nString(UIStrings.scrollIntoView), () => this.node.scrollIntoView(),
+                                         {jslogContext: 'scroll-into-view'});
   }
 
   private isAiButtonEnabled(): boolean {
@@ -2175,14 +2200,10 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       contextMenu.editSection().appendItem(i18nString(UIStrings.editAsHtml), this.editAsHTML.bind(this), { jslogContext: 'elements.edit-as-html' });
     }
     // clang-format on
-    const isShadowRoot = this.nodeInternal.isShadowRoot();
+    const isShadowRoot = this.node.isShadowRoot();
 
     const createShortcut = UI.KeyboardShortcut.KeyboardShortcut.shortcutToString.bind(null);
     const modifier = UI.KeyboardShortcut.Modifiers.CtrlOrMeta.value;
-    const treeOutline = this.treeElement.treeOutline;
-    if (!treeOutline) {
-      return;
-    }
     let menuItem;
 
     const openAiAssistanceId = 'freestyler.element-panel-context';
@@ -2195,8 +2216,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
           UI.UIUtils.PromotionManager.instance().recordFeatureInteraction(openAiAssistanceId);
         }, {disabled: !action.enabled(), jslogContext});
       }
-
-      UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, this.nodeInternal);
+      UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, this.node);
       const action = UI.ActionRegistry.ActionRegistry.instance().getAction(openAiAssistanceId);
       const submenu = contextMenu.footerSection().appendSubMenuItem(action.title(), false, openAiAssistanceId);
       submenu.defaultSection().appendAction(openAiAssistanceId, i18nString(UIStrings.startAChat));
@@ -2321,8 +2341,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
         },
       ];
 
-      const layoutProps =
-          await this.nodeInternal.domModel().cssModel().getLayoutPropertiesFromComputedStyle(this.nodeInternal.id);
+      const layoutProps = await this.node.domModel().cssModel().getLayoutPropertiesFromComputedStyle(this.node.id);
       const config = submenuConfigs.find(c => c.condition(layoutProps));
       if (config) {
         for (const item of config.items) {
@@ -2332,26 +2351,24 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       }
     }
 
-    menuItem = contextMenu.clipboardSection().appendItem(
-        i18nString(UIStrings.cut), treeOutline.performCopyOrCut.bind(treeOutline, true, this.nodeInternal),
-        {disabled: !this.hasEditableNode(), jslogContext: 'cut'});
+    menuItem = contextMenu.clipboardSection().appendItem(i18nString(UIStrings.cut),
+                                                         () => this.performCopyOrCut?.(true, this.node),
+                                                         {disabled: !this.hasEditableNode(), jslogContext: 'cut'});
     menuItem.setShortcut(createShortcut('X', modifier));
 
     // Place it here so that all "Copy"-ing items stick together.
     const copyMenu = contextMenu.clipboardSection().appendSubMenuItem(i18nString(UIStrings.copy), false, 'copy');
     const section = copyMenu.section();
     if (!isShadowRoot) {
-      menuItem = section.appendItem(
-          i18nString(UIStrings.copyOuterhtml), treeOutline.performCopyOrCut.bind(treeOutline, false, this.nodeInternal),
-          {jslogContext: 'copy-outer-html'});
+      menuItem = section.appendItem(i18nString(UIStrings.copyOuterhtml),
+                                    () => this.performCopyOrCut?.(false, this.node), {jslogContext: 'copy-outer-html'});
       menuItem.setShortcut(createShortcut('V', modifier));
     }
-    if (this.nodeInternal.nodeType() === Node.ELEMENT_NODE) {
+    if (this.node.nodeType() === Node.ELEMENT_NODE) {
       section.appendItem(
           i18nString(UIStrings.copySelector), this.copyCSSPath.bind(this), {jslogContext: 'copy-selector'});
-      section.appendItem(
-          i18nString(UIStrings.copyJsPath), this.copyJSPath.bind(this),
-          {disabled: !canGetJSPath(this.nodeInternal), jslogContext: 'copy-js-path'});
+      section.appendItem(i18nString(UIStrings.copyJsPath), this.copyJSPath.bind(this),
+                         {disabled: !canGetJSPath(this.node), jslogContext: 'copy-js-path'});
       section.appendItem(
           i18nString(UIStrings.copyStyles), this.copyStyles.bind(this), {jslogContext: 'elements.copy-styles'});
     }
@@ -2361,31 +2378,31 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
           i18nString(UIStrings.copyFullXpath), this.copyFullXPath.bind(this), {jslogContext: 'copy-full-xpath'});
     }
 
-    menuItem = copyMenu.clipboardSection().appendItem(
-        i18nString(UIStrings.copyElement),
-        treeOutline.performCopyOrCut.bind(treeOutline, false, this.nodeInternal, true), {jslogContext: 'copy-element'});
+    menuItem = copyMenu.clipboardSection().appendItem(i18nString(UIStrings.copyElement),
+                                                      () => this.performCopyOrCut?.(false, this.node, true),
+                                                      {jslogContext: 'copy-element'});
     menuItem.setShortcut(createShortcut('C', modifier));
 
     if (!isShadowRoot) {
       // Duplicate element, disabled on root element and ShadowDOM.
-      const isRootElement = !this.nodeInternal.parentNode || this.nodeInternal.parentNode.nodeName() === '#document';
-      menuItem = contextMenu.editSection().appendItem(
-          i18nString(UIStrings.duplicateElement), treeOutline.duplicateNode.bind(treeOutline, this.nodeInternal), {
-            disabled: (this.nodeInternal.isInShadowTree() || isRootElement),
-            jslogContext: 'elements.duplicate-element',
-          });
+      const isRootElement = !this.node.parentNode || this.node.parentNode.nodeName() === '#document';
+      menuItem = contextMenu.editSection().appendItem(i18nString(UIStrings.duplicateElement),
+                                                      () => this.duplicateNode?.(this.node), {
+                                                        disabled: (this.node.isInShadowTree() || isRootElement),
+                                                        jslogContext: 'elements.duplicate-element',
+                                                      });
     }
 
-    menuItem = contextMenu.clipboardSection().appendItem(
-        i18nString(UIStrings.paste), treeOutline.pasteNode.bind(treeOutline, this.nodeInternal),
-        {disabled: !treeOutline.canPaste(this.nodeInternal), jslogContext: 'paste'});
+    menuItem =
+        contextMenu.clipboardSection().appendItem(i18nString(UIStrings.paste), () => this.pasteNode?.(this.node),
+                                                  {disabled: !this.canPaste?.(this.node), jslogContext: 'paste'});
     menuItem.setShortcut(createShortcut('V', modifier));
 
-    menuItem = contextMenu.debugSection().appendCheckboxItem(
-        i18nString(UIStrings.hideElement), treeOutline.toggleHideElement.bind(treeOutline, this.nodeInternal), {
-          checked: treeOutline.isToggledToHidden(this.nodeInternal),
-          jslogContext: 'elements.hide-element',
-        });
+    menuItem = contextMenu.debugSection().appendCheckboxItem(i18nString(UIStrings.hideElement),
+                                                             () => this.toggleHideElement?.(this.node), {
+                                                               checked: Boolean(this.isToggledToHidden?.(this.node)),
+                                                               jslogContext: 'elements.hide-element',
+                                                             });
     menuItem.setShortcut(
         UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutTitleForAction('elements.hide-element') || '');
 
@@ -2395,8 +2412,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     }
 
     this.populateExpandRecursively(contextMenu);
-    contextMenu.viewSection().appendItem(i18nString(UIStrings.collapseChildren),
-                                         this.treeElement.collapseChildren.bind(this.treeElement),
+    contextMenu.viewSection().appendItem(i18nString(UIStrings.collapseChildren), () => this.collapseChildren?.(),
                                          {jslogContext: 'collapse-children'});
     contextMenu.viewSection().appendItem(i18nString(UIStrings.switchToAccessibilityTree),
                                          () => ElementsPanel.instance().toggleAccessibilityTree(),
@@ -2407,9 +2423,9 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
         deviceModeWrapperAction.handleAction.bind(
             null, UI.Context.Context.instance(), 'emulation.capture-node-screenshot'),
         {jslogContext: 'emulation.capture-node-screenshot'});
-    if (this.nodeInternal.frameOwnerFrameId()) {
+    if (this.node.frameOwnerFrameId()) {
       contextMenu.viewSection().appendItem(i18nString(UIStrings.showFrameDetails), () => {
-        const frameOwnerFrameId = this.nodeInternal.frameOwnerFrameId();
+        const frameOwnerFrameId = this.node.frameOwnerFrameId();
         if (frameOwnerFrameId) {
           const frame = SDK.FrameManager.FrameManager.instance().getFrame(frameOwnerFrameId);
           void Common.Revealer.reveal(frame);
@@ -2419,49 +2435,44 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
   }
 
   async populateProcessingElementContextMenu(contextMenu: UI.ContextMenu.ContextMenu): Promise<void> {
-    const treeOutline = this.treeElement.treeOutline;
-    if (!treeOutline) {
-      return;
-    }
-
     contextMenu.editSection().appendItem(
         i18nString(UIStrings.editData), this.startEditingProcessingInstructionValue.bind(this),
         {jslogContext: 'elements.edit-data'});
-    contextMenu.editSection().appendItem(
-        i18nString(UIStrings.duplicateElement), treeOutline.duplicateNode.bind(treeOutline, this.nodeInternal), {
-          disabled: (this.nodeInternal.isInShadowTree()),
-          jslogContext: 'elements.duplicate-element',
-        });
+    contextMenu.editSection().appendItem(i18nString(UIStrings.duplicateElement), () => this.duplicateNode?.(this.node),
+                                         {
+                                           disabled: (this.node.isInShadowTree()),
+                                           jslogContext: 'elements.duplicate-element',
+                                         });
     contextMenu.editSection().appendItem(
         i18nString(UIStrings.deleteElement), this.remove.bind(this), {jslogContext: 'delete-element'});
   }
 
   private startEditing(): boolean|undefined {
-    if (!this.treeElement.treeOutline || this.treeElement.treeOutline.selectedDOMNode() !== this.nodeInternal) {
+    if (!this.isDOMNodeSelected) {
       return;
     }
 
     const listItem = this.element;
 
-    if (isOpeningTag(this.treeElement.tagTypeContext) && this.treeElement.tagTypeContext.canAddAttributes) {
+    if (isOpeningTag(this.tagTypeContext) && this.tagTypeContext.canAddAttributes) {
       const attribute = listItem.getElementsByClassName('webkit-html-attribute')[0];
       if (attribute) {
         return this.startEditingAttribute(
             attribute, attribute.getElementsByClassName('webkit-html-attribute-value')[0]);
       }
 
-      return this.treeElement.addNewAttribute();
+      return this.addNewAttribute();
     }
 
-    if (this.nodeInternal.nodeType() === Node.TEXT_NODE) {
+    if (this.node.nodeType() === Node.TEXT_NODE) {
       const textNode = listItem.getElementsByClassName('webkit-html-text-node')[0];
       if (textNode) {
         return this.startEditingTextNode(textNode);
       }
     }
 
-    if (this.nodeInternal.nodeType() === Node.PROCESSING_INSTRUCTION_NODE) {
-      return this.treeElement.startEditingProcessingInstructionValue();
+    if (this.node.nodeType() === Node.PROCESSING_INSTRUCTION_NODE) {
+      return this.startEditingProcessingInstructionValue();
     }
 
     return;
@@ -2481,7 +2492,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     // a parent node. Use a temporary span container for the HTML.
     const container = document.createDocumentFragment();
 
-    Lit.render(renderAttribute({name: ' ', value: ''}, null, false, this.nodeInternal), container);
+    Lit.render(renderAttribute({name: ' ', value: ''}, null, false, this.node), container);
     const attr = container.firstElementChild as HTMLElement;
     attr.style.marginLeft = '2px';   // overrides the .editing margin rule
     attr.style.marginRight = '2px';  // overrides the .editing margin rule
@@ -2546,14 +2557,14 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     }
 
     let attributeValue = attributeName && attributeValueElement ?
-        this.nodeInternal.getAttribute(attributeName)?.replaceAll('"', '&quot;') :
+        this.node.getAttribute(attributeName)?.replaceAll('"', '&quot;') :
         undefined;
 
     const isRelation =
         attributeName === 'popovertarget' || attributeName === 'interesttarget' || attributeName === 'commandfor';
     if (isRelation && attributeName && attributeValueElement) {
-      const rawValue = this.nodeInternal.getAttribute(attributeName) || '';
-      const relatedElement = relatedElementsCache.get(this.nodeInternal)?.get(`${attributeName}:${rawValue}`);
+      const rawValue = this.node.getAttribute(attributeName) || '';
+      const relatedElement = relatedElementsCache.get(this.node)?.get(`${attributeName}:${rawValue}`);
       if (relatedElement) {
         attributeValue = relatedElement.getAttribute('id') || '';
       }
@@ -2592,7 +2603,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       return true;
     }
 
-    let textNode: SDK.DOMModel.DOMNode = this.nodeInternal;
+    let textNode: SDK.DOMModel.DOMNode = this.node;
     // We only show text nodes inline in elements if the element only
     // has a single child, and that child is a text node.
     if (textNode.nodeType() === Node.ELEMENT_NODE && textNode.firstChild) {
@@ -2705,9 +2716,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     }
 
     // Hide children item.
-    if (this.treeElement.childrenListElement) {
-      this.treeElement.childrenListElement.style.display = 'none';
-    }
+    this.setChildrenListElementVisible?.(false);
     const initialValue = convertUnicodeCharsToHTMLEntities(maybeInitialValue).text;
     // Append editor.
     this.#editorState = CodeMirror.EditorState.create({
@@ -2791,14 +2800,13 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     this.requestUpdate();
     resize.call(this);
     this.editing = {commit: commit.bind(this), cancel: dispose.bind(this), resize: resize.bind(this)};
-    (this.treeElement.treeOutline as ElementsTreeOutline | null)?.setMultilineEditing(this.editing);
+    this.setMultilineEditing?.(this.editing);
     await this.updateComplete;
     this.#editorRef?.focus();
 
     function resize(this: ElementsTreeWidget): void {
-      if (this.treeElement.treeOutline) {
-        this.#editorWidth =
-            (this.treeElement.treeOutline as ElementsTreeOutline).visibleWidth() - this.computeLeftIndent() - 30;
+      if (this.visibleWidth) {
+        this.#editorWidth = this.visibleWidth() - (this.computeLeftIndent ? this.computeLeftIndent() : 0) - 30;
         this.requestUpdate();
       }
     }
@@ -2818,14 +2826,12 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       this.#editorState = null;
       this.requestUpdate();
       // Unhide children item.
-      if (this.treeElement.childrenListElement) {
-        this.treeElement.childrenListElement.style.removeProperty('display');
-      }
+      this.setChildrenListElementVisible?.(true);
 
-      if (this.treeElement.treeOutline) {
-        (this.treeElement.treeOutline as ElementsTreeOutline).setMultilineEditing(null);
-        this.treeElement.treeOutline.focus();
+      if (this.setMultilineEditing) {
+        this.setMultilineEditing(null);
       }
+      this.focusOutline?.();
 
       disposeCallback();
     }
@@ -2840,8 +2846,6 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       ): void {
     this.editing = null;
 
-    const treeOutline = this.treeElement.treeOutline;
-
     function moveToNextAttributeIfNeeded(this: ElementsTreeWidget, error?: string|null): void {
       if (error) {
         this.editingCancelled(element, attributeName);
@@ -2851,13 +2855,11 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
         return;
       }
 
-      if (treeOutline) {
-        (treeOutline as ElementsTreeOutline).runPendingUpdates();
-        treeOutline.focus();
-      }
+      this.runPendingUpdates?.();
+      this.focusOutline?.();
 
       // Search for the attribute's position, and then decide where to move to.
-      const attributes = this.nodeInternal.attributes();
+      const attributes = this.node.attributes();
       for (let i = 0; i < attributes.length; ++i) {
         if (attributes[i].name !== attributeName) {
           continue;
@@ -2865,12 +2867,12 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
         if (moveDirection === 'backward') {
           if (i === 0) {
-            this.treeElement.startEditingTagName();
+            this.startEditingTagName();
           } else {
             this.triggerEditAttribute(attributes[i - 1].name);
           }
         } else if (i === attributes.length - 1) {
-          this.treeElement.addNewAttribute();
+          this.addNewAttribute();
         } else {
           this.triggerEditAttribute(attributes[i + 1].name);
         }
@@ -2890,20 +2892,20 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
         }
       } else if (moveDirection === 'forward') {
         if (!Platform.StringUtilities.isWhitespace(newText)) {
-          this.treeElement.addNewAttribute();
+          this.addNewAttribute();
         } else {
-          this.treeElement.startEditingTagName();
+          this.startEditingTagName();
         }
       }
     }
 
     if (attributeName !== null && (attributeName.trim() || newText.trim()) && oldText !== newText) {
-      this.nodeInternal.setAttribute(attributeName, newText, moveToNextAttributeIfNeeded.bind(this));
+      this.node.setAttribute(attributeName, newText, moveToNextAttributeIfNeeded.bind(this));
       Badges.UserBadges.instance().recordAction(Badges.BadgeAction.DOM_ELEMENT_OR_ATTRIBUTE_EDITED);
       return;
     }
 
-    this.treeElement.updateTitle();
+    this.updateTitle();
     moveToNextAttributeIfNeeded.call(this);
   }
 
@@ -2928,21 +2930,21 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     }
 
     function moveToNextAttributeIfNeeded(this: ElementsTreeWidget): void {
-      if (this.nodeInternal.nodeType() === Node.PROCESSING_INSTRUCTION_NODE) {
-        this.treeElement.startEditingProcessingInstructionValue();
+      if (this.node.nodeType() === Node.PROCESSING_INSTRUCTION_NODE) {
+        this.startEditingProcessingInstructionValue();
         return;
       }
 
       if (moveDirection !== 'forward') {
-        this.treeElement.addNewAttribute();
+        this.addNewAttribute();
         return;
       }
 
-      const attributes = this.nodeInternal.attributes();
+      const attributes = this.node.attributes();
       if (attributes.length > 0) {
         this.triggerEditAttribute(attributes[0].name);
       } else {
-        this.treeElement.addNewAttribute();
+        this.addNewAttribute();
       }
     }
 
@@ -2952,24 +2954,21 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       return;
     }
 
-    const treeOutline = this.treeElement.treeOutline;
-    const wasExpanded = this.treeElement.expanded;
+    const wasExpanded = this.#expanded;
 
-    this.nodeInternal.setNodeName(newText, (error, newNode) => {
+    this.node.setNodeName(newText, (error, newNode) => {
       if (error || !newNode) {
         cancel();
         return;
       }
-      if (!treeOutline) {
+      if (!this.selectNodeAfterEdit) {
         return;
       }
 
       Badges.UserBadges.instance().recordAction(Badges.BadgeAction.DOM_ELEMENT_OR_ATTRIBUTE_EDITED);
-      const newTreeItem =
-          (treeOutline as ElementsTreeOutline).selectNodeAfterEdit(wasExpanded, error, newNode) as ElementsTreeElement |
-          null;
-      if (newTreeItem) {
-        moveToNextAttributeIfNeeded.call(newTreeItem.widget);
+      const newWidget = this.selectNodeAfterEdit(wasExpanded, error, newNode);
+      if (newWidget) {
+        moveToNextAttributeIfNeeded.call(newWidget);
       }
     });
   }
@@ -2979,7 +2978,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
     function callback(this: ElementsTreeWidget): void {
       this.#clearDOMNextUpdate = true;
-      this.treeElement.updateTitle();
+      this.updateTitle();
     }
     textNode.setNodeValue(newText, callback.bind(this));
   }
@@ -2989,7 +2988,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
     // Need to restore attributes structure.
     this.#clearDOMNextUpdate = true;
-    this.treeElement.updateTitle();
+    this.updateTitle();
   }
 
   private distinctClosingTagElement(): Element|null {
@@ -2997,9 +2996,8 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
     // For an expanded element, it will be the last element with class "close"
     // in the child element list.
-    if (this.treeElement.expanded) {
-      const closers = this.treeElement.childrenListElement.querySelectorAll('.close');
-      return closers[closers.length - 1];
+    if (this.#expanded) {
+      return this.closingTagElement?.() ?? null;
     }
 
     // Remaining cases are single line non-expanded elements with a closing
@@ -3016,21 +3014,16 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       return;
     }
     this.#updateRecord = updateRecord ?? null;
-    if (this.nodeInternal.nodeType() === Node.DOCUMENT_FRAGMENT_NODE && this.nodeInternal.isInShadowTree() &&
-        this.nodeInternal.shadowRootType()) {
-      this.treeElement.childrenListElement.classList.add('shadow-root');
+    if (this.node.nodeType() === Node.DOCUMENT_FRAGMENT_NODE && this.node.isInShadowTree() &&
+        this.node.shadowRootType()) {
       let depth = 4;
-      for (let node: (SDK.DOMModel.DOMNode|null) = (this.nodeInternal as SDK.DOMModel.DOMNode | null); depth && node;
+      for (let node: (SDK.DOMModel.DOMNode|null) = (this.node as SDK.DOMModel.DOMNode | null); depth && node;
            node = node.parentNode) {
         if (node.nodeType() === Node.DOCUMENT_FRAGMENT_NODE) {
           depth--;
         }
       }
-      if (!depth) {
-        this.treeElement.childrenListElement.classList.add('shadow-root-deep');
-      } else {
-        this.treeElement.childrenListElement.classList.add('shadow-root-depth-' + depth);
-      }
+      this.updateShadowRootDepth?.(depth);
     }
     this.performUpdate();
     this.updateDecorations();
@@ -3043,28 +3036,16 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     this.#highlightSearchResults();
   }
 
-  private computeLeftIndent(): number {
-    let treeElement: (UI.TreeOutline.TreeElement|null) = this.treeElement.parent;
-    let depth = 0;
-    while (treeElement !== null) {
-      depth++;
-      treeElement = treeElement.parent;
-    }
-
-    /** Keep it in sync with elementsTreeOutline.css **/
-    return 12 * (depth - 2) + (this.treeElement.isExpandable() && this.treeElement.isCollapsible() ? 1 : 12);
-  }
-
   updateDecorations(): void {
     // Important to keep the entire tree node row as a clickable area for that
     // node.
-    this.element.style.setProperty('--indent', this.computeLeftIndent() + 'px');
+    this.element.style.setProperty('--indent', (this.computeLeftIndent ? this.computeLeftIndent() : 0) + 'px');
 
-    if (this.treeElement.isClosingTag()) {
+    if (this.isClosingTag) {
       return;
     }
 
-    if (this.nodeInternal.nodeType() !== Node.ELEMENT_NODE) {
+    if (this.node.nodeType() !== Node.ELEMENT_NODE) {
       return;
     }
 
@@ -3072,19 +3053,11 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
   }
 
   #updateDecorations(): Promise<void> {
-    if (!this.treeElement.treeOutline) {
-      return Promise.resolve();
-    }
-
-    const node = this.nodeInternal;
-
-    const outline = this.treeElement.treeOutline as ElementsTreeOutline;
-    if (!outline.decoratorExtensions) {
-      outline.decoratorExtensions = getRegisteredDecorators();
-    }
+    const node = this.node;
+    const decoratorExtensions = getRegisteredDecorators();
 
     const markerToExtension = new Map<string, MarkerDecoratorRegistration>();
-    for (const decoratorExtension of (outline.decoratorExtensions || [])) {
+    for (const decoratorExtension of decoratorExtensions) {
       markerToExtension.set(decoratorExtension.marker, decoratorExtension);
     }
 
@@ -3131,7 +3104,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       for (const decoration of decorations) {
         tooltip.push(decoration.title);
       }
-      if (!this.treeElement.expanded && descendantDecorations.length) {
+      if (!this.#expanded && descendantDecorations.length) {
         tooltip.push(i18nString(UIStrings.children));
         for (const decoration of descendantDecorations) {
           tooltip.push(decoration.title);
@@ -3143,22 +3116,18 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
   }
 
   async remove(): Promise<void> {
-    if (this.treeElement.treeOutline?.isToggledToHidden(this.nodeInternal)) {
+    if (this.isToggledToHidden?.(this.node)) {
       // Unhide the node before removing. This avoids inconsistent state if the node is restored via undo.
-      await (this.treeElement.treeOutline as ElementsTreeOutline).toggleHideElement(this.nodeInternal);
-    }
-    if (this.nodeInternal.pseudoType()) {
-      return;
+      await this.toggleHideElement?.(this.node);
     }
-    const parentElement = this.treeElement.parent;
-    if (!parentElement) {
+    if (this.node.pseudoType()) {
       return;
     }
 
-    if (!this.nodeInternal.parentNode || this.nodeInternal.parentNode.nodeType() === Node.DOCUMENT_NODE) {
+    if (!this.node.parentNode || this.node.parentNode.nodeType() === Node.DOCUMENT_NODE) {
       return;
     }
-    void this.nodeInternal.removeNode();
+    void this.node.removeNode();
   }
 
   toggleEditAsHTML(callback?: ((arg0: boolean) => void), startEditing?: boolean): void {
@@ -3189,28 +3158,28 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       }
     }
 
-    const node = this.nodeInternal;
+    const node = this.node;
     void node.getOuterHTML().then(this.startEditingAsHTML.bind(this, commitChange, disposeCallback));
   }
 
   private copyCSSPath(): void {
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(cssPath(this.nodeInternal, true));
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(cssPath(this.node, true));
   }
 
   private copyJSPath(): void {
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(jsPath(this.nodeInternal, true));
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(jsPath(this.node, true));
   }
 
   private copyXPath(): void {
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(xPath(this.nodeInternal, true));
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(xPath(this.node, true));
   }
 
   private copyFullXPath(): void {
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(xPath(this.nodeInternal, false));
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(xPath(this.node, false));
   }
 
   async copyStyles(): Promise<void> {
-    const node = this.nodeInternal;
+    const node = this.node;
     const cssModel = node.domModel().cssModel();
     const cascade = await cssModel.cachedMatchedCascadeForNode(node);
     if (!cascade) {
@@ -3267,7 +3236,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
   }
 
   private editAsHTML(): void {
-    const promise = Common.Revealer.reveal(this.node());
+    const promise = Common.Revealer.reveal(this.node);
     void promise.then(() => {
       const action = UI.ActionRegistry.ActionRegistry.instance().getAction('elements.edit-as-html');
       return action.execute();
@@ -3280,10 +3249,10 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
   }
 
   async #updateAdorners(): Promise<void> {
-    if (this.treeElement.isClosingTag()) {
+    if (this.isClosingTag) {
       return;
     }
-    const node = this.node();
+    const node = this.node;
     const nodeId = node.id;
     if (node.nodeType() !== Node.COMMENT_NODE && node.nodeType() !== Node.DOCUMENT_FRAGMENT_NODE &&
         node.nodeType() !== Node.TEXT_NODE && nodeId !== undefined) {
@@ -3296,7 +3265,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
   async #onPopoverAdornerClick(event: Event): Promise<void> {
     event.stopPropagation();
-    const node = this.node();
+    const node = this.node;
     const nodeId = node.id;
     if (!nodeId) {
       return;
@@ -3311,7 +3280,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
   async #onInterestAdornerClick(event: Event): Promise<void> {
     event.stopPropagation();
-    const node = this.node();
+    const node = this.node;
     const nodeId = node.id;
     if (!nodeId) {
       return;
@@ -3326,7 +3295,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
   #onStartingStyleAdornerClick(event: Event): void {
     event.stopPropagation();
-    const node = this.node();
+    const node = this.node;
     const nodeId = node.id;
     if (!nodeId) {
       return;
@@ -3345,11 +3314,22 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   widget: ElementsTreeWidget;
   widgetWrapper: HTMLElement;
   nodeInternal: SDK.DOMModel.DOMNode;
-  tagTypeContext: TagTypeContext;
+  #isClosingTag: boolean;
+
+  get tagTypeContext(): TagTypeContext {
+    if (this.#isClosingTag) {
+      return {tagType: TagType.CLOSING};
+    }
+    return {
+      tagType: TagType.OPENING,
+      canAddAttributes: this.nodeInternal.nodeType() === Node.ELEMENT_NODE,
+    };
+  }
 
   constructor(node: SDK.DOMModel.DOMNode, isClosingTag?: boolean) {
     super();
     this.nodeInternal = node;
+    this.#isClosingTag = Boolean(isClosingTag);
     this.listItemElement.setAttribute(
         'jslog', `${VisualLogging.treeItem().parent('elementsTreeOutline').track({
           keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Backspace|Delete|Enter|Space|Home|End',
@@ -3358,18 +3338,51 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           click: true,
         })}`);
 
-    if (isClosingTag) {
-      this.tagTypeContext = {tagType: TagType.CLOSING};
-    } else {
-      this.tagTypeContext = {
-        tagType: TagType.OPENING,
-        canAddAttributes: this.nodeInternal.nodeType() === Node.ELEMENT_NODE,
-      };
-    }
     this.widgetWrapper = document.createElement('div');
     this.widgetWrapper.style.display = 'contents';
     this.title = this.widgetWrapper;
-    this.widget = new ElementsTreeWidget(this);
+    this.widget = new ElementsTreeWidget();
+    this.widget.isClosingTag = this.#isClosingTag;
+    this.widget.node = this.nodeInternal;
+    this.widget.childCount = () => this.childCount();
+    this.widget.expand = () => this.expand();
+    this.widget.collapse = () => this.collapse();
+    this.widget.selectTreeElement = (omitFocus, selectedByUser) => {
+      return this.select(omitFocus, selectedByUser);
+    };
+    this.widget.expandRecursively = () => this.expandRecursively();
+    this.widget.collapseChildren = () => this.collapseChildren();
+    this.widget.closingTagElement = () => {
+      const closers = this.childrenListElement.querySelectorAll('.close');
+      return closers[closers.length - 1] ?? null;
+    };
+    this.widget.updateShadowRootDepth = (depth: number) => {
+      this.childrenListElement.classList.add('shadow-root');
+      if (!depth) {
+        this.childrenListElement.classList.add('shadow-root-deep');
+      } else {
+        this.childrenListElement.classList.add('shadow-root-depth-' + depth);
+      }
+    };
+    this.widget.computeLeftIndent = () => {
+      let treeElement: (UI.TreeOutline.TreeElement|null) = this.parent;
+      let depth = 0;
+      while (treeElement !== null) {
+        depth++;
+        treeElement = treeElement.parent;
+      }
+      return 12 * (depth - 2) + (this.isExpandable() && this.isCollapsible() ? 1 : 12);
+    };
+    this.widget.setChildrenListElementVisible = (visible: boolean) => {
+      if (this.childrenListElement) {
+        if (visible) {
+          this.childrenListElement.style.removeProperty('display');
+        } else {
+          this.childrenListElement.style.display = 'none';
+        }
+      }
+    };
+    this.treeOutline = null;
     this.widget.element.classList.remove('vbox', 'flex-auto');
     this.widget.element.style.display = 'contents';
     this.widget.markAsRoot();
@@ -3460,10 +3473,50 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   isClosingTag(): boolean {
-    return this.tagTypeContext.tagType === TagType.CLOSING;
+    return this.#isClosingTag;
+  }
+
+  #syncOutlineProperties(): void {
+    const outline = this.treeOutline as ElementsTreeOutline | null;
+    if (outline) {
+      this.widget.isXMLMimeType = Boolean(outline.isXMLMimeType);
+      this.widget.disableEdits = Boolean(outline.disableEdits);
+      this.widget.showAIButton = Boolean(outline.showAIButton);
+      this.widget.expanded = this.expanded;
+      this.widget.isExpandable = this.isExpandable();
+      this.widget.selected = this.selected;
+      this.widget.isDOMNodeSelected = outline.selectedDOMNode() === this.nodeInternal;
+      this.widget.selectDOMNode = (node, selectedByUser) => {
+        outline.suppressRevealAndSelect = true;
+        outline.selectDOMNode(node, selectedByUser);
+        outline.suppressRevealAndSelect = false;
+      };
+      this.widget.findStartTagWidget = () => {
+        return (outline.findTreeElement(this.nodeInternal) as ElementsTreeElement | null)?.widget ?? null;
+      };
+      this.widget.revealInTopLayer = node => outline.revealInTopLayer(node);
+      this.widget.showContextMenu = event => void outline.showContextMenu(this, event);
+      this.widget.populateTreeElement = async () => await outline.populateTreeElement(this);
+      this.widget.updateNodeElementToIssue = (el, issues) => outline.updateNodeElementToIssue(el, issues);
+      this.widget.performCopyOrCut = (isCut, node, isElement) => outline.performCopyOrCut(isCut, node, isElement);
+      this.widget.duplicateNode = node => outline.duplicateNode(node);
+      this.widget.pasteNode = node => outline.pasteNode(node);
+      this.widget.canPaste = node => outline.canPaste(node);
+      this.widget.toggleHideElement = node => outline.toggleHideElement(node);
+      this.widget.isToggledToHidden = node => outline.isToggledToHidden(node);
+      this.widget.selectNodeAfterEdit = (wasExpanded, error, newNode) => {
+        const newTreeItem = outline.selectNodeAfterEdit(wasExpanded, error, newNode);
+        return newTreeItem?.widget ?? null;
+      };
+      this.widget.runPendingUpdates = () => outline.runPendingUpdates();
+      this.widget.focusOutline = () => outline.focus();
+      this.widget.setMultilineEditing = multilineEditing => outline.setMultilineEditing(multilineEditing);
+      this.widget.visibleWidth = () => outline.visibleWidth();
+    }
   }
 
   override onattach(): void {
+    this.#syncOutlineProperties();
     this.widget.onattach();
   }
 
@@ -3477,10 +3530,14 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   override onexpand(): void {
+    this.widget.expanded = true;
+    this.widget.isExpandable = this.isExpandable();
     this.widget.onexpand();
   }
 
   override oncollapse(): void {
+    this.widget.expanded = false;
+    this.widget.isExpandable = this.isExpandable();
     this.widget.oncollapse();
   }
 
@@ -3492,14 +3549,28 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   override onselect(selectedByUser?: boolean): boolean {
+    this.widget.selected = true;
+    this.#syncOutlineProperties();
     return this.widget.onselect(selectedByUser);
   }
 
+  override deselect(): void {
+    super.deselect();
+    this.widget.selected = false;
+    this.#syncOutlineProperties();
+  }
+
   override ondelete(): boolean {
-    return this.widget.ondelete();
+    if (!this.treeOutline) {
+      return false;
+    }
+    const startTagTreeElement = (this.treeOutline as ElementsTreeOutline).findTreeElement(this.nodeInternal);
+    startTagTreeElement ? (void (startTagTreeElement as ElementsTreeElement).remove()) : (void this.remove());
+    return true;
   }
 
   override onenter(): boolean {
+    this.#syncOutlineProperties();
     return this.widget.onenter();
   }
 
@@ -3517,19 +3588,28 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   override ondblclick(event: Event): boolean {
+    this.#syncOutlineProperties();
     return this.widget.ondblclick(event);
   }
 
   override onbind(): void {
+    const outline = this.treeOutline as ElementsTreeOutline | null;
+    if (outline && !this.isClosingTag()) {
+      outline.treeElementByNode.set(this.nodeInternal, this);
+    }
     this.widget.onbind();
   }
 
   override onunbind(): void {
+    const outline = this.treeOutline as ElementsTreeOutline | null;
+    if (outline && outline.treeElementByNode.get(this.nodeInternal) === this) {
+      outline.treeElementByNode.delete(this.nodeInternal);
+    }
     this.widget.onunbind();
   }
 
   static animateOnDOMUpdate(treeElement: ElementsTreeElement): void {
-    ElementsTreeWidget.animateOnDOMUpdate(treeElement);
+    treeElement.widget.animateOnDOMUpdate();
   }
 
   static visibleShadowRoots(node: SDK.DOMModel.DOMNode): SDK.DOMModel.DOMNode[] {
@@ -3556,6 +3636,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   updateAdorners(): void {
+    this.#syncOutlineProperties();
     this.widget.updateAdorners();
   }
 
@@ -3564,9 +3645,11 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   requestUpdate(): void {
+    this.#syncOutlineProperties();
     this.widget.requestUpdate();
   }
   updateTitle(updateRecord?: Elements.ElementUpdateRecord.ElementUpdateRecord|null): void {
+    this.#syncOutlineProperties();
     this.widget.updateTitle(updateRecord);
   }