Title: [219316] trunk
Revision
219316
Author
drou...@apple.com
Date
2017-07-10 17:01:55 -0700 (Mon, 10 Jul 2017)

Log 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/_javascript_Core:

* 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.

Modified Paths

Added Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (219315 => 219316)


--- trunk/LayoutTests/ChangeLog	2017-07-10 23:56:21 UTC (rev 219315)
+++ trunk/LayoutTests/ChangeLog	2017-07-11 00:01:55 UTC (rev 219316)
@@ -1,3 +1,13 @@
+2017-07-10  Devin Rousso  <drou...@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  <jfernan...@igalia.com>
 
         [css-align][css-flex][css-grid] 'auto' values of align-self and justify-self must not be resolved

Added: trunk/LayoutTests/inspector/dom/highlightNodeList-expected.txt (0 => 219316)


--- trunk/LayoutTests/inspector/dom/highlightNodeList-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/inspector/dom/highlightNodeList-expected.txt	2017-07-11 00:01:55 UTC (rev 219316)
@@ -0,0 +1,78 @@
+Tests for the DOM.highlightNodeList command.
+
+
+PASS: Page should have a subframe.
+
+== Running test suite: DOM.highlightNodeList
+-- Running test case: DOM.highlightNodeList.CheckEmptyHighlight
+PASS: Highlight should not exist.
+
+-- Running test case: DOM.highlightNodeList.emptyNodeList
+PASS: Should highlight 0 element(s).
+
+-- Running test case: DOM.highlightNodeList.mainFrameNode
+PASS: Should highlight 3 element(s).
+Highlighted Elements:
+{
+  "tagName": "div",
+  "idValue": "",
+  "size": {
+    "width": 500,
+    "height": 500
+  },
+  "role": ""
+}
+{
+  "tagName": "div",
+  "idValue": "",
+  "classes": [
+    "class-one"
+  ],
+  "size": {
+    "width": 10,
+    "height": 20
+  },
+  "role": ""
+}
+{
+  "tagName": "div",
+  "idValue": "id-one",
+  "classes": [
+    "class-two"
+  ],
+  "size": {
+    "width": 100,
+    "height": 200
+  },
+  "role": ""
+}
+
+-- Running test case: DOM.highlightNodeList.childFrameNode
+PASS: Should highlight 2 element(s).
+Highlighted Elements:
+{
+  "tagName": "div",
+  "idValue": "id-one",
+  "size": {
+    "width": 150,
+    "height": 250
+  },
+  "role": ""
+}
+{
+  "tagName": "div",
+  "idValue": "",
+  "size": {
+    "width": 269,
+    "height": 0
+  },
+  "role": ""
+}
+
+-- Running test case: DOM.highlightNodeList.invalidNodeId
+PASS: Should highlight 0 element(s).
+
+-- Running test case: DOM.highlightNodeList.nonIntegerNodeId
+PASS: Should produce an error.
+Error: Invalid nodeIds item type. Expecting integer types.
+

Added: trunk/LayoutTests/inspector/dom/highlightNodeList.html (0 => 219316)


