Add: better relog message in options page

_locales/en/messages.json

@@ -1141,6 +1141,9 @@
   "optionsSyncStatusDisconnected": {
     "message": "Disconnected"
   },
+  "optionsSyncStatusRelogin": {
+    "message": "Session is expired. Please login again."
+  },
   "paginationCurrent": {
     "message": "Current page",
     "description": "Tooltip for the current page index in search results"

background/sync-manager.js

@@ -88,6 +88,7 @@ const syncMan = (() => {
     async start(name, fromPref = false) {
       if (ready.then) await ready;
       if (!ctrl) await initController();
+
       if (currentDrive) return;
       currentDrive = getDrive(name);
       ctrl.use(currentDrive);
@@ -96,7 +97,9 @@ const syncMan = (() => {
       status.currentDriveName = currentDrive.name;
       emitStatusChange();
 
-      if (!fromPref) {
+      if (fromPref) {
+        status.login = true;
+      } else {
         try {
           await syncMan.login(name);
         } catch (err) {
@@ -108,6 +111,8 @@ const syncMan = (() => {
         }
       }
 
+      await ctrl.init();
+
       await syncMan.syncNow(name);
       prefs.set('sync.enabled', name);
       status.state = STATES.connected;
@@ -136,9 +141,11 @@ const syncMan = (() => {
 
     async syncNow() {
       if (ready.then) await ready;
-      if (!currentDrive || !status.login) throw new Error('cannot sync when disconnected');
+      if (!currentDrive || !status.login) {
+        console.warn('cannot sync when disconnected');
+        return;
+      }
       try {
-        await ctrl.init();
         await ctrl.syncNow();
         status.errorMessage = null;
         lastError = null;
@@ -198,20 +205,22 @@ const syncMan = (() => {
   function emitStatusChange() {
     msg.broadcastExtension({method: 'syncStatusUpdate', status});
 
-    if (status.state !== STATES.connected || !lastError || isNetworkError(lastError)) {
+    if (status.state !== STATES.connected) {
       iconMan.overrideBadge({});
-    } else if (isGrantError(lastError)) {
+    } else if (!status.login) {
       iconMan.overrideBadge({
         text: 'x',
         color: '#F00',
         title: chrome.i18n.getMessage('syncErrorRelogin'),
       });
-    } else {
+    } else if (lastError && !isNetworkError(lastError)) {
       iconMan.overrideBadge({
         text: 'x',
         color: '#F00',
         title: chrome.i18n.getMessage('syncError'),
       });
+    } else {
+      iconMan.overrideBadge({});
     }
   }
 

options/options.js

@@ -147,7 +147,7 @@ document.onclick = e => {
       [elCloud, isDisconnected],
       [elStart, isDisconnected && elCloud.value !== 'none'],
       [elStop, isConnected && !status.syncing],
-      [elSyncNow, isConnected && !status.syncing],
+      [elSyncNow, isConnected && !status.syncing && status.login],
     ]) {
       el.disabled = !enable;
     }
@@ -156,19 +156,22 @@ document.onclick = e => {
   }
 
   function getStatusText() {
-    let res;
     if (status.syncing) {
       const {phase, loaded, total} = status.progress || {};
-      res = phase
+      return phase
         ? t(`optionsSyncStatus${capitalize(phase)}`, [loaded + 1, total], false) ||
           `${phase} ${loaded} / ${total}`
         : t('optionsSyncStatusSyncing');
-    } else {
-      const {state, errorMessage, STATES} = status;
-      res = (state === STATES.connected || state === STATES.disconnected) && errorMessage ||
-        t(`optionsSyncStatus${capitalize(state)}`, null, false) || state;
     }
-    return res;
+
+    const {state, errorMessage, STATES} = status;
+    if (errorMessage && (state === STATES.connected || state === STATES.disconnected)) {
+      return errorMessage;
+    }
+    if (state === STATES.connected && !status.login) {
+      return t('optionsSyncStatusRelogin');
+    }
+    return t(`optionsSyncStatus${capitalize(state)}`, null, false) || state;
   }
 })();