Bug 1784055 - Add error state for when sync is disconnected r=sfoster,fluent-reviewers,flod

* Add new error state strings and logic
* Add new test case

Differential Revision: https://phabricator.services.mozilla.com/D154675

browser/components/firefoxview/firefox-view-tabs-setup-manager.sys.mjs

@@ -63,6 +63,7 @@ export const TabsSetupFlowManager = new (class {
       lazy.gNetworkLinkService.linkStatusKnown &&
       lazy.gNetworkLinkService.isLinkUp;
     this.syncIsWorking = true;
+    this.syncIsConnected = lazy.UIState.get().syncEnabled;
 
     this.registerSetupState({
       uiStateIndex: 0,
@@ -71,7 +72,8 @@ export const TabsSetupFlowManager = new (class {
         return (
           this.networkIsOnline &&
           this.syncIsWorking &&
-          !Services.prefs.prefIsLocked(FXA_ENABLED)
+          !Services.prefs.prefIsLocked(FXA_ENABLED) &&
+          this.syncIsConnected
         );
       },
     });
@@ -182,6 +184,7 @@ export const TabsSetupFlowManager = new (class {
       "network-offline": !this.networkIsOnline,
       "sync-error": !this.syncIsWorking,
       "fxa-admin-disabled": Services.prefs.prefIsLocked(FXA_ENABLED),
+      "sync-disconnected": !this.syncIsConnected,
     };
 
     for (let [type, value] of Object.entries(errorStates)) {
@@ -268,6 +271,7 @@ export const TabsSetupFlowManager = new (class {
     switch (topic) {
       case lazy.UIState.ON_UPDATE:
         this.logger.debug("Handling UIState update");
+        this.syncIsConnected = lazy.UIState.get().syncEnabled;
         this.maybeUpdateUI();
         break;
       case TOPIC_DEVICELIST_UPDATED:
@@ -409,7 +413,7 @@ export const TabsSetupFlowManager = new (class {
   }
 
   openSyncPreferences(window) {
-    const url = "about:preferences?action=pair#sync";
+    const url = "about:preferences#sync";
     openTabInWindow(window, url, true);
   }
 

browser/components/firefoxview/tab-pickup-container.mjs

@@ -9,6 +9,7 @@ import { toggleContainer } from "./helpers.mjs";
 const { TabsSetupFlowManager } = ChromeUtils.importESModule(
   "resource:///modules/firefox-view-tabs-setup-manager.sys.mjs"
 );
+
 const TOPIC_SETUPSTATE_CHANGED = "firefox-view.setupstate.changed";
 
 class TabPickupContainer extends HTMLElement {
@@ -66,7 +67,8 @@ class TabPickupContainer extends HTMLElement {
           TabsSetupFlowManager.openFxASignup(event.target.ownerGlobal);
           break;
         }
-        case "view2-primary-action": {
+        case "view2-primary-action":
+        case "mobile-promo-primary-action": {
           TabsSetupFlowManager.openFxAPairDevice(event.target.ownerGlobal);
           break;
         }
@@ -78,14 +80,13 @@ class TabPickupContainer extends HTMLElement {
           TabsSetupFlowManager.dismissMobilePromo(event.target);
           break;
         }
-        case "mobile-promo-primary-action": {
-          TabsSetupFlowManager.openFxAPairDevice(event.target.ownerGlobal);
-          break;
-        }
         case "mobile-confirmation-dismiss": {
           TabsSetupFlowManager.dismissMobileConfirmation(event.target);
           break;
         }
+        case "view0-sync-disconnected-action":
+          TabsSetupFlowManager.openSyncPreferences(event.target.ownerGlobal);
+          break;
       }
     }
     // Returning to fxview seems like a likely time for a device check

browser/components/firefoxview/tests/browser/browser_setup_state.js

@@ -35,13 +35,17 @@ async function touchLastTabFetch() {
   await TestUtils.waitForTick();
 }
 
-function setupMocks({ fxaDevices = null, state = UIState.STATUS_SIGNED_IN }) {
+function setupMocks({
+  fxaDevices = null,
+  state = UIState.STATUS_SIGNED_IN,
+  syncEnabled = true,
+}) {
   const sandbox = sinon.createSandbox();
   gMockFxaDevices = fxaDevices;
   sandbox.stub(fxAccounts.device, "recentDeviceList").get(() => fxaDevices);
   sandbox.stub(UIState, "get").returns({
     status: state,
-    syncEnabled: true,
+    syncEnabled,
   });
 
   sandbox
@@ -859,3 +863,39 @@ add_task(async function test_sync_error() {
   });
   await tearDown(sandbox);
 });
+
+add_task(async function test_sync_disconnected_error() {
+  const sandbox = setupMocks({
+    state: UIState.STATUS_NOT_CONFIGURED,
+    syncEnabled: false,
+  });
+  await withFirefoxView({}, async browser => {
+    const { document } = browser.contentWindow;
+
+    // triggered when user disconnects sync in about:preferences
+    Services.obs.notifyObservers(null, UIState.ON_UPDATE);
+
+    await waitForElementVisible(browser, "#tabpickup-steps", true);
+    await waitForVisibleStep(browser, {
+      expectedVisible: "#tabpickup-steps-view0",
+    });
+
+    const errorStateHeader = document.querySelector(
+      "#tabpickup-steps-view0-header"
+    );
+
+    await BrowserTestUtils.waitForMutationCondition(
+      errorStateHeader,
+      { childList: true },
+      () => errorStateHeader.textContent.includes("Turn on syncing to continue")
+    );
+
+    ok(
+      errorStateHeader
+        .getAttribute("data-l10n-id")
+        .includes("sync-disconnected"),
+      "Correct message should show when sync's been disconnected error"
+    );
+  });
+  await tearDown(sandbox);
+});

browser/locales/en-US/browser/firefoxView.ftl

@@ -54,6 +54,10 @@ firefoxview-tabpickup-sync-error-header = We’re having trouble syncing
 firefoxview-tabpickup-generic-sync-error-description = { -brand-short-name } can’t reach the syncing service right now. Try again in a few moments.
 firefoxview-tabpickup-sync-error-primarybutton = Try again
 
+firefoxview-tabpickup-sync-disconnected-header = Turn on syncing to continue
+firefoxview-tabpickup-sync-disconnected-description = To grab your tabs, you’ll need to allow syncing in { -brand-short-name }.
+firefoxview-tabpickup-sync-disconnected-primarybutton = Turn on sync in settings
+
 firefoxview-tabpickup-syncing = Sit tight while your tabs sync. It’ll be just a moment.
 
 firefoxview-mobile-promo-header = Grab tabs from your phone or tablet