Bookmark manager: Fix tree indentation...

chrome/browser/resources/bookmark_manager/js/cr/ui/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.
 
 cr.define('cr.ui', function() {
   // require cr.ui.define
   // 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.
    */
   function findTreeItem(el) {
     while (el && !(el instanceof TreeItem)) {
       el = el.parentNode;
     }
     return el;
   }
@@ skipping 28 matching lines @@
      */
     get items() {
       return this.children;
     },
 
     /**
      * Adds a tree item to the tree.
      * @param {!cr.ui.TreeItem} treeItem The item to add.
      */
     add: function(treeItem) {
-      this.appendChild(treeItem);
+      this.addAt(treeItem, 0xffffffff);
     },
 
     /**
      * Adds a tree item at the given index.
      * @param {!cr.ui.TreeItem} treeItem The item to add.
      * @param {number} index The index where we want to add the item.
      */
     addAt: function(treeItem, index) {
       this.insertBefore(treeItem, this.children[index]);
+      treeItem.setDepth_(this.depth + 1);
     },
 
     /**
      * Removes a tree item child.
      * @param {!cr.ui.TreeItem} treeItem The tree item to remove.
      */
     remove: function(treeItem) {
       this.removeChild(treeItem);
     },
 
     /**
+     * The depth of the node. This is 0 for the tree itself.
+     * @type {number}
+     */
+    get depth() {
+      return 0

[feldstein, 2010/04/06 00:56:57]

semicolon

+    },
+
+    /**
      * Handles click events on the tree and forwards the event to the relevant
      * tree items as necesary.
      * @param {Event} e The click event object.
      */
     handleClick: function(e) {
       var treeItem = findTreeItem(e.target);
       if (treeItem)
         treeItem.handleClick(e);
     },
 
@@ skipping 17 matching lines @@
      * of tree items.
      * @param {Event} e The click event object.
      */
     handleKeyDown: function(e) {
       var itemToSelect;
       if (e.ctrlKey)
         return;
 
       var item = this.selectedItem;
 
-      var rtl = window.getComputedStyle(item).direction == 'rtl';
+      var rtl = getComputedStyle(item).direction == 'rtl';
 
       switch (e.keyIdentifier) {
         case 'Up':
           itemToSelect = item ? getPrevious(item) :
               this.items[this.items.length - 1];
           break;
         case 'Down':
           itemToSelect = item ? getNext(item) :
               this.items[0];
           break;
@@ skipping 91 matching lines @@
     },
 
     /**
      * The tree items children.
      */
     get items() {
       return this.lastElementChild.children;
     },
 
     /**
+     * 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.
      */
     add: function(child) {
       this.addAt(child, 0xffffffff);
     },
 
     /**
      * Adds a tree item as a child at a given index.
      * @param {!cr.ui.TreeItem} child The child to add.
      * @param {number} index The index where to add the child.
      */
     addAt: function(child, index) {
       this.lastElementChild.insertBefore(child, this.items[index]);
       if (this.items.length == 1)
         this.hasChildren_ = true;
+      child.setDepth_(this.depth + 1);
     },
 
     /**
      * Removes a child.
      * @param {!cr.ui.TreeItem} child The tree item child to remove.
      */
     remove: function(child) {
       // If we removed the selected item we should become selected.
       var tree = this.tree;
       var selectedItem = tree.selectedItem;
@@ skipping 98 matching lines @@
     },
     set label(s) {
       this.labelElement.textContent = s;
     },
 
     /**
      * The URL for the icon.
      * @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);
     },
 
     /**
      * Whether the tree item is selected or not.
      * @type {boolean}
      */
     get selected() {
@@ skipping 220 matching lines @@
     }
     return item;
   }
 
   // Export
   return {
     Tree: Tree,
     TreeItem: TreeItem
   };
 });