Bug 1549803 - Move styling of LoginListItem to an external stylesheet. r=MattN

Differential Revision: https://phabricator.services.mozilla.com/D30678

--HG--
extra : moz-landing-system : lando

browser/components/aboutlogins/content/aboutLogins.html

@@ -38,13 +38,9 @@
     </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">

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;
+}

browser/components/aboutlogins/content/components/login-list-item.js

@@ -27,8 +27,8 @@ class LoginListItem extends HTMLElement {
   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) {

browser/components/aboutlogins/jar.mn

@@ -7,6 +7,7 @@ browser.jar:
   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)

browser/components/aboutlogins/tests/mochitest/test_login_list.html

@@ -59,9 +59,9 @@ add_task(async function test_populated_list() {
   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");
 });
 
@@ -72,11 +72,11 @@ add_task(async function test_login_modified() {
   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");
 });
 
@@ -89,9 +89,9 @@ add_task(async function test_login_added() {
   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");
 });