Highlight the selected hint with a different color.

The actual color / appearance could probably use some tweaking.

2 files changed, 13 insertions, 0 deletions

diff --git a/content_scripts/vimium_frontend.coffee b/content_scripts/vimium_frontend.coffee
index 2fa6b93f..68b58766 100644
--- a/content_scripts/vimium_frontend.coffee
+++ b/content_scripts/vimium_frontend.coffee
@@ -318,6 +318,8 @@ extend window,
 
     hintMarkers = (LinkHints.createMarkerFor(el) for el in visibleInputs)
 
+    hintMarkers[0].classList.add 'internalVimiumSelectedHintMarker'
+
     for marker, idx in hintMarkers
       marker.innerHTML = "<span>#{idx + 1}</span>"
 
@@ -325,8 +327,10 @@ extend window,
 
     handlerStack.push keydown: ->
       if event.keyCode == KeyboardUtils.keyCodes.tab
+        hintMarkers[selectedInputIndex].classList.remove 'internalVimiumSelectedHintMarker'
         if ++selectedInputIndex == hintMarkers.length
           selectedInputIndex = 0
+        hintMarkers[selectedInputIndex].classList.add 'internalVimiumSelectedHintMarker'
         hintMarkers[selectedInputIndex].clickableItem.focus()
       else
         DomUtils.removeElement hintMarkerContainingDiv
diff --git a/vimium.css b/vimium.css
index c774b604..29a1a91e 100644
--- a/vimium.css
+++ b/vimium.css
@@ -74,6 +74,15 @@ div.internalVimiumHintMarker {
   box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.3);
 }
 
+div.internalVimiumSelectedHintMarker {
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6666), color-stop(100%,#FF3333)) !important;
+  border: solid 1px #993333 !important;
+}
+
+div.internalVimiumSelectedHintMarker span {
+  color: white !important;
+}
+
 div.internalVimiumHintMarker span {
   color: #302505;
   font-family: Helvetica, Arial, sans-serif;