[ChromeOS] Implement collected cookies in webui.

chrome/browser/resources/cookies_tree.js

+// Copyright (c) 2010 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.
+

[arv (Not doing code reviews), 2011/03/09 18:42:47]

Do you mind calling out what was changed here? I can patch and manually diff but
it might be easier for you to call out what changed.

[xiyuan, 2011/03/09 21:33:31]

Here's summary of what I changed:
- Change namespace from "option" -> "ui";
- Make shared treeLookup a per-tree map;
- Add a per-tree loadChildrenMessage_ so that a tree node could directly call
into its backend cookies tree model adapter;
- Add interface functions CookiesTree.setCallback, CookiesTree.onTreeItemAdded
etc so that CookiesTreeModelAdapter could talk to JS tree;
- Renaming CookieTreeItem -> CookiesTreeItem (added 's' after 'Cookie');

Full diff is here: http://www/~xiyuan/no_crawl/files/cookies_tree.diff.txt

+cr.define('ui', function() {
+  const Tree = cr.ui.Tree;
+  const TreeItem = cr.ui.TreeItem;
+
+  /**
+   * Creates a new tree item for sites data.
+   * @param {Object=} data Data used to create a cookie tree item.
+   * @constructor
+   * @extends {TreeItem}
+   */
+  function CookiesTreeItem(data) {
+    var treeItem = new TreeItem({
+      label: data.title,
+      data: data
+    });
+    treeItem.__proto__ = CookiesTreeItem.prototype;
+
+    if (data.icon) {
+      treeItem.icon = data.icon;
+    }
+
+    treeItem.decorate();
+    return treeItem;
+  }
+
+  CookiesTreeItem.prototype = {
+    __proto__: TreeItem.prototype,
+
+    /** @inheritDoc */
+    decorate: function() {
+      this.hasChildren = this.data.hasChildren;
+    },
+
+    /** @inheritDoc */
+    addAt: function(child, index) {
+      TreeItem.prototype.addAt.call(this, child, index);
+      if (child.data && child.data.id)
+        this.tree.treeLookup[child.data.id] = child;
+    },
+
+    /** @inheritDoc */
+    remove: function(child) {
+      TreeItem.prototype.remove.call(this, child);
+      if (child.data && child.data.id)
+        delete this.tree.treeLookup[child.data.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() {
+      var parent = this.parentItem;
+      if (parent && parent instanceof CookiesTreeItem) {
+        return parent.pathId + ',' + this.data.id;
+      } else {
+        return this.data.id;
+      }
+    },
+
+    /** @inheritDoc */
+    get expanded() {
+      return TreeItem.prototype.__lookupGetter__('expanded').call(this);
+    },
+    set expanded(b) {
+      if (b && this.expanded != b)
+        chrome.send(this.tree.loadChildrenMessage, [this.pathId]);
+
+      TreeItem.prototype.__lookupSetter__('expanded').call(this, b);
+    }
+  };
+
+  /**
+   * Creates a new cookies tree.
+   * @param {Object=} opt_propertyBag Optional properties.
+   * @constructor
+   * @extends {Tree}
+   */
+  var CookiesTree = cr.ui.define('tree');
+
+  CookiesTree.prototype = {
+    __proto__: Tree.prototype,
+
+    /*
+     * Per-tree dict to map from data.id to tree node.
+     */
+    treeLookup_: 0,
+    get treeLookup() {
+      if (!this.treeLookup_)
+        this.treeLookup_ = {};
+      return this.treeLookup_;
+    },
+
+    /** @inheritDoc */
+    addAt: function(child, index) {
+      Tree.prototype.addAt.call(this, child, index);
+      if (child.data && child.data.id)
+        this.treeLookup[child.data.id] = child;
+    },
+
+    /** @inheritDoc */
+    remove: function(child) {
+      Tree.prototype.remove.call(this, child);
+      if (child.data && child.data.id)
+        delete this.treeLookup[child.data.id];
+    },
+
+    /**
+     * 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.
+     */
+    addByParent: function(parent, start, nodesData) {
+      if (!parent) {
+        return;
+      }
+
+      for (var i = 0; i < nodesData.length; ++i) {
+        parent.addAt(new CookiesTreeItem(nodesData[i]), start + i);
+      }
+
+      cr.dispatchSimpleEvent(this, 'change');
+    },
+
+    /**
+     * 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 ? this.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.
+     * @param {int} count Number of nodes to remove.
+     */
+    removeByParentId: function(parentId, start, count) {
+      var parent = parentId ? this.treeLookup[parentId] : this;
+      if (!parent) {
+        return;
+      }
+
+      for (; count > 0 && parent.items.length; --count) {
+        parent.remove(parent.items[start]);
+      }
+
+      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 this.treeLookup){
+        delete this.treeLookup[id];
+      }
+      this.textContent = '';
+    },
+
+    /**
+     * Unique 'loadChildren' callback message name to send request to
+     * underlying CookiesTreeAdapter.
+     * @type {String}
+     */
+    loadChildrenMessage_ : 0,
+    get loadChildrenMessage() {
+      return this.loadChildrenMessage_;
+    },
+
+    /**
+     * Set callback message name.
+     * @param {string} loadChildren Message name for 'loadChildren' request.
+     */
+    setCallback: function(loadChildren) {
+      this.loadChildrenMessage_  = loadChildren;
+    },
+
+    /**
+     * 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 ? this.treeLookup[parentId] : this;
+      if (!parent) {
+        return;
+      }
+
+      parent.clear();
+      this.addByParent(parent, 0, children);
+    }
+  };
+
+  // CookiesTreeAdapter callbacks.
+  CookiesTree.setCallback = function(args) {
+    $(args[0]).setCallback(args[1]);
+  }
+
+  CookiesTree.onTreeItemAdded = function(args) {
+    $(args[0]).addByParentId(args[1], args[2], args[3]);
+  }
+
+  CookiesTree.onTreeItemRemoved = function(args) {
+    $(args[0]).removeByParentId(args[1], args[2], args[3]);
+  }
+
+  CookiesTree.loadChildren = function(args) {
+    $(args[0]).loadChildren(args[1], args[2]);
+  }
+
+  return {
+    CookiesTree: CookiesTree
+  };
+});