Move help dialog into an iframe

7 files changed, 153 insertions, 103 deletions

diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css
index c08971f2..6e02933e 100644
--- a/content_scripts/vimium.css
+++ b/content_scripts/vimium.css
@@ -137,6 +137,24 @@ div.vimiumHighlightedFrame {
 
 /* Help Dialog CSS */
 
+iframe.vimiumHelpDialogFrame {
+  background-color: transparent;
+  padding: 0px;
+  overflow: hidden;
+
+  display: block;
+  position: fixed;
+  width: 100%;
+  min-width: 400px;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+  border: none;
+
+  /* One less than vimiumReset */
+  z-index: 2147483647;
+}
+
 div#vimiumHelpDialog {
   border:3px solid red;
   opacity:0.92;
diff --git a/content_scripts/vimium_frontend.coffee b/content_scripts/vimium_frontend.coffee
index bcbc3574..93b4bf34 100644
--- a/content_scripts/vimium_frontend.coffee
+++ b/content_scripts/vimium_frontend.coffee
@@ -769,72 +769,33 @@ window.enterFindMode = ->
   new FindMode()
 
 window.HelpDialog =
+  helpUI: null
   container: null
-  dialogElement: null
   showing: false
 
   # This setting is pulled out of local storage. It's false by default.
   getShowAdvancedCommands: -> Settings.get("helpDialog_showAdvancedCommands")
 
   init: ->
-    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", (clickEvent) =>
-          clickEvent.preventDefault()
-          @hide()
-        false)
-      @dialogElement.getElementsByClassName("optionsPage")[0].addEventListener("click", (clickEvent) ->
-          clickEvent.preventDefault()
-          chrome.runtime.sendMessage({handler: "openOptionsPageInNewTab"})
-        false)
-      @dialogElement.getElementsByClassName("toggleAdvancedCommands")[0].addEventListener("click",
-        HelpDialog.toggleAdvancedCommands, false)
-
-  isReady: -> document.body? and @container?
+    return if @helpUI?
+
+    @helpUI = new UIComponent "pages/help_dialog.html", "vimiumHelpDialogFrame", (event) =>
+      @helpUI.hide() if event.data == "hide"
+
+  isReady: -> true
 
   show: (html) ->
     return if HelpDialog.showing or !@isReady()
     HelpDialog.showing = true
-    for placeholder, htmlString of html
-      @dialogElement.querySelector("#help-dialog-#{placeholder}").innerHTML = htmlString
-
-    document.body.appendChild @container
-    @showAdvancedCommands(@getShowAdvancedCommands())
-
-    # Simulating a click on the help dialog makes it the active element for scrolling.
-    DomUtils.simulateClick document.getElementById "vimiumHelpDialog"
+    @helpUI.activate html
 
   hide: ->
     HelpDialog.showing = false
-    @container?.parentNode?.removeChild @container
+    @helpUI.hide()
 
   toggle: (html) ->
     if @showing then @hide() else @show html
 
-  #
-  # Advanced commands are hidden by default so they don't overwhelm new and casual users.
-  #
-  toggleAdvancedCommands: (event) ->
-    event.preventDefault()
-    showAdvanced = HelpDialog.getShowAdvancedCommands()
-    HelpDialog.showAdvancedCommands(!showAdvanced)
-    Settings.set("helpDialog_showAdvancedCommands", !showAdvanced)
-
-  showAdvancedCommands: (visible) ->
-    HelpDialog.dialogElement.getElementsByClassName("toggleAdvancedCommands")[0].innerHTML =
-      if visible then "Hide advanced commands" else "Show advanced commands"
-
-    # Add/remove the showAdvanced class to show/hide advanced commands.
-    addOrRemove = if visible then "add" else "remove"
-    HelpDialog.dialogElement.classList[addOrRemove] "showAdvanced"
-
 initializePreDomReady()
 DomUtils.documentReady initializeOnDomReady
 DomUtils.documentReady registerFrame
diff --git a/lib/settings.coffee b/lib/settings.coffee
index dd1aa377..c127343d 100644
--- a/lib/settings.coffee
+++ b/lib/settings.coffee
@@ -18,8 +18,10 @@ Settings =
   onLoadedCallbacks: []
 
   init: ->
