Merge pull request #1652 from mrmr1993/separate-hud-from-frontend

Separate the hud from frontend code and rewrite tween to be more generic

5 files changed, 106 insertions, 87 deletions

diff --git a/content_scripts/hud.coffee b/content_scripts/hud.coffee
new file mode 100644
index 00000000..2f95c4fe
--- /dev/null
+++ b/content_scripts/hud.coffee
@@ -0,0 +1,101 @@
+#
+# A heads-up-display (HUD) for showing Vimium page operations.
+# Note: you cannot interact with the HUD until document.body is available.
+#
+HUD =
+  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)
+
+  show: (text) ->
+    return unless @enabled()
+    clearTimeout(@_showForDurationTimerId)
+    @displayElement().innerText = 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).
+  # 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) ->
+    @tween.stop()
+    if immediate
+      unless updateIndicator
+        @displayElement().classList.remove "vimiumUIComponentVisible"
+        @displayElement().classList.add "vimiumUIComponentHidden"
+      Mode.setIndicator() if updateIndicator
+    else
+      @tween.fade 0, 150, => @hide true, updateIndicator
+
+  isReady: do ->
+    ready = false
+    DomUtils.documentReady -> ready = true
+    -> ready and document.body != null
+
+  # A preference which can be toggled in the Options page. */
+  enabled: -> !settings.get("hideHud")
+
+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
diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css
index 5180fb22..a3ea5a70 100644
--- a/content_scripts/vimium.css
+++ b/content_scripts/vimium.css
@@ -237,6 +237,8 @@ div.vimiumHUD {
   display: block;
   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;
   color: black;
   height: auto;
   min-height: 13px;
diff --git a/content_scripts/vimium_frontend.coffee b/content_scripts/vimium_frontend.coffee
index d6cc835d..8f0bdd5d 100644
--- a/content_scripts/vimium_frontend.coffee
+++ b/content_scripts/vimium_frontend.coffee
@@ -284,6 +284,7 @@ initializeOnDomReady = ->
   CursorHider.init()
   # We only initialize the vomnibar in the tab's main frame, because it's only ever opened there.
   Vomnibar.init() if DomUtils.isTopFrame()
+  HUD.init()
 
 registerFrame = ->
   # Don't register frameset containers; focusing them is no use.
@@ -1141,92 +1142,6 @@ toggleHelpDialog = (html, fid) ->
   else
     showHelpDialog(html, fid)
 
-#
-# A heads-up-display (HUD) for showing Vimium page operations.
-# Note: you cannot interact with the HUD until document.body is available.
-#
-HUD =
-  _tweenId: -1
-  _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.
-
-  showForDuration: (text, duration) ->
-    HUD.show(text)
-    HUD._showForDurationTimerId = setTimeout((-> HUD.hide()), duration)
-
-  show: (text) ->
-    return unless HUD.enabled()
-    clearTimeout(HUD._showForDurationTimerId)
-    HUD.displayElement().innerText = text
-    clearInterval(HUD._tweenId)
-    HUD._tweenId = Tween.fade(HUD.displayElement(), 1.0, 150)
-    HUD.displayElement().style.display = ""
-
-  #
-  # Retrieves the HUD HTML element.
-  #
-  displayElement: ->
-    if (!HUD._displayElement)
-      HUD._displayElement = HUD.createHudElement()
-      # Keep this far enough to the right so that it doesn't collide with the "popups blocked" chrome HUD.
-      HUD._displayElement.style.right = "150px"
-    HUD._displayElement
-
-  createHudElement: ->
-    element = document.createElement("div")
-    element.className = "vimiumReset vimiumHUD"
-    document.body.appendChild(element)
-    element
-
-  # Hide the HUD.
-  # If :immediate is falsy, then the HUD is faded out smoothly (otherwise it is hidden immediately).
-  # 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(HUD._tweenId)
-    if immediate
-      HUD.displayElement().style.display = "none" unless updateIndicator
-      Mode.setIndicator() if updateIndicator
-    else
-      HUD._tweenId = Tween.fade HUD.displayElement(), 0, 150, -> HUD.hide true, updateIndicator
-
-  isReady: do ->
-    ready = false
-    DomUtils.documentReady -> ready = true
-    -> ready and document.body != null
-
-  # 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)
-
 CursorHider =
   #
   # Hide the cursor when the browser scrolls, and prevent mouse from hovering while invisible.
@@ -1274,7 +1189,6 @@ window.onbeforeunload = ->
 
 root = exports ? window
 root.settings = settings
-root.HUD = HUD
 root.handlerStack = handlerStack
 root.frameId = frameId
 root.windowIsFocused = windowIsFocused
diff --git a/manifest.json b/manifest.json
index 6445548a..59e210eb 100644
--- a/manifest.json
+++ b/manifest.json
@@ -52,6 +52,7 @@
              "content_scripts/mode_passkeys.js",
              "content_scripts/mode_find.js",
              "content_scripts/mode_visual_edit.js",
+             "content_scripts/hud.js",
              "content_scripts/vimium_frontend.js"
             ],
       "css": ["content_scripts/vimium.css"],
diff --git a/tests/dom_tests/dom_tests.html b/tests/dom_tests/dom_tests.html
index cbd91bca..5ccd39e7 100644
--- a/tests/dom_tests/dom_tests.html
+++ b/tests/dom_tests/dom_tests.html
@@ -44,6 +44,7 @@
     <script type="text/javascript" src="../../content_scripts/mode_insert.js"></script>
     <script type="text/javascript" src="../../content_scripts/mode_find.js"></script>
     <script type="text/javascript" src="../../content_scripts/mode_visual_edit.js"></script>
+    <script type="text/javascript" src="../../content_scripts/hud.js"></script>
     <script type="text/javascript" src="../../content_scripts/vimium_frontend.js"></script>
 
     <script type="text/javascript" src="../shoulda.js/shoulda.js"></script>