Update only help dialog contents when showing

4 files changed, 48 insertions, 30 deletions

diff --git a/background_scripts/main.coffee b/background_scripts/main.coffee
index a027154a..ad47c399 100644
--- a/background_scripts/main.coffee
+++ b/background_scripts/main.coffee
@@ -153,10 +153,7 @@ root.helpDialogHtml = (showUnboundCommands, showCommandNames, customTitle) ->
         helpDialogHtmlForCommandGroup(group, commandsToKey, Commands.availableCommands,
                                       showUnboundCommands, showCommandNames)
 
-  dialogHtml = fetchFileContents("pages/help_dialog.html")
-  for placeholder, replacementString of replacementStrings
-    dialogHtml = dialogHtml.replace "<span id=\"help-dialog-#{placeholder}\"></span>", replacementString
-  dialogHtml
+  replacementStrings
 
 #
 # Generates HTML for a given set of commands. commandGroups are defined in commands.js
diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css
index 6e262f32..f9c80abc 100644
--- a/content_scripts/vimium.css
+++ b/content_scripts/vimium.css
@@ -61,6 +61,14 @@ tr.vimiumReset {
   z-index: 2147483648;
 }
 
+thead.vimiumReset, tbody.vimiumReset {
+  display: table-header-group;
+}
+
+tbody.vimiumReset {
+  display: table-row-group;
+}
+
 /* Linkhints CSS */
 
 div.internalVimiumHintMarker {
diff --git a/content_scripts/vimium_frontend.coffee b/content_scripts/vimium_frontend.coffee
index e54c5c75..30d6e4b8 100644
--- a/content_scripts/vimium_frontend.coffee
+++ b/content_scripts/vimium_frontend.coffee
@@ -220,6 +220,7 @@ initializeOnDomReady = ->
   # We only initialize the vomnibar in the tab's main frame, because it's only ever opened there.
   Vomnibar.init() if DomUtils.isTopFrame()
   HUD.init()
+  VimiumHelpDialog.init()
 
 registerFrame = ->
   # Don't register frameset containers; focusing them is no use.
@@ -776,24 +777,28 @@ VimiumHelpDialog =
   getShowAdvancedCommands: -> Settings.get("helpDialog_showAdvancedCommands")
 
   init: ->
-    unless @container?
-      @container = DomUtils.createElement "div"
-      @container.id = "vimiumHelpDialogContainer"
-      @container.className = "vimiumReset"
+    return if @container?
+    @container = DomUtils.createElement "div"
+    @container.id = "vimiumHelpDialogContainer"
+    @container.className = "vimiumReset"
+    chrome.runtime.sendMessage {handler: "fetchFileContents", fileName: "pages/help_dialog.html"}, (html) =>
+      @container.innerHTML = html
+
+      @dialogElement = @container.querySelector "#vimiumHelpDialog"
+
+      @dialogElement.getElementsByClassName("closeButton")[0].addEventListener("click", hideHelpDialog, false)
+      @dialogElement.getElementsByClassName("optionsPage")[0].addEventListener("click", (clickEvent) ->
+          clickEvent.preventDefault()
+          chrome.runtime.sendMessage({handler: "openOptionsPageInNewTab"})
+        false)
+      @dialogElement.getElementsByClassName("toggleAdvancedCommands")[0].addEventListener("click",
+        VimiumHelpDialog.toggleAdvancedCommands, false)
 
   show: (html) ->
-    document.body.appendChild @container
-
-    @container.innerHTML = html
-    @container.getElementsByClassName("closeButton")[0].addEventListener("click", hideHelpDialog, false)
-    @container.getElementsByClassName("optionsPage")[0].addEventListener("click", (clickEvent) ->
-        clickEvent.preventDefault()
-        chrome.runtime.sendMessage({handler: "openOptionsPageInNewTab"})
-      false)
+    for placeholder, htmlString of html
+      @dialogElement.querySelector("#help-dialog-#{placeholder}").innerHTML = htmlString
 
-    @dialogElement = @container.querySelector "#VimiumHelpDialog"
-    @dialogElement.getElementsByClassName("toggleAdvancedCommands")[0].addEventListener("click",
-      VimiumHelpDialog.toggleAdvancedCommands, false)
+    document.body.appendChild @container
     @showAdvancedCommands(@getShowAdvancedCommands())
 
     # Simulating a click on the help dialog makes it the active element for scrolling.
@@ -822,7 +827,6 @@ window.showHelpDialog = (html, fid) ->
   return if (isShowingHelpDialog || !document.body || fid != frameId)
   isShowingHelpDialog = true
 
-  VimiumHelpDialog.init()
   VimiumHelpDialog.show html
 
 hideHelpDialog = (clickEvent) ->
diff --git a/pages/help_dialog.html b/pages/help_dialog.html
index 1e743899..6b05f1d7 100644
--- a/pages/help_dialog.html
+++ b/pages/help_dialog.html
@@ -12,26 +12,35 @@
   <div id="vimiumTitle" class="vimiumReset"><span class="vimiumReset" style="color:#2f508e">Vim</span>ium <span id="help-dialog-title"></span></div>
   <div class="vimiumReset vimiumColumn">
     <table class="vimiumReset">
-      <tbody class="vimiumReset">
-      <tr class="vimiumReset" ><td class="vimiumReset"></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Navigating the page</td></tr>
-      <span id="help-dialog-pageNavigation"></span>
+      <thead class="vimiumReset">
+        <tr class="vimiumReset" ><td class="vimiumReset"></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Navigating the page</td></tr>
+      </thead>
+      <tbody id="help-dialog-pageNavigation" class="vimiumReset">
       </tbody>
     </table>
   </div>
   <div class="vimiumReset vimiumColumn">
     <table class="vimiumReset" >
-      <tbody class="vimiumReset">
+      <thead class="vimiumReset">
       <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Using the vomnibar</td></tr>
-      <span id="help-dialog-vomnibarCommands"></span>
+      </thead>
+      <tbody class="vimiumReset" id="help-dialog-vomnibarCommands"></tbody>
+      <thead class="vimiumReset">
       <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Using find</td></tr>
-      <span id="help-dialog-findCommands"></span>
+      </thead>
+      <tbody class="vimiumReset" id="help-dialog-findCommands"></tbody>
+      <thead class="vimiumReset">
       <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Navigating history</td></tr>
-      <span id="help-dialog-historyNavigation"></span>
+      </thead>
+      <tbody class="vimiumReset" id="help-dialog-historyNavigation"></tbody>
+      <thead class="vimiumReset">
       <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Manipulating tabs</td></tr>
-      <span id="help-dialog-tabManipulation"></span>
+      </thead>
+      <tbody class="vimiumReset" id="help-dialog-tabManipulation"></tbody>
+      <thead class="vimiumReset">
       <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Miscellaneous</td></tr>
-      <span id="help-dialog-misc"></span>
-      </tbody>
+      </thead>
+      <tbody class="vimiumReset" id="help-dialog-misc"></tbody>
     </table>
   </div>