1 files changed, 67 insertions, 16 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 =