Add: show current status in the UI

background/background.js

@@ -67,7 +67,8 @@ window.API_METHODS = Object.assign(window.API_METHODS || {}, {
 
   syncStart: sync.start,
   syncStop: sync.stop,
-  syncNow: sync.syncNow
+  syncNow: sync.syncNow,
+  getSyncStatus: sync.getStatus
 });
 
 // eslint-disable-next-line no-var

background/sync.js

@@ -6,7 +6,8 @@
 const sync = (() => {
   const status = {
     state: 'disconnected',
-    syncing: false
+    syncing: false,
+    currentDriveName: null
   };
   let currentDrive;
   const ctrl = dbToCloud.dbToCloud({
@@ -41,13 +42,8 @@ const sync = (() => {
     }
   });
 
-  prefs.subscribe(['sync.enabled'], (key, value) => {
-    if (value === 'none') {
-      stop().catch(console.error);
-    } else {
-      start(value).catch(console.error);
-    }
-  });
+  prefs.subscribe(['sync.enabled'], onPrefChange);
+  onPrefChange(null, prefs.get('sync.enabled'));
 
   chrome.alarms.onAlarm.addListener(info => {
     if (info.name === 'syncNow') {
@@ -62,9 +58,18 @@ const sync = (() => {
     stop,
     put: ctrl.put,
     delete: ctrl.delete,
-    syncNow
+    syncNow,
+    getStatus: () => status
   };
 
+  function onPrefChange(key, value) {
+    if (value === 'none') {
+      stop().catch(console.error);
+    } else {
+      start(value).catch(console.error);
+    }
+  }
+
   function withFinally(p, cleanup) {
     return p.then(
       result => {
@@ -115,7 +120,7 @@ const sync = (() => {
     ctrl.use(currentDrive);
     prefs.set('sync.enabled', name);
     status.state = 'connecting';
-    status.syncing = true;
+    status.currentDriveName = currentDrive.name;
     emitChange();
     return withFinally(
       ctrl.start()
@@ -130,7 +135,6 @@ const sync = (() => {
       () => {
         chrome.alarms.create('syncNow', {periodInMinutes: 30});
         status.state = 'connected';
-        status.syncing = false;
         emitChange();
       }
     );
@@ -161,6 +165,7 @@ const sync = (() => {
         currentDrive = null;
         prefs.set('sync.enabled', 'none');
         status.state = 'disconnected';
+        status.currentDriveName = null;
         emitChange();
       }
     );

options.html

@@ -151,6 +151,7 @@
           <button type="button" class="connect">Connect</button>
           <button type="button" class="disconnect">Disconnect</button>
           <button type="button" class="sync-now">Sync now</button>
+          <span class="sync-status"></span>
         </div>
       </div>
     </div>

options/options.js

@@ -80,6 +80,7 @@ document.onclick = e => {
   const connectButton = document.querySelector('.sync-options .connect');
   const disconnectButton = document.querySelector('.sync-options .disconnect');
   const syncButton = document.querySelector('.sync-options .sync-now');
+  const statusText = document.querySelector('.sync-options .sync-status');
 
   let status = {};
 
@@ -103,10 +104,15 @@ document.onclick = e => {
   cloud.addEventListener('change', updateButtons);
 
   function updateButtons() {
+    if (status.currentDriveName) {
+      cloud.value = status.currentDriveName;
+    }
     cloud.disabled = status.state !== 'disconnected';
     connectButton.disabled = status.state !== 'disconnected' || cloud.value === 'none';
     disconnectButton.disabled = status.state !== 'connected' || status.syncing;
     syncButton.disabled = status.state !== 'connected' || status.syncing;
+    statusText.textContent = status.syncing ? 'syncing...' :
+      status.state.endsWith('ing') ? status.state + '...' : status.state;
   }
 
   connectButton.addEventListener('click', e => {