Handle & render the _source property (#406)

* 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)

* add readme line

* fix type check

* remove `shortFilePath`

Author: jaredly

README.md

@@ -25,6 +25,10 @@ Tools or use a pre-prelease version.
 
 ## Usage
 
+### Supporting tools
+
+- The babel plugin [trasnform-react-jsx-source](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-source) is required if you want react devtools to tell you the source file & line number of created react elements. It's display in the bottom of the right panel if the information is present.
+
 ### Tree View
 
 - Arrow keys or hjkl for navigation

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;
@@ -114,6 +116,7 @@ function getData(element: Object): DataType {
     type,
     key,
     ref,
+    source,
     name,
     props,
     state,

backend/getData012.js

@@ -91,6 +91,7 @@ function getData012(element: Object): DataType {
     type,
     key,
     ref,
+    source: null,
     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,7 @@ var React = require('react');
 var decorate = require('./decorate');
 var invariant = require('./invariant');
 
+
 class PropState extends React.Component {
   getChildContext() {
     return {
@@ -29,6 +30,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}>
+          {source.fileName}
+        </div>
+        <div style={styles.sourcePos}>
+          :{source.lineNumber}
+        </div>
+      </div>
+    );
+  }
+
   render(): React.Element {
     if (!this.props.node) {
       // TODO(jared): style this
@@ -129,6 +147,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 +191,20 @@ var WrappedPropState = decorate({
   },
 }, PropState);
 
+var styles = {
+  source: {
+    padding: '5px 10px',
+    display: 'flex',
+    flexDirection: 'row',
+  },
+
+  sourceName: {
+    color: 'blue',
+  },
+
+  sourcePos: {
+    color: '#777',
+  },
+};
+
 module.exports = WrappedPropState;