diff options
| -rw-r--r-- | content_scripts/vimium.css | 24 | ||||
| -rw-r--r-- | content_scripts/vimium_frontend.coffee | 69 | ||||
| -rw-r--r-- | lib/settings.coffee | 4 | ||||
| -rw-r--r-- | lib/utils.coffee | 8 | ||||
| -rw-r--r-- | manifest.json | 1 | ||||
| -rw-r--r-- | pages/help_dialog.coffee | 72 | ||||
| -rw-r--r-- | pages/help_dialog.html | 118 | ||||
| -rw-r--r-- | pages/options.coffee | 2 |
8 files changed, 179 insertions, 119 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 diff --git a/lib/settings.coffee b/lib/settings.coffee index dd1aa377..8b7f6062 100644 --- a/lib/settings.coffee +++ b/lib/settings.coffee @@ -18,8 +18,10 @@ Settings = onLoadedCallbacks: [] init: -> - if Utils.isExtensionPage() + if Utils.isExtensionPage() and Utils.isExtensionPage window.top # 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 that the top level frame is also an extension page. @cache = if Utils.isBackgroundPage() then localStorage else extend {}, localStorage @onLoaded() diff --git a/lib/utils.coffee b/lib/utils.coffee index c255102e..50d8c7dd 100644 --- a/lib/utils.coffee +++ b/lib/utils.coffee @@ -2,12 +2,12 @@ Utils = getCurrentVersion: -> chrome.runtime.getManifest().version - # Returns true whenever the current page is from the extension's origin (and thus can access the - # extension's localStorage). - isExtensionPage: -> document.location?.origin + "/" == chrome.extension.getURL "" + # Returns true whenever the current page (or the page supplied as an argument) is from the extension's + # origin (and thus can access the extension's localStorage). + isExtensionPage: (win = window) -> try win.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 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 97599bbb..f66319a7 100644 --- a/manifest.json +++ b/manifest.json @@ -75,6 +75,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..e2f5220f --- /dev/null +++ b/pages/help_dialog.coffee @@ -0,0 +1,72 @@ +# This overrides the HelpDialog implementation in vimium_frontend.coffee, which prevents us from being able +# to spawn a help dialog within the help dialog UIComponent. As such, we need to provide all the properties +# that we expect on the normal HelpDialog implementation. +# +# NOTE(mrmr1993): In the future, we can move to a single help dialog UIComponent per tab (ie. in the +# top-level frame), and then we don't need to be concerned about nested help dialog frames. +HelpDialog = + dialogElement: null + showing: true + + # 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) + + document.documentElement.addEventListener "click", (event) => + @hide() unless @dialogElement.contains event.target + , false + + isReady: -> true + + 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" + + 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" + +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="#">×</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="#">×</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> diff --git a/pages/options.coffee b/pages/options.coffee index d3616bbd..aaa8970a 100644 --- a/pages/options.coffee +++ b/pages/options.coffee @@ -232,8 +232,6 @@ initOptionsPage = -> activateHelpDialog = -> HelpDialog.show chrome.extension.getBackgroundPage().helpDialogHtml(true, true, "Command Listing"), frameId - # Prevent the "show help" link from retaining the focus when clicked. - document.activeElement.blur() saveOptions = -> Option.saveOptions() |