Changeset 293189 in webkit

Timestamp:

Apr 21, 2022 2:46:57 PM (3 months ago)

Author:

Devin Rousso

Message:

Web Inspector: Elements: Layout: hovering over a node should highlight it in the page
​https://bugs.webkit.org/show_bug.cgi?id=239621

Reviewed by Patrick Angle.

• UserInterface/Views/NodeOverlayListSection.js:

(WI.NodeOverlayListSection.prototype.layout):
Use the existing WI.linkifyNodeReference to create the UI for the WI.DOMNode.

• UserInterface/Base/DOMUtilities.js:

(WI.linkifyNodeReferenceElement):
Don't style the UI as a link if clicking it doesn't do anything.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Base/DOMUtilities.js (modified) (1 diff)
• UserInterface/Views/NodeOverlayListSection.js (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2022-04-21  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Elements: Layout: hovering over a node should highlight it in the page
+        https://bugs.webkit.org/show_bug.cgi?id=239621
+
+        Reviewed by Patrick Angle.
+
+        * UserInterface/Views/NodeOverlayListSection.js:
+        (WI.NodeOverlayListSection.prototype.layout):
+        Use the existing `WI.linkifyNodeReference` to create the UI for the `WI.DOMNode`.
+
+        * UserInterface/Base/DOMUtilities.js:
+        (WI.linkifyNodeReferenceElement):
+        Don't style the UI as a link if clicking it doesn't do anything.
+
 2022-04-21  Devin Rousso  <drousso@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Base/DOMUtilities.js

@@ -84 +84 @@
 
     let nodeType = node.nodeType();
-    if ((nodeType !== Node.DOCUMENT_NODE || node.parentNode) && nodeType !== Node.TEXT_NODE)
+    if (!options.ignoreClick && (nodeType !== Node.DOCUMENT_NODE || node.parentNode) && nodeType !== Node.TEXT_NODE)
         element.classList.add("node-link");
 

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

@@ -101 +101 @@
 
             let labelElement = itemContainerElement.appendChild(document.createElement("label"));
-            let nodeDisplayName = labelElement.appendChild(document.createElement("span"));
+            let nodeDisplayName = labelElement.appendChild(WI.linkifyNodeReference(domNode, {ignoreClick: true}));
             nodeDisplayName.classList.add("node-display-name");
-            nodeDisplayName.textContent = domNode.displayName;
 
             let checkboxElement = labelElement.appendChild(document.createElement("input"));