Instant blame display, remove key throttling

This make the blame window appear instantly when the key is pressed. It feels
nicer like this because there's instant feedback that you hit the correct key.
Same goes for closing the window. Throttling/debouncing is completely removed.

Test Plan:
Open a new Atom window and press `ctrl-b`. Now the window opens and closes
instantly. The data loads in the background if necessary.

I also held down `ctrl-b` with a really small key-repeat delay and it seems to
work pretty robustly.

Author: dmnd

lib/controllers/blameViewController.js

@@ -1,79 +1,38 @@
-const _ = require('underscore');
 const $ = require('atom').$;
 const React = require('atom').React;
 const BlameListView = require('../views/blame-list-view');
-const errorController = require('../controllers/errorController');
 
-const TOGGLE_DEBOUNCE_TIME = 600;
 
 /**
- * Getter for the currently focused editor.
+ * Display or hide a BlameListView for the active editor.
  *
- * @return {JQuery} - The currently focused editor element.
- */
-function getFocusedEditorView () {
-  var activePane = atom.workspaceView.getActivePaneView();
-  return activePane.find('.editor.is-focused').view();
-}
-
-/**
- * If active editor is not currently blaming funs blame command for given
- * file and blamer and inserts a BlameView for the file. If blame data is already
- * shown it removes that element.
+ * If the active editor does not have an existing BlameListView, one will be
+ * mounted.
  *
- * @param {String} filePath - path to the file to blame
- * @param {Blamer} projectBlamer - a fully initialized Blamer for the current project
+ * @param {Blamer} projectBlamer - a Blamer for the current project
  */
