Bug 1549803 - Move the handling of the selected login list item to the login list. r=MattN

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

--HG--
extra : moz-landing-system : lando

browser/components/aboutlogins/content/components/login-list-item.js

@@ -6,7 +6,6 @@ class LoginListItem extends HTMLElement {
   constructor(login) {
     super();
     this._login = login;
-    this._selected = false;
   }
 
   connectedCallback() {
@@ -21,11 +20,9 @@ class LoginListItem extends HTMLElement {
     this.render();
 
     this.addEventListener("click", this);
-    window.addEventListener("AboutLoginsLoginSelected", this);
   }
 
   render() {
-    this.classList.toggle("selected", this._selected);
     this.setAttribute("guid", this._login.guid);
     this.shadowRoot.querySelector(".hostname").textContent = this._login.hostname;
     this.shadowRoot.querySelector(".username").textContent = this._login.username;
@@ -33,13 +30,6 @@ class LoginListItem extends HTMLElement {
 
   handleEvent(event) {
     switch (event.type) {
-      case "AboutLoginsLoginSelected": {
-        if (this._selected != (event.detail.guid == this._login.guid)) {
-          this._selected = event.detail.guid == this._login.guid;
-          this.render();
-        }
-        break;
-      }
       case "click": {
         this.dispatchEvent(new CustomEvent("AboutLoginsLoginSelected", {
           bubbles: true,

browser/components/aboutlogins/content/components/login-list.js

@@ -8,6 +8,7 @@ class LoginList extends HTMLElement {
   constructor() {
     super();
     this._logins = [];
+    this._selectedItem = null;
   }
 
   connectedCallback() {
@@ -18,6 +19,8 @@ class LoginList extends HTMLElement {
     this.attachShadow({mode: "open"})
         .appendChild(loginListTemplate.content.cloneNode(true));
     this.render();
+
+    window.addEventListener("AboutLoginsLoginSelected", this);
   }
 
   render() {
@@ -27,6 +30,22 @@ class LoginList extends HTMLElement {
     }
   }
 
+  handleEvent(event) {
+    switch (event.type) {
+      case "AboutLoginsLoginSelected": {
+        if (this._selectedItem) {
+          if (this._selectedItem.getAttribute("guid") == event.detail.guid) {
+            return;
+          }
+          this._selectedItem.classList.toggle("selected", false);
+        }
+        this._selectedItem = this.shadowRoot.querySelector(`login-list-item[guid="${event.detail.guid}"]`);
+        this._selectedItem.classList.toggle("selected", true);
+        break;
+      }
+    }
+  }
+
   static get observedAttributes() {
     return ["login-list-header"];
   }

browser/components/aboutlogins/tests/mochitest/test_login_list.html

@@ -63,6 +63,12 @@ add_task(async function test_populated_list() {
      "login-list-item hostname should match");
   is(loginListItems[0].shadowRoot.querySelector(".username").textContent, TEST_LOGIN_1.username,
      "login-list-item username should match");
+
+  ok(!loginListItems[0].classList.contains("selected"), "The first item should not be selected by default");
+  ok(!loginListItems[1].classList.contains("selected"), "The second item should not be selected by default");
+  loginListItems[0].click();
+  ok(loginListItems[0].classList.contains("selected"), "The first item should be selected");
+  ok(!loginListItems[1].classList.contains("selected"), "The second item should still not be selected");
 });
 
 add_task(async function test_login_modified() {