From 70b8c396c273172ad2bc5b5cead0db7ad071767c Mon Sep 17 00:00:00 2001 From: Phil Crosby Date: Sun, 7 Mar 2010 17:27:29 -0800 Subject: Show a help dialog when pressing ? which displays all of the current keybindings o_O --- background_page.html | 49 +++++++++++++++++++++++- commands.js | 22 ++++++++++- helpDialog.html | 105 +++++++++++++++++++++++++++++++++++++++++++++++++++ vimiumFrontend.js | 25 ++++++++++++ 4 files changed, 198 insertions(+), 3 deletions(-) create mode 100644 helpDialog.html diff --git a/background_page.html b/background_page.html index 520ae49c..ab76e59e 100644 --- a/background_page.html +++ b/background_page.html @@ -142,6 +142,54 @@ returnPort.postMessage({ zoomLevel: zoomLevel }); } + function showHelp() { + chrome.tabs.getSelected(null, function(tab) { + chrome.tabs.sendRequest(tab.id, { name: "showHelpDialog", dialogHtml: helpDialogHtml() }); + }); + } + + /* + * Retrieves the help dialog HTML template from a file, and populates it with the latest keybindings. + */ + function helpDialogHtml() { + var commandsToKey = {}; + for (var key in keyToCommandRegistry) { + var command = keyToCommandRegistry[key].command; + commandsToKey[command] = (commandsToKey[command] || []).concat(key); + } + var dialogHtml = fetchFileContents("helpDialog.html"); + for (var group in commandGroups) + dialogHtml = dialogHtml.replace("{{" + group + "}}", + helpDialogHtmlForCommandGroup(group, commandsToKey, availableCommands)); + return dialogHtml; + } + + /* + * Generates HTML for a given set of commands. commandGroups are defined in commands.js + */ + function helpDialogHtmlForCommandGroup(group, commandsToKey, availableCommands) { + var html = []; + for (var i = 0; i < commandGroups[group].length; i++) { + var command = commandGroups[group][i]; + if (commandsToKey[command]) + html.push("", escapeHtml(commandsToKey[command].join(", ")), + ":",availableCommands[command].description, ""); + } + return html.join("\n"); + } + + function escapeHtml(string) { return string.replace(//g, ">"); } + + /* + * Fetches the contents of a file bundled with this extension. + */ + function fetchFileContents(extensionFileName) { + var req = new XMLHttpRequest(); + req.open("GET", chrome.extension.getURL(extensionFileName), false); // false => synchronous + req.send(); + return req.responseText; + } + /** * Returns the keys that can complete a valid command given the current key queue. */ @@ -446,7 +494,6 @@ if (shouldShowUpgradeMessage()) sendRequestToAllTabs({ name: "showUpgradeNotification", version: currentVersion }); } - init(); diff --git a/commands.js b/commands.js index 69501b5d..7cab1a56 100644 --- a/commands.js +++ b/commands.js @@ -52,6 +52,7 @@ function parseCustomKeyMappings(customKeyMappings) { } // Navigating the current page: +addCommand('showHelp', 'Show help.', true); addCommand('scrollDown', 'Scroll down.'); addCommand('scrollUp', 'Scroll up.'); addCommand('scrollLeft', 'Scroll left.'); @@ -87,8 +88,25 @@ addCommand('nextTab', 'Go one tab right.', true); addCommand('previousTab', 'Go one tab left.', true); addCommand('createTab', 'Create new tab.', true); addCommand('removeTab', 'Close current tab.', true); -addCommand('restoreTab', "Restore closed tab. (i.e. unwind the 'd' command).", true); - +addCommand('restoreTab', "Restore closed tab.", true); + + +// An ordered listing of all available commands, grouped by type. This is the order they will +// be shown in the help page. +var commandGroups = { + pageNavigation: + ["scrollDown", "scrollUp", "scrollLeft", "scrollRight", + "scrollToTop", "scrollToBottom", "scrollPageDown", "scrollPageUp", "scrollFullPageDown", + "reload", "toggleViewSource", "zoomIn", "zoomOut", "copyCurrentUrl", + "enterInsertMode", "activateLinkHintsMode", "activateLinkHintsModeToOpenInNewTab", + "enterFindMode", "performFind", "performBackwardsFind"], + historyNavigation: + ["goBack", "goForward"], + tabManipulation: + ["nextTab", "previousTab", "createTab", "removeTab", "restoreTab"] +}; + +mapKeyToCommand('?', 'showHelp'); mapKeyToCommand('j', 'scrollDown'); mapKeyToCommand('k', 'scrollUp'); mapKeyToCommand('h', 'scrollLeft'); diff --git a/helpDialog.html b/helpDialog.html new file mode 100644 index 00000000..856663f1 --- /dev/null +++ b/helpDialog.html @@ -0,0 +1,105 @@ + +
+ + + + x +
Vimium Help
+
+ + + {{pageNavigation}} +
Navigating the page
+
+
+ + + {{historyNavigation}} + + {{tabManipulation}} +
Navigating history
Manipulating tabs
+
+ +
+
+ +
+
+ Enjoying Vimium? + Leave us feedback.
+ Found a bug? Report it here. +
+
+ + Version 1.1
+ Homepage +
+
+
\ No newline at end of file diff --git a/vimiumFrontend.js b/vimiumFrontend.js index f3259f10..a7dd263d 100644 --- a/vimiumFrontend.js +++ b/vimiumFrontend.js @@ -14,6 +14,7 @@ var insertMode = false; var findMode = false; var findModeQuery = ""; var findModeQueryHasResults = false; +var isShowingHelpDialog = false; var keyPort; var settingPort; var saveZoomLevelPort; @@ -85,6 +86,8 @@ function initializePreDomReady() { HUD.hideUpgradeNotification(); else if (request.name == "showUpgradeNotification" && isEnabledForUrl) HUD.showUpgradeNotification(request.version); + else if (request.name == "showHelpDialog") + showHelpDialog(request.dialogHtml); sendResponse({}); // Free up the resources used by this open connection. }); @@ -331,6 +334,10 @@ function onKeydown(event) { else if (event.keyCode == keyCodes.enter) handleEnterForFindMode(); } + else if (isShowingHelpDialog && isEscape(event)) + { + hideHelpDialog(); + } else if (!insertMode && !findMode) { if (keyChar) { if (currentCompletionKeys.indexOf(keyChar) != -1) { @@ -483,6 +490,24 @@ function exitFindMode() { HUD.hide(); } +function showHelpDialog(html) { + if (isShowingHelpDialog) + return false; + isShowingHelpDialog = true; + var container = document.createElement("div"); + container.id = "vimiumHelpDialogContainer"; + container.innerHTML = html; + container.getElementsByClassName("closeButton")[0].addEventListener("click", hideHelpDialog, false); + document.body.appendChild(container); +} + +function hideHelpDialog() { + isShowingHelpDialog = false; + var helpDialog = document.getElementById("vimiumHelpDialogContainer"); + if (helpDialog) + helpDialog.parentNode.removeChild(helpDialog); +} + /* * A heads-up-display (HUD) for showing Vimium page operations. * Note: you cannot interact with the HUD until document.body is available. -- cgit v1.2.3