Add backup/restore for Vimium options.

See the *very* bottom of the options page (below advanced settings).

Clicking "Backup" creates a JSON file.

Selecting a backup populates the options inputs, the user then clicks *Save Changes* to confirm.

2 files changed, 65 insertions, 0 deletions

diff --git a/pages/options.coffee b/pages/options.coffee
index 035dd403..0038c3f9 100644
--- a/pages/options.coffee
+++ b/pages/options.coffee
@@ -42,6 +42,8 @@ class Option
   # Static method.
   @saveOptions: ->
     Option.all.map (option) -> option.save()
+    # We need to apply migrations in case we are restoring an old backup.
+    bgSettings.applyMigrations()
 
   # Abstract method; only implemented in sub-classes.
   # Populate the option's DOM element (@element) with the setting's current value.
@@ -323,6 +325,43 @@ document.addEventListener "DOMContentLoaded", ->
 
   xhr.send()
 
+#
+# Backup and restore. "?" is for the tests."
+DomUtils?.documentReady ->
+  $("backupButton").addEventListener "click", ->
+    document.activeElement?.blur()
+    backup = {}
+    for option in Option.all
+      backup[option.field] = option.readValueFromElement()
+    blob = new Blob [ JSON.stringify backup ]
+    url =  window.URL.createObjectURL blob
+    a = document.createElement "a"
+    document.body.appendChild a
+    a.style = "display: none"
+    a.href = url
+    a.download = "vimium-options-#{new Date().toISOString().split("T")[0]}.json"
+    a.click()
+    document.body.removeChild a
+
+  $("chooseFile").addEventListener "change", (event) ->
+    document.activeElement?.blur()
+    files = event.target.files
+    if files.length == 1
+      file = files[0]
+      reader = new FileReader
+      reader.readAsText file
+      reader.onload = (event) ->
+        try
+          backup = JSON.parse reader.result
+        catch
+          alert "Failed to parse Vimium backup."
+          return
+
+        for option in Option.all
+          if option.field of backup
+            option.populateElement backup[option.field]
+            option.onUpdated()
+
 # Exported for tests.
 root = exports ? window
 extend root, {Options, isVimiumOptionsPage: true}
diff --git a/pages/options.html b/pages/options.html
index 46307b6f..943fc95c 100644
--- a/pages/options.html
+++ b/pages/options.html
@@ -315,6 +315,32 @@ b: http://b.com/?q=%s description
           </tr>
           -->
         </tbody>
+        <tbody id='backupAndRestor'>
+          <tr>
+            <td colspan="2"><header>Backup and Restore</header></td>
+          </tr>
+          <tr>
+            <td class="caption">Backup</td>
+            <td>
+                <div class="help">
+                  <div class="example">
+                  </div>
+                </div>
+              <input id="backupButton" type="button" value="Create Backup" />
+            </td>
+          </tr>
+          <tr>
+            <td class="caption">Restore</td>
+            <td>
+                <div class="help">
+                  <div class="example">
+                    Choose file, then click <i>Save Changes</i>, below, to confirm restore.
+                  </div>
+                </div>
+              <input id="chooseFile" type="file" accept=".json" style="width: 200px;"/>
+            </td>
+          </tr>
+        </tbody>
       </table>
     </div>