Move the HUD to an iframe, managed by UIComponent

6 files changed, 57 insertions, 26 deletions

diff --git a/content_scripts/hud.coffee b/content_scripts/hud.coffee
index 05fa998d..55c302d6 100644
--- a/content_scripts/hud.coffee
+++ b/content_scripts/hud.coffee
@@ -4,6 +4,7 @@
 #
 HUD =
   tween: null
+  hudUI: null
   _displayElement: null
 
   # This HUD is styled to precisely mimick the chrome HUD on Mac. Use the "has_popup_and_link_hud.html"
@@ -11,7 +12,9 @@ HUD =
   # it doesn't sit on top of horizontal scrollbars like Chrome's HUD does.
 
   init: ->
-    @tween = new Tween ".vimiumHUD.vimiumUIComponentVisible"
+    @hudUI = new UIComponent "pages/hud.html", "vimiumHUDFrame", ({data}) =>
+      this[data.name]? data
+    @tween = new Tween "iframe.vimiumHUDFrame.vimiumUIComponentVisible", @hudUI.shadowDOM
 
   showForDuration: (text, duration) ->
     @show(text)
@@ -20,21 +23,8 @@ HUD =
   show: (text) ->
     return unless @enabled()
     clearTimeout(@_showForDurationTimerId)
-    @displayElement().innerText = text
+    @hudUI.show {name: "show", text}
     @tween.fade 1.0, 150
-    @displayElement().classList.add "vimiumUIComponentVisible"
-    @displayElement().classList.remove "vimiumUIComponentHidden"
-
-  #
-  # Retrieves the HUD HTML element.
-  #
-  displayElement: -> @_displayElement ?= @createHudElement()
-
-  createHudElement: ->
-    element = document.createElement("div")
-    element.className = "vimiumReset vimiumHUD vimiumUIComponentHidden"
-    document.body.appendChild(element)
-    element
 
   # Hide the HUD.
   # If :immediate is falsy, then the HUD is faded out smoothly (otherwise it is hidden immediately).
@@ -42,11 +32,12 @@ HUD =
   # mode indicator, is when hide() is called for the mode indicator itself.
   hide: (immediate = false, updateIndicator = true) ->
     return unless @tween?
+    clearTimeout(@_showForDurationTimerId)
     @tween.stop()
     if immediate
       unless updateIndicator
-        @displayElement().classList.remove "vimiumUIComponentVisible"
-        @displayElement().classList.add "vimiumUIComponentHidden"
+        @hudUI.hide()
+        @hudUI.postMessage {handler: "hide"}
       Mode.setIndicator() if updateIndicator
     else
       @tween.fade 0, 150, => @hide true, updateIndicator
@@ -64,11 +55,11 @@ class Tween
   intervalId: -1
   styleElement: null
 
-  constructor: (@cssSelector) ->
+  constructor: (@cssSelector, insertionPoint = document.documentElement) ->
     @styleElement = document.createElement "style"
     @styleElement.type = "text/css"
     @styleElement.innerHTML = ""
-    document.documentElement.appendChild @styleElement
+    insertionPoint.appendChild @styleElement
 
   fade: (toAlpha, duration, onComplete) ->
     clearInterval @intervalId
diff --git a/content_scripts/ui_component.coffee b/content_scripts/ui_component.coffee
index 5e0bd5d5..938a8411 100644
--- a/content_scripts/ui_component.coffee
+++ b/content_scripts/ui_component.coffee
@@ -3,6 +3,7 @@ class UIComponent
   iframePort: null
   showing: null
   options: null
+  shadowDOM: null
 
   constructor: (iframeUrl, className, @handleMessage) ->
     styleSheet = document.createElement "style"
@@ -18,9 +19,9 @@ class UIComponent
     @iframeElement.addEventListener "load", => @openPort()
     shadowWrapper = document.createElement "div"
     # PhantomJS doesn't support createShadowRoot, so guard against its non-existance.
-    shadowDOM = shadowWrapper.createShadowRoot?() ? shadowWrapper
-    shadowDOM.appendChild styleSheet
-    shadowDOM.appendChild @iframeElement
+    @shadowDOM = shadowWrapper.createShadowRoot?() ? shadowWrapper
+    @shadowDOM.appendChild styleSheet
+    @shadowDOM.appendChild @iframeElement
     document.documentElement.appendChild shadowWrapper
 
     @showing = true # The iframe is visible now.
diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css
index a3ea5a70..f36fe0c3 100644
--- a/content_scripts/vimium.css
+++ b/content_scripts/vimium.css
@@ -238,7 +238,7 @@ div.vimiumHUD {
   position: fixed;
   bottom: 0px;
   /* Keep this far enough to the right so that it doesn't collide with the "popups blocked" chrome HUD. */
-  right: 150px;
+  right: 0px;
   color: black;
   height: auto;
   min-height: 13px;
@@ -253,10 +253,25 @@ div.vimiumHUD {
   border-radius: 4px 4px 0 0;
   font-family: "Lucida Grande", "Arial", "Sans";
   font-size: 12px;
-  /* One less than vimium's hint markers, so link hints can be shown e.g. for the HUD panel's close button. */
-  z-index: 2147483646;
   text-shadow: 0px 1px 2px #FFF;
   line-height: 1.0;
+}
+
+iframe.vimiumHUDFrame {
+  display: block;
+  background: none;
+  position: fixed;
+  bottom: 0px;
+  right: 150px;
+  height: 20px;
+  min-height: 20px;
+  width: 450px;
+  min-width: 150px;
+  padding: 0px;
+  margin: 0;
+  border: none;
+  /* One less than vimium's hint markers, so link hints can be shown e.g. for the HUD panel's close button. */
+  z-index: 2147483646;
   opacity: 0;
 }
 /* Hide the span between search box letters */
diff --git a/manifest.json b/manifest.json
index 59e210eb..fe5c69ca 100644
--- a/manifest.json
+++ b/manifest.json
@@ -72,6 +72,7 @@
   },
   "web_accessible_resources": [
     "pages/vomnibar.html",
-    "content_scripts/vimium.css"
+    "content_scripts/vimium.css",
+    "pages/hud.html"
   ]
 }
diff --git a/pages/hud.coffee b/pages/hud.coffee
new file mode 100644
index 00000000..7a37a5e0
--- /dev/null
+++ b/pages/hud.coffee
@@ -0,0 +1,12 @@
+handlers =
+  show: (data) ->
+    document.getElementById("hud").innerText = data.text
+    document.getElementById("hud").classList.add "vimiumUIComponentVisible"
+    document.getElementById("hud").classList.remove "vimiumUIComponentHidden"
+  hide: ->
+    document.getElementById("hud").classList.add "vimiumUIComponentHidden"
+    document.getElementById("hud").classList.remove "vimiumUIComponentVisible"
+
+UIComponentServer.registerHandler (event) ->
+  {data} = event
+  handlers[data.name]? data
diff --git a/pages/hud.html b/pages/hud.html
new file mode 100644
index 00000000..bcb38e04
--- /dev/null
+++ b/pages/hud.html
@@ -0,0 +1,11 @@
+<html>
+  <head>
+    <title>HUD</title>
+    <link rel="stylesheet" type="text/css" href="../content_scripts/vimium.css" />
+    <script type="text/javascript" src="ui_component_server.js"></script>
+    <script type="text/javascript" src="hud.js"></script>
+  </head>
+  <body>
+    <div class="vimiumReset vimiumHUD" id="hud"></div>
+  </body>
+</html>