[MD Bookmarks] Make folder nodes extend their whole width.

chrome/browser/resources/md_bookmarks/folder_node.js

 // Copyright 2016 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.
 
 Polymer({
   is: 'bookmarks-folder-node',
 
   behaviors: [
     bookmarks.StoreClient,
   ],
 
   properties: {
     itemId: {
       type: String,
       observer: 'updateFromStore',
     },
 
+    depth: {
+      type: Number,
+      observer: 'depthChanged_',
+    },
+
     /** @type {BookmarkNode} */
     item: Object,
 
     isClosed: Boolean,
 
     selectedFolder: String,
 
     isSelectedFolder: {
       type: Boolean,
       value: false,
@@ skipping 39 matching lines @@
 
   /**
    * Occurs when the drop down arrow is tapped.
    * @private
    */
   toggleFolder_: function() {
     this.dispatch(
         bookmarks.actions.changeFolderOpen(this.item.id, this.isClosed));
   },
 
+  /**
+   * @private
+   * @param {string} itemId
+   * @param {string} selectedFolder
+   * @return {boolean}
+   */
   computeIsSelected_: function(itemId, selectedFolder) {
     return itemId == selectedFolder;
   },
 
   /**
    * @private
    * @return {boolean}
    */
   hasChildFolder_: function() {
     for (var i = 0; i < this.item.children.length; i++) {
       var child = this.getState().nodes[this.item.children[i]];
       if (!child.url)
         return true;
     }
     return false;
   },
 
+  /** @private */
+  depthChanged_: function() {
+    this.$['folder-label'].style.paddingLeft =

[tsergeant, 2017/03/07 23:32:50]

I wonder if there's any way we can do this with custom property magic. Like,

this.$['--node-depth'] = '3'

and then in css:

padding-left: calc(var(--node-depth) * var(--padding-left-per-depth))

Unfortunately, assigning custom properties into this.style doesn't seem to work.

[calamity, 2017/03/08 06:52:45]

Magic installed.

+        `calc(${this.depth} * var(--padding-left-per-depth))`;
+  },
+
+  /**
+   * @private
+   * @return {number}
+   */
+  getChildDepth_: function() {
+    return this.depth + 1;
+  },
+
   /**
    * @param {string} itemId
    * @private
    * @return {boolean}
    */
   isFolder_: function(itemId) {
     return !this.getState().nodes[itemId].url;
   }
 });