i18n address editing in chrome://settings/autofillEditAddress.

chrome/browser/resources/options/autofill_edit_address_overlay.js

 // Copyright (c) 2012 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 */ var OptionsPage = options.OptionsPage;
   /** @const */ var ArrayDataModel = cr.ui.ArrayDataModel;
 
   // The GUID of the loaded address.
   var guid;
 
+  // The BCP 47 language code for the layout of input fields.
+  var languageCode;
+
   /**
    * AutofillEditAddressOverlay class
    * Encapsulated handling of the 'Add Page' overlay page.
    * @class
    */
   function AutofillEditAddressOverlay() {
     OptionsPage.call(this, 'autofillEditAddress',
                      loadTimeData.getString('autofillEditAddressTitle'),
                      'autofill-edit-address-overlay');
   }
@@ skipping 36 matching lines @@
       // affects layout, which interferes with being able to click on the
       // buttons.
       $('autofill-edit-address-apply-button').onmousedown = function(event) {
         event.preventDefault();
       };
       $('autofill-edit-address-cancel-button').onmousedown = function(event) {
         event.preventDefault();
       };
 
       self.guid = '';
+      self.languageCode = '';
       self.populateCountryList_();
       self.clearInputFields_();
       self.connectInputEvents_();
     },
 
     /**
     * Specifically catch the situations in which the overlay is cancelled
     * externally (e.g. by pressing <Esc>), so that the input fields and
     * GUID can be properly cleared.
     * @override
     */
     handleCancel: function() {
       this.dismissOverlay_();
     },
 
     /**
      * Creates, decorates and initializes the multi-value lists for full name,
      * phone, and email.
      * @private
      */
     createMultiValueLists_: function() {
-      var list = $('full-name-list');
-      options.autofillOptions.AutofillNameValuesList.decorate(list);
-      list.autoExpands = true;
-
-      list = $('phone-list');
+      var list = $('phone-list');
       options.autofillOptions.AutofillPhoneValuesList.decorate(list);
       list.autoExpands = true;
 
       list = $('email-list');
       options.autofillOptions.AutofillValuesList.decorate(list);
       list.autoExpands = true;
     },
 
     /**
      * Updates the data model for the list named |listName| with the values from
@@ skipping 20 matching lines @@
     },
 
     /**
      * Clears any uncommitted input, resets the stored GUID and dismisses the
      * overlay.
      * @private
      */
     dismissOverlay_: function() {
       this.clearInputFields_();
       this.guid = '';
+      this.languageCode = '';
       OptionsPage.closeOverlay();
     },
 
     /**
+     * Aggregates the values in the input fields into an object.
+     * @private
+     */
+    getAddress_: function() {
+      var address = {};
+
+      var list = $('full-name-list');
+      address.recipient =
+          list ? list.dataModel.slice(0, list.dataModel.length - 1) : [];
+
+      var item = $('organization');
+      address.organization = item ? item.value : '';
+
+      list = $('street-address-list');
+      address.streetAddress =
+          list ? list.dataModel.slice(0, list.dataModel.length - 1) : [];
+
+      item = $('dependent-locality');
+      address.dependentLocality = item ? item.value : '';
+
+      item = $('locality');
+      address.locality = item ? item.value : '';
+
+      item = $('admin-area');
+      address.adminArea = item ? item.value : '';
+
+      item = $('postal-code');
+      address.postalCode = item ? item.value : '';
+
+      item = $('sorting-code');
+      address.sortingCode = item ? item.value : '';
+
+      address.country = $('country').value;
+
+      list = $('phone-list');
+      address.phone = list.dataModel.slice(0, list.dataModel.length - 1);
+
+      list = $('email-list');
+      address.email = list.dataModel.slice(0, list.dataModel.length - 1);
+
+      return address;
+    },
+
+    /**
      * 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;
-      var list = $('full-name-list');
-      address[1] = list.dataModel.slice(0, list.dataModel.length - 1);
-      address[2] = $('company-name').value;
-      address[3] = $('addr-line-1').value;
-      address[4] = $('addr-line-2').value;
-      address[5] = $('city').value;
-      address[6] = $('state').value;
-      address[7] = $('postal-code').value;
-      address[8] = $('country').value;
-      list = $('phone-list');
-      address[9] = list.dataModel.slice(0, list.dataModel.length - 1);
-      list = $('email-list');
-      address[10] = list.dataModel.slice(0, list.dataModel.length - 1);
+      var address = this.getAddress_();
+      var serialized = new Array();
+      serialized[0] = this.guid;
+      serialized[1] = address.recipient;
+      serialized[2] = address.organization;
+      serialized[3] = address.streetAddress;
+      serialized[4] = address.dependentLocality;
+      serialized[5] = address.locality;
+      serialized[6] = address.adminArea;
+      serialized[7] = address.postalCode;
+      serialized[8] = address.sortingCode;
+      serialized[9] = address.country;
+      serialized[10] = address.phone;
+      serialized[11] = address.email;
+      serialized[12] = this.languageCode;
 
-      chrome.send('setAddress', address);
+      chrome.send('setAddress', serialized);
     },
 
     /**
      * 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;
-      $('company-name').oninput = $('addr-line-1').oninput =
-          $('addr-line-2').oninput = $('city').oninput = $('state').oninput =
-          $('postal-code').oninput = function(event) {
-        self.inputFieldChanged_();
-      };
+      var item = $('organization');
+      if (item)
+        item.oninput = function(event) { self.inputFieldChanged_(); };
 
-      $('country').onchange = function(event) {
-        self.countryChanged_();
-      };
+      item = $('postal-code');
+      if (item)
+        item.oninput = function(event) { self.inputFieldChanged_(); };
+
+      item = $('sorting-code');
+      if (item)
+        item.oninput = function(event) { self.inputFieldChanged_(); };
+
+      item = $('dependent-locality');
+      if (item)
+        item.oninput = function(event) { self.inputFieldChanged_(); };
+
+      item = $('locality');
+      if (item)
+        item.oninput = function(event) { self.inputFieldChanged_(); };
+
+      item = 'admin-area';

[Evan Stade, 2014/04/22 00:51:58]

ditto

[please use gerrit instead, 2014/04/24 20:10:59]

Done.

+      if (item)
+        item.oninput = function(event) { self.inputFieldChanged_(); };
+
+      $('country').onchange = function(event) { self.countryChanged_(); };
     },
 
     /**
      * Checks the values of each of the input fields and disables the 'Ok'
      * button if all of the fields are empty.
      * @private
      */
     inputFieldChanged_: function() {
       // Length of lists are tested for <= 1 due to the "add" placeholder item
       // in the list.
       var disabled =
-          $('full-name-list').items.length <= 1 &&
-          !$('company-name').value &&
-          !$('addr-line-1').value && !$('addr-line-2').value &&
-          !$('city').value && !$('state').value && !$('postal-code').value &&
-          !$('country').value && $('phone-list').items.length <= 1 &&
+          (!$('full-name-list') || $('full-name-list').items.length <= 1) &&
+          (!$('organization') || !$('organization').value) &&
+          (!$('street-address-list') ||
+           $('street-address-list').items.length <= 1) &&
+          (!$('dependent-locality') || !$('dependent-locality').value) &&
+          (!$('locality') || !$('locality').value) &&
+          (!$('admin-area') || !$('admin-area').value) &&
+          (!$('postal-code') || !$('postal-code').value) &&
+          (!$('sorting-code') || !$('sorting-code').value) &&
+          !$('country').value &&
+          $('phone-list').items.length <= 1 &&
           $('email-list').items.length <= 1;
       $('autofill-edit-address-apply-button').disabled = disabled;
     },
 
     /**
-     * Updates the postal code and state field labels appropriately for the
-     * selected country.
+     * Updates the address fields appropriately for the selected country.
      * @private
      */
     countryChanged_: function() {
       var countryCode = $('country').value ||
           loadTimeData.getString('defaultCountryCode');
-
-      var details = loadTimeData.getValue('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_();
+      chrome.send('loadAddressEditorComponents', [countryCode]);
     },
 
     /**
      * Populates the country <select> list.
      * @private
      */
     populateCountryList_: function() {
       var countryList = loadTimeData.getValue('autofillCountrySelectList');
 
       // Add the countries to the country <select> list.
       var countrySelect = $('country');
       // Add an empty option.
       countrySelect.appendChild(new Option('', ''));
       for (var i = 0; i < countryList.length; i++) {
         var option = new Option(countryList[i].name,
                                 countryList[i].value);
         option.disabled = countryList[i].value == 'separator';
         countrySelect.appendChild(option);
       }
     },
 
     /**
      * Clears the value of each input field.
      * @private
      */
     clearInputFields_: function() {

[Evan Stade, 2014/04/22 00:51:58]

you should be able to use a clever query selector + a loop

[please use gerrit instead, 2014/04/24 20:10:59]

Done.

-      this.setMultiValueList_('full-name-list', []);
-      $('company-name').value = '';
-      $('addr-line-1').value = '';
-      $('addr-line-2').value = '';
-      $('city').value = '';
-      $('state').value = '';
-      $('postal-code').value = '';
+      if ($('full-name-list'))
+        this.setMultiValueList_('full-name-list', []);
+
+      var item = $('organization');
+      if (item)
+        item.value = '';
+
+      if ($('street-address-list'))
+        this.setMultiValueList_('street-address-list', []);
+
+      item = $('postal-code');
+      if (item)
+        item.value = '';
+
+      item = $('sorting-code');
+      if (item)
+        item.value = '';
+
+      item = $('dependent-locality');
+      if (item)
+        item.value = '';
+
+      item = $('locality');
+      if (item)
+        item.value = '';
+
+      item = 'admin-area';

[Evan Stade, 2014/04/22 00:51:58]

this is missing a dollar sign

[please use gerrit instead, 2014/04/24 20:10:59]

Done.

+      if (item)
+        item.value = '';
+
       $('country').value = '';
       this.setMultiValueList_('phone-list', []);
       this.setMultiValueList_('email-list', []);
-
-      this.countryChanged_();
     },
 
     /**
      * Loads the address data from |address|, sets the input fields based on
-     * this data and stores the GUID of the address.
+     * this data, and stores the GUID and language code of the address.
      * @private
      */
     loadAddress_: function(address) {
+      this.rebuildInputFields_(address.components);
       this.setInputFields_(address);
       this.inputFieldChanged_();
       this.guid = address.guid;
+      this.languageCode = address.languageCode;
     },
 
     /**
-     * Sets the value of each input field according to |address|
+     * Takes a snapshot of the input values, clears the input values, loads the
+     * address input layout from |input.components|, restores the input values
+     * from snapshot, and stores the |input.languageCode| for the address.
+     * @private
+     */
+    loadAddressComponents_: function(input) {
+      var address = this.getAddress_();
+      this.rebuildInputFields_(input.components);
+      this.setInputFields_(address);
+      this.inputFieldChanged_();
+      this.languageCode = input.languageCode;
+    },
+
+    /**
+     * Sets the value of each input field according to |address|.
      * @private
      */
     setInputFields_: function(address) {
-      this.setMultiValueList_('full-name-list', address.fullName);
-      $('company-name').value = address.companyName;
-      $('addr-line-1').value = address.addrLine1;
-      $('addr-line-2').value = address.addrLine2;
-      $('city').value = address.city;
-      $('state').value = address.state;
-      $('postal-code').value = address.postalCode;
+      if ($('full-name-list'))
+        this.setMultiValueList_('full-name-list', address.recipient);
+
+      var item = $('organization');
+      if (item)
+        item.value = address.organization;
+
+      if ($('street-address-list'))
+        this.setMultiValueList_('street-address-list', address.streetAddress);
+
+      item = $('postal-code');
+      if (item)
+        item.value = address.postalCode;
+
+      item = $('sorting-code');
+      if (item)
+        item.value = address.sortingCode;
+
+      item = $('dependent-locality');
+      if (item)
+        item.value = address.dependentLocality;
+
+      item = $('locality');
+      if (item)
+        item.value = address.locality;
+
+      item = $('admin-area');
+      if (item)
+        item.value = address.adminArea;
+
       $('country').value = address.country;
       this.setMultiValueList_('phone-list', address.phone);
       this.setMultiValueList_('email-list', address.email);
+    },
 
-      this.countryChanged_();
+    /**
+     * Returns the HTML for recipient name.
+     * @private
+     */
+    getRecipientNameHtml_: function() {

[Evan Stade, 2014/04/22 00:51:58]

ditto the below comment about templates

[please use gerrit instead, 2014/04/24 20:10:59]

Done.

+      return '<div>' +
+               '<div>' +
+                 '<div id="autofill-name-labels">' +
+                   '<span>' +
+                     loadTimeData.getString('autofillFirstNameLabel') +
+                   '</span>' +
+                   '<span>' +
+                     loadTimeData.getString('autofillMiddleNameLabel') +
+                   '</span>' +
+                   '<span>' +
+                     loadTimeData.getString('autofillLastNameLabel') +
+                   '</span>' +
+                 '</div>' +
+               '</div>' +
+               '<list id="full-name-list"></list>' +
+             '</div>';
+    },
+
+    /**
+     * Clears address inputs and rebuilds the input fields according to
+     * |components|.
+     * @private
+     */
+    rebuildInputFields_: function(components) {

[Evan Stade, 2014/04/22 00:51:58]

please don't write html in js strings. You can use a template (html defined in
an html file that you clone and then update the attributes/content/etc.).

[please use gerrit instead, 2014/04/24 20:10:59]

Done.

+      content = '<div class="input-group settings-row">';
+      var hasNameFields = false;
+      for (var i in components) {
+        if (components[i].field == 'country')
+          continue;
+
+        if (i != 0 && (components[i].length == 'long' ||
+                       components[i - 1].length == 'long')) {
+          content += '</div><div class="input-group settings-row">';
+        }
+
+        if (components[i].field == 'street-address') {
+          content +=
+              '<div>' +
+                '<div>' + components[i].name + '</div>' +
+                '<list id="street-address-list" placeholder="' +
+                  loadTimeData.getString('addStreetAddressLinePlaceholder') +
+                  '"></list>' +
+              '</div>';
+          continue;
+        }
+
+        if (components[i].field == 'recipient') {
+          hasNameFields = true;
+          content += this.getRecipientNameHtml_();
+          continue;
+        }
+
+        content += '<label>';
+        content += '<div>' + components[i].name + '</div>';
+        content += '<input id="' + components[i].field + '" type="text">';

[Evan Stade, 2014/04/22 00:51:58]

the id should be more specific, "company" is not specific enough for all of
settings IMO. In fact I would just make these classes instead of IDs, then
select them with something like "#someIdForThePage input.street-address-list"

[please use gerrit instead, 2014/04/24 20:10:59]

Done.

+        content += '</label>';
+      }
+
+      if (!hasNameFields)
+        content += this.getRecipientNameHtml_();
+
+      content += '</div>';
+      $('dynamic-content-area').innerHTML = content;
+
+      var list = $('full-name-list');
+      if (list) {
+        options.autofillOptions.AutofillNameValuesList.decorate(list);
+        list.autoExpands = true;
+      }
+
+      list = $('street-address-list');
+      if (list) {
+        options.autofillOptions.AutofillValuesList.decorate(list);
+        list.autoExpands = true;
+      }
     },
   };
 
   AutofillEditAddressOverlay.loadAddress = function(address) {
     AutofillEditAddressOverlay.getInstance().loadAddress_(address);
   };
 
+  AutofillEditAddressOverlay.loadAddressComponents = function(input) {
+    AutofillEditAddressOverlay.getInstance().loadAddressComponents_(input);
+  };
+
   AutofillEditAddressOverlay.setTitle = function(title) {
     $('autofill-address-title').textContent = title;
   };
 
   AutofillEditAddressOverlay.setValidatedPhoneNumbers = function(numbers) {
     AutofillEditAddressOverlay.getInstance().setMultiValueList_('phone-list',
                                                                 numbers);
     $('phone-list').didReceiveValidationResult();
   };
 
   // Export
   return {
     AutofillEditAddressOverlay: AutofillEditAddressOverlay
   };
 });