WIP fix focus styling in FilePatchView

lib/controllers/file-patch-controller.js

@@ -20,6 +20,15 @@ export default class FilePatchController {
     })
     this.repositoryObserver.setActiveModel(props.repository)
     etch.initialize(this)
+
+    this.element.addEventListener('focus', () => {
+      this.focused = true
+      etch.update(this)
+    })
+    this.element.addEventListener('blur', () => {
+      this.focused = false
+      etch.update(this)
+    })
   }
 
   async update (props) {
@@ -38,12 +47,13 @@ export default class FilePatchController {
   render () {
     const hunks = this.props.filePatch.getHunks()
     if (!hunks.length) {
-      return <div className='git-PaneView pane-item is-blank'><span className='icon icon-info'>File has no contents</span></div>
+      return <div className='git-PaneView pane-item is-blank' tabIndex='-1'><span className='icon icon-info'>File has no contents</span></div>
     } else {
       // NOTE: Outer div is required for etch to render elements correctly
       return (
-        <div className='git-PaneView pane-item'>
+        <div className='git-PaneView pane-item' tabIndex='-1'>
           <FilePatchView
+          focused={this.focused}
           ref='filePatchView'
           stageHunk={this.stageHunk}
           unstageHunk={this.unstageHunk}

lib/github-package.js

@@ -111,7 +111,7 @@ export default class GithubPackage {
   }
 
   focusFilePatchView () {
-    this.filePatchController.refs.filePatchView.element.focus()
+    this.filePatchController.refs.filePatchView.focus()
   }
 
   async showMergeConflictFileForPath (relativeFilePath, {focus} = {}) {

lib/views/file-patch-view.js

@@ -54,8 +54,12 @@ export default class FilePatchView {
     const headLine = this.selection.getHeadLine()
     const hunkSelectionMode = this.selection.getMode() === 'hunk'
     const stageButtonLabelPrefix = this.props.stagingStatus === 'unstaged' ? 'Stage' : 'Unstage'
+    let classes = 'git-FilePatchView'
+    if (this.props.focused) {
+      classes += ' focused'
+    }
     return (
-      <div className='git-FilePatchView' tabIndex='-1'
+      <div className={classes} tabIndex='-1'
         onmouseup={this.mouseup}>
         {this.props.hunks.map((hunk) => {
           const isSelected = selectedHunks.has(hunk)
@@ -83,6 +87,10 @@ export default class FilePatchView {
     )
   }
 
+  focus () {
+    this.element.focus()
+  }
+
   mousedownOnHeader (hunk) {
     this.selection.selectHunk(hunk)
     this.mouseSelectionInProgress = true