Bookmark manager: Fix tree indentation

BUG=39228
TEST=Create lots of nested folders (more than 10 levels deep).

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

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

2 files changed, 53 insertions, 30 deletions

diff --git a/chrome/browser/resources/bookmark_manager/css/tree.css.js b/chrome/browser/resources/bookmark_manager/css/tree.css.js
index 74fb06d..66c7e42 100644
--- a/chrome/browser/resources/bookmark_manager/css/tree.css.js
+++ b/chrome/browser/resources/bookmark_manager/css/tree.css.js
@@ -51,29 +51,3 @@
   ctx.closePath();
   ctx.stroke();
 })();
-
-// We need to generate CSS for the indentation.
-(function() {
-  // We need to generat the following
-  //.tree-item > * > .tree-item > .tree-row {
-  //  -webkit-padding-start: 20px;
-  //}
-
-  //.tree-item > * .tree-item > * .tree-item > * > .tree-item > .tree-row {
-  //  -webkit-padding-start: 60px;
-  //}
-  var style = document.createElement('style');
-
-  function repeat(s, n) {
-    return Array(n + 1).join(s);
-  }
-
-  var s = '';
-  for (var i = 1; i < 10; i++) {
-    s += repeat('.tree-item > * ', i) + '.tree-item > .tree-row {\n' +
-         '-webkit-padding-start:' + i * 20 + 'px\n' +
-         '}\n';
-  }
-  style.textContent = s;
-  document.documentElement.firstElementChild.appendChild(style);
-})();
diff --git a/chrome/browser/resources/bookmark_manager/js/cr/ui/tree.js b/chrome/browser/resources/bookmark_manager/js/cr/ui/tree.js
index 9e3c3ec..1aae6aa 100644
--- a/chrome/browser/resources/bookmark_manager/js/cr/ui/tree.js
+++ b/chrome/browser/resources/bookmark_manager/js/cr/ui/tree.js
@@ -7,6 +7,21 @@ cr.define('cr.ui', function() {
   // require cr.ui.limitInputWidth
 
   /**
+   * The number of pixels to indent per level.
+   * @type {number}
+   */
+  const INDENT = 20;
+
+  /**
+   * Returns the computed style for an element.
+   * @param {!Element} el The element to get the computed style for.
+   * @return {!CSSStyleDeclaration} The computed style.
+   */
+  function getComputedStyle(el) {
+    return el.ownerDocument.defaultView.getComputedStyle(el);
+  }
+
+  /**
    * Helper function that finds the first ancestor tree item.
    * @param {!Element} el The element to start searching from.
    * @return {cr.ui.TreeItem} The found tree item or null if not found.
@@ -55,7 +70,7 @@ cr.define('cr.ui', function() {
      * @param {!cr.ui.TreeItem} treeItem The item to add.
      */
     add: function(treeItem) {
-      this.appendChild(treeItem);
+      this.addAt(treeItem, 0xffffffff);
     },
 
     /**
@@ -65,6 +80,7 @@ cr.define('cr.ui', function() {
      */
     addAt: function(treeItem, index) {
       this.insertBefore(treeItem, this.children[index]);
+      treeItem.setDepth_(this.depth + 1);
     },
 
     /**
@@ -76,6 +92,14 @@ cr.define('cr.ui', function() {
     },
 
     /**
+     * The depth of the node. This is 0 for the tree itself.
+     * @type {number}
+     */
+    get depth() {
+      return 0;
+    },
+
+    /**
      * Handles click events on the tree and forwards the event to the relevant
      * tree items as necesary.
      * @param {Event} e The click event object.
@@ -113,7 +137,7 @@ cr.define('cr.ui', function() {
 
       var item = this.selectedItem;
 
-      var rtl = window.getComputedStyle(item).direction == 'rtl';
+      var rtl = getComputedStyle(item).direction == 'rtl';
 
       switch (e.keyIdentifier) {
         case 'Up':
@@ -225,6 +249,31 @@ cr.define('cr.ui', function() {
     },
 
     /**
+     * The depth of the tree item.
+     * @type {number}
+     */
+    depth_: 0,
+    get depth() {
+      return this.depth_;
+    },
+
+    /**
+     * Sets the depth.
+     * @param {number} depth The new depth.
+     * @private
+     */
+    setDepth_: function(depth) {
+      if (depth != this.depth_) {
+        this.rowElement.style.WebkitPaddingStart = depth * INDENT + 'px';
+        this.depth_ = depth;
+        var items = this.items;
+        for (var i = 0, item; item = items[i]; i++) {
+          item.setDepth_(depth + 1);
+        }
+      }
+    },
+
+    /**
      * Adds a tree item as a child.
      * @param {!cr.ui.TreeItem} child The child to add.
      */
@@ -241,6 +290,7 @@ cr.define('cr.ui', function() {
       this.lastElementChild.insertBefore(child, this.items[index]);
       if (this.items.length == 1)
         this.hasChildren_ = true;
+      child.setDepth_(this.depth + 1);
     },
 
     /**
@@ -359,8 +409,7 @@ cr.define('cr.ui', function() {
      * @type {string}
      */
     get icon() {
-      return window.getComputedStyle(this.labelElement).
-          backgroundImage.slice(4, -1);
+      return getComputedStyle(this.labelElement).backgroundImage.slice(4, -1);
     },
     set icon(icon) {
       return this.labelElement.style.backgroundImage = url(icon);