firefox-main/browser/components/backup/content/password-rules-tooltip.mjs (file symbol)

Source code

Revision control

Copy as Markdown

Other Tools

/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
import { html } from "chrome://global/content/vendor/lit.all.mjs";
import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
/**
* The widget for enabling password protection if the backup is not yet
* encrypted.
*/
export default class PasswordRulesTooltip extends MozLitElement {
static properties = {
hasEmail: { type: Boolean },
tooShort: { type: Boolean },
open: { type: Boolean },
};
static get queries() {
return {
passwordRulesEl: "#password-rules-wrapper",
};
}
constructor() {
super();
this.hasEmail = false;
this.tooShort = false;
this._onResize = null;
}
_debounce(fn, delay) {
let timeout;
return (...args) => {
clearTimeout(timeout);
timeout = setTimeout(() => fn(...args), delay);
};
}
_handleResize() {
if (this.open) {
this.positionPopover();
}
}
connectedCallback() {
super.connectedCallback();
this._onResize = this._debounce(() => this._handleResize(), 200);
window.addEventListener("resize", this._onResize);
}
disconnectedCallback() {
super.disconnectedCallback();
if (this._onResize) {
window.removeEventListener("resize", this._onResize);
}
}
show() {
this.passwordRulesEl.showPopover();
this.positionPopover();
}
hide() {
this.passwordRulesEl.hidePopover();
}
positionPopover() {
const anchorRect = this.getBoundingClientRect();
const popover = this.passwordRulesEl;
const isWideViewport = window.innerWidth >= 1200;
const isRTL = document.dir === "rtl";
// Calculate top position
const topPos = isWideViewport
? anchorRect.top + anchorRect.height / 2
: anchorRect.bottom;
popover.style.top = `${topPos}px`;
popover.style.right = isRTL ? "auto" : "inherit";
popover.style.left = isRTL ? "inherit" : "auto";
}
_onBeforeToggle(e) {
this.open = e.newState == "open";
}
render() {
return html`
<link
rel="stylesheet"
href="chrome://browser/content/backup/password-rules-tooltip.css"
/>
<div
id="password-rules-wrapper"
role="tooltip"
aria-describedby="password-rules-header"
popover="manual"
@beforetoggle=${this._onBeforeToggle}
>
<h2
id="password-rules-header"
data-l10n-id="password-rules-header"
></h2>
<ul>
<li class=${this.tooShort && "warning"}>
<span
data-l10n-id="password-rules-length-description"
class="rule-description"
aria-labelledby="password-rules-header"
></span>
</li>
<li class=${this.hasEmail && "warning"}>
<span
data-l10n-id="password-rules-email-description"
class="rule-description"
aria-labelledby="password-rules-header"
></span>
</li>
</ul>
</div>
`;
}
}
customElements.define("password-rules-tooltip", PasswordRulesTooltip);