Improve how inspector handles native components

Reviewed By: sebmarkbage

Differential Revision: D3347768

fbshipit-source-id: 221ec54dc7bf9513a76578d90a272ed41fe189f9

Libraries/Inspector/ElementProperties.js

@@ -73,7 +73,7 @@ var ElementProperties = React.createClass({
                   style={[styles.breadItem, i === selection && styles.selected]}
                   onPress={() => this.props.setSelection(i)}>
                   <Text style={styles.breadItemText}>
-                    {item.getName ? item.getName() : 'Unknown'}
+                    {getInstanceName(item)}
                   </Text>
                 </TouchableHighlight>
               ),
@@ -107,6 +107,16 @@ var ElementProperties = React.createClass({
   },
 });
 
+function getInstanceName(instance) {
+  if (instance.getName) {
+    return instance.getName();
+  }
+  if (instance.constructor && instance.constructor.displayName) {
+    return instance.constructor.displayName;
+  }
+  return 'Unknown';
+}
+
 var styles = StyleSheet.create({
   breadSep: {
     fontSize: 8,

Libraries/Inspector/Inspector.js

@@ -142,11 +142,17 @@ class Inspector extends React.Component {
     });
   }
 
-  onTouchInstance(instance: Object, frame: Object, pointerY: number) {
+  onTouchInstance(touched: Object, frame: Object, pointerY: number) {
+    // Most likely the touched instance is a native wrapper (like RCTView)
+    // which is not very interesting. Most likely user wants a composite
+    // instance that contains it (like View)
+    var hierarchy = InspectorUtils.getOwnerHierarchy(touched);
+    var instance = InspectorUtils.lastNotNativeInstance(hierarchy);
+
     if (this.state.devtoolsAgent) {
       this.state.devtoolsAgent.selectFromReactInstance(instance, true);
     }
-    var hierarchy = InspectorUtils.getOwnerHierarchy(instance);
+
     // if we inspect a stateless component we can't use the getPublicInstance method
     // therefore we use the internal _instance property directly.
     var publicInstance = instance['_instance'] || {};
@@ -154,7 +160,7 @@ class Inspector extends React.Component {
     var source = instance['_currentElement'] && instance['_currentElement']['_source'];
     this.setState({
       panelPos: pointerY > Dimensions.get('window').height / 2 ? 'top' : 'bottom',
-      selection: hierarchy.length - 1,
+      selection: hierarchy.indexOf(instance),
       hierarchy,
       inspected: {
         style: props.style || {},

Libraries/Inspector/InspectorUtils.js

@@ -29,4 +29,14 @@ function getOwnerHierarchy(instance) {
   return hierarchy;
 }
 
-module.exports = {findInstanceByNativeTag, getOwnerHierarchy};
+function lastNotNativeInstance(hierarchy) {
+  for (let i = hierarchy.length - 1; i > 1; i--) {
+    const instance = hierarchy[i];
+    if (!instance.viewConfig) {
+      return instance;
+    }
+  }
+  return hierarchy[0];
+}
+
+module.exports = {findInstanceByNativeTag, getOwnerHierarchy, lastNotNativeInstance};