From ae73ad02e936f66bb894fca5da13a631bcd14d31 Mon Sep 17 00:00:00 2001
From: Phil Crosby
Date: Sun, 30 Jan 2011 02:11:58 -0800
Subject: Split the help dialog into common commands and advanced commands.
 This closes #284

---
 background_page.html | 11 ++++++-----
 commands.js          | 16 ++++++++++++----
 helpDialog.html      | 40 +++++++++++++++++++++++++++++++++++++---
 vimiumFrontend.js    |  8 +++++++-
 4 files changed, 62 insertions(+), 13 deletions(-)

diff --git a/background_page.html b/background_page.html
index ac83a0c3..87b3c9ad 100644
--- a/background_page.html
+++ b/background_page.html
@@ -195,11 +195,12 @@
     var html = [];
     for (var i = 0; i < commandGroups[group].length; i++) {
       var command = commandGroups[group][i];
-      bindings = (commandsToKey[command] || [""]).join(", ")
-      if (showUnboundCommands || commandsToKey[command])
-      {
-        html.push("<tr><td>", escapeHtml(bindings),
-          "</td><td>:</td><td>", availableCommands[command].description);
+      bindings = (commandsToKey[command] || [""]).join(", ");
+      if (showUnboundCommands || commandsToKey[command]) {
+        html.push(
+          "<tr class='" + (advancedCommands.indexOf(command) >= 0 ? "advanced" : "") + "'>",
+          "<td>", escapeHtml(bindings), "</td>",
+          "<td>:</td><td>", availableCommands[command].description);
 
         if (showCommandNames)
           html.push("<span class='commandName'>(" + command + ")</span>");
diff --git a/commands.js b/commands.js
index ac1e1a44..d7066bd1 100644
--- a/commands.js
+++ b/commands.js
@@ -149,7 +149,7 @@ function clearKeyMappingsAndSetDefaults() {
 
 // This is a mapping of: commandIdentifier => [description, options].
 var commandDescriptions = {
-  // Navigating the current page:
+  // Navigating the current page
   showHelp: ["Show help", { background: true }],
   scrollDown: ["Scroll down"],
   scrollUp: ["Scroll up"],
@@ -187,14 +187,14 @@ var commandDescriptions = {
   goPrevious: ["Follow the link labeled previous or <"],
   goNext: ["Follow the link labeled next or >"],
 
-  // Navigating your history:
+  // Navigating your history
   goBack: ["Go back in history"],
   goForward: ["Go forward in history"],
 
   // Navigating the URL hierarchy
   goUp: ["Go up the URL hierarchy", { passCountToFunction: true }],
 
-  // Manipulating tabs:
+  // Manipulating tabs
   nextTab: ["Go one tab right", { background: true }],
   previousTab: ["Go one tab left", { background: true }],
   createTab: ["Create new tab", { background: true }],
@@ -226,4 +226,12 @@ var commandGroups = {
     ["nextTab", "previousTab", "createTab", "removeTab", "restoreTab"],
   misc:
     ["showHelp"]
-};
\ No newline at end of file
+};
+
+// Rarely used commands are not shown by default in the help dialog or in the README. The goal is to present
+// a focused, high-signal set of commands to the new and casual user. Only those truly hungry for more power
+// from Vimium will uncover these gems.
+var advancedCommands = [
+    "scrollToLeft", "scrollToRight",
+    "zoomReset", "goUp", "focusInput", "activateLinkHintsModeWithQueue",
+    "goPrevious", "goNext"];
\ No newline at end of file
diff --git a/helpDialog.html b/helpDialog.html
index ee35fc9b..dac1fb56 100644
--- a/helpDialog.html
+++ b/helpDialog.html
@@ -55,9 +55,10 @@
       font-weight:bold;
       padding-top:3px;
     }
-    #vimiumHelpDialog .commandName {
-      font-family:"courier new";
-    }
+    #vimiumHelpDialog .commandName { font-family:"courier new"; }
+    /* Advanced commands are hidden by default until you show them. */
+    #vimiumHelpDialog .advanced { display: none; }
+    #vimiumHelpDialog .advanced td:nth-of-type(3) { color: #555; }
     #vimiumHelpDialog .closeButton {
       position:absolute;
       right:10px;
@@ -79,7 +80,13 @@
       cursor:default;
       -webkit-user-select:none;
     }
+    #vimiumHelpDialogFooter { position: relative; }
     #vimiumHelpDialogFooter * { font-size:10px; }
+    #vimiumHelpDialogFooter .toggleAdvancedCommands {
+      position: absolute;
+      right: 2px;
+      top: -34px;
+    }
   </style>
 
   <!-- Note that the template placeholders (e.g. "pageNavigation") will be filled in by the background
@@ -108,6 +115,8 @@
   <div class="vimiumDivider"></div>
 
   <div id="vimiumHelpDialogFooter">
+    <a href="#" class="toggleAdvancedCommands">Show advanced commands</a>
+
     <div class="vimiumColumn">
       Enjoying Vimium?
       <a href="https://chrome.google.com/extensions/detail/dbepggeogbaibhgnhhndojpepiihcmeb">Leave us
@@ -118,4 +127,29 @@
       <span>Version {{version}}</span><br/>
     </div>
   </div>
+
+  <script>
+    VimiumHelpDialog = {
+      init: function() {
+        this.dialogElement = document.getElementById("vimiumHelpDialog");
+        this.dialogElement.getElementsByClassName("toggleAdvancedCommands")[0].addEventListener("click", 
+          VimiumHelpDialog.toggleAdvancedCommands, false);
+      },
+
+      /*
+       * Advanced commands are hidden by default so they don't overwhelm new and casual users.
+       */
+      toggleAdvancedCommands: function(event) {
+        event.preventDefault();
+        var advanced = VimiumHelpDialog.dialogElement.getElementsByClassName("advanced");
+        var shouldShow = (advanced[0].style.display == "" || advanced[0].style.display == "none");
+        VimiumHelpDialog.dialogElement.getElementsByClassName("toggleAdvancedCommands")[0].innerHTML =
+            shouldShow ? "Hide advanced commands" : "Show advanced commands";
+        for (var i = 0; i < advanced.length; i++)
+          advanced[i].style.display = (shouldShow ? "table-row" : "none");
+      }
+    };
+
+    VimiumHelpDialog.init();
+  </script>
 </div>
diff --git a/vimiumFrontend.js b/vimiumFrontend.js
index 8c5f94db..7c90aec5 100644
--- a/vimiumFrontend.js
+++ b/vimiumFrontend.js
@@ -635,12 +635,18 @@ function showHelpDialog(html, fid) {
   isShowingHelpDialog = true;
   var container = document.createElement("div");
   container.id = "vimiumHelpDialogContainer";
+
+  document.body.appendChild(container);
+
   container.innerHTML = html;
+  // This is necessary because innerHTML does not evaluate javascript embedded in <script> tags.
+  var scripts = Array.prototype.slice.call(container.getElementsByTagName("script"));
+  scripts.forEach(function(script) { eval(script.text); });
+
   container.getElementsByClassName("closeButton")[0].addEventListener("click", hideHelpDialog, false);
   container.getElementsByClassName("optionsPage")[0].addEventListener("click",
       function() { chrome.extension.sendRequest({ handler: "openOptionsPageInNewTab" }); }, false);
 
-  document.body.appendChild(container);
   var dialog = document.getElementById("vimiumHelpDialog");
   dialog.style.zIndex = "99999998";
   var zoomFactor = currentZoomLevel / 100.0;
-- 
cgit v1.2.3