Add: more detail status

options.html

@@ -138,6 +138,7 @@
     </div>
 
     <div class="block sync-options">
+      <!-- FIXME: i18n -->
       <h1>Sync to cloud</h1>
       <div class="items">
         <label>
@@ -147,11 +148,13 @@
             <option value="dropbox">Dropbox</option>
           </select>
         </label>
+        <div class="sync-status-wrapper">
+          Status: <span class="sync-status"></span>
+        </div>
         <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>
-          <span class="sync-status"></span>
         </div>
       </div>
     </div>

options/options.js

@@ -111,8 +111,22 @@ document.onclick = e => {
     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...' :
+    statusText.textContent = getStatusText();
-      status.state.endsWith('ing') ? status.state + '...' : status.state;
+  }
+
+  function getStatusText() {
+    // FIXME: i18n
+    if (status.syncing) {
+      if (status.target) {
+        const [type, change] = status.target;
+        if (type === 'syncPull') {
+          return `pulling data ${change._id}`;
+        }
+        return `pushing data ${change._id}`;
+      }
+      return 'syncing...';
+    }
+    return status.state.endsWith('ing') ? status.state + '...' : status.state;
   }
 
   connectButton.addEventListener('click', e => {