Merge pull request #1977 from mrmr1993/help-dialog-uicomponent

Move help dialog to a UIComponent

2 files changed, 34 insertions, 59 deletions

diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css
index c08971f2..a763b159 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 hint markers and the vomnibar. */
+  z-index: 2147483645;
+}
+
 div#vimiumHelpDialog {
   border:3px solid red;
   opacity:0.92;
@@ -153,8 +171,6 @@ div#vimiumHelpDialog {
   top:50px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px;
   overflow-y: auto;
-  /* One less than vimiumReset */
-  z-index: 2147483647;
 }
 
 div#vimiumHelpDialog a { color:blue; }
@@ -331,8 +347,8 @@ iframe.vomnibarFrame {
   border: none;
   font-family: sans-serif;
 
-  /* One less than hint markers and the help dialog. */
-  z-index: 2147483645;
+  /* One less than hint markers. */
+  z-index: 2147483646;
 }
 
 div#vimiumFlash {
diff --git a/content_scripts/vimium_frontend.coffee b/content_scripts/vimium_frontend.coffee
index bcbc3574..2897ae69 100644
--- a/content_scripts/vimium_frontend.coffee
+++ b/content_scripts/vimium_frontend.coffee
@@ -219,7 +219,6 @@ 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()
-  HelpDialog.init()
 
 registerFrame = ->
   # Don't register frameset containers; focusing them is no use.
@@ -768,73 +767,33 @@ window.enterFindMode = ->
   Marks.setPreviousPosition()
   new FindMode()
 
-window.HelpDialog =
+# If we are in the help dialog iframe, HelpDialog is already defined with the necessary functions.
+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?
 
-  show: (html) ->
-    return if HelpDialog.showing or !@isReady()
-    HelpDialog.showing = true
-    for placeholder, htmlString of html
-      @dialogElement.querySelector("#help-dialog-#{placeholder}").innerHTML = htmlString
+    @helpUI = new UIComponent "pages/help_dialog.html", "vimiumHelpDialogFrame", (event) =>
+      @hide() if event.data == "hide"
 
-    document.body.appendChild @container
-    @showAdvancedCommands(@getShowAdvancedCommands())
+  isReady: -> @helpUI?
 
-    # Simulating a click on the help dialog makes it the active element for scrolling.
-    DomUtils.simulateClick document.getElementById "vimiumHelpDialog"
+  show: (html) ->
+    @init()
+    return if @showing or !@isReady()
+    @showing = true
+    @helpUI.activate html
 
   hide: ->
-    HelpDialog.showing = false
-    @container?.parentNode?.removeChild @container
+    @showing = false
+    @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