diff --git a/front_end/accessibility/AXTreePane.js b/front_end/accessibility/AXTreePane.js index c7a24626ba..88ed1ee7e8 100644 --- a/front_end/accessibility/AXTreePane.js +++ b/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); } /** diff --git a/front_end/accessibility/AccessibilityModel.js b/front_end/accessibility/AccessibilityModel.js index e9df1ec16b..a3bb2bfd6b 100644 --- a/front_end/accessibility/AccessibilityModel.js +++ b/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} */ diff --git a/front_end/accessibility/accessibilityNode.css b/front_end/accessibility/accessibilityNode.css index b70d60e7b9..c75970bc96 100644 --- a/front_end/accessibility/accessibilityNode.css +++ b/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; +}