Bug 1377360 - [Form Autofill] Move warning message from the manage ad…

…dresses dialog to the edit address dialog. r=lchang MozReview-Commit-ID: IuZpHQ6hyBo --HG-- extra : rebase_source : 6246c9e10cf0d911971b6e3db2c5829cc2c7770b
dothq · Jul 28, 2017 · 247c04c · 247c04c
1 parent 3951cf1
commit 247c04c
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 8 deletions.
diff --git a/browser/extensions/formautofill/content/editAddress.xhtml b/browser/extensions/formautofill/content/editAddress.xhtml
@@ -51,6 +51,7 @@
         <option value="US" data-localization="us"/>
       </select>
     </label>
+    <p id="country-warning-message" data-localization="countryWarningMessage"/>
     <label id="email-container">
       <span data-localization="email"/>
       <input id="email" type="email"/>

diff --git a/browser/extensions/formautofill/content/manageAddresses.xhtml b/browser/extensions/formautofill/content/manageAddresses.xhtml
@@ -11,11 +11,6 @@
   <script src="chrome://formautofill/content/manageAddresses.js"></script>
 </head>
 <body>
-  <p style="padding-left: 30px; background: url(chrome://browser/skin/warning.svg) no-repeat left center">
-    Autofill of addresses is only ready for testing with United States addresses on &lt;input&gt;s and some &lt;select&gt; elements.
-    Improvements to form field type detection are in progress.
-    <a href="https://luke-chang.github.io/autofill-demo/basic.html" target="_blank">Demo page</a>
-  </p>
   <fieldset>
     <legend data-localization="addressListHeader"/>
     <select id="addresses" size="9" multiple="multiple"/>

diff --git a/browser/extensions/formautofill/locales/en-US/formautofill.properties b/browser/extensions/formautofill/locales/en-US/formautofill.properties
@@ -55,3 +55,4 @@ tel = Phone
 email = Email
 cancel = Cancel
 save = Save
+countryWarningMessage = Autofill is currently available only for US addresses
diff --git a/browser/extensions/formautofill/skin/shared/editAddress.css b/browser/extensions/formautofill/skin/shared/editAddress.css
@@ -12,15 +12,17 @@ body {
 
 form,
 label,
-div {
+div,
+p {
   display: flex;
 }
 
 form {
   flex-wrap: wrap;
 }
 
-label {
+label,
+p {
   margin: 0 0 0.5em;
 }
 
@@ -49,7 +51,10 @@ textarea {
 }
 
 button {
+  font-size: 1.2em;
   padding: 3px 2em;
+  margin-inline-start: 10px;
+  margin-inline-end: 0;
 }
 
 #given-name-container,
@@ -77,11 +82,19 @@ button {
 #family-name,
 #organization,
 #address-level2,
-#tel{
+#tel {
   flex: 0 0 auto;
 }
 
 #street-address,
 #email {
   flex: 1 0 auto;
 }
+
+#country-warning-message {
+  flex: 1;
+  align-items: center;
+  text-align: start;
+  color: #737373;
+  padding-inline-start: 1em;
+}