Changeset 136144 in webkit

Timestamp:

Nov 29, 2012, 11:59:14 AM (14 years ago)

Author:

pfeldman@chromium.org

Message:

Web Inspector: Console: hovering node wrappers in object tree should highlight them on the page
​https://bugs.webkit.org/show_bug.cgi?id=101150

Reviewed by Vsevolod Vlasov.

• Introduced a way to highlight nodes by object id in addition to node id.
• Decorated nodes in the object tree outline and added on-hover highlighting.

• inspector/Inspector.json:
• inspector/InspectorDOMAgent.cpp:

(WebCore::InspectorDOMAgent::highlightNode):

• inspector/InspectorDOMAgent.h:

(InspectorDOMAgent):

• inspector/front-end/ConsoleMessage.js:

(WebInspector.ConsoleMessageImpl.prototype._appendPropertyPreview):

• inspector/front-end/DOMAgent.js:

(WebInspector.DOMAgent.prototype.highlightDOMNode):

• inspector/front-end/DOMPresentationUtils.js:

(WebInspector.DOMPresentationUtils.createSpansForNodeTitle):

• inspector/front-end/ObjectPropertiesSection.js:

(WebInspector.ObjectPropertyTreeElement.prototype.update):
(WebInspector.ObjectPropertyTreeElement.prototype._mouseMove):
(WebInspector.ObjectPropertyTreeElement.prototype._mouseOut):

• inspector/front-end/RemoteObject.js:

(WebInspector.RemoteObject.prototype.highlightAsDOMNode):
(WebInspector.RemoteObject.prototype.hideDOMNodeHighlight):

• inspector/front-end/TestController.js:
• inspector/front-end/externs.js:
• inspector/front-end/inspector.css:

(.console-formatted-node:hover):

• inspector/front-end/utilities.js:

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/Inspector.json (modified) (1 diff)
• inspector/InspectorDOMAgent.cpp (modified) (1 diff)
• inspector/InspectorDOMAgent.h (modified) (1 diff)
• inspector/front-end/ConsoleMessage.js (modified) (1 diff)
• inspector/front-end/DOMAgent.js (modified) (2 diffs)
• inspector/front-end/DOMPresentationUtils.js (modified) (1 diff)
• inspector/front-end/ObjectPropertiesSection.js (modified) (3 diffs)
• inspector/front-end/RemoteObject.js (modified) (1 diff)
• inspector/front-end/TestController.js (modified) (1 diff)
• inspector/front-end/externs.js (modified) (1 diff)
• inspector/front-end/inspector.css (modified) (1 diff)
• inspector/front-end/utilities.js (modified) (2 diffs)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2012-11-29  Pavel Feldman  <pfeldman@chromium.org>
+
+        Web Inspector: Console: hovering node wrappers in object tree should highlight them on the page
+        https://bugs.webkit.org/show_bug.cgi?id=101150
+
+        Reviewed by Vsevolod Vlasov.
+
+        - Introduced a way to highlight nodes by object id in addition to node id.
+        - Decorated nodes in the object tree outline and added on-hover highlighting.
+
+        * inspector/Inspector.json:
+        * inspector/InspectorDOMAgent.cpp:
+        (WebCore::InspectorDOMAgent::highlightNode):
+        * inspector/InspectorDOMAgent.h:
+        (InspectorDOMAgent):
+        * inspector/front-end/ConsoleMessage.js:
+        (WebInspector.ConsoleMessageImpl.prototype._appendPropertyPreview):
+        * inspector/front-end/DOMAgent.js:
+        (WebInspector.DOMAgent.prototype.highlightDOMNode):
+        * inspector/front-end/DOMPresentationUtils.js:
+        (WebInspector.DOMPresentationUtils.createSpansForNodeTitle):
+        * inspector/front-end/ObjectPropertiesSection.js:
+        (WebInspector.ObjectPropertyTreeElement.prototype.update):
+        (WebInspector.ObjectPropertyTreeElement.prototype._mouseMove):
+        (WebInspector.ObjectPropertyTreeElement.prototype._mouseOut):
+        * inspector/front-end/RemoteObject.js:
+        (WebInspector.RemoteObject.prototype.highlightAsDOMNode):
+        (WebInspector.RemoteObject.prototype.hideDOMNodeHighlight):
+        * inspector/front-end/TestController.js:
+        * inspector/front-end/externs.js:
+        * inspector/front-end/inspector.css:
+        (.console-formatted-node:hover):
+        * inspector/front-end/utilities.js:
+
 2012-11-29  Dan Bernstein  <mitz@apple.com>
 

