1 files changed, 50 insertions, 32 deletions

diff --git a/content_scripts/hud.coffee b/content_scripts/hud.coffee
index e0dbb385..bc3befee 100644
--- a/content_scripts/hud.coffee
+++ b/content_scripts/hud.coffee
@@ -3,13 +3,16 @@
 # Note: you cannot interact with the HUD until document.body is available.
 #
 HUD =
-  _tweenId: -1
+  tween: null
   _displayElement: null
 
   # This HUD is styled to precisely mimick the chrome HUD on Mac. Use the "has_popup_and_link_hud.html"
   # test harness to tweak these styles to match Chrome's. One limitation of our HUD display is that
   # it doesn't sit on top of horizontal scrollbars like Chrome's HUD does.
 
+  init: ->
+    @tween = new Tween ".vimiumHUD.vimiumUIComponentVisible"
+
   showForDuration: (text, duration) ->
     @show(text)
     @_showForDurationTimerId = setTimeout((=> @hide()), duration)
@@ -18,9 +21,9 @@ HUD =
     return unless @enabled()
     clearTimeout(@_showForDurationTimerId)
     @displayElement().innerText = text
-    clearInterval(@_tweenId)
-    @_tweenId = Tween.fade(@displayElement(), 1.0, 150)
-    @displayElement().style.display = ""
+    @tween.fade 1.0, 150
+    @displayElement().classList.add "vimiumUIComponentVisible"
+    @displayElement().classList.remove "vimiumUIComponentHidden"
 
   #
   # Retrieves the HUD HTML element.
@@ -43,12 +46,14 @@ HUD =
   # If :updateIndicator is truthy, then we also refresh the mode indicator.  The only time we don't update the
   # mode indicator, is when hide() is called for the mode indicator itself.
   hide: (immediate = false, updateIndicator = true) ->
-    clearInterval(@_tweenId)
+    @tween.stop()
     if immediate
-      @displayElement().style.display = "none" unless updateIndicator
+      unless updateIndicator
+        @displayElement().classList.remove "vimiumUIComponentVisible"
+        @displayElement().classList.add "vimiumUIComponentHidden"
       Mode.setIndicator() if updateIndicator
     else
-      @_tweenId = Tween.fade @displayElement(), 0, 150, => @hide true, updateIndicator
+      @tween.fade 0, 150, => @hide true, updateIndicator
 
   isReady: do ->
     ready = false
@@ -58,31 +63,44 @@ HUD =
   # A preference which can be toggled in the Options page. */
   enabled: -> !settings.get("hideHud")
 
-Tween =
-  #
-  # Fades an element's alpha. Returns a timer ID which can be used to stop the tween via clearInterval.
-  #
-  fade: (element, toAlpha, duration, onComplete) ->
-    state = {}
-    state.duration = duration
-    state.startTime = (new Date()).getTime()
-    state.from = parseInt(element.style.opacity) || 0
-    state.to = toAlpha
-    state.onUpdate = (value) ->
-      element.style.opacity = value
-      if (value == state.to && onComplete)
-        onComplete()
-    state.timerId = setInterval((-> Tween.performTweenStep(state)), 50)
-    state.timerId
-
-  performTweenStep: (state) ->
-    elapsed = (new Date()).getTime() - state.startTime
-    if (elapsed >= state.duration)
-      clearInterval(state.timerId)
-      state.onUpdate(state.to)
-    else
-      value = (elapsed / state.duration)  * (state.to - state.from) + state.from
-      state.onUpdate(value)
+class Tween
+  opacity: 0
+  intervalId: -1
+  styleElement: null
+
+  constructor: (@cssSelector) ->
+    @styleElement = document.createElement "style"
+    @styleElement.type = "text/css"
+    @styleElement.innerHTML = ""
+    document.documentElement.appendChild @styleElement
+
+  fade: (toAlpha, duration, onComplete) ->
+    clearInterval @intervalId
+    startTime = (new Date()).getTime()
+    fromAlpha = @opacity
+    alphaStep = toAlpha - fromAlpha
+
+    performStep = =>
+      elapsed = (new Date()).getTime() - startTime
+      if (elapsed >= duration)
+        clearInterval @intervalId
+        @updateStyle toAlpha
+        onComplete?()
+      else
+        value = (elapsed / duration) * alphaStep + fromAlpha
+        @updateStyle value
+
+    @updateStyle @opacity
+    @intervalId = setInterval performStep, 50
+
+  stop: -> clearInterval @intervalId
+
+  updateStyle: (@opacity) ->
+    @styleElement.innerHTML = """
+      #{@cssSelector} {
+        opacity: #{@opacity};
+      }
+    """
 
 root = exports ? window
 root.HUD = HUD