Changes the Web Inspector node highlight to be less aggressive
authortimothy@apple.com <timothy@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 16 May 2008 03:20:25 +0000 (03:20 +0000)
committertimothy@apple.com <timothy@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 16 May 2008 03:20:25 +0000 (03:20 +0000)
and only highlight when hovering over the selected node in the DOM
tree or breadcrumbs. You can highlight on hover for any node if
you hold down the Alt/Option key while hovering.

Reviewed by Kevin McCullough.

* page/inspector/ElementsPanel.js:
* page/inspector/inspector.js:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@33508 268f45cc-cd09-0410-ab3c-d52691b4dbfc

WebCore/ChangeLog
WebCore/page/inspector/ElementsPanel.js
WebCore/page/inspector/inspector.js

index 2f5a058..cfbf8cf 100644 (file)
@@ -1,3 +1,15 @@
+2008-05-15  Timothy Hatcher  <timothy@apple.com>
+
+        Changes the Web Inspector node highlight to be less aggressive
+        and only highlight when hovering over the selected node in the DOM
+        tree or breadcrumbs. You can highlight on hover for any node if
+        you hold down the Alt/Option key while hovering.
+
+        Reviewed by Kevin McCullough.
+
+        * page/inspector/ElementsPanel.js:
+        * page/inspector/inspector.js:
+
 2008-05-15  Stephanie Lewis  <slewis@apple.com>
 
         Fix windows build
index b8b057d..699850f 100644 (file)
@@ -36,17 +36,11 @@ WebInspector.ElementsPanel = function()
     this.contentElement.id = "elements-content";
     this.contentElement.className = "outline-disclosure";
 
-    function clearNodeHighlight(event)
-    {
-        if (event.target === this)
-            InspectorController.hideDOMNodeHighlight();
-    }
-
     this.treeListElement = document.createElement("ol");
     this.treeListElement.addEventListener("mousedown", this._onmousedown.bind(this), false);
     this.treeListElement.addEventListener("dblclick", this._ondblclick.bind(this), false);
     this.treeListElement.addEventListener("mousemove", this._onmousemove.bind(this), false);
-    this.treeListElement.addEventListener("mouseout", clearNodeHighlight.bind(this.treeListElement), false);
+    this.treeListElement.addEventListener("mouseout", this._onmouseout.bind(this), false);
 
     this.treeOutline = new TreeOutline(this.treeListElement);
     this.treeOutline.panel = this;
@@ -55,7 +49,6 @@ WebInspector.ElementsPanel = function()
 
     this.crumbsElement = document.createElement("div");
     this.crumbsElement.className = "crumbs";
-    this.crumbsElement.addEventListener("mouseout", clearNodeHighlight.bind(this.crumbsElement), false);
 
     this.sidebarPanes = {};
     this.sidebarPanes.styles = new WebInspector.StylesSidebarPane();
