From 94429fb037322652b6796ac2c40cef451795205e Mon Sep 17 00:00:00 2001
From: Tianyu Yao <skyyao@meta.com>
Date: Fri, 14 Oct 2022 14:58:43 -0700
Subject: [PATCH] Highlight elements on press + hove

Summary:
Changelog:
[General][Added] - Highlight elements on hover while mouse down for React DevTools element inspection.

Since there is probably no mouse hover events for RN, this diff implements something that works similar like hover for RN: user keeps the mouse down and moves the cursor around, and the elements under the mouse is highlighted just like Web.

Reviewed By: lunaruan

Differential Revision: D40369733

fbshipit-source-id: ef223ee0f31f4e0372674fc39dd13bad8c15aa92
---
 Libraries/Inspector/DevtoolsOverlay.js | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/Libraries/Inspector/DevtoolsOverlay.js b/Libraries/Inspector/DevtoolsOverlay.js
index 59df46ab2992fb..5f7e89a10ca0f5 100644
--- a/Libraries/Inspector/DevtoolsOverlay.js
+++ b/Libraries/Inspector/DevtoolsOverlay.js
@@ -30,7 +30,7 @@ export default function DevtoolsOverlay({
   inspectedView: ?HostRef,
 }): React.Node {
   const [inspected, setInspected] = useState<null | {
-    frame: {height: any, left: any, top: any, width: any},
+    frame: {+height: any, +left: any, +top: any, +width: any},
   }>(null);
   const [isInspecting, setIsInspecting] = useState(false);
   const devToolsAgentRef = useRef(null);
@@ -124,7 +124,7 @@ export default function DevtoolsOverlay({
         locationX,
         locationY,
         viewData => {
-          const {touchedViewTag, closestInstance} = viewData;
+          const {touchedViewTag, closestInstance, frame} = viewData;
           if (closestInstance != null || touchedViewTag != null) {
             if (closestInstance != null) {
               // Fabric
@@ -132,8 +132,9 @@ export default function DevtoolsOverlay({
             } else {
               agent.selectNode(findNodeHandle(touchedViewTag));
             }
-            agent.stopInspectingNative(true);
-            setIsInspecting(false);
+            setInspected({
+              frame,
+            });
             return true;
           }
           return false;
@@ -143,6 +144,16 @@ export default function DevtoolsOverlay({
     [inspectedView],
   );
 
+  const onResponderRelease = useCallback(() => {
+    const agent = devToolsAgentRef.current;
+    if (agent == null) {
+      return;
+    }
+    agent.stopInspectingNative(true);
+    setIsInspecting(false);
+    setInspected(null);
+  }, []);
+
   const shouldSetResponser = useCallback(
     (e: PressEvent): boolean => {
       findViewForTouchEvent(e);
@@ -157,6 +168,7 @@ export default function DevtoolsOverlay({
       <View
         onStartShouldSetResponder={shouldSetResponser}
         onResponderMove={findViewForTouchEvent}
+        onResponderRelease={onResponderRelease}
         nativeID="devToolsInspectorOverlay"
         style={[styles.inspector, {height: Dimensions.get('window').height}]}>
         {highlight}