Add: sync options to options page

background/background.js

@@ -1,6 +1,6 @@
 /* global download prefs openURL FIREFOX CHROME VIVALDI
   debounce URLS ignoreChromeError getTab
-  styleManager msg navigatorUtil iconUtil workerUtil contentScripts */
+  styleManager msg navigatorUtil iconUtil workerUtil contentScripts sync */
 'use strict';
 
 // eslint-disable-next-line no-var
@@ -63,7 +63,11 @@ window.API_METHODS = Object.assign(window.API_METHODS || {}, {
     return browser.runtime.openOptionsPage()
       .then(() => new Promise(resolve => setTimeout(resolve, 100)))
       .then(() => msg.broadcastExtension({method: 'optionsCustomizeHotkeys'}));
-  }
+  },
+
+  syncStart: sync.start,
+  syncStop: sync.stop,
+  syncNow: sync.syncNow
 });
 
 // eslint-disable-next-line no-var

background/sync.js

@@ -38,13 +38,7 @@ const sync = (() => {
   });
 
   prefs.initializing
-    .then(() => {
-      const provider = prefs.get('sync.enabled');
-      if (provider === 'none') {
-        return;
-      }
-      return start(provider);
-    })
+    .then(start)
     .catch(console.error);
 
   chrome.alarms.onAlarm.addListener(info => {
@@ -73,7 +67,11 @@ const sync = (() => {
     throw err;
   }
 
-  function start(name) {
+  function start() {
+    const name = prefs.get('sync.enabled');
+    if (name === 'none') {
+      return Promise.resolve();
+    }
     return (currentDrive ? stop() : Promise.resolve())
       .then(() => {
         currentDrive = getDrive(name);

options.html

@@ -137,6 +137,23 @@
       </div>
     </div>
 
+    <div class="block sync-options">
+      <h1>Sync to cloud</h1>
+      <div class="items">
+        <label>
+          <span>Cloud drive</span>
+          <select class="cloud-name">
+            <option value="dropbox">Dropbox</option>
+          </select>
+        </label>
+        <div class="actions">
+          <button type="button" class="connect">Connect</button>
+          <button type="button" class="disconnect">Disconnect</button>
+          <button type="button" class="sync-now">Sync now</button>
+        </div>
+      </div>
+    </div>
+
     <div class="block" id="advanced">
       <div class="collapsible-resizer">
         <h1 i18n-text="optionsAdvanced">

options/options.js

@@ -74,6 +74,68 @@ document.onclick = e => {
   }
 };
 
+// sync to cloud
+(() => {
+  const cloud = document.querySelector('.sync-options .cloud-name');
+  const connectButton = document.querySelector('.sync-options .connect');
+  const disconnectButton = document.querySelector('.sync-options .disconnect');
+  const syncButton = document.querySelector('.sync-options .sync-now');
+
+  // init button state
+  prefs.initializing
+    .then(() => {
+      const name = prefs.get('sync.enabled');
+      if (name === 'none') {
+        connectButton.disabled = false;
+        disconnectButton.disabled = true;
+        syncButton.disabled = true;
+      } else {
+        connectButton.disabled = true;
+        disconnectButton.disabled = false;
+        syncButton.disabled = false;
+      }
+    });
+
+  function validClick(e) {
+    return e.button === 0 && !e.ctrl && !e.alt && !e.shift;
+  }
+
+  connectButton.addEventListener('click', e => {
+    if (validClick(e)) {
+      connectButton.disabled = true;
+      prefs.set('sync.enabled', cloud.value)
+        .then(() => API.syncStart())
+        .catch(console.error)
+        .then(() => {
+          disconnectButton.disabled = false;
+        });
+    }
+  });
+
+  disconnectButton.addEventListener('click', e => {
+    if (validClick(e)) {
+      disconnectButton.disabled = true;
+      prefs.set('sync.enabled', 'none')
+        .then(() => API.syncStop())
+        .catch(console.error)
+        .then(() => {
+          connectButton.enabled = true;
+        });
+    }
+  });
+
+  syncButton.addEventListener('click', e => {
+    if (validClick(e)) {
+      syncButton.disabled = true;
+      API.syncNow()
+        .catch(console.error)
+        .then(() => {
+          syncButton.disabled = false;
+        });
+    }
+  });
+})();
+
 function checkUpdates() {
   let total = 0;
   let checked = 0;