Bug 1550099 - Move Delete button to be inline with the LoginItem title. r=MattN
authorJared Wein <jwein@mozilla.com>
Tue, 14 May 2019 20:07:10 +0000
changeset 535753 ed88d536588fda46f7afab3db01690bab602e34a
parent 535752 abde24c1d7eee05672ed2b12e35d41869421b7db
child 535754 48567f3c473a35b8320f060181d32cb570deacb0
push id2082
push userffxbld-merge
push dateMon, 01 Jul 2019 08:34:18 +0000
treeherdermozilla-release@2fb19d0466d2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs1550099
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 1550099 - Move Delete button to be inline with the LoginItem title. r=MattN Differential Revision: https://phabricator.services.mozilla.com/D30959
browser/components/aboutlogins/content/aboutLogins.css
browser/components/aboutlogins/content/aboutLogins.html
browser/components/aboutlogins/content/components/login-item.css
browser/components/aboutlogins/content/components/login-item.js
--- a/browser/components/aboutlogins/content/aboutLogins.css
+++ b/browser/components/aboutlogins/content/aboutLogins.css
@@ -10,16 +10,17 @@ body {
                        "logins login";
   height: 100vh;
 }
 
 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 {
   flex: auto;
   align-self: center;
 }
 
 login-list {
--- a/browser/components/aboutlogins/content/aboutLogins.html
+++ b/browser/components/aboutlogins/content/aboutLogins.html
@@ -54,18 +54,20 @@
       <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" 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"/>
       </label>
       <label>
         <span class="username-label field-label"></span>
         <modal-input name="username"/>
       </label>
--- a/browser/components/aboutlogins/content/components/login-item.css
+++ b/browser/components/aboutlogins/content/components/login-item.css
@@ -1,16 +1,29 @@
 /* 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/. */
 
-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;
 }
 
 .meta-info {
   font-size: smaller;
 }
 
--- a/browser/components/aboutlogins/content/components/login-item.js
+++ b/browser/components/aboutlogins/content/components/login-item.js
@@ -57,17 +57,17 @@ class LoginItem extends ReflectedFluentE
   render() {
     let l10nArgs = {
       timeCreated: this._login.timeCreated || "",
       timeChanged: this._login.timePasswordChanged || "",
       timeUsed: this._login.timeLastUsed || "",
     };
     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 || "");
   }
 
   handleEvent(event) {
     switch (event.type) {
       case "AboutLoginsLoginSelected": {