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

chrome/browser/resources/options/autofill_edit_address_overlay.js

 // Copyright (c) 2010 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 cr.define('options', function() {
   const OptionsPage = options.OptionsPage;
 
   // The GUID of the loaded address.
   var guid;
 
@@ skipping 22 matching lines @@
       var self = this;
       $('autoFillEditAddressCancelButton').onclick = function(event) {
         self.dismissOverlay_();
       }
       $('autoFillEditAddressApplyButton').onclick = function(event) {
         self.saveAddress_();
         self.dismissOverlay_();
       }
 
       self.guid = '';
+      self.populateCountryList_();
       self.clearInputFields_();
       self.connectInputEvents_();
     },
 
     /**
      * Clears any uncommitted input, resets the stored GUID and dismisses the
      * overlay.
      * @private
      */
     dismissOverlay_: function() {
       this.clearInputFields_();
       this.guid = '';
       OptionsPage.closeOverlay();
     },
 
     /**
      * Aggregates the values in the input fields into an array and sends the
      * array to the AutoFill handler.
      * @private
      */
     saveAddress_: 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[7] = $('postalCode').value;
       address[8] = $('country').value;
       address[9] = $('phone').value;
       address[10] = $('fax').value;
       address[11] = $('email').value;
 
       chrome.send('setAddress', address);
     },
 
     /**
      * Connects each input field to the inputFieldChanged_() method that enables
      * or disables the 'Ok' button based on whether all the fields are empty or
      * not.
      * @private
      */
     connectInputEvents_: 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);
+      }
     },
 
     /**
      * Checks the values of each of the input fields and disables the 'Ok'
      * button if all of the fields are empty.
      * @private
      */
     inputFieldChanged_: 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) {

[James Hawkins, 2011/02/12 20:32:45]

Document parameter.

[Ilya Sherman, 2011/02/16 10:27:18]

Removed.

+      var countryCode = $('country').value;
+      if (countryCode == '')

[James Hawkins, 2011/02/12 20:32:45]

if (!countryCode)

[Ilya Sherman, 2011/02/16 10:27:18]

Done.

+        countryCode = templateData.defaultCountryCode;
+
+      var details = templateData.autofillCountryData[countryCode];
+      var postal = $('postalCodeLabel');
+      postal.textContent = details['postalCodeLabel'];

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

Use i18n-content attribute instead

[Ilya Sherman, 2011/02/16 10:27:18]

As discussed on irc, can't use i18n-content because this content is dynamic.

+      $('stateLabel').textContent = details['stateLabel'];

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

same here

+
+      // Also update the 'Ok' button as needed.
+      this.inputFieldChanged_();
+    },
+
+    /**
+     * Populates the country <select> list.
+     * @private
+     */
+    populateCountryList_: function() {
+      var countryData = templateData.autofillCountryData;

[James Hawkins, 2011/02/12 20:32:45]

localStrings.getString('autofillCountryData');

[Ilya Sherman, 2011/02/16 10:27:18]

It's not actually a string, so getString() doesn't seem appropriate.  I'm not
sure if there's a more transparent way to pass the country data to the WebUI
layer -- the current approach mirrors how the "add language" overlay loads is
data.

+      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 = new Array();

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

Use literals where possible.

var countries = [];

[Ilya Sherman, 2011/02/16 10:27:18]

Done.

+      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,

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

Skip the quotes?

The Google3 style rule is to use quoted property access when you are dealing
with external data.

var country = {
  countryCode: countryCode,
  name: countryData[countryCode]['name']
};

[Ilya Sherman, 2011/02/16 10:27:18]

Done.

+          'name': countryData[countryCode]['name']
+        };
+        countries[countries.length] = country;

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

countries.push(country)

[Ilya Sherman, 2011/02/16 10:27:18]

Done.

+      }
+
+      // Sort the countries in alphabetical order by name.
+      countries = countries.sort(function(a, b) {
+        return a['name'] < b['name']? -1 : 1;

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

ws around ?

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

a.name < b.name ? -1 : 1

[Ilya Sherman, 2011/02/16 10:27:18]

Done.

[Ilya Sherman, 2011/02/16 10:27:18]

Done.

+      });
+
+      // Insert the default country at the beginning of the array.
+      var defaultCountry = {
+        'countryCode': defaultCountryCode,
+        'name': countryData[defaultCountryCode]['name']
+      };
+      countries.unshift(defaultCountry);
+
+      // Add the countries to the country <select> list.
+      var countryList = $('country');
+      for (var i = 0; i < countries.length; ++i) {

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

i++ is the norm in js

[Ilya Sherman, 2011/02/16 10:27:18]

Done.

+        var option = document.createElement('option');

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

or

var option = new Option(text, value);

[Ilya Sherman, 2011/02/16 10:27:18]

Done.

+        option.value = countries[i]['countryCode'];
+        option.textContent = countries[i]['name'];
+        countryList.appendChild(option)
+      }
+    },
+
+    /**
      * Clears the value of each input field.
      * @private
      */
     clearInputFields_: function() {
       $('fullName').value = '';
       $('companyName').value = '';
       $('addrLine1').value = '';
       $('addrLine2').value = '';
       $('city').value = '';
       $('state').value = '';
-      $('zipCode').value = '';
+      $('postalCode').value = '';
       $('country').value = '';
       $('phone').value = '';
       $('fax').value = '';
       $('email').value = '';
+
+      this.countryChanged_();
     },
 
     /**
      * Loads the address data from |address|, sets the input fields based on
      * this data and stores the GUID of the address.
      * @private
      */
     loadAddress_: function(address) {
       this.setInputFields_(address);
       this.inputFieldChanged_();
       this.guid = address['guid'];
     },
 
     /**
      * Sets the value of each input field according to |address|
      * @private
      */
     setInputFields_: function(address) {
       $('fullName').value = address['fullName'];
       $('companyName').value = address['companyName'];
       $('addrLine1').value = address['addrLine1'];
       $('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'];
+
+      this.countryChanged_();
     },
   };
 
   AutoFillEditAddressOverlay.clearInputFields = function() {
     AutoFillEditAddressOverlay.getInstance().clearInputFields_();
   };
 
   AutoFillEditAddressOverlay.loadAddress = function(address) {
     AutoFillEditAddressOverlay.getInstance().loadAddress_(address);
   };
 
   AutoFillEditAddressOverlay.setTitle = function(title) {
     $('autoFillAddressTitle').textContent = title;
   };
 
   // Export
   return {
     AutoFillEditAddressOverlay: AutoFillEditAddressOverlay
   };
 });