Web Inspector: support OffscreenCanvas for Canvas related operations

https://bugs.webkit.org/show_bug.cgi?id=180833 <rdar://problem/36059660> Reviewed by Patrick Angle. * Source/JavaScriptCore/inspector/protocol/Canvas.json: * Source/JavaScriptCore/inspector/protocol/Recording.json: Expose the entire domain (minus a few commands/events) to the `"worker"` target. * Source/WebCore/inspector/InspectorController.cpp: (WebCore::InspectorController::createLazyAgents): * Source/WebCore/inspector/WorkerInspectorController.cpp: (WebCore::WorkerInspectorController::createLazyAgents): * Source/WebCore/inspector/agents/InspectorCanvasAgent.h: * Source/WebCore/inspector/agents/InspectorCanvasAgent.cpp: (WebCore::InspectorCanvasAgent::InspectorCanvasAgent): (WebCore::InspectorCanvasAgent::enable): (WebCore::InspectorCanvasAgent::disable): (WebCore::InspectorCanvasAgent::enabled const): Added. (WebCore::InspectorCanvasAgent::internalEnable): Added. (WebCore::InspectorCanvasAgent::internalDisable): Added. (WebCore::InspectorCanvasAgent::didChangeCanvasSize): Added. (WebCore::InspectorCanvasAgent::didChangeCanvasMemory): (WebCore::InspectorCanvasAgent::unbindCanvas): (WebCore::InspectorCanvasAgent::requestNode): Deleted. (WebCore::InspectorCanvasAgent::requestClientNodes): Deleted. (WebCore::InspectorCanvasAgent::frameNavigated): Deleted. (WebCore::InspectorCanvasAgent::didChangeCSSCanvasClientNodes): Deleted. * Source/WebCore/inspector/agents/page/PageCanvasAgent.h: Added. * Source/WebCore/inspector/agents/page/PageCanvasAgent.cpp: Added. (WebCore::PageCanvasAgent::PageCanvasAgent): (WebCore::PageCanvasAgent::enabled const): (WebCore::PageCanvasAgent::internalEnable): (WebCore::PageCanvasAgent::internalDisable): (WebCore::PageCanvasAgent::requestNode): (WebCore::PageCanvasAgent::requestClientNodes): (WebCore::PageCanvasAgent::frameNavigated): (WebCore::PageCanvasAgent::didChangeCSSCanvasClientNodes): (WebCore::PageCanvasAgent::matchesCurrentContext const): * Source/WebCore/inspector/agents/worker/WorkerCanvasAgent.h: Added. * Source/WebCore/inspector/agents/worker/WorkerCanvasAgent.cpp: Added. (WebCore::WorkerCanvasAgent::WorkerCanvasAgent): (WebCore::WorkerCanvasAgent::requestNode): (WebCore::WorkerCanvasAgent::requestClientNodes): (WebCore::WorkerCanvasAgent::matchesCurrentContext const): Split `InspectorCanvasAgent` into `PageCanvasAgent` and `WorkerCanvasAgent`. * Source/WebInspectorUI/UserInterface/Protocol/CanvasObserver.js: (WI.CanvasObserver.prototype.canvasAdded): (WI.CanvasObserver.prototype.canvasRemoved): (WI.CanvasObserver.prototype.canvasSizeChanged): (WI.CanvasObserver.prototype.canvasMemoryChanged): (WI.CanvasObserver.prototype.clientNodesChanged): (WI.CanvasObserver.prototype.recordingStarted): (WI.CanvasObserver.prototype.recordingProgress): (WI.CanvasObserver.prototype.recordingFinished): (WI.CanvasObserver.prototype.extensionEnabled): (WI.CanvasObserver.prototype.programCreated): (WI.CanvasObserver.prototype.programDeleted): (WI.CanvasObserver.prototype.cssCanvasClientNodesChanged): Pass along the `WI.Target`. * Source/WebInspectorUI/UserInterface/Controllers/CanvasManager.js: (WI.CanvasManager): (WI.CanvasManager.prototype.disable): (WI.CanvasManager.prototype.canvasAdded): (WI.CanvasManager.prototype.canvasRemoved): (WI.CanvasManager.prototype.canvasSizeChanged): Added. (WI.CanvasManager.prototype.canvasMemoryChanged): (WI.CanvasManager.prototype.clientNodesChanged): (WI.CanvasManager.prototype.recordingStarted): (WI.CanvasManager.prototype.recordingProgress): (WI.CanvasManager.prototype.recordingFinished): (WI.CanvasManager.prototype.extensionEnabled): (WI.CanvasManager.prototype.programCreated): (WI.CanvasManager.prototype.programDeleted): (WI.CanvasManager.prototype._canvasForIdentifier): Added. (WI.CanvasManager.prototype._handleTargetRemoved): Added. (WI.CanvasManager.prototype._mainResourceDidChange): (WI.CanvasManager.prototype.get shaderPrograms): `WI.Canvas`/`WI.ShaderProgram` now need to be keyed by a `WI.Target` -> identifier combo since the same identifier could be used by two different `WI.Target` (e.g. main page and `Worker`). * Source/WebInspectorUI/UserInterface/Models/Canvas.js: (WI.Canvas): (WI.Canvas.fromPayload): (WI.Canvas.prototype.get target): Added. (WI.Canvas.prototype.get size): Added. (WI.Canvas.prototype.get memoryCost): (WI.Canvas.prototype.requestNode): (WI.Canvas.prototype.requestContent): (WI.Canvas.prototype.requestClientNodes): (WI.Canvas.prototype.startRecording): (WI.Canvas.prototype.stopRecording): (WI.Canvas.prototype.sizeChanged): Added. (WI.Canvas.prototype.memoryChanged): Renamed from `set memoryCost`. (WI.Canvas.prototype.async _calculateSize): Added. (WI.Canvas.prototype.requestSize): Deleted. * Source/WebInspectorUI/UserInterface/Models/ShaderProgram.js: (WI.ShaderProgram): (WI.ShaderProgram.prototype.get target): Added. (WI.ShaderProgram.prototype.set disabled): (WI.ShaderProgram.prototype.requestShaderSource): (WI.ShaderProgram.prototype.updateShader): (WI.ShaderProgram.prototype.showHighlight): (WI.ShaderProgram.prototype.hideHighlight): Use the `this._target` instead of `WI.assumingMainTarget()`. * Source/WebCore/html/CanvasBase.h: (WebCore::CanvasBase::setSize): Deleted. * Source/WebCore/html/CanvasBase.cpp: (WebCore::CanvasBase::setSize): Added. (WebCore::CanvasBase::setImageBuffer const): * Source/WebCore/inspector/InspectorCanvas.cpp: (WebCore::InspectorCanvas::buildObjectForCanvas): * Source/WebCore/inspector/InspectorInstrumentation.h: (WebCore::InspectorInstrumentation::didChangeCanvasSize): Added. * Source/WebCore/inspector/InspectorInstrumentation.cpp: (WebCore::InspectorInstrumentation::didCommitLoadImpl): (WebCore::InspectorInstrumentation::didChangeCSSCanvasClientNodesImpl): (WebCore::InspectorInstrumentation::didChangeCanvasSizeImpl): Added. * Source/WebCore/inspector/InstrumentingAgents.h: * Source/WebInspectorUI/UserInterface/Views/CanvasContentView.js: (WI.CanvasContentView): (WI.CanvasContentView.prototype.initialLayout): (WI.CanvasContentView.prototype.attached): (WI.CanvasContentView.prototype.detached): (WI.CanvasContentView.prototype._populateCanvasElementButtonContextMenu): (WI.CanvasContentView.prototype._updateSize): Added. (WI.CanvasContentView.prototype._refreshPixelSize): Deleted. Now that `Canvas.requestNode` won't always work, we need a different way of getting the owner to find it's size. Additionally, since the owner might not be a `Element`, we can't leverage `WI.DOMNode.Event.AttributeModified` to listen for changes in the size. Instead, add instrumentation for when the size changes in C++ and notify the frontend as such (as well as adding logic to grab the `context.canvas.{width,height}` from the `Canvas.resolveCanvasContext` instead since that will always work). * Source/WebInspectorUI/UserInterface/Models/Geometry.js: (WI.Size.fromJSON): Drive-by: Add a helper to make some logic slightly easier. * Source/WebInspectorUI/UserInterface/Models/Recording.js: (WI.Recording.displayNameForRecordingType): (WI.Recording.prototype.is2D): Drive-by: Fix display name to be consistent with `WI.Canvas.displayNameForContextType`. Drive-by: Add missing method. * Source/WebCore/Sources.txt: * Source/WebCore/WebCore.xcodeproj/project.pbxproj: * Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js: * LayoutTests/inspector/canvas/resources/create-context-utilities.js: (destroyCanvases): (InspectorTest.CreateContextUtilities.addSimpleTestCase): * LayoutTests/inspector/canvas/resources/worker.js: Added. (createContext): (destroyContexts): * LayoutTests/inspector/canvas/create-context-2d.html: * LayoutTests/inspector/canvas/create-context-2d-expected.txt: * LayoutTests/inspector/canvas/create-context-bitmaprenderer.html: * LayoutTests/inspector/canvas/create-context-bitmaprenderer-expected.txt: * LayoutTests/inspector/canvas/create-context-webgl.html: * LayoutTests/inspector/canvas/create-context-webgl-expected.txt: * LayoutTests/inspector/canvas/create-context-webgl2.html: * LayoutTests/inspector/canvas/create-context-webgl2-expected.txt: Canonical link: https://commits.webkit.org/267488@main
WebKit · Aug 31, 2023 · b5959d7 · b5959d7
1 parent 0758590
commit b5959d7
Show file tree

