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.)

3 files changed, 90 insertions, 20 deletions

diff --git a/pages/help_dialog.coffee b/pages/help_dialog.coffee
index 28aafb4a..4ac9116b 100644
--- a/pages/help_dialog.coffee
+++ b/pages/help_dialog.coffee
@@ -1,3 +1,12 @@
+$ = (id) -> document.getElementById id
+$$ = (element, selector) -> element.querySelector selector
+
+# The ordering we show key bindings is alphanumerical, except that special keys sort to the end.
+compareKeys = (a,b) ->
+  a = a.replace "<","~"
+  b = b.replace "<", "~"
+  if a < b then -1 else if b < a then 1 else 0
+
 # This overrides the HelpDialog implementation in vimium_frontend.coffee.  We provide aliases for the two
 # HelpDialog methods required by normalMode (isShowing() and toggle()).
 HelpDialog =
@@ -20,30 +29,67 @@ HelpDialog =
         chrome.runtime.sendMessage({handler: "openOptionsPageInNewTab"})
       false)
     document.getElementById("toggleAdvancedCommands").addEventListener("click",
-      HelpDialog.toggleAdvancedCommands, false)
+      HelpDialog.toggleAdvancedCommands.bind(HelpDialog), false)
 
     document.documentElement.addEventListener "click", (event) =>
       @hide() unless @dialogElement.contains event.target
     , false
 
-  show: ({html}) ->
-    for own placeholder, htmlString of html
-      @dialogElement.querySelector("#help-dialog-#{placeholder}").innerHTML = htmlString
+  instantiateHtmlTemplate: (parentNode, templateId, callback) ->
+    templateContent = document.querySelector(templateId).content
+    node = document.importNode templateContent, true
+    parentNode.appendChild node
+    callback parentNode.lastElementChild
+
+  show: ({showAllCommandDetails}) ->
+    $("help-dialog-title").textContent = if showAllCommandDetails then "Command Listing" else "Help"
+    $("help-dialog-version").textContent = Utils.getCurrentVersion()
+
+    chrome.storage.local.get "helpPageData", ({helpPageData}) =>
+      for own group, commands of helpPageData
+        container = @dialogElement.querySelector("#help-dialog-#{group}")
+        container.innerHTML = ""
+        for command in commands when showAllCommandDetails or 0 < command.keys.length
+          keysElement = null
+          descriptionElement = null
+
+          useTwoRows = 12 <= command.keys.join(", ").length
+          unless useTwoRows
+            @instantiateHtmlTemplate container, "#helpDialogEntry", (element) ->
+              element.classList.add "advanced" if command.advanced
+              keysElement = descriptionElement = element
+          else
+            @instantiateHtmlTemplate container, "#helpDialogEntryBindingsOnly", (element) ->
+              element.classList.add "advanced" if command.advanced
+              keysElement = element
+            @instantiateHtmlTemplate container, "#helpDialogEntry", (element) ->
+              element.classList.add "advanced" if command.advanced
+              descriptionElement = element
+
+          $$(descriptionElement, ".vimiumHelpDescription").textContent = command.description
+
+          keysElement = $$(keysElement, ".vimiumKeyBindings")
+          lastElement = null
+          for key in command.keys.sort compareKeys
+            @instantiateHtmlTemplate keysElement, "#keysTemplate", (element) ->
+              lastElement = element
+              $$(element, ".vimiumHelpDialogKey").innerHTML = Utils.escapeHtml key
+          # And strip off the trailing ", ", if necessary.
+          lastElement.removeChild $$ lastElement, ".commaSeparator" if lastElement
 
-    @showAdvancedCommands(@getShowAdvancedCommands())
+          if showAllCommandDetails
+            @instantiateHtmlTemplate $$(descriptionElement, ".vimiumHelpDescription"), "#commandNameTemplate", (element) ->
+              commandNameElement = $$ element, ".vimiumCopyCommandNameName"
+              commandNameElement.textContent = command.command
+              commandNameElement.title = "Click to copy \"#{command.command}\" to clipboard."
+              commandNameElement.addEventListener "click", ->
+                chrome.runtime.sendMessage handler: "copyToClipboard", data: commandNameElement.textContent
+                HUD.showForDuration("Yanked #{commandNameElement.textContent}.", 2000)
 