--- trunk/LayoutTests/inspector/dom/highlightNodeList.html	                        (rev 0)
+++ trunk/LayoutTests/inspector/dom/highlightNodeList.html	2017-07-11 00:01:55 UTC (rev 219316)
@@ -0,0 +1,162 @@
+<!doctype html>
+<html>
+<head>
+<script src=""
+<script>
+function test()
+{
+    let suite = InspectorTest.createAsyncSuite("DOM.highlightNodeList");
+
+    let mainFrame = WebInspector.frameResourceManager.mainFrame;
+    let childFrames = mainFrame.childFrameCollection.toArray();
+    InspectorTest.expectEqual(childFrames.length, 1, "Page should have a subframe.");
+
+    const highlightConfig = {
+        showInfo: true,
+        contentColor: {r: 255, g: 255, b: 255},
+        paddingColor: {r: 255, g: 255, b: 255},
+        borderColor: {r: 255, g: 255, b: 255},
+        marginColor: {r: 255, g: 255, b: 255},
+    };
+
+    function getHighlight(callback) {
+        InspectorTest.evaluateInPage("window.internals.inspectorHighlightObject()", (error, payload, wasThrown) => {
+            InspectorTest.assert(!error, "Unexpected error dumping highlight: " + error);
+            InspectorTest.assert(!wasThrown, "Unexpected exception when dumping highlight.");
+            callback(JSON.parse(payload.value));
+        });
+    }
+
+    function dumpHighlight(expectedElements, callback) {
+        getHighlight((highlightPayloadList) => {
+            InspectorTest.expectThat(highlightPayloadList.length === expectedElements, `Should highlight ${expectedElements} element(s).`);
+            if (highlightPayloadList.length) {
+                InspectorTest.log("Highlighted Elements:");
+                for (let highlightPayload of highlightPayloadList)
+                    InspectorTest.log(JSON.stringify(highlightPayload.elementData, null, 2));
+            }
+            callback();
+        });
+    }
+
+    let mainFrameDocumentNodeId = 0;
+    let childFrameDocumentNodeId = 0;
+
+    suite.addTestCase({
+        name: "DOM.highlightNodeList.CheckEmptyHighlight",
+        description: "Check that highlight list is initially empty.",
+        test(resolve, reject) {
+            getHighlight((highlightObjectPayload) => {
+                InspectorTest.expectEqual(highlightObjectPayload.length, 0, "Highlight should not exist.");
+                resolve();
+            });
+        }
+    });
+
+    suite.addTestCase({
+        name: "DOM.highlightNodeList.emptyNodeList",
+        description: "Checks that an empty array highlights no elements.",
+        test(resolve, reject) {
+            DOMAgent.highlightNodeList([], highlightConfig, (error) => {
+                if (error) {
+                    reject(error);
+                    return;
+                }
+
+                const expectedElements = 0;
+                dumpHighlight(expectedElements, resolve);
+            });
+        }
+    });
+
+    suite.addTestCase({
+        name: "DOM.highlightNodeList.mainFrameNode",
+        description: "Should highlight all div in the main frame.",
+        test(resolve, reject) {
+            WebInspector.domTreeManager.querySelectorAll(mainFrameDocumentNodeId, "div", (nodeIds) => {
+                DOMAgent.highlightNodeList(nodeIds, highlightConfig, (error) => {
+                    if (error) {
+                        reject(error);
+                        return;
+                    }
+
+                    const expectedElements = 3;
+                    dumpHighlight(expectedElements, resolve);
+                });
+            });
+        }
+    });
+
+    suite.addTestCase({
+        name: "DOM.highlightNodeList.childFrameNode",
+        description: "Should highlight all div in the child frame.",
+        test(resolve, reject) {
+            WebInspector.domTreeManager.querySelectorAll(childFrameDocumentNodeId, "div", (nodeIds) => {
+                DOMAgent.highlightNodeList(nodeIds, highlightConfig, (error) => {
+                    if (error) {
+                        reject(error);
+                        return;
+                    }
+
+                    const expectedElements = 2;
+                    dumpHighlight(expectedElements, resolve);
+                });
+            });
+        }
+    });
+
+    suite.addTestCase({
+        name: "DOM.highlightNodeList.invalidNodeId",
+        description: "Bad node id should not cause an error.",
+        test(resolve, reject) {
+            const invalidNodeId = 9999999;
+            DOMAgent.highlightNodeList([invalidNodeId], highlightConfig, (error) => {
+                if (error) {
+                    reject(error);
+                    return;
+                }
+
+                const expectedElements = 0;
+                dumpHighlight(expectedElements, resolve);
+            });
+        }
+    });
+
+    // ------
+
+    suite.addTestCase({
+        name: "DOM.highlightNodeList.nonIntegerNodeId",
+        description: "Non-integer item for node id should cause an error.",
+        test(resolve, reject) {
+            const nonIntegerNodeId = "DOES_NOT_EXIST";
+            DOMAgent.highlightNodeList([nonIntegerNodeId], highlightConfig, (error) => {
+                InspectorTest.expectThat(error, "Should produce an error.");
+                InspectorTest.log("Error: " + error);
+                resolve();
+            });
+        }
+    });
+
+    WebInspector.domTreeManager.requestDocument((documentNode) => {
+        mainFrameDocumentNodeId = documentNode.id;
+        RuntimeAgent.evaluate.invoke({_expression_: "document", objectGroup: "test", contextId: childFrames[0].pageExecutionContext.id}, (error, remoteObjectPayload) => {
+            let remoteObject = WebInspector.RemoteObject.fromPayload(remoteObjectPayload)
+            remoteObject.pushNodeToFrontend((documentNodeId) => {
+                childFrameDocumentNodeId = documentNodeId;
+
+                suite.runTestCasesAndFinish();
+            });
+        })
+    });
+}
+</script>
+</head>
+<body _onload_="runTest()">
+    <p>Tests for the DOM.highlightNodeList command.</p>
+    <div style="width: 500px; height: 500px">
+        <div class="class-one" style="width: 10px; height: 20px"></div>
+        <div id="id-one" class="class-two" style="width:100px; height: 200px"></div>
+        <iframe class="class-one" src=""
+    </div>
+</body>
+</html>

Modified: trunk/Source/_javascript_Core/ChangeLog (219315 => 219316)


--- trunk/Source/_javascript_Core/ChangeLog	2017-07-10 23:56:21 UTC (rev 219315)
+++ trunk/Source/_javascript_Core/ChangeLog	2017-07-11 00:01:55 UTC (rev 219316)
@@ -1,3 +1,13 @@
+2017-07-10  Devin Rousso  <drou...@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  <bb...@apple.com>
 
         Web Replay: remove some unused code