Hide file tree

Showing 38 changed files with 862 additions and 353 deletions.
diff --git a/LayoutTests/inspector/canvas/create-context-2d-expected.txt b/LayoutTests/inspector/canvas/create-context-2d-expected.txt
@@ -29,6 +29,13 @@ PASS: Canvas context should be Offscreen2D.
 
 PASS: Removed canvas has expected ID.
 
+-- Running test case: Canvas.CreateContext2D.Worker
+PASS: Canvas context should be Offscreen2D.
+  0: getContext - [native code]
+  1: createContext - inspector/canvas/resources/worker.js:4:36
+  2: (anonymous function) - inspector/canvas/resources/worker.js:14:21
+
+
 -- Running test case: Canvas.CreateContext2D.CSSCanvas
 Create CSS canvas from -webkit-canvas(css-canvas).
 PASS: Canvas context should be 2D.

diff --git a/LayoutTests/inspector/canvas/create-context-2d.html b/LayoutTests/inspector/canvas/create-context-2d.html
@@ -5,6 +5,8 @@
 <script src="../../http/tests/inspector/resources/inspector-test.js"></script>
 <script src="resources/create-context-utilities.js"></script>
 <script>
+window.worker = new Worker("resources/worker.js");
+
 function test() {
     let suite = InspectorTest.CreateContextUtilities.initializeTestSuite("Canvas.CreateContext2D");
 
@@ -26,6 +28,13 @@
         contextType: WI.Canvas.ContextType.OffscreenCanvas2D,
     });
 
