Bug 1549810 - Use the search filter when updating the login list. r=MattN
authorJared Wein <jwein@mozilla.com>
Thu, 30 May 2019 16:26:02 +0000
changeset 476227 807c329de7ea4079b2b7130c3f62c359b40e3769
parent 476226 3034b68282fa8c0e96bb789911fb2186093525a1
child 476228 46fc2a3d94d1ff5bc9ec25c6b96664607e553ab5
push id36090
push usernbeleuzu@mozilla.com
push dateFri, 31 May 2019 03:59:09 +0000
treeherdermozilla-central@63568b2a8178 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs1549810
milestone69.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1549810 - Use the search filter when updating the login list. r=MattN Differential Revision: https://phabricator.services.mozilla.com/D33035
browser/components/aboutlogins/content/components/login-filter.js
browser/components/aboutlogins/content/components/login-list.js
--- a/browser/components/aboutlogins/content/components/login-filter.js
+++ b/browser/components/aboutlogins/content/components/login-filter.js
@@ -17,21 +17,17 @@ class LoginFilter extends ReflectedFluen
     this.reflectFluentStrings();
 
     this.addEventListener("input", this);
   }
 
   handleEvent(event) {
     switch (event.type) {
       case "input": {
-        this.dispatchEvent(new CustomEvent("AboutLoginsFilterLogins", {
-          bubbles: true,
-          composed: true,
-          detail: event.originalTarget.value,
-        }));
+        this.dispatchFilterEvent(event.originalTarget.value);
         break;
       }
     }
   }
 
   static get reflectedFluentIDs() {
     return ["placeholder"];
   }
@@ -41,20 +37,29 @@ class LoginFilter extends ReflectedFluen
   }
 
   get value() {
     return this.shadowRoot.querySelector("input").value;
   }
 
   set value(val) {
     this.shadowRoot.querySelector("input").value = val;
+    this.dispatchFilterEvent(val);
   }
 
   handleSpecialCaseFluentString(attrName) {
     if (attrName != "placeholder") {
       return false;
     }
 
     this.shadowRoot.querySelector("input").placeholder = this.getAttribute(attrName);
     return true;
   }
+
+  dispatchFilterEvent(value) {
+    this.dispatchEvent(new CustomEvent("AboutLoginsFilterLogins", {
+      bubbles: true,
+      composed: true,
+      detail: value,
+    }));
+  }
 }
 customElements.define("login-filter", LoginFilter);
--- a/browser/components/aboutlogins/content/components/login-list.js
+++ b/browser/components/aboutlogins/content/components/login-list.js
@@ -3,16 +3,17 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* globals ReflectedFluentElement, LoginListItem */
 
 class LoginList extends ReflectedFluentElement {
   constructor() {
     super();
     this._logins = [];
+    this._filter = "";
     this._selectedItem = null;
   }
 
   connectedCallback() {
     if (this.children.length) {
       return;
     }
     let loginListTemplate = document.querySelector("#login-list-template");
@@ -28,42 +29,50 @@ class LoginList extends ReflectedFluentE
   }
 
   render() {
     let list = this.shadowRoot.querySelector("ol");
     list.textContent = "";
     for (let login of this._logins) {
       list.append(new LoginListItem(login));
     }
-    document.l10n.setAttributes(this, "login-list", {count: this._logins.length});
+
+    let visibleLoginCount = this._applyFilter();
+    document.l10n.setAttributes(this, "login-list", {count: visibleLoginCount});
+  }
+
+  _applyFilter() {
+    let matchingLoginGuids;
+    if (this._filter) {
+      matchingLoginGuids = this._logins.filter(login => {
+        return login.hostname.toLocaleLowerCase().includes(this._filter) ||
+               login.username.toLocaleLowerCase().includes(this._filter);
+      }).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;
+      }
+    }
+
+    return matchingLoginGuids.length;
   }
 
   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;
-          }
-        }
-        document.l10n.setAttributes(this, "login-list", {count: matchingLoginGuids.length});
+        this._filter = event.detail.toLocaleLowerCase();
+        this.render();
         break;
       }
       case "AboutLoginsLoginSelected": {
         if (this._selectedItem) {
           if (this._selectedItem.getAttribute("guid") == event.detail.guid) {
             return;
           }
           this._selectedItem.classList.remove("selected");