| /* |
| * Copyright (C) 2017 Apple Inc. All rights reserved. |
| * |
| * Redistribution and use in source and binary forms, with or without |
| * modification, are permitted provided that the following conditions |
| * are met: |
| * 1. Redistributions of source code must retain the above copyright |
| * notice, this list of conditions and the following disclaimer. |
| * 2. Redistributions in binary form must reproduce the above copyright |
| * notice, this list of conditions and the following disclaimer in the |
| * documentation and/or other materials provided with the distribution. |
| * |
| * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS'' |
| * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, |
| * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR |
| * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS |
| * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR |
| * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF |
| * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS |
| * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN |
| * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) |
| * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF |
| * THE POSSIBILITY OF SUCH DAMAGE. |
| */ |
| |
| WI.Recording = class Recording extends WI.Object |
| { |
| constructor(version, type, initialState, frames, data) |
| { |
| super(); |
| |
| this._version = version; |
| this._type = type; |
| this._initialState = initialState; |
| this._frames = frames; |
| this._data = data; |
| this._displayName = WI.UIString("Recording"); |
| |
| this._swizzle = null; |
| this._actions = [new WI.RecordingInitialStateAction].concat(...this._frames.map((frame) => frame.actions)); |
| this._visualActionIndexes = []; |
| this._source = null; |
| |
| this._processContext = null; |
| this._processStates = []; |
| this._processing = false; |
| } |
| |
| static fromPayload(payload, frames) |
| { |
| if (typeof payload !== "object" || payload === null) |
| return null; |
| |
| if (typeof payload.version !== "number") { |
| WI.Recording.synthesizeError(WI.UIString("non-number %s").format(WI.unlocalizedString("version"))); |
| return null; |
| } |
| |
| if (payload.version < 1 || payload.version > WI.Recording.Version) { |
| WI.Recording.synthesizeError(WI.UIString("unsupported %s").format(WI.unlocalizedString("version"))); |
| return null; |
| } |
| |
| if (parseInt(payload.version) !== payload.version) { |
| WI.Recording.synthesizeWarning(WI.UIString("non-integer %s").format(WI.unlocalizedString("version"))); |
| payload.version = parseInt(payload.version); |
| } |
| |
| let type = null; |
| switch (payload.type) { |
| case RecordingAgent.Type.Canvas2D: |
| type = WI.Recording.Type.Canvas2D; |
| break; |
| case RecordingAgent.Type.CanvasBitmapRenderer: |
| type = WI.Recording.Type.CanvasBitmapRenderer; |
| break; |
| case RecordingAgent.Type.CanvasWebGL: |
| type = WI.Recording.Type.CanvasWebGL; |
| break; |
| case RecordingAgent.Type.CanvasWebGL2: |
| type = WI.Recording.Type.CanvasWebGL2; |
| break; |
| default: |
| WI.Recording.synthesizeWarning(WI.UIString("unknown %s \u0022%s\u0022").format(WI.unlocalizedString("type"), payload.type)); |
| type = String(payload.type); |
| break; |
| } |
| |
| if (typeof payload.initialState !== "object" || payload.initialState === null) { |
| if ("initialState" in payload) |
| WI.Recording.synthesizeWarning(WI.UIString("non-object %s").format(WI.unlocalizedString("initialState"))); |
| |
| payload.initialState = {}; |
| } |
| |
| if (typeof payload.initialState.attributes !== "object" || payload.initialState.attributes === null) { |
| if ("attributes" in payload.initialState) |
| WI.Recording.synthesizeWarning(WI.UIString("non-object %s").format(WI.unlocalizedString("initialState.attributes"))); |
| |
| payload.initialState.attributes = {}; |
| } |
| |
| if (!Array.isArray(payload.initialState.states) || payload.initialState.states.some((item) => typeof item !== "object" || item === null)) { |
| if ("states" in payload.initialState) |
| WI.Recording.synthesizeWarning(WI.UIString("non-array %s").format(WI.unlocalizedString("initialState.states"))); |
| |
| payload.initialState.states = []; |
| |
| // COMPATIBILITY (iOS 12.0): Recording.InitialState.states did not exist yet |
| if (!isEmptyObject(payload.initialState.attributes)) { |
| let {width, height, ...state} = payload.initialState.attributes; |
| if (!isEmptyObject(state)) |
| payload.initialState.states.push(state); |
| } |
| } |
| |
| if (!Array.isArray(payload.initialState.parameters)) { |
| if ("parameters" in payload.initialState) |
| WI.Recording.synthesizeWarning(WI.UIString("non-array %s").format(WI.unlocalizedString("initialState.attributes"))); |
| |
| payload.initialState.parameters = []; |
| } |
| |
| if (typeof payload.initialState.content !== "string") { |
| if ("content" in payload.initialState) |
| WI.Recording.synthesizeWarning(WI.UIString("non-string %s").format(WI.unlocalizedString("initialState.content"))); |
| |
| payload.initialState.content = ""; |
| } |
| |
| if (!Array.isArray(payload.frames)) { |
| if ("frames" in payload) |
| WI.Recording.synthesizeWarning(WI.UIString("non-array %s").format(WI.unlocalizedString("frames"))); |
| |
| payload.frames = []; |
| } |
| |
| if (!Array.isArray(payload.data)) { |
| if ("data" in payload) |
| WI.Recording.synthesizeWarning(WI.UIString("non-array %s").format(WI.unlocalizedString("data"))); |
| |
| payload.data = []; |
| } |
| |
| if (!frames) |
| frames = payload.frames.map(WI.RecordingFrame.fromPayload) |
| |
| return new WI.Recording(payload.version, type, payload.initialState, frames, payload.data); |
| } |
| |
| static displayNameForSwizzleType(swizzleType) |
| { |
| switch (swizzleType) { |
| case WI.Recording.Swizzle.None: |
| return WI.unlocalizedString("None"); |
| case WI.Recording.Swizzle.Number: |
| return WI.unlocalizedString("Number"); |
| case WI.Recording.Swizzle.Boolean: |
| return WI.unlocalizedString("Boolean"); |
| case WI.Recording.Swizzle.String: |
| return WI.unlocalizedString("String"); |
| case WI.Recording.Swizzle.Array: |
| return WI.unlocalizedString("Array"); |
| case WI.Recording.Swizzle.TypedArray: |
| return WI.unlocalizedString("TypedArray"); |
| case WI.Recording.Swizzle.Image: |
| return WI.unlocalizedString("Image"); |
| case WI.Recording.Swizzle.ImageData: |
| return WI.unlocalizedString("ImageData"); |
| case WI.Recording.Swizzle.DOMMatrix: |
| return WI.unlocalizedString("DOMMatrix"); |
| case WI.Recording.Swizzle.Path2D: |
| return WI.unlocalizedString("Path2D"); |
| case WI.Recording.Swizzle.CanvasGradient: |
| return WI.unlocalizedString("CanvasGradient"); |
| case WI.Recording.Swizzle.CanvasPattern: |
| return WI.unlocalizedString("CanvasPattern"); |
| case WI.Recording.Swizzle.WebGLBuffer: |
| return WI.unlocalizedString("WebGLBuffer"); |
| case WI.Recording.Swizzle.WebGLFramebuffer: |
| return WI.unlocalizedString("WebGLFramebuffer"); |
| case WI.Recording.Swizzle.WebGLRenderbuffer: |
| return WI.unlocalizedString("WebGLRenderbuffer"); |
| case WI.Recording.Swizzle.WebGLTexture: |
| return WI.unlocalizedString("WebGLTexture"); |
| case WI.Recording.Swizzle.WebGLShader: |
| return WI.unlocalizedString("WebGLShader"); |
| case WI.Recording.Swizzle.WebGLProgram: |
| return WI.unlocalizedString("WebGLProgram"); |
| case WI.Recording.Swizzle.WebGLUniformLocation: |
| return WI.unlocalizedString("WebGLUniformLocation"); |
| case WI.Recording.Swizzle.ImageBitmap: |
| return WI.unlocalizedString("ImageBitmap"); |
| case WI.Recording.Swizzle.WebGLQuery: |
| return WI.unlocalizedString("WebGLQuery"); |
| case WI.Recording.Swizzle.WebGLSampler: |
| return WI.unlocalizedString("WebGLSampler"); |
| case WI.Recording.Swizzle.WebGLSync: |
| return WI.unlocalizedString("WebGLSync"); |
| case WI.Recording.Swizzle.WebGLTransformFeedback: |
| return WI.unlocalizedString("WebGLTransformFeedback"); |
| case WI.Recording.Swizzle.WebGLVertexArrayObject: |
| return WI.unlocalizedString("WebGLVertexArrayObject"); |
| default: |
| console.error("Unknown swizzle type", swizzleType); |
| return null; |
| } |
| } |
| |
| static synthesizeWarning(message) |
| { |
| message = WI.UIString("Recording Warning: %s").format(message); |
| |
| if (window.InspectorTest) { |
| console.warn(message); |
| return; |
| } |
| |
| let consoleMessage = new WI.ConsoleMessage(WI.mainTarget, WI.ConsoleMessage.MessageSource.Other, WI.ConsoleMessage.MessageLevel.Warning, message); |
| consoleMessage.shouldRevealConsole = true; |
| |
| WI.consoleLogViewController.appendConsoleMessage(consoleMessage); |
| } |
| |
| static synthesizeError(message) |
| { |
| message = WI.UIString("Recording Error: %s").format(message); |
| |
| if (window.InspectorTest) { |
| console.error(message); |
| return; |
| } |
| |
| let consoleMessage = new WI.ConsoleMessage(WI.mainTarget, WI.ConsoleMessage.MessageSource.Other, WI.ConsoleMessage.MessageLevel.Error, message); |
| consoleMessage.shouldRevealConsole = true; |
| |
| WI.consoleLogViewController.appendConsoleMessage(consoleMessage); |
| } |
| |
| // Public |
| |
| get displayName() { return this._displayName; } |
| get type() { return this._type; } |
| get initialState() { return this._initialState; } |
| get frames() { return this._frames; } |
| get data() { return this._data; } |
| get actions() { return this._actions; } |
| get visualActionIndexes() { return this._visualActionIndexes; } |
| |
| get source() { return this._source; } |
| set source(source) { this._source = source; } |
| |
| get processing() { return this._processing; } |
| |
| get ready() |
| { |
| return this._actions.lastValue.ready; |
| } |
| |
| startProcessing() |
| { |
| console.assert(!this._processing, "Cannot start an already started process()."); |
| console.assert(!this.ready, "Cannot start a completed process()."); |
| if (this._processing || this.ready) |
| return; |
| |
| this._processing = true; |
| |
| this._process(); |
| } |
| |
| stopProcessing() |
| { |
| console.assert(this._processing, "Cannot stop an already stopped process()."); |
| console.assert(!this.ready, "Cannot stop a completed process()."); |
| if (!this._processing || this.ready) |
| return; |
| |
| this._processing = false; |
| } |
| |
| createDisplayName(suggestedName) |
| { |
| let recordingNameSet; |
| if (this._source) { |
| recordingNameSet = this._source[WI.Recording.CanvasRecordingNamesSymbol]; |
| if (!recordingNameSet) |
| this._source[WI.Recording.CanvasRecordingNamesSymbol] = recordingNameSet = new Set; |
| } else |
| recordingNameSet = WI.Recording._importedRecordingNameSet; |
| |
| let name; |
| if (suggestedName) { |
| name = suggestedName; |
| let duplicateNumber = 2; |
| while (recordingNameSet.has(name)) |
| name = `${suggestedName} (${duplicateNumber++})`; |
| } else { |
| let recordingNumber = 1; |
| do { |
| name = WI.UIString("Recording %d").format(recordingNumber++); |
| } while (recordingNameSet.has(name)); |
| } |
| |
| recordingNameSet.add(name); |
| this._displayName = name; |
| } |
| |
| async swizzle(index, type) |
| { |
| if (!this._swizzle) |
| this._swizzle = {}; |
| |
| if (typeof this._swizzle[index] !== "object") |
| this._swizzle[index] = {}; |
| |
| if (type === WI.Recording.Swizzle.Number) |
| return parseFloat(index); |
| |
| if (type === WI.Recording.Swizzle.Boolean) |
| return !!index; |
| |
| if (type === WI.Recording.Swizzle.Array) |
| return Array.isArray(index) ? index : []; |
| |
| if (type === WI.Recording.Swizzle.DOMMatrix) |
| return new DOMMatrix(index); |
| |
| // FIXME: <https://webkit.org/b/176009> Web Inspector: send data for WebGL objects during a recording instead of a placeholder string |
| if (type === WI.Recording.Swizzle.TypedArray |
| || type === WI.Recording.Swizzle.WebGLBuffer |
| || type === WI.Recording.Swizzle.WebGLFramebuffer |
| || type === WI.Recording.Swizzle.WebGLRenderbuffer |
| || type === WI.Recording.Swizzle.WebGLTexture |
| || type === WI.Recording.Swizzle.WebGLShader |
| || type === WI.Recording.Swizzle.WebGLProgram |
| || type === WI.Recording.Swizzle.WebGLUniformLocation |
| || type === WI.Recording.Swizzle.WebGLQuery |
| || type === WI.Recording.Swizzle.WebGLSampler |
| || type === WI.Recording.Swizzle.WebGLSync |
| || type === WI.Recording.Swizzle.WebGLTransformFeedback |
| || type === WI.Recording.Swizzle.WebGLVertexArrayObject) { |
| return index; |
| } |
| |
| if (!(type in this._swizzle[index])) { |
| try { |
| let data = this._data[index]; |
| switch (type) { |
| case WI.Recording.Swizzle.None: |
| this._swizzle[index][type] = data; |
| break; |
| |
| case WI.Recording.Swizzle.String: |
| if (Array.isArray(data)) |
| this._swizzle[index][type] = await Promise.all(data.map((item) => this.swizzle(item, WI.Recording.Swizzle.String))); |
| else |
| this._swizzle[index][type] = String(data); |
| break; |
| |
| case WI.Recording.Swizzle.Image: |
| this._swizzle[index][type] = await WI.ImageUtilities.promisifyLoad(data); |
| this._swizzle[index][type].__data = data; |
| break; |
| |
| case WI.Recording.Swizzle.ImageData: { |
| let [object, width, height] = await Promise.all([ |
| this.swizzle(data[0], WI.Recording.Swizzle.Array), |
| this.swizzle(data[1], WI.Recording.Swizzle.Number), |
| this.swizzle(data[2], WI.Recording.Swizzle.Number), |
| ]); |
| |
| object = await Promise.all(object.map((item) => this.swizzle(item, WI.Recording.Swizzle.Number))); |
| |
| this._swizzle[index][type] = new ImageData(new Uint8ClampedArray(object), width, height); |
| this._swizzle[index][type].__data = {data: object, width, height}; |
| break; |
| } |
| |
| case WI.Recording.Swizzle.Path2D: |
| this._swizzle[index][type] = new Path2D(data); |
| this._swizzle[index][type].__data = data; |
| break; |
| |
| case WI.Recording.Swizzle.CanvasGradient: { |
| let [gradientType, points] = await Promise.all([ |
| this.swizzle(data[0], WI.Recording.Swizzle.String), |
| this.swizzle(data[1], WI.Recording.Swizzle.Array), |
| ]); |
| |
| points = await Promise.all(points.map((item) => this.swizzle(item, WI.Recording.Swizzle.Number))); |
| |
| WI.ImageUtilities.scratchCanvasContext2D((context) => { |
| this._swizzle[index][type] = gradientType === "radial-gradient" ? context.createRadialGradient(...points) : context.createLinearGradient(...points); |
| }); |
| |
| let stops = []; |
| for (let stop of data[2]) { |
| let [offset, color] = await Promise.all([ |
| this.swizzle(stop[0], WI.Recording.Swizzle.Number), |
| this.swizzle(stop[1], WI.Recording.Swizzle.String), |
| ]); |
| this._swizzle[index][type].addColorStop(offset, color); |
| |
| stops.push({offset, color}); |
| } |
| |
| this._swizzle[index][type].__data = {type: gradientType, points, stops}; |
| break; |
| } |
| |
| case WI.Recording.Swizzle.CanvasPattern: { |
| let [image, repeat] = await Promise.all([ |
| this.swizzle(data[0], WI.Recording.Swizzle.Image), |
| this.swizzle(data[1], WI.Recording.Swizzle.String), |
| ]); |
| |
| WI.ImageUtilities.scratchCanvasContext2D((context) => { |
| this._swizzle[index][type] = context.createPattern(image, repeat); |
| this._swizzle[index][type].__image = image; |
| }); |
| |
| this._swizzle[index][type].__data = {image: image.__data, repeat}; |
| break; |
| } |
| |
| case WI.Recording.Swizzle.ImageBitmap: { |
| let image = await this.swizzle(index, WI.Recording.Swizzle.Image); |
| this._swizzle[index][type] = await createImageBitmap(image); |
| this._swizzle[index][type].__data = data; |
| break; |
| } |
| |
| case WI.Recording.Swizzle.CallStack: { |
| let array = await this.swizzle(data, WI.Recording.Swizzle.Array); |
| this._swizzle[index][type] = await Promise.all(array.map((item) => this.swizzle(item, WI.Recording.Swizzle.CallFrame))); |
| break; |
| } |
| |
| case WI.Recording.Swizzle.CallFrame: { |
| let array = await this.swizzle(data, WI.Recording.Swizzle.Array); |
| let [functionName, url] = await Promise.all([ |
| this.swizzle(array[0], WI.Recording.Swizzle.String), |
| this.swizzle(array[1], WI.Recording.Swizzle.String), |
| ]); |
| this._swizzle[index][type] = WI.CallFrame.fromPayload(WI.assumingMainTarget(), { |
| functionName, |
| url, |
| lineNumber: array[2], |
| columnNumber: array[3], |
| }); |
| break; |
| } |
| } |
| } catch { } |
| } |
| |
| return this._swizzle[index][type]; |
| } |
| |
| createContext() |
| { |
| let createCanvasContext = (type) => { |
| let canvas = document.createElement("canvas"); |
| if ("width" in this._initialState.attributes) |
| canvas.width = this._initialState.attributes.width; |
| if ("height" in this._initialState.attributes) |
| canvas.height = this._initialState.attributes.height; |
| return canvas.getContext(type, ...this._initialState.parameters); |
| }; |
| |
| if (this._type === WI.Recording.Type.Canvas2D) |
| return createCanvasContext("2d"); |
| |
| if (this._type === WI.Recording.Type.CanvasBitmapRenderer) |
| return createCanvasContext("bitmaprenderer"); |
| |
| if (this._type === WI.Recording.Type.CanvasWebGL) |
| return createCanvasContext("webgl"); |
| |
| if (this._type === WI.Recording.Type.CanvasWebGL2) |
| return createCanvasContext("webgl2"); |
| |
| console.error("Unknown recording type", this._type); |
| return null; |
| } |
| |
| toJSON() |
| { |
| let initialState = {}; |
| if (!isEmptyObject(this._initialState.attributes)) |
| initialState.attributes = this._initialState.attributes; |
| if (this._initialState.states.length) |
| initialState.states = this._initialState.states; |
| if (this._initialState.parameters.length) |
| initialState.parameters = this._initialState.parameters; |
| if (this._initialState.content && this._initialState.content.length) |
| initialState.content = this._initialState.content; |
| |
| return { |
| version: this._version, |
| type: this._type, |
| initialState, |
| frames: this._frames.map((frame) => frame.toJSON()), |
| data: this._data, |
| }; |
| } |
| |
| toHTML() |
| { |
| console.assert(this._type === WI.Recording.Type.Canvas2D); |
| console.assert(this.ready); |
| |
| let lines = []; |
| let objects = []; |
| |
| function processObject(object) { |
| objects.push({object, index: objects.length}); |
| return `objects[${objects.length - 1}]`; |
| } |
| |
| function processValue(value) { |
| if (typeof value === "object" && !Array.isArray(value)) |
| return processObject(value); |
| return JSON.stringify(value); |
| } |
| |
| function escapeHTML(s) { |
| return s.replace(/[^0-9A-Za-z ]/g, (c) => { |
| return `&#${c.charCodeAt(0)};`; |
| }); |
| } |
| |
| lines.push(`<!DOCTYPE html>`); |
| lines.push(`<head>`); |
| lines.push(`<title>${escapeHTML(this._displayName)}</title>`); |
| lines.push(`<style>`); |
| lines.push(` body {`); |
| lines.push(` margin: 0;`); |
| lines.push(` }`); |
| lines.push(` canvas {`); |
| lines.push(` max-width: calc(100% - 40px);`); |
| lines.push(` max-height: calc(100% - 40px);`); |
| lines.push(` padding: 20px;`); |
| lines.push(` }`); |
| lines.push(`</style>`); |
| lines.push(`</head>`); |
| lines.push(`<body>`); |
| lines.push(`<script>`); |
| lines.push(`"use strict";`); |
| |
| lines.push(``); |
| |
| lines.push(`let promises = [];`); |
| lines.push(`let objects = {};`); |
| |
| lines.push(``); |
| |
| lines.push(`let canvas = document.body.appendChild(document.createElement("canvas"));`); |
| for (let [attribute, value] of Object.entries(this._initialState.attributes)) |
| lines.push(`canvas.${attribute} = ${JSON.stringify(value)};`); |
| |
| lines.push(``); |
| |
| let parametersString = this._initialState.parameters.map(processValue).join(`, `); |
| lines.push(`let context = canvas.getContext("2d"${parametersString ? ", " + parametersString : ""});`); |
| |
| lines.push(``); |
| |
| lines.push(`let frames = [`); |
| |
| lines.push(` function initialState() {`); |
| if (this._initialState.content) { |
| let image = new Image; |
| image.__data = this._initialState.content; |
| lines.push(` context.drawImage(${processObject(image)}, 0, 0);`); |
| lines.push(``); |
| } |
| for (let state of this._actions[0].states) { |
| for (let [name, value] of state) { |
| if (name === "getPath" || name === "currentX" || name === "currentY") |
| continue; |
| |
| let contextString = `context`; |
| if (name === "setPath") { |
| lines.push(` if (${JSON.stringify(name)} in context)`); |
| contextString = ` ` + contextString; |
| } |
| |
| let callString = ``; |
| if (WI.RecordingAction.isFunctionForType(this._type, name)) |
| callString = `(` + value.map(processValue).join(`, `) + `)`; |
| else |
| callString = ` = ${processValue(value)}`; |
| |
| lines.push(` ${contextString}.${name}${callString};`); |
| } |
| |
| if (state !== this._actions[0].states.lastValue) { |
| lines.push(` context.save();`); |
| lines.push(``); |
| } |
| } |
| lines.push(` },`); |
| |
| lines.push(` function startRecording() {`); |
| lines.push(` if (typeof console.record === "function")`); |
| lines.push(` console.record(context, {name: ${JSON.stringify(this._displayName)}});`); |
| lines.push(` },`); |
| |
| for (let i = 0; i < this._frames.length; ++i) { |
| lines.push(` function frame${i + 1}() {`); |
| |
| for (let action of this._frames[i].actions) { |
| let contextString = `context`; |
| if (action.contextReplacer) |
| contextString += `.${action.contextReplacer}`; |
| |
| if (!action.valid) |
| contextString = `// ` + contextString; |
| |
| let callString = ``; |
| if (action.isFunction) |
| callString += `(` + action.parameters.map(processValue).join(`, `) + `)`; |
| else if (!action.isGetter) |
| callString += ` = ` + processValue(action.parameters[0]); |
| |
| lines.push(` ${contextString}.${action.name}${callString};`); |
| } |
| |
| lines.push(` },`); |
| } |
| |
| lines.push(` function stopRecording() {`); |
| lines.push(` if (typeof console.recordEnd === "function")`); |
| lines.push(` console.recordEnd(context);`); |
| lines.push(` },`); |
| |
| lines.push(`];`); |
| |
| lines.push(``); |
| |
| if (objects.length) { |
| if (objects.some(({object}) => object instanceof CanvasGradient)) { |
| lines.push(`function rebuildCanvasGradient(key, data) {`); |
| lines.push(` let gradient = null;`); |
| lines.push(` if (data.type === "radial-gradient")`); |
| lines.push(` gradient = context.createRadialGradient(data.points[0], data.points[1], data.points[2], data.points[3], data.points[4], data.points[5]);`); |
| lines.push(` else`); |
| lines.push(` gradient = context.createLinearGradient(data.points[0], data.points[1], data.points[2], data.points[3]);`); |
| lines.push(` for (let stop of data.stops)`); |
| lines.push(` gradient.addColorStop(stop.offset, stop.color);`); |
| lines.push(` objects[key] = gradient;`); |
| lines.push(`}`); |
| } |
| |
| if (objects.some(({object}) => object instanceof CanvasPattern)) { |
| lines.push(`function rebuildCanvasPattern(key, data) {`); |
| lines.push(` promises.push(new Promise(function(resolve, reject) {`); |
| lines.push(` let image = new Image;`); |
| lines.push(` function resolveWithImage(event) {`); |
| lines.push(` objects[key] = context.createPattern(image, data.repeat);`); |
| lines.push(` resolve();`); |
| lines.push(` }`); |
| lines.push(` image.addEventListener("load", resolveWithImage);`); |
| lines.push(` image.addEventListener("error", resolveWithImage);`); |
| lines.push(` image.src = data.image;`); |
| lines.push(` }));`); |
| lines.push(`}`); |
| } |
| |
| if (objects.some(({object}) => object instanceof DOMMatrix)) { |
| lines.push(`function rebuildDOMMatrix(key, data) {`); |
| lines.push(` objects[key] = new DOMMatrix(data);`); |
| lines.push(`}`); |
| } |
| |
| if (objects.some(({object}) => object instanceof Image)) { |
| lines.push(`function rebuildImage(key, data) {`); |
| lines.push(` promises.push(new Promise(function(resolve, reject) {`); |
| lines.push(` let image = new Image;`); |
| lines.push(` function resolveWithImage(event) {`); |
| lines.push(` objects[key] = image;`); |
| lines.push(` resolve();`); |
| lines.push(` }`); |
| lines.push(` image.addEventListener("load", resolveWithImage);`); |
| lines.push(` image.addEventListener("error", resolveWithImage);`); |
| lines.push(` image.src = data;`); |
| lines.push(` }));`); |
| lines.push(`}`); |
| } |
| |
| if (objects.some(({object}) => object instanceof ImageBitmap)) { |
| lines.push(`function rebuildImageBitmap(key, data) {`); |
| lines.push(` promises.push(new Promise(function(resolve, reject) {`); |
| lines.push(` let image = new Image;`); |
| lines.push(` function resolveWithImage(event) {`); |
| lines.push(` createImageBitmap(image).then(function(imageBitmap) {`); |
| lines.push(` objects[key] = imageBitmap;`); |
| lines.push(` resolve();`); |
| lines.push(` });`); |
| lines.push(` }`); |
| lines.push(` image.addEventListener("load", resolveWithImage);`); |
| lines.push(` image.addEventListener("error", resolveWithImage);`); |
| lines.push(` image.src = data;`); |
| lines.push(` }));`); |
| lines.push(`}`); |
| } |
| |
| if (objects.some(({object}) => object instanceof ImageData)) { |
| lines.push(`function rebuildImageData(key, data) {`); |
| lines.push(` objects[key] = new ImageData(new Uint8ClampedArray(data.data), parseInt(data.width), parseInt(data.height));`); |
| lines.push(`}`); |
| } |
| |
| if (objects.some(({object}) => object instanceof Path2D)) { |
| lines.push(`function rebuildPath2D(key, data) {`); |
| lines.push(` objects[key] = new Path2D(data);`); |
| lines.push(`}`); |
| } |
| |
| lines.push(``); |
| |
| for (let {object, index} of objects) { |
| if (object instanceof CanvasGradient) { |
| lines.push(`rebuildCanvasGradient(${index}, ${JSON.stringify(object.__data)});`); |
| continue; |
| } |
| |
| if (object instanceof CanvasPattern) { |
| lines.push(`rebuildCanvasPattern(${index}, ${JSON.stringify(object.__data)});`); |
| continue; |
| } |
| |
| if (object instanceof DOMMatrix) { |
| lines.push(`rebuildDOMMatrix(${index}, ${JSON.stringify(object.toString())});`) |
| continue; |
| } |
| |
| if (object instanceof Image) { |
| lines.push(`rebuildImage(${index}, ${JSON.stringify(object.__data)});`) |
| continue; |
| } |
| |
| if (object instanceof ImageBitmap) { |
| lines.push(`rebuildImageBitmap(${index}, ${JSON.stringify(object.__data)});`) |
| continue; |
| } |
| |
| if (object instanceof ImageData) { |
| lines.push(`rebuildImageData(${index}, ${JSON.stringify(object.__data)});`); |
| continue; |
| } |
| |
| if (object instanceof Path2D) { |
| lines.push(`rebuildPath2D(${index}, ${JSON.stringify(object.__data || "")});`) |
| continue; |
| } |
| } |
| |
| lines.push(``); |
| } |
| |
| lines.push(`Promise.all(promises).then(function() {`); |
| lines.push(` window.requestAnimationFrame(function executeFrame() {`); |
| lines.push(` frames.shift()();`); |
| lines.push(` if (frames.length)`); |
| lines.push(` window.requestAnimationFrame(executeFrame);`); |
| lines.push(` });`); |
| lines.push(`});`); |
| |
| lines.push(`</script>`); |
| lines.push(`</body>`); |
| return lines.join(`\n`); |
| } |
| |
| // Private |
| |
| async _process() |
| { |
| if (!this._processContext) { |
| this._processContext = this.createContext(); |
| |
| if (this._type === WI.Recording.Type.Canvas2D) { |
| let initialContent = await WI.ImageUtilities.promisifyLoad(this._initialState.content); |
| this._processContext.drawImage(initialContent, 0, 0); |
| |
| for (let initialState of this._initialState.states) { |
| let state = await WI.RecordingState.swizzleInitialState(this, initialState); |
| state.apply(this._type, this._processContext); |
| |
| // The last state represents the current state, which should not be saved. |
| if (initialState !== this._initialState.states.lastValue) { |
| this._processContext.save(); |
| this._processStates.push(WI.RecordingState.fromContext(this._type, this._processContext)); |
| } |
| } |
| } |
| } |
| |
| // The first action is always a WI.RecordingInitialStateAction, which doesn't need to swizzle(). |
| // Since it is not associated with a WI.RecordingFrame, it has to manually process(). |
| if (!this._actions[0].ready) { |
| this._actions[0].process(this, this._processContext, this._processStates); |
| this.dispatchEventToListeners(WI.Recording.Event.ProcessedAction, {action: this._actions[0], index: 0}); |
| } |
| |
| const workInterval = 10; |
| let startTime = Date.now(); |
| |
| let cumulativeActionIndex = 0; |
| let lastAction = this._actions[cumulativeActionIndex]; |
| for (let frameIndex = 0; frameIndex < this._frames.length; ++frameIndex) { |
| let frame = this._frames[frameIndex]; |
| |
| if (frame.actions.lastValue.ready) { |
| cumulativeActionIndex += frame.actions.length; |
| lastAction = frame.actions.lastValue; |
| continue; |
| } |
| |
| for (let actionIndex = 0; actionIndex < frame.actions.length; ++actionIndex) { |
| ++cumulativeActionIndex; |
| |
| let action = frame.actions[actionIndex]; |
| if (action.ready) { |
| lastAction = action; |
| continue; |
| } |
| |
| await action.swizzle(this); |
| |
| action.process(this, this._processContext, this._processStates, {lastAction}); |
| |
| if (action.isVisual) |
| this._visualActionIndexes.push(cumulativeActionIndex); |
| |
| if (!actionIndex) |
| this.dispatchEventToListeners(WI.Recording.Event.StartProcessingFrame, {frame, index: frameIndex}); |
| |
| this.dispatchEventToListeners(WI.Recording.Event.ProcessedAction, {action, index: cumulativeActionIndex}); |
| |
| if (Date.now() - startTime > workInterval) { |
| await Promise.delay(); // yield |
| |
| startTime = Date.now(); |
| } |
| |
| lastAction = action; |
| |
| if (!this._processing) |
| return; |
| } |
| |
| if (!this._processing) |
| return; |
| } |
| |
| this._swizzle = null; |
| this._processContext = null; |
| this._processing = false; |
| } |
| }; |
| |
| // Keep this in sync with Inspector::Protocol::Recording::VERSION. |
| WI.Recording.Version = 1; |
| |
| WI.Recording.Event = { |
| ProcessedAction: "recording-processed-action", |
| StartProcessingFrame: "recording-start-processing-frame", |
| }; |
| |
| WI.Recording._importedRecordingNameSet = new Set; |
| |
| WI.Recording.CanvasRecordingNamesSymbol = Symbol("canvas-recording-names"); |
| |
| WI.Recording.Type = { |
| Canvas2D: "canvas-2d", |
| CanvasBitmapRenderer: "canvas-bitmaprenderer", |
| CanvasWebGL: "canvas-webgl", |
| CanvasWebGL2: "canvas-webgl2", |
| }; |
| |
| // Keep this in sync with WebCore::RecordingSwizzleTypes. |
| WI.Recording.Swizzle = { |
| None: 0, |
| Number: 1, |
| Boolean: 2, |
| String: 3, |
| Array: 4, |
| TypedArray: 5, |
| Image: 6, |
| ImageData: 7, |
| DOMMatrix: 8, |
| Path2D: 9, |
| CanvasGradient: 10, |
| CanvasPattern: 11, |
| WebGLBuffer: 12, |
| WebGLFramebuffer: 13, |
| WebGLRenderbuffer: 14, |
| WebGLTexture: 15, |
| WebGLShader: 16, |
| WebGLProgram: 17, |
| WebGLUniformLocation: 18, |
| ImageBitmap: 19, |
| WebGLQuery: 20, |
| WebGLSampler: 21, |
| WebGLSync: 22, |
| WebGLTransformFeedback: 23, |
| WebGLVertexArrayObject: 24, |
| |
| // Special frontend-only swizzle types. |
| CallStack: Symbol("CallStack"), |
| CallFrame: Symbol("CallFrame"), |
| }; |
