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
/*
* Note: For now, to display the tooltip for a <login-command-button> you need to
* use data-l10n-id attribute instead of the l10nId attribute in the tag.
*/
import {
html,
ifDefined,
when,
export const stylesTemplate = () => html`<link
rel="stylesheet"
/>
<link
rel="stylesheet"
/>`;
export const LoginCommandButton = ({
onClick,
l10nId,
icon,
variant,
disabled,
buttonText,
}) => html`<button
class=${variant}
data-l10n-id=${ifDefined(l10nId)}
?disabled=${disabled}
@click=${ifDefined(onClick)}
>
<img src=${ifDefined(icon)} role="presentation" />
<span data-l10n-id=${ifDefined(buttonText)}></span>
</button>`;
export class CreateLoginButton extends MozLitElement {
static get properties() {
return {
disabled: { type: Boolean, reflect: true },
};
}
constructor() {
super();
this.disabled = false;
}
render() {
return html`
${stylesTemplate()}
${LoginCommandButton({
l10nId: "create-login-button",
variant: "icon-button",
disabled: this.disabled,
})}
`;
}
}
export class EditButton extends MozLitElement {
static get properties() {
return {
disabled: { type: Boolean, reflect: true },
};
}
constructor() {
super();
this.disabled = false;
}
render() {
return html`
${stylesTemplate()}
${LoginCommandButton({
buttonText: "login-item-edit-button",
variant: "ghost-button",
disabled: this.disabled,
})}
`;
}
}
export class DeleteButton extends MozLitElement {
static get properties() {
return {
disabled: { type: Boolean, reflect: true },
};
}
constructor() {
super();
this.disabled = false;
}
render() {
return html` ${stylesTemplate()}
${LoginCommandButton({
buttonText: "about-logins-login-item-remove-button",
variant: "ghost-button",
disabled: this.disabled,
})}`;
}
}
export class CopyUsernameButton extends MozLitElement {
static get properties() {
return {
copiedText: { type: Boolean, reflect: true },
disabled: { type: Boolean, reflect: true },
};
}
constructor() {
super();
this.copiedText = false;
this.disabled = false;
}
render() {
this.className = this.copiedText ? "copied-button" : "copy-button";
return html` ${stylesTemplate()}
${when(
this.copiedText,
() =>
html`${LoginCommandButton({
buttonText: "login-item-copied-username-button-text",
disabled: this.disabled,
})}`,
() =>
html`${LoginCommandButton({
variant: "text-button",
buttonText: "login-item-copy-username-button-text",
disabled: this.disabled,
})}`
)}`;
}
}
export class CopyPasswordButton extends MozLitElement {
static get properties() {
return {
copiedText: { type: Boolean, reflect: true },
disabled: { type: Boolean, reflect: true },
};
}
constructor() {
super();
this.copiedText = false;
this.disabled = false;
}
render() {
this.className = this.copiedText ? "copied-button" : "copy-button";
return html` ${stylesTemplate()}
${when(
this.copiedText,
() =>
html`${LoginCommandButton({
buttonText: "login-item-copied-password-button-text",
disabled: this.disabled,
})}`,
() =>
html`${LoginCommandButton({
variant: "text-button",
buttonText: "login-item-copy-password-button-text",
disabled: this.disabled,
})}`
)}`;
}
}
customElements.define("copy-password-button", CopyPasswordButton);
customElements.define("copy-username-button", CopyUsernameButton);
customElements.define("delete-button", DeleteButton);
customElements.define("edit-button", EditButton);
customElements.define("create-login-button", CreateLoginButton);