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

- Removed unnecessary List.redraw calls from
      -- network_list.js
      -- autofill_edit_address_overlay.js
      -- content_settings_exceptions_area.js
- Added an early return to List.redraw() for the case clientHeight == 0 (eg. if the list is not visible).
- Some small cleanup.

Overall there were about 68 expensive (ie. no early return) calls to redraw() which I could reduce to 26. The speedup is about 7% / 28ms for the "onload" event on my desktop machine.

BUG=chrome:143116


Review URL: https://chromiumcodereview.appspot.com/10824328

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@152153 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/options2/autofill_edit_address_overlay.js

@@ -60,7 +60,7 @@ cr.define('options', function() {
       };
       $('autofill-edit-address-cancel-button').onmousedown = function(event) {
         event.preventDefault();
-      }
+      };
 
       self.guid = '';
       self.populateCountryList_();
@@ -96,38 +96,19 @@ cr.define('options', function() {
     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);
 
       // 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_(); });
-    },
-
-    /**
-     * 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_(); });
+      list.dataModel.addEventListener('splice',
+                                      this.inputFieldChanged_.bind(this));
+      list.dataModel.addEventListener('change',
+                                      this.inputFieldChanged_.bind(this));
     },
 
     /**
@@ -275,7 +256,7 @@ cr.define('options', function() {
      * @private
      */
     clearInputFields_: function() {
-      this.setNameList_([]);
+      this.setMultiValueList_('full-name-list', []);
       $('company-name').value = '';
       $('addr-line-1').value = '';
       $('addr-line-2').value = '';
@@ -305,7 +286,7 @@ cr.define('options', function() {
      * @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'];

chrome/browser/resources/options2/chromeos/network_list.js

@@ -728,6 +728,7 @@ cr.define('options.network', function() {
     /** @inheritDoc */
     decorate: function() {
       List.prototype.decorate.call(this);
+      this.startBatchUpdates();
       this.autoExpands = true;
       this.addEventListener('blur', this.onBlur_);
       this.dataModel = new ArrayDataModel([]);
@@ -764,6 +765,7 @@ cr.define('options.network', function() {
           function(event) {
             enableDataRoaming_ = event.value.value;
           });
+      this.endBatchUpdates();
     },
 
     /**
@@ -878,6 +880,7 @@ cr.define('options.network', function() {
    */
   NetworkList.refreshNetworkData = function(data) {
     var networkList = $('network-list');
+    networkList.startBatchUpdates();
     cellularAvailable_ = data.cellularAvailable;
     cellularEnabled_ = data.cellularEnabled;
     wimaxAvailable_ = data.wimaxAvailable;
@@ -966,6 +969,7 @@ cr.define('options.network', function() {
     else
       networkList.deleteItem('vpn');
     networkList.updateToggleControl('airplaneMode', data.airplaneMode);
+    networkList.endBatchUpdates();
   };
 
   /**

chrome/browser/resources/options2/content_settings_exceptions_area.js

@@ -522,7 +522,7 @@ cr.define('options.contentSettings', function() {
         options.contentSettings.ExceptionsList.decorate(exceptionsLists[i]);
       }
 
-      ContentSettingsExceptionsArea.hideOTRLists();
+      ContentSettingsExceptionsArea.hideOTRLists(false);
 
       // If the user types in the URL without a hash, show just cookies.
       this.showList('cookies');
@@ -564,18 +564,20 @@ cr.define('options.contentSettings', function() {
    * Called when the last incognito window is closed.
    */
   ContentSettingsExceptionsArea.OTRProfileDestroyed = function() {
-    this.hideOTRLists();
+    this.hideOTRLists(true);
   };
 
   /**
-   * Clears and hides the incognito exceptions lists.
+   * Hides the incognito exceptions lists and optionally clears them as well.
+   * @param {boolean} clear Whether to clear the lists.
    */
-  ContentSettingsExceptionsArea.hideOTRLists = function() {
+  ContentSettingsExceptionsArea.hideOTRLists = function(clear) {
     var otrLists = document.querySelectorAll('list[mode=otr]');
 
     for (var i = 0; i < otrLists.length; i++) {
-      otrLists[i].reset();
       otrLists[i].parentNode.hidden = true;
+      if (clear)
+        otrLists[i].reset();
     }
   };
 

chrome/browser/resources/shared/js/cr/ui/list.js

@@ -948,33 +948,34 @@ cr.define('cr.ui', function() {
     /**
      * Merges list items currently existing in the list with items in the range
      * [firstIndex, lastIndex). Removes or adds items if needed.
-     * Doesn't delete {@code this.pinnedItem_} if it presents (instead hides if
-     * it's out of the range). Also adds the items to {@code newCachedItems}.
+     * Doesn't delete {@code this.pinnedItem_} if it is present (instead hides
+     * it if it is out of the range). Adds items to {@code newCachedItems}.
      * @param {number} firstIndex The index of first item, inclusively.
      * @param {number} lastIndex The index of last item, exclusively.
      * @param {Object.<string, ListItem>} cachedItems Old items cache.
      * @param {Object.<string, ListItem>} newCachedItems New items cache.
      */
     mergeItems: function(firstIndex, lastIndex, cachedItems, newCachedItems) {
+      var self = this;
       var dataModel = this.dataModel;
+      var currentIndex = firstIndex;
 
-      function insert(to) {
+      function insert() {
         var dataItem = dataModel.item(currentIndex);
-        var newItem = cachedItems[currentIndex] || to.createItem(dataItem);
+        var newItem = cachedItems[currentIndex] || self.createItem(dataItem);
         newItem.listIndex = currentIndex;
         newCachedItems[currentIndex] = newItem;
-        to.insertBefore(newItem, item);
+        self.insertBefore(newItem, item);
         currentIndex++;
       }
 
-      function remove(from) {
+      function remove() {
         var next = item.nextSibling;
-        if (item != from.pinnedItem_)
-          from.removeChild(item);
+        if (item != self.pinnedItem_)
+          self.removeChild(item);
         item = next;
       }
 
-      var currentIndex = firstIndex;
       for (var item = this.beforeFiller_.nextSibling;
            item != this.afterFiller_ && currentIndex < lastIndex;) {
         if (!this.isItem(item)) {
@@ -984,19 +985,19 @@ cr.define('cr.ui', function() {
 
         var index = item.listIndex;
         if (cachedItems[index] != item || index < currentIndex) {
-          remove(this);
+          remove();
         } else if (index == currentIndex) {
           newCachedItems[currentIndex] = item;
           item = item.nextSibling;
           currentIndex++;
         } else {  // index > currentIndex
-          insert(this);
+          insert();
         }
       }
 
       while (item != this.afterFiller_) {
         if (this.isItem(item))
-          remove(this);
+          remove();
         else
           item = item.nextSibling;
       }
@@ -1010,7 +1011,7 @@ cr.define('cr.ui', function() {
       }
 
       while (currentIndex < lastIndex)
-        insert(this);
+        insert();
     },
 
     /**
@@ -1087,7 +1088,7 @@ cr.define('cr.ui', function() {
         return;
 
       var dataModel = this.dataModel;
-      if (!dataModel) {
+      if (!dataModel || !this.autoExpands_ && this.clientHeight == 0) {
         this.cachedItems_ = {};
         this.firstIndex_ = 0;
         this.lastIndex_ = 0;