Bug 1477100 - Show the labels as placeholders inside of the fields. r=MattN
☠☠ backed out by cd628c962e75 ☠ ☠
authorJared Wein <jwein@mozilla.com>
Fri, 17 Aug 2018 20:50:26 +0000
changeset 487288 32e2d0ddc56a95d419428eb68f3093ee08376069
parent 487287 c80952ce66dc0d7634983c24ef94035f20c12085
child 487289 1715b1a7e6b0373e85af729fccf16833a215940f
push id9719
push userffxbld-merge
push dateFri, 24 Aug 2018 17:49:46 +0000
treeherdermozilla-beta@719ec98fba77 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs1477100
milestone63.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 1477100 - Show the labels as placeholders inside of the fields. r=MattN Show the labels as placeholders inside of the fields. Differential Revision: https://phabricator.services.mozilla.com/D2955
browser/components/payments/res/containers/basic-card-form.js
browser/components/payments/res/containers/form.css
browser/components/payments/res/paymentRequest.css
browser/components/payments/res/paymentRequest.xhtml
browser/components/payments/test/mochitest/mochitest.ini
browser/components/payments/test/mochitest/test_address_form.html
browser/components/payments/test/mochitest/test_address_picker.html
browser/extensions/formautofill/FormAutofillUtils.jsm
browser/extensions/formautofill/content/autofillEditForms.js
browser/extensions/formautofill/content/editAddress.xhtml
browser/extensions/formautofill/content/editCreditCard.xhtml
browser/extensions/formautofill/locales/en-US/formautofill.properties
browser/extensions/formautofill/skin/linux/editDialog.css
browser/extensions/formautofill/skin/shared/editAddress.css
browser/extensions/formautofill/skin/shared/editCreditCard.css
browser/extensions/formautofill/skin/shared/editDialog-shared.css
browser/extensions/formautofill/skin/windows/editDialog.css
--- a/browser/components/payments/res/containers/basic-card-form.js
+++ b/browser/components/payments/res/containers/basic-card-form.js
@@ -183,16 +183,19 @@ export default class BasicCardForm exten
       billingAddressSelect.value = basicCardPage.billingAddressGUID;
     } else if (!editing) {
       if (paymentRequest.getAddresses(state)[selectedShippingAddress]) {
         billingAddressSelect.value = selectedShippingAddress;
       } else {
         billingAddressSelect.value = Object.keys(addresses)[0];
       }
     }
