Changeset 219316 in webkit

Timestamp:

Jul 10, 2017 5:01:55 PM (7 years ago)

Author:

Devin Rousso

Message:

Web Inspector: Highlight matching CSS canvas clients when hovering contexts in the Resources tab
​https://bugs.webkit.org/show_bug.cgi?id=174279

Reviewed by Matt Baker.

Source/JavaScriptCore:

• inspector/protocol/DOM.json:

Add highlightNodeList command that will highlight each node in the given list.

Source/WebCore:

Test: inspector/dom/highlightNodeList.html

• inspector/InspectorDOMAgent.h:
• inspector/InspectorDOMAgent.cpp:

(WebCore::InspectorDOMAgent::highlightNodeList):

Source/WebInspectorUI:

• UserInterface/Controllers/DOMTreeManager.js:

(WebInspector.DOMTreeManager.prototype.highlightDOMNodeList):
(WebInspector.DOMTreeManager.prototype.highlightSelector):

• UserInterface/Views/CanvasTreeElement.js:

(WebInspector.CanvasTreeElement.prototype._handleMouseOver):

LayoutTests:

• inspector/dom/highlightNodeList-expected.html: Added.
• inspector/dom/highlightNodeList.html: Added.

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/inspector/dom/highlightNodeList-expected.txt (added)
• LayoutTests/inspector/dom/highlightNodeList.html (added)
• Source/JavaScriptCore/ChangeLog (modified) (1 diff)
• Source/JavaScriptCore/inspector/protocol/DOM.json (modified) (1 diff)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/inspector/InspectorDOMAgent.cpp (modified) (2 diffs)
• Source/WebCore/inspector/InspectorDOMAgent.h (modified) (1 diff)
• Source/WebInspectorUI/ChangeLog (modified) (1 diff)
• Source/WebInspectorUI/UserInterface/Controllers/DOMTreeManager.js (modified) (2 diffs)
• Source/WebInspectorUI/UserInterface/Views/CanvasTreeElement.js (modified) (1 diff)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2017-07-10  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Highlight matching CSS canvas clients when hovering contexts in the Resources tab
+        https://bugs.webkit.org/show_bug.cgi?id=174279
+
+        Reviewed by Matt Baker.
+
+        * inspector/dom/highlightNodeList-expected.html: Added.
+        * inspector/dom/highlightNodeList.html: Added.
+
 2017-07-10  Javier Fernandez  <jfernandez@igalia.com>
 

trunk/Source/JavaScriptCore/ChangeLog

@@ +1 @@
+2017-07-10  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Highlight matching CSS canvas clients when hovering contexts in the Resources tab
+        https://bugs.webkit.org/show_bug.cgi?id=174279
+
+        Reviewed by Matt Baker.
+
+        * inspector/protocol/DOM.json:
+        Add `highlightNodeList` command that will highlight each node in the given list.
+
 2017-07-03  Brian Burg  <bburg@apple.com>
 

trunk/Source/JavaScriptCore/inspector/protocol/DOM.json

@@ -378 +378 @@
         },
         {
+            "name": "highlightNodeList",
+            "description": "Highlights each DOM node in the given list.",
+            "parameters": [
+                { "name": "nodeIds", "type": "array", "items": { "$ref": "NodeId" } },
+                { "name": "highlightConfig", "$ref": "HighlightConfig" }
+            ]
+        },
+        {
             "name": "hideHighlight",
             "description": "Hides DOM node highlight."

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2017-07-10  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Highlight matching CSS canvas clients when hovering contexts in the Resources tab
+        https://bugs.webkit.org/show_bug.cgi?id=174279
+
+        Reviewed by Matt Baker.
+
+        Test: inspector/dom/highlightNodeList.html
+
+        * inspector/InspectorDOMAgent.h:
+        * inspector/InspectorDOMAgent.cpp:
+        (WebCore::InspectorDOMAgent::highlightNodeList):
+
 2017-07-10  Javier Fernandez  <jfernandez@igalia.com>
 

trunk/Source/WebCore/inspector/InspectorDOMAgent.cpp

@@ -86 +86 @@
 #include "ScriptState.h"
 #include "ShadowRoot.h"
+#include "StaticNodeList.h"
 #include "StyleProperties.h"
 #include "StyleResolver.h"
@@ -1145 +1146 @@
 
     m_overlay->highlightNode(node, *highlightConfig);
+}
+
+void InspectorDOMAgent::highlightNodeList(ErrorString& errorString, const InspectorArray& nodeIds, const InspectorObject& highlightInspectorObject)
+{
+    Vector<Ref<Node>> nodes;
+    for (auto& nodeValue : nodeIds) {
+        if (!nodeValue) {
+            errorString = ASCIILiteral("Invalid nodeIds item.");
+            return;
+        }
+
+        int nodeId = 0;
+        if (!nodeValue->asInteger(nodeId)) {
+            errorString = ASCIILiteral("Invalid nodeIds item type. Expecting integer types.");
+            return;
+        }
+
+        // In the case that a node is removed in the time between when highlightNodeList is invoked
+        // by the frontend and it is executed by the backend, we should still attempt to highlight
+        // as many nodes as possible. As such, we should ignore any errors generated when attempting
+        // to get a Node from a given nodeId. 
+        ErrorString ignored;
+        Node* node = assertNode(ignored, nodeId);
+        if (!node)
+            continue;
+
+        nodes.append(*node);
+    }
+
+    std::unique_ptr<HighlightConfig> highlightConfig = highlightConfigFromInspectorObject(errorString, &highlightInspectorObject);
+    if (!highlightConfig)
+        return;
+
+    m_overlay->highlightNodeList(StaticNodeList::create(WTFMove(nodes)), *highlightConfig);
 }
 

