From 4af11f6afae7267c717f0dcc530fbc9138b6d5fe Mon Sep 17 00:00:00 2001
From: Katrina Uychaco <kuychaco@gmail.com>
Date: Tue, 22 Nov 2016 18:05:21 -0800
Subject: [PATCH] WIP fix focus styling in FilePatchView

---
 lib/controllers/file-patch-controller.js | 14 ++++++++++++--
 lib/github-package.js                    |  2 +-
 lib/views/file-patch-view.js             | 10 +++++++++-
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/lib/controllers/file-patch-controller.js b/lib/controllers/file-patch-controller.js
index f034bde207..10a3bc2486 100644
--- a/lib/controllers/file-patch-controller.js
+++ b/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}
diff --git a/lib/github-package.js b/lib/github-package.js
index 47324fb6d8..680de6f760 100644
--- a/lib/github-package.js
+++ b/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} = {}) {
diff --git a/lib/views/file-patch-view.js b/lib/views/file-patch-view.js
index a163169402..6f8f13c252 100644
--- a/lib/views/file-patch-view.js
+++ b/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