[rn] Add PerformanceOverlay to the inspector

Libraries/Inspector/Inspector.js

@@ -26,6 +26,7 @@ class Inspector extends React.Component {
     this.state = {
       panelPos: 'bottom',
       inspecting: true,
+      perfing: false,
       inspected: null,
     };
   }
@@ -59,9 +60,18 @@ class Inspector extends React.Component {
     });
   }
 
+  setPerfing(val: bool) {
+    this.setState({
+      perfing: val,
+      inspecting: false,
+      inspected: null,
+    });
+  }
+
   setInspecting(val: bool) {
     this.setState({
       inspecting: val,
+      inspected: null
     });
   }
 
@@ -79,6 +89,8 @@ class Inspector extends React.Component {
         <View style={[styles.panelContainer, panelContainerStyle]}>
           <InspectorPanel
             inspecting={this.state.inspecting}
+            perfing={this.state.perfing}
+            setPerfing={this.setPerfing.bind(this)}
             setInspecting={this.setInspecting.bind(this)}
             inspected={this.state.inspected}
             hierarchy={this.state.hierarchy}

Libraries/Inspector/InspectorPanel.js

@@ -16,6 +16,7 @@ var StyleSheet = require('StyleSheet');
 var Text = require('Text');
 var View = require('View');
 var ElementProperties = require('ElementProperties');
+var PerformanceOverlay = require('PerformanceOverlay');
 var TouchableHighlight = require('TouchableHighlight');
 
 var PropTypes = React.PropTypes;
@@ -44,6 +45,10 @@ class InspectorPanel extends React.Component {
           setSelection={this.props.setSelection}
         />
       );
+    } else if (this.props.perfing) {
+      contents = (
+        <PerformanceOverlay />
+      );
     } else {
       contents = (
         <View style={styles.waiting}>
@@ -58,7 +63,12 @@ class InspectorPanel extends React.Component {
           <Button
             title={'Inspect'}
             pressed={this.props.inspecting}
-            onClick={this.props.setInspecting}/>
+            onClick={this.props.setInspecting}
+          />
+          <Button title={'Perf'}
+            pressed={this.props.perfing}
+            onClick={this.props.setPerfing}
+          />
         </View>
       </View>
     );
@@ -69,6 +79,8 @@ InspectorPanel.propTypes = {
   inspecting: PropTypes.bool,
   setInspecting: PropTypes.func,
   inspected: PropTypes.object,
+  perfing: PropTypes.bool,
+  setPerfing: PropTypes.func,
 };
 
 class Button extends React.Component {

Libraries/Inspector/PerformanceOverlay.js

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule PerformanceOverlay
+ * @flow
+ */
+'use strict';
+
+var PerformanceLogger = require('PerformanceLogger');
+var React = require('React');
+var StyleSheet = require('StyleSheet');
+var Text = require('Text');
+var View = require('View');
+
+var PerformanceOverlay = React.createClass({
+  render: function() {
+    var perfLogs = PerformanceLogger.getTimespans();
+    var items = [];
+
+    for (var key in perfLogs) {
+      if (perfLogs[key].totalTime) {
+        items.push(
+          <View style={styles.row}>
+            <Text style={[styles.text, styles.label]}>{key}</Text>
+            <Text style={[styles.text, styles.totalTime]}>
+              {perfLogs[key].totalTime + 'ms'}
+            </Text>
+          </View>
+        );
+      }
+    }
+
+    return (
+      <View style={styles.container}>
+        {items}
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  container: {
+    height: 100,
+    paddingTop: 10,
+  },
+  label: {
+    flex: 1,
+  },
+  row: {
+    flexDirection: 'row',
+    paddingHorizontal: 10,
+  },
+  text: {
+    color: 'white',
+    fontSize: 12,
+  },
+  totalTime: {
+    paddingRight: 100,
+  },
+});
+
+module.exports = PerformanceOverlay;