Reduce jank in DOMUI options caused by cookies view.

- Use batch begin/end notifications to group tree update per rsesek;
- Defer CookiesTreeModel creation until it is searched the first time which
  happens when cookies view is visible for the first time;

BUG=chromium:56989
TEST=Verify fix for chromium:56989.

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

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

3 files changed, 76 insertions, 9 deletions

diff --git a/chrome/browser/resources/options/cookies_tree.js b/chrome/browser/resources/options/cookies_tree.js
index e9e4890..5359976 100644
--- a/chrome/browser/resources/options/cookies_tree.js
+++ b/chrome/browser/resources/options/cookies_tree.js
@@ -25,6 +25,7 @@ cr.define('options', function() {
       treeItem.icon = data.icon;
     }
 
+    treeItem.decorate();
     return treeItem;
   }
 
@@ -32,6 +33,12 @@ cr.define('options', function() {
     __proto__: TreeItem.prototype,
 
     /** @inheritDoc */
+    decorate: function() {
+      this.hasChildren = this.data.hasChildren;
+      this.addEventListener('expand', this.handleExpand_.bind(this));
+    },
+
+    /** @inheritDoc */
     addAt: function(child, index) {
       TreeItem.prototype.addAt.call(this, child, index);
       if (child.data && child.data.id)
@@ -46,7 +53,17 @@ cr.define('options', function() {
     },
 
     /**
-     * The tree path id/.
+     * Clears all children.
+     */
+    clear: function() {
+      // We might leave some garbage in treeLookup for removed children.
+      // But that should be okay because treeLookup is cleared when we
+      // reload the tree.
+      this.lastElementChild.textContent = '';
+    },
+
+    /**
+     * The tree path id.
      * @type {string}
      */
     get pathId() {
@@ -56,6 +73,16 @@ cr.define('options', function() {
       } else {
         return this.data.id;
       }
+    },
+
+    /**
+     * Handles 'expand' event and loads immediate children.
+     * @private
+     */
+    handleExpand_ : function(e) {
+      if (e.target == this) {
+        chrome.send('loadCookie', [this.pathId]);
+      }
     }
   };
 
@@ -97,13 +124,12 @@ cr.define('options', function() {
     },
 
     /**
-     * Add tree nodes by parent id.
-     * @param {string} parentId Id of the parent node.
+     * Add tree nodes by given parent.
+     * @param {Object} parent Parent node.
      * @param {int} start Start index of where to insert nodes.
      * @param {Array} nodesData Nodes data array.
      */
-    addByParentId: function(parentId, start, nodesData) {
-      var parent = parentId ? treeLookup[parentId] : this;
+    addByParent: function(parent, start, nodesData) {
       if (!parent) {
         return;
       }
@@ -116,6 +142,17 @@ cr.define('options', function() {
     },
 
     /**
+     * Add tree nodes by parent id.
+     * @param {string} parentId Id of the parent node.
+     * @param {int} start Start index of where to insert nodes.
+     * @param {Array} nodesData Nodes data array.
+     */
+    addByParentId: function(parentId, start, nodesData) {
+      var parent = parentId ? treeLookup[parentId] : this;
+      this.addByParent(parent, start, nodesData);
+    },
+
+    /**
      * Removes tree nodes by parent id.
      * @param {string} parentId Id of the parent node.
      * @param {int} start Start index of nodes to remove.
@@ -132,6 +169,33 @@ cr.define('options', function() {
       }
 
       cr.dispatchSimpleEvent(this, 'change');
+    },
+
+    /**
+     * Clears the tree.
+     */
+    clear: function() {
+      // Remove all fields without recreating the object since other code
+      // references it.
+      for (var id in treeLookup){
+        delete treeLookup[id];
+      }
+      this.textContent = '';
+    },
+
+    /**
+     * Loads the immediate children of given parent node.
+     * @param {string} parentId Id of the parent node.
+     * @param {Array} children The immediate children of parent node.
+     */
+    loadChildren: function(parentId, children) {
+      var parent = parentId ? treeLookup[parentId] : this;
+      if (!parent) {
+        return;
+      }
+
+      parent.clear();
+      this.addByParent(parent, 0, children);
     }
   };
 
diff --git a/chrome/browser/resources/options/cookies_view.js b/chrome/browser/resources/options/cookies_view.js
index 3ffd4c8..072e89a 100644
--- a/chrome/browser/resources/options/cookies_view.js
+++ b/chrome/browser/resources/options/cookies_view.js
@@ -243,6 +243,10 @@ cr.define('options', function() {
     $('cookiesTree').removeByParentId(args[0], args[1], args[2]);
   };
 
+  CookiesView.loadChildren = function(args) {
+    $('cookiesTree').loadChildren(args[0], args[1]);
+  };
+
   // Export
   return {
     CookiesView: CookiesView
diff --git a/chrome/browser/resources/shared/js/cr/ui/tree.js b/chrome/browser/resources/shared/js/cr/ui/tree.js
index 598bfab..9e77ad4 100644
--- a/chrome/browser/resources/shared/js/cr/ui/tree.js
+++ b/chrome/browser/resources/shared/js/cr/ui/tree.js
@@ -301,7 +301,7 @@ cr.define('cr.ui', function() {
     addAt: function(child, index) {
       this.lastElementChild.insertBefore(child, this.items[index]);
       if (this.items.length == 1)
-        this.hasChildren_ = true;
+        this.hasChildren = true;
       child.setDepth_(this.depth + 1);
     },
 
@@ -318,7 +318,7 @@ cr.define('cr.ui', function() {
 
       this.lastElementChild.removeChild(child);
       if (this.items.length == 0)
-        this.hasChildren_ = false;
+        this.hasChildren = false;
     },
 
     /**
@@ -483,9 +483,8 @@ cr.define('cr.ui', function() {
     /**
      * Whether the tree item has children.
      * @type {boolean}
-     * @private
      */
-    set hasChildren_(b) {
+    set hasChildren(b) {
       var rowItem = this.firstElementChild;
       this.setAttribute('has-children', b);
       rowItem.setAttribute('has-children', b);