Changeset 140142 in webkit

Timestamp:

Jan 18, 2013 7:12:17 AM (11 years ago)

Author:

aandrey@chromium.org

Message:

Web Inspector: [Canvas] introduce Resource.toDataURL
​https://bugs.webkit.org/show_bug.cgi?id=107019

Reviewed by Pavel Feldman.

Resource.toDataURL will return string data url representation of a resource, if applicable.
For example, for a rendering context resource (2D or WebGL) it will return canvas.toDataURL().

• inspector/InjectedScriptCanvasModuleSource.js:

(.):

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/InjectedScriptCanvasModuleSource.js (modified) (20 diffs)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2013-01-18  Andrey Adaikin  <aandrey@chromium.org>
+
+        Web Inspector: [Canvas] introduce Resource.toDataURL
+        https://bugs.webkit.org/show_bug.cgi?id=107019
+
+        Reviewed by Pavel Feldman.
+
+        Resource.toDataURL will return string data url representation of a resource, if applicable.
+        For example, for a rendering context resource (2D or WebGL) it will return canvas.toDataURL().
+
+        * inspector/InjectedScriptCanvasModuleSource.js:
+        (.):
+
 2013-01-18  Csaba Osztrogonác  <ossy@webkit.org>
 

trunk/Source/WebCore/inspector/InjectedScriptCanvasModuleSource.js

@@ -93 +93 @@
             // FIXME: Maybe this is a bug in WebKit core?
             if (/^blob:/.test(img.src))
-                return TypeUtils.cloneIntoCanvas(img, img.width, img.height);
+                return TypeUtils.cloneIntoCanvas(img);
             return img.cloneNode(true);
         }
 
         if (obj instanceof HTMLCanvasElement)
-            return TypeUtils.cloneIntoCanvas(obj, obj.width, obj.height);
+            return TypeUtils.cloneIntoCanvas(obj);
 
         if (obj instanceof HTMLVideoElement)
@@ -118 +118 @@
     /**
      * @param {HTMLImageElement|HTMLCanvasElement|HTMLVideoElement} obj
-     * @param {number} width
-     * @param {number} height
+     * @param {number=} width
+     * @param {number=} height
      * @return {HTMLCanvasElement}
      */
@@ -125 +125 @@
     {
         var canvas = /** @type {HTMLCanvasElement} */ (inspectedWindow.document.createElement("canvas"));
-        canvas.width = width;
-        canvas.height = height;
+        canvas.width = width || +obj.width;
+        canvas.height = height || +obj.height;
         var context = /** @type {CanvasRenderingContext2D} */ (Resource.wrappedObject(canvas.getContext("2d")));
         context.drawImage(obj, 0, 0);
@@ -735 +735 @@
         console.assert(result, "Failed to find context resource for " + this._name + "@" + this._kindId);
         return result;
+    },
+
+    /**
+     * @return {string}
+     */
+    toDataURL: function()
+    {
+        var contextResource = this.contextResource();
+        return contextResource === this ? "" : contextResource.toDataURL();
     },
 
@@ -1600 +1609 @@
  * @extends {ContextResource}
  * @param {!WebGLRenderingContext} glContext
