fix[DevTools/Tree]: only scroll to item when panel is visible

[hoxyq]

Stacked on #31968. See commit on top.

Fixes an issue with bank tree view, when we are scrolling to an item while syncing user DOM selection. This should only have an effect on browser extension. Added events with extension prefix will only be emitted in browser extension implementation, for other implementations useExtensionComponentsPanelVisibility will return constant true value.

Before:

Screen.Recording.2025-01-08.at.15.28.21.mov

After:

Screen.Recording.2025-01-08.at.15.27.17.mov

[EdmondChuiHW]

Thanks for diving into it and fixing this! Added some inline questions. (CI for Vercel deployment also failed. notsureif.gif)

[EdmondChuiHW]

Do we need to call createdPanel.onShown.removeListener(…) somewhere?

[EdmondChuiHW]

Beautiful setup+tear down pairs

[EdmondChuiHW]

Is see from the comment and PR description that the default should be true if it's not an extension.

But for extensions, is possible that it's initalised in the background/invisibly without a extensionComponentsPanelHidden event emitted?

Is there a way to read/store the visibility from bridge directly?

[EdmondChuiHW]

I see the need to respond to componentsPanelVisible changing, but I don't see how the concerns of the previous impl is addressed, i.e. this impl would miss a call to scrollToItem if listRef failed a null check earlier.

Conceptually, I think we want scrollToItem to run in response to three changes:

1. listRef itself getting assigned an element ref
2. inspectedElementIndex changing
3. componentsPanelVisible changing

The previous impl triggers on 1) only. The cached function is updated in response to 2), but it's not actually called.
The current impl adds triggers on both 2) and 3). Is responding to 2) part of this PR?

If we want all three, we'd need both callback ref and effect, e.g.

const listRef = useRef(null);

const maybeScrollToItem = useCallback(() => {
    if (componentsPanelVisible && inspectedElementIndex !== null) {
      listRef.current?.scrollToItem(inspectedElementIndex, 'smart');
    }
}, [inspectedElementIndex, componentsPanelVisible]);

// triggered by 2) and 3) when `useCallback` busts the cache
useEffect(() => maybeScrollToItem(), [maybeScrollToItem]);

// triggered by 1)
const listCallbackRef = useCallback((list: HTMLElement) => {
  listRef.current = list;
  maybeScrollToItem();
}, [maybeScrollToItem]);