Skip to content

Add support for main thread OffscreenCanvas #129

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 21, 2019
Merged

Add support for main thread OffscreenCanvas #129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 14 additions & 3 deletions src/backend/spies/canvasSpy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}
}
}
}
48 changes: 29 additions & 19 deletions src/spector.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand All @@ -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") ||
Expand All @@ -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.;
Expand Down Expand Up @@ -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;
Expand All @@ -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 {

Expand All @@ -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) {
Expand All @@ -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,
});
}
Expand Down Expand Up @@ -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);
}
}

Expand Down Expand Up @@ -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,
Expand All @@ -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;
Expand Down