Changeset 231218 in webkit

Timestamp:

May 1, 2018 4:37:59 PM (6 years ago)

Author:

webkit@devinrousso.com

Message:

Web Inspector: Canvas tab: determine hasVisibleEffect for all actions immediately after recording is added
​https://bugs.webkit.org/show_bug.cgi?id=182995

Reviewed by Matt Baker.

Source/WebInspectorUI:

Previously, we'd swizzle the entirety of the WI.Recording in one, which would usually
freeze the UI, especially for larger recordings. This patch uses WI.YieldableTask to split
the work and allow the rest of the UI to still be usable while WI.Recording are processing.
Additionally, since we no longer have to worry about hangs, we can do more work upfront,
such as calculating hasVisibleEffect and the current state of 2D canvases.

These changes require that all uses of WI.Recording call process() before attempting to
use any frames/actions/initialState, as they will have their original payload values
and will have not been swizzled or applied.

• Localizations/en.lproj/localizedStrings.js:

• UserInterface/Models/Recording.js:

(WI.Recording):
(WI.Recording.prototype.process):
(WI.Recording.prototype.createContext): Added.
(WI.Recording.prototype.async yieldableTaskWillProcessItem): Added.
(WI.Recording.prototype.async yieldableTaskDidFinish): Added.

• UserInterface/Models/RecordingAction.js:

(WI.RecordingAction):
(WI.RecordingAction.prototype.process): Added.
(WI.RecordingAction.prototype.async swizzle): Added.
(WI.RecordingAction.prototype.apply):
(WI.RecordingAction.prototype.toJSON):
(WI.RecordingAction.prototype.set state): Deleted.
(WI.RecordingAction.prototype.swizzle): Deleted.
(WI.RecordingAction.prototype.apply.getContent): Deleted.
(WI.RecordingAction.prototype.async _swizzle): Deleted.

• UserInterface/Models/RecordingInitialStateAction.js:

(WI.RecordingInitialStateAction):

• UserInterface/Views/CanvasSidebarPanel.js:

(WI.CanvasSidebarPanel):
(WI.CanvasSidebarPanel.prototype.set action):
(WI.CanvasSidebarPanel.prototype._treeOutlineSelectionDidChange):
(WI.CanvasSidebarPanel.prototype._recordingChanged):

• UserInterface/Views/CanvasSidebarPanel.css:

(.sidebar > .panel.navigation.canvas > .content > .recording-content > .indeterminate-progress-spinner):

• UserInterface/Views/RecordingActionTreeElement.js:

(WI.RecordingActionTreeElement):
(WI.RecordingActionTreeElement.prototype.onattach):
(WI.RecordingActionTreeElement.prototype._handleHasVisibleEffectChanged): Deleted.

• UserInterface/Views/RecordingContentView.js:

(WI.RecordingContentView):
(WI.RecordingContentView.prototype.get navigationItems):
(WI.RecordingContentView.prototype.updateActionIndex):
(WI.RecordingContentView.prototype.initialLayout):
(WI.RecordingContentView.prototype._generateContentCanvas2D): Added.
(WI.RecordingContentView.prototype._generateContentCanvasWebGL): Added.
(WI.RecordingContentView.prototype._updateCanvasPath):
(WI.RecordingContentView.prototype._updateProcessProgress): Added.
(WI.RecordingContentView.prototype._handleRecordingProcessedActionSwizzle): Added.
(WI.RecordingContentView.prototype._handleRecordingProcessedActionApply): Added.
(WI.RecordingContentView.supportsCanvasPathDebugging): Deleted.
(WI.RecordingContentView.prototype.async _generateContentCanvas2D): Deleted.
(WI.RecordingContentView.prototype.async _generateContentCanvasWebGL): Deleted.

• UserInterface/Views/RecordingContentView.css:

(.content-view:not(.tab).recording > .preview-container):

• UserInterface/Base/ImageUtilities.js:

(WI.ImageUtilities.supportsCanvasPathDebugging):

LayoutTests:

• inspector/canvas/resources/recording-utilities.js:

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/inspector/canvas/resources/recording-utilities.js (modified) (1 diff)
• Source/WebInspectorUI/ChangeLog (modified) (1 diff)
• Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (modified) (2 diffs)
• Source/WebInspectorUI/UserInterface/Base/ImageUtilities.js (modified) (1 diff)
• Source/WebInspectorUI/UserInterface/Models/Recording.js (modified) (5 diffs)
• Source/WebInspectorUI/UserInterface/Models/RecordingAction.js (modified) (8 diffs)
• Source/WebInspectorUI/UserInterface/Models/RecordingInitialStateAction.js (modified) (1 diff)
• Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.css (modified) (1 diff)
• Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.js (modified) (6 diffs)
• Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.js (modified) (3 diffs)
• Source/WebInspectorUI/UserInterface/Views/RecordingContentView.css (modified) (1 diff)
• Source/WebInspectorUI/UserInterface/Views/RecordingContentView.js (modified) (20 diffs)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2018-05-01  Devin Rousso  <webkit@devinrousso.com>
+
+        Web Inspector: Canvas tab: determine hasVisibleEffect for all actions immediately after recording is added
+        https://bugs.webkit.org/show_bug.cgi?id=182995
+
+        Reviewed by Matt Baker.
+
+        * inspector/canvas/resources/recording-utilities.js:
+
 2018-05-01  Ryan Haddad  <ryanhaddad@apple.com>
 

