Bug 1559422 - Create base Monitor card. r=ewright

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

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

browser/app/profile/firefox.js

@@ -1610,6 +1610,9 @@ pref("browser.contentblocking.reportBreakage.url", "https://tracking-protection-
 // Enable Protections report's Lockwise card by default.
 pref("browser.contentblocking.report.lockwise.enabled", true);
 
+// Enable Protections report's Monitor card by default.
+pref("browser.contentblocking.report.monitor.enabled", true);
+
 // Enables the new Protections Panel.
 #ifdef NIGHTLY_BUILD
 pref("browser.protections_panel.enabled", true);

browser/base/content/logos/monitor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientTransform="matrix(1 0 0 -1 0 66)" gradientUnits="userSpaceOnUse" x1="44.39" x2="17.83" y1="55.11" y2="9.1"><stop offset="0" stop-color="#ff980e"/><stop offset=".21" stop-color="#ff7139"/><stop offset=".36" stop-color="#ff5854"/><stop offset=".46" stop-color="#ff4f5e"/><stop offset=".69" stop-color="#ff3750"/><stop offset=".86" stop-color="#f92261"/><stop offset="1" stop-color="#f5156c"/></linearGradient><linearGradient id="b" gradientTransform="matrix(1 0 0 -1 0 66)" gradientUnits="userSpaceOnUse" x1="44.39" x2="17.83" y1="55.11" y2="9.1"><stop offset="0" stop-color="#fff44f" stop-opacity=".8"/><stop offset=".75" stop-color="#fff44f" stop-opacity="0"/></linearGradient><linearGradient id="c" gradientTransform="matrix(1 0 0 -1 0 66)" gradientUnits="userSpaceOnUse" x1="44.49" x2="44.49" y1="3.82" y2="58.55"><stop offset="0" stop-color="#3a8ee6"/><stop offset=".24" stop-color="#5c79f0"/><stop offset=".63" stop-color="#9059ff"/><stop offset="1" stop-color="#c139e6"/></linearGradient><linearGradient id="d" gradientTransform="matrix(1 0 0 -1 0 66)" gradientUnits="userSpaceOnUse" x1="35.2" x2="59.52" y1="60.58" y2="36.25"><stop offset="0" stop-color="#6e008b" stop-opacity=".5"/><stop offset=".5" stop-color="#c846cb" stop-opacity="0"/></linearGradient><linearGradient id="e" gradientTransform="matrix(1 0 0 -1 0 66)" gradientUnits="userSpaceOnUse" x1="59.67" x2="45.66" y1="30.62" y2="16.61"><stop offset=".14" stop-color="#6a2bea" stop-opacity="0"/><stop offset=".3" stop-color="#662ce6" stop-opacity=".09"/><stop offset=".47" stop-color="#592fdb" stop-opacity=".19"/><stop offset=".64" stop-color="#4534c9" stop-opacity=".29"/><stop offset=".81" stop-color="#283baf" stop-opacity=".39"/><stop offset=".99" stop-color="#03448d" stop-opacity=".49"/><stop offset="1" stop-color="#00458b" stop-opacity=".5"/></linearGradient><linearGradient id="f" gradientTransform="matrix(1 0 0 -1 0 66)" gradientUnits="userSpaceOnUse" x1="38.67" x2="41.95" y1="21.69" y2="17.77"><stop offset="0" stop-color="#960e18" stop-opacity=".6"/><stop offset=".17" stop-color="#a91522" stop-opacity=".47"/><stop offset=".51" stop-color="#d9283c" stop-opacity=".19"/><stop offset=".75" stop-color="#ff3750" stop-opacity="0"/></linearGradient><path d="m54.55 15.53-5.71-3.26-13-7.46-.41-.23a6.88 6.88 0 0 0 -6.88 0l-.42.23-18.28 10.48-.41.24a6.83 6.83 0 0 0 -3.44 5.92v21.89a6.86 6.86 0 0 0 3.44 5.92l18.7 10.74a2.75 2.75 0 0 0 1.44.38 2.91 2.91 0 0 0 2.49-1.42 2.83 2.83 0 0 0 -1.07-3.96l-18.29-10.44a2 2 0 0 1 -1-1.69v-20.95a2 2 0 0 1 1-1.69l3.29-1.85 15-8.63a2 2 0 0 1 2 0l18.27 10.48a2 2 0 0 1 1 1.69v20.95a1.94 1.94 0 0 1 -1 1.69l-6.18 3.54-3.09-4.71a15 15 0 1 0 -5 2.92l4.75 7.15a1.91 1.91 0 0 0 .24.32 3.18 3.18 0 0 0 .33.3.27.27 0 0 0 .08.07l.41.25h.1a1.3 1.3 0 0 0 .39.14.14.14 0 0 0 .09 0 2.34 2.34 0 0 0 .45.07.3.3 0 0 1 .13 0h.39a.23.23 0 0 0 .11 0 2.57 2.57 0 0 0 .48-.11.26.26 0 0 0 .12 0l.37-.16h.08l8.94-5.13a6.83 6.83 0 0 0 3.54-5.9v-21.86a6.75 6.75 0 0 0 -3.45-5.92zm-31.74 16.85a9.18 9.18 0 1 1 9.19 9.11 9.15 9.15 0 0 1 -9.19-9.11z" fill="url(#a)"/><path d="m54.55 15.53-5.71-3.26-13-7.46-.41-.23a6.88 6.88 0 0 0 -6.88 0l-.42.23-18.28 10.48-.41.24a6.83 6.83 0 0 0 -3.44 5.92v21.89a6.86 6.86 0 0 0 3.44 5.92l18.7 10.74a2.75 2.75 0 0 0 1.44.38 2.91 2.91 0 0 0 2.49-1.42 2.83 2.83 0 0 0 -1.07-3.96l-18.29-10.44a2 2 0 0 1 -1-1.69v-20.95a2 2 0 0 1 1-1.69l3.29-1.85 15-8.63a2 2 0 0 1 2 0l18.27 10.48a2 2 0 0 1 1 1.69v20.95a1.94 1.94 0 0 1 -1 1.69l-6.18 3.54-3.09-4.71a15 15 0 1 0 -5 2.92l4.75 7.15a1.91 1.91 0 0 0 .24.32 3.18 3.18 0 0 0 .33.3.27.27 0 0 0 .08.07l.41.25h.1a1.3 1.3 0 0 0 .39.14.14.14 0 0 0 .09 0 2.34 2.34 0 0 0 .45.07.3.3 0 0 1 .13 0h.39a.23.23 0 0 0 .11 0 2.57 2.57 0 0 0 .48-.11.26.26 0 0 0 .12 0l.37-.16h.08l8.94-5.13a6.83 6.83 0 0 0 3.54-5.9v-21.86a6.75 6.75 0 0 0 -3.45-5.92zm-31.74 16.85a9.18 9.18 0 1 1 9.19 9.11 9.15 9.15 0 0 1 -9.19-9.11z" fill="url(#b)"/><path d="m54.55 15.53-5.71-3.26-7.94-4.55a6.11 6.11 0 0 0 -5.9-.08l-4 2.11a2 2 0 0 1 2 0l18.3 10.48a1.94 1.94 0 0 1 1 1.69v20.95a1.93 1.93 0 0 1 -1 1.69l-6.23 3.54 1 1.55a4.05 4.05 0 0 0 5.41 1.35l3.06-1.75a6.82 6.82 0 0 0 3.46-5.91v-21.9a6.75 6.75 0 0 0 -3.45-5.91z" fill="url(#c)"/><path d="m52.26 21.92v10.16h5.74v-10.64a6.83 6.83 0 0 0 -3.44-5.92l-5.7-3.26-8-4.55a6.14 6.14 0 0 0 -5.86-.09l-4 2.12a2 2 0 0 1 2 0l18.27 10.48a2 2 0 0 1 .99 1.7z" fill="url(#d)"/><path d="m52.26 33.72v9.14a2 2 0 0 1 -1 1.69l-6.19 3.54 1 1.55a4.06 4.06 0 0 0 5.42 1.36l3.06-1.75a6.84 6.84 0 0 0 3.45-5.92v-9.63h-5.74z" fill="url(#e)" opacity=".9"/><path d="m41.17 32.38a9.18 9.18 0 1 0 -9.17 9.11 9.14 9.14 0 0 0 9.17-9.11z" fill="none"/><path d="m44.64 47.43-2.68-4a15 15 0 0 1 -4.96 2.88l2.86 4.31c1.63-1.02 3.22-2.08 4.78-3.19z" fill="url(#f)" opacity=".9"/></svg>

browser/base/content/test/static/browser_parsable_script.js

@@ -20,6 +20,7 @@ const kESModuleList = new Set([
   /browser\/aboutlogins\/.*\.js$/,
   /browser\/protections.js$/,
   /browser\/lockwise-card.js$/,
+  /browser\/monitor-card.js$/,
   /toolkit\/content\/global\/certviewer\/components\/.*\.js$/,
   /toolkit\/content\/global\/certviewer\/.*\.js$/,
 ]);

browser/base/jar.mn

@@ -21,6 +21,7 @@ browser.jar:
         content/browser/illustrations/blue-berror.svg (content/illustrations/blue-berror.svg)
         content/browser/logos/lockwise.svg             (content/logos/lockwise.svg)
         content/browser/logos/lockwise-mobile-app.svg             (content/logos/lockwise-mobile-app.svg)
+        content/browser/logos/monitor.svg             (content/logos/monitor.svg)
         content/browser/aboutNetError.xhtml            (content/aboutNetError.xhtml)
         content/browser/aboutNetError.js               (content/aboutNetError.js)
         content/browser/aboutRobots-icon.png          (content/aboutRobots-icon.png)

browser/components/about/AboutProtectionsHandler.jsm

@@ -41,12 +41,15 @@ var AboutProtectionsHandler = {
     "OpenSyncPreferences",
     // Fetching data
     "FetchContentBlockingEvents",
+    "FetchMonitorData",
     "FetchUserLoginsData",
     // Getting prefs
-    "GetEnabledLockwiseCard",
+    "GetEnabledPrefs",
   ],
-
+  _prefs: {
-  PREF_LOCKWISE_CARD_ENABLED: "browser.contentblocking.report.lockwise.enabled",
+    LockwiseCard: "browser.contentblocking.report.lockwise.enabled",
+    MonitorCard: "browser.contentblocking.report.monitor.enabled",
+  },
 
   init() {
     this.receiveMessage = this.receiveMessage.bind(this);
@@ -70,24 +73,43 @@ var AboutProtectionsHandler = {
   /**
    * Retrieves login data for the user.
    *
-   * @return {{ isLoggedIn: Boolean,
+   * @return {{ hasFxa: Boolean,
-   *            numberOfLogins: Number,
+   *            numLogins: Number,
-   *            numberOfSyncedDevices: Number }}
+   *            numSyncedDevices: Number }}
    *         The login data.
    */
   async getLoginData() {
-    const loginCount = Services.logins.countLogins("", "", "");
     let syncedDevices = [];
-    const isLoggedWithFxa = await fxAccounts.accountStatus();
+    const hasFxa = await fxAccounts.accountStatus();
 
-    if (isLoggedWithFxa) {
+    if (hasFxa) {
       syncedDevices = await fxAccounts.getDeviceList();
     }
 
     return {
-      isLoggedIn: loginCount > 0 || syncedDevices.length > 0,
+      hasFxa,
-      numberOfLogins: loginCount,
+      numLogins: Services.logins.countLogins("", "", ""),
-      numberOfSyncedDevices: syncedDevices.length,
+      numSyncedDevices: syncedDevices.length,
+    };
+  },
+
+  /**
+   * Retrieves monitor data for the user.
+   *
+   * @return {{ monitoredEmails: Number,
+   *            numBreaches: Number,
+   *            passwords: Number,
+   *            error: Boolean }}
+   *         Monitor data.
+   */
+  async getMonitorData() {
+    // TODO: Fetch real data for endpoints in Bug 1559424.
+    return {
+      monitoredEmails: 1,
+      numBreaches: 11,
+      passwords: 8,
+      lockwisePasswords: 2,
+      error: false,
     };
   },
 
@@ -154,6 +176,13 @@ var AboutProtectionsHandler = {
           dataToSend
         );
         break;
+      case "FetchMonitorData":
+        this.sendMessage(
+          aMessage.target,
+          "SendMonitorData",
+          await this.getMonitorData()
+        );
+        break;
       case "FetchUserLoginsData":
         this.sendMessage(
           aMessage.target,
@@ -161,13 +190,17 @@ var AboutProtectionsHandler = {
           await this.getLoginData()
         );
         break;
-      case "GetEnabledLockwiseCard":
+      case "GetEnabledPrefs":
-        const enabled = Services.prefs.getBoolPref(
+        const prefs = Object.keys(this._prefs);
-          this.PREF_LOCKWISE_CARD_ENABLED
+
-        );
+        // Get all the enabled prefs and send separate messages depending on their names.
-        this.sendMessage(aMessage.target, "SendEnabledLockWiseCardPref", {
+        for (let name of prefs) {
-          isEnabled: enabled,
+          const message = `SendEnabled${name}Pref`;
+          const isEnabled = Services.prefs.getBoolPref(this._prefs[name]);
+          this.sendMessage(aMessage.target, message, {
+            isEnabled,
           });
+        }
         break;
     }
   },

browser/components/protections/content/lockwise-card.js

@@ -36,13 +36,11 @@ export default class LockwiseCard {
       );
       lockwiseCard.classList.remove("hidden");
     });
-
-    // Dispatch messages to retrieve data for the Lockwise  card.
-    RPMSendAsyncMessage("FetchUserLoginsData");
   }
 
   buildContent(data) {
-    const { isLoggedIn, numberOfLogins, numberOfSyncedDevices } = data;
+    const { hasFxa, numLogins, numSyncedDevices } = data;
+    const isLoggedIn = numLogins > 0 || hasFxa;
     const title = this.doc.getElementById("lockwise-title");
     const headerContent = this.doc.getElementById("lockwise-header-content");
     const lockwiseBodyContent = this.doc.getElementById(
@@ -60,11 +58,7 @@ export default class LockwiseCard {
       title.textContent = "Firefox Lockwise";
       headerContent.textContent =
         "Securely store and sync your passwords to all your devices.";
-      this.renderContentForLoggedInUser(
+      this.renderContentForLoggedInUser(container, numLogins, numSyncedDevices);
-        container,
-        numberOfLogins,
-        numberOfSyncedDevices
-      );
     } else {
       title.textContent = "Never forget a password again";
       headerContent.textContent =

browser/components/protections/content/monitor-card.js

@@ -0,0 +1,91 @@
+/* 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/. */
+
+/* eslint-env mozilla/frame-script */
+
+export default class MonitorClass {
+  constructor(document) {
+    this.doc = document;
+  }
+
+  init() {
+    const signUpForMonitorButton = this.doc.getElementById(
+      "sign-up-for-monitor-button"
+    );
+    signUpForMonitorButton.addEventListener("click", () => {
+      console.log("TODO: Where is this link supposed to go.");
+    });
+
+    RPMAddMessageListener("SendUserLoginsData", ({ data }) => {
+      // Wait for monitor data and display the card.
+      this.getMonitorData(data);
+      RPMSendAsyncMessage("FetchMonitorData");
+    });
+  }
+
+  /**
+   * Adds a listener for receiving the monitor data. Once received then display this data
+   * in the card.
+   *
+   * @param {Object}  loginData
+   *        Login data received from the Logins service.
+   */
+  getMonitorData(loginData) {
+    RPMAddMessageListener("SendMonitorData", ({ data: monitorData }) => {
+      // Once data for the user is retrieved, display the monitor card.
+      this.buildContent(loginData, monitorData);
+
+      // Show the Monitor card.
+      const monitorCard = this.doc.querySelector(
+        ".report-card.monitor-card.hidden"
+      );
+      monitorCard.classList.remove("hidden");
+    });
+  }
+
+  buildContent(loginData, monitorData) {
+    const { hasFxa, numLogins } = loginData;
+    const isLoggedIn = numLogins > 0 || hasFxa;
+    const headerContent = this.doc.querySelector(
+      "#monitor-header-content span"
+    );
+    const monitorCard = this.doc.querySelector(".report-card.monitor-card");
+    if (isLoggedIn && !monitorData.error) {
+      monitorCard.classList.add("has-logins");
+      headerContent.textContent =
+        "Firefox Monitor warns you if your info has appeared in a known data breach";
+      this.renderContentForUserWithLogins(monitorData);
+    } else {
+      monitorCard.classList.add("no-logins");
+      const signUpForMonitorButton = this.doc.getElementById(
+        "sign-up-for-monitor-button"
+      );
+      signUpForMonitorButton.textContent = hasFxa
+        ? "Turn on Monitor"
+        : "Sign up for Monitor";
+      headerContent.textContent =
+        "Check Firefox Monitor to see if you've been part of a data breach and get alerts about new breaches.";
+    }
+  }
+
+  renderContentForUserWithLogins(monitorData) {
+    const storedEmail = this.doc.querySelector(
+      "span[data-type='stored-emails']"
+    );
+    const knownBreaches = this.doc.querySelector(
+      "span[data-type='known-breaches']"
+    );
+    const exposedPasswords = this.doc.querySelector(
+      "span[data-type='exposed-passwords']"
+    );
+    const exposedLockwisePasswords = this.doc.querySelector(
+      ".number-of-breaches.block"
+    );
+
+    storedEmail.textContent = monitorData.monitoredEmails;
+    knownBreaches.textContent = monitorData.numBreaches;
+    exposedPasswords.textContent = monitorData.passwords;
+    exposedLockwisePasswords.textContent = monitorData.lockwisePasswords;
+  }
+}

browser/components/protections/content/protections.css

@@ -97,10 +97,26 @@ body[focuseddatatype=cryptominer] {
   background-color: var(--blue-80);
 }
 
-.report-card.lockwise-card .card-header {
+.report-card.lockwise-card .card-header,
+.report-card.monitor-card.no-logins .card-header {
   grid-template-columns: 2fr 6fr 7fr;
 }
 
+
+/* We want to hide certain components depending on its state. */
+a.hidden,
+.card-body.hidden,
+.lockwise-card.hidden,
+#lockwise-body-content .has-logins.hidden,
+#lockwise-body-content .no-logins.hidden,
+.monitor-card.hidden,
+.monitor-card.no-logins .card-body,
+.monitor-card.no-logins #monitor-header-content a,
+.monitor-card.no-logins .inline-text-icon.monitor-scanned-text,
+.monitor-card.has-logins #sign-up-for-monitor-button {
+  display: none;
+}
+
 .icon {
   width: 60px;
   height: 60px;
@@ -116,6 +132,10 @@ body[focuseddatatype=cryptominer] {
   background: url("chrome://browser/content/logos/lockwise.svg") no-repeat center/cover;
 }
 
+.monitor-card .icon {
+  background: url("chrome://browser/content/logos/monitor.svg") no-repeat center/cover;
+}
+
 .report-card {
   display: grid;
   grid-template-columns: 100%;
@@ -389,13 +409,6 @@ label:hover {
   grid-gap: 10px;
 }
 
-a.hidden,
-.lockwise-card.hidden,
-#lockwise-body-content .has-logins.hidden,
-#lockwise-body-content .no-logins.hidden {
-  display: none;
-}
-
 .number-of-logins {
   background-color: var(--dark-grey);
 }
@@ -404,7 +417,7 @@ a.hidden,
   background-color: var(--orange);
 }
 
-.lockwise-text-icon {
+.inline-text-icon {
   background-size: 16px 16px;
   background-repeat: no-repeat;
   background-position-x: 3px;
@@ -427,10 +440,6 @@ a.hidden,
   background-image: url("chrome://browser/skin/sync.svg");
 }
 
-.non-logged-in-user-content {
-  grid-column: 2;
-}
-
 .block {
   border-radius: 4px;
   text-align: center;
@@ -443,3 +452,108 @@ a.hidden,
 #lockwise-body-content .has-logins a {
   margin-inline-start: 10px;
 }
+
+/* Monitor card */
+
+#monitor-body-content .monitor-breached-passwords {
+  grid: 1fr / minmax(70px, auto) 1fr;
+  grid-row: 3;
+  grid-column: span 3;
+  display: grid;
+  align-items: center;
+  font-size: 0.85rem;
+  border-top: var(--card-divider);
+  padding-top: 20px;
+  line-height: 18px;
+  grid-column-gap: 10px;
+}
+
+.monitor-scanned-text {
+  background-image: url("chrome://browser/skin/reload.svg");
+  font-size: 0.85rem;
+}
+
+.monitor-card #monitor-header-content > a {
+  display: block;
+  margin-block-start: 5px;
+}
+
+.monitor-card.has-logins #monitor-body-content {
+  display: grid;
+  grid: 2fr 1fr auto / repeat(3, 160px);
+  grid-column-gap: 12px;
+  align-items: center;
+}
+
+.monitor-block {
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  color: #FFFFFF;
+  text-align: center;
+  padding: 25px 5px 25px 5px;
+}
+
+.email {
+  background: linear-gradient(162.33deg, #AB71FF 0%, #9059FF 100%);
+}
+
+.email .monitor-icon {
+  background-image: url(chrome://browser/skin/mail.svg);
+}
+
+.breaches {
+  background: linear-gradient(162.33deg, #9059FF 0%, #7542E5 100%);
+}
+
+.breaches .monitor-icon {
+  background-image: url(chrome://browser/skin/fxa/avatar.svg);
+}
+
+.passwords {
+  background: linear-gradient(162.33deg, #7542E5 0%, #592ACB 100%);
+}
+
+.passwords .monitor-icon {
+  background-image: url(chrome://browser/skin/login.svg);
+}
+
+.monitor-view-full-report {
+  grid-row: 2;
+  grid-column: span 2;
+  font-size: 0.85rem;
+}
+
+.monitor-stat {
+  display: flex;
+  font-size: 1.75rem;
+  font-weight: bold;
+  margin-block-end: 5px;
+  word-break: break-all;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.monitor-stat .monitor-icon {
+  background-size: 24px 24px;
+  background-repeat: no-repeat;
+  -moz-context-properties: fill,fill-opacity;
+  fill: white;
+  fill-opacity: 0.65;
+  width: 24px;
+  height: 24px;
+  display: block;
+  padding: 5px;
+  background-position-y: center;
+}
+
+.info-text {
+  font-size: .69rem;
+  line-height: 13px;
+  margin-block-start: 5px;
+}
+
+.number-of-breaches.block {
+  background-color: var(--orange);
+  padding: 15px;
+}

browser/components/protections/content/protections.html

@@ -14,6 +14,7 @@
     <link rel="icon" href="chrome://global/skin/icons/warning.svg">
     <script type="module" src="chrome://browser/content/protections.js"></script>
     <script type="module" src="chrome://browser/content/lockwise-card.js"></script>
+    <script type="module" src="chrome://browser/content/monitor-card.js"></script>
     <title>Protection Report</title>
   </head>
 
@@ -82,6 +83,75 @@
           </div>
         </div>
       </div>
+     <!-- Markup for Monitor card. -->
+      <section class="report-card monitor-card hidden">
+          <div class="card-header">
+            <div class="icon"></div>
+            <div class="wrapper">
+              <h3 id="monitor-title" class="card-title">
+                Look out for data breaches
+              </h3>
+              <p id="monitor-header-content" class="content">
+                <span>
+                  <!-- Insert Monitor header content here. -->
+                </span>
+                <a href="">How it works</a>
+              </p>
+              <span class="inline-text-icon monitor-scanned-text">
+                Automatically scanned today
+              </span>
+            </div>
+            <button id="sign-up-for-monitor-button">
+              <!-- Insert Monitor button content here. -->
+            </button>
+          </div>
+          <div class="card-body">
+            <div class="body-wrapper">
+              <div id="monitor-body-content">
+                <div class="monitor-block email">
+                  <span class="monitor-stat">
+                    <span class="monitor-icon"></span>
+                    <span data-type="stored-emails">
+                      <!-- Display number of stored emails here. -->
+                    </span>
+                  </span>
+                  <span class="info-text">Email address being monitored</span>
+                </div>
+                <div class="monitor-block breaches">
+                  <span class="monitor-stat">
+                    <span class="monitor-icon"></span>
+                    <span data-type="known-breaches">
+                      <!-- Display number of known breaches here. -->
+                    </span>
+                  </span>
+                  <span class="info-text">Known data breaches have exposed your information</span>
+                </div>
+                <div class="monitor-block passwords">
+                  <span class="monitor-stat">
+                      <span class="monitor-icon"></span>
+                      <span data-type="exposed-passwords">
+                        <!-- Display number of exposed passwords here. -->
+                      </span>
+                  </span>
+                  <span class="info-text">Passwords exposed across all breaches</span>
+                </div>
+                <div class="monitor-view-full-report">
+                  <span>View full report on</span>
+                  <a href="">Firefox Monitor</a>
+                </div>
+                <div class="monitor-breached-passwords">
+                  <span class="number-of-breaches block">
+                    <!-- Display number of exposed stored passwords here. -->
+                  </span>
+                  <span class="">
+                    Saved passwords have appeared in known data breaches. Change these passwords to protect your accounts.
+                    <a href="">Open Lockwise</a>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+      </section>
       <!-- Markup for Lockwise card. -->
       <section class="report-card lockwise-card hidden">
         <div class="card-header">
@@ -109,14 +179,14 @@
               <span class="number-of-logins block">
                 <!-- Display number of stored logins here. -->
               </span>
-              <span class="lockwise-text-icon passwords-stored-text">
+              <span class="inline-text-icon passwords-stored-text">
                 Passwords stored securely.
                 <a href="">How it works</a>
               </span>
               <span class="number-of-synced-devices block">
                 <!-- Display number of synced devices here. -->
               </span>
-              <span class="lockwise-text-icon synced-devices-text">
+              <span class="inline-text-icon synced-devices-text">
                 <span>
                   <!-- Display message for status of synced devices here. -->
                 </span>

browser/components/protections/content/protections.js

@@ -5,6 +5,7 @@
 /* eslint-env mozilla/frame-script */
 
 import LockwiseCard from "./lockwise-card.js";
+import MonitorCard from "./monitor-card.js";
 
 document.addEventListener("DOMContentLoaded", e => {
   let todayInMs = Date.now();
@@ -28,8 +29,8 @@ document.addEventListener("DOMContentLoaded", e => {
     RPMSendAsyncMessage("OpenContentBlockingPreferences");
   });
 
-  // Check to see if displaying the Lockwise card pref is enabled.
+  // Get the display prefs for each component
-  RPMSendAsyncMessage("GetEnabledLockwiseCard");
+  RPMSendAsyncMessage("GetEnabledPrefs");
 
   let createGraph = data => {
     let dateInMS = data.earliestDate
@@ -149,8 +150,20 @@ document.addEventListener("DOMContentLoaded", e => {
     createGraph(message.data);
   });
 
+  // Display Monitor card
+  RPMAddMessageListener("SendEnabledMonitorCardPref", message => {
+    if (message.data.isEnabled) {
+      const monitorCard = new MonitorCard(document);
+      monitorCard.init();
+    }
+
+    // For tests
+    const monitorUI = document.querySelector(".monitor-card");
+    monitorUI.dataset.enabled = message.data.isEnabled;
+  });
+
   // Display Lockwise card
-  RPMAddMessageListener("SendEnabledLockWiseCardPref", message => {
+  RPMAddMessageListener("SendEnabledLockwiseCardPref", message => {
     if (message.data.isEnabled) {
       const lockwiseCard = new LockwiseCard(document);
       lockwiseCard.init();
@@ -160,4 +173,8 @@ document.addEventListener("DOMContentLoaded", e => {
     const lockwiseUI = document.querySelector(".lockwise-card");
     lockwiseUI.dataset.enabled = message.data.isEnabled;
   });
+
+  // Dispatch messages to retrieve data for the Lockwise & Monitor
+  // cards.
+  RPMSendAsyncMessage("FetchUserLoginsData");
 });

browser/components/protections/jar.mn

@@ -4,6 +4,7 @@
 
 browser.jar:
     content/browser/lockwise-card.js                      (content/lockwise-card.js)
+    content/browser/monitor-card.js                       (content/monitor-card.js)
     content/browser/protections.css                       (content/protections.css)
     content/browser/protections.html                      (content/protections.html)
     content/browser/protections.js                        (content/protections.js)

browser/components/protections/test/browser/browser.ini

@@ -4,4 +4,5 @@ support-files =
   !/browser/base/content/test/trackingUI/trackingPage.html
 
 [browser_protections_lockwise.js]
+[browser_protections_monitor.js]
 [browser_protections_report_ui.js]

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

@@ -37,12 +37,10 @@ const TEST_LOGIN2 = new nsLoginInfo(
 // Modify AboutProtectionsHandler's getLoginData method to fake returning a specified
 // number of devices.
 const mockGetLoginDataWithSyncedDevices = deviceCount => async () => {
-  const loginCount = Services.logins.countLogins("", "", "");
-
   return {
-    isLoggedIn: loginCount > 0 || deviceCount > 0,
+    hasFxa: true,
-    numberOfLogins: loginCount,
+    numLogins: Services.logins.countLogins("", "", ""),
-    numberOfSyncedDevices: deviceCount,
+    numSyncedDevices: deviceCount,
   };
 };
 
@@ -56,7 +54,9 @@ add_task(async function() {
   info("Check that the correct content is displayed for non-logged in users.");
   await ContentTask.spawn(tab.linkedBrowser, {}, async function() {
     await ContentTaskUtils.waitForCondition(() => {
-      const noLogins = content.document.querySelector(".no-logins");
+      const noLogins = content.document.querySelector(
+        "#lockwise-body-content .no-logins"
+      );
       return ContentTaskUtils.is_visible(noLogins);
     }, "Lockwise card for user with no logins is shown.");
 
@@ -83,7 +83,9 @@ add_task(async function() {
 
   await ContentTask.spawn(tab.linkedBrowser, {}, async function() {
     await ContentTaskUtils.waitForCondition(() => {
-      const hasLogins = content.document.querySelector(".has-logins");
+      const hasLogins = content.document.querySelector(
+        "#lockwise-body-content .has-logins"
+      );
       return ContentTaskUtils.is_visible(hasLogins);
     }, "Lockwise card for user with logins is shown.");
 
@@ -149,7 +151,9 @@ add_task(async function() {
 
   await ContentTask.spawn(tab.linkedBrowser, {}, async function() {
     await ContentTaskUtils.waitForCondition(() => {
-      const hasLogins = content.document.querySelector(".has-logins");
+      const hasLogins = content.document.querySelector(
+        "#lockwise-body-content .has-logins"
+      );
       return ContentTaskUtils.is_visible(hasLogins);
     }, "Lockwise card for user with logins is shown.");
 

browser/components/protections/test/browser/browser_protections_monitor.js

@@ -0,0 +1,194 @@
+/* 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/. */
+
+"use strict";
+
+const { AboutProtectionsHandler } = ChromeUtils.import(
+  "resource:///modules/aboutpages/AboutProtectionsHandler.jsm"
+);
+
+const nsLoginInfo = new Components.Constructor(
+  "@mozilla.org/login-manager/loginInfo;1",
+  Ci.nsILoginInfo,
+  "init"
+);
+
+const TEST_LOGIN1 = new nsLoginInfo(
+  "https://example.com/",
+  "https://example.com/",
+  null,
+  "user1",
+  "pass1",
+  "username",
+  "password"
+);
+
+let fakeDataWithNoError = {
+  monitoredEmails: 1,
+  numBreaches: 11,
+  passwords: 8,
+  lockwisePasswords: 2,
+  error: false,
+};
+
+let fakeDataWithError = {
+  monitoredEmails: null,
+  numBreaches: null,
+  passwords: null,
+  lockwisePasswords: null,
+  error: true,
+};
+
+// Modify AboutProtectionsHandler's getMonitorData method to fake returning a specified
+// number of devices.
+const mockGetMonitorData = data => async () => data;
+
+// Modify AboutProtectionsHandler's getLoginData method to fake being logged in with Fxa.
+const mockGetLoginData = async () => {
+  return {
+    hasFxa: true,
+    numLogins: Services.logins.countLogins("", "", ""),
+    numSyncedDevices: 0,
+  };
+};
+
+add_task(async function() {
+  let tab = await BrowserTestUtils.openNewForegroundTab({
+    url: "about:protections",
+    gBrowser,
+  });
+  const { getLoginData } = AboutProtectionsHandler;
+  const { getMonitorData } = AboutProtectionsHandler;
+
+  await reloadTab(tab);
+
+  info("Check that the correct content is displayed for users with no logins.");
+  await checkNoLoginsContentIsDisplayed(tab, "Sign up for Monitor");
+
+  info(
+    "Check that the correct content is displayed for users with monitor data."
+  );
+  Services.logins.addLogin(TEST_LOGIN1);
+  AboutProtectionsHandler.getMonitorData = mockGetMonitorData(
+    fakeDataWithNoError
+  );
+  await reloadTab(tab);
+
+  await ContentTask.spawn(tab.linkedBrowser, {}, async function() {
+    await ContentTaskUtils.waitForCondition(() => {
+      const noLogins = content.document.querySelector(
+        ".monitor-card.has-logins"
+      );
+      return ContentTaskUtils.is_visible(noLogins);
+    }, "Monitor card for user with stored logins is shown.");
+
+    const hasLoginsHeaderContent = content.document.querySelector(
+      "#monitor-header-content span"
+    );
+    const cardBody = content.document.querySelector(".monitor-card .card-body");
+
+    ok(
+      ContentTaskUtils.is_visible(cardBody),
+      "Card body is shown for users monitor data."
+    );
+    is(
+      hasLoginsHeaderContent.textContent,
+      "Firefox Monitor warns you if your info has appeared in a known data breach",
+      "Header content for user with monitor data is correct"
+    );
+
+    info("Make sure correct numbers for monitor stats are displayed.");
+    const emails = content.document.querySelector(
+      ".monitor-stat span[data-type='stored-emails']"
+    );
+    const passwords = content.document.querySelector(
+      ".monitor-stat span[data-type='exposed-passwords']"
+    );
+    const breaches = content.document.querySelector(
+      ".monitor-stat span[data-type='known-breaches']"
+    );
+
+    is(emails.textContent, 1, "1 monitored email is displayed");
+    is(passwords.textContent, 8, "8 exposed stored passwords is displayed");
+    is(breaches.textContent, 11, "11 known data breaches is displayed.");
+  });
+
+  info(
+    "Check that correct content is displayed when monitor data contains an error message."
+  );
+  AboutProtectionsHandler.getMonitorData = mockGetMonitorData(
+    fakeDataWithError
+  );
+  AboutProtectionsHandler.getLoginData = mockGetLoginData;
+  await reloadTab(tab);
+  await checkNoLoginsContentIsDisplayed(tab, "Turn on Monitor");
+
+  info("Disable showing the Monitor card.");
+  Services.prefs.setBoolPref(
+    "browser.contentblocking.report.monitor.enabled",
+    false
+  );
+  await reloadTab(tab);
+
+  await ContentTask.spawn(tab.linkedBrowser, {}, async function() {
+    await ContentTaskUtils.waitForCondition(() => {
+      const monitorCard = content.document.querySelector(".monitor-card");
+      return !monitorCard["data-enabled"];
+    }, "Monitor card is not enabled.");
+
+    const monitorCard = content.document.querySelector(".monitor-card");
+    ok(ContentTaskUtils.is_hidden(monitorCard), "Lockwise card is hidden.");
+  });
+
+  // set the pref back to displaying the card.
+  Services.prefs.setBoolPref(
+    "browser.contentblocking.report.monitor.enabled",
+    true
+  );
+
+  // remove logins
+  Services.logins.removeLogin(TEST_LOGIN1);
+
+  // restore original getLoginData & getMonitorData methods to AboutProtectionsHandler
+  AboutProtectionsHandler.getLoginData = getLoginData;
+  AboutProtectionsHandler.getMonitorData = getMonitorData;
+
+  await BrowserTestUtils.removeTab(tab);
+});
+
+async function checkNoLoginsContentIsDisplayed(tab, expectedButtonContent) {
+  await ContentTask.spawn(
+    tab.linkedBrowser,
+    { buttonText: expectedButtonContent },
+    async function({ buttonText }) {
+      await ContentTaskUtils.waitForCondition(() => {
+        const noLogins = content.document.querySelector(
+          ".monitor-card.no-logins"
+        );
+        return ContentTaskUtils.is_visible(noLogins);
+      }, "Monitor card for user with no logins is shown.");
+
+      const noLoginsHeaderContent = content.document.querySelector(
+        "#monitor-header-content span"
+      );
+      const cardBody = content.document.querySelector(
+        ".monitor-card .card-body"
+      );
+      const button = content.document.getElementById(
+        "sign-up-for-monitor-button"
+      );
+
+      ok(
+        ContentTaskUtils.is_hidden(cardBody),
+        "Card body is hidden for users with no logins."
+      );
+      is(
+        noLoginsHeaderContent.textContent,
+        "Check Firefox Monitor to see if you've been part of a data breach and get alerts about new breaches.",
+        "Header content for user with no logins is correct"
+      );
+      is(button.textContent, buttonText, "Text content for button is correct");
+    }
+  );
+}