fix: apply initial horizontal offset on tree mount (#34088)

When the element is pre-selected and the Tree component is mounted,
right now we are only applying initial vertical offset, but not the
horizontal one.

Because of this, if the DOM element was selected on Elements panel and
then user opens Components panel for the first time of the browser
DevTools session, depending on the element's depth, it could be hidden.

Similarly to vertical offset, apply horizontal one, but via ref setter.

### Before:

https://github.com/user-attachments/assets/0ab3cca9-93c1-4e9e-8d23-88330d438912

### After:

https://github.com/user-attachments/assets/10de153a-1e55-4cf7-b1ff-4cc7cb35ba10

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

@@ -24,7 +24,7 @@ import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
 import Icon from '../Icon';
 import {SettingsContext} from '../Settings/SettingsContext';
 import {BridgeContext, StoreContext, OptionsContext} from '../context';
-import Element from './Element';
+import ComponentsTreeElement from './Element';
 import InspectHostNodesToggle from './InspectHostNodesToggle';
 import OwnersStack from './OwnersStack';
 import ComponentSearchInput from './ComponentSearchInput';
@@ -93,8 +93,47 @@ export default function Tree(): React.Node {
 
   const treeRef = useRef<HTMLDivElement | null>(null);
   const focusTargetRef = useRef<HTMLDivElement | null>(null);
-  const listRef = useRef(null);
+  const listDOMElementRef = useRef<Element | null>(null);
-  const listDOMElementRef = useRef(null);
+  const setListDOMElementRef = useCallback((listDOMElement: Element) => {
+    listDOMElementRef.current = listDOMElement;
+
+    // Controls the initial horizontal offset of the Tree if the element was pre-selected. For example, via Elements panel in browser DevTools.
+    // Initial vertical offset is controlled via initialScrollOffset prop of the FixedSizeList component.
+    if (
+      !componentsPanelVisible ||
+      inspectedElementIndex == null ||
+      listDOMElement == null
+    ) {
+      return;
+    }
+
+    const element = store.getElementAtIndex(inspectedElementIndex);
+    if (element == null) {
+      return;
+    }
+
+    const viewportLeft = listDOMElement.scrollLeft;
+    const viewportRight = viewportLeft + listDOMElement.clientWidth;
+    const elementLeft = calculateElementOffset(element.depth);
+    // Because of virtualization, this element might not be rendered yet; we can't look up its width.
+    // Assuming that it may take up to the half of the viewport.
+    const elementRight = elementLeft + listDOMElement.clientWidth / 2;
+
+    const isElementFullyVisible =
+      elementLeft >= viewportLeft && elementRight <= viewportRight;
+
+    if (!isElementFullyVisible) {
+      const horizontalDelta =
+        Math.min(0, elementLeft - viewportLeft) +
+        Math.max(0, elementRight - viewportRight);
+
+      // $FlowExpectedError[incompatible-call] Flow doesn't support instant as an option for behavior.
+      listDOMElement.scrollBy({
+        left: horizontalDelta,
+        behavior: 'instant',
+      });
+    }
+  }, []);
 
   useEffect(() => {
     if (!componentsPanelVisible || inspectedElementIndex == null) {
@@ -118,7 +157,7 @@ export default function Tree(): React.Node {
     }
     const elementLeft = calculateElementOffset(element.depth);
     // Because of virtualization, this element might not be rendered yet; we can't look up its width.
-    // Assuming that it may take up to the half of the vieport.
+    // Assuming that it may take up to the half of the viewport.
     const elementRight = elementLeft + listDOMElement.clientWidth / 2;
     const elementTop = inspectedElementIndex * lineHeight;
     const elementBottom = elementTop + lineHeight;
@@ -137,6 +176,7 @@ export default function Tree(): React.Node {
         Math.min(0, elementLeft - viewportLeft) +
         Math.max(0, elementRight - viewportRight);
 
+      // $FlowExpectedError[incompatible-call] Flow doesn't support instant as an option for behavior.
       listDOMElement.scrollBy({
         top: verticalDelta,
         left: horizontalDelta,
@@ -471,11 +511,10 @@ export default function Tree(): React.Node {
                   itemData={itemData}
                   itemKey={itemKey}
                   itemSize={lineHeight}
-                  ref={listRef}
+                  outerRef={setListDOMElementRef}
-                  outerRef={listDOMElementRef}
                   overscanCount={10}
                   width={width}>
-                  {Element}
+                  {ComponentsTreeElement}
                 </FixedSizeList>
               )}
             </AutoSizer>