+    InspectorTest.CreateContextUtilities.addSimpleTestCase({
+        name: "Worker",
+        expression: `worker.postMessage({name: "createContext", args: ["2d"]})`,
+        contextType: WI.Canvas.ContextType.OffscreenCanvas2D,
+        skipDestroy: true,
+    });
+
     InspectorTest.CreateContextUtilities.addCSSCanvasTestCase(WI.Canvas.ContextType.Canvas2D);
 
     suite.runTestCasesAndFinish();

diff --git a/LayoutTests/inspector/canvas/create-context-bitmaprenderer-expected.txt b/LayoutTests/inspector/canvas/create-context-bitmaprenderer-expected.txt
@@ -21,3 +21,27 @@ PASS: Canvas context should be Bitmap Renderer.
 
 PASS: Removed canvas has expected ID.
 
+-- Running test case: Canvas.CreateContextBitmapRenderer.Offscreen
+PASS: Canvas context should be Bitmap Renderer.
+  0: getContext - [native code]
+  1: createOffscreenCanvas - inspector/canvas/resources/create-context-utilities.js:36:36
+  2: Global Code - [program code]
+
+PASS: Removed canvas has expected ID.
+
+-- Running test case: Canvas.CreateContextBitmapRenderer.Worker
+PASS: Canvas context should be Bitmap Renderer.
+  0: getContext - [native code]
+  1: createContext - inspector/canvas/resources/worker.js:4:36
+  2: (anonymous function) - inspector/canvas/resources/worker.js:14:21
+
+
+-- Running test case: Canvas.CreateContextBitmapRenderer.CSSCanvas
+Create CSS canvas from -webkit-canvas(css-canvas).
+PASS: Canvas context should be Bitmap Renderer.
+  0: getCSSCanvasContext - [native code]
+  1: createCSSCanvas - inspector/canvas/resources/create-context-utilities.js:22:47
+  2: Global Code - [program code]
+
+PASS: Canvas name should equal the identifier passed to -webkit-canvas.
+
diff --git a/LayoutTests/inspector/canvas/create-context-bitmaprenderer.html b/LayoutTests/inspector/canvas/create-context-bitmaprenderer.html
@@ -5,6 +5,8 @@
 <script src="../../http/tests/inspector/resources/inspector-test.js"></script>
 <script src="resources/create-context-utilities.js"></script>
 <script>
