Bug 1559418 - Create a base card for Firefox Lockwise. r=ewright

Differential Revision: https://phabricator.services.mozilla.com/D37004 --HG-- extra : moz-landing-system : lando
2024-11-24 13:21:05 +00:00 · 2019-07-11 17:48:27 +00:00 · 2019-07-11 17:48:27 +00:00 · 493cdf8989
commit 493cdf8989
parent 3933e9bcaf
14 changed files with 478 additions and 18 deletions
--- a/browser/base/content/logos/lockwise-mobile-app.svg
+++ b/browser/base/content/logos/lockwise-mobile-app.svg
@ -0,0 +1,11 @@
+<!-- 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/. -->
+<svg data-name="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M19.14 25v-1.11a.56.56 0 0 0-.56-.56H18V13.14A1.13 1.13 0 0 0 16.88 12H3.29a1.12 1.12 0 0 0-1.13 1.13v10.2h-.57a.57.57 0 0 0-.57.56V25a.58.58 0 0 0 .57.57h17a.57.57 0 0 0 .55-.57zm-6.79-.57H7.82v-1.1h4.53zm3.39-2.26H4.42v-7.9h11.32z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M32.7 20h-9.35A2.33 2.33 0 0 0 21 22.34v14a2.34 2.34 0 0 0 2.33 2.33h9.37a2.33 2.33 0 0 0 2.3-2.32v-14A2.32 2.32 0 0 0 32.7 20zm-3.51 17.5h-2.33v-1.16h2.33zm3.5-2.91a.58.58 0 0 1-.58.58h-8.17a.58.58 0 0 1-.58-.58V22.92a.58.58 0 0 1 .58-.58h8.17a.58.58 0 0 1 .58.58z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M11.72 9.16A1.07 1.07 0 0 0 13 8.29a3.83 3.83 0 0 1 4.78-3 1.07 1.07 0 0 0 .36-2.11 5.9 5.9 0 0 0-7.25 4.79 1.07 1.07 0 0 0 .83 1.19z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M38.13 14.17a1.07 1.07 0 1 0-1.48 1.54 3.83 3.83 0 0 1-.16 5.67 1.07 1.07 0 0 0 1.06 1.77 1.12 1.12 0 0 0 .49-.29 5.9 5.9 0 0 0 .09-8.69z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M17.88 31.65a3.81 3.81 0 0 1-5-2.6 1.07 1.07 0 1 0-2 .75 5.82 5.82 0 0 0 4.71 4.2 6.73 6.73 0 0 0 .88.06 6.62 6.62 0 0 0 2.15-.35 1.06 1.06 0 0 0 .63-1.37 1.07 1.07 0 0 0-1.37-.69z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M32.55 4.53a4.47 4.47 0 0 0-4.32 3.36h-8a1.12 1.12 0 0 0 0 2.24v1.12a1.12 1.12 0 1 0 2.24 0v-1.12h1.13v1.12a1.12 1.12 0 1 0 2.23 0v-1.12h2.4a4.47 4.47 0 1 0 4.32-5.6zm0 6.72A2.24 2.24 0 1 1 34.79 9a2.24 2.24 0 0 1-2.24 2.25z"/>
+</svg>
--- a/browser/base/content/logos/lockwise.svg
+++ b/browser/base/content/logos/lockwise.svg
--- a/browser/base/content/test/static/browser_parsable_script.js
+++ b/browser/base/content/test/static/browser_parsable_script.js
@ -18,6 +18,8 @@ const kESModuleList = new Set([
  /browser\/res\/payments\/PaymentsStore\.js$/,
  /browser\/aboutlogins\/components\/.*\.js$/,
  /browser\/aboutlogins\/.*\.js$/,
+  /browser\/protections.js$/,
+  /browser\/lockwise-card.js$/,
 ]);

 // Normally we would use reflect.jsm to get Reflect.parse. However, if
