diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /browser/components/aboutlogins/content/components/login-command-button.mjs | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'browser/components/aboutlogins/content/components/login-command-button.mjs')
-rw-r--r-- | browser/components/aboutlogins/content/components/login-command-button.mjs | 187 |
1 files changed, 187 insertions, 0 deletions
diff --git a/browser/components/aboutlogins/content/components/login-command-button.mjs b/browser/components/aboutlogins/content/components/login-command-button.mjs new file mode 100644 index 0000000000..d8d195bfcc --- /dev/null +++ b/browser/components/aboutlogins/content/components/login-command-button.mjs @@ -0,0 +1,187 @@ +/* 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/. */ + +/* + * 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. + * Bug 1844869 will make an attempt to fix this. + */ + +import { + html, + ifDefined, + when, +} from "chrome://global/content/vendor/lit.all.mjs"; +import { MozLitElement } from "chrome://global/content/lit-utils.mjs"; + +export const stylesTemplate = () => html`<link + rel="stylesheet" + href="chrome://global/skin/in-content/common.css" + /> + <link + rel="stylesheet" + href="chrome://browser/content/aboutlogins/components/login-command-button.css" + />`; + +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", + icon: "chrome://global/skin/icons/plus.svg", + 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", + icon: "chrome://global/skin/icons/edit.svg", + 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", + icon: "chrome://global/skin/icons/delete.svg", + 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", + icon: "chrome://global/skin/icons/check.svg", + 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", + icon: "chrome://global/skin/icons/check.svg", + 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); |