Bug 1616686 - Hide mobile promotion in about:protections if a user has mobile devices synced already. r=ewright

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

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

browser/components/about/AboutProtectionsHandler.jsm

@@ -169,7 +169,8 @@ var AboutProtectionsHandler = {
    *
    * @return {{ hasFxa: Boolean,
    *            numLogins: Number,
-   *            numSyncedDevices: Number }}
+   *            numSyncedDevices: Number,
+   *            mobileDeviceConnected: Boolean }}
    *         The login data.
    */
   async getLoginData() {
@@ -187,12 +188,19 @@ var AboutProtectionsHandler = {
       Services.logins.countLogins("", "", "") -
       Services.logins.countLogins(FXA_PWDMGR_HOST, null, FXA_PWDMGR_REALM);
 
+    let mobileDeviceConnected =
+      fxAccounts.device.recentDeviceList &&
+      fxAccounts.device.recentDeviceList.filter(
+        device => device.type == "mobile"
+      ).length;
+
     return {
       hasFxa,
       numLogins: userFacingLogins,
       numSyncedDevices: fxAccounts.device.recentDeviceList
         ? fxAccounts.device.recentDeviceList.length
         : 0,
+      mobileDeviceConnected,
     };
   },
 
@@ -406,11 +414,20 @@ var AboutProtectionsHandler = {
         );
         break;
       case "FetchUserLoginsData":
-        this.sendMessage(
-          aMessage.target,
-          "SendUserLoginsData",
-          await this.getLoginData()
-        );
+        let {
+          hasFxa,
+          numLogins,
+          numSyncedDevices,
+          mobileDeviceConnected,
+        } = await this.getLoginData();
+        this.sendMessage(aMessage.target, "SendUserLoginsData", {
+          hasFxa,
+          numLogins,
+          numSyncedDevices,
+        });
+        this.sendMessage(aMessage.target, "SendUserMobileDeviceData", {
+          mobileDeviceConnected,
+        });
         break;
       case "ClearMonitorCache":
         this.monitorResponse = null;

browser/components/protections/content/protections.js

@@ -358,6 +358,14 @@ document.addEventListener("DOMContentLoaded", e => {
   RPMAddMessageListener("SendContentBlockingRecords", message => {
     createGraph(message.data);
   });
+  RPMAddMessageListener("SendUserMobileDeviceData", message => {
+    if (
+      RPMGetBoolPref("browser.contentblocking.report.show_mobile_app") &&
+      !message.data.mobileDeviceConnected
+    ) {
+      document.getElementById("mobile-hanger").classList.remove("hidden");
+    }
+  });
 
   let exitIcon = document.querySelector("#mobile-hanger .exit-icon");
   // hide the mobile promotion and keep hidden with a pref.
@@ -366,10 +374,6 @@ document.addEventListener("DOMContentLoaded", e => {
     document.getElementById("mobile-hanger").classList.add("hidden");
   });
 
-  if (RPMGetBoolPref("browser.contentblocking.report.show_mobile_app")) {
-    document.getElementById("mobile-hanger").classList.remove("hidden");
-  }
-
   let androidMobileAppLink = document.getElementById(
     "android-mobile-inline-link"
   );

browser/components/protections/test/browser/browser_protections_lockwise.js

@@ -34,16 +34,6 @@ const TEST_LOGIN2 = new nsLoginInfo(
   "password"
 );
 
-// Modify AboutProtectionsHandler's getLoginData method to fake returning a specified
-// number of devices.
-const mockGetLoginDataWithSyncedDevices = deviceCount => async () => {
-  return {
-    hasFxa: true,
-    numLogins: Services.logins.countLogins("", "", ""),
-    numSyncedDevices: deviceCount,
-  };
-};
-
 add_task(async function() {
   let tab = await BrowserTestUtils.openNewForegroundTab({
     url: "about:protections",

browser/components/protections/test/browser/browser_protections_report_ui.js

@@ -6,6 +6,10 @@
 
 const { OS } = ChromeUtils.import("resource://gre/modules/osfile.jsm");
 const { Sqlite } = ChromeUtils.import("resource://gre/modules/Sqlite.jsm");
+const { AboutProtectionsHandler } = ChromeUtils.import(
+  "resource:///modules/aboutpages/AboutProtectionsHandler.jsm"
+);
+
 XPCOMUtils.defineLazyServiceGetter(
   this,
   "TrackingDBService",
@@ -728,11 +732,15 @@ add_task(async function test_etp_custom_protections_off() {
   BrowserTestUtils.removeTab(tab);
 });
 
-// Ensure that the ETP mobile promotion card is shown when the pref is on, and hidden when the pref is off
-add_task(async function test_etp_mobile_promotion() {
+// Ensure that the ETP mobile promotion card is shown when the pref is on and
+// there are no mobile devices connected.
+add_task(async function test_etp_mobile_promotion_pref_on() {
+  const { getLoginData } = AboutProtectionsHandler;
+  AboutProtectionsHandler.onLoginData = mockGetLoginDataWithSyncedDevices(0);
   await SpecialPowers.pushPrefEnv({
     set: [["browser.contentblocking.report.show_mobile_app", true]],
   });
+
   let tab = await BrowserTestUtils.openNewForegroundTab({
     url: "about:protections",
     gBrowser,
@@ -741,21 +749,23 @@ add_task(async function test_etp_mobile_promotion() {
     let mobilePromotion = content.document.getElementById("mobile-hanger");
     Assert.ok(
       ContentTaskUtils.is_visible(mobilePromotion),
-      "Mobile promotions card is displayed"
+      "Mobile promotions card is displayed when pref is on and there are no synced mobile devices"
     );
 
     // Card should hide after the X is clicked.
     mobilePromotion.querySelector(".exit-icon").click();
     Assert.ok(
       ContentTaskUtils.is_hidden(mobilePromotion),
-      "Mobile promotions card is no longer displayed"
+      "Mobile promotions card is no longer displayed after clicking the X button"
     );
   });
   BrowserTestUtils.removeTab(tab);
 
-  await SpecialPowers.pushPrefEnv({
-    set: [["browser.contentblocking.report.show_mobile_app", false]],
-  });
+  // Add a mock mobile device. The promotion should now be hidden.
+  AboutProtectionsHandler.onLoginData = mockGetLoginDataWithSyncedDevices(
+    2,
+    true
+  );
   tab = await BrowserTestUtils.openNewForegroundTab({
     url: "about:protections",
     gBrowser,
@@ -764,9 +774,53 @@ add_task(async function test_etp_mobile_promotion() {
     let mobilePromotion = content.document.getElementById("mobile-hanger");
     Assert.ok(
       ContentTaskUtils.is_hidden(mobilePromotion),
-      "Mobile promotions card is hidden"
+      "Mobile promotions card is hidden when pref is on if there are synced mobile devices"
     );
   });
 
   BrowserTestUtils.removeTab(tab);
+  AboutProtectionsHandler.getLoginData = getLoginData;
+});
+
+// Test that ETP mobile promotion is not shown when the pref is off,
+// even if no mobile devices are synced.
+add_task(async function test_etp_mobile_promotion_pref_on() {
+  const { getLoginData } = AboutProtectionsHandler;
+  AboutProtectionsHandler.onLoginData = mockGetLoginDataWithSyncedDevices(0);
+  await SpecialPowers.pushPrefEnv({
+    set: [["browser.contentblocking.report.show_mobile_app", false]],
+  });
+
+  let tab = await BrowserTestUtils.openNewForegroundTab({
+    url: "about:protections",
+    gBrowser,
+  });
+  await SpecialPowers.spawn(tab.linkedBrowser, [], async function() {
+    let mobilePromotion = content.document.getElementById("mobile-hanger");
+    Assert.ok(
+      ContentTaskUtils.is_hidden(mobilePromotion),
+      "Mobile promotions card is not displayed when pref is off and there are no synced mobile devices"
+    );
+  });
+
+  BrowserTestUtils.removeTab(tab);
+
+  AboutProtectionsHandler.onLoginData = mockGetLoginDataWithSyncedDevices(
+    2,
+    true
+  );
+  tab = await BrowserTestUtils.openNewForegroundTab({
+    url: "about:protections",
+    gBrowser,
+  });
+
+  await SpecialPowers.spawn(tab.linkedBrowser, [], async function() {
+    let mobilePromotion = content.document.getElementById("mobile-hanger");
+    Assert.ok(
+      ContentTaskUtils.is_hidden(mobilePromotion),
+      "Mobile promotions card is not displayed when pref is off even if there are synced mobile devices"
+    );
+  });
+  BrowserTestUtils.removeTab(tab);
+  AboutProtectionsHandler.getLoginData = getLoginData;
 });

browser/components/protections/test/browser/head.js

@@ -11,3 +11,16 @@ async function reloadTab(tab) {
   gBrowser.reloadTab(tab);
   await tabReloaded;
 }
+
+// Used to replace AboutProtectionsHandler.getLoginData in front-end tests.
+const mockGetLoginDataWithSyncedDevices = (
+  deviceCount,
+  mobileDeviceConnected = false
+) => async () => {
+  return {
+    hasFxa: true,
+    numLogins: Services.logins.countLogins("", "", ""),
+    numSyncedDevices: deviceCount,
+    mobileDeviceConnected: deviceCount && mobileDeviceConnected,
+  };
+};