From 7b48468edb6d0be5f49e621851dc318fbfbec27a Mon Sep 17 00:00:00 2001 From: Tianyu Yao Date: Tue, 16 Aug 2022 15:59:18 -0700 Subject: [PATCH 1/2] [DevTools] Highlight RN elements on hover --- .../src/backend/views/Highlighter/Highlighter.js | 11 +++++++++-- .../src/backend/views/Highlighter/index.js | 6 +++--- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js b/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js index 3a5228658e212..480603c5877ea 100644 --- a/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js +++ b/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js @@ -16,7 +16,11 @@ const SHOW_DURATION = 2000; let timeoutID: TimeoutID | null = null; let overlay: Overlay | null = null; -export function hideOverlay() { +export function hideOverlay(agent: Agent) { + if (window.document == null) { + agent.emit('hideNativeHighlight'); + return; + } timeoutID = null; if (overlay !== null) { @@ -33,6 +37,9 @@ export function showOverlay( ) { // TODO (npm-packages) Detect RN and support it somehow if (window.document == null) { + if (elements != null && elements[0] != null) { + agent.emit('showNativeHighlight', elements[0]); + } return; } @@ -51,6 +58,6 @@ export function showOverlay( overlay.inspect(elements, componentName); if (hideAfterTimeout) { - timeoutID = setTimeout(hideOverlay, SHOW_DURATION); + timeoutID = setTimeout(() => hideOverlay(agent), SHOW_DURATION); } } diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js index 683c37fd8d02d..a6ac3ab5933df 100644 --- a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js +++ b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js @@ -52,7 +52,7 @@ export default function setupHighlighter( } function stopInspectingNative() { - hideOverlay(); + hideOverlay(agent); removeListenersOnWindow(window); iframesListeningTo.forEach(function(frame) { try { @@ -78,7 +78,7 @@ export default function setupHighlighter( } function clearNativeElementHighlight() { - hideOverlay(); + hideOverlay(agent); } function highlightNativeElement({ @@ -125,7 +125,7 @@ export default function setupHighlighter( bridge.send('syncSelectionToNativeElementsPanel'); } } else { - hideOverlay(); + hideOverlay(agent); } } From 1364b77bd4f84af6861a28778d200ca080cf9a90 Mon Sep 17 00:00:00 2001 From: Tianyu Yao Date: Wed, 17 Aug 2022 11:39:41 -0700 Subject: [PATCH 2/2] Remove unused TODO --- .../src/backend/views/Highlighter/Highlighter.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js b/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js index 480603c5877ea..9d3098cbfdfc1 100644 --- a/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js +++ b/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js @@ -35,7 +35,6 @@ export function showOverlay( agent: Agent, hideAfterTimeout: boolean, ) { - // TODO (npm-packages) Detect RN and support it somehow if (window.document == null) { if (elements != null && elements[0] != null) { agent.emit('showNativeHighlight', elements[0]);