fix[DevTools/Tree]: only scroll to item when panel is visible (#32018)
Stacked on https://github.com/facebook/react/pull/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: https://github.com/user-attachments/assets/82667c16-d495-4346-af0a-7ed22ff89cfc After: https://github.com/user-attachments/assets/a5d223fd-0328-44f0-af68-5c3863f1efee
Ruslan Lesiutin committed
Jan 9, 2025 at 18:38 UTC
d2a1b8854d5c4bed713e7e732b598d88e3cc4858
4 files changed
+62
-25
packages/react-devtools-extensions/src/main/index.js
+6
-2
@@ -206,8 +206,12 @@ function createComponentsPanel() {
206
}
207
});
208
209
- // TODO: we should listen to createdPanel.onHidden to unmount some listeners
210
- // and potentially stop highlighting
209
+ createdPanel.onShown.addListener(() => {
210
+ bridge.emit('extensionComponentsPanelShown');
211
+ });
212
+ createdPanel.onHidden.addListener(() => {
213
+ bridge.emit('extensionComponentsPanelHidden');
214
+ });
215
},
216
);
217
}
packages/react-devtools-shared/src/bridge.js
+2
@@ -217,6 +217,8 @@ type FrontendEvents = {
217
clearWarningsForElementID: [ElementAndRendererID],
218
copyElementPath: [CopyElementPathParams],
219
deletePath: [DeletePath],
220
+ extensionComponentsPanelShown: [],
221
+ extensionComponentsPanelHidden: [],
222
getBackendVersion: [],
223
getBridgeProtocol: [],
224
getIfHasUnsupportedRendererVersion: [],
packages/react-devtools-shared/src/devtools/views/Components/Tree.js
+16
-23
@@ -37,6 +37,7 @@ import styles from './Tree.css';
37
import ButtonIcon from '../ButtonIcon';
38
import Button from '../Button';
39
import {logEvent} from 'react-devtools-shared/src/Logger';
40
+import {useExtensionComponentsPanelVisibility} from 'react-devtools-shared/src/frontend/hooks/useExtensionComponentsPanelVisibility';
41
42
// Never indent more than this number of pixels (even if we have the room).
43
const DEFAULT_INDENTATION_SIZE = 12;
@@ -76,36 +77,28 @@ export default function Tree(): React.Node {
77
const bridge = useContext(BridgeContext);
78
const store = useContext(StoreContext);
79
const {hideSettings} = useContext(OptionsContext);
80
+ const {lineHeight} = useContext(SettingsContext);
81
+
82
const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] =
83
useState(false);
84
const {highlightHostInstance, clearHighlightHostInstance} =
85
useHighlightHostInstance();
86
+ const [treeFocused, setTreeFocused] = useState<boolean>(false);
87
+ const componentsPanelVisible = useExtensionComponentsPanelVisibility(bridge);
88
+
89
const treeRef = useRef<HTMLDivElement | null>(null);
90
const focusTargetRef = useRef<HTMLDivElement | null>(null);
91
+ const listRef = useRef(null);
92
86
- const [treeFocused, setTreeFocused] = useState<boolean>(false);
87
-
88
- const {lineHeight} = useContext(SettingsContext);
93
+ useEffect(() => {
94
+ if (!componentsPanelVisible) {
95
+ return;
96
+ }
97
90
- // Make sure a newly selected element is visible in the list.
91
- // This is helpful for things like the owners list and search.
92
- //
93
- // TRICKY:
94
- // It's important to use a callback ref for this, rather than a ref object and an effect.
95
- // As an optimization, the AutoSizer component does not render children when their size would be 0.
96
- // This means that in some cases (if the browser panel size is initially really small),
97
- // the Tree component might render without rendering an inner List.
98
- // In this case, the list ref would be null on mount (when the scroll effect runs),
99
- // meaning the scroll action would be skipped (since ref updates don't re-run effects).
100
- // Using a callback ref accounts for this case...
101
- const listCallbackRef = useCallback(
102
- (list: $FlowFixMe) => {
103
- if (list != null && inspectedElementIndex !== null) {
104
- list.scrollToItem(inspectedElementIndex, 'smart');
105
- }
106
- },
107
- [inspectedElementIndex],
108
- );
98
+ if (listRef.current != null && inspectedElementIndex !== null) {
99
+ listRef.current.scrollToItem(inspectedElementIndex, 'smart');
100
+ }
101
+ }, [inspectedElementIndex, componentsPanelVisible]);
102
103
// Picking an element in the inspector should put focus into the tree.
104
// If possible, navigation works right after picking a node.
@@ -426,7 +419,7 @@ export default function Tree(): React.Node {
419
itemData={itemData}
420
itemKey={itemKey}
421
itemSize={lineHeight}
429
- ref={listCallbackRef}
422
+ ref={listRef}
423
width={width}>
424
{Element}
425
</FixedSizeList>
packages/react-devtools-shared/src/frontend/hooks/useExtensionComponentsPanelVisibility.js
new
+38
@@ -0,0 +1,38 @@
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+import {useState, useEffect} from 'react';
11
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
12
+
13
+// Events that are prefixed with `extension` will only be emitted for the browser extension implementation.
14
+// For other implementations, this hook will just return constant `true` value.
15
+export function useExtensionComponentsPanelVisibility(
16
+ bridge: FrontendBridge,
17
+): boolean {
18
+ const [isVisible, setIsVisible] = useState(true);
19
+
20
+ useEffect(() => {
21
+ function onPanelShown() {
22
+ setIsVisible(true);
23
+ }
24
+ function onPanelHidden() {
25
+ setIsVisible(false);
26
+ }
27
+
28
+ bridge.addListener('extensionComponentsPanelShown', onPanelShown);
29
+ bridge.addListener('extensionComponentsPanelHidden', onPanelHidden);
30
+
31
+ return () => {
32
+ bridge.removeListener('extensionComponentsPanelShown', onPanelShown);
33
+ bridge.removeListener('extensionComponentsPanelHidden', onPanelHidden);
34
+ };
35
+ }, [bridge]);
36
+
37
+ return isVisible;
38
+}