Add element's key and ref to tree and prop views

backend/getData.js

@@ -24,6 +24,8 @@ function getData(element: Object): DataType {
   var updater = null;
   var name = null;
   var type = null;
+  var key = null;
+  var ref = null;
   var text = null;
   var publicInstance = null;
   var nodeType = 'Native';
@@ -52,6 +54,10 @@ function getData(element: Object): DataType {
 
   if (element._currentElement) {
     type = element._currentElement.type;
+    if (element._currentElement.key) {
+      key = String(element._currentElement.key);
+    }
+    ref = element._currentElement.ref;
     if (typeof type === 'string') {
       name = type;
     } else if (element.getName) {
@@ -95,6 +101,8 @@ function getData(element: Object): DataType {
   return {
     nodeType,
     type,
+    key,
+    ref,
     name,
     props,
     state,

backend/getData012.js

@@ -21,6 +21,8 @@ function getData012(element: Object): DataType {
   var updater = null;
   var name = null;
   var type = null;
+  var key = null;
+  var ref = null;
   var text = null;
   var publicInstance = null;
   var nodeType = 'Native';
@@ -46,6 +48,10 @@ function getData012(element: Object): DataType {
 
   if (element._currentElement) {
     type = element._currentElement.type;
+    if (element._currentElement.key) {
+      key = String(element._currentElement.key);
+    }
+    ref = element._currentElement.ref;
     if (typeof type === 'string') {
       name = type;
     } else {
@@ -83,6 +89,8 @@ function getData012(element: Object): DataType {
   return {
     nodeType,
     type,
+    key,
+    ref,
     name,
     props,
     state,

backend/types.js

@@ -13,6 +13,8 @@
 export type DataType = {
   nodeType: 'Native' | 'Wrapper' | 'NativeWrapper' | 'Composite' | 'Text' | 'Empty',
   type: ?(string | AnyFn),
+  key: ?string,
+  ref: ?(string | AnyFn),
   name: ?string,
   props: ?Object,
   state: ?Object,

frontend/DataView/DataView.js

@@ -230,6 +230,7 @@ var styles = {
     fontSize: 8,
     cursor: 'pointer',
     position: 'absolute',
+    top: '-2px',
     right: '100%',
     padding: '5px 0',
   },

frontend/Node.js

@@ -144,7 +144,9 @@ class Node extends React.Component {
             <span style={styles.tagText}>
               <span style={styles.openTag}>
                 <span style={tagStyle}>&lt;{name}</span>
-                {node.get('props') && <Props props={node.get('props')}/>}
+                {node.get('key') && <Props key="key" props={{'key': node.get('key')}}/>}
+                {node.get('ref') && <Props key="ref" props={{'ref': node.get('ref')}}/>}
+                {node.get('props') && <Props key="props" props={node.get('props')}/>}
                 {!content && '/'}
                 <span style={tagStyle}>&gt;</span>
               </span>
@@ -160,11 +162,6 @@ class Node extends React.Component {
       );
     }
 
-    // Plain string
-    if (typeof children === 'string') {
-      return <div style={leftPad}>{children}</div>;
-    }
-
     var closeTag = (
       <span style={styles.closeTag}>
         <span style={tagStyle}>
@@ -196,7 +193,9 @@ class Node extends React.Component {
         <span style={styles.tagText}>
           <span style={styles.openTag}>
             <span style={tagStyle}>&lt;{'' + node.get('name')}</span>
-            {node.get('props') && <Props props={node.get('props')}/>}
+            {node.get('key') && <Props key="key" props={{'key': node.get('key')}}/>}
+            {node.get('ref') && <Props key="ref" props={{'ref': node.get('ref')}}/>}
+            {node.get('props') && <Props key="props" props={node.get('props')}/>}
             <span style={tagStyle}>&gt;</span>
           </span>
           {collapsed && '…'}

frontend/PropState.js

@@ -14,6 +14,7 @@ var BlurInput = require('./BlurInput');
 var DataView = require('./DataView/DataView');
 var DetailPane = require('./detail_pane/DetailPane');
 var DetailPaneSection = require('./detail_pane/DetailPaneSection');
+var PropVal = require('./PropVal');
 var React = require('react');
 
 var decorate = require('./decorate');
@@ -64,6 +65,8 @@ class PropState extends React.Component {
       }
     }
 
+    var key = this.props.node.get('key');
+    var ref = this.props.node.get('ref');
     var state = this.props.node.get('state');
     var context = this.props.node.get('context');
     var propsReadOnly = !this.props.node.get('canUpdate');
@@ -72,6 +75,24 @@ class PropState extends React.Component {
       <DetailPane
         header={'<' + this.props.node.get('name') + '>'}
         hint="($r in the console)">
+        {key &&
+          <DetailPaneSection
+            title="Key"
+            key={this.props.id + '-key'}>
+            <PropVal
+              val={key}
+            />
+          </DetailPaneSection>
+        }
+        {ref &&
+          <DetailPaneSection
+            title="Ref"
+            key={this.props.id + '-ref'}>
+            <PropVal
+              val={ref}
+            />
+          </DetailPaneSection>
+        }
         {editTextContent}
         <DetailPaneSection
           hint={propsReadOnly ? 'read-only' : null}

frontend/detail_pane/DetailPaneSection.js

@@ -20,7 +20,7 @@ class DetailPaneSection extends React.Component {
     } = this.props;
     return (
       <div style={styles.section}>
-        <strong>{this.props.title}</strong>
+        <strong style={styles.title}>{this.props.title}</strong>
         {hint ? ' ' + hint : null}
         {children}
       </div>
@@ -33,6 +33,9 @@ var styles = {
     marginBottom: 10,
     flexShrink: 0,
   },
+  title: {
+    marginRight: 5,
+  },
 };
 
 module.exports = DetailPaneSection;