- * @param {function():WebGLRenderingContext} replayContextCallback
- */
-function WebGLRenderingContextResource(glContext, replayContextCallback)
+ */
+function WebGLRenderingContextResource(glContext)
 {
     ContextResource.call(this, glContext, "WebGLRenderingContext");
-    this._replayContextCallback = replayContextCallback;
     /** @type {Object.<number, boolean>} */
     this._customErrors = null;
@@ -1720 +1727 @@
 
     /**
+     * @override
+     * @return {string}
+     */
+    toDataURL: function()
+    {
+        return this.wrappedObject().canvas.toDataURL();
+    },
+
+    /**
      * @return {Array.<number>}
      */
@@ -1809 +1825 @@
     {
         var gl = this.wrappedObject();
-        data.replayContextCallback = this._replayContextCallback;
+        data.originalCanvas = gl.canvas;
+        data.originalContextAttributes = gl.getContextAttributes();
         data.extensions = TypeUtils.cloneObject(this._extensions);
 
@@ -1864 +1881 @@
     _doReplayCalls: function(data, cache)
     {
-        this._replayContextCallback = data.replayContextCallback;
         this._customErrors = null;
         this._extensions = TypeUtils.cloneObject(data.extensions) || {};
 
-        var gl = /** @type {!WebGLRenderingContext} */ (Resource.wrappedObject(this._replayContextCallback()));
+        var canvas = data.originalCanvas.cloneNode(true);
+        var replayContext = null;
+        var contextIds = ["experimental-webgl", "webkit-3d", "3d"];
+        for (var i = 0, contextId; contextId = contextIds[i]; ++i) {
+            replayContext = canvas.getContext(contextId, data.originalContextAttributes);
+            if (replayContext)
+                break;
+        }
+
+        var gl = /** @type {!WebGLRenderingContext} */ (Resource.wrappedObject(replayContext));
         this.setWrappedObject(gl);
 
@@ -2187 +2212 @@
  * @extends {ContextResource}
  * @param {!CanvasRenderingContext2D} context
- * @param {function():CanvasRenderingContext2D} replayContextCallback
- */
-function CanvasRenderingContext2DResource(context, replayContextCallback)
+ */
+function CanvasRenderingContext2DResource(context)
 {
     ContextResource.call(this, context, "CanvasRenderingContext2D");
-    this._replayContextCallback = replayContextCallback;
 }
 
@@ -2261 +2284 @@
     /**
      * @override
-     * @param {!Object} data
-     * @param {!Cache} cache
-     */
-    _populateReplayableData: function(data, cache)
-    {
-        data.replayContextCallback = this._replayContextCallback;
-        data.currentAttributes = this._currentAttributesState();
-        var ctx = this.wrappedObject();
-        try {
-            data.originalImageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
-        } catch (e) {
-            console.error("ASSERT_NOT_REACHED: getImageData failed.", e);
-        }
+     * @return {string}
+     */
+    toDataURL: function()
+    {
+        return this.wrappedObject().canvas.toDataURL();
     },
 
@@ -2281 +2296 @@
      * @param {!Cache} cache
      */
+    _populateReplayableData: function(data, cache)
+    {
+        data.currentAttributes = this._currentAttributesState();
+        data.originalCanvasCloned = TypeUtils.cloneIntoCanvas(this.wrappedObject().canvas);
+    },
+
+    /**
+     * @override
+     * @param {!Object} data
+     * @param {!Cache} cache
+     */
     _doReplayCalls: function(data, cache)
     {
-        this._replayContextCallback = data.replayContextCallback;
-
-        var ctx = /** @type {!CanvasRenderingContext2D} */ (Resource.wrappedObject(this._replayContextCallback()));
+        var canvas = TypeUtils.cloneIntoCanvas(data.originalCanvasCloned);
+        var ctx = /** @type {!CanvasRenderingContext2D} */ (Resource.wrappedObject(canvas.getContext("2d")));
         this.setWrappedObject(ctx);
 
-        if (data.originalImageData) {
-            try {
-                ctx.putImageData(data.originalImageData, 0, 0);
-            } catch (e) {
-                console.error("ASSERT_NOT_REACHED: putImageData failed.", e);
-            }
-        }
-
         for (var i = 0, n = data.calls.length; i < n; ++i) {
-            var replayableCall = data.calls[i];
+            var replayableCall = /** @type {ReplayableCall} */ (data.calls[i]);
             if (replayableCall.functionName() === "save")
                 this._applyAttributesState(replayableCall.attachment("canvas2dAttributesState"));
@@ -2610 +2627 @@
  * @constructor
  * @param {!TraceLog} traceLog
- * @param {function()=} resetCallback
- */
-function TraceLogPlayer(traceLog, resetCallback)
+ */
+function TraceLogPlayer(traceLog)
 {
     /** @type {!TraceLog} */
@@ -2620 +2636 @@
     /** @type {!Cache} */
     this._replayWorldCache = new Cache();
-    /** @type {function()|undefined} */
-    this._resetCallback = resetCallback;
 }
 
@@ -2645 +2659 @@
         this._nextReplayStep = 0;
         this._replayWorldCache.reset();
-        if (this._resetCallback)
-            this._resetCallback();
     },
 
@@ -2800 +2812 @@
     /** @type {!Object.<string, TraceLog>} */
     this._traceLogs = {};
-    /** @type {TraceLogPlayer} */
-    this._traceLogPlayer = null;
-    /** @type {!Array.<{type: string, context: Object}>} */
-    this._replayContexts = [];
+    /** @type {!Object.<string, TraceLogPlayer>} */
+    this._traceLogPlayers = {};
 }
 
@@ -2813 +2823 @@
     wrapWebGLContext: function(glContext)
     {
-        var resource = Resource.forObject(glContext) || new WebGLRenderingContextResource(glContext, this._constructWebGLReplayContext.bind(this, glContext));
+        var resource = Resource.forObject(glContext) || new WebGLRenderingContextResource(glContext);
         this._manager.registerResource(resource);
         return resource.proxyObject();
@@ -2824 +2834 @@
     wrapCanvas2DContext: function(context)
     {
-        var resource = Resource.forObject(context) || new CanvasRenderingContext2DResource(context, this._constructCanvas2DReplayContext.bind(this, context));
+        var resource = Resource.forObject(context) || new CanvasRenderingContext2DResource(context);
         this._manager.registerResource(resource);
         return resource.proxyObject();
@@ -2881 +2891 @@
     {
         this.stopCapturing(id);
-        if (this._traceLogPlayer && this._traceLogPlayer.traceLog() === this._traceLogs[id]) {
-            this._traceLogPlayer = null;
-            this._replayContexts = [];
-        }
         delete this._traceLogs[id];
+        delete this._traceLogPlayers[id];
     },
 
@@ -2955 +2962 @@
         if (!traceLog)
             return "";
-        if (!this._traceLogPlayer || this._traceLogPlayer.traceLog() !== traceLog) {
-            this._replayContexts = [];
-            this._traceLogPlayer = new TraceLogPlayer(traceLog, this._onTraceLogPlayerReset.bind(this));
-        }
-        var lastCall = this._traceLogPlayer.stepTo(stepNo);
-        if (!this._replayContexts.length) {
-            console.error("ASSERT_NOT_REACHED: replayTraceLog failed to create a replay canvas?!");
-            return "";
-        }
-        // FIXME: Support replaying several canvases simultaneously.
-        var lastCallResourceContext = Resource.wrappedObject(lastCall.resource());
-        for (var i = 0, n = this._replayContexts.length; i < n; ++i) {
-            var context = this._replayContexts[i].context;
-            if (lastCallResourceContext === context)
-                return context.canvas.toDataURL();
-        }
-        console.assert("ASSERT_NOT_REACHED: replayTraceLog failed to match the replaying canvas?!");
-        return this._replayContexts[0].context.canvas.toDataURL();
+        this._traceLogPlayers[id] = this._traceLogPlayers[id] || new TraceLogPlayer(traceLog);
+        var lastCall = this._traceLogPlayers[id].stepTo(stepNo);
+        return lastCall.resource().toDataURL();
     },
 
@@ -2990 +2982 @@
     {
         return "{\"injectedScriptId\":" + injectedScriptId + ",\"canvasContextId\":" + resourceId + "}";
-    },
-
-    _onTraceLogPlayerReset: function()
-    {
-        this._replayContexts = [];
-    },
-
-    /**
-     * @param {!WebGLRenderingContext} originalGlContext
-     * @return {WebGLRenderingContext}
-     */
-    _constructWebGLReplayContext: function(originalGlContext)
-    {
-        var canvas = originalGlContext.canvas.cloneNode(true);
-        var attributes = originalGlContext.getContextAttributes();
-        var contextIds = ["experimental-webgl", "webkit-3d", "3d"];
-        for (var i = 0, contextId; contextId = contextIds[i]; ++i) {
-            var replayContext = canvas.getContext(contextId, attributes);
-            if (replayContext) {
-                replayContext = /** @type {WebGLRenderingContext} */ (Resource.wrappedObject(replayContext));
-                this._replayContexts.push({
-                    type: "3d",
-                    context: replayContext
-                });
-                return replayContext;
-            }
-        }
-        return null;
-    },
-
-    /**
-     * @param {!CanvasRenderingContext2D} originalContext
-     * @return {CanvasRenderingContext2D}
-     */
-    _constructCanvas2DReplayContext: function(originalContext)
-    {
-        // Create a new 2D context each time to start with an empty context drawing state stack (managed by save() and restore() methods).
-        var canvas = originalContext.canvas.cloneNode(true);
-        var replayContext = /** @type {CanvasRenderingContext2D} */ (Resource.wrappedObject(canvas.getContext("2d")));
-        this._replayContexts.push({
-            type: "2d",
-            context: replayContext
-        });
-        return replayContext;
     }
 }