Bug 1572701 - Move login-item metadata after form action buttons in edit mode. r=MattN

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

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

browser/components/aboutlogins/content/aboutLogins.html

@@ -185,11 +185,13 @@
             <span class="copy-button-text" data-l10n-id="login-item-copy-password-button-text"></span>
           </button>
         </div>
+        <div class="form-actions-row">
+          <button class="save-changes-button" type="submit"></button>
+          <button class="cancel-button" data-l10n-id="login-item-cancel-button" type="button"></button>
+        </div>
         <p class="time-created meta-info" data-l10n-id="login-item-time-created" data-l10n-args='{"timeCreated": 0}'></p>
         <p class="time-changed meta-info" data-l10n-id="login-item-time-changed" data-l10n-args='{"timeChanged": 0}'></p>
         <p class="time-used meta-info" data-l10n-id="login-item-time-used" data-l10n-args='{"timeUsed": 0}'></p>
-        <button class="save-changes-button" type="submit"></button>
-        <button class="cancel-button" data-l10n-id="login-item-cancel-button" type="button"></button>
       </form>
     </template>
 

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

@@ -19,8 +19,7 @@
 :host([data-is-new-login]) .meta-info,
 :host([data-is-new-login]) .login-item-title,
 :host(:not([data-is-new-login])) .new-login-title,
-:host(:not([data-editing])) .cancel-button,
-:host(:not([data-editing])) .save-changes-button {
+:host(:not([data-editing])) .form-actions-row {
   display: none;
 }
 
@@ -100,6 +99,10 @@ input[type="url"][readOnly]:hover:active {
 .detail-row {
   display: flex;
   align-items: end;
+}
+
+.detail-row,
+.form-actions-row {
   margin-bottom: 40px;
 }