From 82413203d258fafc0fc8da0d9b2daf760b46017b Mon Sep 17 00:00:00 2001 From: mrmr1993 Date: Mon, 19 May 2014 15:40:40 +0100 Subject: Implement cursor hiding on scroll This begins to address #662, by hiding the cursor when the page is scrolled to prevent a distracting cursor and accidentally triggering hover effects. --- content_scripts/vimium_frontend.coffee | 54 ++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) (limited to 'content_scripts') diff --git a/content_scripts/vimium_frontend.coffee b/content_scripts/vimium_frontend.coffee index 469afe71..98e9a172 100644 --- a/content_scripts/vimium_frontend.coffee +++ b/content_scripts/vimium_frontend.coffee @@ -183,6 +183,7 @@ initializeOnDomReady = -> # Tell the background page we're in the dom ready state. chrome.runtime.connect({ name: "domReady" }) + CursorHider.init() registerFrame = -> # Don't register frameset containers; focusing them is no use. @@ -1067,6 +1068,59 @@ Tween = value = (elapsed / state.duration) * (state.to - state.from) + state.from state.onUpdate(value) +CursorHider = + # + # Hides the cursor when the browser scrolls, and prevent mouse from hovering while invisible + # + cursorHidden: false + hoverBlockElement: undefined + + hideCursor: -> + unless @cursorHidden + @hoverBlockElement.style.display = "block" + @cursorHidden = true + + showCursor: -> + if @cursorHidden + @hoverBlockElement.style.display = "none" + @cursorHidden = false + + onMouseMove: (event) -> + CursorHider.showCursor() + + onScroll: -> + CursorHider.hideCursor() + + # Ignore next mousemove, caused by the scrolling, so the mouse doesn't re-show straight away. + window.removeEventListener "mousemove", CursorHider.onMouseMove + window.addEventListener "mousemove", -> + window.addEventListener "mousemove", CursorHider.onMouseMove + window.removeEventListener "mousemove", arguments.callee + + init: -> + # cover the element entirely by a div with cursor: none + @hoverBlockElement = document.createElement("div") + @hoverBlockElement.style.position = "fixed" + @hoverBlockElement.style.width = "104%" + @hoverBlockElement.style.height = "104%" + @hoverBlockElement.style.zIndex = "2147483647" # Maximum value of z-index + @hoverBlockElement.style.left = "0px" + @hoverBlockElement.style.top = "0px" + @hoverBlockElement.style.opacity = "0.0" + @hoverBlockElement.style.display = "none" + @hoverBlockElement.style.cursor = "none" + @hoverBlockElement.style.border = "none" + @hoverBlockElement.style.margin = "-2% -2% -2% -2%" + document.body.appendChild(@hoverBlockElement) + + window.addEventListener "mousemove", @onMouseMove + window.addEventListener "scroll", @onScroll + + deinit: -> + window.removeEventListener "mousemove", @onMouseMove + window.removeEventListener "scroll", @onScroll + @showCursor() + initializePreDomReady() window.addEventListener("DOMContentLoaded", registerFrame) window.addEventListener("unload", unregisterFrame) -- cgit v1.2.3 From 70dcf4131a83a51e503d929438ba9eb887cbf0bd Mon Sep 17 00:00:00 2001 From: mrmr1993 Date: Sun, 14 Dec 2014 09:58:30 +0000 Subject: Use cursor: none and pointer-events: none to hide the cursor on scroll --- content_scripts/vimium_frontend.coffee | 40 ++++++++++------------------------ 1 file changed, 11 insertions(+), 29 deletions(-) (limited to 'content_scripts') diff --git a/content_scripts/vimium_frontend.coffee b/content_scripts/vimium_frontend.coffee index 98e9a172..f6a60c9c 100644 --- a/content_scripts/vimium_frontend.coffee +++ b/content_scripts/vimium_frontend.coffee @@ -1072,23 +1072,15 @@ CursorHider = # # Hides the cursor when the browser scrolls, and prevent mouse from hovering while invisible # - cursorHidden: false - hoverBlockElement: undefined + cursorHideStyle: null + cursorHideTimeout: 5000 + showCursor: -> @cursorHideStyle.remove() hideCursor: -> - unless @cursorHidden - @hoverBlockElement.style.display = "block" - @cursorHidden = true + document.head.appendChild @cursorHideStyle unless @cursorHideStyle.parentElement - showCursor: -> - if @cursorHidden - @hoverBlockElement.style.display = "none" - @cursorHidden = false - - onMouseMove: (event) -> - CursorHider.showCursor() - - onScroll: -> + onMouseMove: (event) -> CursorHider.showCursor() + onScroll: (event) -> CursorHider.hideCursor() # Ignore next mousemove, caused by the scrolling, so the mouse doesn't re-show straight away. @@ -1098,21 +1090,11 @@ CursorHider = window.removeEventListener "mousemove", arguments.callee init: -> - # cover the element entirely by a div with cursor: none - @hoverBlockElement = document.createElement("div") - @hoverBlockElement.style.position = "fixed" - @hoverBlockElement.style.width = "104%" - @hoverBlockElement.style.height = "104%" - @hoverBlockElement.style.zIndex = "2147483647" # Maximum value of z-index - @hoverBlockElement.style.left = "0px" - @hoverBlockElement.style.top = "0px" - @hoverBlockElement.style.opacity = "0.0" - @hoverBlockElement.style.display = "none" - @hoverBlockElement.style.cursor = "none" - @hoverBlockElement.style.border = "none" - @hoverBlockElement.style.margin = "-2% -2% -2% -2%" - document.body.appendChild(@hoverBlockElement) - + @cursorHideStyle = document.createElement("style") + @cursorHideStyle.innerHTML = """ + body * {pointer-events: none !important; cursor: none !important;} + body {cursor: none !important;} + """ window.addEventListener "mousemove", @onMouseMove window.addEventListener "scroll", @onScroll -- cgit v1.2.3 From 9b9cee761f4c718f08dec92c46027a7effe39991 Mon Sep 17 00:00:00 2001 From: mrmr1993 Date: Sun, 14 Dec 2014 11:19:36 +0000 Subject: Remove unused code in CursorHider --- content_scripts/vimium_frontend.coffee | 6 ------ 1 file changed, 6 deletions(-) (limited to 'content_scripts') diff --git a/content_scripts/vimium_frontend.coffee b/content_scripts/vimium_frontend.coffee index f6a60c9c..23e320c0 100644 --- a/content_scripts/vimium_frontend.coffee +++ b/content_scripts/vimium_frontend.coffee @@ -1073,7 +1073,6 @@ CursorHider = # Hides the cursor when the browser scrolls, and prevent mouse from hovering while invisible # cursorHideStyle: null - cursorHideTimeout: 5000 showCursor: -> @cursorHideStyle.remove() hideCursor: -> @@ -1098,11 +1097,6 @@ CursorHider = window.addEventListener "mousemove", @onMouseMove window.addEventListener "scroll", @onScroll - deinit: -> - window.removeEventListener "mousemove", @onMouseMove - window.removeEventListener "scroll", @onScroll - @showCursor() - initializePreDomReady() window.addEventListener("DOMContentLoaded", registerFrame) window.addEventListener("unload", unregisterFrame) -- cgit v1.2.3 From aa190905bff04bd83438960779ce912b048b1f5f Mon Sep 17 00:00:00 2001 From: mrmr1993 Date: Sun, 14 Dec 2014 11:51:42 +0000 Subject: Use a boolean to track whether we are scrolling in CursorHider --- content_scripts/vimium_frontend.coffee | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'content_scripts') diff --git a/content_scripts/vimium_frontend.coffee b/content_scripts/vimium_frontend.coffee index 23e320c0..30d76523 100644 --- a/content_scripts/vimium_frontend.coffee +++ b/content_scripts/vimium_frontend.coffee @@ -1073,21 +1073,21 @@ CursorHider = # Hides the cursor when the browser scrolls, and prevent mouse from hovering while invisible # cursorHideStyle: null + isScrolling: false showCursor: -> @cursorHideStyle.remove() hideCursor: -> document.head.appendChild @cursorHideStyle unless @cursorHideStyle.parentElement - onMouseMove: (event) -> CursorHider.showCursor() + onMouseMove: (event) -> + if CursorHider.isScrolling # This event was caused by scrolling, don't show the cursor. + CursorHider.isScrolling = false + else + CursorHider.showCursor() onScroll: (event) -> + CursorHider.isScrolling = true CursorHider.hideCursor() - # Ignore next mousemove, caused by the scrolling, so the mouse doesn't re-show straight away. - window.removeEventListener "mousemove", CursorHider.onMouseMove - window.addEventListener "mousemove", -> - window.addEventListener "mousemove", CursorHider.onMouseMove - window.removeEventListener "mousemove", arguments.callee - init: -> @cursorHideStyle = document.createElement("style") @cursorHideStyle.innerHTML = """ -- cgit v1.2.3 From 69c117102eb419baa649cccc770bffea5177b1e1 Mon Sep 17 00:00:00 2001 From: mrmr1993 Date: Sun, 14 Dec 2014 11:57:19 +0000 Subject: Check if cursorHideStyle is in the document before remove()-ing it --- content_scripts/vimium_frontend.coffee | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'content_scripts') diff --git a/content_scripts/vimium_frontend.coffee b/content_scripts/vimium_frontend.coffee index 30d76523..639a4041 100644 --- a/content_scripts/vimium_frontend.coffee +++ b/content_scripts/vimium_frontend.coffee @@ -1075,7 +1075,8 @@ CursorHider = cursorHideStyle: null isScrolling: false - showCursor: -> @cursorHideStyle.remove() + showCursor: -> + @cursorHideStyle.remove() if @cursorHideStyle.parentElement hideCursor: -> document.head.appendChild @cursorHideStyle unless @cursorHideStyle.parentElement -- cgit v1.2.3