Bug 1549803 - Move styling of LoginListItem to an external stylesheet. r=MattN
☠☠ backed out by 54f367c785cb ☠ ☠
authorJared Wein <jwein@mozilla.com>
Fri, 10 May 2019 18:31:53 +0000
changeset 532294 452720b78ca75587668030394cfcb806aa48cbda
parent 532293 e450e9d4671c01b57531b20ef2c347ed3f4ad905
child 532295 7e08cf4753a79d765acc9721c65104c229a3f5fd
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
@@ -32,23 +32,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");