Web Inspector: Show rendering frames (and FPS) in Layout and Rendering timeline
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 17 Mar 2015 08:43:30 +0000 (08:43 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 17 Mar 2015 08:43:30 +0000 (08:43 +0000)
commit155f69e1d88e9fe7ee52bf015c0bf15a6c23caff
tree7e573bf1da5a66ee2e4590794d45bcd656cc1b85
parent4c499be0596449bd7ad5d4697771d7339af1bc2d
Web Inspector: Show rendering frames (and FPS) in Layout and Rendering timeline
https://bugs.webkit.org/show_bug.cgi?id=142029

Patch by Matt Baker <mattbaker@apple.com> on 2015-03-17
Reviewed by Timothy Hatcher.

Add UI for showing runloop records and their child records as a frame histogram,
with the recording time on the x-axis and the frame duration on the y-axis. Each frame
is comprised of colored regions representing the time spent in various activities (script,
layout, etc).

Eventually the Frames timeline will replace the Layout & Rendering timeline. Until the views
for the new timeline are finalized the Layout & Rendering timeline will remain in place.

* Localizations/en.lproj/localizedStrings.js:
* UserInterface/Main.html:
New string and files.

* UserInterface/Controllers/TimelineManager.js:
(WebInspector.TimelineManager.prototype.eventRecorded):
(WebInspector.TimelineManager.prototype.pageDidLoad):
(WebInspector.TimelineManager.prototype._processNestedRecords):
(WebInspector.TimelineManager.prototype._processRecord):
(WebInspector.TimelineManager.prototype._processEvent):
(WebInspector.TimelineManager.prototype._loadNewRecording):
(WebInspector.TimelineManager.prototype.eventRecorded.processRecord): Deleted.
Added support for new runloop record type and nested record handling.

* UserInterface/Images/Frames.png: Added.
* UserInterface/Images/Frames@2x.png: Added.
* UserInterface/Images/FramesLarge.png: Added.
* UserInterface/Images/FramesLarge@2x.png: Added.
New images for runloop timeline overview graph and runloop tree records.

* UserInterface/Models/RunLoopTimelineRecord.js: Added.
(WebInspector.RunLoopTimelineRecord):
(WebInspector.RunLoopTimelineRecord.prototype.get children):
(WebInspector.RunLoopTimelineRecord.prototype.get durationRemainder):
(WebInspector.RunLoopTimelineRecord.prototype.durationForRecords.get var):
Extends TimelineRecord to add child records and subframe duration details.

* UserInterface/Models/Timeline.js:
(WebInspector.Timeline.prototype.get displayName):
(WebInspector.Timeline.prototype.get iconClassName):
New UI strings and icons.

* UserInterface/Models/TimelineRecord.js:
* UserInterface/Views/ContentView.js:
(WebInspector.ContentView):
* UserInterface/Views/LayoutTimelineView.js:
(WebInspector.LayoutTimelineView.prototype._layoutTimelineRecordAdded):
* UserInterface/Views/TimelineRecordTreeElement.js:
(WebInspector.TimelineRecordTreeElement):
Added support for new runloop record type.

* UserInterface/Views/RunLoopTimelineOverviewGraph.css: Added.
(.timeline-overview-graph.runloop > .divider):
(.timeline-overview-graph.runloop > .divider > span):
New styles for runloop timeline graph.

* UserInterface/Views/RunLoopTimelineOverviewGraph.js: Added.
(WebInspector.RunLoopTimelineOverviewGraph):
(WebInspector.RunLoopTimelineOverviewGraph.prototype.updateLayout.createFrame):
(WebInspector.RunLoopTimelineOverviewGraph.prototype.get graphHeightSeconds.this):
(WebInspector.RunLoopTimelineOverviewGraph.prototype.get graphHeightSeconds):
(WebInspector.RunLoopTimelineOverviewGraph.prototype._updateDividers.createDividerAtPosition.get if):
New overview graph for displaying TimelineRecordFrames and horizontal frame budget dividers.

* UserInterface/Views/TimelineIcons.css:
(.runloop-icon .icon):
(.runloop-icon.large .icon):
(.runloop-record .icon):
* UserInterface/Views/TimelineSidebarPanel.js:
New runloop icon styles.

* UserInterface/Views/TimelineOverviewGraph.js:
(WebInspector.TimelineOverviewGraph):
Updated factory to support creation of the new overview graph.

* UserInterface/Views/TimelineRecordFrame.css: Added.
(.timeline-record-frame):
(.timeline-record-frame > .frame):
(.timeline-record-frame > .dropped):
(.timeline-record-frame > .frame > .duration):
(.timeline-record-frame > .frame > .duration:first-child):
(.timeline-record-frame > .frame > .duration:last-child):
(.timeline-record-frame > .frame > .duration.timeline-record-type-network):
(.timeline-record-frame > .frame > .duration.timeline-record-type-layout):
(.timeline-record-frame > .frame > .duration.timeline-record-type-script):
New styles for frame bars in the runloop timeline graph.

* UserInterface/Views/TimelineRecordFrame.js: Added.
(WebInspector.TimelineRecordFrame):
(WebInspector.TimelineRecordFrame.createCombinedFrames):
(WebInspector.TimelineRecordFrame.prototype.get element):
(WebInspector.TimelineRecordFrame.prototype.get duration):
(WebInspector.TimelineRecordFrame.prototype.get records):
(WebInspector.TimelineRecordFrame.prototype.set records):
(WebInspector.TimelineRecordFrame.prototype._updateChildElements.createDurationElement):
New view representing a single frame within the runloop overview graph.

* WebInspectorUI.vcxproj/WebInspectorUI.vcxproj:
* WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters:
New files.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@181626 268f45cc-cd09-0410-ab3c-d52691b4dbfc
23 files changed:
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js
Source/WebInspectorUI/UserInterface/Images/Frames.png [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Images/Frames@2x.png [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Images/FramesLarge.png [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Images/FramesLarge@2x.png [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Main.html
Source/WebInspectorUI/UserInterface/Models/RunLoopTimelineRecord.js [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Models/Timeline.js
Source/WebInspectorUI/UserInterface/Models/TimelineRecord.js
Source/WebInspectorUI/UserInterface/Views/ContentView.js
Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js
Source/WebInspectorUI/UserInterface/Views/RunLoopTimelineOverviewGraph.css [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/RunLoopTimelineOverviewGraph.js [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/TimelineIcons.css
Source/WebInspectorUI/UserInterface/Views/TimelineOverviewGraph.js
Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.css [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.js [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/TimelineRecordTreeElement.js
Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js
Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj
Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters