Web Inspector: Canvas tab: allow recording processing to be stopped midway
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 20 Aug 2018 21:31:55 +0000 (21:31 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 20 Aug 2018 21:31:55 +0000 (21:31 +0000)
commit16cab0ac6c0d8336d9af0f66355d157db2f27bc4
treea4265b796e6316a8a9033fcd2460ef5b2bf26fd8
parent0c2a36c17cee022df390fad57bd66d958d4ad29a
Web Inspector: Canvas tab: allow recording processing to be stopped midway
https://bugs.webkit.org/show_bug.cgi?id=185152

Reviewed by Joseph Pecoraro.

Previously, `WI.Recording` used a `WI.YieldableTask` to process every action in such a way
as to not block the UI. The downside to this approach was that it used a message view to
indicate the progress of this process, and prevented the user from viewing the `WI.Recording`
until that process was completed.

This patch changes `WI.Recording` to instead use `async/await` and fire events whenever a
`WI.RecordingAction` (and `WI.RecordingFrame`) finished processing, allowing it to be added
to the recording `WI.TreeOutline` and selected by the user. Additionally, a pause/resume
button is added to the `WI.CanvasSidebarPanel` so the user has greater control over what
how much of the `WI.Recording` they want to process.

* Localizations/en.lproj/localizedStrings.js:

* UserInterface/Base/Utilities.js:
(Promise.delay)
Utility function for promisifying `setTimeout`.

* UserInterface/Models/Recording.js:
(WI.Recording):
(WI.Recording.prototype.get processing): Added.
(WI.Recording.prototype.get ready): Added.
(WI.Recording.prototype.startProcessing): Added.
(WI.Recording.prototype.stopProcessing): Added.
(WI.Recording.prototype.async._process): Added.
(WI.Recording.prototype.process): Deleted.
(WI.Recording.prototype.async.yieldableTaskWillProcessItem): Deleted.
(WI.Recording.prototype.async.yieldableTaskDidFinish): Deleted.

* UserInterface/Models/RecordingAction.js:
(WI.RecordingAction):
(WI.RecordingAction.prototype.get ready): Added.
(WI.RecordingAction.prototype.async.swizzle):
(WI.RecordingAction.prototype.apply):

* UserInterface/Models/RecordingInitialStateAction.js:
(WI.RecordingInitialStateAction):

* UserInterface/Views/CanvasSidebarPanel.js:
(WI.CanvasSidebarPanel):
(WI.CanvasSidebarPanel.prototype.set recording):
(WI.CanvasSidebarPanel.prototype.set action):
(WI.CanvasSidebarPanel.prototype._recordingAdded):
(WI.CanvasSidebarPanel.prototype._recordingRemoved):
(WI.CanvasSidebarPanel.prototype._currentRepresentedObjectsDidChange):
(WI.CanvasSidebarPanel.prototype._treeOutlineSelectionDidChange):
(WI.CanvasSidebarPanel.prototype._recordingChanged):
(WI.CanvasSidebarPanel.prototype._recordingChanged.createPauseButton): Added.
(WI.CanvasSidebarPanel.prototype._recordingChanged.createResumeButton): Added.
(WI.CanvasSidebarPanel.prototype._createRecordingFrameTreeElement): Added.
(WI.CanvasSidebarPanel.prototype._createRecordingActionTreeElement): Added.
(WI.CanvasSidebarPanel.prototype._handleRecordingProcessedAction): Added.
(WI.CanvasSidebarPanel.prototype._handleRecordingStartProcessingFrame): Added.
* UserInterface/Views/CanvasSidebarPanel.css:
(.sidebar > .panel.navigation.canvas > .content > .recording-content > .tree-outline .item.processing .subtitle > progress): Added.
(.sidebar > .panel.navigation.canvas > .content > .recording-content > .tree-outline:matches(:focus, .force-focus) .item.processing.selected .subtitle > progress): Added.
(.sidebar > .panel.navigation.canvas > .content > .recording-content > .tree-outline .item.processing .subtitle::before): Added.
(.sidebar > .panel.navigation.canvas > .content > .recording-content > .recording-processing-options): Added.
(.sidebar > .panel.navigation.canvas > .content > .recording-content > .recording-processing-options > .indeterminate-progress-spinner): Added.
(.sidebar > .panel.navigation.canvas > .content > .recording-content > .indeterminate-progress-spinner): Deleted.

* UserInterface/Views/RecordingContentView.js:
(WI.RecordingContentView):
(WI.RecordingContentView.prototype.updateActionIndex):
(WI.RecordingContentView.prototype.initialLayout):
(WI.RecordingContentView.prototype._updateCanvasPath):
(WI.RecordingContentView.prototype._handleRecordingProcessedAction): Added.
(WI.RecordingContentView.prototype._updateProcessProgress): Deleted.
(WI.RecordingContentView.prototype._handleRecordingProcessedActionSwizzle): Deleted.
(WI.RecordingContentView.prototype._handleRecordingProcessedActionApply): Deleted.
* UserInterface/Views/RecordingContentView.css:
(.content-view:not(.tab).recording > header > .slider-container > .slider-value): Added.

* UserInterface/Views/FolderTreeElement.js:
(WI.FolderTreeElement):

* UserInterface/Views/GeneralTreeElement.js:
(WI.GeneralTreeElement.prototype.get statusElement): Added.
(WI.GeneralTreeElement.prototype._updateTitleElements):

* UserInterface/Views/RecordingContentView.js:
(WI.CanvasContentView.prototype._handleViewShaderButtonClicked):
(WI.CanvasContentView.prototype._handleViewRecordingButtonClicked):
Drive-by: `WI.Collection` doesn't have a `values()` accessor for the underlying `Set`.
* UserInterface/Views/RecordingNavigationSidebarPanel.css: Removed.
* UserInterface/Views/RecordingNavigationSidebarPanel.js: Removed.
These files are no longer used since they were "merged" into `WI.CanvasSidebarPanel`.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@235095 268f45cc-cd09-0410-ab3c-d52691b4dbfc
15 files changed:
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Base/Utilities.js
Source/WebInspectorUI/UserInterface/Models/Recording.js
Source/WebInspectorUI/UserInterface/Models/RecordingAction.js
Source/WebInspectorUI/UserInterface/Models/RecordingInitialStateAction.js
Source/WebInspectorUI/UserInterface/Views/CanvasContentView.js
Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/FolderTreeElement.js
Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js
Source/WebInspectorUI/UserInterface/Views/RecordingContentView.css
Source/WebInspectorUI/UserInterface/Views/RecordingContentView.js
Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.css [deleted file]
Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.js [deleted file]