trunk/LayoutTests/inspector/canvas/resources/recording-utilities.js

@@ -125 +125 @@
             InspectorTest.assert(recording.frames.length === frameCount, `Recording should have ${frameCount} frames.`)
 
-            return recording.actions.then(() => {
+            return Promise.all(recording.actions.map((action) => action.swizzle(recording))).then(() => {
                 logRecording(recording, type);
             });

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2018-05-01  Devin Rousso  <webkit@devinrousso.com>
+
+        Web Inspector: Canvas tab: determine hasVisibleEffect for all actions immediately after recording is added
+        https://bugs.webkit.org/show_bug.cgi?id=182995
+
+        Reviewed by Matt Baker.
+
+        Previously, we'd swizzle the entirety of the `WI.Recording` in one, which would usually
+        freeze the UI, especially for larger recordings. This patch uses `WI.YieldableTask` to split
+        the work and allow the rest of the UI to still be usable while `WI.Recording` are processing.
+        Additionally, since we no longer have to worry about hangs, we can do more work upfront,
+        such as calculating `hasVisibleEffect` and the current state of 2D canvases.
+
+        These changes require that all uses of `WI.Recording` call `process()` before attempting to
+        use any `frames`/`actions`/`initialState`, as they will have their original payload values
+        and will have not been swizzled or applied.
+
+        * Localizations/en.lproj/localizedStrings.js:
+
+        * UserInterface/Models/Recording.js:
+        (WI.Recording):
+        (WI.Recording.prototype.process):
+        (WI.Recording.prototype.createContext): Added.
+        (WI.Recording.prototype.async yieldableTaskWillProcessItem): Added.
+        (WI.Recording.prototype.async yieldableTaskDidFinish): Added.
+
+        * UserInterface/Models/RecordingAction.js:
+        (WI.RecordingAction):
+        (WI.RecordingAction.prototype.process): Added.
+        (WI.RecordingAction.prototype.async swizzle): Added.
+        (WI.RecordingAction.prototype.apply):
+        (WI.RecordingAction.prototype.toJSON):
+        (WI.RecordingAction.prototype.set state): Deleted.
+        (WI.RecordingAction.prototype.swizzle): Deleted.
+        (WI.RecordingAction.prototype.apply.getContent): Deleted.
+        (WI.RecordingAction.prototype.async _swizzle): Deleted.
+        * UserInterface/Models/RecordingInitialStateAction.js:
+        (WI.RecordingInitialStateAction):
+
+        * UserInterface/Views/CanvasSidebarPanel.js:
+        (WI.CanvasSidebarPanel):
+        (WI.CanvasSidebarPanel.prototype.set action):
+        (WI.CanvasSidebarPanel.prototype._treeOutlineSelectionDidChange):
+        (WI.CanvasSidebarPanel.prototype._recordingChanged):
+
+        * UserInterface/Views/CanvasSidebarPanel.css:
+        (.sidebar > .panel.navigation.canvas > .content > .recording-content > .indeterminate-progress-spinner):
+
+        * UserInterface/Views/RecordingActionTreeElement.js:
+        (WI.RecordingActionTreeElement):
+        (WI.RecordingActionTreeElement.prototype.onattach):
+        (WI.RecordingActionTreeElement.prototype._handleHasVisibleEffectChanged): Deleted.
+
+        * UserInterface/Views/RecordingContentView.js:
+        (WI.RecordingContentView):
+        (WI.RecordingContentView.prototype.get navigationItems):
+        (WI.RecordingContentView.prototype.updateActionIndex):
+        (WI.RecordingContentView.prototype.initialLayout):
+        (WI.RecordingContentView.prototype._generateContentCanvas2D): Added.
+        (WI.RecordingContentView.prototype._generateContentCanvasWebGL): Added.
+        (WI.RecordingContentView.prototype._updateCanvasPath):
+        (WI.RecordingContentView.prototype._updateProcessProgress): Added.
+        (WI.RecordingContentView.prototype._handleRecordingProcessedActionSwizzle): Added.
+        (WI.RecordingContentView.prototype._handleRecordingProcessedActionApply): Added.
+        (WI.RecordingContentView.supportsCanvasPathDebugging): Deleted.
+        (WI.RecordingContentView.prototype.async _generateContentCanvas2D): Deleted.
+        (WI.RecordingContentView.prototype.async _generateContentCanvasWebGL): Deleted.
+
+        * UserInterface/Views/RecordingContentView.css:
+        (.content-view:not(.tab).recording > .preview-container):
+
+        * UserInterface/Base/ImageUtilities.js:
+        (WI.ImageUtilities.supportsCanvasPathDebugging):
+
 2018-04-26  Jer Noble  <jer.noble@apple.com>
 

trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

@@ -563 +563 @@
 localizedStrings["Load \u2014 %s"] = "Load \u2014 %s";
 localizedStrings["Load cancelled"] = "Load cancelled";
+localizedStrings["Loading Recording"] = "Loading Recording";
 localizedStrings["Local File"] = "Local File";
 localizedStrings["Local Storage"] = "Local Storage";
@@ -724 +725 @@
 localizedStrings["Probes"] = "Probes";
 localizedStrings["Processing Instruction"] = "Processing Instruction";
+localizedStrings["Processing Recording"] = "Processing Recording";
 localizedStrings["Program %d"] = "Program %d";
 localizedStrings["Properties"] = "Properties";

trunk/Source/WebInspectorUI/UserInterface/Base/ImageUtilities.js

@@ -127 +127 @@
         return image;
     }
+
+    static supportsCanvasPathDebugging()
+    {
+        return "getPath" in CanvasRenderingContext2D.prototype
+            && "setPath" in CanvasRenderingContext2D.prototype
+            && "currentX" in CanvasRenderingContext2D.prototype
+            && "currentY" in CanvasRenderingContext2D.prototype;
+    }
 };
 

