chore[DevTools/Tree]: don't pre-select root element and remove unused code (facebook#32015)

In this PR:
1. Removed unused code in `Tree.js`
2. Removed logic for pre-selecting first element in the tree by default.
This is a bit clowny, because it steals focus and resets scroll, when
user attempts to expand / collapse some subtree.
3. Updated comments around
facebook@1c381c5.

To expand on 3-rd point, for someone who might be reading this in the
future:
We can't guarantee focus of RDT browser extension panels, because they
are hosted in an `iframe`. Attempting to fire any events won't have any
result, user action with the corresponding `iframe` is required in order
for this `iframe` to obtain focus.

The only reason why built-in Elements panel in Chrome works correctly is
because it is supported natively somewhere in Chrome / Chrome DevTools.
Also, when you select an element on the application page, Chrome will
make sure that Elements panel opened, which technically guarantees focus
inside DevTools window and Elements panel subview.

As of today, we can't navigate user to third-party extensions panels,
there is no API for this, hence no ability to guarantee focused RDT
panels.

Author: hoxyq

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

@@ -42,16 +42,12 @@ import {logEvent} from 'react-devtools-shared/src/Logger';
 const DEFAULT_INDENTATION_SIZE = 12;
 
 export type ItemData = {
-  numElements: number,
   isNavigatingWithKeyboard: boolean,
-  lastScrolledIDRef: {current: number | null, ...},
   onElementMouseEnter: (id: number) => void,
   treeFocused: boolean,
 };
 
-type Props = {};
-
-export default function Tree(props: Props): React.Node {
+export default function Tree(): React.Node {
   const dispatch = useContext(TreeDispatcherContext);
   const {
     numElements,
@@ -96,7 +92,8 @@ export default function Tree(props: Props): React.Node {
   );
 
   // Picking an element in the inspector should put focus into the tree.
-  // This ensures that keyboard navigation works right after picking a node.
+  // If possible, navigation works right after picking a node.
+  // NOTE: This is not guaranteed to work, because browser extension panels are hosted inside an iframe.
   useEffect(() => {
     function handleStopInspectingHost(didSelectNode: boolean) {
       if (didSelectNode && focusTargetRef.current !== null) {
@@ -112,11 +109,6 @@ export default function Tree(props: Props): React.Node {
       bridge.removeListener('stopInspectingHost', handleStopInspectingHost);
   }, [bridge]);
 
-  // This ref is passed down the context to elements.
-  // It lets them avoid autoscrolling to the same item many times
-  // when a selected virtual row goes in and out of the viewport.
-  const lastScrolledIDRef = useRef<number | null>(null);
-
   // Navigate the tree with up/down arrow keys.
   useEffect(() => {
     if (treeRef.current === null) {
@@ -214,16 +206,7 @@ export default function Tree(props: Props): React.Node {
 
   // Focus management.
   const handleBlur = useCallback(() => setTreeFocused(false), []);
-  const handleFocus = useCallback(() => {
-    setTreeFocused(true);
-
-    if (selectedElementIndex === null && numElements > 0) {
-      dispatch({
-        type: 'SELECT_ELEMENT_AT_INDEX',
-        payload: 0,
-      });
-    }
-  }, [dispatch, numElements, selectedElementIndex]);
+  const handleFocus = useCallback(() => setTreeFocused(true), []);
 
   const handleKeyPress = useCallback(
     (event: $FlowFixMe) => {
@@ -294,19 +277,11 @@ export default function Tree(props: Props): React.Node {
   // This includes the owner context, since it controls a filtered view of the tree.
   const itemData = useMemo<ItemData>(
     () => ({
-      numElements,
       isNavigatingWithKeyboard,
       onElementMouseEnter: handleElementMouseEnter,
-      lastScrolledIDRef,
       treeFocused,
     }),
-    [
-      numElements,
-      isNavigatingWithKeyboard,
-      handleElementMouseEnter,
-      lastScrolledIDRef,
-      treeFocused,
-    ],
+    [isNavigatingWithKeyboard, handleElementMouseEnter, treeFocused],
   );
 
   const itemKey = useCallback(