Web Inspector: CPU Usage Timeline
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 25 Jan 2019 01:06:17 +0000 (01:06 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 25 Jan 2019 01:06:17 +0000 (01:06 +0000)
commit1943f5a953b511de0c05f3b6f486f2e9a9b49028
tree2f00fa302810ded9b39d9328174f85d4f42d402b
parent683c380b47e1b98f08091bb751a22b72879160f7
Web Inspector: CPU Usage Timeline
https://bugs.webkit.org/show_bug.cgi?id=193730
<rdar://problem/46797201>

Patch by Joseph Pecoraro <pecoraro@apple.com> on 2019-01-24
Reviewed by Devin Rousso.

Source/JavaScriptCore:

* CMakeLists.txt:
* DerivedSources-input.xcfilelist:
* DerivedSources.make:
New files.

* inspector/protocol/CPUProfiler.json: Added.
New domain that follows the pattern of Memory/ScriptProfiler.

* inspector/protocol/Timeline.json:
New enum to auto-start a CPU instrument in the backend.

Source/WebCore:

Test: inspector/cpu-profiler/tracking.html

* Sources.txt:
* UnifiedSources-input.xcfilelist:
* WebCore.xcodeproj/project.pbxproj:
New files.

* inspector/InspectorController.cpp:
(WebCore::InspectorController::createLazyAgents):
* inspector/InstrumentingAgents.cpp:
(WebCore::InstrumentingAgents::reset):
* inspector/InstrumentingAgents.h:
(WebCore::InstrumentingAgents::inspectorCPUProfilerAgent const):
(WebCore::InstrumentingAgents::setInspectorCPUProfilerAgent):
Create and track the CPUProfilerAgent.

* inspector/agents/InspectorTimelineAgent.cpp:
(WebCore::InspectorTimelineAgent::toggleInstruments):
(WebCore::InspectorTimelineAgent::toggleCPUInstrument):
Handle backend auto-start of the CPU instrument / timeline.

* inspector/agents/InspectorCPUProfilerAgent.h:
* inspector/agents/InspectorCPUProfilerAgent.cpp: Added.
(WebCore::InspectorCPUProfilerAgent::InspectorCPUProfilerAgent):
(WebCore::InspectorCPUProfilerAgent::didCreateFrontendAndBackend):
(WebCore::InspectorCPUProfilerAgent::willDestroyFrontendAndBackend):
(WebCore::InspectorCPUProfilerAgent::startTracking):
(WebCore::InspectorCPUProfilerAgent::stopTracking):
(WebCore::InspectorCPUProfilerAgent::collectSample):
CPUProfilerAgent uses the ResourceUsageThread to get CPU data.

* inspector/agents/InspectorTimelineAgent.h:
* inspector/agents/InspectorMemoryAgent.cpp:
(WebCore::InspectorMemoryAgent::startTracking):
(WebCore::InspectorMemoryAgent::collectSample):
Update the MemoryAgent to collect only Memory data and use a more accurate sample timestamp.

* page/ResourceUsageData.h:
* page/ResourceUsageThread.cpp:
(WebCore::ResourceUsageThread::addObserver):
(WebCore::ResourceUsageThread::removeObserver):
(WebCore::ResourceUsageThread::notifyObservers):
(WebCore::ResourceUsageThread::recomputeCollectionMode):
(WebCore::ResourceUsageThread::threadBody):
* page/ResourceUsageThread.h:
* page/cocoa/ResourceUsageOverlayCocoa.mm:
(WebCore::ResourceUsageOverlay::platformInitialize):
* page/cocoa/ResourceUsageThreadCocoa.mm:
(WebCore::ResourceUsageThread::platformCollectCPUData):
(WebCore::ResourceUsageThread::platformCollectMemoryData):
(WebCore::ResourceUsageThread::platformThreadBody): Deleted.
* page/linux/ResourceUsageOverlayLinux.cpp:
(WebCore::ResourceUsageOverlay::platformInitialize):
* page/linux/ResourceUsageThreadLinux.cpp:
(WebCore::ResourceUsageThread::platformCollectCPUData):
(WebCore::ResourceUsageThread::platformCollectMemoryData):
(WebCore::ResourceUsageThread::platformThreadBody):
Give each observer their own collection mode. The ResourceUsageThread
will then collect data that is the union of all of the active observers.
This allows collecting CPU and Memory data separately, reducing the cost
of each when gathered individually.

Source/WebInspectorUI:

CPU Usage is gathered in the backend twice a second, the frequency of the
ResourceUsageThread in WebCore. The frontend displays cpu usage in a few
ways in the Timeline.

We use a column chart in the timeline overview to display the frequency and
relative distance of samples. This helps show if the samples were close
together or far apart, which indicates how meaningful they will be at a
particular scale.

We use a line chart in the timeline detail view which will be easier to see
the changes over a particular time range selection.

* Localizations/en.lproj/localizedStrings.js:
New strings.

* UserInterface/Main.html:
* UserInterface/Base/Main.js:
(WI.loaded):
* UserInterface/Test.html:
* UserInterface/Test/Test.js:
(WI.loaded):
* UserInterface/Protocol/CPUProfilerObserver.js:
(WI.CPUProfilerObserver.prototype.trackingStart):
(WI.CPUProfilerObserver.prototype.trackingUpdate):
(WI.CPUProfilerObserver.prototype.trackingComplete):
(WI.CPUProfilerObserver):
New files and default registration.

* UserInterface/Protocol/Target.js:
(WI.Target.prototype.get CPUProfilerAgent):
New Agent.

* UserInterface/Controllers/TimelineManager.js:
(WI.TimelineManager.availableTimelineTypes):
(WI.TimelineManager.prototype.cpuProfilerTrackingStarted):
(WI.TimelineManager.prototype.cpuProfilerTrackingUpdated):
(WI.TimelineManager.prototype.cpuProfilerTrackingCompleted):
(WI.TimelineManager.prototype._updateAutoCaptureInstruments):
(WI.TimelineManager.prototype.memoryTrackingStart): Renamed.
(WI.TimelineManager.prototype.memoryTrackingUpdate): Renamed.
(WI.TimelineManager.prototype.memoryTrackingComplete): Renamed.
* UserInterface/Models/CPUInstrument.js:
(WI.CPUInstrument):
(WI.CPUInstrument.supported):
(WI.CPUInstrument.prototype.get timelineRecordType):
(WI.CPUInstrument.prototype.startInstrumentation):
(WI.CPUInstrument.prototype.stopInstrumentation):
* UserInterface/Models/CPUTimelineRecord.js:
(WI.CPUTimelineRecord):
(WI.CPUTimelineRecord.prototype.get timestamp):
(WI.CPUTimelineRecord.prototype.get usage):
* UserInterface/Models/Instrument.js:
(WI.Instrument.createForTimelineType):
* UserInterface/Models/TimelineRecord.js:
* UserInterface/Models/TimelineRecording.js:
(WI.TimelineRecording.prototype.addRecord):
Expose a new CPU instrument and timeline.

* UserInterface/Views/ColumnChart.js: Added.
(WI.ColumnChart):
(WI.ColumnChart.prototype.get element):
(WI.ColumnChart.prototype.get bars):
(WI.ColumnChart.prototype.get size):
(WI.ColumnChart.prototype.set size):
(WI.ColumnChart.prototype.addBar):
(WI.ColumnChart.prototype.clear):
(WI.ColumnChart.prototype.needsLayout):
(WI.ColumnChart.prototype.updateLayout):
View that will draw vertical bars with independent widths.
This is meant to be used similiar to WI.LineChart.

* UserInterface/Images/CPUInstrument.svg: Added.
* UserInterface/Views/Variables.css:
(:root):
CPU timeline colors and icon.

* UserInterface/Views/CPUTimelineOverviewGraph.css:
(body .sidebar > .panel.navigation.timeline > .timelines-content li.item.cpu,):
(.timeline-overview-graph.cpu):
(.timeline-overview-graph.cpu > .legend):
(body[dir=ltr] .timeline-overview-graph.cpu > .legend):
(body[dir=rtl] .timeline-overview-graph.cpu > .legend):
(.timeline-overview-graph:nth-child(even) > .legend):
(body[dir=rtl] .timeline-overview-graph.cpu > .bar-chart):
(.timeline-overview-graph.cpu > .bar-chart > svg > g > rect):
* UserInterface/Views/CPUTimelineOverviewGraph.js: Added.
(WI.CPUTimelineOverviewGraph):
(WI.CPUTimelineOverviewGraph.prototype.get height):
(WI.CPUTimelineOverviewGraph.prototype.reset):
(WI.CPUTimelineOverviewGraph.prototype.layout.xScale):
(WI.CPUTimelineOverviewGraph.prototype.layout.yScale):
(WI.CPUTimelineOverviewGraph.prototype.layout.yScaleForRecord):
(WI.CPUTimelineOverviewGraph.prototype.layout):
(WI.CPUTimelineOverviewGraph.prototype._updateLegend):
(WI.CPUTimelineOverviewGraph.prototype._cpuTimelineRecordAdded):
* UserInterface/Views/CPUTimelineView.css:
(.timeline-view.cpu):
(.timeline-view.cpu > .content):
(.timeline-view.cpu > .content .subtitle):
(.timeline-view.cpu > .content > .details):
(.timeline-view.cpu > .content > .details > .timeline-ruler):
(body[dir=ltr] .timeline-view.cpu > .content > .details > .timeline-ruler):
(body[dir=rtl] .timeline-view.cpu > .content > .details > .timeline-ruler):
(.timeline-view.cpu > .content > .details > .subtitle):
(.cpu-usage-view .line-chart > svg > path):
(.timeline-view.cpu .legend > .row > .swatch.current):
* UserInterface/Views/CPUTimelineView.js: Added.
(WI.CPUTimelineView):
(WI.CPUTimelineView.prototype.shown):
(WI.CPUTimelineView.prototype.hidden):
(WI.CPUTimelineView.prototype.closed):
(WI.CPUTimelineView.prototype.reset):
(WI.CPUTimelineView.prototype.get scrollableElements):
(WI.CPUTimelineView.prototype.get showsFilterBar):
(WI.CPUTimelineView.prototype.layout.layoutView):
(WI.CPUTimelineView.prototype.layout.xScale):
(WI.CPUTimelineView.prototype.layout.yScale):
(WI.CPUTimelineView.prototype.layout):
(WI.CPUTimelineView.prototype._cpuTimelineRecordAdded):
* UserInterface/Views/CPUUsageView.css:
(.cpu-usage-view):
(.cpu-usage-view > .details):
(body[dir=ltr] .cpu-usage-view > .details):
(body[dir=rtl] .cpu-usage-view > .details):
(.cpu-usage-view > .graph):
(body[dir=rtl] .cpu-usage-view > .graph):
* UserInterface/Views/CPUUsageView.js:
(WI.CPUUsageView):
(WI.CPUUsageView.prototype.get element):
(WI.CPUUsageView.prototype.clear):
(WI.CPUUsageView.prototype.layoutWithDataPoints):
(WI.CPUUsageView.prototype._updateDetails):
* UserInterface/Views/ContentView.js:
(WI.ContentView.createFromRepresentedObject):
* UserInterface/Views/TimelineIcons.css:
(.cpu-icon .icon):
* UserInterface/Views/TimelineOverviewGraph.js:
(WI.TimelineOverviewGraph.createForTimeline):
* UserInterface/Views/TimelineTabContentView.js:
(WI.TimelineTabContentView.displayNameForTimelineType):
(WI.TimelineTabContentView.iconClassNameForTimelineType):
(WI.TimelineTabContentView.genericClassNameForTimelineType):
(WI.TimelineTabContentView.iconClassNameForRecord):
(WI.TimelineTabContentView.displayNameForRecord):
Timeline views for CPU usage.

* UserInterface/Views/MemoryCategoryView.js:
(WI.MemoryCategoryView):
* UserInterface/Views/MemoryTimelineView.js:
(WI.MemoryTimelineView.createChartContainer):
(WI.MemoryTimelineView):
(WI.MemoryTimelineView.prototype._clearMaxComparisonLegend):
Minor updates to style and comments.

LayoutTests:

* inspector/cpu-profiler/tracking-expected.txt: Added.
* inspector/cpu-profiler/tracking.html: Added.
Test the CPUProfiler domain emits events.

* inspector/heap/tracking-expected.txt:
* inspector/heap/tracking.html:
* inspector/memory/tracking-expected.txt:
* inspector/memory/tracking.html:
* inspector/script-profiler/tracking-expected.txt:
* inspector/script-profiler/tracking.html:
Update test naming.

* platform/win/TestExpectations:
Skip on platforms without RESOURCE_USAGE.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@240457 268f45cc-cd09-0410-ab3c-d52691b4dbfc
70 files changed:
LayoutTests/ChangeLog
LayoutTests/inspector/cpu-profiler/tracking-expected.txt [new file with mode: 0644]
LayoutTests/inspector/cpu-profiler/tracking.html [new file with mode: 0644]
LayoutTests/inspector/heap/tracking-expected.txt
LayoutTests/inspector/heap/tracking.html
LayoutTests/inspector/memory/tracking-expected.txt
LayoutTests/inspector/memory/tracking.html
LayoutTests/inspector/script-profiler/tracking-expected.txt
LayoutTests/inspector/script-profiler/tracking.html
LayoutTests/platform/win/TestExpectations
Source/JavaScriptCore/CMakeLists.txt
Source/JavaScriptCore/ChangeLog
Source/JavaScriptCore/DerivedSources-input.xcfilelist
Source/JavaScriptCore/DerivedSources.make
Source/JavaScriptCore/inspector/protocol/CPUProfiler.json [new file with mode: 0644]
Source/JavaScriptCore/inspector/protocol/Timeline.json
Source/WebCore/ChangeLog
Source/WebCore/Sources.txt
Source/WebCore/UnifiedSources-input.xcfilelist
Source/WebCore/WebCore.xcodeproj/project.pbxproj
Source/WebCore/inspector/InspectorController.cpp
Source/WebCore/inspector/InstrumentingAgents.cpp
Source/WebCore/inspector/InstrumentingAgents.h
Source/WebCore/inspector/agents/InspectorCPUProfilerAgent.cpp [new file with mode: 0644]
Source/WebCore/inspector/agents/InspectorCPUProfilerAgent.h [new file with mode: 0644]
Source/WebCore/inspector/agents/InspectorMemoryAgent.cpp
Source/WebCore/inspector/agents/InspectorTimelineAgent.cpp
Source/WebCore/inspector/agents/InspectorTimelineAgent.h
Source/WebCore/page/ResourceUsageData.h
Source/WebCore/page/ResourceUsageThread.cpp
Source/WebCore/page/ResourceUsageThread.h
Source/WebCore/page/cocoa/ResourceUsageOverlayCocoa.mm
Source/WebCore/page/cocoa/ResourceUsageThreadCocoa.mm
Source/WebCore/page/linux/ResourceUsageOverlayLinux.cpp
Source/WebCore/page/linux/ResourceUsageThreadLinux.cpp
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Base/Main.js
Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js
Source/WebInspectorUI/UserInterface/Debug/UncaughtExceptionReporter.css
Source/WebInspectorUI/UserInterface/Images/CPUInstrument.svg [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Main.html
Source/WebInspectorUI/UserInterface/Models/CPUInstrument.js [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Models/CPUTimelineRecord.js [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Models/Instrument.js
Source/WebInspectorUI/UserInterface/Models/TimelineRecord.js
Source/WebInspectorUI/UserInterface/Models/TimelineRecording.js
Source/WebInspectorUI/UserInterface/Protocol/CPUProfilerObserver.js [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Protocol/MemoryObserver.js
Source/WebInspectorUI/UserInterface/Protocol/Target.js
Source/WebInspectorUI/UserInterface/Test.html
Source/WebInspectorUI/UserInterface/Test/Test.js
Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.js [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.js [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/CPUUsageView.css [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/CPUUsageView.js [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/ColumnChart.js [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/ContentView.js
Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css
Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.js
Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.js
Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css
Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.js
Source/WebInspectorUI/UserInterface/Views/ResourceSizesContentView.css
Source/WebInspectorUI/UserInterface/Views/TimelineIcons.css
Source/WebInspectorUI/UserInterface/Views/TimelineOverviewGraph.js
Source/WebInspectorUI/UserInterface/Views/TimelineTabContentView.js
Source/WebInspectorUI/UserInterface/Views/Variables.css