[DevTools] Highlight RN elements on hover (#25106)
* [DevTools] Highlight RN elements on hover * Remove unused TODO
Tianyu Yao committed
Aug 24, 2022 at 11:25 UTC
181525338e62a698c05ca04cf91fdccdafd2b5db
2 files changed
+12
-6
packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js
+9
-3
@@ -16,7 +16,11 @@ const SHOW_DURATION = 2000;
16
let timeoutID: TimeoutID | null = null;
17
let overlay: Overlay | null = null;
18
19
-export function hideOverlay() {
19
+export function hideOverlay(agent: Agent) {
20
+ if (window.document == null) {
21
+ agent.emit('hideNativeHighlight');
22
+ return;
23
+ }
24
timeoutID = null;
25
26
if (overlay !== null) {
@@ -31,8 +35,10 @@ export function showOverlay(
35
agent: Agent,
36
hideAfterTimeout: boolean,
37
) {
34
- // TODO (npm-packages) Detect RN and support it somehow
38
if (window.document == null) {
39
+ if (elements != null && elements[0] != null) {
40
+ agent.emit('showNativeHighlight', elements[0]);
41
+ }
42
return;
43
}
44
@@ -51,6 +57,6 @@ export function showOverlay(
57
overlay.inspect(elements, componentName);
58
59
if (hideAfterTimeout) {
54
- timeoutID = setTimeout(hideOverlay, SHOW_DURATION);
60
+ timeoutID = setTimeout(() => hideOverlay(agent), SHOW_DURATION);
61
}
62
}
packages/react-devtools-shared/src/backend/views/Highlighter/index.js
+3
-3
@@ -54,7 +54,7 @@ export default function setupHighlighter(
54
}
55
56
function stopInspectingNative() {
57
- hideOverlay();
57
+ hideOverlay(agent);
58
removeListenersOnWindow(window);
59
iframesListeningTo.forEach(function(frame) {
60
try {
@@ -82,7 +82,7 @@ export default function setupHighlighter(
82
}
83
84
function clearNativeElementHighlight() {
85
- hideOverlay();
85
+ hideOverlay(agent);
86
}
87
88
function highlightNativeElement({
@@ -129,7 +129,7 @@ export default function setupHighlighter(
129
bridge.send('syncSelectionToNativeElementsPanel');
130
}
131
} else {
132
- hideOverlay();
132
+ hideOverlay(agent);
133
}
134
}
135