Commit cad059b2 authored by Jared Wein's avatar Jared Wein
Browse files

Bug 1592467 - Add vulnerable password banner and share styles with the breach... 

Bug 1592467 - Add vulnerable password banner and share styles with the breach alert banner. r=sfoster

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

--HG--
extra : moz-landing-system : lando
parent 09a0a25b

browser/components/aboutlogins/content/aboutLogins.html

+10 −5
Original line number Diff line number Diff line
@@ -160,13 +160,18 @@ 
            </span>

          </div>

          <div class="breach-alert">

            <img class="breach-icon" src="chrome://global/skin/icons/warning.svg"/>

            <span class="breach-alert-text" data-l10n-id="breach-alert-text"></span>

            <a class="breach-alert-link" data-l10n-id="breach-alert-link" href="#" rel="noreferrer" target="_blank"></a>

            <button class="dismiss-breach-alert" data-l10n-id="breach-alert-dismiss">

              <img class="dismiss-breach-alert-icon" src="chrome://global/skin/icons/close.svg"/>

            <img class="alert-icon" src="chrome://global/skin/icons/warning.svg"/>

            <span class="alert-text" data-l10n-id="breach-alert-text"></span>

            <a class="alert-link" data-l10n-id="breach-alert-link" href="#" rel="noreferrer" target="_blank"></a>

            <button class="dismiss-alert" data-l10n-id="breach-alert-dismiss">

              <img class="dismiss-alert-icon" src="chrome://global/skin/icons/close.svg"/>

            </button>

          </div>

          <div class="vulnerable-alert">

            <img class="alert-icon" src="chrome://browser/content/aboutlogins/icons/vulnerable-password.svg"/>

            <span class="alert-text" data-l10n-id="about-logins-vulnerable-alert-text"></span>

            <a class="alert-link" data-l10n-id="about-logins-vulnerable-alert-link" href="#" rel="noreferrer" target="_blank"></a>

          </div>

          <div class="header">

            <div class="login-item-favicon-wrapper">

              <img class="login-item-favicon" src=""/>

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

+9 −10
Original line number Diff line number Diff line
@@ -295,6 +295,7 @@ input[name="password"] { 
  background-image: none;

}



.vulnerable-alert,

