Bug 1549803 - Move styling of LoginListItem to an external stylesheet. r=MattN
☠☠ backed out by 1be22e2d35d1 ☠ ☠
authorJared Wein <jwein@mozilla.com>
Fri, 10 May 2019 22:38:50 +0000
changeset 532315 aa8595d46694869462197ef452f787c70b518d52
parent 532314 fe75205edc195b77e0a90d8703ddb07d1c7ed4c0
child 532316 af805180a1e6329754d626a62d17bdca87ffc2b0
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 styling of LoginListItem to an external stylesheet. r=MattN Differential Revision: https://phabricator.services.mozilla.com/D30678
browser/components/aboutlogins/content/aboutLogins.html
browser/components/aboutlogins/content/components/login-list-item.css
browser/components/aboutlogins/content/components/login-list-item.js
browser/components/aboutlogins/jar.mn
browser/components/aboutlogins/tests/mochitest/test_login_list.html
--- a/browser/components/aboutlogins/content/aboutLogins.html
+++ b/browser/components/aboutlogins/content/aboutLogins.html
@@ -33,23 +33,19 @@
     <template id="login-list-template">
       <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/login-list.css">
       <h2></h2>
       <ol>
       </ol>
     </template>
 
     <template id="login-list-item-template">
-      <style>
-        :host(.selected) {
-          font-weight: bold;
-        }
-      </style>
-      <span class="login-list-item-hostname"></span>
-      <span class="login-list-item-username"></span>
+      <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/login-list-item.css">
+      <span class="hostname"></span>
+      <span class="username"></span>
     </template>
 
     <template id="login-item-template">
       <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/login-item.css">
       <h2 class="header"></h2>
       <button class="delete-button"></button>
       <label>
         <span class="hostname-label field-label"></span>
