Move help dialog into an iframe

2 files changed, 27 insertions, 48 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