@@ -115,7 +108,9 @@ WebInspector.ElementsPanel.prototype = {
     hide: function()
     {
         WebInspector.Panel.prototype.hide.call(this);
-        InspectorController.hideDOMNodeHighlight();
+        this.altKeyDown = false;
+        this.hoveredDOMNode = null;
+        this.forceHoverHighlight = false;
     },
 
     resize: function()
@@ -129,6 +124,10 @@ WebInspector.ElementsPanel.prototype = {
         this.rootDOMNode = null;
         this.focusedDOMNode = null;
 
+        this.altKeyDown = false;
+        this.hoveredDOMNode = null;
+        this.forceHoverHighlight = false;
+
         var inspectedWindow = InspectorController.inspectedWindow();
         if (!inspectedWindow || !inspectedWindow.document)
             return;
@@ -219,6 +218,80 @@ WebInspector.ElementsPanel.prototype = {
             nodeItem.select();
     },
 
+    get hoveredDOMNode()
+    {
+        return this._hoveredDOMNode;
+    },
+
+    set hoveredDOMNode(x)
+    {
+        if (this._hoveredDOMNode === x)
+            return;
+
+        this._hoveredDOMNode = x;
+
+        if (this._hoveredDOMNode)
+            this._updateHoverHighlightSoon();
+        else
+            this._updateHoverHighlight();
+    },
+
+    get forceHoverHighlight()
+    {
+        return this._forceHoverHighlight;
+    },
+
+    set forceHoverHighlight(x)
+    {
+        if (this._forceHoverHighlight === x)
+            return;
+
+        this._forceHoverHighlight = x;
+
+        if (this._forceHoverHighlight)
+            this._updateHoverHighlightSoon();
+        else
+            this._updateHoverHighlight();
+    },
+
+    get altKeyDown()
+    {
+        return this._altKeyDown;
+    },
+
+    set altKeyDown(x)
+    {
+        if (this._altKeyDown === x)
+            return;
+
+        this._altKeyDown = x;
+
+        if (this._altKeyDown)
+            this._updateHoverHighlightSoon();
+        else
+            this._updateHoverHighlight();
+    },
+
+    _updateHoverHighlightSoon: function()
+    {
+        if ("_updateHoverHighlightTimeout" in this)
+            return;
+        this._updateHoverHighlightTimeout = setTimeout(this._updateHoverHighlight.bind(this), 0);
+    },
+
+    _updateHoverHighlight: function()
+    {
+        if ("_updateHoverHighlightTimeout" in this) {
+            clearTimeout(this._updateHoverHighlightTimeout);
+            delete this._updateHoverHighlightTimeout;
+        }
+
+        if (this._hoveredDOMNode && this.visible && (this._altKeyDown || this.forceHoverHighlight))
+            InspectorController.highlightDOMNode(this._hoveredDOMNode);
+        else
+            InspectorController.hideDOMNodeHighlight();
+    },
+
     _focusedNodeChanged: function(forceUpdate)
     {
         this.updateBreadcrumb(forceUpdate);
@@ -331,7 +404,10 @@ WebInspector.ElementsPanel.prototype = {
 
         var mouseOverCrumbFunction = function(event) {
             panel.mouseOverCrumb = true;
-            InspectorController.highlightDOMNode(this.representedObject);
+
+            panel.altKeyDown = event.altKey;
+            panel.hoveredDOMNode = this.representedObject;
+            panel.forceHoverHighlight = this.hasStyleClass("selected");
 
             if ("mouseOutTimeout" in panel) {
                 clearTimeout(panel.mouseOutTimeout);
@@ -342,6 +418,12 @@ WebInspector.ElementsPanel.prototype = {
         var mouseOutCrumbFunction = function(event) {
             delete panel.mouseOverCrumb;
 
+            if (event.target === this) {
+                panel.altKeyDown = false;
+                panel.hoveredDOMNode = null;
+                panel.forceHoverHighlight = false;
+            }
+
             if ("mouseOutTimeout" in panel) {
                 clearTimeout(panel.mouseOutTimeout);
                 delete panel.mouseOutTimeout;
@@ -368,7 +450,7 @@ WebInspector.ElementsPanel.prototype = {
             crumb.representedObject = current;
             crumb.addEventListener("mousedown", selectCrumbFunction, false);
             crumb.addEventListener("mouseover", mouseOverCrumbFunction.bind(crumb), false);
-            crumb.addEventListener("mouseout", mouseOutCrumbFunction, false);
+            crumb.addEventListener("mouseout", mouseOutCrumbFunction.bind(crumb), false);
 
             var crumbTitle;
             switch (current.nodeType) {
@@ -738,9 +820,17 @@ WebInspector.ElementsPanel.prototype = {
 
     handleKeyEvent: function(event)
     {
+        if (event.keyIdentifier === "Alt")
+            this.altKeyDown = true;
         this.treeOutline.handleKeyEvent(event);
     },
 
+    handleKeyUpEvent: function(event)
+    {
+        if (event.keyIdentifier === "Alt")
+            this.altKeyDown = false;
+    },
+
     handleCopyEvent: function(event)
     {
         // Don't prevent the normal copy if the user has a selection.
@@ -867,8 +957,19 @@ WebInspector.ElementsPanel.prototype = {
         if (!element)
             return;
 
-        InspectorController.highlightDOMNode(element.representedObject);
+        this.altKeyDown = event.altKey;
+        this.hoveredDOMNode = element.representedObject;
+        this.forceHoverHighlight = element.selected;
     },
+
+    _onmouseout: function(event)
+    {
+        if (event.target !== this.treeListElement)
+            return;
+        this.altKeyDown = false;
+        this.hoveredDOMNode = null;
+        this.forceHoverHighlight = false;
+    }
 }
 
 WebInspector.ElementsPanel.prototype.__proto__ = WebInspector.Panel.prototype;
index 2f90b15..3b99f88 100644 (file)
@@ -237,6 +237,7 @@ WebInspector.loaded = function()
     document.addEventListener("mousedown", this.changeFocus.bind(this), true);
     document.addEventListener("focus", this.changeFocus.bind(this), true);
     document.addEventListener("keydown", this.documentKeyDown.bind(this), true);
+    document.addEventListener("keyup", this.documentKeyUp.bind(this), true);
     document.addEventListener("beforecopy", this.documentCanCopy.bind(this), true);
     document.addEventListener("copy", this.documentCopy.bind(this), true);
 
@@ -244,6 +245,7 @@ WebInspector.loaded = function()
 
     var mainPanelsElement = document.getElementById("main-panels");
     mainPanelsElement.handleKeyEvent = this.mainKeyDown.bind(this);
+    mainPanelsElement.handleKeyUpEvent = this.mainKeyUp.bind(this);
     mainPanelsElement.handleCopyEvent = this.mainCopy.bind(this);
 
     this.currentFocusElement = mainPanelsElement;
@@ -361,6 +363,13 @@ WebInspector.documentKeyDown = function(event)
     }
 }
 
+WebInspector.documentKeyUp = function(event)
+{
+    if (!this.currentFocusElement || !this.currentFocusElement.handleKeyUpEvent)
+        return;
+    this.currentFocusElement.handleKeyUpEvent(event);
+}
+
 WebInspector.documentCanCopy = function(event)
 {
     if (!this.currentFocusElement)
@@ -388,6 +397,12 @@ WebInspector.mainKeyDown = function(event)
         this.currentPanel.handleKeyEvent(event);
 }
 
+WebInspector.mainKeyUp = function(event)
+{
+    if (this.currentPanel && this.currentPanel.handleKeyUpEvent)
+        this.currentPanel.handleKeyUpEvent(event);
+}
+
 WebInspector.mainCopy = function(event)
 {
     if (this.currentPanel && this.currentPanel.handleCopyEvent)