Bug 1549803 - Move the handling of the selected login list item to the login list. r=MattN
authorJared Wein <jwein@mozilla.com>
Sat, 11 May 2019 03:29:41 +0000
changeset 532350 79cb58efc5bc0babf66f39f2039a99cfacd41c28
parent 532349 018fd8ddc6578dc2062b8cbcad9bae92e8fdffed
child 532351 dc57399bbbe3f1e526863e4f2467effc16ffedc2
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs1549803
milestone68.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 1549803 - Move the handling of the selected login list item to the login list. r=MattN Differential Revision: https://phabricator.services.mozilla.com/D30679
browser/components/aboutlogins/content/components/login-list-item.js
browser/components/aboutlogins/content/components/login-list.js
browser/components/aboutlogins/tests/mochitest/test_login_list.html
--- a/browser/components/aboutlogins/content/components/login-list-item.js
+++ b/browser/components/aboutlogins/content/components/login-list-item.js
@@ -1,50 +1,40 @@
 /* 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/. */
 
 class LoginListItem extends HTMLElement {
   constructor(login) {
     super();
     this._login = login;
-    this._selected = false;
   }
 
   connectedCallback() {
     if (this.children.length) {
       this.render();
       return;
     }
 
     let loginListItemTemplate = document.querySelector("#login-list-item-template");
     this.attachShadow({mode: "open"})
         .appendChild(loginListItemTemplate.content.cloneNode(true));
     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;
   }
 
   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,
           composed: true,
           detail: this._login,
         }));
       }
     }
--- a/browser/components/aboutlogins/content/components/login-list.js
+++ b/browser/components/aboutlogins/content/components/login-list.js
@@ -3,35 +3,54 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* globals LoginListItem */
 
 class LoginList extends HTMLElement {
   constructor() {
     super();
     this._logins = [];
+    this._selectedItem = null;
   }
 
   connectedCallback() {
     if (this.children.length) {
       return;
     }
     let loginListTemplate = document.querySelector("#login-list-template");
     this.attachShadow({mode: "open"})
         .appendChild(loginListTemplate.content.cloneNode(true));
     this.render();
+
+    window.addEventListener("AboutLoginsLoginSelected", this);
   }
 
   render() {
     let list = this.shadowRoot.querySelector("ol");
     for (let login of this._logins) {
       list.append(new LoginListItem(login));
     }
   }
 
+  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"];
   }
 
   /* Fluent doesn't handle localizing into Shadow DOM yet so strings
      need to get reflected in to their targeted element. */
   attributeChangedCallback(attr, oldValue, newValue) {
     if (!this.shadowRoot) {
--- a/browser/components/aboutlogins/tests/mochitest/test_login_list.html
+++ b/browser/components/aboutlogins/tests/mochitest/test_login_list.html
@@ -58,16 +58,22 @@ add_task(async function test_populated_l
   await asyncElementRendered();
   let loginListItems = gLoginList.shadowRoot.querySelectorAll("login-list-item");
   is(loginListItems.length, 2, "Both logins should be displayed");
   is(loginListItems[0].getAttribute("guid"), TEST_LOGIN_1.guid, "login-list-item should have correct guid attribute");
   is(loginListItems[0].shadowRoot.querySelector(".hostname").textContent, TEST_LOGIN_1.hostname,
      "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() {
   let modifiedLogin = Object.assign(TEST_LOGIN_1, {username: "user11"});
   gLoginList.loginModified(modifiedLogin);
   await asyncElementRendered();
   let loginListItems = gLoginList.shadowRoot.querySelectorAll("login-list-item");
   is(loginListItems.length, 2, "Both logins should be displayed");