+window.worker = new Worker("resources/worker.js");
+
 function test() {
     let suite = InspectorTest.CreateContextUtilities.initializeTestSuite("Canvas.CreateContextBitmapRenderer");
 
@@ -20,6 +22,21 @@
         contextType: WI.Canvas.ContextType.BitmapRenderer,
     });
 
+    InspectorTest.CreateContextUtilities.addSimpleTestCase({
+        name: "Offscreen",
+        expression: `createOffscreenCanvas("bitmaprenderer")`,
+        contextType: WI.Canvas.ContextType.BitmapRenderer,
+    });
+
+    InspectorTest.CreateContextUtilities.addSimpleTestCase({
+        name: "Worker",
+        expression: `worker.postMessage({name: "createContext", args: ["bitmaprenderer"]})`,
+        contextType: WI.Canvas.ContextType.BitmapRenderer,
+        skipDestroy: true,
+    });
+
+    InspectorTest.CreateContextUtilities.addCSSCanvasTestCase(WI.Canvas.ContextType.BitmapRenderer);
+
     suite.runTestCasesAndFinish();
 }
 </script>

diff --git a/LayoutTests/inspector/canvas/create-context-webgl-expected.txt b/LayoutTests/inspector/canvas/create-context-webgl-expected.txt
@@ -21,6 +21,14 @@ PASS: Canvas context should be WebGL.
 
 PASS: Removed canvas has expected ID.
 
+-- Running test case: Canvas.CreateContextWebGL.Offscreen
+PASS: Canvas context should be WebGL.
+  0: getContext - [native code]
+  1: createOffscreenCanvas - inspector/canvas/resources/create-context-utilities.js:36:36
+  2: Global Code - [program code]
+
+PASS: Removed canvas has expected ID.
+
 -- Running test case: Canvas.CreateContextWebGL.CSSCanvas
 Create CSS canvas from -webkit-canvas(css-canvas).
 PASS: Canvas context should be WebGL.

diff --git a/LayoutTests/inspector/canvas/create-context-webgl.html b/LayoutTests/inspector/canvas/create-context-webgl.html
@@ -20,6 +20,12 @@
         contextType: WI.Canvas.ContextType.WebGL,
     });
 
+    InspectorTest.CreateContextUtilities.addSimpleTestCase({
+        name: "Offscreen",
+        expression: `createOffscreenCanvas("webgl")`,
+        contextType: WI.Canvas.ContextType.WebGL,
+    });
+
     InspectorTest.CreateContextUtilities.addCSSCanvasTestCase(WI.Canvas.ContextType.WebGL);
 
     suite.runTestCasesAndFinish();

diff --git a/LayoutTests/inspector/canvas/create-context-webgl2-expected.txt b/LayoutTests/inspector/canvas/create-context-webgl2-expected.txt
@@ -21,6 +21,14 @@ PASS: Canvas context should be WebGL2.
 
 PASS: Removed canvas has expected ID.
 
+-- Running test case: Canvas.CreateContextWebGL2.Offscreen
+PASS: Canvas context should be WebGL2.
+  0: getContext - [native code]
+  1: createOffscreenCanvas - inspector/canvas/resources/create-context-utilities.js:36:36
+  2: Global Code - [program code]
+
+PASS: Removed canvas has expected ID.
+
 -- Running test case: Canvas.CreateContextWebGL2.CSSCanvas
 Create CSS canvas from -webkit-canvas(css-canvas).
 PASS: Canvas context should be WebGL2.

