diff options
| -rw-r--r-- | content_scripts/hud.coffee | 29 | ||||
| -rw-r--r-- | content_scripts/ui_component.coffee | 7 | ||||
| -rw-r--r-- | content_scripts/vimium.css | 21 | ||||
| -rw-r--r-- | manifest.json | 3 | ||||
| -rw-r--r-- | pages/hud.coffee | 12 | ||||
| -rw-r--r-- | pages/hud.html | 11 |
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> |