trunk/Source/WebCore/inspector/Inspector.json

@@ -1859 +1859 @@
                 "name": "highlightNode",
                 "parameters": [
-                    { "name": "nodeId", "$ref": "NodeId", "description": "Identifier of the node to highlight." },
+                    { "name": "nodeId", "$ref": "NodeId", "optional": true, "description": "Identifier of the node to highlight." },
+                    { "name": "objectId", "$ref": "Runtime.RemoteObjectId", "optional": true, "description": "JavaScript object id of the node to be highlighted." },
                     { "name": "highlightConfig", "$ref": "HighlightConfig", "description": "A descriptor for the highlight appearance." }
                 ],
-                "description": "Highlights DOM node with given id."
+                "description": "Highlights DOM node with given id or with the given JavaScript object wrapper. Either nodeId or objectId must be specified."
             },
             {

trunk/Source/WebCore/inspector/InspectorDOMAgent.cpp

@@ -1067 +1067 @@
 }
 
-void InspectorDOMAgent::highlightNode(
-    ErrorString* errorString,
-    int nodeId,
-    const RefPtr<InspectorObject>& highlightInspectorObject)
-{
-    Node* node = nodeForId(nodeId);
+void InspectorDOMAgent::highlightNode(ErrorString* errorString, const int* nodeId, const String* objectId, const RefPtr<InspectorObject>& highlightInspectorObject)
+{
+    Node* node = 0;
+    if (nodeId) {
+        node = assertNode(errorString, *nodeId);
+    } else if (objectId) {
+        InjectedScript injectedScript = m_injectedScriptManager->injectedScriptForObjectId(*objectId);
+        node = injectedScript.nodeForObjectId(*objectId);
+        if (!node)
+            *errorString = "Node for given objectId not found";
+    } else
+        *errorString = "Either nodeId or objectId must be specified";
+
     if (!node)
         return;

trunk/Source/WebCore/inspector/InspectorDOMAgent.h

@@ -142 +142 @@
     virtual void hideHighlight(ErrorString*);
     virtual void highlightRect(ErrorString*, int x, int y, int width, int height, const RefPtr<InspectorObject>* color, const RefPtr<InspectorObject>* outlineColor);
-    virtual void highlightNode(ErrorString*, int nodeId, const RefPtr<InspectorObject>& highlightConfig);
+    virtual void highlightNode(ErrorString*, const int* nodeId, const String* objectId, const RefPtr<InspectorObject>& highlightConfig);
     virtual void highlightFrame(ErrorString*, const String& frameId, const RefPtr<InspectorObject>* color, const RefPtr<InspectorObject>* outlineColor);
     virtual void moveTo(ErrorString*, int nodeId, int targetNodeId, const int* anchorNodeId, int* newNodeId);

trunk/Source/WebCore/inspector/front-end/ConsoleMessage.js

@@ -352 +352 @@
         if (property.type === "object" && property.subtype === "node") {
             span.addStyleClass("console-formatted-preview-node");
-            var match = property.value.match(/([^#.]+)(#[^.]+)?(\..*)?/);
-            span.createChild("span", "webkit-html-tag-name").textContent = match[1];
-            if (match[2])
-                span.createChild("span", "webkit-html-attribute-value").textContent = match[2];
-            if (match[3])
-                span.createChild("span", "webkit-html-attribute-name").textContent = match[3];
+            WebInspector.DOMPresentationUtils.createSpansForNodeTitle(span, property.value);
             return;
         }

trunk/Source/WebCore/inspector/front-end/DOMAgent.js

@@ -1199 +1199 @@
      * @param {?number} nodeId
      * @param {string=} mode
-     */
-    highlightDOMNode: function(nodeId, mode)
+     * @param {RuntimeAgent.RemoteObjectId=} objectId
+     */
+    highlightDOMNode: function(nodeId, mode, objectId)
     {
         if (this._hideDOMNodeHighlightTimeout) {
@@ -1207 +1208 @@
         }
 
-        this._highlightedDOMNodeId = nodeId;
-        if (nodeId)
-            DOMAgent.highlightNode(nodeId, this._buildHighlightConfig(mode));
+        if (objectId || nodeId)
+            DOMAgent.highlightNode(objectId ? undefined : nodeId, objectId, this._buildHighlightConfig(mode));
         else
             DOMAgent.hideHighlight();

trunk/Source/WebCore/inspector/front-end/DOMPresentationUtils.js

@@ -77 +77 @@
 }
 
+/**
+ * @param {Element} container
+ * @param {string} nodeTitle
+ */
+WebInspector.DOMPresentationUtils.createSpansForNodeTitle = function(container, nodeTitle)
+{
+    var match = nodeTitle.match(/([^#.]+)(#[^.]+)?(\..*)?/);
+    container.createChild("span", "webkit-html-tag-name").textContent = match[1];
+    if (match[2])
+        container.createChild("span", "webkit-html-attribute-value").textContent = match[2];
+    if (match[3])
+        container.createChild("span", "webkit-html-attribute-name").textContent = match[3];
+}
+
 WebInspector.DOMPresentationUtils.linkifyNodeReference = function(node)
 {

trunk/Source/WebCore/inspector/front-end/ObjectPropertiesSection.js

@@ -235 +235 @@
             this.valueElement.textContent = /.*/.exec(description)[0].replace(/ +$/g, "");
             this.valueElement._originalTextContent = description;
-        } else
+        } else if (this.property.value.type !== "object" || this.property.value.subtype !== "node") 
             this.valueElement.textContent = description;
 
@@ -246 +246 @@
 
         this.valueElement.addEventListener("contextmenu", this._contextMenuFired.bind(this, this.property.value), false);
-        this.valueElement.title = description || "";
+        if (this.property.value.type === "object" && this.property.value.subtype === "node") {
+            WebInspector.DOMPresentationUtils.createSpansForNodeTitle(this.valueElement, this.property.value.description);
+            this.valueElement.addEventListener("mousemove", this._mouseMove.bind(this, this.property.value), false);
+            this.valueElement.addEventListener("mouseout", this._mouseOut.bind(this, this.property.value), false);
+        } else
+            this.valueElement.title = description || "";
 
         this.listItemElement.removeChildren();
@@ -269 +274 @@
     populateContextMenu: function(contextMenu)
     {
+    },
+
+    _mouseMove: function(event)
+    {
+        this.property.value.highlightAsDOMNode();
+    },
+
+    _mouseOut: function(event)
+    {
+        this.property.value.hideDOMNodeHighlight();
     },
 

trunk/Source/WebCore/inspector/front-end/RemoteObject.js

@@ -289 +289 @@
     },
 
+    highlightAsDOMNode: function()
+    {
+        WebInspector.domAgent.highlightDOMNode(undefined, undefined, this._objectId);
+    },
+
+    hideDOMNodeHighlight: function()
+    {
+        WebInspector.domAgent.hideDOMNodeHighlight();
+    },
+
     /**
      * @param {function(this:Object)} functionDeclaration

trunk/Source/WebCore/inspector/front-end/TestController.js

@@ -46 +46 @@
 WebInspector.evaluateForTestInFrontend = function(callId, script)
 {
-    WebInspector.isUnderTest = true;
+    window.isUnderTest = true;
     function invokeMethod()
     {

trunk/Source/WebCore/inspector/front-end/externs.js

@@ -65 +65 @@
 /** @type {*} */
 window.testRunner = null;
+
+window.isUnderTest = false;
 
 /**

trunk/Source/WebCore/inspector/front-end/inspector.css

@@ -1142 +1142 @@
 }
 
+.console-formatted-node:hover {
+    background-color: rgba(56, 121, 217, 0.1);
+}
+
 .console-formatted-object .section, .console-formatted-node .section, .console-formatted-array .section {
     position: static;

trunk/Source/WebCore/inspector/front-end/utilities.js

@@ -862 +862 @@
 }
 
+window.isUnderTest = false;
 
 /**
@@ -873 +874 @@
     this._observer = new WebKitMutationObserver(handler);
     NonLeakingMutationObserver._instances.push(this);
-    if (!window.testRunner && !WebInspector.isUnderTest && !NonLeakingMutationObserver._unloadListener) {
+    if (!window.testRunner && !window.isUnderTest && !NonLeakingMutationObserver._unloadListener) {
         NonLeakingMutationObserver._unloadListener = function() {
             while (NonLeakingMutationObserver._instances.length)