Autofill i18n: Set postal code and state field labels based on the selected country.

chrome/browser/resources/options/autofill_edit_address_overlay.js

Index: chrome/browser/resources/options/autofill_edit_address_overlay.js
diff --git a/chrome/browser/resources/options/autofill_edit_address_overlay.js b/chrome/browser/resources/options/autofill_edit_address_overlay.js
index fe461f3e7ad4599586909eae97d3f8f4cb34aee6..7d11c4079a521f84162858b32131d14df3ce0bb8 100644
--- a/chrome/browser/resources/options/autofill_edit_address_overlay.js
+++ b/chrome/browser/resources/options/autofill_edit_address_overlay.js
@@ -40,6 +40,7 @@ cr.define('options', function() {
       }
 
       self.guid = '';
+      self.populateCountryList_();
       self.clearInputFields_();
       self.connectInputEvents_();
     },
@@ -64,13 +65,13 @@ cr.define('options', function() {
       var address = new Array();
       address[0] = this.guid;
       address[1] = $('fullName').value;
-      address[2] = $('companyName').value;
-      address[3] = $('addrLine1').value;
-      address[4] = $('addrLine2').value;
-      address[5] = $('city').value;
-      address[6] = $('state').value;
-      address[7] = $('zipCode').value;
-      address[8] = $('country').value;
+      address[2] = $('country').value;

[dhollowa, 2011/02/17 00:55:28]

Country down below.

[Ilya Sherman, 2011/02/17 23:09:11]

Done.

+      address[3] = $('companyName').value;
+      address[4] = $('addrLine1').value;
+      address[5] = $('addrLine2').value;
+      address[6] = $('city').value;
+      address[7] = $('state').value;
+      address[8] = $('postal-code').value;
       address[9] = $('phone').value;
       address[10] = $('fax').value;
       address[11] = $('email').value;
@@ -86,13 +87,16 @@ cr.define('options', function() {
      */
     connectInputEvents_: function() {
       var self = this;
-      $('fullName').oninput = $('companyName').oninput =
+      $('fullName').oninput = $('country').oninput = $('companyName').oninput =
       $('addrLine1').oninput = $('addrLine2').oninput = $('city').oninput =
-      $('state').oninput = $('country').oninput = $('zipCode').oninput =
-      $('phone').oninput = $('fax').oninput =
-      $('email').oninput = function(event) {
+      $('state').oninput = $('postal-code').oninput = $('phone').oninput =
+      $('fax').oninput = $('email').oninput = function(event) {
         self.inputFieldChanged_();
       }
+
+      $('country').onchange = function(event) {
+        self.countryChanged_();
+      }
     },
 
     /**
@@ -102,29 +106,99 @@ cr.define('options', function() {
      */
     inputFieldChanged_: function() {
       var disabled =
-          !$('fullName').value && !$('companyName').value &&
-          !$('addrLine1').value && !$('addrLine2').value && !$('city').value &&
-          !$('state').value && !$('zipCode').value && !('country').value &&
-          !$('phone').value && !$('fax').value && !$('email').value;
+          !$('fullName').value && !$('country').value && 
+          !$('companyName').value && !$('addrLine1').value &&
+          !$('addrLine2').value && !$('city').value && !$('state').value &&
+          !$('postal-code').value && !$('phone').value && !$('fax').value &&
+          !$('email').value;
       $('autoFillEditAddressApplyButton').disabled = disabled;
     },
 
     /**
+     * Updates the postal code and state field labels appropriately for the
+     * selected country.
+     * @private
+     */
+    countryChanged_: function() {
+      var countryCode = $('country').value;
+      if (!countryCode)
+        countryCode = templateData.defaultCountryCode;
+
+      var details = templateData.autofillCountryData[countryCode];
+      var postal = $('postal-code-label');
+      postal.textContent = details['postalCodeLabel'];
+      $('state-label').textContent = details['stateLabel'];
+
+      // Also update the 'Ok' button as needed.
+      this.inputFieldChanged_();
+    },
+
+    /**
+     * Populates the country <select> list.
+     * @private
+     */
+    populateCountryList_: function() {
+      var countryData = templateData.autofillCountryData;
+      var defaultCountryCode = templateData.defaultCountryCode;
+
+      // Build an array of the country names and their corresponding country
+      // codes, so that we can sort and insert them in order.
+      var countries = [];
+      for (var countryCode in countryData) {
+        // We always want the default country to be at the top of the list, so
+        // we handle it separately.
+        if (countryCode == defaultCountryCode)
+          continue;
+
+        var country = {
+          countryCode: countryCode,
+          name: countryData[countryCode]['name']
+        };
+        countries.push(country);
+      }
+
+      // Sort the countries in alphabetical order by name.
+      countries = countries.sort(function(a, b) {
+        return a.name < b.name ? -1 : 1;
+      });
+
+      // Insert the empty and default countries at the beginning of the array.
+      var emptyCountry = {
+        countryCode: '',
+        name: ''
+      };
+      var defaultCountry = {
+        countryCode: defaultCountryCode,
+        name: countryData[defaultCountryCode]['name']
+      };
+      countries.unshift(emptyCountry, defaultCountry);
+
+      // Add the countries to the country <select> list.
+      var countryList = $('country');
+      for (var i = 0; i < countries.length; i++) {
+        var country = new Option(countries[i].name, countries[i].countryCode);
+        countryList.appendChild(country)
+      }
+    },
+
+    /**
      * Clears the value of each input field.
      * @private
      */
     clearInputFields_: function() {
       $('fullName').value = '';
+      $('country').value = '';
       $('companyName').value = '';
       $('addrLine1').value = '';
       $('addrLine2').value = '';
       $('city').value = '';
       $('state').value = '';
-      $('zipCode').value = '';
-      $('country').value = '';
+      $('postal-code').value = '';
       $('phone').value = '';
       $('fax').value = '';
       $('email').value = '';
+
+      this.countryChanged_();
     },
 
     /**
@@ -144,16 +218,18 @@ cr.define('options', function() {
      */
     setInputFields_: function(address) {
       $('fullName').value = address['fullName'];
+      $('country').value = address['country'];
       $('companyName').value = address['companyName'];
       $('addrLine1').value = address['addrLine1'];
       $('addrLine2').value = address['addrLine2'];
       $('city').value = address['city'];
       $('state').value = address['state'];
-      $('zipCode').value = address['zipCode'];
-      $('country').value = address['country'];
+      $('postal-code').value = address['postal-code'];
       $('phone').value = address['phone'];
       $('fax').value = address['fax'];
       $('email').value = address['email'];
+
+      this.countryChanged_();
     },
   };