commit afad455d94c8c85a2ccb3d0ad4d9937d76817d4b
parent ce8415d1e43ea5aa18dbcc21f6f94e0df578d624
Author: Sarah Chung <sachung@mozilla.com>
Date: Wed, 8 Oct 2025 18:45:14 +0000
Bug 1985580 - Update password rules tooltip r=emcminn,fchasen
This patch removes the common password requirement and the "create strong passwords" link to match the updated [designs](https://www.figma.com/design/vNbX4c0ws0L1qr0mxpKvsW/Fx-Backup?node-id=7709-77738&t=22iIPLYPPu51GO2j-0) for the password rules tooltip as part of the Fx Backup onboarding message flow.
Differential Revision: https://phabricator.services.mozilla.com/D267459
Diffstat:
3 files changed, 25 insertions(+), 86 deletions(-)
diff --git a/browser/components/backup/content/password-rules-tooltip.css b/browser/components/backup/content/password-rules-tooltip.css
@@ -15,16 +15,30 @@
ul {
margin: 0;
padding: 0;
- list-style: none;
+ text-align: left;
+ list-style-position: inside;
}
li {
- display: flex;
- align-items: start;
- gap: 0.5rem;
+ padding-left: 6px;
&:last-child {
- margin-block-start: 1rem;
+ margin-block-start: 0.5rem;
+ margin-block-end: 0.5rem;
+ }
+ }
+
+ .warning {
+ -moz-context-properties: fill, stroke;
+ list-style-image: url(chrome://global/skin/icons/warning.svg);
+ padding: 0;
+ color: var(--icon-color-critical);
+ fill: var(--icon-color-critical);
+ stroke: var(--icon-color-critical);
+
+ span {
+ position: relative;
+ top: -3px;
}
}
@@ -68,19 +82,10 @@
#password-rules-header {
margin-block-start: 0;
- font-size: 1rem;
-}
-
-.icon {
- -moz-context-properties: fill, stroke;
- fill: currentColor;
- stroke: currentColor;
-}
-
-.success {
- color: var(--icon-color-success);
+ font-size: 14px;
+ font-weight: 600;
}
-.warning {
- color: var(--icon-color-warning);
+.rule-description {
+ font-size: 12px;
}
diff --git a/browser/components/backup/content/password-rules-tooltip.mjs b/browser/components/backup/content/password-rules-tooltip.mjs
@@ -11,10 +11,8 @@ import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
*/
export default class PasswordRulesTooltip extends MozLitElement {
static properties = {
- hasCommon: { type: Boolean },
hasEmail: { type: Boolean },
tooShort: { type: Boolean },
- supportBaseLink: { type: String },
};
static get queries() {
@@ -25,34 +23,11 @@ export default class PasswordRulesTooltip extends MozLitElement {
constructor() {
super();
- this.hasCommon = false;
this.hasEmail = false;
this.tooShort = false;
- this.supportBaseLink = "";
- }
-
- getRuleStateConstants(hasInvalidCondition) {
- if (hasInvalidCondition) {
- return {
- class: "warning",
- icon: "chrome://global/skin/icons/warning.svg",
- l10nId: "password-rules-a11y-warning",
- };
- }
-
- return {
- class: "success",
- icon: "chrome://global/skin/icons/check-filled.svg",
- l10nId: "password-rules-a11y-success",
- };
}
render() {
- let lengthConstants = this.getRuleStateConstants(this.tooShort);
- let emailConstants = this.getRuleStateConstants(this.hasEmail);
- // TODO: (bug 1905140) read list of common passwords - default to success state for now
- let commonConstants = this.getRuleStateConstants(this.hasCommon);
-
return html`
<link
rel="stylesheet"
@@ -64,52 +39,18 @@ export default class PasswordRulesTooltip extends MozLitElement {
data-l10n-id="password-rules-header"
></h2>
<ul>
- <li>
- <img
- data-l10n-id=${lengthConstants.l10nId}
- class="icon ${lengthConstants.class}"
- src=${lengthConstants.icon}
- />
+ <li class=${this.tooShort && "warning"}>
<span
data-l10n-id="password-rules-length-description"
class="rule-description"
></span>
</li>
- <li>
- <img
- data-l10n-id=${emailConstants.l10nId}
- class="icon ${emailConstants.class}"
- src=${emailConstants.icon}
- />
+ <li class=${this.hasEmail && "warning"}>
<span
data-l10n-id="password-rules-email-description"
class="rule-description"
></span>
</li>
- <li>
- <img
- data-l10n-id=${commonConstants.l10nId}
- class="icon ${commonConstants.class}"
- src=${commonConstants.icon}
- />
- <span
- data-l10n-id="password-rules-common-description"
- class="rule-description"
- ></span>
- </li>
- <li>
- <img
- class="icon"
- src="chrome://browser/skin/preferences/category-privacy-security.svg"
- />
- <span data-l10n-id="password-rules-disclaimer"
- ><a
- data-l10n-name="password-support-link"
- target="_blank"
- href=${`${this.supportBaseLink}password-strength`}
- ></a
- ></span>
- </li>
</ul>
</div>
`;
diff --git a/browser/components/backup/content/password-validation-inputs.mjs b/browser/components/backup/content/password-validation-inputs.mjs
@@ -14,7 +14,6 @@ import "chrome://browser/content/backup/password-rules-tooltip.mjs";
*/
export default class PasswordValidationInputs extends MozLitElement {
static properties = {
- _hasCommon: { type: Boolean, state: true },
_hasEmail: { type: Boolean, state: true },
_passwordsMatch: { type: Boolean, state: true },
_passwordsValid: { type: Boolean, state: true },
@@ -25,7 +24,6 @@ export default class PasswordValidationInputs extends MozLitElement {
* track the focus state so that we can keep the tooltip open.
*/
_tooltipFocus: { type: Boolean, state: true },
- supportBaseLink: { type: String },
createPasswordLabelL10nId: {
type: String,
reflect: true,
@@ -44,9 +42,7 @@ export default class PasswordValidationInputs extends MozLitElement {
constructor() {
super();
- this.supportBaseLink = "";
this._tooShort = true;
- this._hasCommon = false;
this._hasEmail = false;
this._passwordsMatch = false;
this._passwordsValid = false;
@@ -56,7 +52,6 @@ export default class PasswordValidationInputs extends MozLitElement {
reset() {
this.formEl.reset();
this._showRules = false;
- this._hasCommon = false;
this._hasEmail = false;
this._tooShort = true;
this._passwordsMatch = false;
@@ -181,10 +176,8 @@ export default class PasswordValidationInputs extends MozLitElement {
<password-rules-tooltip
id="password-rules"
class=${!this._showRules && !this._tooltipFocus ? "hidden" : ""}
- .hasCommon=${this._hasCommon}
.hasEmail=${this._hasEmail}
.tooShort=${this._tooShort}
- .supportBaseLink=${this.supportBaseLink}
@focus=${this.handleTooltipFocus}
@blur=${this.handleTooltipBlur}
></password-rules-tooltip>
