Changeset 224286 in webkit

Timestamp:

Nov 1, 2017 12:10:20 PM (6 years ago)

Author:

Nikita Vasilyev

Message:

Web Inspector: Styles Redesign: Hovering over a selector should highlight matching elements on the page
​https://bugs.webkit.org/show_bug.cgi?id=179040

Reviewed by Devin Rousso.

• UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:

(WI.SpreadsheetCSSStyleDeclarationSection.prototype.initialLayout):
Use mouseenter/mouseleave events instead of mousein/mouseout (as in the old styles sidebar)
to avoid unnecessary events being fired.

(WI.SpreadsheetCSSStyleDeclarationSection.prototype._highlightNodesWithSelector):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype._hideDOMNodeHighlight):

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js (modified) (2 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2017-11-01  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Styles Redesign: Hovering over a selector should highlight matching elements on the page
+        https://bugs.webkit.org/show_bug.cgi?id=179040
+
+        Reviewed by Devin Rousso.
+
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
+        (WI.SpreadsheetCSSStyleDeclarationSection.prototype.initialLayout):
+        Use mouseenter/mouseleave events instead of mousein/mouseout (as in the old styles sidebar)
+        to avoid unnecessary events being fired.
+
+        (WI.SpreadsheetCSSStyleDeclarationSection.prototype._highlightNodesWithSelector):
+        (WI.SpreadsheetCSSStyleDeclarationSection.prototype._hideDOMNodeHighlight):
+
 2017-10-30  Nikita Vasilyev  <nvasilyev@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js

@@ -65 +65 @@
         this._selectorElement = document.createElement("span");
         this._selectorElement.classList.add("selector");
+        this._selectorElement.addEventListener("mouseenter", this._highlightNodesWithSelector.bind(this));
+        this._selectorElement.addEventListener("mouseleave", this._hideDOMNodeHighlight.bind(this));
         this._headerElement.append(this._selectorElement);
 
@@ -370 +372 @@
         this._propertiesEditor.addBlankProperty(appendAfterLast);
     }
+
+    _highlightNodesWithSelector()
+    {
+        if (!this._style.ownerRule) {
+            WI.domTreeManager.highlightDOMNode(this._style.node.id);
+            return;
+        }
+
+        let selectorText = this._selectorElement.textContent.trim();
+        WI.domTreeManager.highlightSelector(selectorText, this._style.node.ownerDocument.frameIdentifier);
+    }
+
+    _hideDOMNodeHighlight()
+    {
+        WI.domTreeManager.hideDOMNodeHighlight();
+    }
 };