From ecf2535be3655a1309f7fcf5fb0040addb7c97fd Mon Sep 17 00:00:00 2001 From: mrmr1993 Date: Mon, 11 May 2015 16:04:50 +0100 Subject: Move the HUD to its own file --- content_scripts/hud.coffee | 88 ++++++++++++++++++++++++++++++++++ content_scripts/vimium_frontend.coffee | 87 --------------------------------- 2 files changed, 88 insertions(+), 87 deletions(-) create mode 100644 content_scripts/hud.coffee (limited to 'content_scripts') diff --git a/content_scripts/hud.coffee b/content_scripts/hud.coffee new file mode 100644 index 00000000..9b23d050 --- /dev/null +++ b/content_scripts/hud.coffee @@ -0,0 +1,88 @@ +# +# 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) + +root = exports ? window +root.HUD = HUD diff --git a/content_scripts/vimium_frontend.coffee b/content_scripts/vimium_frontend.coffee index d6cc835d..82d24f89 100644 --- a/content_scripts/vimium_frontend.coffee +++ b/content_scripts/vimium_frontend.coffee @@ -1141,92 +1141,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 +1188,6 @@ window.onbeforeunload = -> root = exports ? window root.settings = settings -root.HUD = HUD root.handlerStack = handlerStack root.frameId = frameId root.windowIsFocused = windowIsFocused -- cgit v1.2.3 From 597feb0bbac9480499f65c8503c33a1b5ae1c327 Mon Sep 17 00:00:00 2001 From: mrmr1993 Date: Mon, 11 May 2015 16:09:58 +0100 Subject: Change HUD. to @ for improved readability --- content_scripts/hud.coffee | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) (limited to 'content_scripts') diff --git a/content_scripts/hud.coffee b/content_scripts/hud.coffee index 9b23d050..e0dbb385 100644 --- a/content_scripts/hud.coffee +++ b/content_scripts/hud.coffee @@ -11,26 +11,26 @@ HUD = # 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) + @_showForDurationTimerId = setTimeout((=> @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 = "" + return unless @enabled() + clearTimeout(@_showForDurationTimerId) + @displayElement().innerText = text + clearInterval(@_tweenId) + @_tweenId = Tween.fade(@displayElement(), 1.0, 150) + @displayElement().style.display = "" # # Retrieves the HUD HTML element. # displayElement: -> - if (!HUD._displayElement) - HUD._displayElement = HUD.createHudElement() + if (!@_displayElement) + @_displayElement = @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 + @_displayElement.style.right = "150px" + @_displayElement createHudElement: -> element = document.createElement("div") @@ -43,12 +43,12 @@ 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(HUD._tweenId) + clearInterval(@_tweenId) if immediate - HUD.displayElement().style.display = "none" unless updateIndicator + @displayElement().style.display = "none" unless updateIndicator Mode.setIndicator() if updateIndicator else - HUD._tweenId = Tween.fade HUD.displayElement(), 0, 150, -> HUD.hide true, updateIndicator + @_tweenId = Tween.fade @displayElement(), 0, 150, => @hide true, updateIndicator isReady: do -> ready = false -- cgit v1.2.3 From 2ecce8fb472b6a62a39f25981d20e74b39788d0c Mon Sep 17 00:00:00 2001 From: mrmr1993 Date: Mon, 11 May 2015 16:32:14 +0100 Subject: Make HUD less intertwined with Tween, rewrite Tween as more generic --- content_scripts/hud.coffee | 82 +++++++++++++++++++++------------- content_scripts/vimium_frontend.coffee | 1 + 2 files changed, 51 insertions(+), 32 deletions(-) (limited to 'content_scripts') 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 diff --git a/content_scripts/vimium_frontend.coffee b/content_scripts/vimium_frontend.coffee index 82d24f89..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. -- cgit v1.2.3 From 638d870eeb2564e0fa268b9fab5cce1d46ff3884 Mon Sep 17 00:00:00 2001 From: mrmr1993 Date: Mon, 11 May 2015 16:38:37 +0100 Subject: Move all HUD .style declarations into vimium.css --- content_scripts/hud.coffee | 9 ++------- content_scripts/vimium.css | 2 ++ 2 files changed, 4 insertions(+), 7 deletions(-) (limited to 'content_scripts') diff --git a/content_scripts/hud.coffee b/content_scripts/hud.coffee index bc3befee..2f95c4fe 100644 --- a/content_scripts/hud.coffee +++ b/content_scripts/hud.coffee @@ -28,16 +28,11 @@ HUD = # # Retrieves the HUD HTML element. # - displayElement: -> - if (!@_displayElement) - @_displayElement = @createHudElement() - # Keep this far enough to the right so that it doesn't collide with the "popups blocked" chrome HUD. - @_displayElement.style.right = "150px" - @_displayElement + displayElement: -> @_displayElement ?= @createHudElement() createHudElement: -> element = document.createElement("div") - element.className = "vimiumReset vimiumHUD" + element.className = "vimiumReset vimiumHUD vimiumUIComponentHidden" document.body.appendChild(element) element 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; -- cgit v1.2.3