1 files changed, 99 insertions, 0 deletions
diff --git a/browser/components/aboutlogins/content/components/login-filter.mjs b/browser/components/aboutlogins/content/components/login-filter.mjs
new file mode 100644
index 0000000000..e5b89327d6
--- /dev/null
+++ b/browser/components/aboutlogins/content/components/login-filter.mjs
@@ -0,0 +1,99 @@
+/* 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 { recordTelemetryEvent } from "../aboutLoginsUtils.mjs";
+
+export default class LoginFilter extends HTMLElement {
+  get #loginList() {
+    return document.querySelector("login-list");
+  }
+
+  connectedCallback() {
+    if (this.shadowRoot) {
+      return;
+    }
+
+    let loginFilterTemplate = document.querySelector("#login-filter-template");
+    let shadowRoot = this.attachShadow({ mode: "open" });
+    document.l10n.connectRoot(shadowRoot);
+    shadowRoot.appendChild(loginFilterTemplate.content.cloneNode(true));
+
+    this._input = this.shadowRoot.querySelector("input");
+
+    this.addEventListener("input", this);
+    this._input.addEventListener("keydown", this);
+    window.addEventListener("AboutLoginsFilterLogins", this);
+  }
+
+  focus() {
+    this._input.focus();
+  }
+
+  handleEvent(event) {
+    switch (event.type) {
+      case "AboutLoginsFilterLogins":
+        this.#filterLogins(event.detail);
+        break;
+      case "input":
+        this.#input(event.originalTarget.value);
+        break;
+      case "keydown":
+        this.#keyDown(event);
+        break;
+    }
+  }
+
+  #filterLogins(filterText) {
+    if (this.value != filterText) {
+      this.value = filterText;
+    }
+  }
+
+  #input(value) {
+    this._dispatchFilterEvent(value);
+  }
+
+  #keyDown(e) {
+    switch (e.code) {
+      case "ArrowUp":
+        e.preventDefault();
+        this.#loginList.selectPrevious();
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        this.#loginList.selectNext();
+        break;
+      case "Escape":
+        e.preventDefault();
+        this.value = "";
+        break;
+      case "Enter":
+        e.preventDefault();
+        this.#loginList.clickSelected();
+        break;
+    }
+  }
+
+  get value() {
+    return this._input.value;
+  }
+
+  set value(val) {
+    this._input.value = val;
+    this._dispatchFilterEvent(val);
+  }
+
+  _dispatchFilterEvent(value) {
+    this.dispatchEvent(
+      new CustomEvent("AboutLoginsFilterLogins", {
+        bubbles: true,
+        composed: true,
+        detail: value,
+      })
+    );
+
+    recordTelemetryEvent({ object: "list", method: "filter" });
+  }
+}
+customElements.define("login-filter", LoginFilter);