Improve how inspector handles native components

Reviewed By: sebmarkbage Differential Revision: D3347768 fbshipit-source-id: 221ec54dc7bf9513a76578d90a272ed41fe189f9
facebook · May 26, 2016 · bdab834 · bdab834
1 parent be34e04
commit bdab834
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 5 deletions.
diff --git a/Libraries/Inspector/ElementProperties.js b/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,

diff --git a/Libraries/Inspector/Inspector.js b/Libraries/Inspector/Inspector.js
@@ -142,19 +142,25 @@ 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'] || {};
  var props = publicInstance.props || {};
  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 || {},

diff --git a/Libraries/Inspector/InspectorUtils.js b/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};