From f40a0e697c6d4f88bc4ccd410951339f86a609d6 Mon Sep 17 00:00:00 2001
From: Stephen Blott
Date: Sun, 29 Oct 2017 09:11:17 +0000
Subject: Fix backup link for FF and Chrome.

This makes the UI for generating an options backup the same for FF and Chrome.

We populate the *Backup* link on `mousedown`.
---
 pages/options.coffee | 11 +++--------
 pages/options.css    |  3 +++
 pages/options.html   |  3 +--
 3 files changed, 7 insertions(+), 10 deletions(-)

(limited to 'pages')

diff --git a/pages/options.coffee b/pages/options.coffee
index a6916d43..83c96339 100644
--- a/pages/options.coffee
+++ b/pages/options.coffee
@@ -333,8 +333,7 @@ document.addEventListener "DOMContentLoaded", ->
 #
 # Backup and restore. "?" is for the tests."
 DomUtils?.documentReady ->
-  $("backupButton").addEventListener "click", ->
-    document.activeElement?.blur()
+  populateBackupLinkUrl = ->
     backup = settingsVersion: bgSettings.get "settingsVersion"
     for option in Option.all
       backup[option.field] = option.readValueFromElement()
@@ -344,12 +343,8 @@ DomUtils?.documentReady ->
     url =  bgWin.URL.createObjectURL blob
     a = $ "backupLink"
     a.href = url
-    if Utils.isFirefox()
-      # On Firefox, the user has to click the link manually.
-      a.style.display = ""
-      a.textContent = "Click to download backup"
-    else
-      a.click()
+
+  $("backupLink").addEventListener "mousedown", populateBackupLinkUrl, true
 
   $("chooseFile").addEventListener "change", (event) ->
     document.activeElement?.blur()
diff --git a/pages/options.css b/pages/options.css
index 5e2a3dfc..dab342a3 100644
--- a/pages/options.css
+++ b/pages/options.css
@@ -231,3 +231,6 @@ input.pattern, input.passKeys, .exclusionHeaderText {
   white-space: nowrap;
   width: 110px;
 }
+#backupLink {
+  cursor: pointer;
+}
diff --git a/pages/options.html b/pages/options.html
index 2e170cb3..f14ac3df 100644
--- a/pages/options.html
+++ b/pages/options.html
@@ -326,8 +326,7 @@ b: http://b.com/?q=%s description
                   <div class="example">
                   </div>
                 </div>
-              <input id="backupButton" type="button" value="Create Backup" />
-              <a id="backupLink" style="display: none" download="vimium-options.json"></a>
+              <a id="backupLink" download="vimium-options.json">Click to download backup</a>
             </td>
           </tr>
           <tr>
-- 
cgit v1.2.3