Bug 1480886 - Position the form fields for the address-form and basic-card-form according to the spec. r=sfoster

Based on work by Jared Wein. A follow-up will handle the persist checkbox and billing address. Differential Revision: https://phabricator.services.mozilla.com/D4174 --HG-- extra : rebase_source : ebca2596db11846da171ddc7d34db3dd6e161a6f
2024-10-21 01:05:45 +00:00 · 2018-08-24 16:49:53 -07:00 · 2018-08-24 16:49:53 -07:00 · 38d855ba7c
commit 38d855ba7c
parent 6a14238016
9 changed files with 176 additions and 107 deletions
--- a/browser/components/payments/res/containers/address-form.js
+++ b/browser/components/payments/res/containers/address-form.js
@ -273,7 +273,7 @@ export default class AddressForm extends PaymentStateSubscriberMixin(PaymentRequ
      if (field.localName == "button" || !container) {
        continue;
      }
-      let span = container.querySelector("span");
+      let span = container.querySelector(".label-text");
      span.setAttribute("fieldRequiredSymbol", this.dataset.fieldRequiredSymbol);
      let required = field.required && !field.disabled;
      if (required) {
--- a/browser/components/payments/res/containers/basic-card-form.js
+++ b/browser/components/payments/res/containers/basic-card-form.js
@ -312,11 +312,11 @@ export default class BasicCardForm extends PaymentStateSubscriberMixin(PaymentRe
  }

  updateRequiredState() {
-    for (let formElement of this.form.elements) {
-      let container = formElement.closest("label") || formElement.closest("div");
-      let span = container.querySelector("span");
+    for (let field of this.form.elements) {
+      let container = field.closest(".container");
+      let span = container.querySelector(".label-text");
      span.setAttribute("fieldRequiredSymbol", this.dataset.fieldRequiredSymbol);
-      let required = formElement.required && !formElement.disabled;
+      let required = field.required && !field.disabled;
      if (required) {
        container.setAttribute("required", "true");
      } else {
--- a/browser/components/payments/res/unprivileged-fallbacks.js
+++ b/browser/components/payments/res/unprivileged-fallbacks.js
@ -34,8 +34,32 @@ var PaymentDialogUtils = {
    return !!str.replace(/[-\s]/g, "").match(/^\d{9,}$/);
  },
  DEFAULT_REGION: "US",
-  supportedCountries: ["US", "CA"],
+  supportedCountries: ["US", "CA", "DE"],
  getFormFormat(country) {
+    if (country == "DE") {
+      return {
+        addressLevel1Label: "province",
+        postalCodeLabel: "postalCode",
+        fieldsOrder: [
+          {
+            fieldId: "name",
+            newLine: true,
+          },
+          {
+            fieldId: "organization",
+            newLine: true,
+          },
+          {
+            fieldId: "street-address",
+            newLine: true,
+          },
+          {fieldId: "postal-code"},
+          {fieldId: "address-level2"},
+        ],
+        postalCodePattern: "\\d{5}",
+      };
+    }
+
    return {
      "addressLevel1Label": country == "US" ? "state" : "province",
      "postalCodeLabel": country == "US" ? "zip" : "postalCode",
--- a/browser/extensions/formautofill/addressmetadata/addressReferencesExt.js
+++ b/browser/extensions/formautofill/addressmetadata/addressReferencesExt.js
@ -13,5 +13,8 @@
 // TODO: We only support the alternative name of US in MVP. We are going to support more countries in
 //       bug 1370193.
 var addressDataExt = {
-  "data/US": {"alternative_names": ["US", "United States of America", "United States", "America", "U.S.", "USA", "U.S.A.", "U.S.A"]},
+  "data/US": {
+    alternative_names: ["US", "United States of America", "United States", "America", "U.S.", "USA", "U.S.A.", "U.S.A"],
+    fmt: "%N%n%A%n%C%S%n%Z%O",
+  },
 };
--- a/browser/extensions/formautofill/content/editAddress.xhtml
+++ b/browser/extensions/formautofill/content/editAddress.xhtml
@ -22,56 +22,54 @@
        The <span class="label-text" …/> needs to be after the form field in the same element in
        order to get proper label styling with :focus and :moz-ui-invalid.
      -->
-    <div>
-      <div id="name-container">
-        <label id="given-name-container">
-          <input id="given-name" type="text" required="required"/>
-          <span data-localization="givenName" class="label-text"/>
-        </label>
-        <label id="additional-name-container">
-          <input id="additional-name" type="text"/>
-          <span data-localization="additionalName" class="label-text"/>
-        </label>
-        <label id="family-name-container">
-          <input id="family-name" type="text" required="required"/>
-          <span data-localization="familyName" class="label-text"/>
-        </label>
-      </div>
-      <label id="organization-container">
-        <input id="organization" type="text"/>
-        <span data-localization="organization2" class="label-text"/>
+    <div id="name-container" class="container">
+      <label id="given-name-container">
+        <input id="given-name" type="text" required="required"/>
+        <span data-localization="givenName" class="label-text"/>
      </label>
-      <label id="street-address-container">
-        <textarea id="street-address" rows="3" required="required"/>
-        <span data-localization="streetAddress" class="label-text"/>
+      <label id="additional-name-container">
+        <input id="additional-name" type="text"/>
+        <span data-localization="additionalName" class="label-text"/>
      </label>
-      <label id="address-level2-container">
-        <input id="address-level2" type="text" required="required"/>
-        <span data-localization="city" class="label-text"/>
-      </label>
-      <label id="address-level1-container">
-        <input id="address-level1" type="text" required="required"/>
-        <span class="label-text"/>
-      </label>
-      <label id="postal-code-container">
-        <input id="postal-code" type="text" required="required"/>
-        <span class="label-text"/>
-      </label>
-      <label id="country-container">
-        <select id="country" required="required">
-          <option/>
-        </select>
-        <span data-localization="country" class="label-text"/>
-      </label>
-      <label id="tel-container">
-        <input id="tel" type="tel"/>
-        <span data-localization="tel" class="label-text"/>
-      </label>
-      <label id="email-container">
-        <input id="email" type="email" required="required"/>
-        <span data-localization="email" class="label-text"/>
+      <label id="family-name-container">
+        <input id="family-name" type="text" required="required"/>
+        <span data-localization="familyName" class="label-text"/>
      </label>
    </div>
+    <label id="organization-container" class="container">
+      <input id="organization" type="text"/>
+      <span data-localization="organization2" class="label-text"/>
+    </label>
+    <label id="street-address-container" class="container">
+      <textarea id="street-address" rows="3" required="required"/>
+      <span data-localization="streetAddress" class="label-text"/>
+    </label>
+    <label id="address-level2-container" class="container">
+      <input id="address-level2" type="text" required="required"/>
+      <span data-localization="city" class="label-text"/>
+    </label>
+    <label id="address-level1-container" class="container">
+      <input id="address-level1" type="text" required="required"/>
+      <span class="label-text"/>
+    </label>
+    <label id="postal-code-container" class="container">
+      <input id="postal-code" type="text" required="required"/>
+      <span class="label-text"/>
+    </label>
+    <label id="country-container" class="container">
+      <select id="country" required="required">
+        <option/>
+      </select>
+      <span data-localization="country" class="label-text"/>
+    </label>
+    <label id="tel-container" class="container">
+      <input id="tel" type="tel"/>
+      <span data-localization="tel" class="label-text"/>
+    </label>
+    <label id="email-container" class="container">
+      <input id="email" type="email" required="required"/>
+      <span data-localization="email" class="label-text"/>
+    </label>
  </form>
  <div id="controls-container">
    <button id="cancel" data-localization="cancelBtnLabel"/>
--- a/browser/extensions/formautofill/content/editCreditCard.xhtml
+++ b/browser/extensions/formautofill/content/editCreditCard.xhtml
@ -22,16 +22,12 @@
        The <span class="label-text" …/> needs to be after the form field in the same element in
        order to get proper label styling with :focus and :moz-ui-invalid.
      -->
-    <label>
+    <label id="cc-number-container" class="container">
      <span id="invalidCardNumberString" hidden="hidden" data-localization="invalidCardNumber"></span>
      <input id="cc-number" type="text" required="required" minlength="9" pattern="[- 0-9]+"/>
      <span data-localization="cardNumber" class="label-text"/>
    </label>
-    <label>
-      <input id="cc-name" type="text" required="required"/>
-      <span data-localization="nameOnCard" class="label-text"/>
-    </label>
-    <label>
+    <label id="cc-exp-month-container" class="container">
      <select id="cc-exp-month">
        <option/>
        <option value="1">01</option>
@ -49,13 +45,22 @@
      </select>
      <span data-localization="cardExpiresMonth" class="label-text"/>
    </label>
-    <label>
+    <label id="cc-exp-year-container" class="container">
      <select id="cc-exp-year">
        <option/>
      </select>
      <span data-localization="cardExpiresYear" class="label-text"/>
    </label>
-    <label class="billingAddressRow">
+    <label id="cc-name-container" class="container">
+      <input id="cc-name" type="text" required="required"/>
+      <span data-localization="nameOnCard" class="label-text"/>
+    </label>
+    <label id="cc-type-container" class="container">
+      <select id="cc-type">
+      </select>
+      <span class="label-text">Card Type</span>
+    </label>
+    <label id="billingAddressGUID-container" class="billingAddressRow container">
      <select id="billingAddressGUID">
      </select>
      <span data-localization="billingAddress" class="label-text"/>
--- a/browser/extensions/formautofill/skin/shared/editAddress.css
+++ b/browser/extensions/formautofill/skin/shared/editAddress.css
@ -2,29 +2,31 @@
 * 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/. */

-.editAddressForm input,
-.editAddressForm select {
-  flex: 1 0 auto;
-  margin: 0;
-}
-
-#name-container,
-:root[subdialog] form label,
-:root[subdialog] form > p {
-  margin: 0 0 0.5em !important;
-}
-
-#given-name-container,
-#additional-name-container,
-#address-level1-container,
-#postal-code-container,
-#country-container,
-#family-name-container,
-#organization-container,
-#address-level2-container,
-#tel-container {
+.editAddressForm {
  display: flex;
-  flex: 0 1 50%;
+  flex-wrap: wrap;
+  /* Use space-between so --grid-column-row-gap is in between the elements on a row */
+  justify-content: space-between;
+}
+
+:root:not([subdialog]) .editAddressForm {
+  margin-inline-start: calc(var(--grid-column-row-gap) / -2);
+  margin-inline-end: calc(var(--grid-column-row-gap) / -2);
+}
+
+.editAddressForm .container {
+  /* !important is needed to override preferences.css's generic label rule. */
+  margin-top: var(--grid-column-row-gap) !important;
+  margin-inline-start: calc(var(--grid-column-row-gap) / 2);
+  margin-inline-end: calc(var(--grid-column-row-gap) / 2);
+  flex-grow: 1;
+}
+
+#country-container {
+  /* The country dropdown has a different intrinsic (content) width than the
+     other fields which are <input>. */
+  flex-basis: calc(50% - var(--grid-column-row-gap));
+  flex-grow: 0;
 }


@ -53,6 +55,9 @@
 #additional-name-container,
 #family-name-container {
  display: flex;
+  /* The 3 pieces inside the name container don't have the .container class so
+     need to set flex-grow themselves. See `.editAddressForm .container` */
+  flex-grow: 1;
  /* Remove the bottom margin from the name containers so that the outer
     #name-container provides the margin on the outside */
  margin-bottom: 0 !important;
@ -95,16 +100,11 @@
 /* End name field rules */

 #name-container,
-#street-address-container,
-#email-container {
+#street-address-container {
+  /* Name and street address are always full-width */
  flex: 0 1 100%;
 }

-#street-address,
-#email {
-  flex: 1 0 auto;
-}
-
 #country-warning-message {
  box-sizing: border-box;
  font-size: 1rem;
--- a/browser/extensions/formautofill/skin/shared/editCreditCard.css
+++ b/browser/extensions/formautofill/skin/shared/editCreditCard.css
@ -3,27 +3,47 @@
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

 .editCreditCardForm {
-  justify-content: center;
+  display: grid;
+  grid-template-areas:
+    "cc-number          cc-exp-month       cc-exp-year"
+    "cc-name            cc-type            cc-csc"
+    "billingAddressGUID billingAddressGUID billingAddressGUID";
+  grid-row-gap: var(--grid-column-row-gap);
+  grid-column-gap: var(--grid-column-row-gap);
 }

-.editCreditCardForm > label,
-.editCreditCardForm > div {
-  flex: 1 0 100%;
-  align-self: center;
-  margin: 0 0 0.5em !important;
+.editCreditCardForm label {
+  /* Remove the margin on these labels since they are styled on top of
+     the input/select element. */
+  margin-inline-start: 0;
+  margin-inline-end: 0;
 }

-.editCreditCardForm #billingAddressGUID,
-.editCreditCardForm input {
-  flex: 1 0 auto;
+.editCreditCardForm .container {
+  display: flex;
 }

-.editCreditCardForm select {
-  margin: 0;
-  margin-inline-end: 0.7em;
+#cc-number-container {
+  grid-area: cc-number;
 }

-.editCreditCardForm label > span,
-.editCreditCardForm div > span {
-  flex: 0 0 9.5em;
+#cc-exp-month-container {
+  grid-area: cc-exp-month;
+}
+
+#cc-exp-year-container {
+  grid-area: cc-exp-year;
+}
+
+#cc-name-container {
+  grid-area: cc-name;
+}
+
+#cc-type-container {
+  grid-area: cc-type;
+  visibility: hidden; /* TODO: Bug 1477105 */
+}
+
+#billingAddressGUID-container {
+  grid-area: billingAddressGUID;
 }
--- a/browser/extensions/formautofill/skin/shared/editDialog-shared.css
+++ b/browser/extensions/formautofill/skin/shared/editDialog-shared.css
@ -4,6 +4,7 @@

 :root {
  --in-field-label-size: .8em;
+  --grid-column-row-gap: 8px;
  /* Use the animation-easing-function that is defined in xul.css. */
  --animation-easing-function: cubic-bezier(.07,.95,0,1);
 }
@ -13,11 +14,14 @@
  padding: 2px;
 }

+/* The overly specific input attributes are required to override
+   padding from common.css */
 form input[type="email"],
 form input[type="tel"],
 form input[type="text"],
 form textarea,
 form select {
+  flex-grow: 1;
  padding-top: calc(var(--in-field-label-size) + .4em);
 }

@ -27,11 +31,11 @@ select {
 }

 form :-moz-any(label, div) {
+  /* Positioned so that the .label-text and .error-text children will be
+     positioned relative to this. */
  position: relative;
  display: block;
  line-height: 1em;
-  margin-left: 0;
-  margin-right: 0;
 }

 form :-moz-any(label, div) > .label-text {
@ -65,6 +69,21 @@ form :-moz-any(label, div)[required] > .label-text::after {
  content: attr(fieldRequiredSymbol);
 }

+.persist-checkbox label {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: var(--grid-column-row-gap);
+  margin-bottom: var(--grid-column-row-gap);
+}
+
+:root[subdialog] form {
+  /* Match the margin-inline-start of the #controls-container buttons
+     and provide enough padding at the top of the form so button outlines
+     don't get clipped. */
+  padding: 4px 4px 0;
+}
+
 #controls-container {
  flex: 0 1 100%;
  justify-content: end;