feat: static Components panel layout

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/Tree.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);
-}
+}