aboutsummaryrefslogtreecommitdiffstats
path: root/pages
diff options
context:
space:
mode:
authormrmr19932016-02-03 15:23:02 +0000
committermrmr19932016-02-03 15:23:02 +0000
commitacb0c7010d345a3e4918c4aa33eb1d2bf72cf8da (patch)
tree5759919f94f3cbf4db943bc89798cfd4695cd9e7 /pages
parent674990c07422a61a702f14bfdaa8b3d2f3117f1b (diff)
downloadvimium-acb0c7010d345a3e4918c4aa33eb1d2bf72cf8da.tar.bz2
Move help dialog into an iframe
Diffstat (limited to 'pages')
-rw-r--r--pages/help_dialog.coffee56
-rw-r--r--pages/help_dialog.html118
2 files changed, 121 insertions, 53 deletions
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 07:21:36 +0000