diff options
| -rw-r--r-- | background_page.html | 11 | ||||
| -rw-r--r-- | commands.js | 16 | ||||
| -rw-r--r-- | helpDialog.html | 40 | ||||
| -rw-r--r-- | vimiumFrontend.js | 8 |
4 files changed, 62 insertions, 13 deletions
diff --git a/background_page.html b/background_page.html index ac83a0c3..87b3c9ad 100644 --- a/background_page.html +++ b/background_page.html @@ -195,11 +195,12 @@ var html = []; for (var i = 0; i < commandGroups[group].length; i++) { var command = commandGroups[group][i]; - bindings = (commandsToKey[command] || [""]).join(", ") - if (showUnboundCommands || commandsToKey[command]) - { - html.push("<tr><td>", escapeHtml(bindings), - "</td><td>:</td><td>", availableCommands[command].description); + bindings = (commandsToKey[command] || [""]).join(", "); + if (showUnboundCommands || commandsToKey[command]) { + html.push( + "<tr class='" + (advancedCommands.indexOf(command) >= 0 ? "advanced" : "") + "'>", + "<td>", escapeHtml(bindings), "</td>", + "<td>:</td><td>", availableCommands[command].description); if (showCommandNames) html.push("<span class='commandName'>(" + command + ")</span>"); diff --git a/commands.js b/commands.js index ac1e1a44..d7066bd1 100644 --- a/commands.js +++ b/commands.js @@ -149,7 +149,7 @@ function clearKeyMappingsAndSetDefaults() { // This is a mapping of: commandIdentifier => [description, options]. var commandDescriptions = { - // Navigating the current page: + // Navigating the current page showHelp: ["Show help", { background: true }], scrollDown: ["Scroll down"], scrollUp: ["Scroll up"], @@ -187,14 +187,14 @@ var commandDescriptions = { goPrevious: ["Follow the link labeled previous or <"], goNext: ["Follow the link labeled next or >"], - // Navigating your history: + // Navigating your history goBack: ["Go back in history"], goForward: ["Go forward in history"], // Navigating the URL hierarchy goUp: ["Go up the URL hierarchy", { passCountToFunction: true }], - // Manipulating tabs: + // Manipulating tabs nextTab: ["Go one tab right", { background: true }], previousTab: ["Go one tab left", { background: true }], createTab: ["Create new tab", { background: true }], @@ -226,4 +226,12 @@ var commandGroups = { ["nextTab", "previousTab", "createTab", "removeTab", "restoreTab"], misc: ["showHelp"] -};
\ No newline at end of file +}; + +// Rarely used commands are not shown by default in the help dialog or in the README. The goal is to present +// a focused, high-signal set of commands to the new and casual user. Only those truly hungry for more power +// from Vimium will uncover these gems. +var advancedCommands = [ + "scrollToLeft", "scrollToRight", + "zoomReset", "goUp", "focusInput", "activateLinkHintsModeWithQueue", + "goPrevious", "goNext"];
\ No newline at end of file diff --git a/helpDialog.html b/helpDialog.html index ee35fc9b..dac1fb56 100644 --- a/helpDialog.html +++ b/helpDialog.html @@ -55,9 +55,10 @@ font-weight:bold; padding-top:3px; } - #vimiumHelpDialog .commandName { - font-family:"courier new"; - } + #vimiumHelpDialog .commandName { font-family:"courier new"; } + /* Advanced commands are hidden by default until you show them. */ + #vimiumHelpDialog .advanced { display: none; } + #vimiumHelpDialog .advanced td:nth-of-type(3) { color: #555; } #vimiumHelpDialog .closeButton { position:absolute; right:10px; @@ -79,7 +80,13 @@ cursor:default; -webkit-user-select:none; } + #vimiumHelpDialogFooter { position: relative; } #vimiumHelpDialogFooter * { font-size:10px; } + #vimiumHelpDialogFooter .toggleAdvancedCommands { + position: absolute; + right: 2px; + top: -34px; + } </style> <!-- Note that the template placeholders (e.g. "pageNavigation") will be filled in by the background @@ -108,6 +115,8 @@ <div class="vimiumDivider"></div> <div id="vimiumHelpDialogFooter"> + <a href="#" class="toggleAdvancedCommands">Show advanced commands</a> + <div class="vimiumColumn"> Enjoying Vimium? <a href="https://chrome.google.com/extensions/detail/dbepggeogbaibhgnhhndojpepiihcmeb">Leave us @@ -118,4 +127,29 @@ <span>Version {{version}}</span><br/> </div> </div> + + <script> + VimiumHelpDialog = { + init: function() { + this.dialogElement = document.getElementById("vimiumHelpDialog"); + this.dialogElement.getElementsByClassName("toggleAdvancedCommands")[0].addEventListener("click", + VimiumHelpDialog.toggleAdvancedCommands, false); + }, + + /* + * Advanced commands are hidden by default so they don't overwhelm new and casual users. + */ + toggleAdvancedCommands: function(event) { + event.preventDefault(); + var advanced = VimiumHelpDialog.dialogElement.getElementsByClassName("advanced"); + var shouldShow = (advanced[0].style.display == "" || advanced[0].style.display == "none"); + VimiumHelpDialog.dialogElement.getElementsByClassName("toggleAdvancedCommands")[0].innerHTML = + shouldShow ? "Hide advanced commands" : "Show advanced commands"; + for (var i = 0; i < advanced.length; i++) + advanced[i].style.display = (shouldShow ? "table-row" : "none"); + } + }; + + VimiumHelpDialog.init(); + </script> </div> diff --git a/vimiumFrontend.js b/vimiumFrontend.js index 8c5f94db..7c90aec5 100644 --- a/vimiumFrontend.js +++ b/vimiumFrontend.js @@ -635,12 +635,18 @@ function showHelpDialog(html, fid) { isShowingHelpDialog = true; var container = document.createElement("div"); container.id = "vimiumHelpDialogContainer"; + + document.body.appendChild(container); + container.innerHTML = html; + // This is necessary because innerHTML does not evaluate javascript embedded in <script> tags. + var scripts = Array.prototype.slice.call(container.getElementsByTagName("script")); + scripts.forEach(function(script) { eval(script.text); }); + container.getElementsByClassName("closeButton")[0].addEventListener("click", hideHelpDialog, false); container.getElementsByClassName("optionsPage")[0].addEventListener("click", function() { chrome.extension.sendRequest({ handler: "openOptionsPageInNewTab" }); }, false); - document.body.appendChild(container); var dialog = document.getElementById("vimiumHelpDialog"); dialog.style.zIndex = "99999998"; var zoomFactor = currentZoomLevel / 100.0; |