Web Inspector: Send context attributes for tracked canvases
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 21 Jun 2017 00:07:41 +0000 (00:07 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 21 Jun 2017 00:07:41 +0000 (00:07 +0000)
https://bugs.webkit.org/show_bug.cgi?id=173327

Reviewed by Joseph Pecoraro.

Source/JavaScriptCore:

* inspector/protocol/Canvas.json:
Add ContextAttributes object type that is optionally used for WebGL canvases.

Source/WebCore:

Test: inspector/canvas/context-attributes.html

* inspector/InspectorCanvasAgent.cpp:
(WebCore::InspectorCanvasAgent::buildObjectForCanvas):

Source/WebInspectorUI:

* UserInterface/Models/Canvas.js:
(WebInspector.Canvas.fromPayload):
(WebInspector.Canvas.prototype.get contextAttributes):
* UserInterface/Views/CanvasDetailsSidebarPanel.js:
(WebInspector.CanvasDetailsSidebarPanel.prototype.initialLayout):
(WebInspector.CanvasDetailsSidebarPanel.prototype.layout):
(WebInspector.CanvasDetailsSidebarPanel.prototype.sizeDidChange):
(WebInspector.CanvasDetailsSidebarPanel.prototype._refreshAttributesSection):

* UserInterface/Views/DataGridNode.js:
(WebInspector.DataGridNode.prototype.createCellContent):
Instead of checking if the value of the cell is falsy, check that the key exists in the data.
This allows values like `false` to be displayed.

LayoutTests:

* inspector/canvas/context-attributes-expected.txt: Added.
* inspector/canvas/context-attributes.html: Added.

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

LayoutTests/ChangeLog
LayoutTests/inspector/canvas/context-attributes-expected.txt [new file with mode: 0644]
LayoutTests/inspector/canvas/context-attributes.html [new file with mode: 0644]
Source/JavaScriptCore/ChangeLog
Source/JavaScriptCore/inspector/protocol/Canvas.json
Source/WebCore/ChangeLog
Source/WebCore/inspector/InspectorCanvasAgent.cpp
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Models/Canvas.js
Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/DataGridNode.js

index ee863c3..ff54d68 100644 (file)
@@ -1,3 +1,13 @@
+2017-06-20  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Send context attributes for tracked canvases
+        https://bugs.webkit.org/show_bug.cgi?id=173327
+
+        Reviewed by Joseph Pecoraro.
+
+        * inspector/canvas/context-attributes-expected.txt: Added.
+        * inspector/canvas/context-attributes.html: Added.
+
 2017-06-20  Matt Lewis  <jlewis3@apple.com>
 
         Marked webrtc/video-replace-muted-track.html as flaky.
diff --git a/LayoutTests/inspector/canvas/context-attributes-expected.txt b/LayoutTests/inspector/canvas/context-attributes-expected.txt
new file mode 100644 (file)
index 0000000..80df014
--- /dev/null
@@ -0,0 +1,36 @@
+Test that CanvasAgent is able to send context attributes.
+
+
+== Running test suite: Canvas.contextAttributes
+-- Running test case: Create2DCanvasContext
+Added canvas.
+PASS: Canvas context should be "2D".
+{}
+
+-- Running test case: CreateWebGLCanvasContext
+Added canvas.
+PASS: Canvas context should be "WebGL".
+{
+  "alpha": true,
+  "depth": true,
+  "stencil": false,
+  "antialias": true,
+  "premultipliedAlpha": true,
+  "preserveDrawingBuffer": false,
+  "failIfMajorPerformanceCaveat": false
+}
+
+-- Running test case: CreateWebGLCanvasContextWithAttributes
+Added canvas.
+PASS: Canvas context should be "WebGL".
+{
+  "alpha": false,
+  "depth": true,
+  "stencil": false,
+  "antialias": true,
+  "premultipliedAlpha": true,
+  "preserveDrawingBuffer": false,
+  "failIfMajorPerformanceCaveat": false
+}
+PASS: Canvas context should have attribute "alpha" with value "false".
+
diff --git a/LayoutTests/inspector/canvas/context-attributes.html b/LayoutTests/inspector/canvas/context-attributes.html
new file mode 100644 (file)
index 0000000..22b62ce
--- /dev/null
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
+<script>
+let contexts = [];
+
+function createCanvas(contextType, attributes) {
+    let canvas = document.body.appendChild(document.createElement("canvas"));
+    contexts.push(canvas.getContext(contextType, attributes));
+}
+
+function test() {
+    let suite = InspectorTest.createAsyncSuite("Canvas.contextAttributes");
+
+    function addTestCase({name, contextType, contextAttributes}) {
+        contextAttributes = contextAttributes || {};
+
+        suite.addTestCase({
+            name,
+            description: "Check that created canvases have the correct type and attributes sent to the frontend.",
+            test(resolve, reject) {
+                WebInspector.canvasManager.awaitEvent(WebInspector.CanvasManager.Event.CanvasWasAdded)
+                .then((event) => {
+                    let canvas = event.data.canvas;
+                    InspectorTest.log("Added canvas.");
+
+                    let contextDisplayName = WebInspector.Canvas.displayNameForContextType(contextType);
+                    InspectorTest.expectEqual(canvas.contextType, contextType, `Canvas context should be "${contextDisplayName}".`);
+                    InspectorTest.log(JSON.stringify(canvas.contextAttributes, null, 2));
+
+                    for (let name in contextAttributes)
+                        InspectorTest.expectEqual(canvas.contextAttributes[name], contextAttributes[name], `Canvas context should have attribute "${name}" with value "${contextAttributes[name]}".`);
+                })
+                .then(resolve, reject);
+
+                let type = contextType === WebInspector.Canvas.ContextType.Canvas2D ? "2d" : "webgl";
+                let attributes = JSON.stringify(contextAttributes);
+                InspectorTest.evaluateInPage(`createCanvas("${type}", ${attributes})`);
+            }
+        });
+    }
+
+    const testCases = [
+        {
+            name: "Create2DCanvasContext",
+            contextType: WebInspector.Canvas.ContextType.Canvas2D,
+        },
+        {
+            name: "CreateWebGLCanvasContext",
+            contextType: WebInspector.Canvas.ContextType.WebGL,
+        },
+        {
+            name: "CreateWebGLCanvasContextWithAttributes",
+            contextType: WebInspector.Canvas.ContextType.WebGL,
+            contextAttributes: {alpha: false},
+        }
+    ];
+
+    testCases.forEach(addTestCase);
+
+    suite.runTestCasesAndFinish();
+}
+</script>
+</head>
+<body onload="runTest()">
+    <p>Test that CanvasAgent is able to send context attributes.</p>
+</body>
+</html>
index 1fa5b64..534c3be 100644 (file)
@@ -1,3 +1,13 @@
+2017-06-20  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Send context attributes for tracked canvases
+        https://bugs.webkit.org/show_bug.cgi?id=173327
+
+        Reviewed by Joseph Pecoraro.
+
+        * inspector/protocol/Canvas.json:
+        Add ContextAttributes object type that is optionally used for WebGL canvases.
+
 2017-06-20  Konstantin Tokarev  <annulen@yandex.ru>
 
         Remove excessive include directives from WTF
index 186a3ce..72f520b 100644 (file)
             "description": "The type of rendering context backing the canvas element."
         },
         {
+            "id": "ContextAttributes",
+            "type": "object",
+            "description": "WebGL drawing surface attributes.",
+            "properties": [
+                { "name": "alpha", "type": "boolean" },
+                { "name": "depth", "type": "boolean" },
+                { "name": "stencil", "type": "boolean" },
+                { "name": "antialias", "type": "boolean" },
+                { "name": "premultipliedAlpha", "type": "boolean" },
+                { "name": "preserveDrawingBuffer", "type": "boolean" },
+                { "name": "failIfMajorPerformanceCaveat", "type": "boolean" }
+            ]
+        },
+        {
             "id": "Canvas",
             "type": "object",
             "description": "Information about a 2D/WebGL canvas for which a rendering context has been created.",
@@ -23,7 +37,8 @@
                 { "name": "contextType", "$ref": "ContextType", "description": "The type of rendering context backing the canvas." },
                 { "name": "frameId", "$ref": "Network.FrameId", "description": "Parent frame identifier." },
                 { "name": "nodeId", "$ref": "DOM.NodeId", "optional": true, "description": "The corresponding DOM node id." },
-                { "name": "cssCanvasName", "type": "string", "optional": true, "description": "The CSS canvas identifier, for canvases created with <code>document.getCSSCanvasContext</code>." }
+                { "name": "cssCanvasName", "type": "string", "optional": true, "description": "The CSS canvas identifier, for canvases created with <code>document.getCSSCanvasContext</code>." },
+                { "name": "contextAttributes", "$ref": "ContextAttributes", "optional": true, "description": "Context attributes for WebGL rendering contexts." }
             ]
         }
     ],
