[Devtools] Fix left margin for selection element

third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js

Index: third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js b/third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js
index 99e46546a0beff60193852d0a43a369db5af30a7..c78cc2c6f570ad7de5038126b3651d9aaa8dcb96 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js
@@ -319,6 +319,10 @@ UI.TreeElement = class {
     this.previousSibling = null;
     this.nextSibling = null;
 
+    // Adjust based on your CSS, if modified from treeoutline.css
+    // Check the padding-left for the li element
+    this.paddingSize = 12;

[dgozman, 2017/01/13 01:53:42]

Default should be zero preserving -10000px we have now, or else this will
regress some trees.

[aboxhall, 2017/01/13 02:22:03]

Done.

+
     this._listItemNode = createElement('li');
     this._titleElement = this._listItemNode.createChild('span', 'tree-element-title');
     this._listItemNode.treeElement = this;
@@ -752,11 +756,26 @@ UI.TreeElement = class {
     }
   }
 
+  /**
+   * @return {number}
+   */
+  computeLeftIndent() {
+    var treeElement = this.parent;
+    var depth = 0;
+    while (treeElement !== null) {
+      depth++;
+      treeElement = treeElement.parent;
+    }
+
+    return this.paddingSize * (depth - 1) + 4;
+  }
+
   _ensureSelection() {
     if (!this.treeOutline || !this.treeOutline._renderSelection)
       return;
     if (!this._selectionElement)
       this._selectionElement = createElementWithClass('div', 'selection fill');
+    this._selectionElement.style.setProperty('margin-left', (-this.computeLeftIndent()) + 'px');
     this._listItemNode.insertBefore(this._selectionElement, this.listItemElement.firstChild);
   }