Open FxA/Sync Prefs (#101)

Author: linuxwolf

src/experiments/sync/api.js

@@ -16,22 +16,22 @@ ChromeUtils.defineModuleGetter(this, "UIState",
 ChromeUtils.defineModuleGetter(this, "ObjectUtils",
                                "resource://gre/modules/ObjectUtils.jsm");
 
+// STATUS_LOGIN_FAILED means the password was changed on another device, and the
+// user needs to log in again.
+// STATUS_NOT_VERIFIED means the user has logged in with an unverified email.
+// In both cases, the user needs to take action elsewhere in Firefox.
+const FxAErrors = [UIState.STATUS_LOGIN_FAILED, UIState.STATUS_NOT_VERIFIED];
+
 const getProfileInfo = async () => {
   const uiState = UIState.get();
-  // STATUS_LOGIN_FAILED means the password was changed on another device, and the
-  // user needs to log in again.
-  // STATUS_NOT_VERIFIED means the user has logged in with an unverified email.
-  // In both cases, the user needs to take action elsewhere in Firefox.
-  const errors = [UIState.STATUS_LOGIN_FAILED, UIState.STATUS_NOT_VERIFIED];
-
   let profileInfo;
 
   // STATUS_NOT_CONFIGURED means the user is not logged in.
   if (uiState.status === UIState.STATUS_NOT_CONFIGURED) {
     profileInfo = null;
   } else { // UIState.STATUS_SIGNED_IN, the user is logged in and verified.
     const fxa = await UIState._internal.fxAccounts.getSignedInUser();
-    const isErrorStatus = errors.includes(uiState.status);
+    const isErrorStatus = FxAErrors.includes(uiState.status);
 
     profileInfo = {
       id: fxa && fxa.uid,
@@ -45,6 +45,16 @@ const getProfileInfo = async () => {
   return profileInfo;
 };
 
+const openPrefs = async (origin, entrypoint) => {
+  const win = Services.wm.getMostRecentWindow("navigator:browser");
+
+  win.openPreferences("paneSync", { origin, urlParams: { entrypoint } });
+};
+const openSignIn = async (entrypoint) => {
+  // TODO: be smarter like browser?
+  return openPrefs("fxaError", entrypoint);
+};
+
 this.sync = class extends ExtensionAPI {
   getAPI(context) {
     const EventManager = ExtensionCommon.EventManager;
@@ -58,6 +68,21 @@ this.sync = class extends ExtensionAPI {
             const profileInfo = await getProfileInfo();
             return profileInfo;
           },
+
+          async openPreferences(entrypoint) {
+            const uiState = UIState.get();
+
+            switch (uiState.status) {
+              case UIState.STATUS_SIGNED_IN:
+                return openPrefs("fxaSignedin", entrypoint);
+              case UIState.STATUS_NOT_VERIFIED:
+                return openPrefs("fxaError", entrypoint);
+              case UIState.STATUS_LOGIN_FAILED:
+                return openSignIn(entrypoint);
+            }
+
+            return openPrefs("fxa", entrypoint);
+          },
           onUserProfileChanged: new EventManager(context, "sync.onUserProfileChanged", async (fire) => {
             let oldValue = await getProfileInfo();
             const callback = (value) => {

src/experiments/sync/schema.json

@@ -88,6 +88,17 @@
         "description": "Returns a Promise that resolves to the UserProfileInfo, if the user is logged in, or null otherwise.",
         "async": true,
         "parameters": []
+      },
+      {
+        "name": "openPreferences",
+        "type": "function",
+        "description": "Opens the Profile/Sync management page.",
+        "async": true,
+        "parameters": [{
+          "name": "entrypoint",
+          "type": "string",
+          "description": "The name of the entrypoint into the management page; e.g., the caller"
+        }]
       }
     ]
   }

src/list/common.js

@@ -53,3 +53,7 @@ export const openWebsite = (url, closeWindow = true) => {
     window.close();
   }
 };
+
+export const openSyncPrefs = () => {
+  browser.experiments.sync.openPreferences("lockbox-addon");
+};

src/list/manage/containers/app-header.js

@@ -7,7 +7,7 @@ import { Localized } from "fluent-react";
 import PropTypes from "prop-types";
 import React from "react";
 import { connect } from "react-redux";
-import { openWebsite } from "../../common";
+import { openWebsite, openSyncPrefs } from "../../common";
 import { classNames } from "../../../common";
 import {
   selectTabLogins,
@@ -235,11 +235,7 @@ export default connect(
     onClickMenuConnect: () => {
       // TODO: Issue TBD
     },
-    onClickMenuAccount: () => {
-      // TODO: Issue #92 / Issue #61
-    },
-    onClickMenuSignIn: () => {
-      // TODO: Issue #92 / Issue #61
-    },
+    onClickMenuAccount: () => openSyncPrefs(),
+    onClickMenuSignIn: () => openSyncPrefs(),
   })
 )(AppHeader);

test/integration/sync-api-test.js

@@ -11,7 +11,7 @@ import chaiAsPromised from "chai-as-promised";
 chai.use(chaiAsPromised);
 
 describe("sync API", () => {
-  let webext, driver, webdriver, By, until;
+  let webext, driver, testpage, webdriver, By, until;
 
   const clickButton = async (id) => {
     await webext.inContent();
@@ -30,6 +30,7 @@ describe("sync API", () => {
   const loadTestPage = async () => {
     await webext.inContent();
     await driver.get(webext.url("/test/integration/test-pages/sync-api.html"));
+    testpage = await driver.getWindowHandle();
   };
 
 
@@ -54,6 +55,29 @@ describe("sync API", () => {
     return output;
   };
 
+  const openSyncPrefs = async () => {
+    await clickButton("open-sync-prefs");
+  };
+
+  const findAndCloseSyncPrefs = async () => {
+    await webext.inContent();
+    let found = false;
+
+    let handles = await driver.getAllWindowHandles();
+    for (let h of handles) {
+      await driver.switchTo().window(h);
+      const url = await driver.getCurrentUrl();
+      if (url.startsWith("about:preferences") && url.endsWith("#sync")) {
+        found = true;
+        await driver.close();
+      }
+    }
+
+    await driver.switchTo().window(testpage);
+
+    return found;
+  };
+
   // Force an update of the UIState. This method exists on the UIState API to
   // aid with rapid state transitions during testing.
   const refreshUIState = async () => {
@@ -256,7 +280,40 @@ describe("sync API", () => {
     });
   });
 
+  describe("browser.experiments.sync.openPreferences", () => {
+    beforeEach(async () => {
+    });
+
+    it("should open FxA/sync preference page when not configured", async () => {
+      await setNotConfigured();
+      await loadTestPage();
+      await openSyncPrefs();
+      const found = await findAndCloseSyncPrefs();
+      expect(found).to.equal(true);
+    });
+
+    it("should open FxA/sync preference page when signed-in", async () => {
+      await setLoggedIn();
+      await loadTestPage();
+      await openSyncPrefs();
+      const found = await findAndCloseSyncPrefs();
+      expect(found).to.equal(true);
+    });
+
+    it("should open FxA/sync preference page when there's a problem", async () => {
+      await setLoginFailed();
+      await loadTestPage();
+      await openSyncPrefs();
+      const found = await findAndCloseSyncPrefs();
+      expect(found).to.equal(true);
+    });
+  });
+
   describe("browser.experiments.sync.getUserProfileInfo", () => {
+    beforeEach(async () => {
+      await webext.inContent();
+    });
+
     it("should return null if the user is not logged in", async () => {
       await setNotConfigured();
       await loadTestPage();

test/integration/test-pages/sync-api.html

@@ -9,6 +9,10 @@ <h1>Sync API Test File</h1>
   <button id="get-profile-info">Get Profile Info</button>
   <pre id="get-profile-info-results"></pre>
 
+<p>Click the Open Preferences button to open the preferences page to the FxA/Sync pane.
+  <button id="open-sync-prefs">Open Preferences</button>
+  <pre id="open-sync-prefs-results"></pre>
+
 <p>Click the Register Listener button to register an onUserProfileChanged listener.
    Any events will be appended to a list in the results field.
   <button id="register-listener">Register Listener</button>

test/integration/test-pages/sync-api.js

@@ -18,6 +18,12 @@ document.querySelector("#check-passwords-pref").addEventListener("click", () =>
     then(log, log);
 });
 
+document.querySelector("#open-sync-prefs").addEventListener("click", () => {
+  const log = getLogger("open-sync-prefs");
+  browser.experiments.sync.openPreferences("lockbox-addon-tests").
+    then(log, log);
+});
+
 document.querySelector("#register-listener").addEventListener("click", () => {
   const events = [];
   const log = getLogger("register-listener");

test/unit/list/common-test.js

@@ -0,0 +1,30 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import chai, { expect } from "chai";
+import sinon from "sinon";
+import sinonChai from "sinon-chai";
+import "test/unit/mocks/browser";
+
+import * as common from "src/list/common";
+
+chai.use(sinonChai);
+
+describe("list > common", () => {
+  describe("openSyncPrefs", () => {
+    let spyOpenPrefs;
+
+    beforeEach(() => {
+      spyOpenPrefs = sinon.spy(browser.experiments.sync, "openPreferences");
+    });
+    afterEach(() => {
+      spyOpenPrefs.restore();
+    });
+
+    it("call WebExt API", async () => {
+      common.openSyncPrefs();
+      expect(spyOpenPrefs).to.have.been.calledWith("lockbox-addon");
+    });
+  });
+});

test/unit/mocks/browser.js

@@ -218,6 +218,7 @@ window.browser = {
     },
     sync: {
       async getUserProfileInfo() { },
+      async openPreferences() { },
       onUserProfileChanged: new MockListener(),
     },
   },