The Tor Browser: toolkit/devtools/server/actors/canvas.js@129ffea94266 (annotated)

toolkit/devtools/server/actors/canvas.js@129ffea94266 (annotated)

toolkit/devtools/server/actors/canvas.js

Sat, 03 Jan 2015 20:18:00 +0100

author: Michael Schloh von Bennewitz <michael@schloh.com>
date: Sat, 03 Jan 2015 20:18:00 +0100
branch: TOR_BUG_3246
changeset 7: 129ffea94266
permissions: -rw-r--r--

Conditionally enable double key logic according to:
private browsing mode or privacy.thirdparty.isolate preference and
implement in GetCookieStringCommon and FindCookie where it counts...
With some reservations of how to convince FindCookie users to test
condition and pass a nullptr when disabling double key logic.

 /* 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);
     }
   });
 }