feat: static Components panel layout (#33696)

## Summary

Follow-up to #33517.

With #33517, we now preserve at
least some minimal indent. This actually doesn't work with the current
setup, because we don't allow the container to overflow, so basically
deeply nested elements will go off the screen.

With these changes, we completely change the approach:
- The layout will be static and it will have a constant indentation that
will always be preserved.
- The container will allow overflows, so users will be able to scroll
horizontally and vertically.
- We will implement automatic horizontal and vertical scrolls, if
selected element is not in a viewport.
- New: added vertical delimiter that can be used for simpler visual
navigation.

## Demo
### Current public release

https://github.com/user-attachments/assets/58645d42-c6b8-408b-b76f-95fb272f2e1e

### With #33517 

https://github.com/user-attachments/assets/845285c8-5a01-4739-bcd7-ffc089e771bf

### This PR

https://github.com/user-attachments/assets/72086b84-8d84-4626-94b3-e22e114e028e

Author: hoxyq

packages/react-devtools-shared/src/devtools/store.js

@@ -195,6 +195,10 @@ export default class Store extends EventEmitter<{
   // Only used in browser extension for synchronization with built-in Elements panel.
   _lastSelectedHostInstanceElementId: Element['id'] | null = null;
 
+  // Maximum recorded node depth during the lifetime of this Store.
+  // Can only increase: not guaranteed to return maximal value for currently recorded elements.
+  _maximumRecordedDepth = 0;
+
   constructor(bridge: FrontendBridge, config?: Config) {
     super();
 
@@ -698,6 +702,50 @@ export default class Store extends EventEmitter<{
     return index;
   }
 
+  isDescendantOf(parentId: number, descendantId: number): boolean {
+    if (descendantId === 0) {
+      return false;
+    }
+
+    const descendant = this.getElementByID(descendantId);
+    if (descendant === null) {
+      return false;
+    }
+
+    if (descendant.parentID === parentId) {
+      return true;
+    }
+
+    const parent = this.getElementByID(parentId);
+    if (!parent || parent.depth >= descendant.depth) {
+      return false;
+    }
+
+    return this.isDescendantOf(parentId, descendant.parentID);
+  }
+
+  /**
+   * Returns index of the lowest descendant element, if available.
+   * May not be the deepest element, the lowest is used in a sense of bottom-most from UI Tree representation perspective.
+   */
+  getIndexOfLowestDescendantElement(element: Element): number | null {
+    let current: null | Element = element;
+    while (current !== null) {
+      if (current.isCollapsed || current.children.length === 0) {
+        if (current === element) {
+          return null;
+        }
+
+        return this.getIndexOfElementID(current.id);
+      } else {
+        const lastChildID = current.children[current.children.length - 1];
+        current = this.getElementByID(lastChildID);
+      }
+    }
+
+    return null;
+  }
+
   getOwnersListForElement(ownerID: number): Array<Element> {
     const list: Array<Element> = [];
     const element = this._idToElement.get(ownerID);
@@ -1089,9 +1137,15 @@ export default class Store extends EventEmitter<{
               compiledWithForget,
             } = parseElementDisplayNameFromBackend(displayName, type);
 
+            const elementDepth = parentElement.depth + 1;
+            this._maximumRecordedDepth = Math.max(
+              this._maximumRecordedDepth,
+              elementDepth,
+            );
+
             const element: Element = {
               children: [],
-              depth: parentElement.depth + 1,
+              depth: elementDepth,
               displayName: displayNameWithoutHOCs,
               hocDisplayNames,
               id,
@@ -1536,6 +1590,14 @@ export default class Store extends EventEmitter<{
     }
   };
 
+  /**
+   * Maximum recorded node depth during the lifetime of this Store.
+   * Can only increase: not guaranteed to return maximal value for currently recorded elements.
+   */
+  getMaximumRecordedDepth(): number {
+    return this._maximumRecordedDepth;
+  }
+
   updateHookSettings: (settings: $ReadOnly<DevToolsHookSettings>) => void =
     settings => {
       this._hookSettings = settings;

packages/react-devtools-shared/src/devtools/views/Components/Components.js

@@ -176,7 +176,7 @@ function Components(_: {}) {
 
 const LOCAL_STORAGE_KEY = 'React::DevTools::createResizeReducer';
 const VERTICAL_MODE_MAX_WIDTH = 600;
-const MINIMUM_SIZE = 50;
+const MINIMUM_SIZE = 100;
 
 function initResizeState(): ResizeState {
   let horizontalPercentage = 0.65;

packages/react-devtools-shared/src/devtools/views/Components/Element.css

@@ -1,7 +1,9 @@
 .Element,
+.HoveredElement,
 .InactiveSelectedElement,
-.SelectedElement,
-.HoveredElement {
+.HighlightedElement,
+.InactiveHighlightedElement,
+.SelectedElement {
   color: var(--color-component-name);
 }
 .HoveredElement {
@@ -10,8 +12,15 @@
 .InactiveSelectedElement {
   background-color: var(--color-background-inactive);
 }
+.HighlightedElement {
+  background-color: var(--color-selected-tree-highlight-active);
+}
+.InactiveHighlightedElement {
+  background-color: var(--color-selected-tree-highlight-inactive);
+}
 
 .Wrapper {
+  position: relative;
   padding: 0 0.25rem;
   white-space: pre;
   height: var(--line-height-data);

packages/react-devtools-shared/src/devtools/views/Components/Element.js

@@ -45,10 +45,6 @@ export default function Element({data, index, style}: Props): React.Node {
 
   const [isHovered, setIsHovered] = useState(false);
 
-  const {isNavigatingWithKeyboard, onElementMouseEnter, treeFocused} = data;
-  const id = element === null ? null : element.id;
-  const isSelected = inspectedElementID === id;
-
   const errorsAndWarningsSubscription = useMemo(
     () => ({
       getCurrentValue: () =>
@@ -68,6 +64,15 @@ export default function Element({data, index, style}: Props): React.Node {
   }>(errorsAndWarningsSubscription);
 
   const changeOwnerAction = useChangeOwnerAction();
+
+  // Handle elements that are removed from the tree while an async render is in progress.
+  if (element == null) {
+    console.warn(`<Element> Could not find element at index ${index}`);
+
+    // This return needs to happen after hooks, since hooks can't be conditional.
+    return null;
+  }
+
   const handleDoubleClick = () => {
     if (id !== null) {
       changeOwnerAction(id);
@@ -107,22 +112,28 @@ export default function Element({data, index, style}: Props): React.Node {
     event.preventDefault();
   };
 
-  // Handle elements that are removed from the tree while an async render is in progress.
-  if (element == null) {
-    console.warn(`<Element> Could not find element at index ${index}`);
-
-    // This return needs to happen after hooks, since hooks can't be conditional.
-    return null;
-  }
-
   const {
+    id,
     depth,
     displayName,
     hocDisplayNames,
     isStrictModeNonCompliant,
     key,
     compiledWithForget,
   } = element;
+  const {
+    isNavigatingWithKeyboard,
+    onElementMouseEnter,
+    treeFocused,
+    calculateElementOffset,
+  } = data;
+
+  const isSelected = inspectedElementID === id;
+  const isDescendantOfSelected =
+    inspectedElementID !== null &&
+    !isSelected &&
+    store.isDescendantOf(inspectedElementID, id);
+  const elementOffset = calculateElementOffset(depth);
 
   // Only show strict mode non-compliance badges for top level elements.
   // Showing an inline badge for every element in the tree would be noisy.
@@ -135,6 +146,10 @@ export default function Element({data, index, style}: Props): React.Node {
       : styles.InactiveSelectedElement;
   } else if (isHovered && !isNavigatingWithKeyboard) {
     className = styles.HoveredElement;
+  } else if (isDescendantOfSelected) {
+    className = treeFocused
+      ? styles.HighlightedElement
+      : styles.InactiveHighlightedElement;
   }
 
   return (
@@ -144,17 +159,13 @@ export default function Element({data, index, style}: Props): React.Node {
       onMouseLeave={handleMouseLeave}
       onMouseDown={handleClick}
       onDoubleClick={handleDoubleClick}
-      style={style}
-      data-testname="ComponentTreeListItem"
-      data-depth={depth}>
+      style={{
+        ...style,
+        paddingLeft: elementOffset,
+      }}
+      data-testname="ComponentTreeListItem">
       {/* This wrapper is used by Tree for measurement purposes. */}
-      <div
-        className={styles.Wrapper}
-        style={{
-          // Left offset presents the appearance of a nested tree structure.
-          // We must use padding rather than margin/left because of the selected background color.
-          transform: `translateX(calc(${depth} * var(--indentation-size)))`,
-        }}>
+      <div className={styles.Wrapper}>
         {ownerID === null && (
           <ExpandCollapseToggle element={element} store={store} />
         )}

packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.css

@@ -5,17 +5,16 @@
   display: flex;
   flex-direction: column;
   border-top: 1px solid var(--color-border);
-
-  /* Default size will be adjusted by Tree after scrolling */
-  --indentation-size: 12px;
 }
 
-.List {
-  overflow-x: hidden !important;
+.InnerElementType {
+  position: relative;
 }
 
-.InnerElementType {
-  overflow-x: hidden;
+.VerticalDelimiter {
+  position: absolute;
+  width: 0.025rem;
+  background: #b0b0b0;
 }
 
 .SearchInput {
@@ -97,4 +96,4 @@
 
 .Link {
   color: var(--color-button-active);
-}
+}