trunk/Source/WebCore/inspector/InspectorDOMAgent.h

@@ -140 +140 @@
     void highlightSelector(ErrorString&, const Inspector::InspectorObject& highlightConfig, const String& selectorString, const String* const frameId) override;
     void highlightNode(ErrorString&, const Inspector::InspectorObject& highlightConfig, const int* const nodeId, const String* const objectId) override;
+    void highlightNodeList(ErrorString&, const Inspector::InspectorArray& nodeIds, const Inspector::InspectorObject& highlightConfig) override;
     void highlightFrame(ErrorString&, const String& frameId, const Inspector::InspectorObject* color, const Inspector::InspectorObject* outlineColor) override;
 

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2017-07-10  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Highlight matching CSS canvas clients when hovering contexts in the Resources tab
+        https://bugs.webkit.org/show_bug.cgi?id=174279
+
+        Reviewed by Matt Baker.
+
+        * UserInterface/Controllers/DOMTreeManager.js:
+        (WebInspector.DOMTreeManager.prototype.highlightDOMNodeList):
+        (WebInspector.DOMTreeManager.prototype.highlightSelector):
+        * UserInterface/Views/CanvasTreeElement.js:
+        (WebInspector.CanvasTreeElement.prototype._handleMouseOver):
+
 2017-07-03  Brian Burg  <bburg@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Controllers/DOMTreeManager.js

@@ -427 +427 @@
     }
 
+    highlightDOMNodeList(nodeIds, mode)
+    {
+        // COMPATIBILITY (iOS 11): DOM.highlightNodeList did not exist.
+        if (!DOMAgent.highlightNodeList)
+            return;
+
+        if (this._hideDOMNodeHighlightTimeout) {
+            clearTimeout(this._hideDOMNodeHighlightTimeout);
+            this._hideDOMNodeHighlightTimeout = undefined;
+        }
+
+        DOMAgent.highlightNodeList(nodeIds, this._buildHighlightConfig(mode));
+    }
+
     highlightSelector(selectorText, frameId, mode)
     {
@@ -432 +446 @@
         if (!DOMAgent.highlightSelector)
             return;
+
+        if (this._hideDOMNodeHighlightTimeout) {
+            clearTimeout(this._hideDOMNodeHighlightTimeout);
+            this._hideDOMNodeHighlightTimeout = undefined;
+        }
 
         DOMAgent.highlightSelector(this._buildHighlightConfig(mode), selectorText, frameId);

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

@@ -66 +66 @@
     _handleMouseOver(event)
     {
-        this.representedObject.requestNode((node) => {
-            if (!node || !node.ownerDocument)
-                return;
+        if (this.representedObject.cssCanvasName) {
+            this.representedObject.requestCSSCanvasClientNodes((cssCanvasClientNodes) => {
+                WebInspector.domTreeManager.highlightDOMNodeList(cssCanvasClientNodes.map((node) => node.id), "all");
+            });
+        } else {
+            this.representedObject.requestNode((node) => {
+                if (!node || !node.ownerDocument)
+                    return;
 
-            WebInspector.domTreeManager.highlightDOMNode(node.id, "all");
-        });
+                WebInspector.domTreeManager.highlightDOMNode(node.id, "all");
+            });
+        }
     }