trunk/Source/WebInspectorUI/UserInterface/Models/Recording.js

@@ -24 +24 @@
  */
 
-WI.Recording = class Recording
+WI.Recording = class Recording extends WI.Object
 {
     constructor(version, type, initialState, frames, data)
     {
+        super();
+
         this._version = version;
         this._type = type;
@@ -36 +38 @@
 
         this._swizzle = [];
+        this._actions = [new WI.RecordingInitialStateAction].concat(...this._frames.map((frame) => frame.actions));
         this._visualActionIndexes = [];
         this._source = null;
 
-        let actions = [new WI.RecordingInitialStateAction].concat(...this._frames.map((frame) => frame.actions));
-        this._actions = Promise.all(actions.map((action) => action.swizzle(this))).then(() => {
-            actions.forEach((action, index) => {
-                if (!action.valid)
-                    return;
-
-                let prototype = null;
-                if (this._type === WI.Recording.Type.Canvas2D)
-                    prototype = CanvasRenderingContext2D.prototype;
-                else if (this._type === WI.Recording.Type.CanvasWebGL)
-                    prototype = WebGLRenderingContext.prototype;
-
-                if (prototype) {
-                    let validName = action.name in prototype;
-                    let validFunction = !action.isFunction || typeof prototype[action.name] === "function";
-                    if (!validName || !validFunction) {
-                        action.markInvalid();
-
-                        WI.Recording.synthesizeError(WI.UIString("“%s” is invalid.").format(this._name));
-                    }
-                }
-
-                if (action.isVisual)
-                    this._visualActionIndexes.push(index);
-            });
-
-            return actions;
-        });
+        this._swizzleTask = null;
+        this._applyTask = null;
+        this._processContext = null;
+        this._processPromise = null;
     }
 
@@ -178 +157 @@
     get frames() { return this._frames; }
     get data() { return this._data; }
+    get actions() { return this._actions; }
     get visualActionIndexes() { return this._visualActionIndexes; }
-
-    get actions() { return this._actions; }
 
     get source() { return this._source; }
     set source(source) { this._source = source; }
+
+    process()
+    {
+        if (!this._processPromise) {
+            this._processPromise = new WI.WrappedPromise;
+
+            let items = this._actions.map((action, index) => { return {action, index} });
+            this._swizzleTask = new WI.YieldableTask(this, items);
+            this._applyTask = new WI.YieldableTask(this, items);
+
+            this._swizzleTask.start();
+        }
+        return this._processPromise.promise;
+    }
 
     createDisplayName(suggestedName)
@@ -301 +293 @@
     }
 
+    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.CanvasWebGL)
+            return createCanvasContext("webgl");
+
+        console.error("Unknown recording type", this._type);
+        return null;
+    }
+
     toJSON()
     {
@@ -319 +332 @@
         };
     }
+
+    // YieldableTask delegate
+
+    async yieldableTaskWillProcessItem(task, item)
+    {
+        if (task === this._swizzleTask) {
+            await item.action.swizzle(this);
+
+            this.dispatchEventToListeners(WI.Recording.Event.ProcessedActionSwizzle, {index: item.index});
+        } else if (task === this._applyTask) {
+            item.action.process(this, this._processContext);
+
+            if (item.action.isVisual)
+                this._visualActionIndexes.push(item.index);
+
+            this.dispatchEventToListeners(WI.Recording.Event.ProcessedActionApply, {index: item.index});
+        }
+    }
+
+    async yieldableTaskDidFinish(task)
+    {
+        if (task === this._swizzleTask) {
+            this._swizzleTask = null;
+
+            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 [key, value] of Object.entries(this._initialState.attributes)) {
+                    switch (key) {
+                    case "setTransform":
+                        value = [await this.swizzle(value, WI.Recording.Swizzle.DOMMatrix)];
+                        break;
+
+                    case "fillStyle":
+                    case "strokeStyle":
+                            let [gradient, pattern, string] = await Promise.all([
+                                this.swizzle(value, WI.Recording.Swizzle.CanvasGradient),
+                                this.swizzle(value, WI.Recording.Swizzle.CanvasPattern),
+                                this.swizzle(value, WI.Recording.Swizzle.String),
+                            ]);
+                            if (gradient && !pattern)
+                                value = gradient;
+                            else if (pattern && !gradient)
+                                value = pattern;
+                            else
+                                value = string;
+                        break;
+
+                    case "direction":
+                    case "font":
+                    case "globalCompositeOperation":
+                    case "imageSmoothingEnabled":
+                    case "imageSmoothingQuality":
+                    case "lineCap":
+                    case "lineJoin":
+                    case "shadowColor":
+                    case "textAlign":
+                    case "textBaseline":
+                        value = await this.swizzle(value, WI.Recording.Swizzle.String);
+                        break;
+
+                    case "setPath":
+                        value = [await this.swizzle(value[0], WI.Recording.Swizzle.Path2D)];
+                        break;
+                    }
+
+                    if (value === undefined || (Array.isArray(value) && value.includes(undefined)))
+                        continue;
+
+                    try {
+                        if (WI.RecordingAction.isFunctionForType(this._type, key))
+                            this._processContext[key](...value);
+                        else
+                            this._processContext[key] = value;
+                    } catch { }
+                }
+            }
+
+            this._applyTask.start();
+        } else if (task === this._applyTask) {
+            this._applyTask = null;
+            this._processContext = null;
+            this._processPromise.resolve();
+        }
+    }
+};
+
+WI.Recording.Event = {
+    ProcessedActionApply: "recording-processed-action-apply",
+    ProcessedActionSwizzle: "recording-processed-action-swizzle",
 };
 

