Use DOMTreeWidget for HeapDetachedElementsDataGridNode

Drive-by: fixes the single-node deindent logic that did not
work previously.

Bug: 427378053
Change-Id: Ida6f31aadf30b9d48439ec0552a297fe41864d98
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6850131
Reviewed-by: Philip Pfaffe <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>

Author: OrKoN

front_end/panels/elements/ElementsTreeOutline.ts

@@ -91,6 +91,9 @@ interface ViewInput {
   visibleWidth?: number;
   visible?: boolean;
   wrap: boolean;
+  showSelectionOnKeyboardFocus: boolean;
+  preventTabOrder: boolean;
+  deindentSingleNode: boolean;
 
   onSelectedNodeChanged:
       (event: Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode | null, focus: boolean}>) => void;
@@ -121,6 +124,10 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
     output.elementsTreeOutline.setVisible(input.visible);
   }
   output.elementsTreeOutline.setWordWrap(input.wrap);
+  output.elementsTreeOutline.setShowSelectionOnKeyboardFocus(input.showSelectionOnKeyboardFocus, input.preventTabOrder);
+  if (input.deindentSingleNode) {
+    output.elementsTreeOutline.deindentSingleNode();
+  }
 };
 
 /**
@@ -134,6 +141,9 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   omitRootDOMNode = false;
   selectEnabled = false;
   hideGutter = false;
+  showSelectionOnKeyboardFocus = false;
+  preventTabOrder = false;
+  deindentSingleNode = false;
   onSelectedNodeChanged:
       (event:
            Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode | null, focus: boolean}>) => void = () => {};
@@ -212,6 +222,9 @@ export class DOMTreeWidget extends UI.Widget.Widget {
           visibleWidth: this.#visibleWidth,
           visible: this.#visible,
           wrap: this.#wrap,
+          showSelectionOnKeyboardFocus: this.showSelectionOnKeyboardFocus,
+          preventTabOrder: this.preventTabOrder,
+          deindentSingleNode: this.deindentSingleNode,
           onElementsTreeUpdated: this.onElementsTreeUpdated.bind(this),
           onSelectedNodeChanged: this.onSelectedNodeChanged.bind(this),
         },
@@ -536,6 +549,13 @@ export class ElementsTreeOutline extends
     }
   }
 
+  deindentSingleNode(): void {
+    const firstChild = this.firstChild();
+    if (!firstChild || (firstChild && !firstChild.isExpandable())) {
+      this.shadowRoot.querySelector('.elements-disclosure')?.classList.add('single-node');
+    }
+  }
+
   updateNodeElementToIssue(element: Element, issues: IssuesManager.Issue.Issue[]): void {
     this.#nodeElementToIssues.set(element, issues);
   }

front_end/panels/elements/ElementsTreeOutlineRenderer.ts

@@ -70,13 +70,10 @@ export class Renderer implements UI.UIUtils.Renderer {
     const treeOutline = new ElementsTreeOutline(
         /* omitRootDOMNode: */ false, /* selectEnabled: */ true, /* hideGutter: */ true);
     treeOutline.rootDOMNode = node;
-    const firstChild = treeOutline.firstChild();
-    if (firstChild && !firstChild.isExpandable()) {
-      treeOutline.element.classList.add('single-node');
-    }
+    treeOutline.deindentSingleNode();
     treeOutline.setVisible(true);
     // @ts-expect-error used in console_test_runner
-    treeOutline.element.treeElementForTest = firstChild;
+    treeOutline.element.treeElementForTest = treeOutline.firstChild();
     treeOutline.setShowSelectionOnKeyboardFocus(/* show: */ true, /* preventTabOrder: */ true);
     return {node: treeOutline.element, tree: treeOutline};
   }

front_end/panels/profiler/HeapDetachedElementsDataGrid.ts

@@ -72,8 +72,8 @@ export class HeapDetachedElementsDataGridNode extends DataGrid.DataGrid.DataGrid
     const cell = this.createTD(columnId);
     switch (columnId) {
       case 'detached-node': {
-        const DOMNode = SDK.DOMModel.DOMNode.create(this.domModel, null, false, this.detachedElementInfo.treeNode);
-        cell.appendChild(this.#nodeRenderer(DOMNode));
+        const node = SDK.DOMModel.DOMNode.create(this.domModel, null, false, this.detachedElementInfo.treeNode);
+        this.#renderNode(node, cell);
         return cell;
       }
 
@@ -109,22 +109,26 @@ export class HeapDetachedElementsDataGridNode extends DataGrid.DataGrid.DataGrid
     return count;
   }
 
-  #nodeRenderer(node: SDK.DOMModel.DOMNode): HTMLElement {
-    const treeOutline = new Elements.ElementsTreeOutline.ElementsTreeOutline(
-        /* omitRootDOMNode: */ false, /* selectEnabled: */ false, /* hideGutter: */ true);
-    treeOutline.rootDOMNode = node;
-    const firstChild = treeOutline.firstChild();
-    if (!firstChild || (firstChild && !firstChild.isExpandable())) {
-      treeOutline.element.classList.add('single-node');
+  // FIXME: is it a partial dupe of front_end/panels/elements/ElementsTreeOutlineRenderer.ts?
+  #renderNode(node: SDK.DOMModel.DOMNode, target: HTMLElement): void {
+    const domTree = new Elements.ElementsTreeOutline.DOMTreeWidget();
+    domTree.omitRootDOMNode = false;
+    domTree.selectEnabled = true;
+    domTree.hideGutter = true;
+    domTree.rootDOMNode = node;
+    domTree.showSelectionOnKeyboardFocus = true;
+    domTree.preventTabOrder = true;
+    domTree.deindentSingleNode = true;
+    domTree.show(target, undefined, true);
+
+    const treeOutline = domTree.getTreeOutlineForTesting();
+    if (!treeOutline) {
+      return;
     }
-    treeOutline.setVisible(true);
-    // @ts-expect-error used in console_test_runner
-    treeOutline.element.treeElementForTest = firstChild;
-    treeOutline.setShowSelectionOnKeyboardFocus(/* show: */ true, /* preventTabOrder: */ true);
-
     const nodes: SDK.DOMModel.DOMNode[] = [node];
 
     // Iterate through descendants to mark the nodes that were specifically retained in JS references.
+    // FIXME: support this in DOMTreeWidget or move to SDK.DOMModel.DOMNode.
     while (nodes.length > 0) {
       const descendantNode = nodes.shift() as SDK.DOMModel.DOMNode;
       const descendantsChildren = descendantNode.children();
@@ -154,7 +158,5 @@ export class HeapDetachedElementsDataGridNode extends DataGrid.DataGrid.DataGrid
     }
 
     treeOutline.findTreeElement(node)?.listItemNode.setAttribute('title', 'Detached Tree Node');
-
-    return treeOutline.element;
   }
 }