Use UIComponent for Vomnibar iframe

5 files changed, 30 insertions, 79 deletions

diff --git a/content_scripts/ui_component.coffee b/content_scripts/ui_component.coffee
index d89f0cc8..696cb42c 100644
--- a/content_scripts/ui_component.coffee
+++ b/content_scripts/ui_component.coffee
@@ -42,7 +42,7 @@ class UIComponent
       @showing = true
     @iframeElement.focus()
 
-  hide: (focusWindow=true)->
+  hide: (focusWindow = true)->
     if @showing
       @iframeElement.setAttribute "style", @hideStyle
       window.focus() if focusWindow
diff --git a/content_scripts/vimium_frontend.coffee b/content_scripts/vimium_frontend.coffee
index 2de08c39..ae275f0c 100644
--- a/content_scripts/vimium_frontend.coffee
+++ b/content_scripts/vimium_frontend.coffee
@@ -139,8 +139,6 @@ initializePreDomReady = ->
     getActiveState: -> { enabled: isEnabledForUrl, passKeys: passKeys }
     setState: setState
     currentKeyQueue: (request) -> keyQueue = request.keyQueue
-    vomnibarShow: -> Vomnibar.show()
-    vomnibarClose: -> Vomnibar.close()
 
   chrome.runtime.onMessage.addListener (request, sender, sendResponse) ->
     # In the options page, we will receive requests from both content and background scripts. ignore those
@@ -202,6 +200,7 @@ initializeOnDomReady = ->
   # Tell the background page we're in the dom ready state.
   chrome.runtime.connect({ name: "domReady" })
   CursorHider.init()
+  Vomnibar.init()
 
 registerFrame = ->
   # Don't register frameset containers; focusing them is no use.
diff --git a/content_scripts/vomnibar.coffee b/content_scripts/vomnibar.coffee
index 10f75652..6b82d31c 100644
--- a/content_scripts/vomnibar.coffee
+++ b/content_scripts/vomnibar.coffee
@@ -2,7 +2,7 @@
 # This wraps the vomnibar iframe, which we inject into the page to provide the vomnibar.
 #
 Vomnibar =
-  vomnibarElement: null
+  vomnibarUI: null
 
   activate: -> @open {completer:"omni"}
   activateInNewTab: -> @open {
@@ -35,41 +35,23 @@ Vomnibar =
     newTab: true
   }
 
+  init: ->
+    unless @vomnibarUI?
+      @vomnibarUI = new UIComponent "pages/vomnibar.html", "vomnibarFrame", @handleMessage.bind this
+
+  handleMessage: (event) ->
+    if event.data == "hide"
+      @hide()
+
+
   # This function opens the vomnibar. It accepts options, a map with the values:
   #   completer   - The completer to fetch results from.
   #   query       - Optional. Text to prefill the Vomnibar with.
   #   selectFirst - Optional, boolean. Whether to select the first entry.
   #   newTab      - Optional, boolean. Whether to open the result in a new tab.
-  open: (options) ->
-    unless @vomnibarElement?
-      @vomnibarElement = document.createElement "iframe"
-      @vomnibarElement.className = "vomnibarFrame"
-      @vomnibarElement.seamless = "seamless"
-      @hide()
-
-    options.frameId = frameId
-
-    optionStrings = []
-    for option of options
-      if typeof options[option] == "boolean"
-        optionStrings.push option if options[option]
-      else
-        optionStrings.push "#{option}=#{escape(options[option])}"
-
-    @vomnibarElement.src = "#{chrome.runtime.getURL "pages/vomnibar.html"}?#{optionStrings.join "&"}"
-    document.documentElement.appendChild @vomnibarElement
-
-    @vomnibarElement.focus()
-
-  close: ->
-    @hide()
-    @vomnibarElement?.remove()
-
-  show: ->
-    @vomnibarElement?.style.display = "block"
+  open: (options) -> @vomnibarUI.activate options
 
-  hide: ->
-    @vomnibarElement?.style.display = "none"
+  hide: -> @vomnibarUI?.hide()
 
 root = exports ? window
 root.Vomnibar = Vomnibar
diff --git a/pages/vomnibar.coffee b/pages/vomnibar.coffee
index 2b6980f7..2d5fdd1c 100644
--- a/pages/vomnibar.coffee
+++ b/pages/vomnibar.coffee
@@ -16,25 +16,13 @@ Vomnibar =
   #
   # Activate the Vomnibox.
   #
