aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--content_scripts/vimium.css18
-rw-r--r--content_scripts/vimium_frontend.coffee57
-rw-r--r--lib/settings.coffee4
-rw-r--r--lib/utils.coffee2
-rw-r--r--manifest.json1
-rw-r--r--pages/help_dialog.coffee56
-rw-r--r--pages/help_dialog.html118
7 files changed, 153 insertions, 103 deletions
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 @@
+<html>
+ <head>
+ <title>Vimium Help</title>
+ <script type="text/javascript" src="content_script_loader.js"></script>
+ <script type="text/javascript" src="ui_component_server.js"></script>
+ <script type="text/javascript" src="help_dialog.js"></script>
+ <link rel="stylesheet" type="text/css" href="../content_scripts/vimium.css" />
+ </head>
+
+ <body>
<!--
This is shown when typing "?". This HTML is loaded by the background page and then populated with the
latest keybindings information before displaying.
@@ -5,60 +15,62 @@
<!-- Note that the template placeholders (e.g. "pageNavigation") will be filled in by the background
page with the up-to-date key bindings when the dialog is shown. -->
- <div id="vimiumHelpDialog" class="vimiumReset">
- <a class="vimiumReset optionsPage" href="#">Options</a>
- <a class="vimiumReset wikiPage" href="https://github.com/philc/vimium/wiki" target="_blank">Wiki</a>
- <a class="vimiumReset closeButton" href="#">&times;</a>
- <div id="vimiumTitle" class="vimiumReset"><span class="vimiumReset" style="color:#2f508e">Vim</span>ium <span id="help-dialog-title"></span></div>
- <div class="vimiumReset vimiumColumn">
- <table class="vimiumReset">
- <thead class="vimiumReset">
- <tr class="vimiumReset" ><td class="vimiumReset"></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Navigating the page</td></tr>
- </thead>
- <tbody id="help-dialog-pageNavigation" class="vimiumReset">
- </tbody>
- </table>
- </div>
- <div class="vimiumReset vimiumColumn">
- <table class="vimiumReset" >
- <thead class="vimiumReset">
- <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Using the vomnibar</td></tr>
- </thead>
- <tbody class="vimiumReset" id="help-dialog-vomnibarCommands"></tbody>
- <thead class="vimiumReset">
- <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Using find</td></tr>
- </thead>
- <tbody class="vimiumReset" id="help-dialog-findCommands"></tbody>
- <thead class="vimiumReset">
- <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Navigating history</td></tr>
- </thead>
- <tbody class="vimiumReset" id="help-dialog-historyNavigation"></tbody>
- <thead class="vimiumReset">
- <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Manipulating tabs</td></tr>
- </thead>
- <tbody class="vimiumReset" id="help-dialog-tabManipulation"></tbody>
- <thead class="vimiumReset">
- <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Miscellaneous</td></tr>
- </thead>
- <tbody class="vimiumReset" id="help-dialog-misc"></tbody>
- </table>
- </div>
+ <div id="vimiumHelpDialog" class="vimiumReset">
+ <a class="vimiumReset optionsPage" href="#">Options</a>
+ <a class="vimiumReset wikiPage" href="https://github.com/philc/vimium/wiki" target="_blank">Wiki</a>
+ <a class="vimiumReset closeButton" href="#">&times;</a>
+ <div id="vimiumTitle" class="vimiumReset"><span class="vimiumReset" style="color:#2f508e">Vim</span>ium <span id="help-dialog-title"></span></div>
+ <div class="vimiumReset vimiumColumn">
+ <table class="vimiumReset">
+ <thead class="vimiumReset">
+ <tr class="vimiumReset" ><td class="vimiumReset"></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Navigating the page</td></tr>
+ </thead>
+ <tbody id="help-dialog-pageNavigation" class="vimiumReset">
+ </tbody>
+ </table>
+ </div>
+ <div class="vimiumReset vimiumColumn">
+ <table class="vimiumReset" >
+ <thead class="vimiumReset">
+ <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Using the vomnibar</td></tr>
+ </thead>
+ <tbody class="vimiumReset" id="help-dialog-vomnibarCommands"></tbody>
+ <thead class="vimiumReset">
+ <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Using find</td></tr>
+ </thead>
+ <tbody class="vimiumReset" id="help-dialog-findCommands"></tbody>
+ <thead class="vimiumReset">
+ <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Navigating history</td></tr>
+ </thead>
+ <tbody class="vimiumReset" id="help-dialog-historyNavigation"></tbody>
+ <thead class="vimiumReset">
+ <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Manipulating tabs</td></tr>
+ </thead>
+ <tbody class="vimiumReset" id="help-dialog-tabManipulation"></tbody>
+ <thead class="vimiumReset">
+ <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Miscellaneous</td></tr>
+ </thead>
+ <tbody class="vimiumReset" id="help-dialog-misc"></tbody>
+ </table>
+ </div>
- <br clear="both"/>
- <div class="vimiumReset vimiumDivider"></div>
+ <br clear="both"/>
+ <div class="vimiumReset vimiumDivider"></div>
- <div id="vimiumHelpDialogFooter" class="vimiumReset">
- <a href="#" class="vimiumReset toggleAdvancedCommands">Show advanced commands</a>
+ <div id="vimiumHelpDialogFooter" class="vimiumReset">
+ <a href="#" class="vimiumReset toggleAdvancedCommands">Show advanced commands</a>
- <div class="vimiumReset vimiumColumn">
- Enjoying Vimium?
- <a class="vimiumReset" href="https://chrome.google.com/extensions/detail/dbepggeogbaibhgnhhndojpepiihcmeb">Leave us
- feedback</a>.<br/>
- Found a bug? <a class="vimiumReset" href="http://github.com/philc/vimium/issues">Report it here</a>.
- </div>
- <div class="vimiumReset vimiumColumn" style="text-align:right">
- <span class="vimiumReset">Version <span id="help-dialog-version"></span></span><br/>
- <a href="https://github.com/philc/vimium#release-notes" class="vimiumReset">What's new?</a>
+ <div class="vimiumReset vimiumColumn">
+ Enjoying Vimium?
+ <a class="vimiumReset" href="https://chrome.google.com/extensions/detail/dbepggeogbaibhgnhhndojpepiihcmeb">Leave us
+ feedback</a>.<br/>
+ Found a bug? <a class="vimiumReset" href="http://github.com/philc/vimium/issues">Report it here</a>.
+ </div>
+ <div class="vimiumReset vimiumColumn" style="text-align:right">
+ <span class="vimiumReset">Version <span id="help-dialog-version"></span></span><br/>
+ <a href="https://github.com/philc/vimium#release-notes" class="vimiumReset">What's new?</a>
+ </div>
+ </div>
</div>
- </div>
-</div>
+ </body>
+</html>
generated by cgit v1.2.3 (git 2.25.1) at 2025-11-01 04:08:07 +0000