Bug 1549803 - Move the handling of the selected login list item to the login list. r=MattN
☠☠ backed out by 1be22e2d35d1 ☠ ☠
authorJared Wein <jwein@mozilla.com>
Sat, 11 May 2019 01:38:20 +0000
changeset 532316 af805180a1e6329754d626a62d17bdca87ffc2b0
parent 532315 aa8595d46694869462197ef452f787c70b518d52
child 532317 5b35987c1ac477956899f2cb929218e019db20e0
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");