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