[Devtools] Fix left margin for selection element

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

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
  * 2.  Redistributions in binary form must reproduce the above copyright
@@ skipping 33 matching lines @@
 
     this.contentElement = this._rootElement._childrenListNode;
     this.contentElement.addEventListener('keydown', this._treeKeyDown.bind(this), true);
     this.contentElement.addEventListener('focus', setFocused.bind(this, true), false);
     this.contentElement.addEventListener('blur', setFocused.bind(this, false), false);
 
     this.setFocusable(!nonFocusable);
 
     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}
      */
     function setFocused(isFocused) {
       this._focused = isFocused;
       if (this.selectedTreeElement)
         this.selectedTreeElement._setFocused(this._focused);
     }
   }
@@ skipping 137 matching lines @@
     while (nextSelectedElement && !nextSelectedElement.selectable)
       nextSelectedElement = nextSelectedElement.traverseNextTreeElement(!this.expandTreeElementsWhenArrowing);
     if (nextSelectedElement) {
       nextSelectedElement.reveal();
       nextSelectedElement.select(false, true);
       return true;
     }
     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
    */
   _treeKeyDown(event) {
     if (event.target !== this.contentElement)
       return;
 
     if (!this.selectedTreeElement || event.shiftKey || event.metaKey || event.ctrlKey)
       return;
 
@@ skipping 524 matching lines @@
     this._childrenListNode.classList.toggle('hidden', x);
   }
 
   invalidateChildren() {
     if (this._children) {
       this.removeChildren();
       this._children = null;
     }
   }
 
+  /**
+   * @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);
   }
 
   /**
    * @param {!Event} event
    */
   _treeElementToggled(event) {
     var element = event.currentTarget;
     if (element.treeElement !== this || element.hasSelection())
       return;
@@ skipping 407 matching lines @@
     var paddingLeftValue = window.getComputedStyle(this._listItemNode).paddingLeft;
     console.assert(paddingLeftValue.endsWith('px'));
     var computedLeftPadding = parseFloat(paddingLeftValue);
     var left = this._listItemNode.totalOffsetLeft() + computedLeftPadding;
     return event.pageX >= left && event.pageX <= left + UI.TreeElement._ArrowToggleWidth && this._expandable;
   }
 };
 
 /** @const */
 UI.TreeElement._ArrowToggleWidth = 10;