index 008b672..07c0f96 100644 (file)
@@ -1,3 +1,15 @@
+2017-06-20  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Send context attributes for tracked canvases
+        https://bugs.webkit.org/show_bug.cgi?id=173327
+
+        Reviewed by Joseph Pecoraro.
+
+        Test: inspector/canvas/context-attributes.html
+
+        * inspector/InspectorCanvasAgent.cpp:
+        (WebCore::InspectorCanvasAgent::buildObjectForCanvas):
+
 2017-06-20  Myles C. Maxfield  <mmaxfield@apple.com>
 
         [Cocoa] The system Japanese font cannot be italicized
index a96ea6f..d0da124 100644 (file)
@@ -34,6 +34,8 @@
 #include "InspectorPageAgent.h"
 #include "InstrumentingAgents.h"
 #include "MainFrame.h"
+#include "WebGLContextAttributes.h"
+#include "WebGLRenderingContextBase.h"
 #include <inspector/IdentifiersFactory.h>
 #include <inspector/InspectorProtocolObjects.h>
 
@@ -277,6 +279,22 @@ Ref<Inspector::Protocol::Canvas::Canvas> InspectorCanvasAgent::buildObjectForCan
             canvas->setNodeId(nodeId);
     }
 
+#if ENABLE(WEBGL)
+    if (is<WebGLRenderingContextBase>(context)) {
+        if (std::optional<WebGLContextAttributes> attributes = downcast<WebGLRenderingContextBase>(context)->getContextAttributes()) {
+            canvas->setContextAttributes(Inspector::Protocol::Canvas::ContextAttributes::create()
+                .setAlpha(attributes->alpha)
+                .setDepth(attributes->depth)
+                .setStencil(attributes->stencil)
+                .setAntialias(attributes->antialias)
+                .setPremultipliedAlpha(attributes->premultipliedAlpha)
+                .setPreserveDrawingBuffer(attributes->preserveDrawingBuffer)
+                .setFailIfMajorPerformanceCaveat(attributes->failIfMajorPerformanceCaveat)
+                .release());
+        }
+    }
+#endif
+
     return canvas;
 }
 
