Adds benchmark rendering.

packages/reactotron-app/App/Foundation/VisualRoot.js

@@ -8,6 +8,7 @@ import Footer from './Footer'
 import Colors from '../Theme/Colors'
 import AppStyles from '../Theme/AppStyles'
 import PageStreaming from '../Streaming/PageStreaming'
+import ReactTooltip from 'react-tooltip'
 
 const Styles = {
   container: {
@@ -38,6 +39,7 @@ export default class VisualRoot extends Component {
         <Page tabId='streaming'>
           <PageStreaming />
         </Page>
+        <ReactTooltip />
         <Footer />
       </div>
     )

packages/reactotron-app/App/Streaming/Command.js

@@ -36,18 +36,18 @@ const Styles = {
   },
   subtitle: {
     fontSize: 14,
-    color: Colors.mutedText,
+    color: Colors.text,
     textAlign: 'left',
     paddingLeft: 8
   },
   duration: {
     fontSize: 14,
-    color: Colors.primary,
-    paddingRight: 4
+    color: Colors.text,
+    paddingRight: 10
   },
   timestamp: {
     fontSize: 14,
-    color: Colors.line
+    color: Colors.mutedText
   },
   spacer: {
     flex: 1

packages/reactotron-app/App/Streaming/Commands/BenchmarkReportCommand.js

@@ -0,0 +1,112 @@
+import React, { Component, PropTypes } from 'react'
+import Command from '../Command'
+import Colors from '../../Theme/Colors'
+import { clone, map, addIndex, tail, merge, last } from 'ramda'
+import { isNilOrEmpty } from 'ramdasauce'
+import AppStyles from '../../Theme/AppStyles'
+import ReactTooltip from 'react-tooltip'
+
+const mapIndexed = addIndex(map)
+
+const color = Colors.Palette.purple
+const graphUsed = Colors.barFill
+const graphEmpty = Colors.Palette.transparent
+
+function percentStyle (start, length, total) {
+  const p1 = Number((start / total * 100).toFixed(0))
+  const p2 = Number((length / total * 100).toFixed(0)) + p1
+  const p3 = 100 - p2 - p1
+
+  const stop1 = `${graphEmpty} 0%`
+  const stop2 = `${graphEmpty} ${p1}%`
+  const stop3 = `${graphUsed} 0%`
+  const stop4 = `${graphUsed} ${p2}%`
+  const stop5 = `${graphEmpty} 0%`
+  const stop6 = `${graphEmpty} ${p3}%`
+
+  return {'background': `-webkit-linear-gradient(left, ${stop1}, ${stop2}, ${stop3}, ${stop4}, ${stop5}, ${stop6})`}
+}
+
+const Styles = {
+  step: {
+    border: `1px solid ${Colors.barBorder}`,
+    position: 'relative',
+    margin: '2px 0',
+    ...AppStyles.Layout.hbox,
+    padding: '4px 4px',
+    justifyContent: 'space-between',
+    WebkitUserSelect: 'all'
+  },
+  stepLast: {
+    paddingTop: 4
+  },
+  reportTitle: {
+    wordBreak: 'break-all',
+    paddingBottom: 10
+  },
+  stepNumber: {
+    paddingRight: 10
+  },
+  stepTitle: {
+    flex: 1,
+    wordBreak: 'break-all',
+    color: Colors.matteBlack
+  },
+  delta: {
+    textAlign: 'right',
+    width: 100
+  },
+  elapsed: {
+    width: 75,
+    textAlign: 'right'
+  }
+}
+
+const makeStep = (step, idx, last, totalDuration) => {
+  const { time, title, delta } = step
+  const pct = Number(delta / totalDuration * 100.0).toFixed(0)
+  const startedAt = Number(time - delta).toFixed(0)
+  const endedAt = Number(time).toFixed(0)
+  const timeText = `${startedAt} - ${endedAt} ms (${pct}%)`
+  const key = `step-${idx}`
+  const titleText = (last && isNilOrEmpty(title)) ? 'Last' : title
+  const pStyle = percentStyle(step.time - step.delta, step.delta, totalDuration)
+  const stepStyle = merge(merge(Styles.step, last && Styles.stepLast), pStyle)
+  return (
+    <div data-tip={timeText} key={key} style={stepStyle}>
+      <div style={Styles.stepTitle}>{titleText}</div>
+      <div style={Styles.delta}>+{delta} ms</div>
+    </div>
+  )
+}
+
+class BenchmarkReportCommand extends Component {
+
+  static propTypes = {
+    command: PropTypes.object.isRequired
+  }
+
+  componentDidReact () {
+    ReactTooltip.rebuild()
+  }
+
+  render () {
+    const { command } = this.props
+    const { payload } = command
+    const { title, steps } = clone(payload)
+    const duration = last(steps).time
+
+    return (
+      <Command command={command} title='BENCHMARK' color={color} duration={duration}>
+        <div style={Styles.reportTitle}>{title}</div>
+          {
+            mapIndexed(
+              (step, idx) => makeStep(step, idx, idx === steps.length - 2, duration),
+              tail(steps))
+          }
+      </Command>
+    )
+  }
+}
+
+export default BenchmarkReportCommand

packages/reactotron-app/App/Streaming/Commands/index.js

@@ -3,12 +3,13 @@ import UnknownCommand from './UnknownCommand'
 import StateActionCompleteCommand from './StateActionCompleteCommand'
 import ApiResponseCommand from './ApiResponseCommand'
 import ClientIntroCommand from './ClientIntroCommand'
+import BenchmarkReportCommand from './BenchmarkReportCommand'
 
 export default command => {
   const { type } = command
 
   switch (type) {
-    case 'benchmark.report': return UnknownCommand
+    case 'benchmark.report': return BenchmarkReportCommand
     case 'log': return LogCommand
     case 'state.action.complete': return StateActionCompleteCommand
     case 'api.response': return ApiResponseCommand

packages/reactotron-app/App/Theme/Colors.js

@@ -12,7 +12,10 @@ export const Palette = {
   ghost15: 'rgba(0,0,0,0.10)',
   green: '#0aa260',
   red: '#9B0013',
-  orange: '#D6A605'
+  orange: '#D6A605',
+  purple: '#4F0095',
+  lightPurple: 'D8DCE2',
+  lighterPurple: '#E2E6ED'
 }
 
 const roles = {
@@ -26,7 +29,9 @@ const roles = {
   subtleLine: Palette.lightGrey,
   good: Palette.green,
   error: Palette.red,
-  warning: Palette.orange
+  warning: Palette.orange,
+  barFill: Palette.white,
+  barBorder: Palette.lightGrey
 }
 
 export default {

packages/reactotron-app/package.json

@@ -83,9 +83,10 @@
     "react-icons": "^2.2.1",
     "react-json-tree": "^0.10.0",
     "react-tap-event-plugin": "^1.0.0",
+    "react-tooltip": "^3.1.5",
+    "reactotron-core-server": "^0.90.1",
     "socket.io": "1.4.8",
-    "source-map-support": "^0.4.2",
-    "reactotron-core-server": "^0.90.1"
+    "source-map-support": "^0.4.2"
   },
   "devEngines": {
     "node": "6.x",

packages/reactotron-core-client/scripts/send.js

@@ -12,9 +12,11 @@ const sendError = (message) => client.error(message)
 const sendBenchmark = async (title) => {
   const bench = client.benchmark(title)
   await sleep(50)
-  bench.step('first sleep')
+  bench.step('about to sleep')
   await sleep(100)
-  bench.stop()
+  bench.step('finished sleeping')
+  await sleep(5)
+  bench.last('cleaning up')
 }
 const sendAction = (action) =>
   client.send('state.action.complete', { ms: 123, name: action.type, action })
@@ -65,7 +67,7 @@ const shotgun = async () => {
     symbolThing: Symbol('hi')
   }})
   sendDebug(giant)
-  await sendBenchmark('Awesome!')
+  await sendBenchmark('perf test for myCustomSort()')
 
   client.socket.close()
 }

packages/reactotron-core-client/src/plugins/benchmark.js

@@ -1,3 +1,5 @@
+import { length, last } from 'ramda'
+
 /**
  * Runs small high-unscientific benchmarks for you.
  */
@@ -7,13 +9,17 @@ export default () => reactotron => {
   const benchmark = title => {
     const steps = []
     const elapsed = startTimer()
-    const step = stepTitle => steps.push({ title: stepTitle, time: elapsed() })
-    steps.push({ title, time: 0 })
+    const step = stepTitle => {
+      const previousTime = length(steps) === 0 ? 0 : last(steps).time
+      const nextTime = elapsed()
+      steps.push({ title: stepTitle, time: nextTime, delta: nextTime - previousTime })
+    }
+    steps.push({ title, time: 0, delta: 0 })
     const stop = stopTitle => {
       step(stopTitle)
       reactotron.send('benchmark.report', { title, steps })
     }
-    return { step, stop }
+    return { step, stop, last: stop }
   }
 
   return {