-function toggleBlame(filePath, projectBlamer) {
-  var focusedEditor = getFocusedEditorView();
-  if (focusedEditor.blaming) {
-    // we're already blaming this container, so unmount
-    focusedEditor.blaming = false;
-    var mountPoint = focusedEditor.find('.git-blame-mount');
-    React.unmountComponentAtNode(mountPoint);
-    mountPoint.remove();
+function toggleBlame(projectBlamer) {
+  var editorView = atom.workspaceView.getActiveView();
+  var editor = editorView.getEditor();
+
+  if (!editorView.blameView) {
+    // insert the BlameListView after the gutter div
+    var mountPoint = $('<div>', {'class': 'git-blame-mount'});
+    editorView.find('.gutter').after(mountPoint);
+
+    editorView.blameView = React.renderComponent(new BlameListView({
+      projectBlamer: projectBlamer,
+      filePath: editor.getPath(),
+      lineCount: editor.getLineCount(),
+      scrollbar: editorView.find('.vertical-scrollbar')
+    }), mountPoint[0]);
   } else {
-    // blame the given file + show view on success
-    projectBlamer.blame(filePath, function(err, blameData) {
-      if (err) {
-        errorController.handleError(err);
-      } else {
-        insertBlameView(blameData, focusedEditor);
-      }
-    });
+    editorView.blameView.toggle();
   }
 }
 
-/**
- * Debounced version of toggleBlame that will only allow toggleBlame function
- * to be executed 700ms after the last execution. Executes immediately the first
- * time its called.
- */
-var debouncedToggleBlame = _.debounce(toggleBlame, TOGGLE_DEBOUNCE_TIME, true);
-
-/**
- * Inserts a BlameView rendered from input blameData into its proper
- * spot within the focusedEditor.
- *
- * @param {Array|Object} blameData - array of data for a blame of each line output
- *    of blameFormatter
- * @param {JQuery} focusedEditor - the currently focused editor element in which
- *    the BlameView should be inserted
- */
-function insertBlameView(blameData, focusedEditor) {
-  // insert the BlameListView after the gutter div
-  var mountPoint = $('<div>', {'class': 'git-blame-mount'});
-  focusedEditor.find('.gutter').after(mountPoint);
-
-  React.renderComponent(new BlameListView({
-    annotations: blameData,
-    scrollbar: focusedEditor.find('.vertical-scrollbar')
-  }), mountPoint[0]);
-
-  focusedEditor.blaming = true;
-}
 
 // EXPORTS
 module.exports = {
-  toggleBlame: debouncedToggleBlame
+  toggleBlame: toggleBlame
 };

lib/git-blame.js

@@ -10,11 +10,7 @@ function activate() {
   initializeContext();
 
   // git-blame:blame
-  atom.workspaceView.command('git-blame:toggle', function() {
-    return toggleBlame();
-  });
-
-  return;
+  atom.workspaceView.command('git-blame:toggle', toggleBlame);
 }
 
 function initializeContext() {
@@ -35,11 +31,7 @@ function toggleBlame() {
   if (!projectBlamer) {
     return;
   }
-
-  var editor = atom.workspace.activePaneItem;
-  var filePath = editor.getPath();
-
-  BlameViewController.toggleBlame(filePath, projectBlamer);
+  BlameViewController.toggleBlame(projectBlamer);
 }
 
 // EXPORTS

lib/views/blame-line-view.coffee

@@ -1,15 +1,32 @@
 {React, Reactionary} = require 'atom'
+RP = React.PropTypes
 {div, span, a} = Reactionary
 RemoteRevision = require '../util/RemoteRevision'
 
 HASH_LENGTH = 7  # github uses this length
+BLANK_HASH = '-'.repeat(HASH_LENGTH)
+
+
+renderLoading = ->
+  div className: 'blame-line loading',
+    span className: 'hash', BLANK_HASH
+    span className: 'date', '1337-01-01'
+    span className: 'committer', 'Loading'
+
 
-module.exports =
 BlameLineComponent = React.createClass
+  propTypes:
+    date: RP.string.isRequired
+    hash: RP.string.isRequired
+    url: RP.string.isRequired
+    committer: RP.string.isRequired
+    backgroundClass: RP.string
+    noCommit: RP.bool
+
   render: ->
     if @props.noCommit
       div className: 'blame-line no-commit text-subtle',
-        span className: 'hash', '-'.repeat(HASH_LENGTH)
+        span className: 'hash', BLANK_HASH
         span className: 'date', @props.date
         span className: 'committer', 'Nobody'
     else
@@ -23,3 +40,5 @@ BlameLineComponent = React.createClass
 
   shouldComponentUpdate: ->
     false
+
+module.exports = {BlameLineComponent, renderLoading}

lib/views/blame-list-view.coffee

@@ -1,10 +1,21 @@
 {React, Reactionary, $} = require 'atom'
 {div, span, a} = Reactionary
-_ = require('underscore')
-BlameLineComponent = require './blame-line-view'
+RP = React.PropTypes
+_ = require 'underscore'
+{BlameLineComponent, renderLoading} = require './blame-line-view'
 
 
 BlameListLinesComponent = React.createClass
+  propTypes:
+    annotations: RP.arrayOf(RP.object)
+    loading: RP.bool.isRequired
+    filePath: RP.string.isRequired
+    lineCount: RP.number.isRequired
+
+  renderLoading: ->
+    lines = [0...@props.lineCount].map renderLoading
+    div null, lines
+
   # makes background color alternate by commit
   _addAlternatingBackgroundColor: (lines) ->
     bgClass = null
@@ -22,42 +33,66 @@ BlameListLinesComponent = React.createClass
       lastHash = line.hash
     lines
 
-  render: ->
+  renderLoaded: ->
     # clone so it can be modified
     lines = _.clone @props.annotations
 
     # add url to open diff
     filePath = atom.workspace.activePaneItem.getPath()
     remoteUrl = atom.project.getRepo()?.getOriginUrl(filePath)
     l['url'] = remoteUrl for l in lines
-
     @_addAlternatingBackgroundColor lines
-
     div null, lines.map BlameLineComponent
 
-  shouldComponentUpdate: ->
-    false
+  render: ->
+    if @props.loading
+      @renderLoading()
+    else
+      @renderLoaded()
+
+  shouldComponentUpdate: ({loading}) ->
+    loading isnt @props.loading
 
 
 BlameListView = React.createClass
+  propTypes:
+    projectBlamer: RP.object.isRequired
+    filePath: RP.string.isRequired
+    lineCount: RP.number.isRequired
+    scrollbar: RP.object.isRequired
+
   getInitialState: ->
     {
       # TODO: get this from the parent component somehow?
       scrollTop: @props.scrollbar.scrollTop()
       # TODO: be intelligent about persisting this so it doesn't reset
       width: 210
+      loading: true
+      visible: true
     }
 
   render: ->
-    div
-      className: 'git-blame'
-      style: width: @state.width,
-      div className: 'git-blame-resize-handle', onMouseDown: @resizeStarted
-      div className: 'git-blame-scroller',
+    display = if @state.visible then 'inline-block' else 'none'
+
+    body = if @state.error
+      div "Sorry, an error occurred."  # TODO: make this better
+    else
+      div
+        className: 'git-blame-scroller'
         div
           className: 'blame-lines'
           style: WebkitTransform: @getTransform()
-          BlameListLinesComponent annotations: @props.annotations
+          BlameListLinesComponent
+            annotations: @state.annotations
+            loading: @state.loading
+            filePath: @props.filePath
+            lineCount: @props.lineCount
+
+    div
+      className: 'git-blame'
+      style: width: @state.width, display: display
+      div className: 'git-blame-resize-handle', onMouseDown: @resizeStarted
+      body
 
   getTransform: ->
     {scrollTop} = @state
@@ -69,6 +104,28 @@ BlameListView = React.createClass
     else
       "translate(0px, #{-scrollTop}px)"
 
+  componentWillMount: ->
+    # kick off async request for blame data
+    @loadBlame true
+
+  loadBlame: (force) ->
+    return if @state.loading and not force
+
+    @setState loading: true
+    @props.projectBlamer.blame @props.filePath, (err, data) =>
+      if err
+        @setState
+          loading: false
+          error: true
+      else
+        @setState
+          loading: false
+          error: false
+          annotations: data
+
+  toggle: ->
+    @setState visible: !@state.visible
+
   componentDidMount: ->
     # Bind to scroll event on vertical-scrollbar to sync up scroll position of
     # blame gutter.