index 237be99..560d4e3 100644 (file)
@@ -1,3 +1,24 @@
+2017-06-20  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Send context attributes for tracked canvases
+        https://bugs.webkit.org/show_bug.cgi?id=173327
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Models/Canvas.js:
+        (WebInspector.Canvas.fromPayload):
+        (WebInspector.Canvas.prototype.get contextAttributes):
+        * UserInterface/Views/CanvasDetailsSidebarPanel.js:
+        (WebInspector.CanvasDetailsSidebarPanel.prototype.initialLayout):
+        (WebInspector.CanvasDetailsSidebarPanel.prototype.layout):
+        (WebInspector.CanvasDetailsSidebarPanel.prototype.sizeDidChange):
+        (WebInspector.CanvasDetailsSidebarPanel.prototype._refreshAttributesSection):
+
+        * UserInterface/Views/DataGridNode.js:
+        (WebInspector.DataGridNode.prototype.createCellContent):
+        Instead of checking if the value of the cell is falsy, check that the key exists in the data.
+        This allows values like `false` to be displayed.
+
 2017-06-19  Devin Rousso  <drousso@apple.com>
 
         Web Inspector: create canvas content view and details sidebar panel
index e12cd76..d32f2ee 100644 (file)
@@ -25,7 +25,7 @@
 
 WebInspector.Canvas = class Canvas extends WebInspector.Object
 {
-    constructor(identifier, contextType, frame, {domNode, cssCanvasName} = {})
+    constructor(identifier, contextType, frame, {domNode, cssCanvasName, contextAttributes} = {})
     {
         super();
 
@@ -38,6 +38,7 @@ WebInspector.Canvas = class Canvas extends WebInspector.Object
         this._frame = frame;
         this._domNode = domNode || null;
         this._cssCanvasName = cssCanvasName || "";
+        this._contextAttributes = contextAttributes || {};
     }
 
     // Static
@@ -60,6 +61,7 @@ WebInspector.Canvas = class Canvas extends WebInspector.Object
         return new WebInspector.Canvas(payload.canvasId, contextType, frame, {
             domNode: payload.nodeId ? WebInspector.domTreeManager.nodeForId(payload.nodeId) : null,
             cssCanvasName: payload.cssCanvasName,
+            contextAttributes: payload.contextAttributes,
         });
     }
 
