From acb0c7010d345a3e4918c4aa33eb1d2bf72cf8da Mon Sep 17 00:00:00 2001 From: mrmr1993 Date: Wed, 3 Feb 2016 15:23:02 +0000 Subject: Move help dialog into an iframe --- content_scripts/vimium.css | 18 +++++++++++ content_scripts/vimium_frontend.coffee | 57 ++++++---------------------------- 2 files changed, 27 insertions(+), 48 deletions(-) (limited to 'content_scripts') diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index c08971f2..6e02933e 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -137,6 +137,24 @@ div.vimiumHighlightedFrame { /* Help Dialog CSS */ +iframe.vimiumHelpDialogFrame { + background-color: transparent; + padding: 0px; + overflow: hidden; + + display: block; + position: fixed; + width: 100%; + min-width: 400px; + height: 100%; + top: 0px; + left: 0px; + border: none; + + /* One less than vimiumReset */ + z-index: 2147483647; +} + div#vimiumHelpDialog { border:3px solid red; opacity:0.92; diff --git a/content_scripts/vimium_frontend.coffee b/content_scripts/vimium_frontend.coffee index bcbc3574..93b4bf34 100644 --- a/content_scripts/vimium_frontend.coffee +++ b/content_scripts/vimium_frontend.coffee @@ -769,72 +769,33 @@ window.enterFindMode = -> new FindMode() window.HelpDialog = + helpUI: null container: null - dialogElement: null showing: false # This setting is pulled out of local storage. It's false by default. getShowAdvancedCommands: -> Settings.get("helpDialog_showAdvancedCommands") init: -> - return if @container? - @container = DomUtils.createElement "div" - @container.id = "vimiumHelpDialogContainer" - @container.className = "vimiumReset" - chrome.runtime.sendMessage {handler: "fetchFileContents", fileName: "pages/help_dialog.html"}, (html) => - @container.innerHTML = html - - @dialogElement = @container.querySelector "#vimiumHelpDialog" - - @dialogElement.getElementsByClassName("closeButton")[0].addEventListener("click", (clickEvent) => - clickEvent.preventDefault() - @hide() - false) - @dialogElement.getElementsByClassName("optionsPage")[0].addEventListener("click", (clickEvent) -> - clickEvent.preventDefault() - chrome.runtime.sendMessage({handler: "openOptionsPageInNewTab"}) - false) - @dialogElement.getElementsByClassName("toggleAdvancedCommands")[0].addEventListener("click", - HelpDialog.toggleAdvancedCommands, false) - - isReady: -> document.body? and @container? + return if @helpUI? + + @helpUI = new UIComponent "pages/help_dialog.html", "vimiumHelpDialogFrame", (event) => + @helpUI.hide() if event.data == "hide" + + isReady: -> true show: (html) -> return if HelpDialog.showing or !@isReady() HelpDialog.showing = true - for placeholder, htmlString of html - @dialogElement.querySelector("#help-dialog-#{placeholder}").innerHTML = htmlString - - document.body.appendChild @container - @showAdvancedCommands(@getShowAdvancedCommands()) - - # Simulating a click on the help dialog makes it the active element for scrolling. - DomUtils.simulateClick document.getElementById "vimiumHelpDialog" + @helpUI.activate html hide: -> HelpDialog.showing = false - @container?.parentNode?.removeChild @container + @helpUI.hide() toggle: (html) -> if @showing then @hide() else @show html - # - # Advanced commands are hidden by default so they don't overwhelm new and casual users. - # - toggleAdvancedCommands: (event) -> - event.preventDefault() - showAdvanced = HelpDialog.getShowAdvancedCommands() - HelpDialog.showAdvancedCommands(!showAdvanced) - Settings.set("helpDialog_showAdvancedCommands", !showAdvanced) - - showAdvancedCommands: (visible) -> - HelpDialog.dialogElement.getElementsByClassName("toggleAdvancedCommands")[0].innerHTML = - if visible then "Hide advanced commands" else "Show advanced commands" - - # Add/remove the showAdvanced class to show/hide advanced commands. - addOrRemove = if visible then "add" else "remove" - HelpDialog.dialogElement.classList[addOrRemove] "showAdvanced" - initializePreDomReady() DomUtils.documentReady initializeOnDomReady DomUtils.documentReady registerFrame -- cgit v1.2.3 From 7be92c43981bf64869f100c6a8b4a60ba0073264 Mon Sep 17 00:00:00 2001 From: mrmr1993 Date: Wed, 3 Feb 2016 15:37:51 +0000 Subject: Prevent nested help dialog iframes --- content_scripts/vimium_frontend.coffee | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'content_scripts') diff --git a/content_scripts/vimium_frontend.coffee b/content_scripts/vimium_frontend.coffee index 93b4bf34..fdfef910 100644 --- a/content_scripts/vimium_frontend.coffee +++ b/content_scripts/vimium_frontend.coffee @@ -219,7 +219,7 @@ initializeOnDomReady = -> # 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() - HelpDialog.init() + HelpDialog.init() unless document.location.toString() == chrome.extension.getURL "pages/help_dialog.html" registerFrame = -> # Don't register frameset containers; focusing them is no use. @@ -782,7 +782,7 @@ window.HelpDialog = @helpUI = new UIComponent "pages/help_dialog.html", "vimiumHelpDialogFrame", (event) => @helpUI.hide() if event.data == "hide" - isReady: -> true + isReady: -> @helpUI? show: (html) -> return if HelpDialog.showing or !@isReady() -- cgit v1.2.3 From 31aa6c37794872b9341d8a30f17e72cda373ba59 Mon Sep 17 00:00:00 2001 From: mrmr1993 Date: Wed, 3 Feb 2016 15:46:24 +0000 Subject: Fix closing the help dialog --- content_scripts/vimium_frontend.coffee | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) (limited to 'content_scripts') diff --git a/content_scripts/vimium_frontend.coffee b/content_scripts/vimium_frontend.coffee index fdfef910..bfc09980 100644 --- a/content_scripts/vimium_frontend.coffee +++ b/content_scripts/vimium_frontend.coffee @@ -768,19 +768,17 @@ window.enterFindMode = -> Marks.setPreviousPosition() new FindMode() -window.HelpDialog = +# If we are in the help dialog iframe, HelpDialog is already defined with the necessary functions. +window.HelpDialog ?= helpUI: null container: null showing: false - # This setting is pulled out of local storage. It's false by default. - getShowAdvancedCommands: -> Settings.get("helpDialog_showAdvancedCommands") - init: -> return if @helpUI? @helpUI = new UIComponent "pages/help_dialog.html", "vimiumHelpDialogFrame", (event) => - @helpUI.hide() if event.data == "hide" + @hide() if event.data == "hide" isReady: -> @helpUI? -- cgit v1.2.3 From 9a7456334fca81dff41fea6a2701365806f6c3b3 Mon Sep 17 00:00:00 2001 From: mrmr1993 Date: Thu, 11 Feb 2016 04:54:55 +0000 Subject: Show vomnibar above the help dialog, remove an unnecessary CSS rule --- content_scripts/vimium.css | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) (limited to 'content_scripts') diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index 6e02933e..a763b159 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -151,8 +151,8 @@ iframe.vimiumHelpDialogFrame { left: 0px; border: none; - /* One less than vimiumReset */ - z-index: 2147483647; + /* One less than hint markers and the vomnibar. */ + z-index: 2147483645; } div#vimiumHelpDialog { @@ -171,8 +171,6 @@ div#vimiumHelpDialog { top:50px; -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px; overflow-y: auto; - /* One less than vimiumReset */ - z-index: 2147483647; } div#vimiumHelpDialog a { color:blue; } @@ -349,8 +347,8 @@ iframe.vomnibarFrame { border: none; font-family: sans-serif; - /* One less than hint markers and the help dialog. */ - z-index: 2147483645; + /* One less than hint markers. */ + z-index: 2147483646; } div#vimiumFlash { -- cgit v1.2.3 From 6bd8318fa1a7faf942cd56b8023f2947d84f3123 Mon Sep 17 00:00:00 2001 From: mrmr1993 Date: Thu, 11 Feb 2016 05:05:17 +0000 Subject: Only load help dialog iframe when the dialog is to be shown --- content_scripts/vimium_frontend.coffee | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'content_scripts') diff --git a/content_scripts/vimium_frontend.coffee b/content_scripts/vimium_frontend.coffee index bfc09980..382f0416 100644 --- a/content_scripts/vimium_frontend.coffee +++ b/content_scripts/vimium_frontend.coffee @@ -219,7 +219,6 @@ initializeOnDomReady = -> # 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() - HelpDialog.init() unless document.location.toString() == chrome.extension.getURL "pages/help_dialog.html" registerFrame = -> # Don't register frameset containers; focusing them is no use. @@ -783,6 +782,7 @@ window.HelpDialog ?= isReady: -> @helpUI? show: (html) -> + @init() return if HelpDialog.showing or !@isReady() HelpDialog.showing = true @helpUI.activate html -- cgit v1.2.3 From 2aa6af6d9f1b7394be460d66d34166451f04d2b2 Mon Sep 17 00:00:00 2001 From: mrmr1993 Date: Thu, 11 Feb 2016 05:07:04 +0000 Subject: Change HelpDialog. to @ for methods inside the HelpDialog object --- content_scripts/vimium_frontend.coffee | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'content_scripts') diff --git a/content_scripts/vimium_frontend.coffee b/content_scripts/vimium_frontend.coffee index 382f0416..2897ae69 100644 --- a/content_scripts/vimium_frontend.coffee +++ b/content_scripts/vimium_frontend.coffee @@ -783,12 +783,12 @@ window.HelpDialog ?= show: (html) -> @init() - return if HelpDialog.showing or !@isReady() - HelpDialog.showing = true + return if @showing or !@isReady() + @showing = true @helpUI.activate html hide: -> - HelpDialog.showing = false + @showing = false @helpUI.hide() toggle: (html) -> -- cgit v1.2.3