--- a/browser/base/jar.mn
+++ b/browser/base/jar.mn
@ -19,6 +19,8 @@ browser.jar:
        content/browser/illustrations/error-malformed-url.svg (content/illustrations/error-malformed-url.svg)
        content/browser/illustrations/under-construction.svg (content/illustrations/under-construction.svg)
        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/aboutNetError.xhtml            (content/aboutNetError.xhtml)
        content/browser/aboutNetError.js               (content/aboutNetError.js)
        content/browser/aboutRobots-icon.png          (content/aboutRobots-icon.png)
--- a/browser/components/about/AboutProtectionsHandler.jsm
+++ b/browser/components/about/AboutProtectionsHandler.jsm
@ -11,6 +11,8 @@ const { XPCOMUtils } = ChromeUtils.import(
 const { RemotePages } = ChromeUtils.import(
  "resource://gre/modules/remotepagemanager/RemotePageManagerParent.jsm"
 );
+const { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
+
 XPCOMUtils.defineLazyServiceGetter(
  this,
  "TrackingDBService",
@ -27,7 +29,13 @@ let idToTextMap = new Map([

 var AboutProtectionsHandler = {
  _inited: false,
-  _topics: ["OpenContentBlockingPreferences", "FetchContentBlockingEvents"],
+  _topics: [
+    "OpenAboutLogins",
+    "OpenContentBlockingPreferences",
+    "OpenSyncPreferences",
+    "FetchContentBlockingEvents",
+    "FetchUserLoginsData",
+  ],

  init() {
    this.receiveMessage = this.receiveMessage.bind(this);
@ -48,14 +56,39 @@ var AboutProtectionsHandler = {
    this.pageListener.destroy();
  },

+  /**
+   * Retrieves login data for the user.
+   *
+   * @return {{ isLoggedIn: Boolean,
+   *            numberOfLogins: Number,
+   *            numberOfSyncedDevices: Number }}
+   *         The login data.
+   */
+  getLoginData() {
+    const logins = Services.logins.countLogins("", "", "");
+
+    const isLoggedIn = logins > 0;
+    return {
+      isLoggedIn,
+      numberOfLogins: logins,
+      numberOfSyncedDevices: 0,
+    };
+  },
+
  receiveMessage(aMessage) {
    let win = aMessage.target.browser.ownerGlobal;
    switch (aMessage.name) {
+      case "OpenAboutLogins":
+        win.openTrustedLinkIn("about:logins", "tab");
+        break;
      case "OpenContentBlockingPreferences":
        win.openPreferences("privacy-trackingprotection", {
          origin: "about-protections",
        });
        break;
+      case "OpenSyncPreferences":
+        win.openTrustedLinkIn("about:preferences#sync", "tab");
+        break;
      case "FetchContentBlockingEvents":
        TrackingDBService.getEventsByDateRange(
          aMessage.data.from,
@ -85,6 +118,12 @@ var AboutProtectionsHandler = {
          }
        });
        break;
+      case "FetchUserLoginsData":
+        aMessage.target.sendAsyncMessage(
+          "SendUserLoginsData",
+          this.getLoginData()
+        );
+        break;
    }
  },
 };
--- a/browser/components/protections/.eslintrc.js
+++ b/browser/components/protections/.eslintrc.js
@ -0,0 +1,7 @@
+"use strict";
+
+module.exports = {
+  parserOptions: {
+    sourceType: "module",
+  },
+};
--- a/browser/components/protections/content/lockwise-card.js
+++ b/browser/components/protections/content/lockwise-card.js
@ -0,0 +1,106 @@
+/* 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 LockwiseCard {
+  constructor(document) {
+    this.doc = document;
+  }
+
+  /**
+   * Initializes message listeners/senders.
+   */
+  init() {
+    const openAboutLoginsButton = this.doc.getElementById(
+      "open-about-logins-button"
+    );
+    openAboutLoginsButton.addEventListener("click", () => {
+      RPMSendAsyncMessage("OpenAboutLogins");
+    });
+
+    const syncLink = this.doc.querySelector(".synced-devices-text a");
+    // Register a click handler for the anchor since it's not possible to navigate to about:preferences via href
+    syncLink.addEventListener("click", () => {
+      RPMSendAsyncMessage("OpenSyncPreferences");
+    });
+
+    RPMAddMessageListener("SendUserLoginsData", ({ data }) => {
+      // Once browser data for the user is retrieved, display it on the card's body
+      // section.
+      this.buildContent(data);
+    });
+
+    // Dispatch messages to retrieve data for the Lockwise  card.
+    RPMSendAsyncMessage("FetchUserLoginsData");
+  }
+
+  buildContent(data) {
+    const { isLoggedIn, numberOfLogins, numberOfSyncedDevices } = data;
+    const title = this.doc.getElementById("lockwise-title");
+    const headerContent = this.doc.getElementById("lockwise-header-content");
+    const lockwiseBodyContent = this.doc.getElementById(
+      "lockwise-body-content"
+    );
+
+    // Get the container for the content to display.
+    const container = isLoggedIn
+      ? lockwiseBodyContent.querySelector(".has-logins")
+      : lockwiseBodyContent.querySelector(".no-logins");
+    // Display the content
+    container.classList.remove("hidden");
+
+    if (isLoggedIn) {
+      title.textContent = "Firefox Lockwise";
+      headerContent.textContent =
+        "Securely store and sync your passwords to all your devices.";
+      this.renderContentForLoggedInUser(
+        container,
+        numberOfLogins,
+        numberOfSyncedDevices
+      );
+    } else {
+      title.textContent = "Never forget a password again";
+      headerContent.textContent =
+        "Firefox Lockwise securely stores your passwords in your browser.";
+    }
+  }
+
+  /**
+   * Displays the number of stored logins and synced devices for a user.
+   *
+   * @param {Element} container
+   *        The containing element for the content.
+   * @param {Number}  storedLogins
+   *        The number of browser-stored logins.
+   * @param {Number}  syncedDevices
+   *        The number of synced devices.
+   */
+  renderContentForLoggedInUser(container, storedLogins, syncedDevices) {
+    // Set the text for number of stored logins.
+    const numberOfLoginsBlock = container.querySelector(
+      ".number-of-logins.block"
+    );
+    numberOfLoginsBlock.textContent = storedLogins;
+
+    // Set the text for the number of synced devices.
+    const syncedDevicesBlock = container.querySelector(
+      ".number-of-synced-devices.block"
+    );
+    syncedDevicesBlock.textContent = syncedDevices;
+
+    const syncedDevicesText = container.querySelector(".synced-devices-text");
+    const textEl = syncedDevicesText.querySelector("span");
+    textEl.textContent =
+      syncedDevices > 0
+        ? `Syncing to ${syncedDevices} other devices.`
+        : "Not syncing to other devices.";
+
+    // Display the link for enabling sync if no synced devices are detected.
+    if (syncedDevices === 0) {
+      const syncLink = syncedDevicesText.querySelector("a");
+      syncLink.classList.remove("hidden");
+    }
+  }
+}
--- a/browser/components/protections/content/protections.css
+++ b/browser/components/protections/content/protections.css
@ -15,13 +15,29 @@
  --cookie-color-darker: #0073C3;
  --tracker-color: #2AC3A2;
  --tracker-color-darker: #229C82;
-  --fingerprinter-color: #FFBD4F;
-  --fingerprinter-color-darker: #ffA40C;
-  --cryptominer-color: #AFAFBB;
-  --cryptominer-color-darker: #88889A;
+  --orange: #FFBD4F;
+  --dark-orange: #ffA40C;
+  --grey: #AFAFBB;
+  --dark-grey: #88889A;
  --tab-highlight: var(--social-color); /* start with social selected */
+  --blue-60: #0060DF;
+  --blue-70: #003eaa;
+  --blue-80: #002275;
 }

+ a {
+  color: var(--blue-60);
+  text-decoration: none;
+ }
+
+ a:active {
+  color: var(--blue-70);
+ }
+
+ a:hover, a:active {
+  text-decoration: underline;
+ }
+
 body {
  background-color: var(--report-background);
  font: message-box;
@ -41,11 +57,11 @@ body[focuseddatatype=tracker] {
 }

 body[focuseddatatype=fingerprinter] {
-  --tab-highlight: var(--fingerprinter-color);
+  --tab-highlight: var(--orange);
 }

 body[focuseddatatype=cryptominer] {
-  --tab-highlight: var(--cryptominer-color);
+  --tab-highlight: var(--grey);
 }

 #report-title {
@ -59,14 +75,46 @@ body[focuseddatatype=cryptominer] {
  margin: 0 auto;
 }

-.etp-card .icon {
+.card-header button {
+  font-size: 0.95rem;
+  background-color: var(--blue-60);
+  border-radius: 2px;
+  border: none;
+  color: #FFFFFF;
+  cursor: pointer;
+  margin-inline-end: 15px;
+  margin-inline-start: 15px;
+  padding: 10px;
+  align-self: center;
+}
+
+.card-header button:hover {
+  background-color: var(--blue-70);
+}
+
+.card-header button:active {
+  background-color: var(--blue-80);
+}
+
+.report-card.lockwise-card .card-header {
+  grid-template-columns: 2fr 6fr 7fr;
+}
+
+.icon {
  width: 60px;
  height: 60px;
-  background: url("chrome://browser/skin/controlcenter/tracking-protection.svg") no-repeat center/cover;
  grid-column: 1;
  margin: 0 auto;
 }

+.etp-card .icon {
+  background: url("chrome://browser/skin/controlcenter/tracking-protection.svg") no-repeat center/cover;
+}
+
+.lockwise-card .icon {
+  background: url("chrome://browser/content/logos/lockwise.svg") no-repeat center/cover;
+}
+
 .report-card {
  display: grid;
  grid-template-columns: 100%;
@ -74,6 +122,7 @@ body[focuseddatatype=cryptominer] {
  border-radius: 3px;
  background-color: var(--card-background);
  box-shadow: var(--card-box-shadow);
+  margin-bottom: 25px;
 }

 .report-card .card-header,
@ -189,19 +238,19 @@ body[focuseddatatype=cryptominer] {
 }

 .fingerprinter-bar {
-  background-color: var(--fingerprinter-color);
+  background-color: var(--orange);
 }

 .hover-fingerprinter .fingerprinter-bar {
-  background-color: var(--fingerprinter-color-darker);
+  background-color: var(--dark-orange);
 }

 .cryptominer-bar {
-  background-color: var(--cryptominer-color);
+  background-color: var(--grey);
 }

 .hover-cryptominer .cryptominer-bar {
-  background-color: var(--cryptominer-color-darker);
+  background-color: var(--dark-grey);
 }

 .column-label {
@ -247,14 +296,14 @@ label[data-type="tracker"] {

 label[data-type="fingerprinter"] {
  background-image: url(chrome://browser/skin/controlcenter/fingerprinters.svg);
-  fill: var(--fingerprinter-color);
-  color: var(--fingerprinter-color);
+  fill: var(--orange);
+  color: var(--orange);
 }

 label[data-type="cryptominer"] {
  background-image: url(chrome://browser/skin/controlcenter/cryptominers.svg);
-  fill: var(--cryptominer-color);
-  color: var(--cryptominer-color);
+  fill: var(--grey);
+  color: var(--grey);
 }

 .hover-social label[for="tab-social"],
@ -297,3 +346,76 @@ label:hover {
 #tab-cryptominer:checked ~ #cryptominer {
  display: block;
 }
+
+/* Lockwise Card */
+
+#lockwise-body-content > .no-logins,
+#lockwise-body-content > .has-logins {
+  display: grid;
+  font-size: 0.875rem;
+  align-items: center;
+}
+
+#lockwise-body-content > .no-logins {
+  grid: 1fr / 50px 275px;
+  grid-gap: 0;
+}
+
+#lockwise-body-content > .has-logins {
+  grid: 1fr 1fr / minmax(70px, auto) 1fr;
+  grid-gap: 10px;
+}
+
+a.hidden,
+#lockwise-body-content .has-logins.hidden,
+#lockwise-body-content .no-logins.hidden {
+  display: none;
+}
+
+.number-of-logins {
+  background-color: var(--dark-grey);
+}
+
+.number-of-synced-devices {
+  background-color: var(--orange);
+}
+
+.lockwise-text-icon {
+  background-size: 16px 16px;
+  background-repeat: no-repeat;
+  background-position-x: 3px;
+  background-position-y: 5px;
+  padding: 4px 4px 4px 24px;
+  display: inline;
+}
+
+.lockwise-mobile-app-icon {
+  background: url("chrome://browser/content/logos/lockwise-mobile-app.svg") no-repeat center/cover;
+  width: 38px;
+  height: 35px;
+}
+
+.passwords-stored-text {
+  background-image: url("chrome://browser/skin/login.svg");
+}
+
+.synced-devices-text {
+  background-image: url("chrome://browser/skin/sync.svg");
+}
+
+.non-logged-in-user-content {
+  grid-column: 2;
+}
+
+.block {
+  border-radius: 4px;
+  text-align: center;
+  font-size: 1.125rem;
+  color: var(--card-background);
+  padding: 7px;
+  line-height: 18px;
+}
+
+.has-logins a {
+  margin-inline-start: 10px;
+}
--- a/browser/components/protections/content/protections.html
+++ b/browser/components/protections/content/protections.html
@ -10,7 +10,8 @@
    <link rel="stylesheet" type="text/css"
          href="chrome://browser/content/protections.css">
    <link rel="icon" href="chrome://global/skin/icons/warning.svg">
-    <script type="text/javascript" src="chrome://browser/content/protections.js"></script>
+    <script type="module" src="chrome://browser/content/protections.js"></script>
+    <script type="module" src="chrome://browser/content/lockwise-card.js"></script>
    <title>Protection Report</title>
  </head>

@ -83,6 +84,51 @@
          </div>
        </div>
      </div>
+      <!-- Markup for Lockwise card. -->
+      <section class="report-card lockwise-card">
+        <div class="card-header">
+          <div class="icon"></div>
+          <div class="wrapper">
+            <h3 id="lockwise-title" class="card-title">
+              <!-- Insert Lockwise card title here. -->
+            </h3>
+            <p id="lockwise-header-content" class="content">
+              <!-- Insert Lockwise header content here. -->
+            </p>
+          </div>
+          <button id="open-about-logins-button">Open in Firefox</button>
+        </div>
+        <div class="card-body">
+          <div id="lockwise-body-content" class="body-wrapper">
+            <div class="no-logins hidden">
+                <div class="lockwise-mobile-app-icon"></div>
+                <span>
+                  Get the <a target="_blank" href="https://lockwise.firefox.com/">Firefox Lockwise</a>
+                  app to take your passwords everywhere.
+                </span>
+            </div>
+            <div class="has-logins hidden">
+              <span class="number-of-logins block">
+                <!-- Display number of stored logins here. -->
+              </span>
+              <span class="lockwise-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>
+                  <!-- Display message for status of synced devices here. -->
+                </span>
+                <a class="hidden" href="" title="Go to sync preferences">Turn on sync…</a>
+              </span>
+            </div>
+           </div>
+          </div>
+        </div>
+      </section>
    </div>
  </body>
 </html>
--- a/browser/components/protections/content/protections.js
+++ b/browser/components/protections/content/protections.js
@ -4,6 +4,8 @@

 /* eslint-env mozilla/frame-script */

+import LockwiseCard from "./lockwise-card.js";
+
 document.addEventListener("DOMContentLoaded", e => {
  let todayInMs = Date.now();
  let weekAgoInMs = todayInMs - 7 * 24 * 60 * 60 * 1000;
@ -107,4 +109,8 @@ document.addEventListener("DOMContentLoaded", e => {
  RPMAddMessageListener("SendContentBlockingRecords", message => {
    createGraph(message.data);
  });
+
+  // Create the Lockwise card.
+  const lockwiseCard = new LockwiseCard(document);
+  lockwiseCard.init();
 });
--- a/browser/components/protections/jar.mn
+++ b/browser/components/protections/jar.mn
@ -3,6 +3,7 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.

 browser.jar:
+    content/browser/lockwise-card.js                      (content/lockwise-card.js)
    content/browser/protections.css                       (content/protections.css)
    content/browser/protections.html                      (content/protections.html)
    content/browser/protections.js                        (content/protections.js)
--- a/browser/components/protections/test/browser/browser.ini
+++ b/browser/components/protections/test/browser/browser.ini
@ -1,5 +1,7 @@
 [DEFAULT]
 support-files =
+  head.js
  !/browser/base/content/test/trackingUI/trackingPage.html

+[browser_protections_lockwise.js]
 [browser_protections_report_ui.js]
--- a/browser/components/protections/test/browser/browser_protections_lockwise.js
+++ b/browser/components/protections/test/browser/browser_protections_lockwise.js
@ -0,0 +1,102 @@
+/* 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 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"
+);
+
+const TEST_LOGIN2 = new nsLoginInfo(
+  "https://2.example.com/",
+  "https://2.example.com/",
+  null,
+  "user2",
+  "pass2",
+  "username",
+  "password"
+);
+
+add_task(async function() {
+  let tab = await BrowserTestUtils.openNewForegroundTab({
+    url: "about:protections",
+    gBrowser,
+  });
+
+  info("Check that the correct content is displayed for non-logged in users.");
+  await ContentTask.spawn(tab.linkedBrowser, {}, function() {
+    const noLoginsContent = content.document.querySelector(
+      "#lockwise-body-content .no-logins"
+    );
+    const hasLoginsContent = content.document.querySelector(
+      "#lockwise-body-content .has-logins"
+    );
+
+    ok(
+      ContentTaskUtils.is_visible(noLoginsContent),
+      "Content for user with no logins is shown."
+    );
+    ok(
+      ContentTaskUtils.is_hidden(hasLoginsContent),
+      "Content for user with logins is hidden."
+    );
+  });
+
+  info("Add a login and check that content for a logged in user is displayed.");
+  Services.logins.addLogin(TEST_LOGIN1);
+  await reloadTab(tab);
+
+  await ContentTask.spawn(tab.linkedBrowser, {}, function() {
+    const noLoginsContent = content.document.querySelector(
+      "#lockwise-body-content .no-logins"
+    );
+    const hasLoginsContent = content.document.querySelector(
+      "#lockwise-body-content .has-logins"
+    );
+    const numberOfLogins = hasLoginsContent.querySelector(
+      ".number-of-logins.block"
+    );
+
+    ok(
+      ContentTaskUtils.is_hidden(noLoginsContent),
+      "Content for user with no logins is hidden."
+    );
+    ok(
+      ContentTaskUtils.is_visible(hasLoginsContent),
+      "Content for user with logins is shown."
+    );
+    is(numberOfLogins.textContent, 1, "One stored login should be displayed");
+  });
+
+  info(
+    "Add another login and check the number of stored logins is updated after reload."
+  );
+  Services.logins.addLogin(TEST_LOGIN2);
+  await reloadTab(tab);
+
+  await ContentTask.spawn(tab.linkedBrowser, {}, function() {
+    const numberOfLogins = content.document.querySelector(
+      "#lockwise-body-content .has-logins .number-of-logins.block"
+    );
+
+    is(numberOfLogins.textContent, 2, "Two stored logins should be displayed");
+  });
+
+  // remove logins
+  Services.logins.removeLogin(TEST_LOGIN1);
+  Services.logins.removeLogin(TEST_LOGIN2);
+  await BrowserTestUtils.removeTab(tab);
+});
--- a/browser/components/protections/test/browser/head.js
+++ b/browser/components/protections/test/browser/head.js
@ -0,0 +1,13 @@
+/* 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-disable no-unused-vars */
+
+"use strict";
+
+async function reloadTab(tab) {
+  const tabReloaded = BrowserTestUtils.browserLoaded(gBrowser.selectedBrowser);
+  gBrowser.reloadTab(tab);
+  await tabReloaded;
+}