Bug 1362584 - Show autofill name fields in the management/preferences UI r=scottwu draft
authorMatthew Noorenberghe <mozilla@noorenberghe.ca>
Fri, 05 May 2017 17:02:37 -0700
changeset 573574 e0f512ec3074e87d0dc6ee182b410aaa5ebadab6
parent 573572 2c932f86f864b2a4a91666191af70a51f1c86ba3
child 627342 9c95e458312b6743a3fbe8554219ec0eb69e7af0
push id57437
push usermozilla@noorenberghe.ca
push dateSat, 06 May 2017 00:02:57 +0000
reviewersscottwu
bugs1362584
milestone55.0a1
Bug 1362584 - Show autofill name fields in the management/preferences UI r=scottwu MozReview-Commit-ID: 7m3sKGWfERC
browser/extensions/formautofill/content/editProfile.xhtml
browser/extensions/formautofill/content/manageProfiles.js
browser/extensions/formautofill/skin/shared/editProfile.css
--- a/browser/extensions/formautofill/content/editProfile.xhtml
+++ b/browser/extensions/formautofill/content/editProfile.xhtml
@@ -11,27 +11,27 @@
   <link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
   <link rel="stylesheet" href="chrome://browser/skin/preferences/in-content/dialog.css" />
   <link rel="stylesheet" href="chrome://formautofill-shared/skin/editProfile.css" />
   <link rel="stylesheet" href="chrome://formautofill/skin/editProfile.css" />
   <script src="chrome://formautofill/content/editProfile.js"></script>
 </head>
 <body>
   <form>
-    <label id="first-name-container">
+    <label id="given-name-container">
       <span>First Name</span>
-      <input id="first-name" type="text"/>
+      <input id="given-name" type="text"/>
     </label>
-    <label id="middle-name-container">
+    <label id="additional-name-container">
       <span>Middle Name</span>
-      <input id="middle-name" type="text"/>
+      <input id="additional-name" type="text"/>
     </label>
-    <label id="last-name-container">
+    <label id="family-name-container">
       <span>Last Name</span>
-      <input id="last-name" type="text"/>
+      <input id="family-name" type="text"/>
     </label>
     <label id="organization-container">
       <span>Company</span>
       <input id="organization" type="text"/>
     </label>
     <label id="street-address-container">
       <span>Street Address</span>
       <textarea id="street-address"/>
--- a/browser/extensions/formautofill/content/manageProfiles.js
+++ b/browser/extensions/formautofill/content/manageProfiles.js
@@ -134,16 +134,17 @@ ManageProfileDialog.prototype = {
    * @param  {object} profile
    * @returns {string}
    */
   getProfileLabel(profile) {
     // TODO: Implement a smarter way for deciding what to display
     //       as option text. Possibly improve the algorithm in
     //       ProfileAutoCompleteResult.jsm and reuse it here.
     const fieldOrder = [
+      "name",
       "street-address",  // Street address
       "address-level2",  // City/Town
       "organization",    // Company or organization name
       "address-level1",  // Province/State (Standardized code if possible)
       "country",         // Country
       "postal-code",     // Postal code
       "tel",             // Phone number
       "email",           // Email address
@@ -164,17 +165,17 @@ ManageProfileDialog.prototype = {
 
   /**
    * Open the edit profile dialog to create/edit a profile.
    *
    * @param  {object} profile [optional]
    */
   openEditDialog(profile) {
     window.openDialog(EDIT_PROFILE_URL, null,
-                      "chrome,centerscreen,modal,width=600,height=370",
+                      "chrome,centerscreen,modal,width=600,height=450",
                       profile);
   },
 
   /**
    * Enable/disable the Edit and Remove buttons based on number of selected
    * options.
    *
    * @param  {number} selectedCount
--- a/browser/extensions/formautofill/skin/shared/editProfile.css
+++ b/browser/extensions/formautofill/skin/shared/editProfile.css
@@ -47,49 +47,42 @@ textarea {
 button {
   padding: 3px 2em;
 }
 
 #country-container {
   width: 15em;
 }
 
-#first-name-container,
-#middle-name-container,
+#given-name-container,
+#additional-name-container,
 #address-level1-container,
 #postal-code-container,
 #country-container {
   flex: 0 1 50%;
 }
 
-#last-name-container,
+#family-name-container,
 #organization-container,
 #street-address-container,
 #address-level2-container,
 #email-container,
 #tel-container,
 #controls-container {
   flex: 0 1 100%;
 }
 
 #controls-container {
   justify-content: end;
 }
 
-#last-name,
+#family-name,
 #organization,
 #address-level2,
 #tel{
   flex: 0 0 auto;
   width: calc(50% - 10em);
 }
 
 #street-address,
 #email {
   flex: 1 0 auto;
 }
-
-#first-name-container,
-#middle-name-container,
-#last-name-container {
-  /* Hide until we support names */
-  display: none;
-}