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 +++-------------
lib/settings.coffee | 4 +-
lib/utils.coffee | 2 +-
manifest.json | 1 +
pages/help_dialog.coffee | 56 ++++++++++++++++
pages/help_dialog.html | 118 ++++++++++++++++++---------------
7 files changed, 153 insertions(+), 103 deletions(-)
create mode 100644 pages/help_dialog.coffee
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
diff --git a/lib/settings.coffee b/lib/settings.coffee
index dd1aa377..c127343d 100644
--- a/lib/settings.coffee
+++ b/lib/settings.coffee
@@ -18,8 +18,10 @@ Settings =
onLoadedCallbacks: []
init: ->
- if Utils.isExtensionPage()
+ if Utils.isExtensionPage() and (try localStorage)
# On extension pages, we use localStorage (or a copy of it) as the cache.
+ # For UIComponents (or other content of ours in an iframe within a regular page), we can't access
+ # localStorage, so we check for this too.
@cache = if Utils.isBackgroundPage() then localStorage else extend {}, localStorage
@onLoaded()
diff --git a/lib/utils.coffee b/lib/utils.coffee
index c255102e..4726739b 100644
--- a/lib/utils.coffee
+++ b/lib/utils.coffee
@@ -7,7 +7,7 @@ Utils =
isExtensionPage: -> document.location?.origin + "/" == chrome.extension.getURL ""
# Returns true whenever the current page is the extension's background page.
- isBackgroundPage: -> @isExtensionPage() and chrome.extension.getBackgroundPage() == window
+ isBackgroundPage: -> @isExtensionPage() and try chrome.extension.getBackgroundPage() == window
# Takes a dot-notation object string and call the function
# that it points to with the correct value for 'this'.
diff --git a/manifest.json b/manifest.json
index 7fe13b13..883abd37 100644
--- a/manifest.json
+++ b/manifest.json
@@ -74,6 +74,7 @@
"pages/vomnibar.html",
"content_scripts/vimium.css",
"pages/hud.html",
+ "pages/help_dialog.html",
"pages/completion_engines.html"
]
}
diff --git a/pages/help_dialog.coffee b/pages/help_dialog.coffee
new file mode 100644
index 00000000..5bff5e33
--- /dev/null
+++ b/pages/help_dialog.coffee
@@ -0,0 +1,56 @@
+HelpDialog =
+ dialogElement: null
+
+ # This setting is pulled out of local storage. It's false by default.
+ getShowAdvancedCommands: -> Settings.get("helpDialog_showAdvancedCommands")
+
+ init: ->
+ return if @dialogElement?
+ @dialogElement = document.getElementById "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)
+
+ show: (html) ->
+ for placeholder, htmlString of html
+ @dialogElement.querySelector("#help-dialog-#{placeholder}").innerHTML = htmlString
+
+ @showAdvancedCommands(@getShowAdvancedCommands())
+
+ # Simulating a click on the help dialog makes it the active element for scrolling.
+ DomUtils.simulateClick document.getElementById "vimiumHelpDialog"
+
+ hide: -> UIComponentServer.postMessage "hide"
+
+ #
+ # 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"
+
+UIComponentServer.registerHandler (event) ->
+ return if event.data == "hide"
+ HelpDialog.init()
+ HelpDialog.show event.data
+
+root = exports ? window
+root.HelpDialog = HelpDialog
diff --git a/pages/help_dialog.html b/pages/help_dialog.html
index 6b05f1d7..b51aef9c 100644
--- a/pages/help_dialog.html
+++ b/pages/help_dialog.html
@@ -1,3 +1,13 @@
+
+
+ Vimium Help
+
+
+
+
+
+
+
-
-
Options
-
Wiki
-
×
-
Vimium
-
-
-
- | | Navigating the page |
-
-
-
-
-
-
-
-
- | | Using the vomnibar |
-
-
-
- | | Using find |
-
-
-
- | | Navigating history |
-
-
-
- | | Manipulating tabs |
-
-
-
- | | Miscellaneous |
-
-
-
-
+
+
Options
+
Wiki
+
×
+
Vimium
+
+
+
+ | | Navigating the page |
+
+
+
+
+
+
+
+
+ | | Using the vomnibar |
+
+
+
+ | | Using find |
+
+
+
+ | | Navigating history |
+
+
+
+ | | Manipulating tabs |
+
+
+
+ | | Miscellaneous |
+
+
+
+
-
-
+
+
-
-
+
+
--
cgit v1.2.3