Merge pull request #628 from mgarriott/help_bug_fixes

Help Dialog bug fixes

4 files changed, 39 insertions, 44 deletions

diff --git a/background_scripts/main.js b/background_scripts/main.js
index 6e6a3978..8e75314e 100644
--- a/background_scripts/main.js
+++ b/background_scripts/main.js
@@ -23,6 +23,7 @@ var portHandlers = {
 var sendRequestHandlers = {
   getCompletionKeys: getCompletionKeysRequest,
   getCurrentTabUrl: getCurrentTabUrl,
+  getShowAdvancedCommands: getShowAdvancedCommands,
   openUrlInNewTab: openUrlInNewTab,
   openUrlInCurrentTab: openUrlInCurrentTab,
   openOptionsPageInNewTab: openOptionsPageInNewTab,
@@ -128,6 +129,10 @@ function addExcludedUrl(url) {
   });
 }
 
+function getShowAdvancedCommands(request){
+  return Settings.get("helpDialog_showAdvancedCommands");
+}
+
 function saveHelpDialogSettings(request) {
   Settings.set("helpDialog_showAdvancedCommands", request.showAdvancedCommands);
 }
@@ -155,8 +160,6 @@ function helpDialogHtml(showUnboundCommands, showCommandNames, customTitle) {
                                       showUnboundCommands, showCommandNames));
   dialogHtml = dialogHtml.replace("{{version}}", currentVersion);
   dialogHtml = dialogHtml.replace("{{title}}", customTitle || "Help");
-  dialogHtml = dialogHtml.replace("{{showAdvancedCommands}}",
-      Settings.get("helpDialog_showAdvancedCommands"));
   return dialogHtml;
 }
 
diff --git a/content_scripts/vimium_frontend.coffee b/content_scripts/vimium_frontend.coffee
index 75092f79..9c86e808 100644
--- a/content_scripts/vimium_frontend.coffee
+++ b/content_scripts/vimium_frontend.coffee
@@ -832,7 +832,7 @@ exitFindMode = ->
   findMode = false
   HUD.hide()
 
-showHelpDialog = (html, fid) ->
+window.showHelpDialog = (html, fid) ->
   return if (isShowingHelpDialog || !document.body || fid != frameId)
   isShowingHelpDialog = true
   container = document.createElement("div")
@@ -843,13 +843,41 @@ showHelpDialog = (html, fid) ->
 
   container.innerHTML = html
   container.getElementsByClassName("closeButton")[0].addEventListener("click", hideHelpDialog, false)
+  
+  VimiumHelpDialog =
+    # This setting is pulled out of local storage. It's false by default.
+    getShowAdvancedCommands: (callback) ->
+      chrome.extension.sendRequest({ handler: "getShowAdvancedCommands"}, callback)
+
+    init: () ->
+      this.dialogElement = document.getElementById("vimiumHelpDialog")
+      this.dialogElement.getElementsByClassName("toggleAdvancedCommands")[0].addEventListener("click",
+        VimiumHelpDialog.toggleAdvancedCommands, false)
+      this.dialogElement.style.maxHeight = window.innerHeight - 80
+      this.getShowAdvancedCommands(this.showAdvancedCommands)
+
+    # 
+    # Advanced commands are hidden by default so they don't overwhelm new and casual users.
+    # 
+    toggleAdvancedCommands: (event) ->
+      event.preventDefault()
+      VimiumHelpDialog.getShowAdvancedCommands((value) ->
+        VimiumHelpDialog.showAdvancedCommands(!value)
+        chrome.extension.sendRequest({ handler: "saveHelpDialogSettings", showAdvancedCommands: !value }))
+
+    showAdvancedCommands: (visible) ->
+      VimiumHelpDialog.dialogElement.getElementsByClassName("toggleAdvancedCommands")[0].innerHTML =
+        if visible then "Hide advanced commands" else "Show advanced commands"
+      advancedEls = VimiumHelpDialog.dialogElement.getElementsByClassName("advanced")
+      for el in advancedEls
+        el.style.display = if visible then "table-row" else "none"
+
+  VimiumHelpDialog.init()
+
   container.getElementsByClassName("optionsPage")[0].addEventListener("click",
     -> chrome.extension.sendRequest({ handler: "openOptionsPageInNewTab" })
     false)
 
-  # This is necessary because innerHTML does not evaluate javascript embedded in <script> tags.
-  scripts = Array.prototype.slice.call(container.getElementsByTagName("script"))
-  scripts.forEach((script) -> eval(script.text))
 
 hideHelpDialog = (clickEvent) ->
   isShowingHelpDialog = false
diff --git a/help_dialog.html b/help_dialog.html
index 5e188406..2a69ea03 100644
--- a/help_dialog.html
+++ b/help_dialog.html
@@ -48,40 +48,4 @@
       <span class="vimiumReset">Version {{version}}</span><br/>
     </div>
   </div>
-
-  <script>
-    VimiumHelpDialog = {
-      // This setting is pulled out of local storage. It's false by default.
-      advancedCommandsVisible: {{showAdvancedCommands}},
-
-      init: function() {
-        this.dialogElement = document.getElementById("vimiumHelpDialog");
-        this.dialogElement.getElementsByClassName("toggleAdvancedCommands")[0].addEventListener("click", 
-          VimiumHelpDialog.toggleAdvancedCommands, false);
-        this.dialogElement.style.maxHeight = window.innerHeight - 80;
-        this.showAdvancedCommands(this.advancedCommandsVisible);
-      },
-
-      /*
-       * Advanced commands are hidden by default so they don't overwhelm new and casual users.
-       */
-      toggleAdvancedCommands: function(event) {
-        event.preventDefault();
-        VimiumHelpDialog.advancedCommandsVisible = !VimiumHelpDialog.advancedCommandsVisible;
-        chrome.extension.sendRequest({ handler: "saveHelpDialogSettings",
-            showAdvancedCommands: VimiumHelpDialog.advancedCommandsVisible });
-        VimiumHelpDialog.showAdvancedCommands(VimiumHelpDialog.advancedCommandsVisible);
-      },
-
-      showAdvancedCommands: function(visible) {
-        VimiumHelpDialog.dialogElement.getElementsByClassName("toggleAdvancedCommands")[0].innerHTML =
-            visible ? "Hide advanced commands" : "Show advanced commands";
-        var advanced = VimiumHelpDialog.dialogElement.getElementsByClassName("advanced");
-        for (var i = 0; i < advanced.length; i++)
-          advanced[i].style.display = (visible ? "table-row" : "none");
-      }
-    };
-
-    VimiumHelpDialog.init();
-  </script>
 </div>
diff --git a/options/options.html b/options/options.html
index 4a616328..089de394 100644
--- a/options/options.html
+++ b/options/options.html
@@ -79,7 +79,7 @@
         /* Horizontal resizing is pretty screwy-looking. */
         resize: vertical;
       }
-      table {
+      table#options{
         width: 100%;
         font-size: 14px;
         position: relative;
@@ -179,7 +179,7 @@
   <body>
     <div id="wrapper">
       <header>Vimium options</header>
-      <table>
+      <table id="options">
         <tr>
           <td class="caption">Scroll step size</td>
           <td>