Bug 1549803 - Move styling of LoginListItem to an external stylesheet. r=MattN
authorJared Wein <jwein@mozilla.com>
Sat, 11 May 2019 03:29:43 +0000
changeset 532349 018fd8ddc6578dc2062b8cbcad9bae92e8fdffed
parent 532348 7654f255fd12223f92011e01627dc98649f9d0f5
child 532350 79cb58efc5bc0babf66f39f2039a99cfacd41c28
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");