The Tor Browser: comparison toolkit/devtools/server/actors/canvas.js

comparison: toolkit/devtools/server/actors/canvas.js

toolkit/devtools/server/actors/canvas.js

branch: TOR_BUG_3246
changeset 7: 129ffea94266

equal deleted inserted replaced

--1:000000000000
+:3a7f5050aa01
+/* This Source Code Form is subject to the terms of the Mozilla Public
+* License, v. 2.0. If a copy of the MPL was not distributed with this
+* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+const {Cc, Ci, Cu, Cr} = require("chrome");
+const events = require("sdk/event/core");
+const {Promise: promise} = Cu.import("resource://gre/modules/Promise.jsm", {});
+const protocol = require("devtools/server/protocol");
+const {CallWatcherActor, CallWatcherFront} = require("devtools/server/actors/call-watcher");
+const DevToolsUtils = require("devtools/toolkit/DevToolsUtils.js");
+const {on, once, off, emit} = events;
+const {method, custom, Arg, Option, RetVal} = protocol;
+const CANVAS_CONTEXTS = [
+"CanvasRenderingContext2D",
+"WebGLRenderingContext"
+];
+const ANIMATION_GENERATORS = [
+"requestAnimationFrame",
+"mozRequestAnimationFrame"
+];
+const DRAW_CALLS = [
+// 2D canvas
+"fill",
+"stroke",
+"clearRect",
+"fillRect",
+"strokeRect",
+"fillText",
+"strokeText",
+"drawImage",
+// WebGL
+"clear",
+"drawArrays",
+"drawElements",
+"finish",
+"flush"
+];
+const INTERESTING_CALLS = [
+// 2D canvas
+"save",
+"restore",
+// WebGL
+"useProgram"
+];
+exports.register = function(handle) {
+handle.addTabActor(CanvasActor, "canvasActor");
+};
+exports.unregister = function(handle) {
+handle.removeTabActor(CanvasActor);
+};
+/**
+* Type representing an Uint32Array buffer, serialized fast(er).
+*
+* XXX: It would be nice if on local connections (only), we could just *give*
+* the buffer directly to the front, instead of going through all this
+* serialization redundancy.
+*/
+protocol.types.addType("uint32-array", {
+write: (v) => "[" + Array.join(v, ",") + "]",
+read: (v) => new Uint32Array(JSON.parse(v))
+});
+/**
+* Type describing a thumbnail or screenshot in a recorded animation frame.
+*/
+protocol.types.addDictType("snapshot-image", {
+index: "number",
+width: "number",
+height: "number",
+flipped: "boolean",
+pixels: "uint32-array"
+});
+/**
+* Type describing an overview of a recorded animation frame.
+*/
+protocol.types.addDictType("snapshot-overview", {
+calls: "array:function-call",
+thumbnails: "array:snapshot-image",
+screenshot: "snapshot-image"
+});
+/**
+* This actor represents a recorded animation frame snapshot, along with
+* all the corresponding canvas' context methods invoked in that frame,
+* thumbnails for each draw call and a screenshot of the end result.
+*/
+let FrameSnapshotActor = protocol.ActorClass({
+typeName: "frame-snapshot",
+/**
+* Creates the frame snapshot call actor.
+*
+* @param DebuggerServerConnection conn
+*        The server connection.
+* @param HTMLCanvasElement canvas
+*        A reference to the content canvas.
+* @param array calls
+*        An array of "function-call" actor instances.
+* @param object screenshot
+*        A single "snapshot-image" type instance.
+*/
+initialize: function(conn, { canvas, calls, screenshot }) {
+protocol.Actor.prototype.initialize.call(this, conn);
+this._contentCanvas = canvas;
+this._functionCalls = calls;
+this._lastDrawCallScreenshot = screenshot;
+},
+/**
+* Gets as much data about this snapshot without computing anything costly.
+*/
+getOverview: method(function() {
+return {
+calls: this._functionCalls,
+thumbnails: this._functionCalls.map(e => e._thumbnail).filter(e => !!e),
+screenshot: this._lastDrawCallScreenshot
+};
+}, {
+response: { overview: RetVal("snapshot-overview") }
+}),
+/**
+* Gets a screenshot of the canvas's contents after the specified
+* function was called.
+*/
+generateScreenshotFor: method(function(functionCall) {
+let caller = functionCall.details.caller;
+let global = functionCall.meta.global;
+let canvas = this._contentCanvas;
+let calls = this._functionCalls;
+let index = calls.indexOf(functionCall);
+// To get a screenshot, replay all the steps necessary to render the frame,
+// by invoking the context calls up to and including the specified one.
+// This will be done in a custom framebuffer in case of a WebGL context.
+let { replayContext, lastDrawCallIndex } = ContextUtils.replayAnimationFrame({
+contextType: global,
+canvas: canvas,
+calls: calls,
+first: 0,
+last: index
+});
+// To keep things fast, generate an image that's relatively small.
+let dimensions = Math.min(CanvasFront.SCREENSHOT_HEIGHT_MAX, canvas.height);
+let screenshot;
+// Depending on the canvas' context, generating a screenshot is done
+// in different ways. In case of the WebGL context, we also need to reset
+// the framebuffer binding to the default value.
+if (global == CallWatcherFront.CANVAS_WEBGL_CONTEXT) {
+screenshot = ContextUtils.getPixelsForWebGL(replayContext);
+replayContext.bindFramebuffer(replayContext.FRAMEBUFFER, null);
+screenshot.flipped = true;
+}
+// In case of 2D contexts, no additional special treatment is necessary.
+else if (global == CallWatcherFront.CANVAS_2D_CONTEXT) {
+screenshot = ContextUtils.getPixelsFor2D(replayContext);
+screenshot.flipped = false;
+}
+screenshot.index = lastDrawCallIndex;
+return screenshot;
+}, {
+request: { call: Arg(0, "function-call") },
+response: { screenshot: RetVal("snapshot-image") }
+})
+});
+/**
+* The corresponding Front object for the FrameSnapshotActor.
+*/
+let FrameSnapshotFront = protocol.FrontClass(FrameSnapshotActor, {
+initialize: function(client, form) {
+protocol.Front.prototype.initialize.call(this, client, form);
+this._lastDrawCallScreenshot = null;
+this._cachedScreenshots = new WeakMap();
+},
+/**
+* This implementation caches the last draw call screenshot to optimize
+* frontend requests to `generateScreenshotFor`.
+*/
+getOverview: custom(function() {
+return this._getOverview().then(data => {
+this._lastDrawCallScreenshot = data.screenshot;
+return data;
+});
+}, {
+impl: "_getOverview"
+}),
+/**
+* This implementation saves a roundtrip to the backend if the screenshot
+* was already generated and retrieved once.
+*/
+generateScreenshotFor: custom(function(functionCall) {
+if (CanvasFront.ANIMATION_GENERATORS.has(functionCall.name)) {
+return promise.resolve(this._lastDrawCallScreenshot);
+}
+let cachedScreenshot = this._cachedScreenshots.get(functionCall);
+if (cachedScreenshot) {
+return cachedScreenshot;
+}
+let screenshot = this._generateScreenshotFor(functionCall);
+this._cachedScreenshots.set(functionCall, screenshot);
+return screenshot;
+}, {
+impl: "_generateScreenshotFor"
+})
+});
+/**
+* This Canvas Actor handles simple instrumentation of all the methods
+* of a 2D or WebGL context, to provide information regarding all the calls
+* made when drawing frame inside an animation loop.
+*/
+let CanvasActor = exports.CanvasActor = protocol.ActorClass({
+typeName: "canvas",
+initialize: function(conn, tabActor) {
+protocol.Actor.prototype.initialize.call(this, conn);
+this.tabActor = tabActor;
+this._onContentFunctionCall = this._onContentFunctionCall.bind(this);
+},
+destroy: function(conn) {
+protocol.Actor.prototype.destroy.call(this, conn);
+this.finalize();
+},
+/**
+* Starts listening for function calls.
+*/
+setup: method(function({ reload }) {
+if (this._initialized) {
+return;
+}
+this._initialized = true;
+this._callWatcher = new CallWatcherActor(this.conn, this.tabActor);
+this._callWatcher.onCall = this._onContentFunctionCall;
+this._callWatcher.setup({
+tracedGlobals: CANVAS_CONTEXTS,
+tracedFunctions: ANIMATION_GENERATORS,
+performReload: reload
+});
+}, {
+request: { reload: Option(0, "boolean") },
+oneway: true
+}),
+/**
+* Stops listening for function calls.
+*/
+finalize: method(function() {
+if (!this._initialized) {
+return;
+}
+this._initialized = false;
+this._callWatcher.finalize();
+this._callWatcher = null;
+}, {
+oneway: true
+}),
+/**
+* Returns whether this actor has been set up.
+*/
+isInitialized: method(function() {
+return !!this._initialized;
+}, {
+response: { initialized: RetVal("boolean") }
+}),
+/**
+* Records a snapshot of all the calls made during the next animation frame.
+* The animation should be implemented via the de-facto requestAnimationFrame
+* utility, not inside a `setInterval` or recursive `setTimeout`.
+*
+* XXX: Currently only supporting requestAnimationFrame. When this isn't used,
+* it'd be a good idea to display a huge red flashing banner telling people to
+* STOP USING `setInterval` OR `setTimeout` FOR ANIMATION. Bug 978948.
+*/
+recordAnimationFrame: method(function() {
+if (this._callWatcher.isRecording()) {
+return this._currentAnimationFrameSnapshot.promise;
+}
+this._callWatcher.eraseRecording();
+this._callWatcher.resumeRecording();
+let deferred = this._currentAnimationFrameSnapshot = promise.defer();
+return deferred.promise;
+}, {
+response: { snapshot: RetVal("frame-snapshot") }
+}),
+/**
+* Invoked whenever an instrumented function is called, be it on a
+* 2d or WebGL context, or an animation generator like requestAnimationFrame.
+*/
+_onContentFunctionCall: function(functionCall) {
+let { window, name, args } = functionCall.details;
+// The function call arguments are required to replay animation frames,
+// in order to generate screenshots. However, simply storing references to
+// every kind of object is a bad idea, since their properties may change.
+// Consider transformation matrices for example, which are typically
+// Float32Arrays whose values can easily change across context calls.
+// They need to be cloned.
+inplaceShallowCloneArrays(args, window);
+if (CanvasFront.ANIMATION_GENERATORS.has(name)) {
+this._handleAnimationFrame(functionCall);
+return;
+}
+if (CanvasFront.DRAW_CALLS.has(name) && this._animationStarted) {
+this._handleDrawCall(functionCall);
+return;
+}
+},
+/**
+* Handle animations generated using requestAnimationFrame.
+*/
+_handleAnimationFrame: function(functionCall) {
+if (!this._animationStarted) {
+this._handleAnimationFrameBegin();
+} else {
+this._handleAnimationFrameEnd(functionCall);
+}
+},
+/**
+* Called whenever an animation frame rendering begins.
+*/
+_handleAnimationFrameBegin: function() {
+this._callWatcher.eraseRecording();
+this._animationStarted = true;
+},
+/**
+* Called whenever an animation frame rendering ends.
+*/
+_handleAnimationFrameEnd: function() {
+// Get a hold of all the function calls made during this animation frame.
+// Since only one snapshot can be recorded at a time, erase all the
+// previously recorded calls.
+let functionCalls = this._callWatcher.pauseRecording();
+this._callWatcher.eraseRecording();
+// Since the animation frame finished, get a hold of the (already retrieved)
+// canvas pixels to conveniently create a screenshot of the final rendering.
+let index = this._lastDrawCallIndex;
+let width = this._lastContentCanvasWidth;
+let height = this._lastContentCanvasHeight;
+let flipped = this._lastThumbnailFlipped;
+let pixels = ContextUtils.getPixelStorage()["32bit"];
+let lastDrawCallScreenshot = {
+index: index,
+width: width,
+height: height,
+flipped: flipped,
+pixels: pixels.subarray(0, width * height)
+};
+// Wrap the function calls and screenshot in a FrameSnapshotActor instance,
+// which will resolve the promise returned by `recordAnimationFrame`.
+let frameSnapshot = new FrameSnapshotActor(this.conn, {
+canvas: this._lastDrawCallCanvas,
+calls: functionCalls,
+screenshot: lastDrawCallScreenshot
+});
+this._currentAnimationFrameSnapshot.resolve(frameSnapshot);
+this._currentAnimationFrameSnapshot = null;
+this._animationStarted = false;
+},
+/**
+* Invoked whenever a draw call is detected in the animation frame which is
+* currently being recorded.
+*/
+_handleDrawCall: function(functionCall) {
+let functionCalls = this._callWatcher.pauseRecording();
+let caller = functionCall.details.caller;
+let global = functionCall.meta.global;
+let contentCanvas = this._lastDrawCallCanvas = caller.canvas;
+let index = this._lastDrawCallIndex = functionCalls.indexOf(functionCall);
+let w = this._lastContentCanvasWidth = contentCanvas.width;
+let h = this._lastContentCanvasHeight = contentCanvas.height;
+// To keep things fast, generate images of small and fixed dimensions.
+let dimensions = CanvasFront.THUMBNAIL_HEIGHT;
+let thumbnail;
+// Create a thumbnail on every draw call on the canvas context, to augment
+// the respective function call actor with this additional data.
+if (global == CallWatcherFront.CANVAS_WEBGL_CONTEXT) {
+// Check if drawing to a custom framebuffer (when rendering to texture).
+// Don't create a thumbnail in this particular case.
+let framebufferBinding = caller.getParameter(caller.FRAMEBUFFER_BINDING);
+if (framebufferBinding == null) {
+thumbnail = ContextUtils.getPixelsForWebGL(caller, 0, 0, w, h, dimensions);
+thumbnail.flipped = this._lastThumbnailFlipped = true;
+thumbnail.index = index;
+}
+} else if (global == CallWatcherFront.CANVAS_2D_CONTEXT) {
+thumbnail = ContextUtils.getPixelsFor2D(caller, 0, 0, w, h, dimensions);
+thumbnail.flipped = this._lastThumbnailFlipped = false;
+thumbnail.index = index;
+}
+functionCall._thumbnail = thumbnail;
+this._callWatcher.resumeRecording();
+}
+});
+/**
+* A collection of methods for manipulating canvas contexts.
+*/
+let ContextUtils = {
+/**
+* WebGL contexts are sensitive to how they're queried. Use this function
+* to make sure the right context is always retrieved, if available.
+*
+* @param HTMLCanvasElement canvas
+*        The canvas element for which to get a WebGL context.
+* @param WebGLRenderingContext gl
+*        The queried WebGL context, or null if unavailable.
+*/
+getWebGLContext: function(canvas) {
+return canvas.getContext("webgl") ||
+canvas.getContext("experimental-webgl");
+},
+/**
+* Gets a hold of the rendered pixels in the most efficient way possible for
+* a canvas with a WebGL context.
+*
+* @param WebGLRenderingContext gl
+*        The WebGL context to get a screenshot from.
+* @param number srcX [optional]
+*        The first left pixel that is read from the framebuffer.
+* @param number srcY [optional]
+*        The first top pixel that is read from the framebuffer.
+* @param number srcWidth [optional]
+*        The number of pixels to read on the X axis.
+* @param number srcHeight [optional]
+*        The number of pixels to read on the Y axis.
+* @param number dstHeight [optional]
+*        The desired generated screenshot height.
+* @return object
+*         An objet containing the screenshot's width, height and pixel data.
+*/
+getPixelsForWebGL: function(gl,
+srcX = 0, srcY = 0,
+srcWidth = gl.canvas.width,
+srcHeight = gl.canvas.height,
+dstHeight = srcHeight)
+{
+let contentPixels = ContextUtils.getPixelStorage(srcWidth, srcHeight);
+let { "8bit": charView, "32bit": intView } = contentPixels;
+gl.readPixels(srcX, srcY, srcWidth, srcHeight, gl.RGBA, gl.UNSIGNED_BYTE, charView);
+return this.resizePixels(intView, srcWidth, srcHeight, dstHeight);
+},
+/**
+* Gets a hold of the rendered pixels in the most efficient way possible for
+* a canvas with a 2D context.
+*
+* @param CanvasRenderingContext2D ctx
+*        The 2D context to get a screenshot from.
+* @param number srcX [optional]
+*        The first left pixel that is read from the canvas.
+* @param number srcY [optional]
+*        The first top pixel that is read from the canvas.
+* @param number srcWidth [optional]
+*        The number of pixels to read on the X axis.
+* @param number srcHeight [optional]
+*        The number of pixels to read on the Y axis.
+* @param number dstHeight [optional]
+*        The desired generated screenshot height.
+* @return object
+*         An objet containing the screenshot's width, height and pixel data.
+*/
+getPixelsFor2D: function(ctx,
+srcX = 0, srcY = 0,
+srcWidth = ctx.canvas.width,
+srcHeight = ctx.canvas.height,
+dstHeight = srcHeight)
+{
+let { data } = ctx.getImageData(srcX, srcY, srcWidth, srcHeight);
+let { "32bit": intView } = ContextUtils.usePixelStorage(data.buffer);
+return this.resizePixels(intView, srcWidth, srcHeight, dstHeight);
+},
+/**
+* Resizes the provided pixels to fit inside a rectangle with the specified
+* height and the same aspect ratio as the source.
+*
+* @param Uint32Array srcPixels
+*        The source pixel data, assuming 32bit/pixel and 4 color components.
+* @param number srcWidth
+*        The source pixel data width.
+* @param number srcHeight
+*        The source pixel data height.
+* @param number dstHeight [optional]
+*        The desired resized pixel data height.
+* @return object
+*         An objet containing the resized pixels width, height and data.
+*/
+resizePixels: function(srcPixels, srcWidth, srcHeight, dstHeight) {
+let screenshotRatio = dstHeight / srcHeight;
+let dstWidth = Math.floor(srcWidth * screenshotRatio);
+// Use a plain array instead of a Uint32Array to make serializing faster.
+let dstPixels = new Array(dstWidth * dstHeight);
+// If the resized image ends up being completely transparent, returning
+// an empty array will skip some redundant serialization cycles.
+let isTransparent = true;
+for (let dstX = 0; dstX < dstWidth; dstX++) {
+for (let dstY = 0; dstY < dstHeight; dstY++) {
+let srcX = Math.floor(dstX / screenshotRatio);
+let srcY = Math.floor(dstY / screenshotRatio);
+let cPos = srcX + srcWidth * srcY;
+let dPos = dstX + dstWidth * dstY;
+let color = dstPixels[dPos] = srcPixels[cPos];
+if (color) {
+isTransparent = false;
+}
+}
+}
+return {
+width: dstWidth,
+height: dstHeight,
+pixels: isTransparent ? [] : dstPixels
+};
+},
+/**
+* Invokes a series of canvas context calls, to "replay" an animation frame
+* and generate a screenshot.
+*
+* In case of a WebGL context, an offscreen framebuffer is created for
+* the respective canvas, and the rendering will be performed into it.
+* This is necessary because some state (like shaders, textures etc.) can't
+* be shared between two different WebGL contexts.
+* Hopefully, once SharedResources are a thing this won't be necessary:
+* http://www.khronos.org/webgl/wiki/SharedResouces
+*
+* In case of a 2D context, a new canvas is created, since there's no
+* intrinsic state that can't be easily duplicated.
+*
+* @param number contexType
+*        The type of context to use. See the CallWatcherFront scope types.
+* @param HTMLCanvasElement canvas
+*        The canvas element which is the source of all context calls.
+* @param array calls
+*        An array of function call actors.
+* @param number first
+*        The first function call to start from.
+* @param number last
+*        The last (inclusive) function call to end at.
+* @return object
+*         The context on which the specified calls were invoked and the
+*         last registered draw call's index.
+*/
+replayAnimationFrame: function({ contextType, canvas, calls, first, last }) {
+let w = canvas.width;
+let h = canvas.height;
+let replayCanvas;
+let replayContext;
+let customFramebuffer;
+let lastDrawCallIndex = -1;
+// In case of WebGL contexts, rendering will be done offscreen, in a
+// custom framebuffer, but on the provided canvas context.
+if (contextType == CallWatcherFront.CANVAS_WEBGL_CONTEXT) {
+replayCanvas = canvas;
+replayContext = this.getWebGLContext(replayCanvas);
+customFramebuffer = this.createBoundFramebuffer(replayContext, w, h);
+}
+// In case of 2D contexts, draw everything on a separate canvas context.
+else if (contextType == CallWatcherFront.CANVAS_2D_CONTEXT) {
+let contentDocument = canvas.ownerDocument;
+replayCanvas = contentDocument.createElement("canvas");
+replayCanvas.width = w;
+replayCanvas.height = h;
+replayContext = replayCanvas.getContext("2d");
+replayContext.clearRect(0, 0, w, h);
+}
+// Replay all the context calls up to and including the specified one.
+for (let i = first; i <= last; i++) {
+let { type, name, args } = calls[i].details;
+// Prevent WebGL context calls that try to reset the framebuffer binding
+// to the default value, since we want to perform the rendering offscreen.
+if (name == "bindFramebuffer" && args[1] == null) {
+replayContext.bindFramebuffer(replayContext.FRAMEBUFFER, customFramebuffer);
+} else {
+if (type == CallWatcherFront.METHOD_FUNCTION) {
+replayContext[name].apply(replayContext, args);
+} else if (type == CallWatcherFront.SETTER_FUNCTION) {
+replayContext[name] = args;
+} else {
+// Ignore getter calls.
+}
+if (CanvasFront.DRAW_CALLS.has(name)) {
+lastDrawCallIndex = i;
+}
+}
+}
+return {
+replayContext: replayContext,
+lastDrawCallIndex: lastDrawCallIndex
+};
+},
+/**
+* Gets an object containing a buffer large enough to hold width * height
+* pixels, assuming 32bit/pixel and 4 color components.
+*
+* This method avoids allocating memory and tries to reuse a common buffer
+* as much as possible.
+*
+* @param number w
+*        The desired pixel array storage width.
+* @param number h
+*        The desired pixel array storage height.
+* @return object
+*         The requested pixel array buffer.
+*/
+getPixelStorage: function(w = 0, h = 0) {
+let storage = this._currentPixelStorage;
+if (storage && storage["32bit"].length >= w * h) {
+return storage;
+}
+return this.usePixelStorage(new ArrayBuffer(w * h * 4));
+},
+/**
+* Creates and saves the array buffer views used by `getPixelStorage`.
+*
+* @param ArrayBuffer buffer
+*        The raw buffer used as storage for various array buffer views.
+*/
+usePixelStorage: function(buffer) {
+let array8bit = new Uint8Array(buffer);
+let array32bit = new Uint32Array(buffer);
+return this._currentPixelStorage = {
+"8bit": array8bit,
+"32bit": array32bit
+};
+},
+/**
+* Creates a framebuffer of the specified dimensions for a WebGL context,
+* assuming a RGBA color buffer, a depth buffer and no stencil buffer.
+*
+* @param WebGLRenderingContext gl
+*        The WebGL context to create and bind a framebuffer for.
+* @param number width
+*        The desired width of the renderbuffers.
+* @param number height
+*        The desired height of the renderbuffers.
+* @return WebGLFramebuffer
+*         The generated framebuffer object.
+*/
+createBoundFramebuffer: function(gl, width, height) {
+let framebuffer = gl.createFramebuffer();
+gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+// Use a texture as the color rendebuffer attachment, since consumenrs of
+// this function will most likely want to read the rendered pixels back.
+let colorBuffer = gl.createTexture();
+gl.bindTexture(gl.TEXTURE_2D, colorBuffer);
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+gl.generateMipmap(gl.TEXTURE_2D);
+gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+let depthBuffer = gl.createRenderbuffer();
+gl.bindRenderbuffer(gl.RENDERBUFFER, depthBuffer);
+gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, width, height);
+gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, colorBuffer, 0);
+gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthBuffer);
+gl.bindTexture(gl.TEXTURE_2D, null);
+gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+return framebuffer;
+}
+};
+/**
+* The corresponding Front object for the CanvasActor.
+*/
+let CanvasFront = exports.CanvasFront = protocol.FrontClass(CanvasActor, {
+initialize: function(client, { canvasActor }) {
+protocol.Front.prototype.initialize.call(this, client, { actor: canvasActor });
+client.addActorPool(this);
+this.manage(this);
+}
+});
+/**
+* Constants.
+*/
+CanvasFront.CANVAS_CONTEXTS = new Set(CANVAS_CONTEXTS);
+CanvasFront.ANIMATION_GENERATORS = new Set(ANIMATION_GENERATORS);
+CanvasFront.DRAW_CALLS = new Set(DRAW_CALLS);
+CanvasFront.INTERESTING_CALLS = new Set(INTERESTING_CALLS);
+CanvasFront.THUMBNAIL_HEIGHT = 50; // px
+CanvasFront.SCREENSHOT_HEIGHT_MAX = 256; // px
+CanvasFront.INVALID_SNAPSHOT_IMAGE = {
+index: -1,
+width: 0,
+height: 0,
+pixels: []
+};
+/**
+* Goes through all the arguments and creates a one-level shallow copy
+* of all arrays and array buffers.
+*/
+function inplaceShallowCloneArrays(functionArguments, contentWindow) {
+let { Object, Array, ArrayBuffer } = contentWindow;
+functionArguments.forEach((arg, index, store) => {
+if (arg instanceof Array) {
+store[index] = arg.slice();
+}
+if (arg instanceof Object && arg.buffer instanceof ArrayBuffer) {
+store[index] = new arg.constructor(arg);
+}
+});
+}