Bug 1550091 - Place the Launch button in its own column in the LoginItem. r=MattN
authorJared Wein <jwein@mozilla.com>
Tue, 14 May 2019 20:08:08 +0000
changeset 532690 cedd9c296f112a48c64159888612a1da50d4ea8b
parent 532689 6e1256ea2dd73c29e9c4147c4afd2566062080a8
child 532691 aae069bec8e5d4cf5ebaadf6bd23dd141198e738
push id11270
push userrgurzau@mozilla.com
push dateWed, 15 May 2019 15:07:19 +0000
treeherdermozilla-beta@571bc76da583 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs1550091
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 1550091 - Place the Launch button in its own column in the LoginItem. r=MattN Differential Revision: https://phabricator.services.mozilla.com/D30977
browser/components/aboutlogins/content/aboutLogins.css
browser/components/aboutlogins/content/aboutLogins.html
browser/components/aboutlogins/content/components/login-item.css
--- a/browser/components/aboutlogins/content/aboutLogins.css
+++ b/browser/components/aboutlogins/content/aboutLogins.css
@@ -24,9 +24,10 @@ login-filter {
 }
 
 login-list {
   grid-area: logins;
 }
 
 login-item {
   grid-area: login;
+  max-width: 800px;
 }
--- a/browser/components/aboutlogins/content/aboutLogins.html
+++ b/browser/components/aboutlogins/content/aboutLogins.html
@@ -62,29 +62,35 @@
     <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">
       <div class="header">
         <h2 class="title"></h2>
         <button class="edit-button"></button>
         <button class="delete-button"></button>
       </div>
-      <label>
-        <span class="hostname-label field-label"></span>
-        <span class="hostname"/>
-      </label>
-      <button class="open-site-button"></button>
-      <label>
-        <span class="username-label field-label"></span>
-        <modal-input name="username"/>
-      </label>
-      <label>
-        <span class="password-label field-label"></span>
-        <modal-input type="password" name="password"/>
-      </label>
+      <div class="detail-row">
+        <label>
+          <span class="hostname-label field-label"></span>
+          <span class="hostname"/>
+        </label>
+        <button class="open-site-button"></button>
+      </div>
+      <div class="detail-row">
+        <label>
+          <span class="username-label field-label"></span>
+          <modal-input name="username"/>
+        </label>
+      </div>
+      <div class="detail-row">
+        <label>
+          <span class="password-label field-label"></span>
+          <modal-input type="password" name="password"/>
+        </label>
+      </div>
       <p class="time-created meta-info"></p>
       <p class="time-changed meta-info"></p>
       <p class="time-used meta-info"></p>
       <button class="save-changes-button"></button>
       <button class="cancel-button"></button>
     </template>
 
     <template id="login-filter-template">
--- a/browser/components/aboutlogins/content/components/login-item.css
+++ b/browser/components/aboutlogins/content/components/login-item.css
@@ -19,18 +19,34 @@
 }
 
 .title {
   margin-top: 0;
   margin-bottom: 0;
   flex: auto;
 }
 
+.detail-row {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.detail-row > label {
+  flex: auto;
+}
+
+.detail-row > button {
+  align-self: end;
+}
+
 .field-label {
   display: block;
+  font-size: smaller;
+  opacity: .7;
+  margin-bottom: 5px;
 }
 
 .meta-info {
   font-size: smaller;
 }
 
 .meta-info:not(:first-of-type) {
   margin-top: 0;