.breach-alert {

  border-radius: 8px;

  border: 1px solid var(--in-content-border-color);
@@ -311,13 +312,13 @@ input[name="password"] { 
  position: relative;

}



.breach-alert-link {

.alert-link {

  color: inherit;

  text-decoration: underline;

  font-weight: 600;

}



.breach-icon {

.alert-icon {

  position: absolute;

  inset-block-start: 10px;

  inset-inline-start: 10px;
@@ -325,7 +326,7 @@ input[name="password"] { 
  fill: var(--red-90);

}



.dismiss-breach-alert {

.dismiss-alert {

  border: none;

  padding: 0;

  margin: 0;
@@ -335,21 +336,18 @@ input[name="password"] { 
  min-width: auto;

  min-height: auto;

  line-height: 0;

}



.dismiss-breach-alert {

  background-color: transparent;

}



.dismiss-breach-alert:enabled:hover {

.dismiss-alert:enabled:hover {

  background-color: var(--grey-90-a20);

}



.dismiss-breach-alert:enabled:hover:active {

.dismiss-alert:enabled:hover:active {

  background-color: var(--grey-90-a30);

}



.dismiss-breach-alert-icon {

.dismiss-alert-icon {

  -moz-context-properties: fill, fill-opacity;

  fill-opacity: 0;

  fill: currentColor;
@@ -386,7 +384,7 @@ input[name="password"] { 
}



@media (-moz-windows-default-theme: 0) {

  .breach-icon {

  .alert-icon {

    fill: currentColor;

  }

}
@@ -401,6 +399,7 @@ input[name="password"] { 
      --edit-delete-button-color: #cfcfd1;

    }



    .vulnerable-alert,

    .breach-alert {

      box-shadow: 0 2px 8px 0 rgba(249,249,250,0.1);

    }

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

+37 −11
Original line number Diff line number Diff line
@@ -81,11 +81,16 @@ export default class LoginItem extends HTMLElement { 
    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(

      ".breach-alert-link"

    this._breachAlertLink = this._breachAlert.querySelector(".alert-link");

    this._dismissBreachAlert = this._breachAlert.querySelector(

      ".dismiss-alert"

    );

    this._dismissBreachAlert = this.shadowRoot.querySelector(

      ".dismiss-breach-alert"

    this._vulnerableAlert = this.shadowRoot.querySelector(".vulnerable-alert");

    this._vulnerableAlertLink = this._vulnerableAlert.querySelector(

      ".alert-link"

    );

    this._dismissVulnerableAlert = this._vulnerableAlert.querySelector(

      ".dismiss-alert"

    );



    this.render();
@@ -114,6 +119,8 @@ export default class LoginItem extends HTMLElement { 
  focus() {

    if (!this._breachAlert.hidden) {

      this._breachAlertLink.focus();

    } else if (!this._vulnerableAlert.hidden) {

      this._vulnerableAlertLink.focus();

    } else if (!this._editButton.disabled) {

      this._editButton.focus();

    } else if (!this._deleteButton.disabled) {
@@ -149,6 +156,13 @@ export default class LoginItem extends HTMLElement { 
      const breachDetails = this._breachesMap.get(this._login.guid);

      this._breachAlertLink.href = breachDetails.breachAlertURL;

    }

    this._vulnerableAlert.hidden =

      !this._vulnerableLoginsMap ||

      !this._vulnerableLoginsMap.has(this._login.guid) ||

      !this._breachAlert.hidden;

    if (!this._vulnerableAlert.hidden) {

      // TODO

    }

    document.l10n.setAttributes(this._timeCreated, "login-item-time-created", {

      timeCreated: this._login.timeCreated || "",

    });
@@ -267,6 +281,10 @@ export default class LoginItem extends HTMLElement { 
    });

  }



  dismissVulnerableAlert() {

    // TODO: Implement this

  }



  showLoginItemError(error) {

    this._error = error;

    this.render();
@@ -418,8 +436,12 @@ export default class LoginItem extends HTMLElement { 
          });

          return;

        }

        if (classList.contains("dismiss-breach-alert")) {

        if (classList.contains("dismiss-alert")) {

          if (event.currentTarget.closest(".breach-alert")) {

            this.dismissBreachAlert();

          } else if (event.currentTarget.closest(".vulnerable-alert")) {

            this.dismissVulnerableAlert();

          }

          return;

        }

        if (classList.contains("edit-button")) {
@@ -460,11 +482,15 @@ export default class LoginItem extends HTMLElement { 
        if (classList.contains("origin-input")) {

          this._handleOriginClick();

        }

        if (classList.contains("breach-alert-link")) {

        if (classList.contains("alert-link")) {

          if (event.currentTarget.closest(".breach-alert")) {

            this._recordTelemetryEvent({

              object: "existing_login",

              method: "learn_more_breach",

            });

          } else if (event.currentTarget.closest(".vulnerable-alert")) {

            // TODO: Add telemetry event

          }

        }

        break;

      }

browser/components/aboutlogins/tests/chrome/test_login_item.html

+1 −1
Original line number Diff line number Diff line
@@ -135,7 +135,7 @@ add_task(async function test_update_breaches() { 
  let correspondingBreach = TEST_BREACHES_MAP.get(gLoginItem._login.guid);

  let breachAlert = gLoginItem.shadowRoot.querySelector(".breach-alert");

  ok(!isHidden(breachAlert), "Breach alert should be visible");

  is(breachAlert.querySelector(".breach-alert-link").getAttribute("href"), correspondingBreach.breachAlertURL, "Breach alert link should be equal to the correspondingBreach.breachAlertURL.");

  is(breachAlert.querySelector(".alert-link").getAttribute("href"), correspondingBreach.breachAlertURL, "Breach alert link should be equal to the correspondingBreach.breachAlertURL.");

});



add_task(async function test_breach_alert_is_correctly_hidden() {