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;
+  /** @const */ var OverlaySelector = '#autofill-edit-address-overlay ';

[Evan Stade, 2014/04/28 23:23:16]

not useful. Use this.querySelector in most places.

[please use gerrit instead, 2014/04/30 02:06:15]

Done.

 
   // 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 17 matching lines @@
       };
 
       // TODO(jhawkins): Investigate other possible solutions.
       $('autofill-edit-address-apply-button').onclick = function(event) {
         // Blur active element to ensure that pending changes are committed.
         if (document.activeElement)
           document.activeElement.blur();
         // Blurring is delayed for list elements.  Queue save and close to
         // ensure that pending changes have been applied.
         setTimeout(function() {
-          $('phone-list').doneValidating().then(function() {
-            self.saveAddress_();
-            self.dismissOverlay_();
-          });
+          document.querySelector(OverlaySelector + '[field=phone]')
+              .doneValidating().then(function() {
+                self.saveAddress_();
+                self.dismissOverlay_();
+              });
         }, 0);
       };
 
       // Prevent 'blur' events on the OK and cancel buttons, which can trigger
       // insertion of new placeholder elements.  The addition of placeholders
       // 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.populateCountryList_();
-      self.clearInputFields_();
-      self.connectInputEvents_();
+      this.guid = '';
+      this.populateCountryList_();
+      this.rebuildInputFields_(
+          loadTimeData.getValue('autofillDefaultCountryComponents'));
+      this.languageCode =
+          loadTimeData.getString('autofillDefaultCountryLanguageCode');
+      this.setInputFields_({});
+      this.connectInputEvents_();
+      this.getCountrySelector_().onchange = function(event) {
+        self.countryChanged_();
+      };
     },
 
     /**
     * 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.
+     * Creates, decorates and initializes the multi-value lists for phone and
+     * email.
      * @private
      */
     createMultiValueLists_: function() {
-      var list = $('full-name-list');
-      options.autofillOptions.AutofillNameValuesList.decorate(list);
-      list.autoExpands = true;
-
-      list = $('phone-list');
+      var list = document.querySelector(OverlaySelector + '[field=phone]');
       options.autofillOptions.AutofillPhoneValuesList.decorate(list);
       list.autoExpands = true;
 
-      list = $('email-list');
+      list = document.querySelector(OverlaySelector + '[field=email]');
       options.autofillOptions.AutofillValuesList.decorate(list);
       list.autoExpands = true;
     },
 
     /**
-     * Updates the data model for the list named |listName| with the values from
-     * |entries|.
-     * @param {string} listName The id of the list.
+     * Updates the data model for the |list| with the values from |entries|.
+     * @param {element} list The list to update.
      * @param {Array} entries The list of items to be added to the list.
+     * @private
      */
