Add batchAdd functions to JS List

BMM can be really slow to render when there are hundreds of bookmarks in the
bookmark bar.  This will hide the list while it's rendering the new elements
which increases performance by a lot since it doesn't have to do any
measurements while it's adding all the elements.

BUG=39865
TEST=Load BMM with over 500 bookmarks in the bookmark bar

Review URL: http://codereview.chromium.org/1540014

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

2 files changed, 41 insertions, 4 deletions

diff --git a/chrome/browser/resources/bookmark_manager/js/bmm/bookmarklist.js b/chrome/browser/resources/bookmark_manager/js/bmm/bookmarklist.js
index a827db0..edec7e9 100644
--- a/chrome/browser/resources/bookmark_manager/js/bmm/bookmarklist.js
+++ b/chrome/browser/resources/bookmark_manager/js/bmm/bookmarklist.js
@@ -81,10 +81,15 @@ cr.define('bmm', function() {
       }
       this.clear();
       var showFolder = this.showFolder();
-      items.forEach(function(item) {
-        var li = createListItem(item, showFolder);
-        this.add(li);
-      }, this);
+      try {
+        this.startBatchAdd();
+        items.forEach(function(item) {
+          var li = createListItem(item, showFolder);
+          this.add(li);
+        }, this);
+      } finally {
+        this.finishBatchAdd();
+      }
       cr.dispatchSimpleEvent(this, 'load');
     },
 
diff --git a/chrome/browser/resources/bookmark_manager/js/cr/ui/list.js b/chrome/browser/resources/bookmark_manager/js/cr/ui/list.js
index 9bdcd38..00a23b6 100644
--- a/chrome/browser/resources/bookmark_manager/js/cr/ui/list.js
+++ b/chrome/browser/resources/bookmark_manager/js/cr/ui/list.js
@@ -80,6 +80,38 @@ cr.define('cr.ui', function() {
       return this.children;
     },
 
+    batchCount_: 0,
+
+    /**
+     * When adding a large collection of items to the list, the code should be
+     * wrapped in the startBatchAdd and startBatchEnd to increase performance.
+     * This hides the list while it is being built, and prevents it from
+     * incurring measurement performance hits in between each item.
+     * Be sure that the code will not return without calling finishBatchAdd
+     * or the list will not be shown.
+     * @private
+     */
+    startBatchAdd: function() {
+      // If we're already in a batch, don't overwrite original display style.
+      if (this.batchCount_ == 0) {
+        this.originalDisplayStyle_ = this.style.display;
+        this.style.display = 'none';
+      }
+      this.batchCount_++;
+    },
+    
+    /**
+     * See startBatchAdd.
+     * @private
+     */
+    finishBatchAdd: function() {
+      this.batchCount_--;
+      if (this.batchCount_ == 0) {
+        this.style.display = this.originalDisplayStyle_;
+        delete this.originalDisplayStyle;
+      }
+    },
+
     add: function(listItem) {
       this.appendChild(listItem);