Bug 1592467 - Add date to the breach banner. r=sfoster,fluent-reviewers,flod

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

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

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

@@ -312,6 +312,10 @@ input[name="password"] {
   position: relative;
 }
 
+.alert-date {
+  display: block;;
+}
+
 .alert-link {
   color: inherit;
   text-decoration: underline;

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

@@ -82,6 +82,7 @@ export default class LoginItem extends HTMLElement {
     this._timeUsed = this.shadowRoot.querySelector(".time-used");
     this._breachAlert = this.shadowRoot.querySelector(".breach-alert");
     this._breachAlertLink = this._breachAlert.querySelector(".alert-link");
+    this._breachAlertDate = this._breachAlert.querySelector(".alert-date");
     this._dismissBreachAlert = this._breachAlert.querySelector(
       ".dismiss-alert"
     );
@@ -155,6 +156,19 @@ export default class LoginItem extends HTMLElement {
     if (!this._breachAlert.hidden) {
       const breachDetails = this._breachesMap.get(this._login.guid);
       this._breachAlertLink.href = breachDetails.breachAlertURL;
+      if (breachDetails.BreachDate) {
+        let breachDate = new Date(breachDetails.BreachDate);
+        this._breachAlertDate.hidden = isNaN(breachDate);
+        if (!isNaN(breachDate)) {
+          document.l10n.setAttributes(
+            this._breachAlertDate,
+            "about-logins-breach-alert-date",
+            {
+              date: breachDate.getTime(),
+            }
+          );
+        }
+      }
     }
     this._vulnerableAlert.hidden =
       !this._vulnerableLoginsMap ||

browser/locales/en-US/browser/aboutLogins.ftl

@@ -172,6 +172,7 @@ breach-alert-text = Passwords were leaked or stolen from this website since you
 breach-alert-link = Learn more about this breach.
 breach-alert-dismiss =
     .title = Close this alert
+about-logins-breach-alert-date = This breach occurred on { DATETIME($date, day: "numeric", month: "long", year: "numeric") }
 
 ## Vulnerable Password notification