Bug 1572464 - Show a different message on the login-intro if the user is signed in to Sync. r=sfoster,fluent-reviewers,flod

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

--HG--
extra : moz-landing-system : lando

browser/components/aboutlogins/content/aboutLogins.js

@@ -35,6 +35,7 @@ function handleAllLogins(logins) {
 function handleSyncState(syncState) {
   gElements.fxAccountsButton.updateState(syncState);
   gElements.loginFooter.hidden = syncState.hideMobileFooter;
+  gElements.loginIntro.updateState(syncState);
 }
 
 window.addEventListener("AboutLoginsChromeToContent", event => {

browser/components/aboutlogins/content/components/login-intro.css

@@ -21,3 +21,7 @@ section {
   font-weight: 600;
   margin-bottom: 0;
 }
+
+.illustration.logged-in {
+  opacity: .5;
+}

browser/components/aboutlogins/content/components/login-intro.js

@@ -22,5 +22,19 @@ export default class LoginIntro extends HTMLElement {
   set supportURL(val) {
     this.shadowRoot.querySelector(".intro-help-link").setAttribute("href", val);
   }
+
+  updateState(syncState) {
+    let l10nId = syncState.loggedIn
+      ? "about-logins-login-intro-heading-logged-in"
+      : "login-intro-heading";
+    document.l10n.setAttributes(
+      this.shadowRoot.querySelector(".heading"),
+      l10nId
+    );
+
+    this.shadowRoot
+      .querySelector(".illustration")
+      .classList.toggle("logged-in", syncState.loggedIn);
+  }
 }
 customElements.define("login-intro", LoginIntro);

browser/components/aboutlogins/tests/browser/browser_noLoginsView.js

@@ -28,7 +28,9 @@ add_task(async function test_no_logins_class() {
       "login-list should be in no logins view"
     );
 
-    let loginIntro = content.document.querySelector("login-intro");
+    let loginIntro = Cu.waiveXrays(
+      content.document.querySelector("login-intro")
+    );
     let loginItem = content.document.querySelector("login-item");
     let loginListIntro = loginList.shadowRoot.querySelector(".intro");
     let loginListList = loginList.shadowRoot.querySelector("ol");
@@ -50,5 +52,22 @@ add_task(async function test_no_logins_class() {
       isElementHidden(loginListList),
       "login-list logins list should be hidden in no logins view"
     );
+    is(
+      content.document.l10n.getAttributes(
+        loginIntro.shadowRoot.querySelector(".heading")
+      ).id,
+      "login-intro-heading",
+      "The default message should be the non-logged-in message"
+    );
+
+    loginIntro.updateState(Cu.cloneInto({ loggedIn: true }, content));
+
+    is(
+      content.document.l10n.getAttributes(
+        loginIntro.shadowRoot.querySelector(".heading")
+      ).id,
+      "about-logins-login-intro-heading-logged-in",
+      "When logged in the message should update"
+    );
   });
 });

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

@@ -65,6 +65,7 @@ about-logins-list-item-breach-icon =
 ## Introduction screen
 
 login-intro-heading = Looking for your saved logins? Set up { -sync-brand-short-name }.
+about-logins-login-intro-heading-logged-in = No synced logins found.
 login-intro-description = If you saved your logins to { -brand-product-name } on a different device, here’s how to get them here:
 login-intro-instruction-fxa = Create or sign in to your { -fxaccount-brand-name } on the device where your logins are saved
 login-intro-instruction-fxa-settings = Make sure you’ve selected the Logins checkbox in { -sync-brand-short-name } Settings