Bug 1377360 - [Form Autofill] Move warning message from the manage addresses dialog to the edit address dialog. r=lchang draft
authorScott Wu <scottcwwu@gmail.com>
Fri, 28 Jul 2017 17:37:23 +0800
changeset 617323 606411c2e64b55d98e109b6c5cd2f71646544630
parent 617261 b01cd895f1b7aa0ddafe7dcfa1b294ce9e3afc51
child 639797 57f39c3a7ec1c11b1015f0426c8a01e6b77a5a4b
push id71032
push userbmo:scwwu@mozilla.com
push dateFri, 28 Jul 2017 10:24:01 +0000
reviewerslchang
bugs1377360
milestone56.0a1
Bug 1377360 - [Form Autofill] Move warning message from the manage addresses dialog to the edit address dialog. r=lchang MozReview-Commit-ID: IuZpHQ6hyBo
browser/extensions/formautofill/content/editAddress.xhtml
browser/extensions/formautofill/content/manageAddresses.xhtml
browser/extensions/formautofill/locales/en-US/formautofill.properties
browser/extensions/formautofill/skin/shared/editAddress.css
--- a/browser/extensions/formautofill/content/editAddress.xhtml
+++ b/browser/extensions/formautofill/content/editAddress.xhtml
@@ -46,16 +46,17 @@
     </label>
     <label id="country-container">
       <span data-localization="country"/>
       <select id="country">
         <option/>
         <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"/>
     </label>
     <label id="tel-container">
       <span data-localization="tel"/>
       <input id="tel" type="tel"/>
     </label>
--- a/browser/extensions/formautofill/content/manageAddresses.xhtml
+++ b/browser/extensions/formautofill/content/manageAddresses.xhtml
@@ -6,21 +6,16 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title data-localization="manageDialogTitle"/>
   <link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
   <link rel="stylesheet" href="chrome://formautofill/content/manageAddresses.css" />
   <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"/>
   </fieldset>
   <div id="controls-container">
     <button id="remove" disabled="disabled" data-localization="remove"/>
     <button id="add" data-localization="add"/>
     <button id="edit" disabled="disabled" data-localization="edit"/>
--- a/browser/extensions/formautofill/locales/en-US/formautofill.properties
+++ b/browser/extensions/formautofill/locales/en-US/formautofill.properties
@@ -50,8 +50,9 @@ province = Province
 state = State
 postalCode = Postal Code
 zip = Zip Code
 country = Country or Region
 tel = Phone
 email = Email
 cancel = Cancel
 save = Save
+countryWarningMessage = Autofill is currently available only for US addresses
--- a/browser/extensions/formautofill/skin/shared/editAddress.css
+++ b/browser/extensions/formautofill/skin/shared/editAddress.css
@@ -7,25 +7,27 @@ html {
 }
 
 body {
   font-size: 1rem;
 }
 
 form,
 label,
-div {
+div,
+p {
   display: flex;
 }
 
 form {
   flex-wrap: wrap;
 }
 
-label {
+label,
+p {
   margin: 0 0 0.5em;
 }
 
 label > span {
   box-sizing: border-box;
   flex: 0 0 9.5em;
   padding-inline-end: 0.5em;
   align-self: center;
@@ -44,17 +46,20 @@ option {
   padding: 5px 10px;
 }
 
 textarea {
   resize: none;
 }
 
 button {
+  font-size: 1.2em;
   padding: 3px 2em;
+  margin-inline-start: 10px;
+  margin-inline-end: 0;
 }
 
 #given-name-container,
 #additional-name-container,
 #address-level1-container,
 #postal-code-container,
 #country-container {
   flex: 0 1 50%;
@@ -72,16 +77,24 @@ button {
 
 #controls-container {
   justify-content: end;
 }
 
 #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;
+}