From 3adae8c9a683955641fe1417c977a3a06356107b Mon Sep 17 00:00:00 2001
From: Stephen Blott
Date: Tue, 19 Apr 2016 07:22:17 +0100
Subject: Help dialog: put keys in greyed-out box.

---
 background_scripts/main.coffee | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

(limited to 'background_scripts')

diff --git a/background_scripts/main.coffee b/background_scripts/main.coffee
index 272146cb..9689dd79 100644
--- a/background_scripts/main.coffee
+++ b/background_scripts/main.coffee
@@ -106,11 +106,12 @@ helpDialogHtmlForCommandGroup = (group, commandsToKey, availableCommands,
     showUnboundCommands, showCommandNames) ->
   html = []
   for command in Commands.commandGroups[group]
-    bindings = (commandsToKey[command] || [""]).join(", ")
+    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 bindings.length < 12
+      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
@@ -122,11 +123,11 @@ helpDialogHtmlForCommandGroup = (group, commandsToKey, availableCommands,
 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 vimiumHelpDescription'>", 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;'>", Utils.escapeHtml(bindings)
+    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.
-- 
cgit v1.2.3