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..8d7664b6510868fd8d5666f2489cd06592dd8454 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_();
     },
@@ -69,7 +70,7 @@ cr.define('options', function() {
       address[4] = $('addrLine2').value;
       address[5] = $('city').value;
       address[6] = $('state').value;
-      address[7] = $('zipCode').value;
+      address[7] = $('postalCode').value;
       address[8] = $('country').value;
       address[9] = $('phone').value;
       address[10] = $('fax').value;
@@ -88,11 +89,15 @@ cr.define('options', function() {
       var self = this;
       $('fullName').oninput = $('companyName').oninput =
       $('addrLine1').oninput = $('addrLine2').oninput = $('city').oninput =
-      $('state').oninput = $('country').oninput = $('zipCode').oninput =
+      $('state').oninput = $('country').oninput = $('postalCode').oninput =
       $('phone').oninput = $('fax').oninput =
       $('email').oninput = function(event) {
         self.inputFieldChanged_();
       }
+
+      $('country').onchange = function(event) {
+        self.countryChanged_(event);
+      }
     },
 
     /**
@@ -104,12 +109,39 @@ cr.define('options', function() {
       var disabled =
           !$('fullName').value && !$('companyName').value &&
           !$('addrLine1').value && !$('addrLine2').value && !$('city').value &&
-          !$('state').value && !$('zipCode').value && !('country').value &&
+          !$('state').value && !$('postalCode').value && !('country').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(event) {
+      var country_code = $('country').value;

[arv (Not doing code reviews), 2011/02/11 22:55:37]

No underscores in JS

[Ilya Sherman, 2011/02/12 07:33:02]

Done.

+      var details = templateData.autofillCountryData[country_code];
+      $('postalCodeLabel').textContent = details['postalCodeLabel'];
+      $('stateLabel').textContent = details['stateLabel'];
+    },
+
+    /**
+     * Populates the country <select> list.
+     * @private
+     */
+    populateCountryList_: function() {
+      var countryList = $('country');
+      var countries = templateData.autofillCountryData;
+      for (country_code in countries) {

[arv (Not doing code reviews), 2011/02/11 22:55:37]

missing var

[Ilya Sherman, 2011/02/12 07:33:02]

Done.

+        var option = document.createElement('option');
+        option.value = country_code;
+        option.textContent = countries[country_code]['name'];
+        countryList.appendChild(option)
+      }
+    },
+
+    /**
      * Clears the value of each input field.
      * @private
      */
@@ -120,11 +152,14 @@ cr.define('options', function() {
       $('addrLine2').value = '';
       $('city').value = '';
       $('state').value = '';
-      $('zipCode').value = '';
+      $('postalCode').value = '';
       $('country').value = '';
       $('phone').value = '';
       $('fax').value = '';
       $('email').value = '';
+
+      var self = this;
+      self.countryChanged_();

[arv (Not doing code reviews), 2011/02/11 22:55:37]

this.countryChanged_();

[Ilya Sherman, 2011/02/12 07:33:02]

Done.  When should "self" be used?  I was mirroring connectInputEvents_().

[arv (Not doing code reviews), 2011/02/14 18:36:41]

Only when you need to capture a reference to this in the closure. For example:

var self = this;
... function() {
  self.doSomething();
|
 

     },
 
     /**
@@ -149,11 +184,14 @@ cr.define('options', function() {
       $('addrLine2').value = address['addrLine2'];
       $('city').value = address['city'];
       $('state').value = address['state'];
-      $('zipCode').value = address['zipCode'];
+      $('postalCode').value = address['postalCode'];
       $('country').value = address['country'];
       $('phone').value = address['phone'];
       $('fax').value = address['fax'];
       $('email').value = address['email'];
+
+      var self = this;
+      self.countryChanged_();
     },
   };