Commit 9fe6c4d6 authored by aroben@apple.com's avatar aroben@apple.com

Highlight nodes in the page when you hover over their DOM breadcrumbs

        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>

        Reviewed by Tim Hatcher.

        * page/inspector/DocumentPanel.js:
        (WebInspector.DocumentPanel): Add an mouseout event listener to the
        breadcrumbs element to clear the highlighted node.
        (WebInspector.DocumentPanel.updateBreadcrumbs): Change the mouseover
        event listener to highlight the node represented by the hovered
        breadcrumb.


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@31191 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent eabb6e4a
2008-03-20 Adam Roben <aroben@apple.com>
Highlight nodes in the page when you hover over their DOM breadcrumbs
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>
Reviewed by Tim Hatcher.
* page/inspector/DocumentPanel.js:
(WebInspector.DocumentPanel): Add an mouseout event listener to the
breadcrumbs element to clear the highlighted node.
(WebInspector.DocumentPanel.updateBreadcrumbs): Change the mouseover
event listener to highlight the node represented by the hovered
breadcrumb.
2008-03-20 Adam Roben <aroben@apple.com>
Highlight nodes in the page when you hover over them in the DOM tree
......@@ -64,6 +64,7 @@ WebInspector.DocumentPanel = function(resource, views)
domView.crumbsElement = document.createElement("div");
domView.crumbsElement.className = "crumbs";
domView.crumbsElement.addEventListener("mouseout", clearNodeHighlight.bind(domView.crumbsElement), false);
domView.innerCrumbsElement = document.createElement("div");
domView.crumbsElement.appendChild(domView.innerCrumbsElement);
......@@ -265,6 +266,7 @@ WebInspector.DocumentPanel.prototype = {
var mouseOverCrumbFunction = function(event) {
panel.mouseOverCrumb = true;
InspectorController.highlightDOMNode(this.representedObject);
if ("mouseOutTimeout" in panel) {
clearTimeout(panel.mouseOutTimeout);
......@@ -303,7 +305,7 @@ WebInspector.DocumentPanel.prototype = {
crumb.className = "crumb";
crumb.representedObject = current;
crumb.addEventListener("mousedown", selectCrumbFunction, false);
crumb.addEventListener("mouseover", mouseOverCrumbFunction, false);
crumb.addEventListener("mouseover", mouseOverCrumbFunction.bind(crumb), false);
crumb.addEventListener("mouseout", mouseOutCrumbFunction, false);
var crumbTitle;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment