Bug 1574873 - The Mobile Promotion is wrongly displayed on “about:logins” page when you are not signed in to Sync r=MattN

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

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

browser/components/aboutlogins/AboutLoginsChild.jsm

@@ -34,8 +34,6 @@ const TELEMETRY_EVENT_CATEGORY = "pwmgr";
 
 let masterPasswordPromise;
 
-const HIDE_MOBILE_FOOTER_PREF = "signon.management.page.hideMobileFooter";
-
 class AboutLoginsChild extends ActorChild {
   handleEvent(event) {
     switch (event.type) {
@@ -74,10 +72,6 @@ class AboutLoginsChild extends ActorChild {
             cloneFunctions: true,
           }
         );
-        this.sendToContent("InitialInfo", {
-          hideMobileFooter: Services.prefs.getBoolPref(HIDE_MOBILE_FOOTER_PREF),
-          appLocales: Services.locale.appLocalesAsBCP47,
-        });
         break;
       }
       case "AboutLoginsCopyLoginDetail": {

browser/components/aboutlogins/AboutLoginsParent.jsm

@@ -726,10 +726,17 @@ var AboutLoginsParent = {
     // authenticated. More diagnostics and error states can be handled
     // by other more Sync-specific pages.
     const loggedIn = state.status != UIState.STATUS_NOT_CONFIGURED;
+
+    // Pass the pref set if user has dismissed mobile promo footer
+    const dismissedMobileFooter = Services.prefs.getBoolPref(
+      HIDE_MOBILE_FOOTER_PREF
+    );
+
     return {
       loggedIn,
       email: state.email,
       avatarURL: state.avatarURL,
+      hideMobileFooter: !loggedIn || dismissedMobileFooter,
     };
   },
 

browser/components/aboutlogins/content/aboutLogins.css

@@ -51,10 +51,6 @@ login-item {
   max-width: 700px;
 }
 
-login-footer {
-  grid-area: login;
-}
-
 #branding-logo {
   height: 32px;
   margin-inline-end: 18px;

browser/components/aboutlogins/content/aboutLogins.js

@@ -38,10 +38,6 @@ window.addEventListener("AboutLoginsChromeToContent", event => {
       updateNoLogins();
       break;
     }
-    case "InitialInfo": {
-      gElements.loginFooter.hidden = event.detail.value.hideMobileFooter;
-      break;
-    }
     case "LocalizeBadges": {
       gElements.loginFooter.showStoreIconsForLocales(event.detail.value);
       break;
@@ -71,6 +67,7 @@ window.addEventListener("AboutLoginsChromeToContent", event => {
     }
     case "SyncState": {
       gElements.fxAccountsButton.updateState(event.detail.value);
+      gElements.loginFooter.hidden = event.detail.value.hideMobileFooter;
       break;
     }
     case "UpdateBreaches": {

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

@@ -13,9 +13,11 @@
 
 :host([data-editing]) .edit-button,
 :host([data-editing]) .copy-button,
+:host([data-editing]) login-footer,
 :host([data-is-new-login]) .delete-button,
 :host([data-is-new-login]) .origin-saved-value,
 :host([data-is-new-login]) .meta-info,
+:host([data-is-new-login]) login-footer,
 :host([data-is-new-login]) .login-item-title,
 :host(:not([data-is-new-login])) .new-login-title,
 :host(:not([data-editing])) .form-actions-row {

browser/components/aboutlogins/tests/browser/browser_dismissFooter.js

@@ -1,14 +1,43 @@
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
+let syncService = {};
+ChromeUtils.import("resource://services-sync/service.js", syncService);
+const service = syncService.Service;
+const { UIState } = ChromeUtils.import("resource://services-sync/UIState.jsm");
+
+function mockState(state) {
+  UIState.get = () => ({
+    status: state.status,
+    lastSync: new Date(),
+    email: state.email,
+    avatarURL: state.avatarURL,
+  });
+}
+
 add_task(async function setup() {
+  let storageChangedPromised = TestUtils.topicObserved(
+    "passwordmgr-storage-changed",
+    (_, data) => data == "addLogin"
+  );
+  TEST_LOGIN1 = Services.logins.addLogin(TEST_LOGIN1);
+  await storageChangedPromised;
+  storageChangedPromised = TestUtils.topicObserved(
+    "passwordmgr-storage-changed",
+    (_, data) => data == "addLogin"
+  );
+  TEST_LOGIN2 = Services.logins.addLogin(TEST_LOGIN2);
+  await storageChangedPromised;
   await BrowserTestUtils.openNewForegroundTab({
     gBrowser,
     url: "about:logins",
   });
+  let getState = UIState.get;
   registerCleanupFunction(() => {
     BrowserTestUtils.removeTab(gBrowser.selectedTab);
+    UIState.get = getState;
     SpecialPowers.clearUserPref("signon.management.page.hideMobileFooter");
+    Services.logins.removeAllLogins();
   });
 });
 
@@ -32,11 +61,21 @@ add_task(async function test_open_links() {
 
   for (const { urlFinal, urlBase, pref, selector } of linkArray) {
     info("Test on " + urlFinal);
+    const TEST_EMAIL = "test@example.com";
+    const TEST_AVATAR_URL =
+      "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
+    mockState({
+      status: UIState.STATUS_SIGNED_IN,
+      email: TEST_EMAIL,
+      avatarURL: TEST_AVATAR_URL,
+    });
 
     await SpecialPowers.pushPrefEnv({
-      set: [[pref, urlBase]],
+      set: [[pref, urlBase], ["services.sync.engine.passwords", true]],
     });
 
+    Services.obs.notifyObservers(null, UIState.ON_UPDATE);
+
     let promiseNewTab = BrowserTestUtils.waitForNewTab(gBrowser, urlFinal);
     let browser = gBrowser.selectedBrowser;
 
@@ -61,6 +100,19 @@ add_task(async function test_open_links() {
 });
 
 add_task(async function dismissFooter() {
+  const TEST_EMAIL = "test@example.com";
+  const TEST_AVATAR_URL =
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
+  mockState({
+    status: UIState.STATUS_SIGNED_IN,
+    email: TEST_EMAIL,
+    avatarURL: TEST_AVATAR_URL,
+  });
+  await SpecialPowers.pushPrefEnv({
+    set: [["services.sync.engine.passwords", true]],
+  });
+  Services.obs.notifyObservers(null, UIState.ON_UPDATE);
+
   let browser = gBrowser.selectedBrowser;
 
   await ContentTask.spawn(browser, null, async () => {