[DevTools] Highlight RN elements on hover (#25106)

* [DevTools] Highlight RN elements on hover

* Remove unused TODO

Author: tyao1

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);
   }
 }

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);
     }
   }