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);