new file mode 100644
--- /dev/null
+++ b/browser/components/aboutlogins/content/components/login-list-item.css
@@ -0,0 +1,39 @@
+/* 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/. */
+
+:host {
+  border-inline-start: 4px solid transparent;
+  border-bottom: 1px solid var(--grey-30);
+  display: block;
+  padding: 10px;
+}
+
+:host(:hover) {
+  background-color: var(--grey-90-a10);
+}
+
+:host(:hover:active) {
+  background-color: var(--grey-90-a20);
+}
+
+:host(.selected) {
+  border-inline-start-color: var(--blue-40);
+  background-color: var(--grey-20);
+}
+
+:host(.selected:hover) {
+}
+
+:host(.selected:hover:active) {
+  background-color: var(--grey-30);
+}
+
+.hostname {
+  font-weight: bold;
+}
+
+.hostname,
+.username {
+  display: block;
+}
--- a/browser/components/aboutlogins/content/components/login-list-item.js
+++ b/browser/components/aboutlogins/content/components/login-list-item.js
@@ -22,18 +22,18 @@ class LoginListItem extends HTMLElement 
 
     this.addEventListener("click", this);
     window.addEventListener("AboutLoginsLoginSelected", this);
   }
 
   render() {
     this.classList.toggle("selected", this._selected);
     this.setAttribute("guid", this._login.guid);
-    this.shadowRoot.querySelector(".login-list-item-hostname").textContent = this._login.hostname;
-    this.shadowRoot.querySelector(".login-list-item-username").textContent = this._login.username;
+    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();
--- a/browser/components/aboutlogins/jar.mn
+++ b/browser/components/aboutlogins/jar.mn
@@ -2,11 +2,12 @@
 # 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/.
 
 browser.jar:
   content/browser/aboutlogins/components/login-item.css        (content/components/login-item.css)
   content/browser/aboutlogins/components/login-item.js         (content/components/login-item.js)
   content/browser/aboutlogins/components/login-list.css        (content/components/login-list.css)
   content/browser/aboutlogins/components/login-list.js         (content/components/login-list.js)
+  content/browser/aboutlogins/components/login-list-item.css   (content/components/login-list-item.css)
   content/browser/aboutlogins/components/login-list-item.js    (content/components/login-list-item.js)
   content/browser/aboutlogins/aboutLogins.js    (content/aboutLogins.js)
   content/browser/aboutlogins/aboutLogins.html  (content/aboutLogins.html)
--- a/browser/components/aboutlogins/tests/mochitest/test_login_list.html
+++ b/browser/components/aboutlogins/tests/mochitest/test_login_list.html
@@ -54,49 +54,49 @@ add_task(async function test_empty_list(
 });
 
 add_task(async function test_populated_list() {
   gLoginList.setLogins([TEST_LOGIN_1, TEST_LOGIN_2]);
   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(".login-list-item-hostname").textContent, TEST_LOGIN_1.hostname,
+  is(loginListItems[0].shadowRoot.querySelector(".hostname").textContent, TEST_LOGIN_1.hostname,
      "login-list-item hostname should match");
-  is(loginListItems[0].shadowRoot.querySelector(".login-list-item-username").textContent, TEST_LOGIN_1.username,
+  is(loginListItems[0].shadowRoot.querySelector(".username").textContent, TEST_LOGIN_1.username,
      "login-list-item username should match");
 });
 
 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");
   is(loginListItems[0].getAttribute("guid"), TEST_LOGIN_1.guid, "login-list-item should have correct guid attribute");
-  is(loginListItems[0].shadowRoot.querySelector(".login-list-item-hostname").textContent, TEST_LOGIN_1.hostname,
+  is(loginListItems[0].shadowRoot.querySelector(".hostname").textContent, TEST_LOGIN_1.hostname,
      "login-list-item hostname should match");
-  is(loginListItems[0].shadowRoot.querySelector(".login-list-item-username").textContent, modifiedLogin.username,
+  is(loginListItems[0].shadowRoot.querySelector(".username").textContent, modifiedLogin.username,
      "login-list-item username should have been updated");
-  is(loginListItems[1].shadowRoot.querySelector(".login-list-item-username").textContent, TEST_LOGIN_2.username,
+  is(loginListItems[1].shadowRoot.querySelector(".username").textContent, TEST_LOGIN_2.username,
      "login-list-item2 username should remain unchanged");
 });
 
 add_task(async function test_login_added() {
   let newLogin = Object.assign({}, TEST_LOGIN_1, {username: "user22", guid: "111222"});
   gLoginList.loginAdded(newLogin);
   await asyncElementRendered();
   let loginListItems = gLoginList.shadowRoot.querySelectorAll("login-list-item");
   is(loginListItems.length, 3, "New login should be added to the list");
   is(loginListItems[0].getAttribute("guid"), TEST_LOGIN_1.guid, "login-list-item1 should have correct guid attribute");
   is(loginListItems[1].getAttribute("guid"), TEST_LOGIN_2.guid, "login-list-item2 should have correct guid attribute");
   is(loginListItems[2].getAttribute("guid"), newLogin.guid, "login-list-item3 should have correct guid attribute");
-  is(loginListItems[2].shadowRoot.querySelector(".login-list-item-hostname").textContent, newLogin.hostname,
+  is(loginListItems[2].shadowRoot.querySelector(".hostname").textContent, newLogin.hostname,
      "login-list-item hostname should match");
-  is(loginListItems[2].shadowRoot.querySelector(".login-list-item-username").textContent, newLogin.username,
+  is(loginListItems[2].shadowRoot.querySelector(".username").textContent, newLogin.username,
      "login-list-item username should have been updated");
 });
 
 add_task(async function test_login_removed() {
   gLoginList.loginRemoved({guid: "111222"});
   await asyncElementRendered();
   let loginListItems = gLoginList.shadowRoot.querySelectorAll("login-list-item");
   is(loginListItems.length, 2, "New login should be removed from the list");