Adds pin-to-top, appearance animation, and perf boosts. (#110)

packages/reactotron-app/App/Commands/ApiResponseCommand.js

@@ -33,6 +33,10 @@ class ApiResponseCommand extends Component {
     command: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired
   }
 
+  shouldComponentUpdate (nextProps) {
+    return this.props.command.id !== nextProps.command.id
+  }
+
   renderDataAsObjectTree (data) {
     return <ObjectTree object={data} level={0} />
   }

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

@@ -86,6 +86,10 @@ class BenchmarkReportCommand extends Component {
     command: PropTypes.object.isRequired
   }
 
+  shouldComponentUpdate (nextProps) {
+    return this.props.command.id !== nextProps.command.id
+  }
+
   componentDidReact () {
     ReactTooltip.rebuild()
   }

packages/reactotron-app/App/Commands/ClientIntroCommand.js

@@ -9,6 +9,10 @@ class ClientIntroCommand extends Component {
     command: PropTypes.object.isRequired
   }
 
+  shouldComponentUpdate (nextProps) {
+    return this.props.command.id !== nextProps.command.id
+  }
+
   render () {
     const { command } = this.props
     const { payload } = command

packages/reactotron-app/App/Commands/LogCommand.js

@@ -44,6 +44,10 @@ class LogCommand extends Component {
     command: PropTypes.object.isRequired
   }
 
+  shouldComponentUpdate (nextProps) {
+    return this.props.command.id !== nextProps.command.id
+  }
+
   render () {
     const { command } = this.props
     const { payload } = command

packages/reactotron-app/App/Commands/StateActionCompleteCommand.js

@@ -15,6 +15,10 @@ class StateActionComplete extends Component {
     command: PropTypes.object.isRequired
   }
 
+  shouldComponentUpdate (nextProps) {
+    return this.props.command.id !== nextProps.command.id
+  }
+
   render () {
     const { command } = this.props
     const { payload } = command

packages/reactotron-app/App/Commands/StateValuesResponseCommand.js

@@ -32,6 +32,10 @@ class StateValuesResponseCommand extends Component {
     command: PropTypes.object.isRequired
   }
 
+  shouldComponentUpdate (nextProps) {
+    return this.props.command.id !== nextProps.command.id
+  }
+
   renderObject (value) {
     return <ObjectTree object={value} level={0} />
   }

packages/reactotron-app/App/Commands/UnknownCommand.js

@@ -9,6 +9,10 @@ class UnknownCommand extends Component {
     command: PropTypes.object.isRequired
   }
 
+  shouldComponentUpdate (nextProps) {
+    return this.props.command.id !== nextProps.command.id
+  }
+
   render () {
     const { command } = this.props
     const { payload, type } = command

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

@@ -0,0 +1,68 @@
+import React, { Component } from 'react'
+import { inject, observer } from 'mobx-react'
+import Colors from '../Theme/Colors'
+import getCommandComponent from '../Commands'
+import { map, reverse } from 'ramda'
+import { dotPath } from 'ramdasauce'
+import AppStyles from '../Theme/AppStyles'
+
+const Styles = {
+  container: {
+    backgroundColor: Colors.screen,
+    ...AppStyles.Layout.vbox
+  },
+  commands: {
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+    overflowY: 'scroll',
+    overflowX: 'hidden'
+  }
+}
+
+@inject('session')
+@observer
+class Timeline extends Component {
+
+  // fires when we will update
+  componentWillUpdate () {
+    const node = this.refs.commands
+    // http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html
+    // remember our height, position, and if we're at the top
+    this.scrollHeight = node.scrollHeight
+    this.scrollTop = node.scrollTop
+    this.isPinned = this.scrollTop === 0
+  }
+
+  // fires after we did update
+  componentDidUpdate () {
+    // should we be pinned to top, let's not auto-scroll
+    if (this.isPinned) return
+    const node = this.refs.commands
+    // scroll to the place we were before
+    // TODO: this falls apart as we reach max queue size as the scrollHeigh no longer changes
+    node.scrollTop = this.scrollTop + node.scrollHeight - this.scrollHeight
+  }
+
+  render () {
+    // grab the commands, but sdrawkcab
+    const commands = reverse(dotPath('props.session.server.commands.all', this))
+
+    const renderItem = command => {
+      const CommandComponent = getCommandComponent(command)
+      return <CommandComponent key={command.messageId} command={command} />
+    }
+
+    return (
+      <div style={Styles.container} ref='container'>
+        <div style={Styles.commands} ref='commands'>
+          {map(renderItem, commands)}
+        </div>
+      </div>
+    )
+  }
+
+}
+
+export default Timeline

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

@@ -1,10 +1,9 @@
 import React, { Component } from 'react'
 import Header from './Header'
-import Page from './Page'
 import Footer from './Footer'
 import Colors from '../Theme/Colors'
 import AppStyles from '../Theme/AppStyles'
-import PageStreaming from './PageStreaming'
+import Timeline from './Timeline'
 import ReactTooltip from 'react-tooltip'
 import SampleModal from '../Dialogs/SampleModal'
 
@@ -23,10 +22,9 @@ export default class VisualRoot extends Component {
     return (
       <div style={Styles.container}>
         <Header />
-        <Page tabId='streaming'>
-          <PageStreaming />
-        </Page>
+        <Timeline />
         <Footer />
+
         <SampleModal />
         <ReactTooltip />
       </div>

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

@@ -54,7 +54,9 @@ const Styles = {
   },
   children: {
     minHeight: 40,
-    overflow: 'hidden'
+    overflow: 'hidden',
+    animation: 'fade-up 0.25s',
+    willChange: 'transform opacity'
   }
 }
 
@@ -69,7 +71,7 @@ class Command extends Component {
   }
 
   shouldComponentUpdate (nextProps, nextState) {
-    return this.props.command !== nextProps.command
+    return (this.props.command.id !== nextProps.command.id)
   }
 
   render () {
@@ -90,7 +92,7 @@ class Command extends Component {
             {hasDuration && <span style={Styles.duration}>{ms} ms</span>}
             <Timestamp date={date} style={Styles.timestamp} />
           </div>
-          <div style={Styles.children}>
+          <div style={Styles.children} className='fade-it'>
             {children}
           </div>
         </div>

packages/reactotron-app/App/app.global.css

@@ -39,3 +39,8 @@ a.closeButton--jss-0-1 { display: none; }
 *:focus {
     outline: none;
 }
+
+@-webkit-keyframes fade-up {
+  0%   { -webkit-transform: translateY(5%); opacity: 0; }
+  100% { -webkit-transform: translateY(0%); opacity: 1; }
+}