Diff
Modified: trunk/LayoutTests/ChangeLog (236951 => 236952)
--- trunk/LayoutTests/ChangeLog 2018-10-09 00:11:54 UTC (rev 236951)
+++ trunk/LayoutTests/ChangeLog 2018-10-09 00:14:52 UTC (rev 236952)
@@ -1,3 +1,21 @@
+2018-10-08 Devin Rousso <drou...@apple.com>
+
+ Web Inspector: allow multiple canvases to be recorded at the same time
+ https://bugs.webkit.org/show_bug.cgi?id=190305
+
+ Reviewed by Brian Burg.
+
+ * inspector/canvas/recording-2d.html:
+ * inspector/canvas/recording-bitmaprenderer.html:
+ * inspector/canvas/recording-expected.html:
+ * inspector/canvas/recording-webgl.html:
+ * inspector/canvas/recording.html:
+ * inspector/canvas/resources/recording-utilities.js:
+ (TestPage.registerInitializer.window.startRecording.handleRecordingProgress):
+ (TestPage.registerInitializer.window.startRecording):
+ (TestPage.registerInitializer.window.consoleRecord):
+ (TestPage.registerInitializer):
+
2018-10-08 Dean Jackson <d...@apple.com>
CrashTracer: backboardd at Recursion :: QuartzCore: CA::Render::Updater::prepare_sublayer0
Modified: trunk/LayoutTests/inspector/canvas/recording-2d.html (236951 => 236952)
--- trunk/LayoutTests/inspector/canvas/recording-2d.html 2018-10-09 00:11:54 UTC (rev 236951)
+++ trunk/LayoutTests/inspector/canvas/recording-2d.html 2018-10-09 00:14:52 UTC (rev 236952)
@@ -452,7 +452,7 @@
name: "Canvas.recording2D.Console",
description: "Check that a recording can be triggered by console.record().",
test(resolve, reject) {
- consoleRecord(resolve, reject);
+ consoleRecord(WI.Canvas.ContextType.Canvas2D, resolve, reject);
},
});
@@ -466,7 +466,7 @@
return;
}
- WI.canvasManager.awaitEvent(WI.CanvasManager.Event.RecordingStopped)
+ canvas.awaitEvent(WI.Canvas.Event.RecordingStopped)
.then((event) => {
let recording = event.data.recording.toJSON();
@@ -504,7 +504,6 @@
let eventCount = 0;
function handleRecordingStopped(event) {
- InspectorTest.assert(event.data.canvas === canvas, "We should have stopped recording the selected canvas.");
InspectorTest.assert(!event.data.recording, "The recording payload should be null.");
++eventCount;
@@ -511,19 +510,19 @@
if (eventCount == 1) {
InspectorTest.pass("A recording should have been started and stopped once.");
- WI.canvasManager.startRecording(canvas);
- WI.canvasManager.stopRecording();
+ canvas.startRecording();
+ canvas.stopRecording();
} else if (eventCount >= 2) {
InspectorTest.pass("A recording should have been started and stopped twice.");
- WI.canvasManager.removeEventListener(handleRecordingStopped);
+ canvas.removeEventListener(WI.Canvas.Event.RecordingStopped, handleRecordingStopped);
resolve();
}
}
- WI.canvasManager.addEventListener(WI.CanvasManager.Event.RecordingStopped, handleRecordingStopped);
+ canvas.addEventListener(WI.Canvas.Event.RecordingStopped, handleRecordingStopped);
- WI.canvasManager.startRecording(canvas);
- WI.canvasManager.stopRecording();
+ canvas.startRecording();
+ canvas.stopRecording();
},
});
Modified: trunk/LayoutTests/inspector/canvas/recording-bitmaprenderer.html (236951 => 236952)
--- trunk/LayoutTests/inspector/canvas/recording-bitmaprenderer.html 2018-10-09 00:11:54 UTC (rev 236951)
+++ trunk/LayoutTests/inspector/canvas/recording-bitmaprenderer.html 2018-10-09 00:14:52 UTC (rev 236952)
@@ -120,7 +120,7 @@
name: "Canvas.recordingBitmapRenderer.Console",
description: "Check that a recording can be triggered by console.record().",
test(resolve, reject) {
- consoleRecord(resolve, reject);
+ consoleRecord(WI.Canvas.ContextType.BitmapRenderer, resolve, reject);
},
});
Modified: trunk/LayoutTests/inspector/canvas/recording-expected.txt (236951 => 236952)
--- trunk/LayoutTests/inspector/canvas/recording-expected.txt 2018-10-09 00:11:54 UTC (rev 236951)
+++ trunk/LayoutTests/inspector/canvas/recording-expected.txt 2018-10-09 00:14:52 UTC (rev 236952)
@@ -2,7 +2,21 @@
== Running test suite: Canvas.recording
+-- Running test case: Canvas.multipleRecording
+Starting a recording of canvas 1...
+PASS: Recording started of canvas 1
+Starting a recording of canvas 2...
+PASS: Recording started of canvas 2
+Performing actions...
+PASS: Actions performed.
+Stopping the recording of canvas 1...
+PASS: There should be a recording for canvas 1.
+Stopping the recording of canvas 2...
+PASS: There should be a recording for canvas 2.
+
-- Running test case: Canvas.startRecording.InvalidCanvasId
+ERROR: No active recording for canvas
+ERROR: No active recording for canvas
PASS: Should produce an error.
Error: No canvas for given identifier.
Modified: trunk/LayoutTests/inspector/canvas/recording-webgl.html (236951 => 236952)
--- trunk/LayoutTests/inspector/canvas/recording-webgl.html 2018-10-09 00:11:54 UTC (rev 236951)
+++ trunk/LayoutTests/inspector/canvas/recording-webgl.html 2018-10-09 00:14:52 UTC (rev 236952)
@@ -546,7 +546,7 @@
name: "Canvas.recordingWebGL.Console",
description: "Check that a recording can be triggered by console.record().",
test(resolve, reject) {
- consoleRecord(resolve, reject);
+ consoleRecord(WI.Canvas.ContextType.WebGL, resolve, reject);
},
});
Modified: trunk/LayoutTests/inspector/canvas/recording.html (236951 => 236952)
--- trunk/LayoutTests/inspector/canvas/recording.html 2018-10-09 00:11:54 UTC (rev 236951)
+++ trunk/LayoutTests/inspector/canvas/recording.html 2018-10-09 00:14:52 UTC (rev 236952)
@@ -3,10 +3,70 @@
<head>
<script src=""
<script>
+let contextA = document.createElement("canvas").getContext("2d");
+let contextB = document.createElement("canvas").getContext("2d");
+
+function performActions() {
+ contextA.fill();
+ contextB.fill();
+
+ TestPage.dispatchEventToFrontend("TestPage-performActions");
+}
+
function test() {
let suite = InspectorTest.createAsyncSuite("Canvas.recording");
suite.addTestCase({
+ name: "Canvas.multipleRecording",
+ description: "Check that multiple recordings are able to be started/stopped at the same time.",
+ test(resolve, reject) {
+ let canvases = WI.canvasManager.canvases;
+ InspectorTest.assert(canvases.length === 2, "There should be two canvas contexts.");
+
+ canvases[1].awaitEvent(WI.Canvas.Event.RecordingStopped)
+ .then((event) => {
+ InspectorTest.expectThat(event.data.recording, "There should be a recording for canvas 2.");
+ })
+ .then(resolve, reject);
+
+ canvases[0].awaitEvent(WI.Canvas.Event.RecordingStopped)
+ .then((event) => {
+ InspectorTest.expectThat(event.data.recording, "There should be a recording for canvas 1.");
+
+ InspectorTest.log("Stopping the recording of canvas 2...");
+ canvases[1].stopRecording();
+ });
+
+ InspectorTest.awaitEvent("TestPage-performActions")
+ .then((event) => {
+ InspectorTest.pass("Actions performed.");
+
+ InspectorTest.log("Stopping the recording of canvas 1...");
+ canvases[0].stopRecording();
+ });
+
+ canvases[1].awaitEvent(WI.Canvas.Event.RecordingStarted)
+ .then((event) => {
+ InspectorTest.expectThat(canvases[1].recordingActive, "Recording started of canvas 2");
+
+ InspectorTest.log("Performing actions...");
+ InspectorTest.evaluateInPage(`performActions()`);
+ });
+
+ canvases[0].awaitEvent(WI.Canvas.Event.RecordingStarted)
+ .then((event) => {
+ InspectorTest.expectThat(canvases[0].recordingActive, "Recording started of canvas 1");
+
+ InspectorTest.log("Starting a recording of canvas 2...");
+ canvases[1].startRecording();
+ });
+
+ InspectorTest.log("Starting a recording of canvas 1...");
+ canvases[0].startRecording();
+ },
+ });
+
+ suite.addTestCase({
name: "Canvas.startRecording.InvalidCanvasId",
description: "Invalid canvas identifiers should cause an error.",
test(resolve, reject) {
Modified: trunk/LayoutTests/inspector/canvas/resources/recording-utilities.js (236951 => 236952)
--- trunk/LayoutTests/inspector/canvas/resources/recording-utilities.js 2018-10-09 00:11:54 UTC (rev 236951)
+++ trunk/LayoutTests/inspector/canvas/resources/recording-utilities.js 2018-10-09 00:14:52 UTC (rev 236952)
@@ -84,16 +84,16 @@
let bufferUsed = 0;
let frameCount = 0;
function handleRecordingProgress(event) {
- InspectorTest.assert(event.data.frameCount > frameCount, "Additional frames were captured for this progress event.");
- frameCount = event.data.frameCount;
+ InspectorTest.assert(canvas.recordingFrameCount > frameCount, "Additional frames were captured for this progress event.");
+ frameCount = canvas.recordingFrameCount;
- InspectorTest.assert(event.data.bufferUsed > bufferUsed, "Total memory usage increases with each progress event.");
- bufferUsed = event.data.bufferUsed;
+ InspectorTest.assert(canvas.recordingBufferUsed > bufferUsed, "Total memory usage increases with each progress event.");
+ bufferUsed = canvas.recordingBufferUsed;
}
- WI.canvasManager.addEventListener(WI.CanvasManager.Event.RecordingProgress, handleRecordingProgress);
+ canvas.addEventListener(WI.Canvas.Event.RecordingProgress, handleRecordingProgress);
- WI.canvasManager.awaitEvent(WI.CanvasManager.Event.RecordingStopped).then((event) => {
- WI.canvasManager.removeEventListener(WI.CanvasManager.Event.RecordingProgress, handleRecordingProgress);
+ canvas.awaitEvent(WI.Canvas.Event.RecordingStopped).then((event) => {
+ canvas.removeEventListener(WI.Canvas.Event.RecordingProgress, handleRecordingProgress);
InspectorTest.evaluateInPage(`cancelActions()`);
@@ -120,9 +120,20 @@
return canvas;
};
- window.consoleRecord = function(resolve, reject) {
- WI.canvasManager.awaitEvent(WI.CanvasManager.Event.RecordingStopped).then((event) => {
+ window.consoleRecord = function(type, resolve, reject) {
+ let canvas = getCanvas(type);
+ if (!canvas) {
+ reject(`Missing canvas with type "${type}".`);
+ return;
+ }
+
+ canvas.awaitEvent(WI.Canvas.Event.RecordingStopped).then((event) => {
let recording = event.data.recording;
+
+ InspectorTest.assert(recording.source === canvas, "Recording should be of the given canvas.");
+ InspectorTest.assert(recording.source.contextType === type, `Recording should be of a canvas with type "${type}".`);
+ InspectorTest.assert(recording.source.recordingCollection.has(recording), "Recording should be in the canvas' list of recordings.");
+
InspectorTest.expectEqual(recording.displayName, "TEST", "The recording should have the name \"TEST\".");
InspectorTest.expectEqual(recording.frames.length, 1, "The recording should have one frame.");
InspectorTest.expectEqual(recording.frames[0].actions.length, 1, "The first frame should have one action.");
Modified: trunk/Source/WebInspectorUI/ChangeLog (236951 => 236952)
--- trunk/Source/WebInspectorUI/ChangeLog 2018-10-09 00:11:54 UTC (rev 236951)
+++ trunk/Source/WebInspectorUI/ChangeLog 2018-10-09 00:14:52 UTC (rev 236952)
@@ -1,5 +1,98 @@
2018-10-08 Devin Rousso <drou...@apple.com>
+ Web Inspector: allow multiple canvases to be recorded at the same time
+ https://bugs.webkit.org/show_bug.cgi?id=190305
+
+ Reviewed by Brian Burg.
+
+ Moved the logic for maintaining whether a canvas is actively recording from
+ `WI.CanvasManager` to `WI.Canvas`, meaning that each canvas can now record independently of
+ every other canvas in the page. If multiple recordings are all finished simultaneously, only
+ show the first one to be recieved by the frontend.
+
+ * UserInterface/Controllers/CanvasManager.js:
+ (WI.CanvasManager):
+ (WI.CanvasManager.prototype.recordingProgress):
+ (WI.CanvasManager.prototype.recordingFinished):
+ (WI.CanvasManager.prototype.programCreated):
+ (WI.CanvasManager.prototype.programDeleted):
+ (WI.CanvasManager.prototype._removeCanvas):
+ (WI.CanvasManager.prototype._mainResourceDidChange):
+ (WI.CanvasManager.prototype.get recordingCanvas): Deleted.
+ (WI.CanvasManager.prototype.startRecording): Deleted.
+ (WI.CanvasManager.prototype.stopRecording): Deleted.
+ (WI.CanvasManager.prototype._dispatchShaderProgramRemoved): Deleted.
+
+ * UserInterface/Models/Canvas.js:
+ (WI.Canvas.prototype.get recordingFrameCount): Added.
+ (WI.Canvas.prototype.get recordingBufferUsed): Added.
+ (WI.Canvas.prototype.get recordingActive): Added.
+ (WI.Canvas.prototype.get isRecording): Deleted.
+ (WI.Canvas.prototype.startRecording): Added.
+ (WI.Canvas.prototype.stopRecording): Added.
+ (WI.Canvas.prototype.recordingProgress): Added.
+ (WI.Canvas.prototype.recordingFinished): Added.
+
+ * UserInterface/Views/CanvasTabContentView.js:
+ (WI.CanvasTabContentView.prototype.attached):
+ (WI.CanvasTabContentView.prototype.detached):
+ (WI.CanvasTabContentView.prototype._recordingImportedOrStopped):
+ (WI.CanvasTabContentView.prototype._handleSpace):
+ (WI.CanvasTabContentView):
+
+ * UserInterface/Views/CanvasOverviewContentView.css:
+ (.content-view.canvas-overview .content-view.canvas.recording-active): Added.
+ (.content-view.canvas-overview .content-view.canvas.recording-active > header): Added.
+ (.content-view.canvas-overview .content-view.canvas.recording-active > header > .titles > .title): Added.
+ (.content-view.canvas-overview .content-view.canvas.recording-active > header > .titles > .subtitle): Added.
+ (.content-view.canvas-overview .content-view.canvas.recording-active > header > .navigation-bar > .item): Added.
+ (.content-view.canvas-overview .content-view.canvas:matches(:hover, .recording-active) > header > .navigation-bar): Added.
+ (.content-view.canvas-overview .content-view.canvas:not(.recording-active) > header > .navigation-bar > .item.record-start-stop.disabled): Added.
+ (.content-view.canvas-overview .content-view.canvas:not(.recording-active) > header > .navigation-bar > .item.record-start-stop:not(.disabled):hover): Added.
+ (.content-view.canvas-overview .content-view.canvas:not(.recording-active) > header > .navigation-bar > .item.record-start-stop:not(.disabled):active): Added.
+ (.content-view.canvas-overview .content-view.canvas.recording-active > .progress-vie): Added.
+ (.content-view.canvas-overview .content-view.canvas.recording-active > .preview): Added.
+ (.content-view.canvas-overview .content-view.canvas.recording-active): Added.
+ (.content-view.canvas-overview .content-view.canvas.recording-active > header): Added.
+ (.content-view.canvas-overview .content-view.canvas.recording-active > header > .titles > .subtitle): Added.
+ (.content-view.canvas-overview .content-view.canvas.is-recording): Deleted.
+ (.content-view.canvas-overview .content-view.canvas.is-recording > header): Deleted.
+ (.content-view.canvas-overview .content-view.canvas.is-recording > header > .titles > .title): Deleted.
+ (.content-view.canvas-overview .content-view.canvas.is-recording > header > .titles > .subtitle): Deleted.
+ (.content-view.canvas-overview .content-view.canvas.is-recording > header > .navigation-bar > .item): Deleted.
+ (.content-view.canvas-overview .content-view.canvas:matches(:hover, .is-recording) > header > .navigation-bar): Deleted.
+ (.content-view.canvas-overview .content-view.canvas:not(.is-recording) > header > .navigation-bar > .item.record-start-stop.disabled): Deleted.
+ (.content-view.canvas-overview .content-view.canvas:not(.is-recording) > header > .navigation-bar > .item.record-start-stop:not(.disabled):hover): Deleted.
+ (.content-view.canvas-overview .content-view.canvas:not(.is-recording) > header > .navigation-bar > .item.record-start-stop:not(.disabled):active): Deleted.
+ (.content-view.canvas-overview .content-view.canvas.is-recording > .progress-vie): Deleted.
+ (.content-view.canvas-overview .content-view.canvas.is-recording > .preview): Deleted.
+ (.content-view.canvas-overview .content-view.canvas.is-recording): Deleted.
+ (.content-view.canvas-overview .content-view.canvas.is-recording > header): Deleted.
+ (.content-view.canvas-overview .content-view.canvas.is-recording > header > .titles > .subtitle): Deleted.
+
+ * UserInterface/Views/CanvasContentView.js:
+ (WI.CanvasContentView.prototype.attached):
+ (WI.CanvasContentView.prototype.detached):
+ (WI.CanvasContentView.prototype._toggleRecording):
+ (WI.CanvasContentView.prototype._recordingProgress):
+ (WI.CanvasContentView.prototype._recordingStopped):
+ (WI.CanvasContentView.prototype._shaderProgramAdded):
+ (WI.CanvasContentView.prototype._shaderProgramRemoved):
+ (WI.CanvasContentView.prototype._updateRecordNavigationItem):
+ (WI.CanvasContentView.prototype._updateProgressView):
+
+ * UserInterface/Views/CanvasSidebarPanel.js:
+ (WI.CanvasSidebarPanel):
+ (WI.CanvasSidebarPanel.prototype.set canvas):
+ (WI.CanvasSidebarPanel.prototype._toggleRecording):
+ (WI.CanvasSidebarPanel.prototype._updateRecordNavigationItem):
+
+ * UserInterface/Views/CanvasTreeElement.js:
+ (WI.CanvasTreeElement):
+ (WI.CanvasTreeElement.prototype._updateStatus):
+
+2018-10-08 Devin Rousso <drou...@apple.com>
+
Web Inspector: replace Range.svg icon
https://bugs.webkit.org/show_bug.cgi?id=190372
Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/CanvasManager.js (236951 => 236952)
--- trunk/Source/WebInspectorUI/UserInterface/Controllers/CanvasManager.js 2018-10-09 00:11:54 UTC (rev 236951)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/CanvasManager.js 2018-10-09 00:14:52 UTC (rev 236952)
@@ -34,9 +34,6 @@
this._canvasIdentifierMap = new Map;
this._shaderProgramIdentifierMap = new Map;
- this._recordingCanvas = null;
- this._recordingFrameMap = new Map;
-
if (window.CanvasAgent)
CanvasAgent.enable();
}
@@ -53,8 +50,6 @@
return [...this._shaderProgramIdentifierMap.values()];
}
- get recordingCanvas() { return this._recordingCanvas; }
-
importRecording()
{
WI.loadDataFromFile((data, filename) => {
@@ -84,43 +79,6 @@
});
}
- startRecording(canvas, singleFrame)
- {
- console.assert(!this._recordingCanvas, "Recording already started.");
- if (this._recordingCanvas)
- return;
-
- this._recordingCanvas = canvas;
-
- CanvasAgent.startRecording(canvas.identifier, singleFrame, (error) => {
- if (error) {
- console.error(error);
- this._recordingCanvas = null;
- return;
- }
-
- this.dispatchEventToListeners(WI.CanvasManager.Event.RecordingStarted, {canvas});
- });
- }
-
- stopRecording()
- {
- console.assert(this._recordingCanvas, "No recording started.");
- if (!this._recordingCanvas)
- return;
-
- let canvas = this._recordingCanvas;
-
- CanvasAgent.stopRecording(canvas.identifier, (error) => {
- if (!error)
- return;
-
- console.error(error);
- this._recordingCanvas = null;
- this.dispatchEventToListeners(WI.CanvasManager.Event.RecordingStopped, {canvas, recording: null});
- });
- }
-
canvasAdded(canvasPayload)
{
// Called from WI.CanvasObserver.
@@ -178,19 +136,7 @@
if (!canvas)
return;
- let existingFrames = this._recordingFrameMap.get(canvasIdentifier);
- if (!existingFrames) {
- existingFrames = [];
- this._recordingFrameMap.set(canvasIdentifier, existingFrames);
- }
-
- existingFrames.push(...framesPayload.map(WI.RecordingFrame.fromPayload));
-
- this.dispatchEventToListeners(WI.CanvasManager.Event.RecordingProgress, {
- canvas,
- frameCount: existingFrames.length,
- bufferUsed,
- });
+ canvas.recordingProgress(framesPayload, bufferUsed);
}
recordingFinished(canvasIdentifier, recordingPayload)
@@ -199,24 +145,10 @@
let canvas = this._canvasIdentifierMap.get(canvasIdentifier);
console.assert(canvas);
-
- let fromConsole = canvas !== this._recordingCanvas;
- if (!fromConsole)
- this._recordingCanvas = null;
-
if (!canvas)
return;
- let frames = this._recordingFrameMap.take(canvasIdentifier);
- let recording = recordingPayload ? WI.Recording.fromPayload(recordingPayload, frames) : null;
- if (recording) {
- recording.source = canvas;
- recording.createDisplayName(recordingPayload.name);
-
- canvas.recordingCollection.add(recording);
- }
-
- this.dispatchEventToListeners(WI.CanvasManager.Event.RecordingStopped, {canvas, recording, fromConsole});
+ canvas.recordingFinished(recordingPayload);
}
extensionEnabled(canvasIdentifier, extension)
@@ -246,8 +178,6 @@
this._shaderProgramIdentifierMap.set(program.identifier, program);
canvas.shaderProgramCollection.add(program);
-
- this.dispatchEventToListeners(WI.CanvasManager.Event.ShaderProgramAdded, {program});
}
programDeleted(programIdentifier)
@@ -260,8 +190,6 @@
return;
program.canvas.shaderProgramCollection.remove(program);
-
- this._dispatchShaderProgramRemoved(program);
}
// Private
@@ -268,10 +196,8 @@
_removeCanvas(canvas)
{
- for (let program of canvas.shaderProgramCollection) {
+ for (let program of canvas.shaderProgramCollection)
this._shaderProgramIdentifierMap.delete(program.identifier);
- this._dispatchShaderProgramRemoved(program);
- }
for (let recording of canvas.recordingCollection) {
recording.source = null;
@@ -295,11 +221,6 @@
this._shaderProgramIdentifierMap.clear();
this._canvasIdentifierMap.clear();
}
-
- _dispatchShaderProgramRemoved(program)
- {
- this.dispatchEventToListeners(WI.CanvasManager.Event.ShaderProgramRemoved, {program});
- }
};
WI.CanvasManager.Event = {
@@ -306,9 +227,4 @@
CanvasAdded: "canvas-manager-canvas-was-added",
CanvasRemoved: "canvas-manager-canvas-was-removed",
RecordingImported: "canvas-manager-recording-imported",
- RecordingStarted: "canvas-manager-recording-started",
- RecordingProgress: "canvas-manager-recording-progress",
- RecordingStopped: "canvas-manager-recording-stopped",
- ShaderProgramAdded: "canvas-manager-shader-program-added",
- ShaderProgramRemoved: "canvas-manager-shader-program-removed",
};
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/Canvas.js (236951 => 236952)
--- trunk/Source/WebInspectorUI/UserInterface/Models/Canvas.js 2018-10-09 00:11:54 UTC (rev 236951)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/Canvas.js 2018-10-09 00:14:52 UTC (rev 236952)
@@ -48,6 +48,10 @@
this._nextShaderProgramDisplayNumber = 1;
this._requestNodePromise = null;
+
+ this._recordingState = WI.Canvas.RecordingState.Inactive;
+ this._recordingFrames = [];
+ this._recordingBufferUsed = 0;
}
// Static
@@ -117,10 +121,12 @@
get backtrace() { return this._backtrace; }
get shaderProgramCollection() { return this._shaderProgramCollection; }
get recordingCollection() { return this._recordingCollection; }
+ get recordingFrameCount() { return this._recordingFrames.length; }
+ get recordingBufferUsed() { return this._recordingBufferUsed; }
- get isRecording()
+ get recordingActive()
{
- return WI.canvasManager.recordingCanvas === this;
+ return this._recordingState !== WI.Canvas.RecordingState.Inactive;
}
get memoryCost()
@@ -257,6 +263,30 @@
});
}
+ startRecording(singleFrame)
+ {
+ CanvasAgent.startRecording(this._identifier, singleFrame, (error) => {
+ if (error) {
+ console.error(error);
+ return;
+ }
+
+ this._recordingState = WI.Canvas.RecordingState.Active;
+ this._recordingFrames = [];
+ this._recordingBufferUsed = 0;
+
+ this.dispatchEventToListeners(WI.Canvas.Event.RecordingStarted);
+ });
+ }
+
+ stopRecording()
+ {
+ CanvasAgent.stopRecording(this._identifier, (error) => {
+ if (error)
+ console.error(error);
+ });
+ }
+
saveIdentityToCookie(cookie)
{
if (this._cssCanvasName)
@@ -287,6 +317,38 @@
this.dispatchEventToListeners(WI.Canvas.Event.CSSCanvasClientNodesChanged);
}
+ recordingProgress(framesPayload, bufferUsed)
+ {
+ // Called from WI.CanvasManager.
+
+ this._recordingFrames.push(...framesPayload.map(WI.RecordingFrame.fromPayload));
+
+ this._recordingBufferUsed = bufferUsed;
+
+ this.dispatchEventToListeners(WI.Canvas.Event.RecordingProgress);
+ }
+
+ recordingFinished(recordingPayload)
+ {
+ // Called from WI.CanvasManager.
+
+ let fromConsole = !this.recordingActive;
+
+ let recording = recordingPayload ? WI.Recording.fromPayload(recordingPayload, this._recordingFrames) : null;
+ if (recording) {
+ recording.source = this;
+ recording.createDisplayName(recordingPayload.name);
+
+ this._recordingCollection.add(recording);
+ }
+
+ this._recordingState = WI.Canvas.RecordingState.Inactive;
+ this._recordingFrames = [];
+ this._recordingBufferUsed = 0;
+
+ this.dispatchEventToListeners(WI.Canvas.Event.RecordingStopped, {recording, fromConsole});
+ }
+
nextShaderProgramDisplayNumber()
{
// Called from WI.ShaderProgram.
@@ -308,8 +370,16 @@
WebGPU: "webgpu",
};
+WI.Canvas.RecordingState = {
+ Inactive: "canvas-recording-state-inactive",
+ Active: "canvas-recording-state-active",
+};
+
WI.Canvas.Event = {
MemoryChanged: "canvas-memory-changed",
ExtensionEnabled: "canvas-extension-enabled",
CSSCanvasClientNodesChanged: "canvas-css-canvas-client-nodes-changed",
+ RecordingStarted: "canvas-recording-started",
+ RecordingProgress: "canvas-recording-progress",
+ RecordingStopped: "canvas-recording-stopped",
};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CanvasContentView.js (236951 => 236952)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CanvasContentView.js 2018-10-09 00:11:54 UTC (rev 236951)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CanvasContentView.js 2018-10-09 00:14:52 UTC (rev 236952)
@@ -195,6 +195,11 @@
super.attached();
this.representedObject.addEventListener(WI.Canvas.Event.MemoryChanged, this._updateMemoryCost, this);
+ this.representedObject.addEventListener(WI.Canvas.Event.RecordingStarted, this._recordingStarted, this);
+ this.representedObject.addEventListener(WI.Canvas.Event.RecordingProgress, this._recordingProgress, this);
+ this.representedObject.addEventListener(WI.Canvas.Event.RecordingStopped, this._recordingStopped, this);
+ this.representedObject.shaderProgramCollection.addEventListener(WI.Collection.Event.ItemAdded, this._shaderProgramAdded, this);
+ this.representedObject.shaderProgramCollection.addEventListener(WI.Collection.Event.ItemRemoved, this._shaderProgramRemoved, this);
this.representedObject.requestNode().then((node) => {
console.assert(!this._canvasNode || this._canvasNode === node);
@@ -206,12 +211,6 @@
this._canvasNode.addEventListener(WI.DOMNode.Event.AttributeRemoved, this._refreshPixelSize, this);
});
- WI.canvasManager.addEventListener(WI.CanvasManager.Event.RecordingStarted, this._recordingStarted, this);
- WI.canvasManager.addEventListener(WI.CanvasManager.Event.RecordingProgress, this._recordingProgress, this);
- WI.canvasManager.addEventListener(WI.CanvasManager.Event.RecordingStopped, this._recordingStopped, this);
- WI.canvasManager.addEventListener(WI.CanvasManager.Event.ShaderProgramAdded, this._shaderProgramAdded, this);
- WI.canvasManager.addEventListener(WI.CanvasManager.Event.ShaderProgramRemoved, this._shaderProgramRemoved, this);
-
WI.settings.showImageGrid.addEventListener(WI.Setting.Event.Changed, this._updateImageGrid, this);
}
@@ -218,6 +217,7 @@
detached()
{
this.representedObject.removeEventListener(null, null, this);
+ this.representedObject.shaderProgramCollection.removeEventListener(null, null, this);
if (this._canvasNode) {
this._canvasNode.removeEventListener(null, null, this);
@@ -224,7 +224,6 @@
this._canvasNode = null;
}
- WI.canvasManager.removeEventListener(null, null, this);
WI.settings.showImageGrid.removeEventListener(null, null, this);
super.detached();
@@ -248,11 +247,11 @@
_toggleRecording(event)
{
- if (this.representedObject.isRecording)
- WI.canvasManager.stopRecording();
- else if (!WI.canvasManager.recordingCanvas) {
+ if (this.representedObject.recordingActive)
+ this.representedObject.stopRecording();
+ else {
let singleFrame = event.data.nativeEvent.shiftKey;
- WI.canvasManager.startRecording(this.representedObject, singleFrame);
+ this.representedObject.startRecording(singleFrame);
}
}
@@ -264,41 +263,23 @@
_recordingProgress(event)
{
- let {canvas, frameCount, bufferUsed} = event.data;
- if (canvas !== this.representedObject)
- return;
-
- this._updateProgressView(frameCount, bufferUsed);
+ this._updateProgressView();
}
_recordingStopped(event)
{
this._updateRecordNavigationItem();
-
- let {canvas} = event.data;
- if (canvas !== this.representedObject)
- return;
-
this._updateProgressView();
-
this._updateViewRelatedItems();
}
_shaderProgramAdded(event)
{
- let {shaderProgram} = event.data;
- if (!shaderProgram || shaderProgram.canvas !== this.representedObject)
- return;
-
this._updateViewRelatedItems();
}
_shaderProgramRemoved(event)
{
- let {shaderProgram} = event.data;
- if (!shaderProgram || shaderProgram.canvas !== this.representedObject)
- return;
-
this._updateViewRelatedItems();
}
@@ -382,18 +363,15 @@
if (!this._recordButtonNavigationItem)
return;
- let isRecording = this.representedObject.isRecording;
- this._recordButtonNavigationItem.enabled = isRecording || !WI.canvasManager.recordingCanvas;
- this._recordButtonNavigationItem.toggled = isRecording;
-
- this._refreshButtonNavigationItem.enabled = !isRecording;
-
- this.element.classList.toggle("is-recording", isRecording);
+ let recordingActive = this.representedObject.recordingActive;
+ this._recordButtonNavigationItem.toggled = recordingActive;
+ this._refreshButtonNavigationItem.enabled = !recordingActive;
+ this.element.classList.toggle("recording-active", recordingActive);
}
- _updateProgressView(frameCount, bufferUsed)
+ _updateProgressView()
{
- if (!this.representedObject.isRecording) {
+ if (!this.representedObject.recordingActive) {
if (this._progressView && this._progressView.parentView) {
this.removeSubview(this._progressView);
this._progressView = null;
@@ -407,15 +385,15 @@
this.addSubview(this._progressView);
}
- let title;
- if (frameCount) {
- let formatString = frameCount === 1 ? WI.UIString("%d Frame") : WI.UIString("%d Frames");
- title = formatString.format(frameCount);
+ let title = null;
+ if (this.representedObject.recordingFrameCount) {
+ let formatString = this.representedObject.recordingFrameCount === 1 ? WI.UIString("%d Frame") : WI.UIString("%d Frames");
+ title = formatString.format(this.representedObject.recordingFrameCount);
} else
title = WI.UIString("Waiting for frames…");
this._progressView.title = title;
- this._progressView.subtitle = bufferUsed ? Number.bytesToString(bufferUsed) : "";
+ this._progressView.subtitle = this.representedObject.recordingBufferUsed ? Number.bytesToString(this.representedObject.recordingBufferUsed) : "";
}
_updateViewRelatedItems()
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css (236951 => 236952)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css 2018-10-09 00:11:54 UTC (rev 236951)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css 2018-10-09 00:14:52 UTC (rev 236952)
@@ -43,7 +43,7 @@
cursor: pointer;
}
-.content-view.canvas-overview .content-view.canvas.is-recording {
+.content-view.canvas-overview .content-view.canvas.recording-active {
border-color: red;
}
@@ -62,7 +62,7 @@
font-size: 13px;
}
-.content-view.canvas-overview .content-view.canvas.is-recording > header {
+.content-view.canvas-overview .content-view.canvas.recording-active > header {
background-color: red;
}
@@ -84,15 +84,15 @@
content: " — ";
}
-.content-view.canvas-overview .content-view.canvas.is-recording > header > .titles > .title {
+.content-view.canvas-overview .content-view.canvas.recording-active > header > .titles > .title {
color: white;
}
-.content-view.canvas-overview .content-view.canvas.is-recording > header > .titles > .subtitle {
+.content-view.canvas-overview .content-view.canvas.recording-active > header > .titles > .subtitle {
color: var(--selected-secondary-text-color);
}
-.content-view.canvas-overview .content-view.canvas.is-recording > header > .navigation-bar > .item {
+.content-view.canvas-overview .content-view.canvas.recording-active > header > .navigation-bar > .item {
filter: brightness(0) invert();
}
@@ -103,30 +103,30 @@
transition: opacity 200ms ease-in-out;
}
-.content-view.canvas-overview .content-view.canvas:matches(:hover, .is-recording) > header > .navigation-bar {
+.content-view.canvas-overview .content-view.canvas:matches(:hover, .recording-active) > header > .navigation-bar {
opacity: 1;
transition: opacity 200ms ease-in-out;
}
-.content-view.canvas-overview .content-view.canvas:not(.is-recording) > header > .navigation-bar > .item.record-start-stop.disabled {
+.content-view.canvas-overview .content-view.canvas:not(.recording-active) > header > .navigation-bar > .item.record-start-stop.disabled {
filter: grayscale();
opacity: 0.5;
}
-.content-view.canvas-overview .content-view.canvas:not(.is-recording) > header > .navigation-bar > .item.record-start-stop:not(.disabled):hover {
+.content-view.canvas-overview .content-view.canvas:not(.recording-active) > header > .navigation-bar > .item.record-start-stop:not(.disabled):hover {
filter: brightness(95%);
}
-.content-view.canvas-overview .content-view.canvas:not(.is-recording) > header > .navigation-bar > .item.record-start-stop:not(.disabled):active {
+.content-view.canvas-overview .content-view.canvas:not(.recording-active) > header > .navigation-bar > .item.record-start-stop:not(.disabled):active {
filter: brightness(80%);
}
-.content-view.canvas-overview .content-view.canvas.is-recording > .progress-view,
+.content-view.canvas-overview .content-view.canvas.recording-active > .progress-view,
.content-view.canvas-overview .content-view.canvas > .preview {
height: 280px;
}
-.content-view.canvas-overview .content-view.canvas.is-recording > .preview {
+.content-view.canvas-overview .content-view.canvas.recording-active > .preview {
display: none;
}
@@ -196,12 +196,12 @@
background-color: var(--background-color-secondary);
}
- .content-view.canvas-overview .content-view.canvas.is-recording {
+ .content-view.canvas-overview .content-view.canvas.recording-active {
--recording-color: hsl(0, 100%, 39%);
border-color: var(--recording-color);
}
- .content-view.canvas-overview .content-view.canvas.is-recording > header {
+ .content-view.canvas-overview .content-view.canvas.recording-active > header {
background-color: var(--recording-color);
}
@@ -218,7 +218,7 @@
filter: invert();
}
- .content-view.canvas-overview .content-view.canvas.is-recording > header > .titles > .subtitle {
+ .content-view.canvas-overview .content-view.canvas.recording-active > header > .titles > .subtitle {
color: unset;
opacity: 0.5
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.js (236951 => 236952)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.js 2018-10-09 00:11:54 UTC (rev 236951)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.js 2018-10-09 00:14:52 UTC (rev 236952)
@@ -65,9 +65,6 @@
this._canvasTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._treeOutlineSelectionDidChange, this);
this._recordingTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._treeOutlineSelectionDidChange, this);
- WI.canvasManager.addEventListener(WI.CanvasManager.Event.RecordingStarted, this._updateRecordNavigationItem, this);
- WI.canvasManager.addEventListener(WI.CanvasManager.Event.RecordingStopped, this._updateRecordNavigationItem, this);
-
this._recordingProcessingOptionsContainer = null;
this._selectedRecordingActionIndex = NaN;
@@ -85,11 +82,15 @@
if (this._canvas === canvas)
return;
- if (this._canvas)
+ if (this._canvas) {
+ this._canvas.removeEventListener(null, null, this);
this._canvas.recordingCollection.removeEventListener(null, null, this);
+ }
this._canvas = canvas;
if (this._canvas) {
+ this._canvas.addEventListener(WI.Canvas.Event.RecordingStarted, this._updateRecordNavigationItem, this);
+ this._canvas.addEventListener(WI.Canvas.Event.RecordingStopped, this._updateRecordNavigationItem, this);
this._canvas.recordingCollection.addEventListener(WI.Collection.Event.ItemAdded, this._recordingAdded, this);
this._canvas.recordingCollection.addEventListener(WI.Collection.Event.ItemRemoved, this._recordingRemoved, this);
}
@@ -283,11 +284,11 @@
if (!this._canvas)
return;
- if (this._canvas.isRecording)
- WI.canvasManager.stopRecording();
- else if (!WI.canvasManager.recordingCanvas) {
+ if (this._canvas.recordingActive)
+ this._canvas.stopRecording();
+ else {
let singleFrame = event.data.nativeEvent.shiftKey;
- WI.canvasManager.startRecording(this._canvas, singleFrame);
+ this._canvas.startRecording(singleFrame);
}
}
@@ -445,9 +446,7 @@
return;
}
- let isRecording = this._canvas.isRecording;
- this._recordButtonNavigationItem.enabled = isRecording || !WI.canvasManager.recordingCanvas;
- this._recordButtonNavigationItem.toggled = isRecording;
+ this._recordButtonNavigationItem.toggled = this._canvas.recordingActive;
}
_updateRecordingScopeBar()
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CanvasTabContentView.js (236951 => 236952)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CanvasTabContentView.js 2018-10-09 00:11:54 UTC (rev 236951)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CanvasTabContentView.js 2018-10-09 00:14:52 UTC (rev 236952)
@@ -125,7 +125,7 @@
WI.canvasManager.addEventListener(WI.CanvasManager.Event.CanvasAdded, this._handleCanvasAdded, this);
WI.canvasManager.addEventListener(WI.CanvasManager.Event.CanvasRemoved, this._handleCanvasRemoved, this);
WI.canvasManager.addEventListener(WI.CanvasManager.Event.RecordingImported, this._recordingImportedOrStopped, this);
- WI.canvasManager.addEventListener(WI.CanvasManager.Event.RecordingStopped, this._recordingImportedOrStopped, this);
+ WI.Canvas.addEventListener(WI.Canvas.Event.RecordingStopped, this._recordingImportedOrStopped, this);
let canvases = new Set([...this._canvasCollection, ...WI.canvasManager.canvases]);
@@ -142,8 +142,8 @@
detached()
{
+ WI.Canvas.removeEventListener(null, null, this);
WI.canvasManager.removeEventListener(null, null, this);
- WI.RecordingContentView.removeEventListener(null, null, this);
super.detached();
}
@@ -214,7 +214,7 @@
return;
this._recordingAdded(recording, {
- suppressShowRecording: event.data.fromConsole,
+ suppressShowRecording: event.data.fromConsole || this.contentBrowser.currentRepresentedObjects.some((representedObject) => representedObject instanceof WI.Recording),
});
}
@@ -243,11 +243,11 @@
if (!canvas)
return;
- if (canvas.isRecording)
- WI.canvasManager.stopRecording();
- else if (!WI.canvasManager.recordingCanvas) {
+ if (canvas.recordingActive)
+ canvas.stopRecording();
+ else {
let singleFrame = !!event.shiftKey;
- WI.canvasManager.startRecording(canvas, singleFrame);
+ canvas.startRecording(singleFrame);
}
event.preventDefault();
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CanvasTreeElement.js (236951 => 236952)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CanvasTreeElement.js 2018-10-09 00:11:54 UTC (rev 236951)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CanvasTreeElement.js 2018-10-09 00:14:52 UTC (rev 236952)
@@ -34,9 +34,8 @@
this.registerFolderizeSettings("shader-programs", WI.UIString("Shader Programs"), this.representedObject.shaderProgramCollection, WI.ShaderProgramTreeElement);
- WI.canvasManager.addEventListener(WI.CanvasManager.Event.RecordingStarted, this._updateStatus, this);
- WI.canvasManager.addEventListener(WI.CanvasManager.Event.RecordingStopped, this._updateStatus, this);
-
+ this.representedObject.addEventListener(WI.Canvas.Event.RecordingStarted, this._updateStatus, this);
+ this.representedObject.addEventListener(WI.Canvas.Event.RecordingStopped, this._updateStatus, this);
this.representedObject.shaderProgramCollection.addEventListener(WI.Collection.Event.ItemAdded, this._handleItemAdded, this);
this.representedObject.shaderProgramCollection.addEventListener(WI.Collection.Event.ItemRemoved, this._handleItemRemoved, this);
@@ -137,14 +136,14 @@
_updateStatus()
{
- if (this.representedObject.isRecording) {
- if (!this.status || !this.status[WI.CanvasTreeElement.SpinnerSymbol]) {
+ if (this.representedObject.recordingActive) {
+ if (!this.status || !this.status.__showingSpinner) {
let spinner = new WI.IndeterminateProgressSpinner;
this.status = spinner.element;
- this.status[WI.CanvasTreeElement.SpinnerSymbol] = true;
+ this.status.__showingSpinner = true;
}
} else {
- if (this.status && this.status[WI.CanvasTreeElement.SpinnerSymbol])
+ if (this.status && this.status.__showingSpinner)
this.status = "";
}
}
