[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..4e5998605d66b5c08348bcede484ac6b225cd8bb 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js
@@ -51,6 +51,10 @@ UI.TreeOutline = class extends Common.Object {
 
     this.element = this.contentElement;
 
+    // Adjust to allow computing margin-left for the selection element.
+    // Check the padding-left for the li element for correct value.
+    this._paddingSize = 0;
+
     /**
      * @param {boolean} isFocused
      * @this {UI.TreeOutline}
@@ -208,6 +212,10 @@ UI.TreeOutline = class extends Common.Object {
     return false;
   }
 
+  setPaddingSize(paddingSize) {

[dgozman, 2017/01/19 23:12:45]

JSDoc please.

[aboxhall, 2017/01/20 04:25:00]

Done.

+    this._paddingSize = paddingSize;
+  }
+
   /**
    * @param {!Event} event
    */
@@ -752,11 +760,27 @@ UI.TreeElement = class {
     }
   }
 
+  /**
+   * @return {number}
+   */
+  computeLeftMargin() {
+    var treeElement = this.parent;
+    var depth = 0;
+    while (treeElement !== null) {
+      depth++;
+      treeElement = treeElement.parent;
+    }
+
+    return -(this.treeOutline._paddingSize * (depth - 1) + 4);
+  }
+
   _ensureSelection() {
     if (!this.treeOutline || !this.treeOutline._renderSelection)
       return;
     if (!this._selectionElement)
       this._selectionElement = createElementWithClass('div', 'selection fill');
+    if (this.treeOutline._paddingSize)
+      this._selectionElement.style.setProperty('margin-left', this.computeLeftMargin() + 'px');
     this._listItemNode.insertBefore(this._selectionElement, this.listItemElement.firstChild);
   }