Rework help-dialog HTML.

Previously, the dynamic HTML for the help dialog was generated on the
background page.  The HTML itself was tangled in with program logic.

Here, we move all of the HTML to HTML5 templates; also, we build the
help-dialog contents in the help dialog itself, not on the background
page.

Note: #2368 is included here too.

(Background: I'm trying to clean up some of the command and help-dialog
logic in preparation for addressing the issue of how to document command
options, see #2319.)

2 files changed, 19 insertions, 51 deletions

diff --git a/background_scripts/commands.coffee b/background_scripts/commands.coffee
index 2d3312ea..f5a3840b 100644
--- a/background_scripts/commands.coffee
+++ b/background_scripts/commands.coffee
@@ -9,6 +9,7 @@ Commands =
 
     Settings.postUpdateHooks["keyMappings"] = @loadKeyMappings.bind this
     @loadKeyMappings Settings.get "keyMappings"
+    @prepareHelpPageData()
 
   loadKeyMappings: (customKeyMappings) ->
     @keyToCommandRegistry = {}
@@ -113,6 +114,24 @@ Commands =
           delete currentMapping[key][prop] for prop in ["keySequence", "description"]
     chrome.storage.local.set normalModeKeyStateMapping: keyStateMapping
 
+  # Build the "helpPageData" data structure which the help page needs and place it in Chrome storage.  We do
+  # this on the "nextTick" because there's not need for it to be done synchronously.
+  prepareHelpPageData: ->
+    Utils.nextTick =>
+      commandToKey = {}
+      for own key, registryEntry of @keyToCommandRegistry
+        (commandToKey[registryEntry.command] ?= []).push key
+      commandGroups = {}
+      for own group, commands of @commandGroups
+        commandGroups[group] = []
+        for command in commands
+          commandGroups[group].push
+            command: command
+            description: @availableCommands[command].description
+            keys: commandToKey[command] ? []
+            advanced: command in @advancedCommands
+      chrome.storage.local.set helpPageData: commandGroups
+
   # An ordered listing of all available commands, grouped by type. This is the order they will
   # be shown in the help page.
   commandGroups:
diff --git a/background_scripts/main.coffee b/background_scripts/main.coffee
index e57e061d..8f99cf3e 100644
--- a/background_scripts/main.coffee
+++ b/background_scripts/main.coffee
@@ -80,56 +80,6 @@ onURLChange = (details) ->
 chrome.webNavigation.onHistoryStateUpdated.addListener onURLChange # history.pushState.
 chrome.webNavigation.onReferenceFragmentUpdated.addListener onURLChange # Hash changed.
 
-# Retrieves the help dialog HTML template from a file, and populates it with the latest keybindings.
-getHelpDialogHtml = ({showUnboundCommands, showCommandNames, customTitle}) ->
-  commandsToKey = {}
-  for own key of Commands.keyToCommandRegistry
-    command = Commands.keyToCommandRegistry[key].command
-    commandsToKey[command] = (commandsToKey[command] || []).concat(key)
-
-  replacementStrings =
-    version: Utils.getCurrentVersion()
-    title: customTitle || "Help"
-    tip: if showCommandNames then "Tip: click command names to yank them to the clipboard." else " "
-
-  for own group of Commands.commandGroups
-    replacementStrings[group] =
-        helpDialogHtmlForCommandGroup(group, commandsToKey, Commands.availableCommands,
-                                      showUnboundCommands, showCommandNames)
-
-  replacementStrings
-
-#
-# Generates HTML for a given set of commands. commandGroups are defined in commands.js
-#
-helpDialogHtmlForCommandGroup = (group, commandsToKey, availableCommands,
-    showUnboundCommands, showCommandNames) ->
-  html = []
-  for command in Commands.commandGroups[group]
-    keys = commandsToKey[command] || []
-    bindings = ("<span class='vimiumHelpDialogKey'>#{Utils.escapeHtml key}</span>" for key in keys).join ", "
-    if (showUnboundCommands || commandsToKey[command])
-      isAdvanced = Commands.advancedCommands.indexOf(command) >= 0
-      description = availableCommands[command].description
-      if keys.join(", ").length < 12
-        helpDialogHtmlForCommand html, isAdvanced, bindings, description, showCommandNames, command
-      else
-        # If the length of the bindings is too long, then we display the bindings on a separate row from the
-        # description.  This prevents the column alignment from becoming out of whack.
-        helpDialogHtmlForCommand html, isAdvanced, bindings, "", false, ""
-        helpDialogHtmlForCommand html, isAdvanced, "", description, showCommandNames, command
-  html.join("\n")
-
-helpDialogHtmlForCommand = (html, isAdvanced, bindings, description, showCommandNames, command) ->
-  html.push "<tr class='vimiumReset #{"advanced" if isAdvanced}'>"
-  if description
-    html.push "<td class='vimiumReset'>#{bindings}</td>"
-    html.push "<td class='vimiumReset'></td><td class='vimiumReset vimiumHelpDescription'>", description
-    html.push("(<span class='vimiumReset commandName'>#{command}</span>)") if showCommandNames
-  else
-    html.push "<td class='vimiumReset' colspan='3' style='text-align: left;'>", bindings
-  html.push("</td></tr>")
-
 # Cache "content_scripts/vimium.css" in chrome.storage.local for UI components.
 do ->
   req = new XMLHttpRequest()
@@ -429,7 +379,6 @@ portHandlers =
 
 sendRequestHandlers =
   runBackgroundCommand: (request) -> BackgroundCommands[request.registryEntry.command] request
-  getHelpDialogHtml: getHelpDialogHtml
   # getCurrentTabUrl is used by the content scripts to get their full URL, because window.location cannot help
   # with Chrome-specific URLs like "view-source:http:..".
   getCurrentTabUrl: ({tab}) -> tab.url