Bug 1550099 - Move Delete button to be inline with the LoginItem title. r=MattN

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

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

browser/components/aboutlogins/content/aboutLogins.css

@@ -15,6 +15,7 @@ header {
   display: flex;
   grid-area: header;
   background-color: var(--in-content-box-background);
+  border-bottom: 1px solid var(--in-content-box-border-color);
 }
 
 login-filter {

browser/components/aboutlogins/content/aboutLogins.html

@@ -59,8 +59,10 @@
     <template id="login-item-template">
       <link rel="stylesheet" type="text/css" href="chrome://global/skin/in-content/common.css">
       <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/login-item.css">
-      <h2 class="header"></h2>
-      <button class="delete-button"></button>
+      <div class="header">
+        <h2 class="title"></h2>
+        <button class="delete-button"></button>
+      </div>
       <label>
         <span class="hostname-label field-label"></span>
         <span class="hostname"/>

browser/components/aboutlogins/content/components/login-item.css

@@ -2,10 +2,23 @@
  * 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/. */
 
-h2 {
+:host {
+  padding-top: 36px;
+  padding-left: 40px;
+  padding-right: 40px;
+}
+
+.header {
+  display: flex;
   border-bottom: 1px solid var(--in-content-box-border-color);
 }
 
+.title {
+  margin-top: 0;
+  margin-bottom: 0;
+  flex: auto;
+}
+
 .field-label {
   display: block;
 }

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

@@ -62,7 +62,7 @@ class LoginItem extends ReflectedFluentElement {
     };
     document.l10n.setAttributes(this, "login-item", l10nArgs);
     let hostnameNoScheme = this._login.hostname && new URL(this._login.hostname).hostname;
-    this.shadowRoot.querySelector(".header").textContent = hostnameNoScheme || "";
+    this.shadowRoot.querySelector(".title").textContent = hostnameNoScheme || "";
     this.shadowRoot.querySelector(".hostname").textContent = this._login.hostname || "";
     this.shadowRoot.querySelector("modal-input[name='username']").setAttribute("value", this._login.username || "");
     this.shadowRoot.querySelector("modal-input[name='password']").setAttribute("value", this._login.password || "");