Merge branch 'hide-vomnibar-on-focus'

2 files changed, 18 insertions, 8 deletions

diff --git a/content_scripts/ui_component.coffee b/content_scripts/ui_component.coffee
index c4ed3bf6..c6b59464 100644
--- a/content_scripts/ui_component.coffee
+++ b/content_scripts/ui_component.coffee
@@ -29,24 +29,25 @@ class UIComponent
 
   activate: (message) ->
     @postMessage message if message?
-    if @showing
-      # NOTE(smblott) Experimental.  Not sure this is a great idea. If the iframe was already showing, then
-      # the user gets no visual feedback when it is re-focused.  So flash its border.
-      @iframeElement.classList.add "vimiumUIComponentReactivated"
-      setTimeout((=> @iframeElement.classList.remove "vimiumUIComponentReactivated"), 200)
-    else
-      @show()
+    @show() unless @showing
     @iframeElement.focus()
 
   show: (message) ->
     @postMessage message if message?
     @iframeElement.classList.remove "vimiumUIComponentHidden"
     @iframeElement.classList.add "vimiumUIComponentShowing"
+    window.addEventListener "focus", @onFocus = (event) =>
+      if event.target == window
+        window.removeEventListener @onFocus
+        @onFocus = null
+        @postMessage "hide"
     @showing = true
 
   hide: (focusWindow = true)->
     @iframeElement.classList.remove "vimiumUIComponentShowing"
     @iframeElement.classList.add "vimiumUIComponentHidden"
+    window.removeEventListener @onFocus if @onFocus
+    @onFocus = null
     window.focus() if focusWindow
     @showing = false
 
diff --git a/pages/vomnibar.coffee b/pages/vomnibar.coffee
index 18a72a37..d0b7a7dd 100644
--- a/pages/vomnibar.coffee
+++ b/pages/vomnibar.coffee
@@ -38,6 +38,8 @@ Vomnibar =
     @vomnibarUI.setQuery(options.query)
     @vomnibarUI.update()
 
+  hide: -> @vomnibarUI?.hide()
+
 class VomnibarUI
   constructor: ->
     @refreshInterval = 0
@@ -180,6 +182,12 @@ class VomnibarUI
     @completionList.style.display = ""
 
     window.addEventListener "focus", => @input.focus()
+    # A click in the vomnibar itself refocuses the input.
+    @box.addEventListener "click", (event) =>
+      @input.focus()
+      event.stopImmediatePropagation()
+    # A click anywhere else hides the vomnibar.
+    document.body.addEventListener "click", => @hide()
 
 #
 # Sends filter and refresh requests to a Vomnibox completer on the background page.
@@ -225,7 +233,8 @@ extend BackgroundCompleter,
 
     switchToTab: (tabId) -> chrome.runtime.sendMessage({ handler: "selectSpecificTab", id: tabId })
 
-UIComponentServer.registerHandler (event) -> Vomnibar.activate event.data
+UIComponentServer.registerHandler (event) ->
+  if event.data == "hide" then Vomnibar.hide() else Vomnibar.activate event.data
 
 root = exports ? window
 root.Vomnibar = Vomnibar