[DevTools] Accessibility pane: Sync highlight between a11y pane and D…

…OM pane

BUG=678480

Review-Url: https://codereview.chromium.org/2611993003
Cr-Commit-Position: refs/heads/master@{#445600}

front_end/accessibility/AXTreePane.js

@@ -180,8 +180,32 @@ Accessibility.AXNodeTreeElement = class extends UI.TreeElement {
     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);
   }
 
   /**

front_end/accessibility/AccessibilityModel.js

@@ -139,6 +139,14 @@ Accessibility.AccessibilityNode = class extends SDK.SDKObject {
     return this._deferredDOMNode;
   }
 
+  highlightDOMNode() {
+    if (!this.isDOMNode())
+      return;
+    this.deferredDOMNode().resolvePromise().then((node) => {
+      SDK.DOMModel.fromTarget(this.target()).nodeHighlightRequested(node.id);
+    });
+  }
+
   /**
    * @return {!Array<!Accessibility.AccessibilityNode>}
    */

front_end/accessibility/accessibilityNode.css

@@ -165,3 +165,11 @@ li .inspect-dom-node {
 .tree-outline:focus li.selected .inspect-dom-node {
     background-color: white;
 }
+
+.tree-outline li.hovered:not(.selected) .selection {
+    display: block;
+    left: 3px;
+    right: 3px;
+    background-color: rgba(56, 121, 217, 0.1);
+    border-radius: 5px;
+}