@@ -86,6 +88,7 @@ WebInspector.Canvas = class Canvas extends WebInspector.Object
     get contextType() { return this._contextType; }
     get frame() { return this._frame; }
     get cssCanvasName() { return this._cssCanvasName; }
+    get contextAttributes() { return this._contextAttributes; }
 
     get displayName()
     {
index 5fcd6f9..3130b2f 100644 (file)
@@ -91,6 +91,12 @@ WebInspector.CanvasDetailsSidebarPanel = class CanvasDetailsSidebarPanel extends
         let sourceSection = new WebInspector.DetailsSection("canvas-source", WebInspector.UIString("Source"));
         sourceSection.groups = [new WebInspector.DetailsSectionGroup([this._nodeRow, this._cssCanvasRow, this._widthRow, this._heightRow, this._datachedRow])];
         this.contentView.element.appendChild(sourceSection.element);
+
+        this._attributesDataGridRow = new WebInspector.DetailsSectionDataGridRow(null, WebInspector.UIString("No Attributes"));
+
+        let attributesSection = new WebInspector.DetailsSection("canvas-attributes", WebInspector.UIString("Attributes"));
+        attributesSection.groups = [new WebInspector.DetailsSectionGroup([this._attributesDataGridRow])];
+        this.contentView.element.appendChild(attributesSection.element);
     }
 
     layout()
@@ -102,6 +108,15 @@ WebInspector.CanvasDetailsSidebarPanel = class CanvasDetailsSidebarPanel extends
 
         this._refreshIdentitySection();
         this._refreshSourceSection();
+        this._refreshAttributesSection();
+    }
+
+    sizeDidChange()
+    {
+        super.sizeDidChange();
+
+        // FIXME: <https://webkit.org/b/152269> Web Inspector: Convert DetailsSection classes to use View
+        this._attributesDataGridRow.sizeDidChange();
     }
 
     // Private
@@ -185,4 +200,34 @@ WebInspector.CanvasDetailsSidebarPanel = class CanvasDetailsSidebarPanel extends
                 this._datachedRow.value = WebInspector.UIString("Yes");
         });
     }
+
+    _refreshAttributesSection()
+    {
+        if (!this._canvas)
+            return;
+
+        if (isEmptyObject(this._canvas.contextAttributes)) {
+            // Remove the DataGrid to show the placeholder text.
+            this._attributesDataGridRow.dataGrid = null;
+            return;
+        }
+
+        let dataGrid = this._attributesDataGridRow.dataGrid;
+        if (!dataGrid) {
+            dataGrid = this._attributesDataGridRow.dataGrid = new WebInspector.DataGrid({
+                name: {title: WebInspector.UIString("Name")},
+                value: {title: WebInspector.UIString("Value"), width: "30%"},
+            });
+        }
+
+        dataGrid.removeChildren();
+
+        for (let attribute in this._canvas.contextAttributes) {
+            let data = {name: attribute, value: this._canvas.contextAttributes[attribute]};
+            let dataGridNode = new WebInspector.DataGridNode(data);
+            dataGrid.appendChild(dataGridNode);
+        }
+
+        dataGrid.updateLayoutIfNeeded();
+    }
 };
index 88304c8..1095929 100644 (file)
@@ -383,10 +383,10 @@ WebInspector.DataGridNode = class DataGridNode extends WebInspector.Object
 
     createCellContent(columnIdentifier)
     {
-        let data = this.data[columnIdentifier];
-        if (!data)
+        if (!(columnIdentifier in this.data))
             return zeroWidthSpace; // Zero width space to keep the cell from collapsing.
 
+        let data = this.data[columnIdentifier];
         return (typeof data === "number") ? data.maxDecimals(2).toLocaleString() : data;
     }