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,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)}
           />
         )}

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(

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