Help page, use separate row for long bindings.

If there are many bindings for a command, then the column layout on the
help page can become out of whack.  This commit puts such bindings on a
separate table row which spans all three columns.

(Many bindings for a single command are more likely in light of #1697.)

1 files changed, 18 insertions, 9 deletions

diff --git a/background_scripts/main.coffee b/background_scripts/main.coffee
index 980f8e18..0d56e54d 100644
--- a/background_scripts/main.coffee
+++ b/background_scripts/main.coffee
@@ -149,17 +149,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.
 #