Bug 1592467 - Add date to the breach banner. r=sfoster,fluent-reviewers,flod
☠☠ backed out by 62b434d3602a ☠ ☠
authorJared Wein <jwein@mozilla.com>
Fri, 27 Mar 2020 02:28:37 +0000
changeset 520686 242b4157658fb75206075a8fe522fab70e857d44
parent 520685 464d4a60bb1da1d6be9e6bc73970be2dc320dcb3
child 520687 86f9d59bb2216b06a7c59209fc93c1c0c7714fc6
push id111253
push userjwein@mozilla.com
push dateFri, 27 Mar 2020 02:31:31 +0000
treeherderautoland@7f78c8fb5c6e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerssfoster, fluent-reviewers, flod
bugs1592467
milestone76.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1592467 - Add date to the breach banner. r=sfoster,fluent-reviewers,flod Differential Revision: https://phabricator.services.mozilla.com/D68105
browser/components/aboutlogins/content/components/login-item.css
browser/components/aboutlogins/content/components/login-item.js
browser/locales/en-US/browser/aboutLogins.ftl
--- a/browser/components/aboutlogins/content/components/login-item.css
+++ b/browser/components/aboutlogins/content/components/login-item.css
@@ -307,16 +307,20 @@ input[name="password"] {
   line-height: 1.4;
   padding-block: 12px;
   padding-inline-start: 36px;
   padding-inline-end: 92px;
   margin-block-end: 40px;
   position: relative;
 }
 
+.alert-date {
+  display: block;;
+}
+
 .alert-link {
   color: inherit;
   text-decoration: underline;
   font-weight: 600;
 }
 
 .alert-icon {
   position: absolute;
--- a/browser/components/aboutlogins/content/components/login-item.js
+++ b/browser/components/aboutlogins/content/components/login-item.js
@@ -77,16 +77,17 @@ export default class LoginItem extends H
       ".login-item-favicon-wrapper"
     );
     this._title = this.shadowRoot.querySelector(".login-item-title");
     this._timeCreated = this.shadowRoot.querySelector(".time-created");
     this._timeChanged = this.shadowRoot.querySelector(".time-changed");
     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"
     );
     this._vulnerableAlert = this.shadowRoot.querySelector(".vulnerable-alert");
     this._vulnerableAlertLink = this._vulnerableAlert.querySelector(
       ".alert-link"
     );
     this._dismissVulnerableAlert = this._vulnerableAlert.querySelector(
@@ -150,16 +151,29 @@ export default class LoginItem extends H
     }
     this._errorMessage.hidden = !this._error;
 
     this._breachAlert.hidden =
       !this._breachesMap || !this._breachesMap.has(this._login.guid);
     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 ||
       !this._vulnerableLoginsMap.has(this._login.guid) ||
       !this._breachAlert.hidden;
     if (!this._vulnerableAlert.hidden) {
       this._vulnerableAlertLink.href = this._login.origin;
       document.l10n.setAttributes(
--- a/browser/locales/en-US/browser/aboutLogins.ftl
+++ b/browser/locales/en-US/browser/aboutLogins.ftl
@@ -167,16 +167,17 @@ confirm-discard-changes-dialog-confirm-b
 
 ## Breach Alert notification
 
 about-logins-breach-alert-title = Website Breach
 breach-alert-text = Passwords were leaked or stolen from this website since you last updated your login details. Change your password to protect your account.
 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
 
 about-logins-vulnerable-alert-title = Vulnerable Password
 about-logins-vulnerable-alert-text = This password was leaked or stolen in another company’s data breach. Reusing credentials puts all of your accounts at risk. To improve your online security, change this password.
 # Variables:
 #   $hostname (String) - The hostname of the website associated with the login, e.g. "example.com"
 about-logins-vulnerable-alert-link = Go to { $hostname }