-    # When command names are shown, clicking on them copies their text to the clipboard (and they can be
-    # clicked with link hints).
-    for element in @dialogElement.getElementsByClassName "commandName"
-      do (element) ->
-        element.setAttribute "role", "link"
-        element.addEventListener "click", ->
-          commandName = element.textContent
-          chrome.runtime.sendMessage handler: "copyToClipboard", data: commandName
-          HUD.showForDuration("Yanked #{commandName}.", 2000)
+      @showAdvancedCommands(@getShowAdvancedCommands())
 
-    # "Click" the dialog element (so that it becomes scrollable).
-    DomUtils.simulateClick @dialogElement
+      # "Click" the dialog element (so that it becomes scrollable).
+      DomUtils.simulateClick @dialogElement
 
   hide: -> UIComponentServer.hide()
   toggle: -> @hide()
@@ -52,10 +98,15 @@ HelpDialog =
   # Advanced commands are hidden by default so they don't overwhelm new and casual users.
   #
   toggleAdvancedCommands: (event) ->
+    vimiumHelpDialogContainer = $ "vimiumHelpDialogContainer"
+    scrollHeightBefore = vimiumHelpDialogContainer.scrollHeight
     event.preventDefault()
     showAdvanced = HelpDialog.getShowAdvancedCommands()
     HelpDialog.showAdvancedCommands(!showAdvanced)
     Settings.set("helpDialog_showAdvancedCommands", !showAdvanced)
+    # Try to keep the "show advanced commands" button in the same scroll position.
+    scrollHeightDelta = vimiumHelpDialogContainer.scrollHeight - scrollHeightBefore
+    vimiumHelpDialogContainer.scrollTop += scrollHeightDelta if 0 < scrollHeightDelta
 
   showAdvancedCommands: (visible) ->
     document.getElementById("toggleAdvancedCommands").innerHTML =
diff --git a/pages/help_dialog.html b/pages/help_dialog.html
index c23b2ac1..7bc0d86c 100644
--- a/pages/help_dialog.html
+++ b/pages/help_dialog.html
@@ -66,7 +66,7 @@
         </div>
 
         <div>
-          <table>
+          <table class="helpDialogBottom">
             <tr>
               <td class="helpDialogBottomLeft">
                 <span id="help-dialog-tip"></span>
@@ -96,5 +96,26 @@
         </div>
       </div>
     </div>
+
+
+    <template id="helpDialogEntry">
+      <tr class="vimiumReset">
+        <td class="vimiumReset vimiumKeyBindings"></td>
+        <td class="vimiumReset"></td>
+        <td class="vimiumReset vimiumHelpDescription"></td>
+      </tr>
+    </template>
+
+    <template id="helpDialogEntryBindingsOnly">
+      <tr>
+        <td class="vimiumReset vimiumKeyBindings" colspan="3" style="text-align: left"></td>
+      </tr>
+    </template>
+
+    <template id="keysTemplate"><span><span class="vimiumHelpDialogKey"></span><span class="commaSeparator">, </span></span></template>
+
+    <template id="commandNameTemplate">
+      <span class="vimiumReset vimiumCopyCommandName">(<span class="vimiumCopyCommandNameName" role="link"></span>)</span>
+    </template>
   </body>
 </html>
diff --git a/pages/options.coffee b/pages/options.coffee
index 883405e6..7021322a 100644
--- a/pages/options.coffee
+++ b/pages/options.coffee
@@ -234,9 +234,7 @@ initOptionsPage = ->
     event.preventDefault()
 
   activateHelpDialog = ->
-    request = showUnboundCommands: true, showCommandNames: true, customTitle: "Command Listing"
-    chrome.runtime.sendMessage extend(request, handler: "getHelpDialogHtml"), (response) ->
-      HelpDialog.toggle {html: response}
+    HelpDialog.toggle showAllCommandDetails: true
 
   saveOptions = ->
     Option.saveOptions()