trunk/Source/WebInspectorUI/UserInterface/Models/RecordingAction.js

@@ -42 +42 @@
 
         this._valid = true;
-        this._swizzledPromise = null;
-
         this._isFunction = false;
         this._isGetter = false;
         this._isVisual = false;
         this._hasVisibleEffect = undefined;
+
+        this._state = null;
         this._stateModifiers = new Set;
     }
@@ -98 +98 @@
     get isVisual() { return this._isVisual; }
     get hasVisibleEffect() { return this._hasVisibleEffect; }
+    get state() { return this._state; }
     get stateModifiers() { return this._stateModifiers; }
 
-    get state() { return this._state; }
-    set state(state) { this._state = state; }
-
-    markInvalid()
-    {
-        let wasValid = this._valid;
-        this._valid = false;
-
-        if (wasValid)
-            this.dispatchEventToListeners(WI.RecordingAction.Event.ValidityChanged);
-    }
-
-    swizzle(recording)
-    {
-        if (!this._swizzledPromise)
-            this._swizzledPromise = this._swizzle(recording);
-        return this._swizzledPromise;
-    }
-
-    apply(context, options = {})
-    {
-        if (!this.valid)
+    process(recording, context)
+    {
+        if (recording.type === WI.Recording.Type.CanvasWebGL) {
+            // We add each RecordingAction to the list of visualActionIndexes after it is processed.
+            if (this._valid && this._isVisual) {
+                let contentBefore = recording.visualActionIndexes.length ? recording.visualActionIndexes.lastValue.snapshot : recording.initialState.content;
+                this._hasVisibleEffect = this._snapshot !== contentBefore;
+            }
             return;
+        }
 
         function getContent() {
@@ -144 +132 @@
 
         let contentBefore = null;
-        let shouldCheckForChange = this._isVisual && this._hasVisibleEffect === undefined;
-        if (shouldCheckForChange)
+        if (this._valid && this._isVisual)
             contentBefore = getContent();
 
-        try {
-            let name = options.nameOverride || this._name;
-            if (this.isFunction)
-                context[name](...this._parameters);
-            else {
-                if (this.isGetter)
-                    context[name];
-                else
-                    context[name] = this._parameters[0];
-            }
-
-            if (shouldCheckForChange) {
-                this._hasVisibleEffect = !Array.shallowEqual(contentBefore, getContent());
-                if (!this._hasVisibleEffect)
-                    this.dispatchEventToListeners(WI.RecordingAction.Event.HasVisibleEffectChanged);
-            }
-        } catch {
-            this.markInvalid();
-
-            WI.Recording.synthesizeError(WI.UIString("“%s” threw an error.").format(this._name));
-        }
-    }
-
-    toJSON()
-    {
-        let json = [this._payloadName, this._payloadParameters, this._payloadSwizzleTypes, this._payloadTrace];
-        if (this._payloadSnapshot >= 0)
-            json.push(this._payloadSnapshot);
-        return json;
-    }
-
-    // Private
-
-    async _swizzle(recording)
-    {
+        this.apply(context);
+
+        if (this._valid && this._isVisual)
+            this._hasVisibleEffect = !Array.shallowEqual(contentBefore, getContent());
+
+        if (recording.type === WI.Recording.Type.Canvas2D) {
+            let matrix = context.getTransform();
+
+            this._state = {
+                currentX: context.currentX,
+                currentY: context.currentY,
+                direction: context.direction,
+                fillStyle: context.fillStyle,
+                font: context.font,
+                globalAlpha: context.globalAlpha,
+                globalCompositeOperation: context.globalCompositeOperation,
+                imageSmoothingEnabled: context.imageSmoothingEnabled,
+                imageSmoothingQuality: context.imageSmoothingQuality,
+                lineCap: context.lineCap,
+                lineDash: context.getLineDash(),
+                lineDashOffset: context.lineDashOffset,
+                lineJoin: context.lineJoin,
+                lineWidth: context.lineWidth,
+                miterLimit: context.miterLimit,
+                shadowBlur: context.shadowBlur,
+                shadowColor: context.shadowColor,
+                shadowOffsetX: context.shadowOffsetX,
+                shadowOffsetY: context.shadowOffsetY,
+                strokeStyle: context.strokeStyle,
+                textAlign: context.textAlign,
+                textBaseline: context.textBaseline,
+                transform: [matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f],
+                webkitImageSmoothingEnabled: context.webkitImageSmoothingEnabled,
+                webkitLineDash: context.webkitLineDash,
+                webkitLineDashOffset: context.webkitLineDashOffset,
+            };
+
+            if (WI.ImageUtilities.supportsCanvasPathDebugging())
+                this._state.setPath = [context.getPath()];
+        }
+    }
+
+    async swizzle(recording)
+    {
+        if (!this._valid)
+            return;
+
         let swizzleParameter = (item, index) => {
             return recording.swizzle(item, this._payloadSwizzleTypes[index]);
@@ -216 +215 @@
             this._snapshot = snapshot;
 
+        this._isFunction = WI.RecordingAction.isFunctionForType(recording.type, this._name);
+        this._isGetter = !this._isFunction && !this._parameters.length;
+
+        let visualNames = WI.RecordingAction._visualNames[recording.type];
+        this._isVisual = visualNames ? visualNames.has(this._name) : false;
+
+        if (this._valid) {
+            let prototype = null;
+            if (recording.type === WI.Recording.Type.Canvas2D)
+                prototype = CanvasRenderingContext2D.prototype;
+            else if (recording.type === WI.Recording.Type.CanvasWebGL)
+                prototype = WebGLRenderingContext.prototype;
+
+            if (prototype) {
+                let validName = name in prototype;
+                let validFunction = !this._isFunction || typeof prototype[name] === "function";
+                if (!validName || !validFunction) {
+                    this.markInvalid();
+
+                    WI.Recording.synthesizeError(WI.UIString("“%s” is invalid.").format(name));
+                }
+            }
+        }
+
         if (this._valid) {
             let parametersSpecified = this._parameters.every((parameter) => parameter !== undefined);
@@ -223 +246 @@
         }
 
-        this._isFunction = WI.RecordingAction.isFunctionForType(recording.type, this._name);
-        this._isGetter = !this._isFunction && !this._parameters.length;
-
-        let visualNames = WI.RecordingAction._visualNames[recording.type];
-        this._isVisual = visualNames ? visualNames.has(this._name) : false;
-
-        this._stateModifiers = new Set([this._name]);
-        let stateModifiers = WI.RecordingAction._stateModifiers[recording.type];
-        if (stateModifiers) {
-            let modifiedByAction = stateModifiers[this._name] || [];
-            for (let item of modifiedByAction)
-                this._stateModifiers.add(item);
-        }
+        if (this._valid) {
+            let stateModifiers = WI.RecordingAction._stateModifiers[recording.type];
+            if (stateModifiers) {
+                this._stateModifiers.add(this._name);
+                let modifiedByAction = stateModifiers[this._name] || [];
+                for (let item of modifiedByAction)
+                    this._stateModifiers.add(item);
+            }
+        }
+    }
+
+    apply(context, options = {})
+    {
+        if (!this.valid)
+            return;
+
+        try {
+            let name = options.nameOverride || this._name;
+            if (this.isFunction)
+                context[name](...this._parameters);
+            else {
+                if (this.isGetter)
+                    context[name];
+                else
+                    context[name] = this._parameters[0];
+            }
+        } catch {
+            this.markInvalid();
+
+            WI.Recording.synthesizeError(WI.UIString("“%s” threw an error.").format(this._name));
+        }
+    }
+
+    markInvalid()
+    {
+        if (!this._valid)
+            return;
+
+        this._valid = false;
+
+        this.dispatchEventToListeners(WI.RecordingAction.Event.ValidityChanged);
     }
 
@@ -277 +328 @@
 
         return [];
+    }
+
+    toJSON()
+    {
+        let json = [this._payloadName, this._payloadParameters, this._payloadSwizzleTypes, this._payloadTrace];
+        if (this._payloadSnapshot >= 0)
+            json.push(this._payloadSnapshot);
+        return json;
     }
 };
@@ -311 +370 @@
         "getImageData",
         "getLineDash",
+        "getPath",
         "isPointInPath",
         "isPointInPath",
@@ -334 +394 @@
         "setLineWidth",
         "setMiterLimit",
+        "setPath",
         "setShadow",
         "setStrokeColor",

trunk/Source/WebInspectorUI/UserInterface/Models/RecordingInitialStateAction.js

@@ -33 +33 @@
 
         this._valid = false;
-        this._swizzledPromise = Promise.resolve();
     }
 };

