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

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 301 matching lines @@
    * @param {(string|!Node)=} title
    * @param {boolean=} expandable
    */
   constructor(title, expandable) {
     /** @type {?UI.TreeOutline} */
     this.treeOutline = null;
     this.parent = null;
     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;
     if (title)
       this.title = title;
     this._listItemNode.addEventListener('mousedown', this._handleMouseDown.bind(this), false);
     this._listItemNode.addEventListener('click', this._treeElementToggled.bind(this), false);
     this._listItemNode.addEventListener('dblclick', this._handleDoubleClick.bind(this), false);
 
     this._childrenListNode = createElement('ol');
@@ skipping 413 matching lines @@
     this._childrenListNode.classList.toggle('hidden', x);
   }
 
   invalidateChildren() {
     if (this._children) {
       this.removeChildren();
       this._children = null;
     }
   }
 
+  /**
+   * @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);
   }
 
   /**
    * @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;