-    if Utils.isExtensionPage()
+    if Utils.isExtensionPage() and (try localStorage)
       # On extension pages, we use localStorage (or a copy of it) as the cache.
+      # For UIComponents (or other content of ours in an iframe within a regular page), we can't access
+      # localStorage, so we check for this too.
       @cache = if Utils.isBackgroundPage() then localStorage else extend {}, localStorage
       @onLoaded()
 
diff --git a/lib/utils.coffee b/lib/utils.coffee
index c255102e..4726739b 100644
--- a/lib/utils.coffee
+++ b/lib/utils.coffee
@@ -7,7 +7,7 @@ Utils =
   isExtensionPage: -> document.location?.origin + "/" == chrome.extension.getURL ""
 
   # Returns true whenever the current page is the extension's background page.
-  isBackgroundPage: -> @isExtensionPage() and chrome.extension.getBackgroundPage() == window
+  isBackgroundPage: -> @isExtensionPage() and try chrome.extension.getBackgroundPage() == window
 
   # Takes a dot-notation object string and call the function
   # that it points to with the correct value for 'this'.
diff --git a/manifest.json b/manifest.json
index 7fe13b13..883abd37 100644
--- a/manifest.json
+++ b/manifest.json
@@ -74,6 +74,7 @@
     "pages/vomnibar.html",
     "content_scripts/vimium.css",
     "pages/hud.html",
+    "pages/help_dialog.html",
     "pages/completion_engines.html"
   ]
 }
diff --git a/pages/help_dialog.coffee b/pages/help_dialog.coffee
new file mode 100644
index 00000000..5bff5e33
--- /dev/null
+++ b/pages/help_dialog.coffee
@@ -0,0 +1,56 @@
+HelpDialog =
+  dialogElement: null
+
+  # This setting is pulled out of local storage. It's false by default.
+  getShowAdvancedCommands: -> Settings.get("helpDialog_showAdvancedCommands")
+
+  init: ->
+    return if @dialogElement?
+    @dialogElement = document.getElementById "vimiumHelpDialog"
+
+    @dialogElement.getElementsByClassName("closeButton")[0].addEventListener("click", (clickEvent) =>
+        clickEvent.preventDefault()
+        @hide()
+      false)
+    @dialogElement.getElementsByClassName("optionsPage")[0].addEventListener("click", (clickEvent) ->
+        clickEvent.preventDefault()
+        chrome.runtime.sendMessage({handler: "openOptionsPageInNewTab"})
+      false)
+    @dialogElement.getElementsByClassName("toggleAdvancedCommands")[0].addEventListener("click",
+      HelpDialog.toggleAdvancedCommands, false)
+
+  show: (html) ->
+    for placeholder, htmlString of html
+      @dialogElement.querySelector("#help-dialog-#{placeholder}").innerHTML = htmlString
+
+    @showAdvancedCommands(@getShowAdvancedCommands())
+
+    # Simulating a click on the help dialog makes it the active element for scrolling.
+    DomUtils.simulateClick document.getElementById "vimiumHelpDialog"
+
+  hide: -> UIComponentServer.postMessage "hide"
+
+  #
+  # Advanced commands are hidden by default so they don't overwhelm new and casual users.
+  #
+  toggleAdvancedCommands: (event) ->
+    event.preventDefault()
+    showAdvanced = HelpDialog.getShowAdvancedCommands()
+    HelpDialog.showAdvancedCommands(!showAdvanced)
+    Settings.set("helpDialog_showAdvancedCommands", !showAdvanced)
+
+  showAdvancedCommands: (visible) ->
+    HelpDialog.dialogElement.getElementsByClassName("toggleAdvancedCommands")[0].innerHTML =
+      if visible then "Hide advanced commands" else "Show advanced commands"
+
+    # Add/remove the showAdvanced class to show/hide advanced commands.
+    addOrRemove = if visible then "add" else "remove"
+    HelpDialog.dialogElement.classList[addOrRemove] "showAdvanced"
+
+UIComponentServer.registerHandler (event) ->
+  return if event.data == "hide"
+  HelpDialog.init()
+  HelpDialog.show event.data
+
+root = exports ? window
+root.HelpDialog = HelpDialog
diff --git a/pages/help_dialog.html b/pages/help_dialog.html
index 6b05f1d7..b51aef9c 100644
--- a/pages/help_dialog.html
+++ b/pages/help_dialog.html
@@ -1,3 +1,13 @@
+<html>
+  <head>
+    <title>Vimium Help</title>
+    <script type="text/javascript" src="content_script_loader.js"></script>
+    <script type="text/javascript" src="ui_component_server.js"></script>
+    <script type="text/javascript" src="help_dialog.js"></script>
+    <link rel="stylesheet" type="text/css" href="../content_scripts/vimium.css" />
+  </head>
+
+  <body>
 <!--
   This is shown when typing "?". This HTML is loaded by the background page and then populated with the
   latest keybindings information before displaying.