trunk/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.css

@@ -72 +72 @@
     line-height: 16px;
 }
+
+.sidebar > .panel.navigation.canvas > .content > .recording-content > .indeterminate-progress-spinner {
+    margin: 16px auto;
+}

trunk/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.js

@@ -53 +53 @@
         this.contentView.addSubview(this._recordingNavigationBar);
 
-        let recordingContent = this.contentView.element.appendChild(document.createElement("div"));
-        recordingContent.className = "recording-content";
+        this._recordingContentContainer = this.contentView.element.appendChild(document.createElement("div"));
+        this._recordingContentContainer.className = "recording-content";
 
         this._recordingTreeOutline = this.contentTreeOutline;
-        recordingContent.appendChild(this._recordingTreeOutline.element);
+        this._recordingContentContainer.appendChild(this._recordingTreeOutline.element);
 
         this._recordingTreeOutline.customIndent = true;
-        this._recordingTreeOutline.registerScrollVirtualizer(recordingContent, 20);
+        this._recordingTreeOutline.registerScrollVirtualizer(this._recordingContentContainer, 20);
 
         this._canvasTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._treeOutlineSelectionDidChange, this);
@@ -67 +67 @@
         WI.canvasManager.addEventListener(WI.CanvasManager.Event.RecordingStarted, this._updateRecordNavigationItem, this);
         WI.canvasManager.addEventListener(WI.CanvasManager.Event.RecordingStopped, this._updateRecordNavigationItem, this);
