From cb20985c651c5d0cf1b46073754462221168e9e2 Mon Sep 17 00:00:00 2001
From: Tim Nguyen <ntim.bugs@gmail.com>
Date: Thu, 22 Aug 2019 22:12:26 +0000
Subject: [PATCH] Bug 1575910 - Implement button positioning in login-item per
 design spec. r=MattN,jaws

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

--HG--
extra : moz-landing-system : lando
---
 .../aboutlogins/content/aboutLogins.css       |  2 +-
 .../aboutlogins/content/aboutLogins.html      | 46 ++++++++++---------
 .../content/components/login-item.css         | 12 ++++-
 3 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/browser/components/aboutlogins/content/aboutLogins.css b/browser/components/aboutlogins/content/aboutLogins.css
index 5563823ff503..8ba4d8aba3b4 100644
--- a/browser/components/aboutlogins/content/aboutLogins.css
+++ b/browser/components/aboutlogins/content/aboutLogins.css
@@ -48,7 +48,7 @@ login-item {
 }
 
 login-item {
-  max-width: 800px;
+  max-width: 700px;
 }
 
 login-footer {
diff --git a/browser/components/aboutlogins/content/aboutLogins.html b/browser/components/aboutlogins/content/aboutLogins.html
index 480908ef4d45..120dcf467c27 100644
--- a/browser/components/aboutlogins/content/aboutLogins.html
+++ b/browser/components/aboutlogins/content/aboutLogins.html
@@ -159,29 +159,33 @@
           </label>
         </div>
         <div class="detail-row">
-          <label class="detail-cell">
-            <span class="username-label field-label" data-l10n-id="login-item-username-label"></span>
-            <input type="text" name="username" data-l10n-id="login-item-username"/>
-          </label>
-          <button class="copy-button copy-username-button" data-copy-login-property="username" data-telemetry-object="username" type="button">
-            <span class="copied-button-text" data-l10n-id="login-item-copied-username-button-text"></span>
-            <span class="copy-button-text" data-l10n-id="login-item-copy-username-button-text"></span>
-          </button>
+          <div class="detail-row-contents">
+            <label class="detail-cell">
+              <span class="username-label field-label" data-l10n-id="login-item-username-label"></span>
+              <input type="text" name="username" data-l10n-id="login-item-username"/>
+            </label>
+            <button class="copy-button copy-username-button" data-copy-login-property="username" data-telemetry-object="username" type="button">
+              <span class="copied-button-text" data-l10n-id="login-item-copied-username-button-text"></span>
+              <span class="copy-button-text" data-l10n-id="login-item-copy-username-button-text"></span>
+            </button>
+          </div>
         </div>
         <div class="detail-row">
-          <label class="detail-cell">
-            <span class="password-label field-label" data-l10n-id="login-item-password-label"></span>
-            <div class="reveal-password-wrapper">
-              <input type="password" name="password" required/>
-              <input type="checkbox"
-                     class="reveal-password-checkbox"
-                     data-l10n-id="login-item-password-reveal-checkbox"/>
-            </div>
-          </label>
-          <button class="copy-button copy-password-button" data-copy-login-property="password" data-telemetry-object="password" type="button">
-            <span class="copied-button-text" data-l10n-id="login-item-copied-password-button-text"></span>
-            <span class="copy-button-text" data-l10n-id="login-item-copy-password-button-text"></span>
-          </button>
+          <div class="detail-row-contents">
+            <label class="detail-cell">
+              <span class="password-label field-label" data-l10n-id="login-item-password-label"></span>
+              <div class="reveal-password-wrapper">
+                <input type="password" name="password" required/>
+                <input type="checkbox"
+                       class="reveal-password-checkbox"
+                       data-l10n-id="login-item-password-reveal-checkbox"/>
+              </div>
+            </label>
+            <button class="copy-button copy-password-button" data-copy-login-property="password" data-telemetry-object="password" type="button">
+              <span class="copied-button-text" data-l10n-id="login-item-copied-password-button-text"></span>
+              <span class="copy-button-text" data-l10n-id="login-item-copy-password-button-text"></span>
+            </button>
+          </div>
         </div>
         <div class="form-actions-row">
           <button class="save-changes-button" type="submit"></button>
diff --git a/browser/components/aboutlogins/content/components/login-item.css b/browser/components/aboutlogins/content/components/login-item.css
index 01050eb71451..c3def2db18aa 100644
--- a/browser/components/aboutlogins/content/components/login-item.css
+++ b/browser/components/aboutlogins/content/components/login-item.css
@@ -99,7 +99,13 @@ input[type="url"][readOnly]:hover:active {
 
 .detail-row {
   display: flex;
+}
+
+.detail-row-contents {
+  display: flex;
   align-items: end;
+  flex-basis: calc(100% - 360px); /* Adds a 360px flexible spacer to the right */
+  max-width: 100%;
 }
 
 .detail-row,
@@ -119,10 +125,14 @@ input[type="url"][readOnly]:hover:active {
   margin-bottom: 5px;
 }
 
-:host([data-editing]) .detail-cell input:not([type="checkbox"]) {
+:host([data-editing]) .detail-cell input:not([readOnly]):not([type="checkbox"]) {
   width: 280px;
 }
 
+.copy-button {
+  margin-bottom: 0; /* Align button at the bottom of the row */
+}
+
 .copy-button:not([data-copied]) .copied-button-text,
 .copy-button[data-copied] .copy-button-text {
   display: none;