Add backup button draft

Needs to be embedded into iframe or otherwise the download attribute on the a element is ignored from Firefox due to CORS restrictions Part of #86
stoically · Mar 25, 2018 · 2048e2d · 2048e2d
1 parent 902649d
commit 2048e2d
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 2 deletions.
diff --git a/src/ui/backup.html b/src/ui/backup.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="semantic/semantic.min.css">
+</head>
+<body>
+  <script src="backup.js"></script>
+  <div>
+    <button id="backupToFile" class="ui button">Back up to file</button>
+  </div>
+</body>
+</html>
diff --git a/src/ui/backup.js b/src/ui/backup.js
@@ -0,0 +1,10 @@
+document.addEventListener('DOMContentLoaded', () => {
+  document.getElementById('backupToFile').addEventListener('click', async () => {
+    const storage = await browser.storage.local.get('preferences');
+    const a = document.createElement('a');
+    a.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(storage.preferences, null, 2));
+    a.setAttribute('download', 'preferences.txt');
+    a.setAttribute('type', 'text/plain');
+    a.dispatchEvent(new MouseEvent('click'));
+  });
+});
diff --git a/src/ui/options.html b/src/ui/options.html
@@ -8,6 +8,12 @@
     <link rel="stylesheet" href="semantic/semantic.min.css">
     <style>
       body { padding: 50px; }
+      iframe {
+        margin: 0;
+        border: 0;
+        width: 100%;
+        height: 50px;
+      }
       .hidden { display: none; }
     </style>
   </head>
@@ -109,6 +115,7 @@
           <div class="field">
             <button id="saveContainerPreferences" class="ui button primary">Save</button>
           </div>
+          <iframe src="backup.html"></iframe>
         </form>
       </div>
       <div class="ui tab segment" data-tab="isolation">

diff --git a/src/ui/shared.js b/src/ui/shared.js
@@ -347,5 +347,4 @@ window.requestNotificationsPermissions = async () => {
     $('#notifications')
       .checkbox('uncheck');
   }
-};
-
+};
-Original file line number
+Diff line change
@@ Expand Up / @@ -347,5 +347,4 @@ window.requestNotificationsPermissions = async () => { @@
         $('#notifications')
           .checkbox('uncheck');
       }
-    };
+    };