Modified: trunk/Source/_javascript_Core/inspector/protocol/DOM.json (219315 => 219316)


--- trunk/Source/_javascript_Core/inspector/protocol/DOM.json	2017-07-10 23:56:21 UTC (rev 219315)
+++ trunk/Source/_javascript_Core/inspector/protocol/DOM.json	2017-07-11 00:01:55 UTC (rev 219316)
@@ -377,6 +377,14 @@
             ]
         },
         {
+            "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."
         },

Modified: trunk/Source/WebCore/ChangeLog (219315 => 219316)


--- trunk/Source/WebCore/ChangeLog	2017-07-10 23:56:21 UTC (rev 219315)
+++ trunk/Source/WebCore/ChangeLog	2017-07-11 00:01:55 UTC (rev 219316)
@@ -1,3 +1,16 @@
+2017-07-10  Devin Rousso  <drou...@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  <jfernan...@igalia.com>
 
         [css-align][css-flex][css-grid] 'auto' values of align-self and justify-self must not be resolved

Modified: trunk/Source/WebCore/inspector/InspectorDOMAgent.cpp (219315 => 219316)


--- trunk/Source/WebCore/inspector/InspectorDOMAgent.cpp	2017-07-10 23:56:21 UTC (rev 219315)
+++ trunk/Source/WebCore/inspector/InspectorDOMAgent.cpp	2017-07-11 00:01:55 UTC (rev 219316)
@@ -85,6 +85,7 @@
 #include "RenderStyleConstants.h"
 #include "ScriptState.h"
 #include "ShadowRoot.h"
+#include "StaticNodeList.h"
 #include "StyleProperties.h"
 #include "StyleResolver.h"
 #include "StyleSheetList.h"
@@ -1146,6 +1147,40 @@
     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);
+}
+
 void InspectorDOMAgent::highlightFrame(ErrorString& errorString, const String& frameId, const InspectorObject* color, const InspectorObject* outlineColor)
 {
     Frame* frame = m_pageAgent->assertFrame(errorString, frameId);

Modified: trunk/Source/WebCore/inspector/InspectorDOMAgent.h (219315 => 219316)


--- trunk/Source/WebCore/inspector/InspectorDOMAgent.h	2017-07-10 23:56:21 UTC (rev 219315)
+++ trunk/Source/WebCore/inspector/InspectorDOMAgent.h	2017-07-11 00:01:55 UTC (rev 219316)
@@ -139,6 +139,7 @@
     void highlightQuad(ErrorString&, const Inspector::InspectorArray& quad, const Inspector::InspectorObject* color, const Inspector::InspectorObject* outlineColor, const bool* const usePageCoordinates) override;
     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;
 
     void moveTo(ErrorString&, int nodeId, int targetNodeId, const int* const anchorNodeId, int* newNodeId) override;

Modified: trunk/Source/WebInspectorUI/ChangeLog (219315 => 219316)


--- trunk/Source/WebInspectorUI/ChangeLog	2017-07-10 23:56:21 UTC (rev 219315)
+++ trunk/Source/WebInspectorUI/ChangeLog	2017-07-11 00:01:55 UTC (rev 219316)
@@ -1,3 +1,16 @@
+2017-07-10  Devin Rousso  <drou...@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  <bb...@apple.com>
 
         Web Replay: remove some unused code

Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/DOMTreeManager.js (219315 => 219316)


--- trunk/Source/WebInspectorUI/UserInterface/Controllers/DOMTreeManager.js	2017-07-10 23:56:21 UTC (rev 219315)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/DOMTreeManager.js	2017-07-11 00:01:55 UTC (rev 219316)
@@ -426,6 +426,20 @@
             DOMAgent.hideHighlight();
     }
 
+    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)
     {
         // COMPATIBILITY (iOS 8): DOM.highlightSelector did not exist.
@@ -432,6 +446,11 @@
         if (!DOMAgent.highlightSelector)
             return;
 
+        if (this._hideDOMNodeHighlightTimeout) {
+            clearTimeout(this._hideDOMNodeHighlightTimeout);
+            this._hideDOMNodeHighlightTimeout = undefined;
+        }
+
         DOMAgent.highlightSelector(this._buildHighlightConfig(mode), selectorText, frameId);
     }
 

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CanvasTreeElement.js (219315 => 219316)


--- trunk/Source/WebInspectorUI/UserInterface/Views/CanvasTreeElement.js	2017-07-10 23:56:21 UTC (rev 219315)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CanvasTreeElement.js	2017-07-11 00:01:55 UTC (rev 219316)
@@ -65,12 +65,18 @@
 
     _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");
+            });
+        }
     }
 
     _handleMouseOut(event)
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to