+
+        this._recordingProcessPromise = null;
+        this._recordingProcessSpinner = null;
     }
 
@@ -109 +112 @@
     set action(action)
     {
-        if (!this._recording)
+        if (!this._recording || this._recordingProcessPromise)
             return;
 
@@ -287 +290 @@
         this._recording[WI.CanvasSidebarPanel.SelectedActionSymbol] = treeElement.representedObject;
 
-        let recordingContentView = this.contentBrowser.showContentViewForRepresentedObject(this._recording);
+        const onlyExisting = true;
+        let recordingContentView = this.contentBrowser.contentViewForRepresentedObject(this._recording, onlyExisting);
         if (recordingContentView)
             recordingContentView.updateActionIndex(treeElement.index);
@@ -328 +332 @@
             return;
 
+        if (!this._recordingProcessSpinner) {
+            this._recordingProcessSpinner = new WI.IndeterminateProgressSpinner;
+            this._recordingContentContainer.appendChild(this._recordingProcessSpinner.element);
+        }
+
+        this.contentBrowser.showContentViewForRepresentedObject(this._recording);
+
         let recording = this._recording;
 
-        this._recording.actions.then((actions) => {
-            if (recording !== this._recording)
+        let promise = this._recording.process().then(() => {
+            if (recording !== this._recording || promise !== this._recordingProcessPromise)
                 return;
 
-            this._recordingTreeOutline.element.dataset.indent = Number.countDigits(actions.length);
-
-            if (actions[0] instanceof WI.RecordingInitialStateAction)
-                this._recordingTreeOutline.appendChild(new WI.RecordingActionTreeElement(actions[0], 0, this._recording.type));
+            if (this._recordingProcessSpinner) {
+                this._recordingProcessSpinner.element.remove();
+                this._recordingProcessSpinner = null;
+            }
+
+            this._recordingTreeOutline.element.dataset.indent = Number.countDigits(this._recording.actions.length);
+
+            if (this._recording.actions[0] instanceof WI.RecordingInitialStateAction)
+                this._recordingTreeOutline.appendChild(new WI.RecordingActionTreeElement(this._recording.actions[0], 0, this._recording.type));
 
             let cumulativeActionIndex = 1;
@@ -367 +383 @@
             }
 
-            this.action = this._recording[WI.CanvasSidebarPanel.SelectedActionSymbol] || actions[0];
+            this.action = this._recording[WI.CanvasSidebarPanel.SelectedActionSymbol] || this._recording.actions[0];
+
+            this._recordingProcessPromise = null;
         });
+
+        this._recordingProcessPromise = promise;
     }
 

trunk/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.js

@@ -40 +40 @@
 
         this.representedObject.addEventListener(WI.RecordingAction.Event.ValidityChanged, this._handleValidityChanged, this);
-        this.representedObject.addEventListener(WI.RecordingAction.Event.HasVisibleEffectChanged, this._handleHasVisibleEffectChanged, this);
     }
 
@@ -400 +399 @@
 
         this.element.dataset.index = this._index.toLocaleString();
+
+        if (this.representedObject.valid && this.representedObject.isVisual && !this.representedObject.hasVisibleEffect) {
+            this.addClassName("no-visible-effect");
+
+            const title = WI.UIString("This action causes no visual change");
+            this.status = WI.ImageUtilities.useSVGSymbol("Images/Warning.svg", "warning", title);
+        }
     }
 
@@ -431 +437 @@
         this.addClassName("invalid");
     }
-
-    _handleHasVisibleEffectChanged(event)
-    {
-        this.addClassName("no-visible-effect");
-
-        this.status = WI.ImageUtilities.useSVGSymbol("Images/Warning.svg", "warning");
-        this.status.title = WI.UIString("This action causes no visual change");
-    }
 };
 

trunk/Source/WebInspectorUI/UserInterface/Views/RecordingContentView.css

@@ -68 +68 @@
     justify-content: center;
     align-items: center;
+    position: relative;
+    width: -webkit-fill-available;
+    height: -webkit-fill-available;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/RecordingContentView.js

@@ -43 +43 @@
         let isCanvasWebGL = this.representedObject.type === WI.Recording.Type.CanvasWebGL;
         if (isCanvas2D || isCanvasWebGL) {
-            if (isCanvas2D && WI.RecordingContentView.supportsCanvasPathDebugging()) {
+            if (isCanvas2D && WI.ImageUtilities.supportsCanvasPathDebugging()) {
                 this._pathContext = null;
 
@@ -62 +62 @@
             this._exportButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, () => { this._exportRecording(); });
         }
+
+        this._processing = true;
+        this._processMessageTextView = null;
     }
 
     // Static
-
-    static supportsCanvasPathDebugging()
-    {
-        return "currentX" in CanvasRenderingContext2D.prototype && "currentY" in CanvasRenderingContext2D.prototype;
-    }
 
     static _actionModifiesPath(recordingAction)
@@ -100 +98 @@
 
         let navigationItems = [this._exportButtonNavigationItem, new WI.DividerNavigationItem];
