Show tip re. clicking command names.

It's pretty undiscoverable that you can click command names to yank them. So, this adds a tip to the bottom of the help dialog. Also, change the cursor to a pointer when hovering over command names.
yosef-abraham · Apr 23, 2016 · 98ea279 · 98ea279
1 parent 546d8b9
commit 98ea279
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 10 deletions.
diff --git a/background_scripts/main.coffee b/background_scripts/main.coffee
@@ -91,6 +91,7 @@ getHelpDialogHtml = ({showUnboundCommands, showCommandNames, customTitle}) ->
   replacementStrings =
     version: currentVersion
     title: customTitle || "Help"
+    tip: if showCommandNames then "Tip: click command names to yank them to the clipboard." else ""
 
   for own group of Commands.commandGroups
     replacementStrings[group] =

diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css
@@ -237,9 +237,9 @@ div#vimiumHelpDialog td.vimiumHelpDescription {
   font-size:14px;
 }
 div#vimiumHelpDialog span.commandName {
-  /* font-family:"courier new"; */
-  /* color: #555; */
+  color: #555;
   font-style: italic;
+  cursor: pointer;
 }
 /* Advanced commands are hidden by default until you show them. */
 div#vimiumHelpDialog tr.advanced { display: none; }
@@ -267,13 +267,19 @@ div#vimiumHelpDialogFooter {
   display: block;
   position: relative;
 }
+td.helpDialogBottomRight {
+   width: 100%;
+   text-align: right;
+}
 div#vimiumHelpDialogFooter * { font-size:10px; }
-div#vimiumHelpDialogFooter .toggleAdvancedCommands {
-  position: absolute;
-  right: 2px;
-  top: -34px;
+a#toggleAdvancedCommands, span#help-dialog-tip {
+  position: relative;
+  top: 19px;
+  color: #555;
+  white-space: nowrap;
+}
+td.helpDialogBottomLeft, td.helpDialogBottomRight {
   font-size: 14px;
-  color:#555;
 }
 
 a:link.vimiumHelDialogLink, a:visited.vimiumHelDialogLink, a:hover.vimiumHelDialogLink, a:active.vimiumHelDialogLink{

diff --git a/pages/help_dialog.coffee b/pages/help_dialog.coffee
@@ -19,7 +19,7 @@ HelpDialog =
         clickEvent.preventDefault()
         chrome.runtime.sendMessage({handler: "openOptionsPageInNewTab"})
       false)
-    @dialogElement.getElementsByClassName("toggleAdvancedCommands")[0].addEventListener("click",
+    document.getElementById("toggleAdvancedCommands").addEventListener("click",
       HelpDialog.toggleAdvancedCommands, false)
 
     document.documentElement.addEventListener "click", (event) =>
@@ -58,7 +58,7 @@ HelpDialog =
     Settings.set("helpDialog_showAdvancedCommands", !showAdvanced)
 
   showAdvancedCommands: (visible) ->
-    HelpDialog.dialogElement.getElementsByClassName("toggleAdvancedCommands")[0].innerHTML =
+    document.getElementById("toggleAdvancedCommands").innerHTML =
       if visible then "Hide advanced commands" else "Show advanced commands"
 
     # Add/remove the showAdvanced class to show/hide advanced commands.

diff --git a/pages/help_dialog.html b/pages/help_dialog.html
@@ -65,11 +65,23 @@
         </table>
       </div>
 
+      <div>
+        <table>
+          <tr>
+            <td class="helpDialogBottomLeft">
+              <span id="help-dialog-tip"></span>
+            </td>
+            <td class="helpDialogBottomRight">
+              <a href="#" id="toggleAdvancedCommands">Show advanced commands</a>
+            </td>
+          </tr>
+        </table>
+      </div>
+
       <br clear="both"/>
       <div class="vimiumReset vimiumDivider"></div>
 
       <div id="vimiumHelpDialogFooter" class="vimiumReset">
-        <a href="#" class="vimiumReset toggleAdvancedCommands">Show advanced commands</a>
         <div class="vimiumReset vimiumColumn">
           Enjoying Vimium?
           <a class="vimiumHelDialogLink" target="_blank"