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

third_party/WebKit/Source/devtools/front_end/accessibility/AXTreePane.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 /**
  * @unrestricted
  */
 Accessibility.AXTreePane = class extends Accessibility.AccessibilitySubPane {
   /**
    * @param {!Accessibility.AccessibilitySidebarView} axSidebarView
    */
@@ skipping 162 matching lines @@
     // Pass an empty title, the title gets made later in onattach.
     super('');
 
     /** @type {!Accessibility.AccessibilityNode} */
     this._axNode = axNode;
 
     /** @type {!Accessibility.AXTreePane} */
     this._treePane = treePane;
 
     this.selectable = true;
+    this.paddingSize = 12;
+    this._hovered = false;
 
     this._inspectNodeButton = new Accessibility.InspectNodeButton(axNode, treePane);
+    this.listItemElement.addEventListener('mousemove', this._onmousemove.bind(this), false);
+    this.listItemElement.addEventListener('mouseleave', this._onmouseleave.bind(this), false);
   }
 
   /**
+   * @param {boolean} x
+   */
+  setHovered(x) {
+    if (this._hovered === x)
+      return;
+    this._hovered = x;
+    this.listItemElement.classList.toggle('hovered', x);
+    if (this._hovered)
+      this._axNode.highlightDOMNode();
+  }
+
+  _onmousemove(event) {
+    this.setHovered(true);
+  }
+
+  _onmouseleave(event) {
+    this.setHovered(false);
+  }
+
+  /**
    * @return {!Accessibility.AccessibilityNode}
    */
   axNode() {
     return this._axNode;
   }
 
   /**
    * @param {boolean} inspected
    */
   setInspected(inspected) {
@@ skipping 231 matching lines @@
         continue;
       }
       siblingTreeElement = new Accessibility.AXNodeTreeElement(sibling, this._treePane);
       if (foundInspectedNode)
         this.appendChild(siblingTreeElement);
       else
         this.insertChild(siblingTreeElement, nextIndex++);
     }
   }
 };