Changeset 31190 in webkit

Timestamp:

Mar 20, 2008 3:58:44 PM (16 years ago)

Author:

Adam Roben

Message:

Highlight nodes in the page when you hover over them in the DOM tree

Part of Bug 16532: Inspector should highlight nodes in page when
hovering over nodes in Inspector's interface

<​http://bugs.webkit.org/show_bug.cgi?id=16532>
<rdar://problem/5712896>

The inspected node is no longer highlighted (unless, of course, you
hover over it).

Reviewed by Tim Hatcher.

• page/inspector/DocumentPanel.js: (WebInspector.DocumentPanel):
  • Don't highlight the focused node when the DOM tree is shown
  • Added mousemove/mouseout event listeners to set/clear the highlighted node. These are added to the root of the DOM tree instead of to each individual list item to avoid flashing as the mouse moves between nodes.

(WebInspector.DocumentPanel.set focusedDOMNode): Don't highlight the
focused node.
(WebInspector.DocumentPanel._onmousemove): Highlight the node under
the mouse.

Location:

trunk/WebCore

Files:

• ChangeLog (modified) (1 diff)
• page/inspector/DocumentPanel.js (modified) (4 diffs)

trunk/WebCore/ChangeLog

@@ +1 @@
+2008-03-20  Adam Roben  <aroben@apple.com>
+
+        Highlight nodes in the page when you hover over them in the DOM tree
+
+        Part of Bug 16532: Inspector should highlight nodes in page when
+        hovering over nodes in Inspector's interface
+
+        <http://bugs.webkit.org/show_bug.cgi?id=16532>
+        <rdar://problem/5712896>
+
+        The inspected node is no longer highlighted (unless, of course, you
+        hover over it).
+
+        Reviewed by Tim Hatcher.
+
+        * page/inspector/DocumentPanel.js:
+        (WebInspector.DocumentPanel):
+          - Don't highlight the focused node when the DOM tree is shown
+          - Added mousemove/mouseout event listeners to set/clear the
+            highlighted node. These are added to the root of the DOM tree
+            instead of to each individual list item to avoid flashing as the
+            mouse moves between nodes.
+        (WebInspector.DocumentPanel.set focusedDOMNode): Don't highlight the
+        focused node.
+        (WebInspector.DocumentPanel._onmousemove): Highlight the node under
+        the mouse.
+
 2008-03-20  Adam Roben  <aroben@apple.com>
 

trunk/WebCore/page/inspector/DocumentPanel.js

@@ -39 +39 @@
     domView.hide = function() { InspectorController.hideDOMNodeHighlight() };
     domView.show = function() {
-        InspectorController.highlightDOMNode(panel.focusedDOMNode);
         panel.updateBreadcrumb();
         panel.updateTreeSelection();
@@ -50 +49 @@
     domView.treeContentElement.className = "content tree outline-disclosure";
 
+    function clearNodeHighlight(event)
+    {
+        if (event.target === this)
+            InspectorController.hideDOMNodeHighlight();
+    }
+
     domView.treeListElement = document.createElement("ol");
     domView.treeListElement.addEventListener("mousedown", this._onmousedown.bind(this), false);
     domView.treeListElement.addEventListener("dblclick", this._ondblclick.bind(this), false);
+    domView.treeListElement.addEventListener("mousemove", this._onmousemove.bind(this), false);
+    domView.treeListElement.addEventListener("mouseout", clearNodeHighlight.bind(domView.treeListElement), false);
     domView.treeOutline = new TreeOutline(domView.treeListElement);
     domView.treeOutline.panel = this;
@@ -143 +150 @@
 
         this._focusedNodeChanged();
-
-        InspectorController.highlightDOMNode(x);
 
         var nodeItem = this.revealNode(x);
@@ -820 +825 @@
         element.select();
     },
+
+    _onmousemove: function(event)
+    {
+        var element = this._treeElementFromEvent(event);
+        if (!element)
+            return;
+
+        InspectorController.highlightDOMNode(element.representedObject);
+    },
 }