[DevTools] feat[Tree]: set initial scroll offset when inspected eleme…

…nt index is set (#31968)

Stacked on #31956. See [commit on
top](ecb8df4).

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.

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}