-        if (isCanvas2D && WI.RecordingContentView.supportsCanvasPathDebugging())
+        if (isCanvas2D && WI.ImageUtilities.supportsCanvasPathDebugging())
             navigationItems.push(this._showPathButtonNavigationItem);
 
@@ -120 +118 @@
             return;
 
-        this.representedObject.actions.then((actions) => {
-            console.assert(index >= 0 && index < actions.length);
-            if (index < 0 || index >= actions.length)
-                return;
-
-            this._index = index;
-            this._updateSliderValue();
-
-            if (this.representedObject.type === WI.Recording.Type.Canvas2D)
-                this._throttler._generateContentCanvas2D(index, actions);
-            else if (this.representedObject.type === WI.Recording.Type.CanvasWebGL)
-                this._throttler._generateContentCanvasWebGL(index, actions);
-        });
+        console.assert(index >= 0 && index < this.representedObject.actions.length);
+        if (index < 0 || index >= this.representedObject.actions.length)
+            return;
+
+        this._index = index;
+
+        if (this._processing)
+            return;
+
+        this._updateSliderValue();
+
+        if (this.representedObject.type === WI.Recording.Type.Canvas2D)
+            this._throttler._generateContentCanvas2D(index);
+        else if (this.representedObject.type === WI.Recording.Type.CanvasWebGL)
+            this._throttler._generateContentCanvasWebGL(index);
+
+        this._action = this.representedObject.actions[this._index];
+
+        this.dispatchEventToListeners(WI.ContentView.Event.SupplementalRepresentedObjectsDidChange);
     }
 
@@ -189 +193 @@
         this._sliderElement.max = 0;
 
-        this.representedObject.actions.then(() => {
+        this.representedObject.addEventListener(WI.Recording.Event.ProcessedActionSwizzle, this._handleRecordingProcessedActionSwizzle, this);
+        this.representedObject.addEventListener(WI.Recording.Event.ProcessedActionApply, this._handleRecordingProcessedActionApply, this);
+
+        this.representedObject.process().then(() => {
+            if (this._processMessageTextView)
+                this._processMessageTextView.remove();
+
             sliderContainer.classList.remove("hidden");
             this._sliderElement.max = this.representedObject.visualActionIndexes.length;
             this._updateSliderValue();
+
+            this._processing = false;
+
+            let index = this._index;
+            if (!isNaN(index)) {
+                this._index = NaN;
+                this.updateActionIndex(index);
+            }
         });
     }
@@ -215 +233 @@
     }
 
-    async _generateContentCanvas2D(index, actions)
+    _generateContentCanvas2D(index)
     {
         let imageLoad = (event) => {
@@ -222 +240 @@
                 return;
 
-            this._generateContentCanvas2D(index, actions);
+            this._generateContentCanvas2D(index);
         };
 
@@ -236 +254 @@
         let snapshot = this._snapshots[snapshotIndex];
 
-        let showCanvasPath = WI.RecordingContentView.supportsCanvasPathDebugging() && WI.settings.showCanvasPath.value;
+        let showCanvasPath = WI.ImageUtilities.supportsCanvasPathDebugging() && WI.settings.showCanvasPath.value;
         let indexOfLastBeginPathAction = Infinity;
+
+        let actions = this.representedObject.actions;
 
         let applyActions = (from, to, callback) => {
@@ -332 +352 @@
                 this._pathContext.canvas.remove();
 
-            let state = {
-                currentX: snapshot.context.currentX,
-                currentY: snapshot.context.currentY,
-                direction: snapshot.context.direction,
-                fillStyle: snapshot.context.fillStyle,
-                font: snapshot.context.font,
-                globalAlpha: snapshot.context.globalAlpha,
-                globalCompositeOperation: snapshot.context.globalCompositeOperation,
-                imageSmoothingEnabled: snapshot.context.imageSmoothingEnabled,
-                imageSmoothingQuality: snapshot.context.imageSmoothingQuality,
-                lineCap: snapshot.context.lineCap,
-                lineDash: snapshot.context.getLineDash(),
-                lineDashOffset: snapshot.context.lineDashOffset,
-                lineJoin: snapshot.context.lineJoin,
-                lineWidth: snapshot.context.lineWidth,
-                miterLimit: snapshot.context.miterLimit,
-                shadowBlur: snapshot.context.shadowBlur,
-                shadowColor: snapshot.context.shadowColor,
-                shadowOffsetX: snapshot.context.shadowOffsetX,
-                shadowOffsetY: snapshot.context.shadowOffsetY,
-                strokeStyle: snapshot.context.strokeStyle,
-                textAlign: snapshot.context.textAlign,
-                textBaseline: snapshot.context.textBaseline,
-                transform: snapshot.context.getTransform(),
-                webkitImageSmoothingEnabled: snapshot.context.webkitImageSmoothingEnabled,
-                webkitLineDash: snapshot.context.webkitLineDash,
-                webkitLineDashOffset: snapshot.context.webkitLineDashOffset,
-            };
-
-            if (WI.RecordingContentView.supportsCanvasPathDebugging())
-                state.setPath = [snapshot.context.getPath()];
-
             snapshot.context.restore();
             while (saveCount-- > 0)
                 snapshot.context.restore();
-
-            return state;
         };
 
@@ -377 +363 @@
                 --snapshot.index;
 
-            snapshot.element = document.createElement("canvas");
-            snapshot.context = snapshot.element.getContext("2d", ...initialState.parameters);
-            if ("width" in initialState.attributes)
-                snapshot.element.width = initialState.attributes.width;
-            if ("height" in initialState.attributes)
-                snapshot.element.height = initialState.attributes.height;
+            snapshot.context = this.representedObject.createContext();
+            snapshot.element = snapshot.context.canvas;
 
             let lastSnapshotIndex = snapshotIndex;
@@ -393 +375 @@
             if (lastSnapshotIndex < 0) {
                 snapshot.content = this._initialContent;
-                snapshot.state = {};
-
-                for (let key in initialState.attributes) {
-                    let value = initialState.attributes[key];
-
-                    switch (key) {
-                    case "setTransform":
-                        value = [await this.representedObject.swizzle(value, WI.Recording.Swizzle.DOMMatrix)];
-                        break;
-
-                    case "fillStyle":
-                    case "strokeStyle":
-                        if (Array.isArray(value)) {
-                            let canvasStyle = await this.representedObject.swizzle(value[0], WI.Recording.Swizzle.String);
-                            if (canvasStyle.includes("gradient"))
-                                value = await this.representedObject.swizzle(value, WI.Recording.Swizzle.CanvasGradient);
-                            else if (canvasStyle === "pattern")
-                                value = await this.representedObject.swizzle(value, WI.Recording.Swizzle.CanvasPattern);
-                        } else
-                            value = await this.representedObject.swizzle(value, WI.Recording.Swizzle.String);
-                        break;
-
-                    case "direction":
-                    case "font":
-                    case "globalCompositeOperation":
-                    case "imageSmoothingEnabled":
-                    case "imageSmoothingQuality":
-                    case "lineCap":
-                    case "lineJoin":
-                    case "shadowColor":
-                    case "textAlign":
-                    case "textBaseline":
-                        value = await this.representedObject.swizzle(value, WI.Recording.Swizzle.String);
-                        break;
-
-                    case "setPath":
-                        value = [await this.representedObject.swizzle(value[0], WI.Recording.Swizzle.Path2D)];
-                        break;
-                    }
-
-                    if (value === undefined || (Array.isArray(value) && value.includes(undefined)))
-                        continue;
-
-                    snapshot.state[key] = value;
-                }
+                snapshot.state = actions[0].state;
             } else {
                 snapshot.content = this._snapshots[lastSnapshotIndex].content;
@@ -444 +382 @@
             }
 
-            snapshot.state = applyActions(startIndex, snapshot.index - 1);
+            applyActions(startIndex, snapshot.index - 1);
+            if (snapshot.index > 0)
+                snapshot.state = actions[snapshot.index - 1].state;
 
             snapshot.content = new Image;
@@ -460 +400 @@
         }
 