-  activate: (params = "") ->
+  activate: (userOptions) ->
     options =
       completer: "omni"
       query: null
-      frameId: -1
-
-    booleanOptions = ["selectFirst", "newTab"]
-
-    # Convert options/params in URL to options object.
-    params
-      .split(/[\?&]/)
-      .map((option) ->
-        [name, value] = option.split "="
-        options[name] = if value? then unescape(value) else true
-      )
-
-    # Set boolean options.
-    for option in booleanOptions
-      options[option] = option of options and options[option] != "false"
+      newTab: false
+      selectFirst: false
+    extend options, userOptions
 
     options.refreshInterval = switch options.completer
       when "omni" then 100
@@ -47,11 +35,8 @@ Vomnibar =
     @vomnibarUI.setCompleter(completer)
     @vomnibarUI.setRefreshInterval(options.refreshInterval)
     @vomnibarUI.setForceNewTab(options.newTab)
-    @vomnibarUI.setFrameId(options.frameId)
-    @vomnibarUI.show()
-    if (options.query)
-      @vomnibarUI.setQuery(options.query)
-      @vomnibarUI.update()
+    @vomnibarUI.setQuery(options.query) if options.query
+    @vomnibarUI.update()
 
 class VomnibarUI
   constructor: ->
@@ -71,30 +56,14 @@ class VomnibarUI
 
   setForceNewTab: (forceNewTab) -> @forceNewTab = forceNewTab
 
-  setFrameId: (frameId) -> @frameId = frameId
-
-  show: ->
-    @box.style.display = "block"
-    @input.focus()
-    @input.addEventListener "keydown", @onKeydown
-
-    chrome.runtime.sendMessage
-      handler: "echo"
-      name: "vomnibarShow"
-      frameId: @frameId
-
   hide: ->
-    @box.style.display = "none"
-    @completionList.style.display = "none"
     @input.blur()
-    @input.removeEventListener "keydown", @onKeydown
     window.parent.focus()
-    chrome.runtime.sendMessage
-      handler: "echo"
-      name: "vomnibarClose"
-      frameId: @frameId
+    UIComponentServer.postMessage "hide"
+    @reset()
 
   reset: ->
+    @completionList.style.display = "none"
     @input.value = ""
     @updateTimer = null
     @completions = []
@@ -188,7 +157,7 @@ class VomnibarUI
     @selection = Math.min(Math.max(@initialSelectionValue, @selection), @completions.length - 1)
     @updateSelection()
 
-  update: (updateSynchronously, callback) ->
+  update: (updateSynchronously, callback) =>
     if (updateSynchronously)
       # cancel scheduled update
       if (@updateTimer != null)
@@ -205,11 +174,14 @@ class VomnibarUI
         @updateTimer = null
       @refreshInterval)
 
+    @input.focus()
+
   initDom: ->
     @box = document.getElementById("vomnibar")
 
     @input = @box.querySelector("input")
-    @input.addEventListener "input", => @update()
+    @input.addEventListener "input", @update
+    @input.addEventListener "keydown", @onKeydown
     @completionList = @box.querySelector("ul")
     @completionList.style.display = "none"
 
@@ -259,10 +231,7 @@ extend BackgroundCompleter,
 
     switchToTab: (tabId) -> chrome.runtime.sendMessage({ handler: "selectSpecificTab", id: tabId })
 
-initializeOnDomReady = ->
-  Vomnibar.activate document.location.search
-
-window.addEventListener "DOMContentLoaded", initializeOnDomReady
+UIComponentServer.registerHandler (event) -> Vomnibar.activate event.data
 
 root = exports ? window
 root.Vomnibar = Vomnibar
diff --git a/pages/vomnibar.html b/pages/vomnibar.html
index 6cba99e6..2ca463d0 100644
--- a/pages/vomnibar.html
+++ b/pages/vomnibar.html
@@ -6,6 +6,7 @@
     <script type="text/javascript" src="../lib/dom_utils.js"></script>
     <script type="text/javascript" src="../lib/handler_stack.js"></script>
     <script type="text/javascript" src="../lib/clipboard.js"></script>
+    <script type="text/javascript" src="ui_component_server.js"></script>
     <script type="text/javascript" src="vomnibar.js"></script>
     <link rel="stylesheet" type="text/css" href="../content_scripts/vimium.css" />
     <link rel="stylesheet" type="text/css" href="vomnibar.css" />