Bug 1559365: UI indication of breached logins r=jaws

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

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

browser/components/BrowserGlue.jsm

@@ -103,6 +103,7 @@ let LEGACY_ACTORS = {
       },
       messages: [
         "AboutLogins:AllLogins",
+        "AboutLogins:UpdateBreaches",
         "AboutLogins:LoginAdded",
         "AboutLogins:LoginModified",
         "AboutLogins:LoginRemoved",

browser/components/aboutlogins/AboutLoginsChild.jsm

@@ -111,6 +111,9 @@ class AboutLoginsChild extends ActorChild {
       case "AboutLogins:AllLogins":
         this.sendToContent("AllLogins", message.data);
         break;
+      case "AboutLogins:UpdateBreaches":
+        this.sendToContent("UpdateBreaches", message.data);
+        break;
       case "AboutLogins:LoginAdded":
         this.sendToContent("LoginAdded", message.data);
         break;

browser/components/aboutlogins/AboutLoginsParent.jsm

@@ -24,6 +24,11 @@ ChromeUtils.defineModuleGetter(
   "MigrationUtils",
   "resource:///modules/MigrationUtils.jsm"
 );
+ChromeUtils.defineModuleGetter(
+  this,
+  "RemoteSettings",
+  "resource://services-settings/remote-settings.js"
+);
 ChromeUtils.defineModuleGetter(
   this,
   "Services",
@@ -175,9 +180,12 @@ var AboutLoginsParent = {
         this._subscribers.add(message.target);
 
         let messageManager = message.target.messageManager;
+        const logins = await this.getAllLogins();
+        messageManager.sendAsyncMessage("AboutLogins:AllLogins", logins);
+        const breachesByLoginGUID = await this.getBreachesForLogins(logins);
         messageManager.sendAsyncMessage(
-          "AboutLogins:AllLogins",
-          await this.getAllLogins()
+          "AboutLogins:UpdateBreaches",
+          breachesByLoginGUID
         );
         break;
       }
@@ -363,4 +371,24 @@ var AboutLoginsParent = {
       throw e;
     }
   },
+
+  async getBreachesForLogins(logins) {
+    const breaches = await RemoteSettings("fxmonitor-breaches").get();
+    const breachHostMap = new Map();
+    for (const breach of breaches) {
+      breachHostMap.set(breach.Domain, breach);
+    }
+    const breachesByLoginGUID = new Map();
+    for (const login of logins) {
+      const loginURI = Services.io.newURI(login.origin);
+      const breach = breachHostMap.get(loginURI.host) || false;
+      if (
+        breach &&
+        login.timePasswordChanged < new Date(breach.BreachDate).getTime()
+      ) {
+        breachesByLoginGUID.set(login.guid, breach);
+      }
+    }
+    return breachesByLoginGUID;
+  },
 };

browser/components/aboutlogins/content/aboutLogins.js

@@ -39,6 +39,10 @@ window.addEventListener("AboutLoginsChromeToContent", event => {
       gElements.loginList.setLogins(event.detail.value);
       break;
     }
+    case "UpdateBreaches": {
+      gElements.loginList.updateBreaches(event.detail.value);
+      break;
+    }
     case "LoginAdded": {
       gElements.loginList.loginAdded(event.detail.value);
       gElements.loginItem.loginAdded(event.detail.value);

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

@@ -29,6 +29,10 @@
   background-color: var(--in-content-box-background-hover);
 }
 
+:host(.breached) {
+    border-inline-start-color: var(--in-content-border-invalid);
+}
+
 .title {
   font-weight: bold;
 }

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

@@ -79,6 +79,12 @@ export default class LoginList extends HTMLElement {
         listItem.setAttribute("aria-selected", "true");
         this._list.setAttribute("aria-activedescendant", listItem.id);
       }
+      if (
+        this._breachesByLoginGUID &&
+        this._breachesByLoginGUID.has(login.guid)
+      ) {
+        listItem.classList.add("breached");
+      }
       this._list.append(listItem);
     }
 
@@ -162,6 +168,14 @@ export default class LoginList extends HTMLElement {
     }
   }
 
+  /**
+   * @param {Map} breachesByLoginGUID A Map of breaches by login GUIDs used for displaying breached login indicators.
+   */
+  updateBreaches(breachesByLoginGUID) {
+    this._breachesByLoginGUID = breachesByLoginGUID;
+    this.render();
+  }
+
   /**
    * @param {login} login A login that was added to storage.
    */