From 85529fe356655481eb41297275e341b02a372044 Mon Sep 17 00:00:00 2001
From: Eli White <eliwhite@fb.com>
Date: Tue, 17 Dec 2019 18:27:53 -0800
Subject: [PATCH] Refactor Inspector to take a react instance

Summary:
We will need to operate on instances instead of react tags. This diff passes through the instance instead of the tag.

This does not make the inspector work in Fabric, but it is a necessary refactor in that direction.

Changelog:
[Internal]

Reviewed By: mdvacca

Differential Revision: D19149647

fbshipit-source-id: 53fa35a2886bf36a146d473a496409dffc114a80
---
 Libraries/Inspector/Inspector.js        | 23 +++++++++++++++--------
 Libraries/Inspector/InspectorOverlay.js |  7 +++++--
 Libraries/ReactNative/AppContainer.js   | 11 ++++-------
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/Libraries/Inspector/Inspector.js b/Libraries/Inspector/Inspector.js
index a68160ad86d..97d33c59237 100644
--- a/Libraries/Inspector/Inspector.js
+++ b/Libraries/Inspector/Inspector.js
@@ -23,6 +23,8 @@ const View = require('../Components/View/View');
 
 const invariant = require('invariant');
 
+import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
+
 export type ReactRenderer = {
   getInspectorDataForViewTag: (viewTag: number) => Object,
   ...
@@ -65,10 +67,14 @@ function getInspectorDataForViewTag(touchedViewTag: number) {
   }
   throw new Error('Expected to find at least one React renderer.');
 }
+
+type HostRef = React.ElementRef<HostComponent<mixed>>;
+
 class Inspector extends React.Component<
   {
-    inspectedViewTag: ?number,
-    onRequestRerenderApp: (callback: (tag: ?number) => void) => void,
+    isFabric: boolean,
+    inspectedView: ?HostRef,
+    onRequestRerenderApp: (callback: (instance: ?HostRef) => void) => void,
     ...
   },
   {
@@ -79,7 +85,7 @@ class Inspector extends React.Component<
     selection: ?number,
     perfing: boolean,
     inspected: any,
-    inspectedViewTag: any,
+    inspectedView: ?HostRef,
     networking: boolean,
     ...
   },
@@ -98,7 +104,7 @@ class Inspector extends React.Component<
       perfing: false,
       inspected: null,
       selection: null,
-      inspectedViewTag: this.props.inspectedViewTag,
+      inspectedView: this.props.inspectedView,
       networking: false,
     };
   }
@@ -119,7 +125,7 @@ class Inspector extends React.Component<
   }
 
   UNSAFE_componentWillReceiveProps(newProps: Object) {
-    this.setState({inspectedViewTag: newProps.inspectedViewTag});
+    this.setState({inspectedView: newProps.inspectedView});
   }
 
   _attachToDevtools = (agent: Object) => {
@@ -241,8 +247,8 @@ class Inspector extends React.Component<
 
   setTouchTargeting(val: boolean) {
     Touchable.TOUCH_TARGET_DEBUG = val;
-    this.props.onRequestRerenderApp(inspectedViewTag => {
-      this.setState({inspectedViewTag});
+    this.props.onRequestRerenderApp(inspectedView => {
+      this.setState({inspectedView});
     });
   }
 
@@ -264,8 +270,9 @@ class Inspector extends React.Component<
       <View style={styles.container} pointerEvents="box-none">
         {this.state.inspecting && (
           <InspectorOverlay
+            isFabric={this.props.isFabric}
             inspected={this.state.inspected}
-            inspectedViewTag={this.state.inspectedViewTag}
+            inspectedView={this.state.inspectedView}
             onTouchViewTag={this.onTouchViewTag.bind(this)}
           />
         )}
diff --git a/Libraries/Inspector/InspectorOverlay.js b/Libraries/Inspector/InspectorOverlay.js
index 878ee5e6ca1..caaa38700d2 100644
--- a/Libraries/Inspector/InspectorOverlay.js
+++ b/Libraries/Inspector/InspectorOverlay.js
@@ -14,9 +14,11 @@ const Dimensions = require('../Utilities/Dimensions');
 const ElementBox = require('./ElementBox');
 const React = require('react');
 const StyleSheet = require('../StyleSheet/StyleSheet');
+const ReactNative = require('../Renderer/shims/ReactNative');
 const UIManager = require('../ReactNative/UIManager');
 const View = require('../Components/View/View');
 
+import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
 import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {PressEvent} from '../Types/CoreEventTypes';
 
@@ -26,8 +28,9 @@ type Inspected = $ReadOnly<{|
 |}>;
 
 type Props = $ReadOnly<{|
+  isFabric: boolean,
   inspected?: Inspected,
-  inspectedViewTag?: ?number,
+  inspectedView?: ?React.ElementRef<HostComponent<mixed>>,
   onTouchViewTag: (tag: number, frame: Object, pointerY: number) => mixed,
 |}>;
 
@@ -35,7 +38,7 @@ class InspectorOverlay extends React.Component<Props> {
   findViewForTouchEvent: (e: PressEvent) => void = (e: PressEvent) => {
     const {locationX, locationY} = e.nativeEvent.touches[0];
     UIManager.findSubviewIn(
-      this.props.inspectedViewTag,
+      ReactNative.findNodeHandle(this.props.inspectedView),
       [locationX, locationY],
       (nativeViewTag, left, top, width, height) => {
         this.props.onTouchViewTag(
diff --git a/Libraries/ReactNative/AppContainer.js b/Libraries/ReactNative/AppContainer.js
index eab3b420958..e67bd0742a0 100644
--- a/Libraries/ReactNative/AppContainer.js
+++ b/Libraries/ReactNative/AppContainer.js
@@ -14,7 +14,6 @@ const EmitterSubscription = require('../vendor/emitter/EmitterSubscription');
 const PropTypes = require('prop-types');
 const RCTDeviceEventEmitter = require('../EventEmitter/RCTDeviceEventEmitter');
 const React = require('react');
-const ReactNative = require('../Renderer/shims/ReactNative');
 const RootTagContext = require('./RootTagContext');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const View = require('../Components/View/View');
@@ -68,14 +67,12 @@ class AppContainer extends React.Component<Props, State> {
             const Inspector = require('../Inspector/Inspector');
             const inspector = this.state.inspector ? null : (
               <Inspector
-                inspectedViewTag={ReactNative.findNodeHandle(this._mainRef)}
-                onRequestRerenderApp={updateInspectedViewTag => {
+                isFabric={this.props.fabric === true}
+                inspectedView={this._mainRef}
+                onRequestRerenderApp={updateInspectedView => {
                   this.setState(
                     s => ({mainKey: s.mainKey + 1}),
-                    () =>
-                      updateInspectedViewTag(
-                        ReactNative.findNodeHandle(this._mainRef),
-                      ),
+                    () => updateInspectedView(this._mainRef),
                   );
                 }}
               />