From e05b3ada0bb73720f849cc2199594135d527c11a Mon Sep 17 00:00:00 2001
From: Tianyu Yao <skyyao@fb.com>
Date: Wed, 24 Aug 2022 11:25:22 -0700
Subject: [PATCH] [DevTools] Highlight RN elements on hover (#25106)

* [DevTools] Highlight RN elements on hover

* Remove unused TODO
---
 .../src/backend/views/Highlighter/Highlighter.js     | 12 +++++++++---
 .../src/backend/views/Highlighter/index.js           |  6 +++---
 2 files changed, 12 insertions(+), 6 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..9d3098cbfdfc1 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) {
@@ -31,8 +35,10 @@ 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]);
+    }
     return;
   }
 
@@ -51,6 +57,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 9355fab109690..38d951623c482 100644
--- a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js
+++ b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js
@@ -54,7 +54,7 @@ export default function setupHighlighter(
   }
 
   function stopInspectingNative() {
-    hideOverlay();
+    hideOverlay(agent);
     removeListenersOnWindow(window);
     iframesListeningTo.forEach(function(frame) {
       try {
@@ -82,7 +82,7 @@ export default function setupHighlighter(
   }
 
   function clearNativeElementHighlight() {
-    hideOverlay();
+    hideOverlay(agent);
   }
 
   function highlightNativeElement({
@@ -129,7 +129,7 @@ export default function setupHighlighter(
         bridge.send('syncSelectionToNativeElementsPanel');
       }
     } else {
-      hideOverlay();
+      hideOverlay(agent);
     }
   }