[DevTools] Accessibility pane: Sync highlight between a11y pane and DOM pane

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..85e902470e45a1fb2bc10d87ef181877f4533511 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,9 @@ UI.TreeElement = class {
     this.previousSibling = null;
     this.nextSibling = null;
 
+    /** Adjust based on your CSS; check the padding-left for the list element */
+    this.paddingSize = 12;
+
     this._listItemNode = createElement('li');
     this._titleElement = this._listItemNode.createChild('span', 'tree-element-title');
     this._listItemNode.treeElement = this;
@@ -752,11 +755,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');

[dgozman, 2017/01/09 23:21:22]

Why do you need this? Can we just copy this code to specific tree outlines
instead? It's not very generic.

If you are fixing something general, make a separate patch please.

[aboxhall, 2017/01/11 00:11:48]

The issue is that the "selection" element keeps the initial "margin-left:
-10000px from treeoutline.css, except in the Elements tree outline which fixes
it. It sort of works because the -10000px margin is clipped by the container,
but when you add rounded corners to the selection style the rounded corners are
10000px left of where they should be.

I'm not sure how I could pull this down into a specific tree outline without
duplicating all the logic in this method. I made a separate patch:
https://codereview.chromium.org/2623053002

     this._listItemNode.insertBefore(this._selectionElement, this.listItemElement.firstChild);
   }