1 files changed, 69 insertions, 0 deletions
diff --git a/toolkit/components/reader/color-input.mjs b/toolkit/components/reader/color-input.mjs
new file mode 100644
index 0000000000..1c460dac3e
--- /dev/null
+++ b/toolkit/components/reader/color-input.mjs
@@ -0,0 +1,69 @@
+/* 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";
+
+/**
+ * @tagname color-input
+ * @property {string} color - The initial color value as a hex code.
+ * @property {string} propName - The property that the color input sets.
+ * @property {string} l10nId - l10nId for label text.
+ */
+export default class ColorInput extends MozLitElement {
+  static properties = {
+    color: { type: String },
+    propName: { type: String, attribute: "prop-name" },
+    l10nId: { type: String, attribute: "data-l10n-id" },
+  };
+
+  static queries = {
+    inputEl: "#color-swatch",
+  };
+
+  handleColorInput(event) {
+    this.color = event.target.value;
+    this.dispatchEvent(
+      new CustomEvent("color-picked", {
+        detail: this.color,
+      })
+    );
+  }
+
+  /* Function to launch color picker when the user clicks anywhere in the container. */
+  handleClick(event) {
+    // If the user directly clicks the color swatch, no need to propagate click.
+    if (event.target.matches("input")) {
+      return;
+    }
+    this.inputEl.click();
+  }
+
+  render() {
+    return html`
+      <link
+        rel="stylesheet"
+        href="chrome://global/content/reader/color-input.css"
+      />
+      <div class="color-input-container" @click="${this.handleClick}">
+        <input
+          type="color"
+          name="${this.propName}"
+          .value="${this.color}"
+          id="color-swatch"
+          @input="${this.handleColorInput}"
+        />
+        <label for="color-swatch" data-l10n-id=${this.l10nId}></label>
+        <div class="icon-container">
+          <img
+            class="icon"
+            role="presentation"
+            src="chrome://global/skin/icons/edit-outline.svg"
+          />
+        </div>
+      </div>
+    `;
+  }
+}
+customElements.define("color-input", ColorInput);