Bug 1549803 - Move the handling of the selected login list item to the login list. r=MattN
☠☠ backed out by 54f367c785cb ☠ ☠
authorJared Wein <jwein@mozilla.com>
Fri, 10 May 2019 18:32:06 +0000
changeset 532295 7e08cf4753a79d765acc9721c65104c229a3f5fd
parent 532294 452720b78ca75587668030394cfcb806aa48cbda
child 532296 5972961441c097e5b59dd9348715d31b459226c7
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");