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

@@ -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}