diff --git a/LayoutTests/inspector/canvas/create-context-webgl2.html b/LayoutTests/inspector/canvas/create-context-webgl2.html
@@ -20,6 +20,12 @@
         contextType: WI.Canvas.ContextType.WebGL2,
     });
 
+    InspectorTest.CreateContextUtilities.addSimpleTestCase({
+        name: "Offscreen",
+        expression: `createOffscreenCanvas("webgl2")`,
+        contextType: WI.Canvas.ContextType.WebGL2,
+    });
+
     InspectorTest.CreateContextUtilities.addCSSCanvasTestCase(WI.Canvas.ContextType.WebGL2);
 
     suite.runTestCasesAndFinish();

diff --git a/LayoutTests/inspector/canvas/resources/create-context-utilities.js b/LayoutTests/inspector/canvas/resources/create-context-utilities.js
@@ -54,6 +54,8 @@ function destroyCanvases() {
 
     window.contexts = [];
 
+    window.worker?.postMessage({name: `destroyContexts`, args: []});
+
     // Force GC to make sure the canvas element is destroyed, otherwise the frontend
     // does not receive Canvas.canvasRemoved events.
     destroyCanvasesInterval = setInterval(() => { GCController.collect(); }, 0);
@@ -120,15 +122,14 @@ TestPage.registerInitializer(() => {
         return suite;
     };
 
-    InspectorTest.CreateContextUtilities.addSimpleTestCase = function({name, description, expression, contextType}) {
+    InspectorTest.CreateContextUtilities.addSimpleTestCase = function({name, description, expression, contextType, skipDestroy}) {
         suite.addTestCase({
             name: suite.name + "." + name,
             description,
             test(resolve, reject) {
                 awaitCanvasAdded(contextType)
                 .then((canvas) => {
-                    if (canvas.cssCanvasName) {
-                        InspectorTest.log("CSS canvas will not be destroyed");
+                    if (skipDestroy) {
                         resolve();
                         return;
                     }

diff --git a/LayoutTests/inspector/canvas/resources/worker.js b/LayoutTests/inspector/canvas/resources/worker.js
@@ -0,0 +1,16 @@
+globalThis.contexts = [];
+
+function createContext(contextType) {
+    let canvas = new OffscreenCanvas(10, 10);
+    let context = canvas.getContext(contextType);
+    globalThis.contexts.push(context);
+}
+
+function destroyContexts() {
+    globalThis.contexts = [];
+}
+
+addEventListener("message", (event) => {
+    let {name, args} = event.data;
+    globalThis[name](...args);
+});
diff --git a/Source/JavaScriptCore/inspector/protocol/Canvas.json b/Source/JavaScriptCore/inspector/protocol/Canvas.json
@@ -2,7 +2,7 @@
     "domain": "Canvas",
     "description": "Canvas domain allows tracking of canvases that have an associated graphics context. Tracks canvases in the DOM and CSS canvases created with -webkit-canvas.",
     "debuggableTypes": ["page", "web-page"],
-    "targetTypes": ["page"],
+    "targetTypes": ["page", "worker"],
     "types": [
         {
             "id": "CanvasId",
@@ -62,6 +62,8 @@
             "properties": [
                 { "name": "canvasId", "$ref": "CanvasId", "description": "Canvas identifier." },
                 { "name": "contextType", "$ref": "ContextType", "description": "The type of rendering context backing the canvas." },
+                { "name": "width", "type": "number", "description": "Width of the canvas in pixels." },
+                { "name": "height", "type": "number", "description": "Height of the canvas in pixels." },
                 { "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": "contextAttributes", "$ref": "ContextAttributes", "optional": true, "description": "Context attributes for rendering contexts." },
@@ -93,6 +95,7 @@
         {
             "name": "requestNode",
             "description": "Gets the NodeId for the canvas node with the given CanvasId.",
+            "targetTypes": ["page"],
             "parameters": [
                 { "name": "canvasId", "$ref": "CanvasId", "description": "Canvas identifier." }
             ],
@@ -113,6 +116,7 @@
         {
             "name": "requestClientNodes",
             "description": "Gets all <code>-webkit-canvas</code> nodes or active <code>HTMLCanvasElement</code> for a <code>WebGPUDevice</code>.",
+            "targetTypes": ["page"],
             "parameters": [
                 { "name": "canvasId", "$ref": "CanvasId" }
             ],
@@ -208,6 +212,14 @@
                 { "name": "canvasId", "$ref": "CanvasId", "description": "Removed canvas identifier." }
             ]
         },
+        {
+            "name": "canvasSizeChanged",
+            "parameters": [
+                { "name": "canvasId", "$ref": "CanvasId", "description": "Identifier of canvas that changed." },
+                { "name": "width", "type": "number", "description": "Width of the canvas in pixels." },
+                { "name": "height", "type": "number", "description": "Height of the canvas in pixels." }
+            ]
+        },
         {
             "name": "canvasMemoryChanged",
             "parameters": [
@@ -224,6 +236,7 @@
         },
         {
             "name": "clientNodesChanged",
+            "targetTypes": ["page"],
             "parameters": [
                 { "name": "canvasId", "$ref": "CanvasId", "description": "Identifier of canvas that changed." }
             ]

diff --git a/Source/JavaScriptCore/inspector/protocol/Recording.json b/Source/JavaScriptCore/inspector/protocol/Recording.json
@@ -2,7 +2,7 @@
     "domain": "Recording",
     "description": "General types used for recordings of actions performed in the inspected page.",
     "debuggableTypes": ["page", "web-page"],
-    "targetTypes": ["page"],
+    "targetTypes": ["page", "worker"],
     "version": 2,
     "types": [
         {

diff --git a/Source/WebCore/Sources.txt b/Source/WebCore/Sources.txt
@@ -1675,6 +1675,7 @@ inspector/agents/WebConsoleAgent.cpp
 inspector/agents/WebDebuggerAgent.cpp
 inspector/agents/WebHeapAgent.cpp
 inspector/agents/page/PageAuditAgent.cpp
+inspector/agents/page/PageCanvasAgent.cpp
 inspector/agents/page/PageConsoleAgent.cpp
 inspector/agents/page/PageDOMDebuggerAgent.cpp
 inspector/agents/page/PageDebuggerAgent.cpp
@@ -1683,6 +1684,7 @@ inspector/agents/page/PageNetworkAgent.cpp
 inspector/agents/page/PageRuntimeAgent.cpp
 inspector/agents/worker/ServiceWorkerAgent.cpp
 inspector/agents/worker/WorkerAuditAgent.cpp
+inspector/agents/worker/WorkerCanvasAgent.cpp
 inspector/agents/worker/WorkerConsoleAgent.cpp
 inspector/agents/worker/WorkerDOMDebuggerAgent.cpp
 inspector/agents/worker/WorkerDebuggerAgent.cpp

diff --git a/Source/WebCore/WebCore.xcodeproj/project.pbxproj b/Source/WebCore/WebCore.xcodeproj/project.pbxproj
@@ -3596,6 +3596,8 @@
 		950FED04285028940002DE4E /* JSApplePayPaymentTokenContext.h in Headers */ = {isa = PBXBuildFile; fileRef = 950FED03285028910002DE4E /* JSApplePayPaymentTokenContext.h */; };
 		950FED07285028AA0002DE4E /* JSApplePayRecurringPaymentRequest.h in Headers */ = {isa = PBXBuildFile; fileRef = 950FED06285028A70002DE4E /* JSApplePayRecurringPaymentRequest.h */; };
 		953BCEB225D6283D00A4A2A1 /* JSApplePayDetailsUpdateBase.h in Headers */ = {isa = PBXBuildFile; fileRef = 953BCEAF25D6283C00A4A2A1 /* JSApplePayDetailsUpdateBase.h */; };
+		953C6E6C2A0E05F100ACABC4 /* PageCanvasAgent.h in Headers */ = {isa = PBXBuildFile; fileRef = 953C6E6A2A0E05F100ACABC4 /* PageCanvasAgent.h */; };
+		953C6E702A0E060200ACABC4 /* WorkerCanvasAgent.h in Headers */ = {isa = PBXBuildFile; fileRef = 953C6E6E2A0E060200ACABC4 /* WorkerCanvasAgent.h */; };
 		9562EEDD25F18DE700334442 /* PaymentRequestUtilities.h in Headers */ = {isa = PBXBuildFile; fileRef = 9562EEDB25F18DE600334442 /* PaymentRequestUtilities.h */; };
 		95684D83265357F800026938 /* ApplePayCouponCodeDetails.h in Headers */ = {isa = PBXBuildFile; fileRef = 95684D81265357F700026938 /* ApplePayCouponCodeDetails.h */; };
 		95891BCF288F0B100056EDAC /* ApplePayFeature.h in Headers */ = {isa = PBXBuildFile; fileRef = 95891BCD288F0B0E0056EDAC /* ApplePayFeature.h */; settings = {ATTRIBUTES = (Private, ); }; };
@@ -14706,6 +14708,10 @@
 		950FED06285028A70002DE4E /* JSApplePayRecurringPaymentRequest.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = JSApplePayRecurringPaymentRequest.h; sourceTree = "<group>"; };
 		953BCEAF25D6283C00A4A2A1 /* JSApplePayDetailsUpdateBase.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = JSApplePayDetailsUpdateBase.h; sourceTree = "<group>"; };
 		953BCEB125D6283C00A4A2A1 /* JSApplePayDetailsUpdateBase.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = JSApplePayDetailsUpdateBase.cpp; sourceTree = "<group>"; };
+		953C6E6A2A0E05F100ACABC4 /* PageCanvasAgent.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = PageCanvasAgent.h; sourceTree = "<group>"; };
+		953C6E6B2A0E05F100ACABC4 /* PageCanvasAgent.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = PageCanvasAgent.cpp; sourceTree = "<group>"; };
+		953C6E6E2A0E060200ACABC4 /* WorkerCanvasAgent.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = WorkerCanvasAgent.h; sourceTree = "<group>"; };
+		953C6E6F2A0E060200ACABC4 /* WorkerCanvasAgent.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = WorkerCanvasAgent.cpp; sourceTree = "<group>"; };
 		9551958D25FA9E3000F58CF0 /* watchos-media-controls.css */ = {isa = PBXFileReference; lastKnownFileType = text.css; path = "watchos-media-controls.css"; sourceTree = "<group>"; };
 		9551958E25FA9E3000F58CF0 /* watchos-activity-indicator.css */ = {isa = PBXFileReference; lastKnownFileType = text.css; path = "watchos-activity-indicator.css"; sourceTree = "<group>"; };
 		9551958F25FA9E3100F58CF0 /* watchos-activity-indicator.js */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.javascript; path = "watchos-activity-indicator.js"; sourceTree = "<group>"; };
@@ -29773,6 +29779,8 @@
 			children = (
 				91278D5A21DEDAD500B57184 /* PageAuditAgent.cpp */,
 				91278D5C21DEDAD500B57184 /* PageAuditAgent.h */,
+				953C6E6B2A0E05F100ACABC4 /* PageCanvasAgent.cpp */,
+				953C6E6A2A0E05F100ACABC4 /* PageCanvasAgent.h */,
 				A5B81CC01FAA44B70037D1E6 /* PageConsoleAgent.cpp */,
 				A5B81CBB1FAA44B70037D1E6 /* PageConsoleAgent.h */,
 				A5B81CBD1FAA44B70037D1E6 /* PageDebuggerAgent.cpp */,
@@ -29796,6 +29804,8 @@
 				A581ED101FB288C800CED4EC /* ServiceWorkerAgent.h */,
 				91278D5F21DEDAEF00B57184 /* WorkerAuditAgent.cpp */,
 				91278D6021DEDAF000B57184 /* WorkerAuditAgent.h */,
+				953C6E6F2A0E060200ACABC4 /* WorkerCanvasAgent.cpp */,
+				953C6E6E2A0E060200ACABC4 /* WorkerCanvasAgent.h */,
 				A5B81CCB1FAA44DA0037D1E6 /* WorkerConsoleAgent.cpp */,
 				A5B81CCA1FAA44DA0037D1E6 /* WorkerConsoleAgent.h */,
 				A5B81CC81FAA44DA0037D1E6 /* WorkerDebuggerAgent.cpp */,
@@ -40166,6 +40176,7 @@
 				8326BF8E24D35C33001F8A85 /* OverSampleType.h in Headers */,
 				65A21468097A329100B9050A /* Page.h in Headers */,
 				91278D5E21DEDAD600B57184 /* PageAuditAgent.h in Headers */,
+				953C6E6C2A0E05F100ACABC4 /* PageCanvasAgent.h in Headers */,
 				95F45D27264DFBF100D0B8B8 /* PageColorSampler.h in Headers */,
 				CD5E5B5F1A15CE54000C609E /* PageConfiguration.h in Headers */,
 				A5B81CC21FAA44BC0037D1E6 /* PageConsoleAgent.h in Headers */,
@@ -42114,6 +42125,7 @@
 				91278D6221DEDAF000B57184 /* WorkerAuditAgent.h in Headers */,
 				51A24D19294CD2D700E43A29 /* WorkerBadgeProxy.h in Headers */,
 				41A7D3531F438D16008988DE /* WorkerCacheStorageConnection.h in Headers */,
+				953C6E702A0E060200ACABC4 /* WorkerCanvasAgent.h in Headers */,
 				A7A3D55128939156008D683D /* WorkerClient.h in Headers */,
 				A5B81CCD1FAA44DE0037D1E6 /* WorkerConsoleAgent.h in Headers */,
 				A55639D11C6F09E300806D8E /* WorkerConsoleClient.h in Headers */,

diff --git a/Source/WebCore/html/CanvasBase.cpp b/Source/WebCore/html/CanvasBase.cpp
@@ -251,6 +251,17 @@ bool CanvasBase::hasActiveInspectorCanvasCallTracer() const
     return context && context->hasActiveInspectorCanvasCallTracer();
 }
 
+void CanvasBase::setSize(const IntSize& size)
+{
+    if (size == m_size)
+        return;
+
+    m_size = size;
+
+    if (auto* context = renderingContext())
+        InspectorInstrumentation::didChangeCanvasSize(*context);
+}
+
 RefPtr<ImageBuffer> CanvasBase::setImageBuffer(RefPtr<ImageBuffer>&& buffer) const
 {
     RefPtr<ImageBuffer> returnBuffer;
@@ -260,14 +271,19 @@ RefPtr<ImageBuffer> CanvasBase::setImageBuffer(RefPtr<ImageBuffer>&& buffer) con
         returnBuffer = std::exchange(m_imageBuffer, WTFMove(buffer));
     }
 
-    if (m_imageBuffer && m_size != m_imageBuffer->truncatedLogicalSize())
+    auto* context = renderingContext();
+
+    if (m_imageBuffer && m_size != m_imageBuffer->truncatedLogicalSize()) {
         m_size = m_imageBuffer->truncatedLogicalSize();
 
+        if (context)
+            InspectorInstrumentation::didChangeCanvasSize(*context);
+    }
+
     size_t previousMemoryCost = m_imageBufferCost;
     m_imageBufferCost = memoryCost();
     s_activePixelMemory += m_imageBufferCost - previousMemoryCost;
 
-    auto* context = renderingContext();
     if (context && m_imageBuffer && previousMemoryCost != m_imageBufferCost)
         InspectorInstrumentation::didChangeCanvasMemory(*context);
 

diff --git a/Source/WebCore/html/CanvasBase.h b/Source/WebCore/html/CanvasBase.h
@@ -140,7 +140,7 @@ class CanvasBase {
 
     virtual ScriptExecutionContext* canvasBaseScriptExecutionContext() const = 0;
 
-    virtual void setSize(const IntSize& size) { m_size = size; }
+    virtual void setSize(const IntSize&);
 
     RefPtr<ImageBuffer> setImageBuffer(RefPtr<ImageBuffer>&&) const;
     virtual bool hasCreatedImageBuffer() const { return false; }

diff --git a/Source/WebCore/inspector/InspectorCanvas.cpp b/Source/WebCore/inspector/InspectorCanvas.cpp
@@ -896,9 +896,13 @@ Ref<Protocol::Canvas::Canvas> InspectorCanvas::buildObjectForCanvas(bool capture
         return Protocol::Canvas::ContextType::Canvas2D;
     }();
 
+    const auto& size = m_context->canvasBase().size();
+
     auto canvas = Protocol::Canvas::Canvas::create()
         .setCanvasId(m_identifier)
         .setContextType(contextType)
+        .setWidth(size.width())
+        .setHeight(size.height())
         .release();
 
     if (auto* node = canvasElement()) {