Merge pull request #129 from cdata/master

Add support for main thread OffscreenCanvas

Author: sebavan

src/backend/spies/canvasSpy.ts

@@ -2,10 +2,12 @@ import { Observable } from "../../shared/utils/observable";
 import { OriginFunctionHelper } from "../utils/originFunctionHelper";
 import { IContextInformation } from "../types/contextInformation";
 
+type CanvasConstructor = (new() => HTMLCanvasElement) | (new(...args: any[]) => OffscreenCanvas);
+
 export class CanvasSpy {
     public readonly onContextRequested: Observable<IContextInformation>;
 
-    constructor(private readonly canvas?: HTMLCanvasElement) {
+    constructor(private readonly canvas?: HTMLCanvasElement | OffscreenCanvas) {
         this.onContextRequested = new Observable<IContextInformation>();
         this.init();
     }
@@ -15,10 +17,14 @@ export class CanvasSpy {
         // tslint:disable-next-line
         const self = this;
 
-        const getContextSpied = function (this: HTMLCanvasElement) {
+        const getContextSpied = function (this: HTMLCanvasElement | OffscreenCanvas) {
+            const OriginalCanvasConstructor: CanvasConstructor = this instanceof HTMLCanvasElement ?
+                HTMLCanvasElement :
+                OffscreenCanvas;
+
             const context = (self.canvas) ?
                 OriginFunctionHelper.executeOriginFunction(this, "getContext", arguments) :
-                OriginFunctionHelper.executePrototypeOriginFunction(this, HTMLCanvasElement, "getContext", arguments);
+                OriginFunctionHelper.executePrototypeOriginFunction(this, OriginalCanvasConstructor, "getContext", arguments);
 
             if (arguments.length > 0 && arguments[0] === "2d") {
                 return context;
@@ -47,6 +53,11 @@ export class CanvasSpy {
         else {
             OriginFunctionHelper.storePrototypeOriginFunction(HTMLCanvasElement, "getContext");
             (HTMLCanvasElement as any).prototype.getContext = getContextSpied;
+
+            if (typeof OffscreenCanvas !== "undefined") {
+                OriginFunctionHelper.storePrototypeOriginFunction(OffscreenCanvas, "getContext");
+                (OffscreenCanvas as any).prototype.getContext = getContextSpied;
+            }
         }
     }
 }

src/spector.ts

@@ -13,7 +13,7 @@ import { CaptureMenu } from "./embeddedFrontend/captureMenu/captureMenu";
 import { ResultView } from "./embeddedFrontend/resultView/resultView";
 
 export interface IAvailableContext {
-    readonly canvas: HTMLCanvasElement;
+    readonly canvas: HTMLCanvasElement | OffscreenCanvas;
     readonly contextSpy: ContextSpy;
 }
 
@@ -22,8 +22,12 @@ export const EmbeddedFrontend = {
     ResultView,
 };
 
+interface IAnnotatedOffscreenCanvas extends OffscreenCanvas {
+    __spector_context_type?: string;
+}
+
 export class Spector {
-    public static getFirstAvailable3dContext(canvas: HTMLCanvasElement): WebGLRenderingContexts {
+    public static getFirstAvailable3dContext(canvas: HTMLCanvasElement | OffscreenCanvas): WebGLRenderingContexts {
         // Custom detection to run in the extension.
         return this.tryGetContextFromHelperField(canvas) ||
             this.tryGetContextFromCanvas(canvas, "webgl") ||
@@ -32,19 +36,25 @@ export class Spector {
             this.tryGetContextFromCanvas(canvas, "experimental-webgl2");
     }
 
-    private static tryGetContextFromHelperField(canvas: HTMLCanvasElement): WebGLRenderingContexts {
-        const type = canvas.getAttribute("__spector_context_type");
+    private static tryGetContextFromHelperField(canvas: HTMLCanvasElement | OffscreenCanvas): WebGLRenderingContexts {
+        const type: string|void = canvas instanceof HTMLCanvasElement ?
+            canvas.getAttribute("__spector_context_type") :
+            (canvas as IAnnotatedOffscreenCanvas).__spector_context_type;
+
         if (type) {
             return this.tryGetContextFromCanvas(canvas, type);
         }
 
         return undefined;
     }
 
-    private static tryGetContextFromCanvas(canvas: HTMLCanvasElement, type: string): WebGLRenderingContexts {
+    private static tryGetContextFromCanvas(canvas: HTMLCanvasElement | OffscreenCanvas, type: string): WebGLRenderingContexts {
         let context: WebGLRenderingContexts;
         try {
-            context = canvas.getContext(type) as WebGLRenderingContexts;
+            // Cast canvas to any because lib.dom.d.ts types are not suitably
+            // general to allow for custom canvas context types that are
+            // potentially specified by __spector_context_type:
+            context = (canvas as any).getContext(type) as WebGLRenderingContexts;
         }
         catch (e) {
             // Nothing to do here, canvas has not been found.;
@@ -208,7 +218,7 @@ export class Spector {
         this.canvasSpy.onContextRequested.add(this.spyContext, this);
     }
 
-    public spyCanvas(canvas: HTMLCanvasElement): void {
+    public spyCanvas(canvas: HTMLCanvasElement | OffscreenCanvas): void {
         if (this.canvasSpy) {
             this.onErrorInternal("Already spying canvas.");
             return;
@@ -222,7 +232,7 @@ export class Spector {
         return this.getAvailableContexts();
     }
 
-    public captureCanvas(canvas: HTMLCanvasElement,
+    public captureCanvas(canvas: HTMLCanvasElement | OffscreenCanvas,
         commandCount = 0,
         quickCapture: boolean = false): void {
 
@@ -245,7 +255,7 @@ export class Spector {
         commandCount = 0,
         quickCapture: boolean = false): void {
 
-        let contextSpy = this.getAvailableContextSpyByCanvas(context.canvas as HTMLCanvasElement);
+        let contextSpy = this.getAvailableContextSpyByCanvas(context.canvas as HTMLCanvasElement | OffscreenCanvas);
 
         if (!contextSpy) {
             if ((context as WebGL2RenderingContext).getIndexedParameter) {
@@ -266,7 +276,7 @@ export class Spector {
             contextSpy.onMaxCommand.add(this.stopCapture, this);
 
             this.contexts.push({
-                canvas: contextSpy.context.canvas as HTMLCanvasElement,
+                canvas: contextSpy.context.canvas as HTMLCanvasElement | OffscreenCanvas,
                 contextSpy,
             });
         }
@@ -314,26 +324,26 @@ export class Spector {
         }
     }
 
-    public captureNextFrame(obj: HTMLCanvasElement | WebGLRenderingContexts,
+    public captureNextFrame(obj: HTMLCanvasElement | OffscreenCanvas | WebGLRenderingContexts,
         quickCapture: boolean = false): void {
 
-        if (obj instanceof HTMLCanvasElement) {
+        if (obj instanceof HTMLCanvasElement || (self.OffscreenCanvas && obj instanceof OffscreenCanvas)) {
             this.captureCanvas(obj, 0, quickCapture);
         }
         else {
-            this.captureContext(obj, 0, quickCapture);
+            this.captureContext(obj as WebGLRenderingContexts, 0, quickCapture);
         }
     }
 
-    public startCapture(obj: HTMLCanvasElement | WebGLRenderingContexts,
+    public startCapture(obj: HTMLCanvasElement | OffscreenCanvas | WebGLRenderingContexts,
         commandCount: number,
         quickCapture: boolean = false): void {
 
-        if (obj instanceof HTMLCanvasElement) {
+        if (obj instanceof HTMLCanvasElement || (self.OffscreenCanvas && obj instanceof OffscreenCanvas)) {
             this.captureCanvas(obj, commandCount, quickCapture);
         }
         else {
-            this.captureContext(obj, commandCount, quickCapture);
+            this.captureContext(obj as WebGLRenderingContexts, commandCount, quickCapture);
         }
     }
 
@@ -397,7 +407,7 @@ export class Spector {
     }
 
     private spyContext(contextInformation: IContextInformation) {
-        let contextSpy = this.getAvailableContextSpyByCanvas(contextInformation.context.canvas as HTMLCanvasElement);
+        let contextSpy = this.getAvailableContextSpyByCanvas(contextInformation.context.canvas as HTMLCanvasElement | OffscreenCanvas);
         if (!contextSpy) {
             contextSpy = new ContextSpy({
                 context: contextInformation.context,
@@ -408,15 +418,15 @@ export class Spector {
             contextSpy.onMaxCommand.add(this.stopCapture, this);
 
             this.contexts.push({
-                canvas: contextSpy.context.canvas as HTMLCanvasElement,
+                canvas: contextSpy.context.canvas as HTMLCanvasElement | OffscreenCanvas,
                 contextSpy,
             });
         }
 
         contextSpy.spy();
     }
 
-    private getAvailableContextSpyByCanvas(canvas: HTMLCanvasElement): ContextSpy {
+    private getAvailableContextSpyByCanvas(canvas: HTMLCanvasElement | OffscreenCanvas): ContextSpy {
         for (const availableContext of this.contexts) {
             if (availableContext.canvas === canvas) {
                 return availableContext.contextSpy;