+    // Need to recalculate the populated state since
+    // billingAddressSelect is updated after loadRecord.
+    this.formHandler.updatePopulatedState(billingAddressSelect);
 
     this.updateRequiredState();
     this.updateSaveButtonState();
   }
 
   handleEvent(event) {
     switch (event.type) {
       case "click": {
deleted file mode 100644
--- a/browser/components/payments/res/containers/form.css
+++ /dev/null
@@ -1,8 +0,0 @@
-/* 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/. */
-
-div[required] > label > span:first-of-type::after,
-:-moz-any(label, div)[required] > span:first-of-type::after {
-  content: attr(fieldRequiredSymbol);
-}
--- a/browser/components/payments/res/paymentRequest.css
+++ b/browser/components/payments/res/paymentRequest.css
@@ -1,13 +1,13 @@
 /* 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/. */
 
-html {
+:root {
   height: 100%;
 }
 
 body {
   height: 100%;
   margin: 0;
   /* Override font-size from in-content/common.css which is too large */
   font-size: inherit;
@@ -154,17 +154,17 @@ payment-dialog[changes-prevented][comple
 payment-dialog[changes-prevented][complete-status="processing"] #pay,
 payment-dialog[changes-prevented][complete-status="success"] #pay {
   /* Show the pay button above #disabled-overlay */
   position: relative;
   z-index: 1;
 }
 
 #cancel {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 #disabled-overlay {
   background: white;
   grid-area: disabled-overlay;
   opacity: 0.6;
   width: 100%;
   height: 100%;
--- a/browser/components/payments/res/paymentRequest.xhtml
+++ b/browser/components/payments/res/paymentRequest.xhtml
@@ -79,23 +79,26 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>&paymentSummaryTitle;</title>
 
   <!-- chrome: is needed for global.dtd -->
   <meta http-equiv="Content-Security-Policy" content="default-src 'self' chrome:"/>
 
   <link rel="stylesheet" href="chrome://global/skin/in-content/common.css"/>
+  <link rel="stylesheet" href="resource://formautofill/editDialog-shared.css"/>
+  <link rel="stylesheet" href="resource://formautofill/editAddress.css"/>
+  <link rel="stylesheet" href="resource://formautofill/editCreditCard.css"/>
+  <link rel="stylesheet" href="resource://formautofill/editDialog.css"/>
   <link rel="stylesheet" href="paymentRequest.css"/>
   <link rel="stylesheet" href="components/rich-select.css"/>
   <link rel="stylesheet" href="components/address-option.css"/>
   <link rel="stylesheet" href="components/basic-card-option.css"/>
   <link rel="stylesheet" href="components/shipping-option.css"/>
   <link rel="stylesheet" href="components/payment-details-item.css"/>
-  <link rel="stylesheet" href="containers/form.css"/>
   <link rel="stylesheet" href="containers/address-form.css"/>
   <link rel="stylesheet" href="containers/basic-card-form.css"/>
   <link rel="stylesheet" href="containers/order-details.css"/>
   <link rel="stylesheet" href="containers/rich-picker.css"/>
   <link rel="stylesheet" href="containers/error-page.css"/>
 
   <script src="unprivileged-fallbacks.js"></script>
 
--- a/browser/components/payments/test/mochitest/mochitest.ini
+++ b/browser/components/payments/test/mochitest/mochitest.ini
@@ -1,15 +1,16 @@
 [DEFAULT]
 prefs =
    dom.webcomponents.customelements.enabled=false
 support-files =
    !/browser/extensions/formautofill/content/editAddress.xhtml
    !/browser/extensions/formautofill/content/editCreditCard.xhtml
    ../../../../../browser/extensions/formautofill/content/autofillEditForms.js
+   ../../../../../browser/extensions/formautofill/skin/shared/editDialog.css
    ../../../../../testing/modules/sinon-2.3.2.js
    ../../res/**
    payments_common.js
 skip-if = !e10s
 
 [test_address_form.html]
 [test_address_picker.html]
 [test_basic_card_form.html]
--- a/browser/components/payments/test/mochitest/test_address_form.html
+++ b/browser/components/payments/test/mochitest/test_address_form.html
@@ -12,17 +12,17 @@ Test the address-form element
   <script src="sinon-2.3.2.js"></script>
   <script src="payments_common.js"></script>
   <script src="../../res/vendor/custom-elements.min.js"></script>
   <script src="../../res/unprivileged-fallbacks.js"></script>
   <script src="autofillEditForms.js"></script>
 
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
   <link rel="stylesheet" type="text/css" href="../../res/paymentRequest.css"/>
-  <link rel="stylesheet" type="text/css" href="../../res/containers/form.css"/>
+  <link rel="stylesheet" type="text/css" href="editDialog.css"/>
   <link rel="stylesheet" type="text/css" href="../../res/containers/address-form.css"/>
 </head>
 <body>
   <p id="display">
   </p>
 <div id="content" style="display: none">
 
 </div>
--- a/browser/components/payments/test/mochitest/test_address_picker.html
+++ b/browser/components/payments/test/mochitest/test_address_picker.html
@@ -117,16 +117,19 @@ add_task(async function test_update() {
   await asyncElementRendered();
   let options = picker1.dropdown.popupBox.children;
   is(options.length, 3, "Check dropdown still has all addresses");
   ok(options[0].textContent.includes("Mr. Foo-edit"), "Check updated name in first address");
   ok(!options[0].getAttribute("address-level2"), "Check removed first address-level2");
   ok(options[1].textContent.includes("Mrs. Bar"), "Check that name is the same in second address");
   ok(options[1].getAttribute("street-address").includes("P.O. Box 123"),
      "Check second address is the same");
+  ok(options[2].textContent.includes("Mrs. Fields"),
+     "Check that name is the same in third address");
+  is(options[2].getAttribute("street-address"), null, "Check third address is missing");
 });
 
 add_task(async function test_change_selected_address() {
   let options = picker1.dropdown.popupBox.children;
   is(picker1.dropdown.selectedOption, null, "Should default to no selected option");
   is(picker1.editLink.hidden, true, "Picker edit link should be hidden when no option is selected");
   let {selectedShippingAddress} = picker1.requestStore.getState();
   is(selectedShippingAddress, null, "store should have no option selected");
--- a/browser/extensions/formautofill/FormAutofillUtils.jsm
+++ b/browser/extensions/formautofill/FormAutofillUtils.jsm
@@ -13,17 +13,17 @@ const ADDRESS_REFERENCES_EXT = "addressR
 const ADDRESSES_COLLECTION_NAME = "addresses";
 const CREDITCARDS_COLLECTION_NAME = "creditCards";
 const MANAGE_ADDRESSES_KEYWORDS = ["manageAddressesTitle", "addNewAddressTitle"];
 const EDIT_ADDRESS_KEYWORDS = [
   "givenName", "additionalName", "familyName", "organization2", "streetAddress",
   "state", "province", "city", "country", "zip", "postalCode", "email", "tel",
 ];
 const MANAGE_CREDITCARDS_KEYWORDS = ["manageCreditCardsTitle", "addNewCreditCardTitle", "showCreditCardsBtnLabel"];
-const EDIT_CREDITCARD_KEYWORDS = ["cardNumber", "nameOnCard", "cardExpires"];
+const EDIT_CREDITCARD_KEYWORDS = ["cardNumber", "nameOnCard", "cardExpiresMonth", "cardExpiresYear"];
 const FIELD_STATES = {
   NORMAL: "NORMAL",
   AUTO_FILLED: "AUTO_FILLED",
   PREVIEW: "PREVIEW",
 };
 const SECTION_TYPES = {
   ADDRESS: "address",
   CREDIT_CARD: "creditCard",
--- a/browser/extensions/formautofill/content/autofillEditForms.js
+++ b/browser/extensions/formautofill/content/autofillEditForms.js
@@ -15,16 +15,17 @@ class EditAutofillForm {
   /**
    * Fill the form with a record object.
    * @param  {object} [record = {}]
    */
   loadRecord(record = {}) {
     for (let field of this._elements.form.elements) {
       let value = record[field.id];
       field.value = typeof(value) == "undefined" ? "" : value;
+      this.updatePopulatedState(field);
     }
   }
 
   /**
    * Get inputs from the form.
    * @returns {object}
    */
   buildFormObject() {
@@ -38,43 +39,62 @@ class EditAutofillForm {
 
   /**
    * Handle events
    *
    * @param  {DOMEvent} event
    */
   handleEvent(event) {
     switch (event.type) {
+      case "change": {
+        this.handleChange(event);
+        break;
+      }
       case "input": {
         this.handleInput(event);
         break;
       }
-      case "change": {
-        this.handleChange(event);
-        break;
-      }
     }
   }
 
   /**
+   * Handle change events
+   *
+   * @param  {DOMEvent} event
+   */
+  handleChange(event) {
+    this.updatePopulatedState(event.target);
+  }
+
+  /**
    * Handle input events
    *
    * @param  {DOMEvent} event
    */
   handleInput(event) {}
 
   /**
    * Attach event listener
    */
   attachEventListeners() {
     this._elements.form.addEventListener("input", this);
   }
 
-  // An interface to be inherited.
-  handleChange(event) {}
+  /**
+   * Set the field-populated attribute if the field has a value.
+   *
+   * @param {DOMElement} field The field that will be checked for a value.
+   */
+  updatePopulatedState(field) {
+    let span = field.parentNode.querySelector(".label-text");
+    if (!span) {
+      return;
+    }
+    span.toggleAttribute("field-populated", !!field.value.trim());
+  }
 }
 
 class EditAddress extends EditAutofillForm {
   /**
    * @param {HTMLElement[]} elements
    * @param {object} record
    * @param {object} config
    * @param {string[]} config.DEFAULT_REGION
@@ -234,21 +254,24 @@ class EditAddress extends EditAutofillFo
       option.value = country;
       option.dataset.localizationRegion = country.toLowerCase();
       fragment.appendChild(option);
     }
     this._elements.country.appendChild(fragment);
   }
 
   handleChange(event) {
-    this.formatForm(event.target.value);
+    if (event.target == this._elements.country) {
+      this.formatForm(event.target.value);
+    }
+    super.handleChange(event);
   }
 
   attachEventListeners() {
-    this._elements.country.addEventListener("change", this);
+    this._elements.form.addEventListener("change", this);
     super.attachEventListeners();
   }
 }
 
 class EditCreditCard extends EditAutofillForm {
   /**
    * @param {HTMLElement[]} elements
    * @param {object} record with a decrypted cc-number
@@ -259,16 +282,17 @@ class EditCreditCard extends EditAutofil
   constructor(elements, record, addresses, config) {
     super(elements);
 
     this._addresses = addresses;
     Object.assign(this, config);
     Object.assign(this._elements, {
       ccNumber: this._elements.form.querySelector("#cc-number"),
       invalidCardNumberStringElement: this._elements.form.querySelector("#invalidCardNumberString"),
+      month: this._elements.form.querySelector("#cc-exp-month"),
       year: this._elements.form.querySelector("#cc-exp-year"),
       billingAddress: this._elements.form.querySelector("#billingAddressGUID"),
       billingAddressRow: this._elements.form.querySelector(".billingAddressRow"),
     });
 
     this.loadRecord(record, addresses);
     this.attachEventListeners();
   }
@@ -325,17 +349,17 @@ class EditCreditCard extends EditAutofil
       let option = new Option(this.getAddressLabel(address), guid, selected, selected);
       this._elements.billingAddress.appendChild(option);
     }
 
     this._elements.billingAddressRow.hidden = !hasAddresses;
   }
 
   attachEventListeners() {
-    this._elements.ccNumber.addEventListener("change", this);
+    this._elements.form.addEventListener("change", this);
     super.attachEventListeners();
   }
 
   handleChange(event) {
     super.handleChange(event);
 
     if (event.target != this._elements.ccNumber) {
       return;
--- a/browser/extensions/formautofill/content/editAddress.xhtml
+++ b/browser/extensions/formautofill/content/editAddress.xhtml
@@ -12,67 +12,67 @@
   <link rel="stylesheet" href="resource://formautofill/editDialog-shared.css"/>
   <link rel="stylesheet" href="resource://formautofill/editAddress.css"/>
   <link rel="stylesheet" href="resource://formautofill/editDialog.css"/>
   <script src="chrome://formautofill/content/l10n.js"></script>
   <script src="chrome://formautofill/content/editDialog.js"></script>
   <script src="chrome://formautofill/content/autofillEditForms.js"></script>
 </head>
 <body dir="&locale.dir;">
-  <form id="form" autocomplete="off">
+  <form id="form" class="editAddressForm" autocomplete="off">
     <div>
       <div id="name-container">
         <label id="given-name-container">
-          <span data-localization="givenName"/>
+          <span data-localization="givenName" class="label-text"/>
           <input id="given-name" type="text" required="required"/>
         </label>
         <label id="additional-name-container">
-          <span data-localization="additionalName"/>
+          <span data-localization="additionalName" class="label-text"/>
           <input id="additional-name" type="text"/>
         </label>
         <label id="family-name-container">
-          <span data-localization="familyName"/>
+          <span data-localization="familyName" class="label-text"/>
           <input id="family-name" type="text"/>
         </label>
       </div>
       <label id="organization-container">
-        <span data-localization="organization2"/>
+        <span data-localization="organization2" class="label-text"/>
         <input id="organization" type="text"/>
       </label>
       <label id="street-address-container">
-        <span data-localization="streetAddress"/>
+        <span data-localization="streetAddress" class="label-text"/>
         <textarea id="street-address" rows="3" required="required"/>
       </label>
       <label id="address-level2-container">
-        <span data-localization="city"/>
+        <span data-localization="city" class="label-text"/>
         <input id="address-level2" type="text" required="required"/>
       </label>
       <label id="address-level1-container">
-        <span/>
+        <span class="label-text"/>
         <input id="address-level1" type="text" required="required"/>
       </label>
       <label id="postal-code-container">
-        <span/>
+        <span class="label-text"/>
         <input id="postal-code" type="text" required="required"/>
       </label>
       <div id="country-container">
         <label id="country-label">
-          <span data-localization="country"/>
+          <span data-localization="country" class="label-text"/>
           <select id="country" required="required">
             <option/>
           </select>
         </label>
         <p id="country-warning-message" data-localization="countryWarningMessage2"/>
       </div>
       <label id="tel-container">
-        <span data-localization="tel"/>
+        <span data-localization="tel" class="label-text"/>
         <input id="tel" type="tel"/>
       </label>
       <label id="email-container">
-        <span data-localization="email"/>
+        <span data-localization="email" class="label-text"/>
         <input id="email" type="email" required="required"/>
       </label>
     </div>
   </form>
   <div id="controls-container">
     <button id="cancel" data-localization="cancelBtnLabel"/>
     <button id="save" disabled="disabled" data-localization="saveBtnLabel"/>
   </div>
--- a/browser/extensions/formautofill/content/editCreditCard.xhtml
+++ b/browser/extensions/formautofill/content/editCreditCard.xhtml
@@ -12,49 +12,52 @@
   <link rel="stylesheet" href="resource://formautofill/editDialog-shared.css"/>
   <link rel="stylesheet" href="resource://formautofill/editCreditCard.css"/>
   <link rel="stylesheet" href="resource://formautofill/editDialog.css"/>
   <script src="chrome://formautofill/content/l10n.js"></script>
   <script src="chrome://formautofill/content/editDialog.js"></script>
   <script src="chrome://formautofill/content/autofillEditForms.js"></script>
 </head>
 <body dir="&locale.dir;">
-  <form id="form" autocomplete="off">
+  <form id="form" class="editCreditCardForm" autocomplete="off">
     <label>
-      <span data-localization="cardNumber"/>
+      <span data-localization="cardNumber" class="label-text"/>
       <span id="invalidCardNumberString" hidden="hidden" data-localization="invalidCardNumber"></span>
       <input id="cc-number" type="text" required="required" minlength="9" pattern="[- 0-9]+"/>
     </label>
     <label>
-      <span data-localization="nameOnCard"/>
+      <span data-localization="nameOnCard" class="label-text"/>
       <input id="cc-name" type="text" required="required"/>
     </label>
-    <div>
-      <span data-localization="cardExpires"/>
+    <label>
+      <span data-localization="cardExpiresMonth" class="label-text"/>
       <select id="cc-exp-month">
         <option/>
         <option value="1">01</option>
         <option value="2">02</option>
         <option value="3">03</option>
         <option value="4">04</option>
         <option value="5">05</option>
         <option value="6">06</option>
         <option value="7">07</option>
         <option value="8">08</option>
         <option value="9">09</option>
         <option value="10">10</option>
         <option value="11">11</option>
         <option value="12">12</option>
       </select>
+    </label>
+    <label>
+      <span data-localization="cardExpiresYear" class="label-text"/>
       <select id="cc-exp-year">
         <option/>
       </select>
-    </div>
+    </label>
     <label class="billingAddressRow">
-      <span data-localization="billingAddress"/>
+      <span data-localization="billingAddress" class="label-text"/>
       <select id="billingAddressGUID">
       </select>
     </label>
   </form>
   <div id="controls-container">
     <button id="cancel" data-localization="cancelBtnLabel"/>
     <button id="save" disabled="disabled" data-localization="saveBtnLabel"/>
   </div>
--- a/browser/extensions/formautofill/locales/en-US/formautofill.properties
+++ b/browser/extensions/formautofill/locales/en-US/formautofill.properties
@@ -133,10 +133,11 @@ countryWarningMessage2 = Form Autofill i
 
 # LOCALIZATION NOTE (addNewCreditCardTitle, editCreditCardTitle): The dialog title for creating or editing
 # credit cards in browser preferences.
 addNewCreditCardTitle = Add New Credit Card
 editCreditCardTitle = Edit Credit Card
 cardNumber = Card Number
 invalidCardNumber = Please enter a valid card number
 nameOnCard = Name on Card
-cardExpires = Expires
+cardExpiresMonth = Exp. Month
+cardExpiresYear = Exp. Year
 billingAddress = Billing Address
--- a/browser/extensions/formautofill/skin/linux/editDialog.css
+++ b/browser/extensions/formautofill/skin/linux/editDialog.css
@@ -1,8 +1,8 @@
 /* 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/. */
 
 /* Linux specific rules */
-body {
+:root[subdialog] body {
   font-size: 0.85rem;
-}
\ No newline at end of file
+}
--- a/browser/extensions/formautofill/skin/shared/editAddress.css
+++ b/browser/extensions/formautofill/skin/shared/editAddress.css
@@ -1,42 +1,38 @@
 /* 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/. */
 
-html {
-  width: 620px;
-}
-
-label > span {
-  flex: 0 0 9.5em;
-}
-
-input,
-select {
+.editAddressForm input,
+.editAddressForm select {
   flex: 1 0 auto;
-  width: calc(50% - 9.5em);
   margin: 0;
 }
 
 #given-name-container,
 #additional-name-container,
 #address-level1-container,
 #postal-code-container,
 #country-label,
 #country-warning-message,
 #family-name-container,
 #organization-container,
 #address-level2-container,
 #tel-container {
+  display: flex;
   flex: 0 1 50%;
 }
 
-#tel-container {
-  padding-inline-end: 50%;
+#given-name-container,
+#additional-name-container,
+#family-name-container {
+  display: flex;
+  margin-left: 0;
+  margin-right: 0;
 }
 
 #name-container,
 #street-address-container,
 #country-container,
 #email-container {
   flex: 0 1 100%;
 }
--- a/browser/extensions/formautofill/skin/shared/editCreditCard.css
+++ b/browser/extensions/formautofill/skin/shared/editCreditCard.css
@@ -1,33 +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/. */
 
-html {
-  width: 500px;
-}
-
-form {
+.editCreditCardForm {
   justify-content: center;
 }
 
-form > label,
-form > div {
+.editCreditCardForm > label,
+.editCreditCardForm > div {
   flex: 1 0 100%;
   align-self: center;
   margin: 0 0 0.5em !important;
 }
 
-#billingAddressGUID,
-input {
+.editCreditCardForm #billingAddressGUID,
+.editCreditCardForm input {
   flex: 1 0 auto;
 }
 
-select {
+.editCreditCardForm select {
   margin: 0;
   margin-inline-end: 0.7em;
 }
 
-label > span,
-div > span {
+.editCreditCardForm label > span,
+.editCreditCardForm div > span {
   flex: 0 0 9.5em;
 }
--- a/browser/extensions/formautofill/skin/shared/editDialog-shared.css
+++ b/browser/extensions/formautofill/skin/shared/editDialog-shared.css
@@ -1,58 +1,71 @@
 /* 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/. */
 
-form,
-label,
-div,
-p {
-  display: flex;
+:root {
+  --in-field-label-size: .8em;
+  /* Use the animation-easing-function that is defined in xul.css. */
+  --animation-easing-function: cubic-bezier(.07,.95,0,1);
 }
 
-form,
-div {
-  flex-wrap: wrap;
-}
-
-form {
+:root[subdialog] form {
   /* Add extra space to ensure invalid input box is displayed properly */
   padding: 2px;
 }
 
-form label,
-form > p {
+:root[subdialog] form label,
+:root[subdialog] form > p {
   margin: 0 0 0.5em !important;
 }
 
-label > span,
-div > span {
-  box-sizing: border-box;
-  padding-inline-end: 0.7em;
-  align-self: center;
-  text-align: end;
-  -moz-user-select: none;
+form input[type="email"],
+form input[type="tel"],
+form input[type="text"],
+form textarea,
+form select {
+  padding-top: calc(var(--in-field-label-size) + .4em);
 }
 
-option {
-  padding: 0.3em 0.5em;
+select {
+  margin: 0;
+  padding-bottom: 5px;
+}
+
+form :-moz-any(label, div) {
+  position: relative;
+  display: block;
+  line-height: 1em;
+  margin-left: 0;
+  margin-right: 0;
 }
 
-textarea {
-  resize: none;
+form :-moz-any(label, div) > .label-text {
+  position: absolute;
+  color: GrayText;
+  pointer-events: none;
+  left: 10px;
+  top: .2em;
+  transition: top .2s var(--animation-easing-function),
+              font-size .2s var(--animation-easing-function);
 }
 
-button {
-  padding-right: 10px;
-  padding-left: 10px;
+form :-moz-any(label, div):focus-within > .label-text,
+form :-moz-any(label, div) > .label-text[field-populated] {
+  top: 0;
+  font-size: var(--in-field-label-size);
 }
 
-input,
-select {
-  box-sizing: border-box;
+form :-moz-any(label, div):focus-within > .label-text {
+  color: var(--in-content-item-selected);
+}
+
+form div[required] > label > .label-text::after,
+form :-moz-any(label, div)[required] > .label-text::after {
+  content: attr(fieldRequiredSymbol);
 }
 
 #controls-container {
   flex: 0 1 100%;
   justify-content: end;
   margin: 1em 0 0;
 }
--- a/browser/extensions/formautofill/skin/windows/editDialog.css
+++ b/browser/extensions/formautofill/skin/windows/editDialog.css
@@ -1,12 +1,12 @@
 /* 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/. */
 
 /* The save button should be on the left and cancel on the right for Windows */
-#save {
+#controlsContainer > #save {
   order: 0;
 }
 
-#cancel {
+#controlsContainer > #cancel {
   order: 1;
 }