Handle & render the _source property

To take advantage of this, use the [transform-react-jsx-source](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-source) babel plugin.

The `_source` property was added to react [last year](facebook/react@009b7c8) and can be used by development tools to track the source file & line of react elements. React Native is also [taking advantage of it](facebook/react-native#6351).

Test Plan:
- install the [transform-react-jsx-source](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-source) babel plugin
- open the react devtools to an element that was created in your app (can't
  have been created by a library you're using, because those are probably
  pre-transpiled & ignored by babel)

Author: jaredly

backend/getData.js

@@ -26,6 +26,7 @@ function getData(element: Object): DataType {
   var type = null;
   var key = null;
   var ref = null;
+  var source = null;
   var text = null;
   var publicInstance = null;
   var nodeType = 'Native';
@@ -65,6 +66,7 @@ function getData(element: Object): DataType {
     if (element._currentElement.key) {
       key = String(element._currentElement.key);
     }
+    source = element._currentElement._source;
     ref = element._currentElement.ref;
     if (typeof type === 'string') {
       name = type;
@@ -111,6 +113,7 @@ function getData(element: Object): DataType {
     type,
     key,
     ref,
+    source,
     name,
     props,
     state,

backend/types.js

@@ -15,6 +15,7 @@ export type DataType = {
   type: ?(string | AnyFn),
   key: ?string,
   ref: ?(string | AnyFn),
+  source: ?Object,
   name: ?string,
   props: ?Object,
   state: ?Object,

frontend/PropState.js

@@ -20,6 +20,18 @@ var React = require('react');
 var decorate = require('./decorate');
 var invariant = require('./invariant');
 
+/**
+ * Shorten a file path to something reasonable.
+ * - if it has `/src/` in it, assume that's the project root
+ * - if it starts w/ `/Users/name/`, replace that with `~/`
+ */
+var shortFilePath = text => {
+  if (text.match(/\/src\//)) {
+    return 'src/' + text.split(/\/src\//)[1];
+  }
+  return text.replace(/^\/Users\/[^\/]+\//, '~/');
+};
+
 class PropState extends React.Component {
   getChildContext() {
     return {
@@ -29,6 +41,23 @@ class PropState extends React.Component {
     };
   }
 
+  renderSource(): React.Element {
+    var source = this.props.node.get('source');
+    if (!source) {
+      return null;
+    }
+    return (
+      <div style={styles.source}>
+        <div style={styles.sourceName}>
+          {shortFilePath(source.fileName)}
+        </div>
+        <div style={styles.sourcePos}>
+          :{source.lineNumber}
+        </div>
+      </div>
+    );
+  }
+
   render(): React.Element {
     if (!this.props.node) {
       // TODO(jared): style this
@@ -129,6 +158,8 @@ class PropState extends React.Component {
           </DetailPaneSection>}
         {this.props.extraPanes &&
           this.props.extraPanes.map(fn => fn && fn(this.props.node, this.props.id))}
+        <div style={{flex: 1}} />
+        {this.renderSource()}
       </DetailPane>
     );
   }
@@ -171,4 +202,20 @@ var WrappedPropState = decorate({
   },
 }, PropState);
 
+var styles = {
+  source: {
+    padding: '5px 10px',
+    display: 'flex',
+    flexDirection: 'row',
+  },
+
+  sourceName: {
+    color: 'blue',
+  },
+
+  sourcePos: {
+    color: '#777',
+  },
+};
+
 module.exports = WrappedPropState;