Web Inspector: CPU Usage Timeline - Main Thread Indicator
authorjoepeck@webkit.org <joepeck@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 26 Feb 2019 21:40:50 +0000 (21:40 +0000)
committerjoepeck@webkit.org <joepeck@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 26 Feb 2019 21:40:50 +0000 (21:40 +0000)
commit3afe4b998b44d3e62f3c16efe401f3108a366a07
treea128c4e8e3d48964070007dca7b2d5d38e86929a
parent115614c25377dfd94ded938b47ef3d1c1c742f8d
Web Inspector: CPU Usage Timeline - Main Thread Indicator
https://bugs.webkit.org/show_bug.cgi?id=194972

Reviewed by Devin Rousso.

* UserInterface/Main.html:
* UserInterface/Base/Utilities.js:
(value):
The existing enclosingNode doesn't work for SVG because its names
are lowercase. Add a simplified version for the svg case.

* UserInterface/Views/RangeChart.js: Added.
(WI.RangeChart):
(WI.RangeChart.prototype.get size):
(WI.RangeChart.prototype.set size):
(WI.RangeChart.prototype.addRange):
(WI.RangeChart.prototype.clear):
(WI.RangeChart.prototype.layout):
A new chart that draws rects for given ranges.

* UserInterface/Models/Timeline.js:
(WI.Timeline.prototype.recordsOverlappingTimeRange):
Helper to specifically get records touching a range. Useful
for when we have a single pixel spanning (startTime -> endTime)
and we want to find records in that pixel.

* UserInterface/Views/CPUTimelineView.css:
(.timeline-view.cpu .cpu-usage-indicator-view > .graph > .range-chart rect):
(.timeline-view.cpu .cpu-usage-indicator-view > .graph > .range-chart .sample-type-script):
(.timeline-view.cpu .cpu-usage-indicator-view > .graph > .range-chart .sample-type-style):
(.timeline-view.cpu .cpu-usage-indicator-view > .graph > .range-chart .sample-type-layout):
(.timeline-view.cpu .cpu-usage-indicator-view > .graph > .range-chart .sample-type-paint):
* UserInterface/Views/CPUTimelineView.js:
(WI.CPUTimelineView.prototype.get indicatorViewHeight):
(WI.CPUTimelineView.prototype.clear):
(WI.CPUTimelineView.prototype.get scrollableElements):
(WI.CPUTimelineView.prototype.initialLayout):
(WI.CPUTimelineView.prototype.layout):
(WI.CPUTimelineView.prototype._graphPositionForMouseEvent):
(WI.CPUTimelineView.prototype._handleIndicatorClick):
(WI.CPUTimelineView.prototype._attemptSelectIndicatatorTimelineRecord):
(WI.CPUTimelineView.prototype._selectTimelineRecord):
Place the Main Thread Indicator view beneath the big graph.
Clicking inside it selects records in the Timeline Overview.

* UserInterface/Views/CPUUsageIndicatorView.css: Added.
(.cpu-usage-indicator-view):
(.cpu-usage-indicator-view > .details):
(body[dir=ltr] .cpu-usage-indicator-view > .details):
(body[dir=rtl] .cpu-usage-indicator-view > .details):
(body[dir=rtl] .cpu-usage-indicator-view > .graph):
(.cpu-usage-indicator-view > .graph):
(.cpu-usage-indicator-view > .graph,):
* UserInterface/Views/CPUUsageIndicatorView.js: Added.
(WI.CPUUsageIndicatorView):
(WI.CPUUsageIndicatorView.prototype.get chart):
(WI.CPUUsageIndicatorView.prototype.clear):
(WI.CPUUsageIndicatorView.prototype.updateChart):
Converts the CPU samples data into a RangeChart. It works to coalesce
many samples of the same type into a single range to reduce total ranges.

* UserInterface/Views/TimelineRecordingContentView.js:
(WI.TimelineRecordingContentView):
(WI.TimelineRecordingContentView.prototype._recordSelected):
(WI.TimelineRecordingContentView.prototype._recordWasSelected):
(WI.TimelineRecordingContentView.prototype._selectRecordInTimelineOverview):
(WI.TimelineRecordingContentView.prototype._selectRecordInTimelineView):
* UserInterface/Views/TimelineView.js:
Add a path for a TimelineView to dispatch a record selected event and cause
have the TimelineRecordingContentView react to it by updating the timeline
overview and relevent timeline view.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@242104 268f45cc-cd09-0410-ab3c-d52691b4dbfc
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Base/Utilities.js
Source/WebInspectorUI/UserInterface/Main.html
Source/WebInspectorUI/UserInterface/Models/Timeline.js
Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css
Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.js
Source/WebInspectorUI/UserInterface/Views/CPUUsageIndicatorView.css [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/CPUUsageIndicatorView.js [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/RangeChart.js [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js
Source/WebInspectorUI/UserInterface/Views/TimelineView.js