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

1 files changed, 17 insertions, 6 deletions

diff --git a/background_page.html b/background_page.html
index 082c38ea..11788dc6 100644
--- a/background_page.html
+++ b/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");
   }