From 00940d77f86745f9d0acb3cf7705a40246ee3e09 Mon Sep 17 00:00:00 2001
From: Sebastian Pfitzner <pfitzseb@physik.hu-berlin.de>
Date: Tue, 14 Jun 2016 13:10:34 +0200
Subject: [PATCH] shortcuts for navigating through results + css tweaks

---
 keymaps/ink.cson         |  6 ++++++
 lib/editor/result.coffee | 25 +++++++++++++++++++------
 lib/tree.coffee          |  2 +-
 styles/ink.less          | 21 ++++++++++++++++-----
 4 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/keymaps/ink.cson b/keymaps/ink.cson
index de96231b..e2f2bcf0 100644
--- a/keymaps/ink.cson
+++ b/keymaps/ink.cson
@@ -24,3 +24,9 @@
 '.platform-win32 atom-text-editor:not([mini]),
  .platform-linux atom-text-editor:not([mini])':
   'ctrl-i ctrl-c': 'inline-results:clear-all'
+
+'atom-overlay .ink':
+  't': 'inline-results:toggleTree'
+  'enter': 'native!'
+  'tab': 'native!'
+  'shift-tab': 'native!'
diff --git a/lib/editor/result.coffee b/lib/editor/result.coffee
index 35ceca52..b1db58a5 100644
--- a/lib/editor/result.coffee
+++ b/lib/editor/result.coffee
@@ -52,6 +52,7 @@ class Result
   createView: (opts) ->
     {content, fade, loading} = opts
     @view = document.createElement 'div'
+    @view.setAttribute 'tabindex', '0'
     @view.classList.add 'ink', 'result'
     switch @type
       when 'inline'
@@ -62,7 +63,7 @@ class Result
     # @view.style.pointerEvents = 'auto'
     @view.addEventListener 'mousewheel', (e) ->
       e.stopPropagation()
-    # clicking on it will bring the current result to the top of the stack
+    # clicking on it will bring the focus the result
     @view.addEventListener 'click', =>
       @view.parentNode.parentNode.appendChild @view.parentNode
 
@@ -73,6 +74,11 @@ class Result
     if content? then @setContent content, opts
     if loading then @setContent views.render(span 'loading icon icon-gear'), opts
 
+  focus: () ->
+    # move current result to the top of the stack
+    @view.parentNode.parentNode.appendChild @view.parentNode
+    @view.querySelector('.tree').focus()
+
   setContent: (view, {error, loading}={}) ->
     @loading = loading
     while @view.firstChild?
@@ -90,14 +96,11 @@ class Result
     @marker.result = @
     mark = item: @view, stable: true
     switch @type
-      when 'inline' then mark.type = 'overlay'; mark.class = 'no-pointer-events'
+      when 'inline' then mark.type = 'overlay'; mark.class = ['no-pointer-events', 'ink']
       when 'block' then mark.type = 'block'; mark.position = 'after'
     @editor.decorateMarker @marker, mark
     @disposables.add @marker.onDidChange (e) => @checkMarker e
 
-  toggleTree: ->
-    trees.toggle $(@view).find('> .tree')
-
   remove: ->
     if @loading then return
     @view.classList.add 'ink-hide'
@@ -179,6 +182,15 @@ class Result
       rs = @forLines ed, sel.getHeadBufferPosition().row, sel.getTailBufferPosition().row
       rs.map (r) -> r.toggleTree()
 
+  @focusCurrent: ->
+    ed = atom.workspace.getActiveTextEditor()
+    for sel in ed.getSelections()
+      rs = @forLines ed, sel.getHeadBufferPosition().row, sel.getTailBufferPosition().row
+      rs.map (r) -> r.focus()
+
+  @toggleTree: ->
+    trees.toggle document.activeElement
+
   # Commands
 
   @activate: ->
@@ -186,7 +198,8 @@ class Result
     @subs.add atom.commands.add 'atom-text-editor:not([mini])',
       'inline:clear-current': (e) => @removeCurrent e
       'inline-results:clear-all': => @removeAll()
-      'inline-results:toggle': => @toggleCurrent()
+      'inline-results:focus': => @focusCurrent()
+      'inline-results:toggleTree': => @toggleTree()
 
   @deactivate: ->
     @subs.dispose()
diff --git a/lib/tree.coffee b/lib/tree.coffee
index 92b43be3..0a0ed1db 100644
--- a/lib/tree.coffee
+++ b/lib/tree.coffee
@@ -4,7 +4,7 @@ views = require './util/views'
 
 module.exports =
   treeView: (head, children, {expand}) ->
-    view = views.render div 'ink tree', [
+    view = views.render div {class: 'ink tree', 'tabindex': '0'}, [
       span 'icon icon-chevron-right open'
       div 'header gutted', head
       div 'body gutted', children
diff --git a/styles/ink.less b/styles/ink.less
index d8662058..123c6d87 100644
--- a/styles/ink.less
+++ b/styles/ink.less
@@ -20,6 +20,12 @@ atom-text-editor {
   pointer-events: none;
 }
 
+atom-overlay:last-child .ink.inline {
+  background-color: contrast(@syntax-background-color,
+                             darken(@syntax-background-color, 4%),
+                             lighten(@syntax-background-color, 4%));
+}
+
 atom-text-editor::shadow {
   div.block-notify .region {
     background: @background-color-info;
@@ -80,6 +86,12 @@ atom-text-editor::shadow {
   position: relative;
   left: 10px;
 
+  :focus {
+    > .icon:before {
+      text-shadow: 2px 2px 0 @background-color-info;
+    }
+  }
+
   pointer-events: auto;
 
   &.error {
@@ -87,12 +99,11 @@ atom-text-editor::shadow {
     border-left: 2px solid @background-color-error;
   }
 
-  background: contrast(@syntax-background-color,
-                       darken(@syntax-background-color, 4%),
-                       lighten(@syntax-background-color, 4%));
+  background: @syntax-background-color;
   border-left: 2px solid @background-color-info;
-  border-right: 2px solid @syntax-background-color;
-
+  border-right: 2px solid contrast(@syntax-background-color,
+                            darken(@syntax-background-color, 4%),
+                           lighten(@syntax-background-color, 4%));
   border-radius: 3px;
 
   padding: 0px 5px 0px 5px;