@@ -5,60 +15,62 @@
 
   <!-- Note that the template placeholders (e.g. "pageNavigation") will be filled in by the background
        page with the up-to-date key bindings when the dialog is shown. -->
-  <div id="vimiumHelpDialog" class="vimiumReset">
-  <a class="vimiumReset optionsPage" href="#">Options</a>
-  <a class="vimiumReset wikiPage" href="https://github.com/philc/vimium/wiki" target="_blank">Wiki</a>
-  <a class="vimiumReset closeButton" href="#">&times;</a>
-  <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">
-      <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" >
-      <thead class="vimiumReset">
-      <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Using the vomnibar</td></tr>
-      </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>
-      </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>
-      </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>
-      </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>
-      </thead>
-      <tbody class="vimiumReset" id="help-dialog-misc"></tbody>
-    </table>
-  </div>
+    <div id="vimiumHelpDialog" class="vimiumReset">
+      <a class="vimiumReset optionsPage" href="#">Options</a>
+      <a class="vimiumReset wikiPage" href="https://github.com/philc/vimium/wiki" target="_blank">Wiki</a>
+      <a class="vimiumReset closeButton" href="#">&times;</a>
+      <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">
+          <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" >
+          <thead class="vimiumReset">
+          <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Using the vomnibar</td></tr>
+          </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>
+          </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>
+          </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>
+          </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>
+          </thead>
+          <tbody class="vimiumReset" id="help-dialog-misc"></tbody>
+        </table>
+      </div>
 
-  <br clear="both"/>
-  <div class="vimiumReset vimiumDivider"></div>
+      <br clear="both"/>
+      <div class="vimiumReset vimiumDivider"></div>
 
-  <div id="vimiumHelpDialogFooter" class="vimiumReset">
-    <a href="#" class="vimiumReset toggleAdvancedCommands">Show advanced commands</a>
+      <div id="vimiumHelpDialogFooter" class="vimiumReset">
+        <a href="#" class="vimiumReset toggleAdvancedCommands">Show advanced commands</a>
 
-    <div class="vimiumReset vimiumColumn">
-      Enjoying Vimium?
-      <a class="vimiumReset" href="https://chrome.google.com/extensions/detail/dbepggeogbaibhgnhhndojpepiihcmeb">Leave us
-          feedback</a>.<br/>
-      Found a bug? <a class="vimiumReset" href="http://github.com/philc/vimium/issues">Report it here</a>.
-    </div>
-    <div class="vimiumReset vimiumColumn" style="text-align:right">
-      <span class="vimiumReset">Version <span id="help-dialog-version"></span></span><br/>
-      <a href="https://github.com/philc/vimium#release-notes" class="vimiumReset">What's new?</a>
+        <div class="vimiumReset vimiumColumn">
+          Enjoying Vimium?
+          <a class="vimiumReset" href="https://chrome.google.com/extensions/detail/dbepggeogbaibhgnhhndojpepiihcmeb">Leave us
+              feedback</a>.<br/>
+          Found a bug? <a class="vimiumReset" href="http://github.com/philc/vimium/issues">Report it here</a>.
+        </div>
+        <div class="vimiumReset vimiumColumn" style="text-align:right">
+          <span class="vimiumReset">Version <span id="help-dialog-version"></span></span><br/>
+          <a href="https://github.com/philc/vimium#release-notes" class="vimiumReset">What's new?</a>
+        </div>
+      </div>
     </div>
-  </div>
-</div>
+  </body>
+</html>