Web Inspector: Canvas tab: show detailed status during canvas recording
authorwebkit@devinrousso.com <webkit@devinrousso.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 11 Nov 2017 09:22:08 +0000 (09:22 +0000)
committerwebkit@devinrousso.com <webkit@devinrousso.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 11 Nov 2017 09:22:08 +0000 (09:22 +0000)
commitcac0bd946b84edd07eeb3a8f8ce67e6150a6a755
tree2f9e27efd967e011fa67ce46a6c0b18812bb324d
parent927fbbae064e19c181dca26d0eb7f0ac298555f0
Web Inspector: Canvas tab: show detailed status during canvas recording
https://bugs.webkit.org/show_bug.cgi?id=178185
<rdar://problem/34939862>

Reviewed by Brian Burg.

Source/JavaScriptCore:

* inspector/protocol/Canvas.json:
Add a `recordingProgress` event that is sent to the frontend that contains all the frame
payloads since the last Canvas.recordingProgress event and the current buffer usage.

* inspector/protocol/Recording.json:
Remove the required `frames` parameter from the Recording protocol object, as they will be
sent in batches via the Canvas.recordingProgress event.

Source/WebCore:

Updated existing tests to assert that the correct number of progress events are fired.

* inspector/agents/InspectorCanvasAgent.cpp:
(WebCore::InspectorCanvasAgent::didFinishRecordingCanvasFrame):
After each recorded frame, fire a progress event with the recorded frames as data. This will
release the frames from the associated InspectorCanvas, meaning that the frames must be
aggregated in the frontend before a Recording can be created.

The protocol is designed with arrays so that if we decide to add throttling (e.g. one event
per second) we are able to do so without modifying the protocol.

* inspector/InspectorCanvas.h:
* inspector/InspectorCanvas.cpp:
(WebCore::InspectorCanvas::hasRecordingData const):
(WebCore::InspectorCanvas::currentFrameHasData const):
(WebCore::InspectorCanvas::recordAction):
(WebCore::InspectorCanvas::finalizeFrame):
(WebCore::InspectorCanvas::markCurrentFrameIncomplete):
Add additional checks that the list of recorded frames is not nullptr when finalizing or
marking as incomplete.

Source/WebInspectorUI:

* Localizations/en.lproj/localizedStrings.js:

* UserInterface/Protocol/CanvasObserver.js:
(WI.CanvasObserver.prototype.recordingProgress):
* UserInterface/Controllers/CanvasManager.js:
(WI.CanvasManager):
(WI.CanvasManager.prototype.recordingProgress):
(WI.CanvasManager.prototype.recordingFinished):
Maintain arrays of recorded frames for each canvas and add new frames each time a progress
event is fired. When the recording is finished, use the array as part of the payload for
creating a WI.Recording object.

* UserInterface/Models/Recording.js:
(WI.Recording.fromPayload):

* UserInterface/Models/RecordingAction.js:
(WI.RecordingAction.prototype.apply.getContent):
(WI.RecordingAction.prototype.apply):
Drive-by fix: toDataURL is very slow, so add alternative ways of getting and comparing the
content of the canvas to determine if the action has a visible effect.

* UserInterface/Views/CanvasContentView.css:
(.content-view.canvas:not(.tab)):
(.content-view.canvas:not(.tab) > .progress):
(.content-view.canvas:not(.tab) > .progress > .frame-count):
* UserInterface/Views/CanvasContentView.js:
(WI.CanvasContentView):
(WI.CanvasContentView.prototype.attached):
(WI.CanvasContentView.prototype._recordingStarted):
(WI.CanvasContentView.prototype._recordingProgress):
(WI.CanvasContentView.prototype._recordingStopped):
Steal some space from the preview area to display a count of the number of recorded frames
and the current buffer usage.

* UserInterface/Views/CanvasOverviewContentView.css:
(.content-view.canvas-overview .content-view.canvas > :matches(header, .progress, .preview, footer)):
(.content-view.canvas-overview .content-view.canvas.selected > :matches(.progress, .preview, footer),):
(.content-view.canvas-overview .content-view.canvas > :matches(.progress, .preview)):
(.content-view.canvas-overview .content-view.canvas > .preview):
(.content-view.canvas-overview .content-view.canvas > .progress ~ .preview):
(.content-view.canvas-overview .content-view.canvas > :matches(header, .preview, footer)): Deleted.
(.content-view.canvas-overview .content-view.canvas.selected > :matches(.preview, footer),): Deleted.

LayoutTests:

* inspector/canvas/resources/recording-utilities.js:
(TestPage.registerInitializer.window.startRecording.handleRecordingProgress):
(TestPage.registerInitializer.window.startRecording):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@224726 268f45cc-cd09-0410-ab3c-d52691b4dbfc
18 files changed:
LayoutTests/ChangeLog
LayoutTests/inspector/canvas/resources/recording-utilities.js
Source/JavaScriptCore/ChangeLog
Source/JavaScriptCore/inspector/protocol/Canvas.json
Source/JavaScriptCore/inspector/protocol/Recording.json
Source/WebCore/ChangeLog
Source/WebCore/inspector/InspectorCanvas.cpp
Source/WebCore/inspector/InspectorCanvas.h
Source/WebCore/inspector/agents/InspectorCanvasAgent.cpp
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Controllers/CanvasManager.js
Source/WebInspectorUI/UserInterface/Models/Recording.js
Source/WebInspectorUI/UserInterface/Models/RecordingAction.js
Source/WebInspectorUI/UserInterface/Protocol/CanvasObserver.js
Source/WebInspectorUI/UserInterface/Views/CanvasContentView.css
Source/WebInspectorUI/UserInterface/Views/CanvasContentView.js
Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css