Show/hide advanced commands with CSS class, other tidying

2 files changed, 14 insertions, 10 deletions

diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css
index f9c80abc..c08971f2 100644
--- a/content_scripts/vimium.css
+++ b/content_scripts/vimium.css
@@ -203,7 +203,8 @@ div#vimiumHelpDialog td.vimiumHelpSectionTitle {
 }
 div#vimiumHelpDialog div.commandName { font-family:"courier new"; }
 /* Advanced commands are hidden by default until you show them. */
-div#vimiumHelpDialog div.advanced { display: none; }
+div#vimiumHelpDialog tr.advanced { display: none; }
+div#vimiumHelpDialog.showAdvanced tr.advanced { display: table-row; }
 div#vimiumHelpDialog div.advanced td:nth-of-type(3) { color: #555; }
 div#vimiumHelpDialog a.closeButton {
   position:absolute;
diff --git a/content_scripts/vimium_frontend.coffee b/content_scripts/vimium_frontend.coffee
index 30d6e4b8..126a07f1 100644
--- a/content_scripts/vimium_frontend.coffee
+++ b/content_scripts/vimium_frontend.coffee
@@ -794,7 +794,10 @@ VimiumHelpDialog =
       @dialogElement.getElementsByClassName("toggleAdvancedCommands")[0].addEventListener("click",
         VimiumHelpDialog.toggleAdvancedCommands, false)
 
+  isReady: -> document.body? and @container?
+
   show: (html) ->
+    isShowingHelpDialog = true
     for placeholder, htmlString of html
       @dialogElement.querySelector("#help-dialog-#{placeholder}").innerHTML = htmlString
 
@@ -805,6 +808,7 @@ VimiumHelpDialog =
     DomUtils.simulateClick document.getElementById "vimiumHelpDialog"
 
   hide: ->
+    isShowingHelpDialog = false
     @container?.parentNode?.removeChild @container
 
   #
@@ -819,26 +823,25 @@ VimiumHelpDialog =
   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"
 
-window.showHelpDialog = (html, fid) ->
-  return if (isShowingHelpDialog || !document.body || fid != frameId)
-  isShowingHelpDialog = true
+    # Add/remove the showAdvanced class to show/hide advanced commands.
+    addOrRemove = if visible then "add" else "remove"
+    VimiumHelpDialog.dialogElement.classList[addOrRemove] "showAdvanced"
 
+window.showHelpDialog = (html) ->
+  return if isShowingHelpDialog or !VimiumHelpDialog.isReady()
   VimiumHelpDialog.show html
 
 hideHelpDialog = (clickEvent) ->
-  isShowingHelpDialog = false
   VimiumHelpDialog.hide()
   clickEvent?.preventDefault()
 
 toggleHelpDialog = (html, fid) ->
-  if (isShowingHelpDialog)
+  return unless fid == frameId
+  if isShowingHelpDialog
     hideHelpDialog()
   else
-    showHelpDialog(html, fid)
+    showHelpDialog html
 
 initializePreDomReady()
 DomUtils.documentReady initializeOnDomReady