Merge pull request #1715 from smblott-github/help-page-long-bindings

On the help page, use separate row for very-long bindings.

1 files changed, 18 insertions, 9 deletions

diff --git a/background_scripts/main.coffee b/background_scripts/main.coffee
index cbb70c6c..835b8a9a 100644
--- a/background_scripts/main.coffee
+++ b/background_scripts/main.coffee
@@ -150,17 +150,26 @@ helpDialogHtmlForCommandGroup = (group, commandsToKey, availableCommands,
     bindings = (commandsToKey[command] || [""]).join(", ")
     if (showUnboundCommands || commandsToKey[command])
       isAdvanced = Commands.advancedCommands.indexOf(command) >= 0
-      html.push(
-        "<tr class='vimiumReset #{"advanced" if isAdvanced}'>",
-        "<td class='vimiumReset'>", Utils.escapeHtml(bindings), "</td>",
-        "<td class='vimiumReset'>:</td><td class='vimiumReset'>", availableCommands[command].description)
-
-      if (showCommandNames)
-        html.push("<span class='vimiumReset commandName'>(#{command})</span>")
-
-      html.push("</td></tr>")
+      description = availableCommands[command].description
+      if bindings.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'>", Utils.escapeHtml(bindings), "</td>"
+    html.push "<td class='vimiumReset'>#{if description and bindings then ':' else ''}</td><td class='vimiumReset'>", description
+    html.push("<span class='vimiumReset commandName'>(#{command})</span>") if showCommandNames
+  else
+    html.push "<td class='vimiumReset' colspan='3' style='text-align: left;'>", Utils.escapeHtml(bindings)
+  html.push("</td></tr>")
+
 #
 # Fetches the contents of a file bundled with this extension.
 #