-    setMultiValueList_: function(listName, entries) {
-      // Add data entries.
-      var list = $(listName);
-
+    setMultiValueList_: function(list, entries) {
       // Add special entry for adding new values.
       var augmentedList = entries.slice();
       augmentedList.push(null);
       list.dataModel = new ArrayDataModel(augmentedList);
 
       // Update the status of the 'OK' button.
       this.inputFieldChanged_();
 
       list.dataModel.addEventListener('splice',
                                       this.inputFieldChanged_.bind(this));
       list.dataModel.addEventListener('change',
                                       this.inputFieldChanged_.bind(this));
     },
 
     /**
      * Clears any uncommitted input, resets the stored GUID and dismisses the
      * overlay.
      * @private
      */
     dismissOverlay_: function() {
-      this.clearInputFields_();
+      this.setInputFields_({});
       this.guid = '';
+      this.languageCode = '';
       OptionsPage.closeOverlay();
     },
 
     /**
+     * Returns the country selector element.
+     * @return {element} The country selector.
+     * @private
+     */
+    getCountrySelector_: function() {
+      return document.querySelector(OverlaySelector + '[field=country]');
+    },
+
+    /**
+     * Returns all list elements.
+     * @return {NodeList} The list elements.
+     * @private
+     */
+    getLists_: function() {
+      return document.querySelectorAll(OverlaySelector + 'list[field]');
+    },
+
+    /**
+     * Returns all text input elements.
+     * @return {NodeList} The text input elements.
+     * @private
+     */
+    getTextFields_: function() {
+      return document.querySelectorAll(
+          OverlaySelector + ':-webkit-any(textarea, input)[field]');
+    },
+
+    /**
+     * Aggregates the values in the input fields into an object.
+     * @return {object} The mapping from field names to values.
+     * @private
+     */
+    getInputFields_: function() {
+      var address = {};
+      address['country'] = this.getCountrySelector_().value;
+
+      var lists = this.getLists_();
+      for (var i = 0; i < lists.length; i++) {
+        address[lists[i].getAttribute('field')] =
+            lists[i].dataModel.slice(0, lists[i].dataModel.length - 1);
+      }
+
+      var fields = this.getTextFields_();
+      for (var i = 0; i < fields.length; i++)
+        address[fields[i].getAttribute('field')] = fields[i].value;
+
+      return address;
+    },
+
+    /**
+     * Sets the value of each input field according to |address|.
+     * @param {object} address The object with values to use.
+     * @private
+     */
+    setInputFields_: function(address) {
+      this.getCountrySelector_().value = address['country'] || '';
+
+      var lists = this.getLists_();
+      for (var i = 0; i < lists.length; i++) {
+        this.setMultiValueList_(
+            lists[i], address[lists[i].getAttribute('field')] || []);
+      }
+
+      var fields = this.getTextFields_();
+      for (var i = 0; i < fields.length; i++)
+        fields[i].value = address[fields[i].getAttribute('field')] || '';
+    },
+
+    /**
      * Aggregates the values in the input fields into an array and sends the
      * array to the Autofill handler.
      * @private
      */
     saveAddress_: function() {
+      var inputFields = this.getInputFields_();
       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);
+      address[1] = inputFields['fullName'] || [];
+      address[2] = inputFields['companyName'] || '';
+      address[3] = inputFields['addrLines'] || '';
+      address[4] = inputFields['dependentLocality'] || '';
+      address[5] = inputFields['city'] || '';
+      address[6] = inputFields['state'] || '';
+      address[7] = inputFields['postalCode'] || '';
+      address[8] = inputFields['sortingCode'] || '';
+      address[9] = inputFields['country'] || '';
+      address[10] = inputFields['phone'] || [];
+      address[11] = inputFields['email'] || [];
+      address[12] = this.languageCode;
 
       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;
-      $('company-name').oninput = $('addr-line-1').oninput =
-          $('addr-line-2').oninput = $('city').oninput = $('state').oninput =
-          $('postal-code').oninput = function(event) {
-        self.inputFieldChanged_();
-      };
-
-      $('country').onchange = function(event) {
-        self.countryChanged_();
-      };
+      var fields = this.getTextFields_();
+      for (var i = 0; i < fields.length; i++)

[Evan Stade, 2014/04/28 23:23:16]

loops should always have curlies

[please use gerrit instead, 2014/04/30 02:06:15]

Done.

+        fields[i].oninput = function(event) { self.inputFieldChanged_(); };
     },
 
     /**
-     * Checks the values of each of the input fields and disables the 'Ok'
-     * button if all of the fields are empty.
+     * 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 &&
-          $('email-list').items.length <= 1;
+      var disabled = true;
+      if (this.getCountrySelector_().value)
+        disabled = false;
+
+      if (disabled) {
+        // Length of lists are tested for > 1 due to the "add" placeholder item
+        // in the list.
+        var lists = this.getLists_();
+        for (var i = 0; i < lists.length; i++) {
+          if (lists[i].items.length > 1) {
+            disabled = false;
+            break;
+          }
+        }
+      }
+
+      if (disabled) {
+        var fields = this.getTextFields_();
+        for (var i = 0; i < fields.length; i++) {
+          if (fields[i].value) {
+            disabled = false;
+            break;
+          }
+        }
+      }
+
       $('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_();
+      var countryCode = this.getCountrySelector_().value;
+      if (countryCode)
+        chrome.send('loadAddressEditorComponents', [countryCode]);
+      else
+        this.inputFieldChanged_();
     },
 
     /**
      * Populates the country <select> list.
      * @private
      */
     populateCountryList_: function() {
       var countryList = loadTimeData.getValue('autofillCountrySelectList');
 
       // Add the countries to the country <select> list.
-      var countrySelect = $('country');
+      var countrySelect = this.getCountrySelector_();
       // 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() {
-      this.setMultiValueList_('full-name-list', []);
-      $('company-name').value = '';
-      $('addr-line-1').value = '';
-      $('addr-line-2').value = '';
-      $('city').value = '';
-      $('state').value = '';
-      $('postal-code').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.connectInputEvents_();
       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
      */
-    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;
-      $('country').value = address.country;
-      this.setMultiValueList_('phone-list', address.phone);
-      this.setMultiValueList_('email-list', address.email);
+    loadAddressComponents_: function(input) {
+      var address = this.getInputFields_();
+      this.rebuildInputFields_(input.components);
+      this.setInputFields_(address);
+      this.inputFieldChanged_();
+      this.connectInputEvents_();
+      this.languageCode = input.languageCode;
+    },
 
-      this.countryChanged_();
+    /**
+     * Clears address inputs and rebuilds the input fields according to
+     * |components|.
+     * @private
+     */
+    rebuildInputFields_: function(components) {
+      var content = $('autofill-edit-address-fields');
+      while (content.firstChild)
+        content.removeChild(content.firstChild);
+
+      var customFieldElements = {'fullName': 'div'};

[Evan Stade, 2014/04/28 23:23:16]

what's wrong with making this a label?

[please use gerrit instead, 2014/04/30 02:06:15]

This how chrome://settings/editoAutofillAddress works now. Here's my
understanding why that is.

When the user clicks on a <label> for a <list>, then one of two things will
happen:

Option #1: If the <list> has only a placeholder ("Add name"), then this
placeholder will be focused.

Option #2: If the <list> has some data and a placeholder, then nothing will be
focused..

Such inconsistency would be strange to a user. Therefore, the <list> is inside
of a <div> instead of <label>.

+      var customInputElements = {'fullName': 'list', 'addrLines': 'textarea'};
+
+      for (var i in components) {
+        var row = document.createElement('div');
+        row.classList.add('input-group', 'settings-row');
+        content.appendChild(row);
+
+        for (var j in components[i]) {
+          if (components[i][j].field == 'country')
+            continue;
+
+          var field = document.createElement(
+              customFieldElements[components[i][j].field] || 'label');
+          row.appendChild(field);
+
+          var label = document.createElement('div');

[Evan Stade, 2014/04/28 23:23:16]

it's confusing that field is a label while label is a div

[please use gerrit instead, 2014/04/30 02:06:15]

Renamed field to fieldContainer. Renamed label to fieldName.

+          label.textContent = components[i][j].name;
+          field.appendChild(label);
+
+          var input = document.createElement(
+              customInputElements[components[i][j].field] || 'input');
+          input.setAttribute('field', components[i][j].field);
+          input.classList.add(components[i][j].length);
+          input.setAttribute('placeholder', components[i][j].placeholder || '');
+          field.appendChild(input);
+
+          if (input.tagName == 'LIST') {

[Evan Stade, 2014/04/28 23:23:16]

This seems vaguely better:

if (input instanceOf HTMLListElement)

[please use gerrit instead, 2014/04/30 02:06:15]

HTMLListElement does not exist. (HTMLUListELement matches only <ul> elements.)

[Evan Stade, 2014/04/30 05:25:22]

input instanceof cr.ui.List

[please use gerrit instead, 2014/04/30 17:23:55]

"input instanceof cr.ui.List" works only after the decorate() call below.

+            options.autofillOptions.AutofillValuesList.decorate(input);
+            input.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',
+    var phoneList = document.querySelector(OverlaySelector + '[field=phone]');
+    AutofillEditAddressOverlay.getInstance().setMultiValueList_(phoneList,
                                                                 numbers);
-    $('phone-list').didReceiveValidationResult();
+    phoneList.didReceiveValidationResult();
   };
 
   // Export
   return {
     AutofillEditAddressOverlay: AutofillEditAddressOverlay
   };
 });