Reduce number of expensive calls to List.redraw() during load of settings page.

chrome/browser/resources/options2/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;
@@ skipping 42 matching lines @@
 
       // 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_();
     },
 
     /**
      * Creates, decorates and initializes the multi-value lists for full name,
      * phone, and email.
@@ skipping 15 matching lines @@
 
     /**
      * Updates the data model for the list named |listName| with the values from
      * |entries|.
      * @param {String} listName The id of the list.
      * @param {Array} entries The list of items to be added to the list.
      */
     setMultiValueList_: function(listName, entries) {
       // Add data entries.
       var list = $(listName);
-      list.dataModel = new ArrayDataModel(entries);
 
       // Add special entry for adding new values.
-      list.dataModel.splice(list.dataModel.length, 0, null);
+      var augmentedList = entries.slice();
+      augmentedList.push(null);
+      list.dataModel = new ArrayDataModel(augmentedList);

[arv (Not doing code reviews), 2012/08/16 15:29:37]

Good catch

[pneubeck (no reviews), 2012/08/17 11:35:11]

Done.

 
       // Update the status of the 'OK' button.
       this.inputFieldChanged_();
 
-      var self = this;
-      list.dataModel.addEventListener(
-        'splice', function(event) { self.inputFieldChanged_(); });
-      list.dataModel.addEventListener(
-        'change', function(event) { self.inputFieldChanged_(); });
+      list.dataModel.addEventListener('splice',
+                                      this.inputFieldChanged_.bind(this));
+      list.dataModel.addEventListener('change',
+                                      this.inputFieldChanged_.bind(this));
     },
 
     /**
-     * Updates the data model for the name list with the values from |entries|.
-     * @param {Array} names The list of names to be added to the list.
-     */
-    setNameList_: function(names) {
-      // Add the given |names| as backing data for the list.
-      var list = $('full-name-list');
-      list.dataModel = new ArrayDataModel(names);
-
-      // Add special entry for adding new values.
-      list.dataModel.splice(list.dataModel.length, 0, null);
-
-      var self = this;
-      list.dataModel.addEventListener(
-        'splice', function(event) { self.inputFieldChanged_(); });
-      list.dataModel.addEventListener(
-        'change', function(event) { self.inputFieldChanged_(); });
-    },
-
-    /**
      * Clears any uncommitted input, resets the stored GUID and dismisses the
      * overlay.
      * @private
      */
     dismissOverlay_: function() {
       this.clearInputFields_();
       this.guid = '';
       OptionsPage.closeOverlay();
     },
 
@@ skipping 124 matching lines @@
         country.disabled = countries[i].disabled;
         countryList.appendChild(country);
       }
     },
 
     /**
      * Clears the value of each input field.
      * @private
      */
     clearInputFields_: function() {
-      this.setNameList_([]);
+      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.
      * @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) {
-      this.setNameList_(address['fullName']);
+      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']);
 
@@ skipping 16 matching lines @@
   AutofillEditAddressOverlay.setValidatedPhoneNumbers = function(numbers) {
     AutofillEditAddressOverlay.getInstance().setMultiValueList_('phone-list',
                                                                 numbers);
   };
 
   // Export
   return {
     AutofillEditAddressOverlay: AutofillEditAddressOverlay
   };
 });