Bug 1480886 - Move the autofill country warning message out of the <form>. r=sfoster
☠☠ backed out by 15a4fb0d9e80 ☠ ☠
authorMatthew Noorenberghe <mozilla@noorenberghe.ca>
Thu, 23 Aug 2018 14:00:25 -0700
changeset 488805 63b68934f813fadd85d88631c7f27e19745e1c35
parent 488804 0f5bcd0b4299794a6fcb36e1f23aa073ae20bb09
child 488806 55f933e0609f69d6518de5d98ede9d46c73b42fc
push id9734
push usershindli@mozilla.com
push dateThu, 30 Aug 2018 12:18:07 +0000
treeherdermozilla-beta@71c71ab3afae [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerssfoster
bugs1480886
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 1480886 - Move the autofill country warning message out of the <form>. r=sfoster Differential Revision: https://phabricator.services.mozilla.com/D4164
browser/components/payments/res/containers/address-form.css
browser/extensions/formautofill/content/editAddress.xhtml
browser/extensions/formautofill/skin/shared/editAddress.css
--- a/browser/components/payments/res/containers/address-form.css
+++ b/browser/components/payments/res/containers/address-form.css
@@ -1,17 +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/. */
 
-/* Hide the message about autofill availability since it's not relevant */
-#country-warning-message {
-  display: none;
-}
-
 .error-text:not(:empty) {
   color: #fff;
   background-color: #d70022;
   border-radius: 2px;
   /* The padding-top and padding-bottom are referenced by address-form.js */
   padding: 5px 12px;
   position: absolute;
   z-index: 1;
--- a/browser/extensions/formautofill/content/editAddress.xhtml
+++ b/browser/extensions/formautofill/content/editAddress.xhtml
@@ -52,38 +52,36 @@
       <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>
-      <div id="country-container">
-        <label id="country-label">
-          <select id="country" required="required">
-            <option/>
-          </select>
-          <span data-localization="country" class="label-text"/>
-        </label>
-        <p id="country-warning-message" data-localization="countryWarningMessage2"/>
-      </div>
+      <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>
     </div>
   </form>
   <div id="controls-container">
     <button id="cancel" data-localization="cancelBtnLabel"/>
     <button id="save" disabled="disabled" data-localization="saveBtnLabel"/>
+    <span id="country-warning-message" data-localization="countryWarningMessage2"/>
   </div>
   <script type="application/javascript"><![CDATA[
     "use strict";
 
     let {
       DEFAULT_REGION,
       supportedCountries,
     } = FormAutofill;
--- a/browser/extensions/formautofill/skin/shared/editAddress.css
+++ b/browser/extensions/formautofill/skin/shared/editAddress.css
@@ -13,18 +13,17 @@
 :root[subdialog] form > p {
   margin: 0 0 0.5em !important;
 }
 
 #given-name-container,
 #additional-name-container,
 #address-level1-container,
 #postal-code-container,
-#country-label,
-#country-warning-message,
+#country-container,
 #family-name-container,
 #organization-container,
 #address-level2-container,
 #tel-container {
   display: flex;
   flex: 0 1 50%;
 }
 
@@ -90,20 +89,18 @@
    so the shadow is shown around all 4 sides. */
 #name-container input:-moz-ui-invalid,
 #name-container input:-moz-ui-invalid ~ .label-text {
   z-index: 1;
 }
 
 /* End name field rules */
 
-
 #name-container,
 #street-address-container,
-#country-container,
 #email-container {
   flex: 0 1 100%;
 }
 
 #street-address,
 #email {
   flex: 1 0 auto;
 }
@@ -111,8 +108,12 @@
 #country-warning-message {
   box-sizing: border-box;
   font-size: 1rem;
   align-items: center;
   text-align: start;
   color: #737373;
   padding-inline-start: 1em;
 }
+
+:root:not([subdialog]) #country-warning-message {
+  display: none;
+}