-        this._action = actions[this._index];
-
-        let state = applyActions(snapshot.index, this._index);
-        console.assert(!this._action.state || Object.shallowEqual(this._action.state, state));
-        if (!this._action.state)
-            this._action.state = state;
-
-        this.dispatchEventToListeners(WI.ContentView.Event.SupplementalRepresentedObjectsDidChange);
+        applyActions(snapshot.index, this._index);
 
         this._previewContainer.appendChild(snapshot.element);
@@ -473 +406 @@
     }
 
-    async _generateContentCanvasWebGL(index, actions)
+    _generateContentCanvasWebGL(index)
     {
         let imageLoad = (event) => {
@@ -480 +413 @@
                 return;
 
-            this._generateContentCanvasWebGL(index, actions);
+            this._generateContentCanvasWebGL(index);
         };
 
@@ -490 +423 @@
             return;
         }
+
+        let actions = this.representedObject.actions;
 
         let visualIndex = index;
@@ -514 +449 @@
             this._updateImageGrid();
         }
-
-        this.dispatchEventToListeners(WI.ContentView.Event.SupplementalRepresentedObjectsDidChange);
     }
 
@@ -521 +454 @@
     {
         let activated = WI.settings.showCanvasPath.value;
-        if (this._showPathButtonNavigationItem.activated !== activated) {
-            this.representedObject.actions.then((actions) => {
-                this._generateContentCanvas2D(this._index, actions);
-            });
-        }
+
+        if (this._showPathButtonNavigationItem.activated !== activated && !this._processing)
+            this._generateContentCanvas2D(this._index);
 
         this._showPathButtonNavigationItem.activated = activated;
@@ -556 +487 @@
     }
 
+    _updateProcessProgress(message, index)
+    {
+        if (this._processMessageTextView)
+            this._processMessageTextView.remove();
+
+        this._processMessageTextView = WI.createMessageTextView(message);
+        this.element.appendChild(this._processMessageTextView);
+
+        this._processProgressElement = this._processMessageTextView.appendChild(document.createElement("progress"));
+        this._processProgressElement.value = index / this.representedObject.actions.length;
+    }
+
     _showPathButtonClicked(event)
     {
@@ -580 +523 @@
         this.updateActionIndex(index);
     }
+
+    _handleRecordingProcessedActionSwizzle(event)
+    {
+        this._updateProcessProgress(WI.UIString("Loading Recording"), event.data.index);
+    }
+
+    _handleRecordingProcessedActionApply(event)
+    {
+        this._updateProcessProgress(WI.UIString("Processing Recording"), event.data.index);
+    }
 };