Commit 23fa3950 authored by Jared Wein's avatar Jared Wein
Browse files

Bug 1549809 - Live filter logins in the login list. r=MattN

Differential Revision: https://phabricator.services.mozilla.com/D30757

--HG--
extra : moz-landing-system : lando
parent d4307904
......@@ -11,6 +11,21 @@ class LoginFilter extends HTMLElement {
let loginFilterTemplate = document.querySelector("#login-filter-template");
this.attachShadow({mode: "open"})
.appendChild(loginFilterTemplate.content.cloneNode(true));
this.addEventListener("input", this);
}
handleEvent(event) {
switch (event.type) {
case "input": {
this.dispatchEvent(new CustomEvent("AboutLoginsFilterLogins", {
bubbles: true,
composed: true,
detail: event.originalTarget.value,
}));
break;
}
}
}
static get observedAttributes() {
......
......@@ -9,6 +9,11 @@
padding: 10px;
}
/* [hidden] isn't applying to elements in Shadow DOM. */
:host([hidden]) {
display: none;
}
:host(:hover) {
background-color: var(--grey-90-a10);
}
......
......@@ -21,6 +21,7 @@ class LoginList extends HTMLElement {
this.render();
window.addEventListener("AboutLoginsLoginSelected", this);
window.addEventListener("AboutLoginsFilterLogins", this);
}
render() {
......@@ -32,6 +33,28 @@ class LoginList extends HTMLElement {
handleEvent(event) {
switch (event.type) {
case "AboutLoginsFilterLogins": {
let query = event.detail.toLocaleLowerCase();
let matchingLoginGuids;
if (query) {
matchingLoginGuids = this._logins.filter(login => {
return login.hostname.toLocaleLowerCase().includes(query) ||
login.username.toLocaleLowerCase().includes(query);
}).map(login => login.guid);
} else {
matchingLoginGuids = this._logins.map(login => login.guid);
}
for (let listItem of this.shadowRoot.querySelectorAll("login-list-item")) {
if (matchingLoginGuids.includes(listItem.getAttribute("guid"))) {
if (listItem.hidden) {
listItem.hidden = false;
}
} else if (!listItem.hidden) {
listItem.hidden = true;
}
}
break;
}
case "AboutLoginsLoginSelected": {
if (this._selectedItem) {
if (this._selectedItem.getAttribute("guid") == event.detail.guid) {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment