From f2813ee33d37e20029c6698f34946d7f08eb7a95 Mon Sep 17 00:00:00 2001
From: Ruslan Lesiutin <rdlesyutin@gmail.com>
Date: Thu, 9 Jan 2025 18:21:55 +0000
Subject: [PATCH] [DevTools]  feat[Tree]: set initial scroll offset when
 inspected element index is set (#31968)

Stacked on https://github.com/facebook/react/pull/31956. See [commit on
top](https://github.com/facebook/react/pull/31968/commits/ecb8df4175342cde7669cd4a6b008b3782eb5b61).

Use `initialScrollOffset` prop for `FixedSizeList` from `react-window`.
This happens when user selects an element in built-in Elements panel in
DevTools, and then opens Components panel from React DevTools - elements
will be synced and corresponding React Element will be pre-selected, we
just have to scroll to its position now.
---
 .../src/devtools/views/Components/Tree.js     | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
index c0fd842abc4eb..2a1569bb52e1e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
@@ -47,6 +47,22 @@ export type ItemData = {
   treeFocused: boolean,
 };
 
+function calculateInitialScrollOffset(
+  inspectedElementIndex: number | null,
+  elementHeight: number,
+): number | void {
+  if (inspectedElementIndex === null) {
+    return undefined;
+  }
+
+  if (inspectedElementIndex < 3) {
+    return undefined;
+  }
+
+  // Make 3 elements on top of the inspected one visible
+  return (inspectedElementIndex - 3) * elementHeight;
+}
+
 export default function Tree(): React.Node {
   const dispatch = useContext(TreeDispatcherContext);
   const {
@@ -401,6 +417,10 @@ export default function Tree(): React.Node {
                 <FixedSizeList
                   className={styles.List}
                   height={height}
+                  initialScrollOffset={calculateInitialScrollOffset(
+                    inspectedElementIndex,
+                    lineHeight,
+                  )}
                   innerElementType={InnerElementType}
                   itemCount={numElements}
                   itemData={itemData}