Bug 1590231 - Update sync preferences panel to match decouple designs r=fluent-reviewers,markh
authorVijay Budhram <vbudhram@mozilla.com>
Thu, 14 Nov 2019 21:01:23 +0000
changeset 502057 8fa2316b02404d9fde7a88fe6948df683a2f84a0
parent 502056 5df0e903d13fa096db7b3d90c3d1fe972a5b34d4
child 502058 2556a28ab75a074ba8a7ef30e5360cb66a18e04c
push id114172
push userdluca@mozilla.com
push dateTue, 19 Nov 2019 11:31:10 +0000
treeherdermozilla-inbound@b5c5ba07d3db [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersfluent-reviewers, markh
bugs1590231
milestone72.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1590231 - Update sync preferences panel to match decouple designs r=fluent-reviewers,markh Differential Revision: https://phabricator.services.mozilla.com/D50931
browser/base/content/browser-sync.js
browser/components/newtab/lib/ASRouter.jsm
browser/components/newtab/lib/BookmarkPanelHub.jsm
browser/components/newtab/test/unit/asrouter/ASRouter.test.js
browser/components/newtab/test/unit/asrouter/templates/OnboardingMessage.test.jsx
browser/components/newtab/test/unit/lib/BookmarkPanelHub.test.js
browser/components/newtab/test/unit/unit-entry.js
browser/components/preferences/in-content/main.js
browser/components/preferences/in-content/sync.inc.xul
browser/components/preferences/in-content/sync.js
browser/components/preferences/in-content/tests/browser_search_within_preferences_2.js
browser/components/uitour/UITour.jsm
browser/components/uitour/test/browser_UITour_sync.js
browser/locales/en-US/browser/preferences/preferences.ftl
services/fxaccounts/FxAccountsConfig.jsm
services/fxaccounts/tests/xpcshell/test_accounts_config.js
toolkit/components/remotepagemanager/RemotePageManagerParent.jsm
--- a/browser/base/content/browser-sync.js
+++ b/browser/base/content/browser-sync.js
@@ -702,17 +702,17 @@ var gSync = {
         this.openPrefsFromFxaMenu("sync_settings", panel);
         break;
       case UIState.STATUS_SIGNED_IN:
         PanelUI.showSubView("PanelUI-fxa-menu-account-panel", panel);
     }
   },
 
   async openFxAEmailFirstPage(entryPoint) {
-    const url = await FxAccounts.config.promiseEmailFirstURI(entryPoint);
+    const url = await FxAccounts.config.promiseConnectAccountURI(entryPoint);
     switchToTabHavingURI(url, true, { replaceQueryString: true });
   },
 
   async openFxAEmailFirstPageFromFxaMenu(panel = undefined) {
     this.emitFxaToolbarTelemetry("login", panel);
     let entryPoint = "fxa_discoverability_native";
     if (this.isPanelInsideAppMenu(panel)) {
       entryPoint = "fxa_app_menu";
--- a/browser/components/newtab/lib/ASRouter.jsm
+++ b/browser/components/newtab/lib/ASRouter.jsm
@@ -1939,17 +1939,19 @@ class _ASRouter {
       case ra.PIN_CURRENT_TAB:
         let tab = target.browser.ownerGlobal.gBrowser.selectedTab;
         target.browser.ownerGlobal.gBrowser.pinTab(tab);
         target.browser.ownerGlobal.ConfirmationHint.show(tab, "pinTab", {
           showDescription: true,
         });
         break;
       case ra.SHOW_FIREFOX_ACCOUNTS:
-        const url = await FxAccounts.config.promiseSignUpURI("snippets");
+        const url = await FxAccounts.config.promiseConnectAccountURI(
+          "snippets"
+        );
         // We want to replace the current tab.
         target.browser.ownerGlobal.openLinkIn(url, "current", {
           private: false,
           triggeringPrincipal: Services.scriptSecurityManager.createNullPrincipal(
             {}
           ),
           csp: null,
         });
--- a/browser/components/newtab/lib/BookmarkPanelHub.jsm
+++ b/browser/components/newtab/lib/BookmarkPanelHub.jsm
@@ -132,17 +132,19 @@ class _BookmarkPanelHub {
     let recommendation = target.container.querySelector("#cfrMessageContainer");
     if (!recommendation) {
       recommendation = createElement("div");
       const headerContainer = createElement("div");
       headerContainer.classList.add("cfrMessageHeader");
       recommendation.setAttribute("id", "cfrMessageContainer");
       recommendation.addEventListener("click", async e => {
         target.hidePopup();
-        const url = await FxAccounts.config.promiseEmailFirstURI("bookmark");
+        const url = await FxAccounts.config.promiseConnectAccountURI(
+          "bookmark"
+        );
         win.ownerGlobal.openLinkIn(url, "tabshifted", {
           private: false,
           triggeringPrincipal: Services.scriptSecurityManager.createNullPrincipal(
             {}
           ),
           csp: null,
         });
         this.sendUserEventTelemetry("CLICK", win);
--- a/browser/components/newtab/test/unit/asrouter/ASRouter.test.js
+++ b/browser/components/newtab/test/unit/asrouter/ASRouter.test.js
@@ -2047,17 +2047,19 @@ describe("ASRouter", () => {
           "tab"
         );
       });
     });
 
     describe("#onMessage: SHOW_FIREFOX_ACCOUNTS", () => {
       beforeEach(() => {
         globals.set("FxAccounts", {
-          config: { promiseSignUpURI: sandbox.stub().resolves("some/url") },
+          config: {
+            promiseConnectAccountURI: sandbox.stub().resolves("some/url"),
+          },
         });
       });
       it("should call openLinkIn with the correct params on OPEN_URL", async () => {
         let [testMessage] = Router.state.messages;
         testMessage.button_action = { type: "SHOW_FIREFOX_ACCOUNTS" };
         const msg = fakeExecuteUserAction(testMessage.button_action);
         await Router.onMessage(msg);
 
--- a/browser/components/newtab/test/unit/asrouter/templates/OnboardingMessage.test.jsx
+++ b/browser/components/newtab/test/unit/asrouter/templates/OnboardingMessage.test.jsx
@@ -29,17 +29,17 @@ const L10N_CONTENT = {
 
 describe("OnboardingMessage", () => {
   let globals;
   let sandbox;
   beforeEach(() => {
     globals = new GlobalOverrider();
     sandbox = sinon.createSandbox();
     globals.set("FxAccountsConfig", {
-      promiseEmailFirstURI: sandbox.stub().resolves("some/url"),
+      promiseConnectAccountURI: sandbox.stub().resolves("some/url"),
     });
     globals.set("AddonRepository", {
       getAddonsByIDs: ([content]) => [
         {
           name: content,
           sourceURI: { spec: "foo", scheme: "https" },
           icons: { 64: "icon" },
         },
--- a/browser/components/newtab/test/unit/lib/BookmarkPanelHub.test.js
+++ b/browser/components/newtab/test/unit/lib/BookmarkPanelHub.test.js
@@ -23,17 +23,17 @@ describe("BookmarkPanelHub", () => {
     fakeL10n = {
       setAttributes: sandbox.stub(),
       translateElements: sandbox.stub().resolves(),
     };
     globals.set("DOMLocalization", function() {
       return fakeL10n;
     }); // eslint-disable-line prefer-arrow-callback
     globals.set("FxAccounts", {
-      config: { promiseEmailFirstURI: sandbox.stub() },
+      config: { promiseConnectAccountURI: sandbox.stub() },
     });
     isBrowserPrivateStub = sandbox.stub().returns(false);
     globals.set("PrivateBrowsingUtils", {
       isBrowserPrivate: isBrowserPrivateStub,
     });
 
     instance = new _BookmarkPanelHub();
     fakeAddImpression = sandbox.stub();
--- a/browser/components/newtab/test/unit/unit-entry.js
+++ b/browser/components/newtab/test/unit/unit-entry.js
@@ -348,17 +348,17 @@ const TEST_GLOBAL = {
   Localization: class {
     async formatMessages(stringsIds) {
       return Promise.resolve(
         stringsIds.map(({ id, args }) => ({ value: { string_id: id, args } }))
       );
     }
   },
   FxAccountsConfig: {
-    promiseEmailFirstURI(id) {
+    promiseConnectAccountURI(id) {
       return Promise.resolve(id);
     },
   },
   TelemetryEnvironment: {
     setExperimentActive() {},
   },
   Sampling: {
     ratioSample(seed, ratios) {
--- a/browser/components/preferences/in-content/main.js
+++ b/browser/components/preferences/in-content/main.js
@@ -852,17 +852,19 @@ var gMainPane = {
       return;
     }
     const user = await fxAccounts.getSignedInUser();
     if (user) {
       // We have a user, open Sync preferences in the same tab
       win.openTrustedLinkIn("about:preferences#sync", "current");
       return;
     }
-    let url = await FxAccounts.config.promiseSignInURI("dev-edition-setup");
+    let url = await FxAccounts.config.promiseConnectAccountURI(
+      "dev-edition-setup"
+    );
     let accountsTab = win.gBrowser.addWebTab(url);
     win.gBrowser.selectedTab = accountsTab;
   },
 
   // HOME PAGE
   /*
    * Preferences:
    *
--- a/browser/components/preferences/in-content/sync.inc.xul
+++ b/browser/components/preferences/in-content/sync.inc.xul
@@ -21,33 +21,22 @@
         <label id="noFxaCaption"><html:h2 data-l10n-id="sync-signedout-caption"/></label>
         <description id="noFxaDescription" flex="1" data-l10n-id="sync-signedout-description"/>
       </vbox>
       <vbox>
         <image class="fxaSyncIllustration"/>
       </vbox>
     </hbox>
     <hbox id="fxaNoLoginStatus" align="center" flex="1">
-      <vbox>
-        <image class="fxaProfileImage"/>
-      </vbox>
       <vbox flex="1">
         <hbox align="center" flex="1">
-          <hbox align="center" flex="1">
-            <label id="signedOutAccountBoxTitle"><html:h2 data-l10n-id="sync-signedout-account-title"/></label>
-          </hbox>
           <button id="noFxaSignIn"
                   is="highlightable-button"
                   class="accessory-button"
-                  data-l10n-id="sync-signedout-account-signin"/>
-        </hbox>
-        <hbox align="center" flex="1">
-          <html:a id="noFxaSignUp"
-                  class="openLink"
-                  data-l10n-id="sync-signedout-account-create" />
+                  data-l10n-id="sync-signedout-account-signin2"/>
         </hbox>
       </vbox>
     </hbox>
     <label class="fxaMobilePromo" data-l10n-id="sync-mobile-promo">
       <html:img
         src="chrome://browser/skin/preferences/in-content/logo-android.svg"
         data-l10n-name="android-icon"
         class="androidIcon"/>
--- a/browser/components/preferences/in-content/sync.js
+++ b/browser/components/preferences/in-content/sync.js
@@ -128,22 +128,16 @@ var gSyncPane = {
         "sync-preferences";
       for (let elt of document.querySelectorAll(
         `.fxaMobilePromo-${platform}`
       )) {
         elt.setAttribute("href", url);
       }
     }
 
-    FxAccounts.config
-      .promiseSignUpURI(this._getEntryPoint())
-      .then(signUpURI => {
-        document.getElementById("noFxaSignUp").setAttribute("href", signUpURI);
-      });
-
     this.updateWeavePrefs();
 
     // Notify observers that the UI is now ready
     Services.obs.notifyObservers(window, "sync-pane-loaded");
 
     // document.location.search is empty, so we simply match on `action=pair`.
     if (
       location.href.includes("action=pair") &&
@@ -451,29 +445,31 @@ var gSyncPane = {
     browser.loadURI(url, {
       triggeringPrincipal: Services.scriptSecurityManager.createNullPrincipal(
         {}
       ),
     });
   },
 
   async signIn() {
-    const url = await FxAccounts.config.promiseSignInURI(this._getEntryPoint());
+    const url = await FxAccounts.config.promiseConnectAccountURI(
+      this._getEntryPoint()
+    );
     this.replaceTabWithUrl(url);
   },
 
   async reSignIn() {
     // There's a bit of an edge-case here - we might be forcing reauth when we've
     // lost the FxA account data - in which case we'll not get a URL as the re-auth
     // URL embeds account info and the server endpoint complains if we don't
     // supply it - So we just use the regular "sign in" URL in that case.
     let entryPoint = this._getEntryPoint();
     const url =
       (await FxAccounts.config.promiseForceSigninURI(entryPoint)) ||
-      (await FxAccounts.config.promiseSignInURI(entryPoint));
+      (await FxAccounts.config.promiseConnectAccountURI(entryPoint));
     this.replaceTabWithUrl(url);
   },
 
   clickOrSpaceOrEnterPressed(event) {
     // Note: charCode is deprecated, but 'char' not yet implemented.
     // Replace charCode with char when implemented, see Bug 680830
     return (
       (event.type == "click" && event.button == 0) ||
--- a/browser/components/preferences/in-content/tests/browser_search_within_preferences_2.js
+++ b/browser/components/preferences/in-content/tests/browser_search_within_preferences_2.js
@@ -15,43 +15,35 @@ add_task(async function() {
 /**
  * Test that we only search the selected child of a XUL deck.
  * When we search "Remove Account",
  * it should not show the "Remove Account" button if the Firefox account is not logged in yet.
  */
 add_task(async function() {
   await openPreferencesViaOpenPreferencesAPI("paneSync", { leaveOpen: true });
 
-  // Ensure the "Sign Up" button in the hidden child of the <xul:deck>
-  // is selected and displayed on the screen.
   let weavePrefsDeck = gBrowser.contentDocument.getElementById(
     "weavePrefsDeck"
   );
   is(
     weavePrefsDeck.selectedIndex,
     0,
     "Should select the #noFxaAccount child node"
   );
-  let noFxaSignUp = weavePrefsDeck.children[0].querySelector("#noFxaSignUp");
-  is(
-    noFxaSignUp.textContent,
-    "Don\u2019t have an account? Get started",
-    "The Sign Up button should exist"
-  );
 
   // Performs search.
   let searchInput = gBrowser.contentDocument.getElementById("searchInput");
 
   is(
     searchInput,
     gBrowser.contentDocument.activeElement.closest("#searchInput"),
     "Search input should be focused when visiting preferences"
   );
 
-  let query = "Don\u2019t have an account? Get started";
+  let query = "Sync";
   let searchCompletedPromise = BrowserTestUtils.waitForEvent(
     gBrowser.contentWindow,
     "PreferencesSearchCompleted",
     evt => evt.detail == query
   );
   EventUtils.sendString(query);
   await searchCompletedPromise;
 
--- a/browser/components/uitour/UITour.jsm
+++ b/browser/components/uitour/UITour.jsm
@@ -529,17 +529,17 @@ var UITour = {
         break;
       }
 
       case "showFirefoxAccounts": {
         Promise.resolve()
           .then(() => {
             return data.email
               ? FxAccounts.config.promiseEmailURI(data.email, "uitour")
-              : FxAccounts.config.promiseSignUpURI("uitour");
+              : FxAccounts.config.promiseConnectAccountURI("uitour");
           })
           .then(uri => {
             const url = new URL(uri);
             // Call our helper to validate extraURLCampaignParams and populate URLSearchParams
             if (
               !this._populateCampaignParams(url, data.extraURLCampaignParams)
             ) {
               log.warn("showFirefoxAccounts: invalid campaign args specified");
--- a/browser/components/uitour/test/browser_UITour_sync.js
+++ b/browser/components/uitour/test/browser_UITour_sync.js
@@ -62,27 +62,27 @@ add_UITour_task(async function test_chec
 
 // The showFirefoxAccounts API is sync related, so we test that here too...
 add_UITour_task(async function test_firefoxAccountsNoParams() {
   info("Load https://accounts.firefox.com");
   await gContentAPI.showFirefoxAccounts();
   await BrowserTestUtils.browserLoaded(
     gTestTab.linkedBrowser,
     false,
-    "https://example.com/signup?service=sync&context=fx_desktop_v3&entrypoint=uitour"
+    "https://example.com/?service=sync&context=fx_desktop_v3&entrypoint=uitour&action=email"
   );
 });
 
 add_UITour_task(async function test_firefoxAccountsValidParams() {
   info("Load https://accounts.firefox.com");
   await gContentAPI.showFirefoxAccounts({ utm_foo: "foo", utm_bar: "bar" });
   await BrowserTestUtils.browserLoaded(
     gTestTab.linkedBrowser,
     false,
-    "https://example.com/signup?service=sync&context=fx_desktop_v3&entrypoint=uitour&utm_foo=foo&utm_bar=bar"
+    "https://example.com/?service=sync&context=fx_desktop_v3&entrypoint=uitour&action=email&utm_foo=foo&utm_bar=bar"
   );
 });
 
 add_UITour_task(async function test_firefoxAccountsWithEmail() {
   info("Load https://accounts.firefox.com");
   await gContentAPI.showFirefoxAccounts(null, "foo@bar.com");
   await BrowserTestUtils.browserLoaded(
     gTestTab.linkedBrowser,
@@ -98,17 +98,17 @@ add_UITour_task(async function test_fire
   let value = "foo& /=?:\\\xa9";
   // encodeURIComponent encodes spaces to %20 but we want "+"
   let expected = encodeURIComponent(value).replace(/%20/g, "+");
   info("Load https://accounts.firefox.com");
   await gContentAPI.showFirefoxAccounts({ utm_foo: value });
   await BrowserTestUtils.browserLoaded(
     gTestTab.linkedBrowser,
     false,
-    "https://example.com/signup?service=sync&context=fx_desktop_v3&entrypoint=uitour&utm_foo=" +
+    "https://example.com/?service=sync&context=fx_desktop_v3&entrypoint=uitour&action=email&utm_foo=" +
       expected
   );
 });
 
 // A helper to check the request was ignored due to invalid params.
 async function checkFxANotLoaded() {
   try {
     await waitForConditionPromise(() => {
--- a/browser/locales/en-US/browser/preferences/preferences.ftl
+++ b/browser/locales/en-US/browser/preferences/preferences.ftl
@@ -705,23 +705,19 @@ containers-remove-button =
     .label = Remove
 
 ## Firefox Account - Signed out. Note that "Sync" and "Firefox Account" are now
 ## more discrete ("signed in" no longer means "and sync is connected").
 
 sync-signedout-caption = Take Your Web With You
 sync-signedout-description = Synchronize your bookmarks, history, tabs, passwords, add-ons, and preferences across all your devices.
 
-sync-signedout-account-title = Connect with a { -fxaccount-brand-name }
-sync-signedout-account-create = Don’t have an account? Get started
-    .accesskey = c
-
-sync-signedout-account-signin =
-    .label = Sign In…
-    .accesskey = I
+sync-signedout-account-signin2 =
+    .label = Sign in to { -sync-brand-short-name }…
+    .accesskey = i
 
 # This message contains two links and two icon images.
 #   `<img data-l10n-name="android-icon"/>` - Android logo icon
 #   `<a data-l10n-name="android-link">` - Link to Android Download
 #   `<img data-l10n-name="ios-icon">` - iOS logo icon
 #   `<a data-l10n-name="ios-link">` - Link to iOS Download
 #
 # They can be moved within the sentence as needed to adapt
--- a/services/fxaccounts/FxAccountsConfig.jsm
+++ b/services/fxaccounts/FxAccountsConfig.jsm
@@ -51,35 +51,23 @@ const CONFIG_PREFS = [
   "identity.fxaccounts.auth.uri",
   "identity.fxaccounts.remote.oauth.uri",
   "identity.fxaccounts.remote.profile.uri",
   "identity.fxaccounts.remote.pairing.uri",
   "identity.sync.tokenserver.uri",
 ];
 
 var FxAccountsConfig = {
-  async promiseSignUpURI(entrypoint, extraParams = {}) {
-    return this._buildURL("signup", {
-      extraParams: { entrypoint, ...extraParams },
-    });
-  },
-
-  async promiseSignInURI(entrypoint, extraParams = {}) {
-    return this._buildURL("signin", {
-      extraParams: { entrypoint, ...extraParams },
-    });
-  },
-
   async promiseEmailURI(email, entrypoint, extraParams = {}) {
     return this._buildURL("", {
       extraParams: { entrypoint, email, ...extraParams },
     });
   },
 
-  async promiseEmailFirstURI(entrypoint, extraParams = {}) {
+  async promiseConnectAccountURI(entrypoint, extraParams = {}) {
     return this._buildURL("", {
       extraParams: { entrypoint, action: "email", ...extraParams },
     });
   },
 
   async promiseForceSigninURI(entrypoint, extraParams = {}) {
     return this._buildURL("force_auth", {
       extraParams: { entrypoint, ...extraParams },
--- a/services/fxaccounts/tests/xpcshell/test_accounts_config.js
+++ b/services/fxaccounts/tests/xpcshell/test_accounts_config.js
@@ -10,28 +10,28 @@ const { FxAccounts } = ChromeUtils.impor
 add_task(
   async function test_non_https_remote_server_uri_with_requireHttps_false() {
     Services.prefs.setBoolPref("identity.fxaccounts.allowHttp", true);
     Services.prefs.setCharPref(
       "identity.fxaccounts.remote.root",
       "http://example.com/"
     );
     Assert.equal(
-      await FxAccounts.config.promiseSignUpURI("test"),
-      "http://example.com/signup?service=sync&context=null&entrypoint=test"
+      await FxAccounts.config.promiseConnectAccountURI("test"),
+      "http://example.com/?service=sync&context=null&entrypoint=test&action=email"
     );
 
     Services.prefs.clearUserPref("identity.fxaccounts.remote.root");
     Services.prefs.clearUserPref("identity.fxaccounts.allowHttp");
   }
 );
 
 add_task(async function test_non_https_remote_server_uri() {
   Services.prefs.setCharPref(
     "identity.fxaccounts.remote.root",
     "http://example.com/"
   );
   await Assert.rejects(
-    FxAccounts.config.promiseSignUpURI(),
+    FxAccounts.config.promiseConnectAccountURI(),
     /Firefox Accounts server must use HTTPS/
   );
   Services.prefs.clearUserPref("identity.fxaccounts.remote.root");
 });
--- a/toolkit/components/remotepagemanager/RemotePageManagerParent.jsm
+++ b/toolkit/components/remotepagemanager/RemotePageManagerParent.jsm
@@ -245,17 +245,17 @@ class ChromeMessagePort extends MessageP
       data: null,
     });
     this.destroy();
   }
 
   // Called when the content process is requesting some data.
   async handleRequest(name, data) {
     if (name == "FxAccountsEndpoint") {
-      return FxAccounts.config.promiseEmailFirstURI(data);
+      return FxAccounts.config.promiseConnectAccountURI(data);
     }
 
     throw new Error(`Unknown request ${name}.`);
   }
 
   // Called when a message is received from the message manager.
   handleMessage(messagedata) {
     let message = {