Add a dialog to show all available commands for key mappings under the options page.

Author: ilya

background_page.html

@@ -151,7 +151,7 @@
   /*
    * Retrieves the help dialog HTML template from a file, and populates it with the latest keybindings.
    */
-  function helpDialogHtml() {
+  function helpDialogHtml(showUnboundCommands, showCommandNames, customTitle) {
     var commandsToKey = {};
     for (var key in keyToCommandRegistry) {
       var command = keyToCommandRegistry[key].command;
@@ -160,21 +160,32 @@
     var dialogHtml = fetchFileContents("helpDialog.html");
     for (var group in commandGroups)
       dialogHtml = dialogHtml.replace("{{" + group + "}}",
-        helpDialogHtmlForCommandGroup(group, commandsToKey, availableCommands));
+          helpDialogHtmlForCommandGroup(group, commandsToKey, availableCommands,
+                                        showUnboundCommands, showCommandNames));
     dialogHtml = dialogHtml.replace("{{version}}", currentVersion);
+    dialogHtml = dialogHtml.replace("{{title}}", customTitle || "Help");
     return dialogHtml;
   }
 
   /*
    * Generates HTML for a given set of commands. commandGroups are defined in commands.js
    */
-  function helpDialogHtmlForCommandGroup(group, commandsToKey, availableCommands) {
+  function helpDialogHtmlForCommandGroup(group, commandsToKey, availableCommands,
+                                         showUnboundCommands, showCommandNames) {
     var html = [];
     for (var i = 0; i < commandGroups[group].length; i++) {
       var command = commandGroups[group][i];
-      if (commandsToKey[command])
-        html.push("<tr><td>", escapeHtml(commandsToKey[command].join(", ")),
-          "</td><td>:</td><td>",availableCommands[command].description, "</td></tr>");
+      bindings = (commandsToKey[command] || [""]).join(", ")
+      if (showUnboundCommands || commandsToKey[command])
+      {
+        html.push("<tr><td>", escapeHtml(bindings),
+          "</td><td>:</td><td>", availableCommands[command].description);
+
+        if (showCommandNames)
+          html.push("<span class='commandName'>(" + command + ")</span>");
+
+        html.push("</td></tr>");
+      }
     }
     return html.join("\n");
   }

helpDialog.html

@@ -50,6 +50,9 @@
       font-weight:bold;
       padding-top:3px;
     }
+    #vimiumHelpDialog .commandName {
+      font-family:"courier new";
+    }
     #vimiumHelpDialog .closeButton {
       position:absolute;
       right:10px;
@@ -72,7 +75,7 @@
   <!-- 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. -->
   <a class="closeButton" href="#">x</a>
-  <div id="vimiumTitle">Vim<span style="color:#2f508e">ium</span> Help</div>
+  <div id="vimiumTitle"><span style="color:#2f508e">Vim</span>ium {{title}}</div>
   <div class="vimiumColumn">
     <table>
       <tr><td></td><td></td><td class="vimiumHelpSectionTitle">Navigating the page</td></tr>

options.html

@@ -66,6 +66,7 @@
   <script type="text/javascript">
   $ = function(id) { return document.getElementById(id); };
   isShowingHelpDialog = false;
+  isShowingCommandListing = false;
 
   var defaultSettings = chrome.extension.getBackgroundPage().defaultSettings;
 
@@ -82,6 +83,7 @@
     for (var i = 0; i < editableFields.length; i++)
       $(editableFields[i]).addEventListener("keyup", onOptionKeyup, false);
     $("advancedOptions").addEventListener("click", openAdvancedOptions, false);
+    $("showCommands").addEventListener("click", showCommandListing, false);
     document.addEventListener("keydown", onKeydown, true);
   }
 
@@ -135,7 +137,7 @@
   }
 
   function showHelpDialog() {
-    if (isShowingHelpDialog)
+    if (isShowingHelpDialog || isShowingCommandListing)
       return false;
     html = chrome.extension.getBackgroundPage().helpDialogHtml();
     isShowingHelpDialog = true;
@@ -155,6 +157,27 @@
       helpDialog.parentNode.removeChild(helpDialog);
   }
 
+  function showCommandListing() {
+    if (isShowingCommandListing || isShowingHelpDialog)
+      return false;
+    html = chrome.extension.getBackgroundPage().helpDialogHtml(true, true, "Command Listing");
+    isShowingCommandListing = true;
+    var container = document.createElement("div");
+    container.id = "vimiumCommandListingContainer";
+    container.innerHTML = html;
+    container.getElementsByClassName("closeButton")[0].addEventListener("click", hideCommandListing, false);
+    document.body.appendChild(container);
+    var dialog = document.getElementById("vimiumHelpDialog");
+    dialog.style.top = Math.max((window.innerHeight - dialog.clientHeight) / 2.0, 20) + "px";
+  }
+
+  function hideCommandListing() {
+    isShowingCommandListing = false;
+    var commandListing = document.getElementById("vimiumCommandListingContainer");
+    if (commandListing)
+      commandListing.parentNode.removeChild(commandListing);
+  }
+
   function onKeydown(event) {
     var keyChar = getKeyChar(event);
     var isFormField = ["INPUT", "TEXTAREA"].indexOf(event.target.tagName) >= 0;
@@ -213,6 +236,7 @@ <h1>Vimium - Options</h1>
                 " this is a comment<br/>
                 # this is also a comment<br/>
               </div>
+              <a href="#" id="showCommands">Show available commands.</a>
             </div>
           </div>
           <textarea id="keyMappings" type="text"></textarea>