<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[185455] trunk/Source/WebInspectorUI</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/185455">185455</a></dd>
<dt>Author</dt> <dd>mattbaker@apple.com</dd>
<dt>Date</dt> <dd>2015-06-11 08:42:02 -0700 (Thu, 11 Jun 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Rendering Frames timeline should distinguish between layout and painting
https://bugs.webkit.org/show_bug.cgi?id=145856
Reviewed by Timothy Hatcher.
This patch formalizes the runloop task concept in the frontend, adds new Paint task type to the Rendering
Frames timeline, and reorders UI elements such as chart sections and frame "segments" to match the order in
which tasks are executed within the runloop.
We will need to make UI changes to the standard Timelines view in a follow up patch, since tree element icons
for Paint records now use a different color that those of other Layout records.
* UserInterface/Images/TimelineRecordPaint.svg:
Changed to use green color.
* UserInterface/Models/RenderingFrameTimelineRecord.js:
(WebInspector.RenderingFrameTimelineRecord):
(WebInspector.RenderingFrameTimelineRecord.displayNameForTaskType):
(WebInspector.RenderingFrameTimelineRecord.prototype.durationForTask.get validRecordForTaskType):
(WebInspector.RenderingFrameTimelineRecord.prototype.durationForTask.set return):
(WebInspector.RenderingFrameTimelineRecord.prototype.durationForTask):
(WebInspector.RenderingFrameTimelineRecord.prototype.get durationRemainder): Deleted.
(WebInspector.RenderingFrameTimelineRecord.prototype.durationForRecords.get var): Deleted.
Added TaskType enum to decouple runloop task types from timeline record types, and removed duration remainder
support now that "Other" has an associated task type.
* UserInterface/Views/RenderingFrameTimelineDataGridNode.js:
(WebInspector.RenderingFrameTimelineDataGridNode.prototype.get data):
(WebInspector.RenderingFrameTimelineDataGridNode.prototype.createCellContent):
* UserInterface/Views/RenderingFrameTimelineView.js:
(WebInspector.RenderingFrameTimelineView):
Added new grid column for Paint task, reordered columns to be consistent with the rest of the UI.
* UserInterface/Views/TimelineRecordFrame.css:
(.timeline-record-frame > .frame > .duration.rendering-frame-timeline-record-script):
(.timeline-record-frame > .frame > .duration.rendering-frame-timeline-record-layout):
(.timeline-record-frame > .frame > .duration.rendering-frame-timeline-record-paint):
(.timeline-record-frame > .frame > .duration): Deleted.
(.timeline-record-frame > .frame > .duration.timeline-record-type-network): Deleted.
(.timeline-record-frame > .frame > .duration.timeline-record-type-layout): Deleted.
(.timeline-record-frame > .frame > .duration.timeline-record-type-script): Deleted.
Updated styles for Render Frame tasks.
* UserInterface/Views/TimelineRecordFrame.js:
(WebInspector.TimelineRecordFrame.prototype._updateChildElements.createDurationElement):
Updated to use Render Frame task types. Frame segment insertion order is now consistent with the rest of the UI.
* UserInterface/Views/TimelineSidebarPanel.js:
(WebInspector.TimelineSidebarPanel._refreshFrameSelectionChart.chartData.Object.keys.map):
(WebInspector.TimelineSidebarPanel.set this):
(WebInspector.TimelineSidebarPanel._refreshFrameSelectionChart.get this):
(WebInspector.TimelineSidebarPanel): Deleted.
(WebInspector.TimelineSidebarPanel.prototype._refreshFrameSelectionChart.durationForRecordType): Deleted.
(WebInspector.TimelineSidebarPanel.prototype._refreshFrameSelectionChart): Deleted.
Updated to use Render Frame task types.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceImagesTimelineRecordPaintsvg">trunk/Source/WebInspectorUI/UserInterface/Images/TimelineRecordPaint.svg</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceModelsRenderingFrameTimelineRecordjs">trunk/Source/WebInspectorUI/UserInterface/Models/RenderingFrameTimelineRecord.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineDataGridNodejs">trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineDataGridNode.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordFramecss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordFramejs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (185454 => 185455)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2015-06-11 15:24:55 UTC (rev 185454)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-06-11 15:42:02 UTC (rev 185455)
</span><span class="lines">@@ -1,5 +1,63 @@
</span><span class="cx"> 2015-06-11 Matt Baker <mattbaker@apple.com>
</span><span class="cx">
</span><ins>+ Web Inspector: Rendering Frames timeline should distinguish between layout and painting
+ https://bugs.webkit.org/show_bug.cgi?id=145856
+
+ Reviewed by Timothy Hatcher.
+
+ This patch formalizes the runloop task concept in the frontend, adds new Paint task type to the Rendering
+ Frames timeline, and reorders UI elements such as chart sections and frame "segments" to match the order in
+ which tasks are executed within the runloop.
+
+ We will need to make UI changes to the standard Timelines view in a follow up patch, since tree element icons
+ for Paint records now use a different color that those of other Layout records.
+
+ * UserInterface/Images/TimelineRecordPaint.svg:
+ Changed to use green color.
+
+ * UserInterface/Models/RenderingFrameTimelineRecord.js:
+ (WebInspector.RenderingFrameTimelineRecord):
+ (WebInspector.RenderingFrameTimelineRecord.displayNameForTaskType):
+ (WebInspector.RenderingFrameTimelineRecord.prototype.durationForTask.get validRecordForTaskType):
+ (WebInspector.RenderingFrameTimelineRecord.prototype.durationForTask.set return):
+ (WebInspector.RenderingFrameTimelineRecord.prototype.durationForTask):
+ (WebInspector.RenderingFrameTimelineRecord.prototype.get durationRemainder): Deleted.
+ (WebInspector.RenderingFrameTimelineRecord.prototype.durationForRecords.get var): Deleted.
+ Added TaskType enum to decouple runloop task types from timeline record types, and removed duration remainder
+ support now that "Other" has an associated task type.
+
+ * UserInterface/Views/RenderingFrameTimelineDataGridNode.js:
+ (WebInspector.RenderingFrameTimelineDataGridNode.prototype.get data):
+ (WebInspector.RenderingFrameTimelineDataGridNode.prototype.createCellContent):
+ * UserInterface/Views/RenderingFrameTimelineView.js:
+ (WebInspector.RenderingFrameTimelineView):
+ Added new grid column for Paint task, reordered columns to be consistent with the rest of the UI.
+
+ * UserInterface/Views/TimelineRecordFrame.css:
+ (.timeline-record-frame > .frame > .duration.rendering-frame-timeline-record-script):
+ (.timeline-record-frame > .frame > .duration.rendering-frame-timeline-record-layout):
+ (.timeline-record-frame > .frame > .duration.rendering-frame-timeline-record-paint):
+ (.timeline-record-frame > .frame > .duration): Deleted.
+ (.timeline-record-frame > .frame > .duration.timeline-record-type-network): Deleted.
+ (.timeline-record-frame > .frame > .duration.timeline-record-type-layout): Deleted.
+ (.timeline-record-frame > .frame > .duration.timeline-record-type-script): Deleted.
+ Updated styles for Render Frame tasks.
+
+ * UserInterface/Views/TimelineRecordFrame.js:
+ (WebInspector.TimelineRecordFrame.prototype._updateChildElements.createDurationElement):
+ Updated to use Render Frame task types. Frame segment insertion order is now consistent with the rest of the UI.
+
+ * UserInterface/Views/TimelineSidebarPanel.js:
+ (WebInspector.TimelineSidebarPanel._refreshFrameSelectionChart.chartData.Object.keys.map):
+ (WebInspector.TimelineSidebarPanel.set this):
+ (WebInspector.TimelineSidebarPanel._refreshFrameSelectionChart.get this):
+ (WebInspector.TimelineSidebarPanel): Deleted.
+ (WebInspector.TimelineSidebarPanel.prototype._refreshFrameSelectionChart.durationForRecordType): Deleted.
+ (WebInspector.TimelineSidebarPanel.prototype._refreshFrameSelectionChart): Deleted.
+ Updated to use Render Frame task types.
+
+2015-06-11 Matt Baker <mattbaker@apple.com>
+
</ins><span class="cx"> Web Inspector: Wrong overview graph shown after switching from Frames to Timelines
</span><span class="cx"> https://bugs.webkit.org/show_bug.cgi?id=145778
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceImagesTimelineRecordPaintsvg"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Images/TimelineRecordPaint.svg (185454 => 185455)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Images/TimelineRecordPaint.svg 2015-06-11 15:24:55 UTC (rev 185454)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/TimelineRecordPaint.svg 2015-06-11 15:42:02 UTC (rev 185455)
</span><span class="lines">@@ -1,8 +1,8 @@
</span><span class="cx"> <?xml version="1.0" encoding="utf-8"?>
</span><del>-<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
</del><ins>+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
</ins><span class="cx"> <svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
</span><del>- <path fill="rgb(236, 151, 153)" d="M 13 1 L 3 1 C 1.898438 1 1 1.898438 1 3 L 1 13 C 1 14.101562 1.898438 15 3 15 L 13 15 C 14.101562 15 15 14.101562 15 13 L 15 3 C 15 1.898438 14.101562 1 13 1 Z"/>
- <path fill="rgb(191, 109, 113)" d="M 13 1 L 3 1 C 1.898438 1 1 1.898438 1 3 L 1 13 C 1 14.101562 1.898438 15 3 15 L 13 15 C 14.101562 15 15 14.101562 15 13 L 15 3 C 15 1.898438 14.101562 1 13 1 M 13 2 C 13.550781 2 14 2.449219 14 3 L 14 13 C 14 13.550781 13.550781 14 13 14 L 3 14 C 2.449219 14 2 13.550781 2 13 L 2 3 C 2 2.449219 2.449219 2 3 2 L 13 2"/>
- <path fill="rgb(204, 116, 121)" d="M 7.09187665 9.86486483 L 8.09187665 9.86486483 L 8.09187675 12 L 8.09187675 13 L 7.09187675 13 L 5.4 13 L 4.4 13 L 4.4 12 L 4.4 4 L 4.4 3 L 5.4 3 L 8.2907563 3 C 9.49663194 3 10.4135483 3.20769232 11.0534889 3.69149996 C 11.7636984 4.22843229 12.097479 5.0719049 12.097479 6.12432432 C 12.097479 7.27475638 11.6870881 8.23200847 10.8722916 8.91131913 C 10.0975424 9.55724163 9.06464428 9.86486486 7.80896359 9.86486486 L 7.09187675 9.86486486 L 7.09187675 9.36486486 L 7.09187675 8.86486486 L 7.80896359 8.86486486 C 8.11369101 8.86486486 8.39855198 8.84414571 8.66354709 8.80270722 C 9.30146061 8.70295376 9.82425299 8.48313329 10.2319328 8.14324324 C 10.8089665 7.66215976 11.097479 6.98919351 11.097479 6.12432432 C 11.097479 5.36035654 10.8817949 4.81531695 10.4504202 4.48918919 C 10.0190455 4.16306143 9.29916471 4 8.2907563 4 L 5.4 4 L 5.4 12 L 7.09187675 12 L 7.09187675 9.36486486 L 7.09187665 9.86486483 Z M 7.09187675 7.
76756757 L 7.4280112 7.76756757 C 8.01811686 7.76756757 8.4840319 7.63513646 8.82577031 7.37027027 C 9.16750871 7.10540408 9.33837535 6.74594822 9.33837535 6.29189189 C 9.33837535 5.49549151 8.81363737 5.0972973 7.76414566 5.0972973 L 7.09187675 5.0972973 L 7.09187675 7.76756757 Z M 7.09187675 7.76756757"/>
</del><ins>+ <path fill="rgb(176, 204, 105)" d="M 13 1 L 3 1 C 1.898438 1 1 1.898438 1 3 L 1 13 C 1 14.101562 1.898438 15 3 15 L 13 15 C 14.101562 15 15 14.101562 15 13 L 15 3 C 15 1.898438 14.101562 1 13 1 Z"/>
+ <path fill="rgb(152, 188, 77)" d="M 13 1 L 3 1 C 1.898438 1 1 1.898438 1 3 L 1 13 C 1 14.101562 1.898438 15 3 15 L 13 15 C 14.101562 15 15 14.101562 15 13 L 15 3 C 15 1.898438 14.101562 1 13 1 M 13 2 C 13.550781 2 14 2.449219 14 3 L 14 13 C 14 13.550781 13.550781 14 13 14 L 3 14 C 2.449219 14 2 13.550781 2 13 L 2 3 C 2 2.449219 2.449219 2 3 2 L 13 2"/>
+ <path fill="rgb(152, 188, 77)" d="M 7.09187665 9.86486483 L 8.09187665 9.86486483 L 8.09187675 12 L 8.09187675 13 L 7.09187675 13 L 5.4 13 L 4.4 13 L 4.4 12 L 4.4 4 L 4.4 3 L 5.4 3 L 8.2907563 3 C 9.49663194 3 10.4135483 3.20769232 11.0534889 3.69149996 C 11.7636984 4.22843229 12.097479 5.0719049 12.097479 6.12432432 C 12.097479 7.27475638 11.6870881 8.23200847 10.8722916 8.91131913 C 10.0975424 9.55724163 9.06464428 9.86486486 7.80896359 9.86486486 L 7.09187675 9.86486486 L 7.09187675 9.36486486 L 7.09187675 8.86486486 L 7.80896359 8.86486486 C 8.11369101 8.86486486 8.39855198 8.84414571 8.66354709 8.80270722 C 9.30146061 8.70295376 9.82425299 8.48313329 10.2319328 8.14324324 C 10.8089665 7.66215976 11.097479 6.98919351 11.097479 6.12432432 C 11.097479 5.36035654 10.8817949 4.81531695 10.4504202 4.48918919 C 10.0190455 4.16306143 9.29916471 4 8.2907563 4 L 5.4 4 L 5.4 12 L 7.09187675 12 L 7.09187675 9.36486486 L 7.09187665 9.86486483 Z M 7.09187675 7.7
6756757 L 7.4280112 7.76756757 C 8.01811686 7.76756757 8.4840319 7.63513646 8.82577031 7.37027027 C 9.16750871 7.10540408 9.33837535 6.74594822 9.33837535 6.29189189 C 9.33837535 5.49549151 8.81363737 5.0972973 7.76414566 5.0972973 L 7.09187675 5.0972973 L 7.09187675 7.76756757 Z M 7.09187675 7.76756757"/>
</ins><span class="cx"> <path fill="white" d="M 5.4 12 L 5.4 4 L 8.2907563 4 C 9.29916471 4 10.0190455 4.16306143 10.4504202 4.48918919 C 10.8817949 4.81531695 11.097479 5.36035654 11.097479 6.12432432 C 11.097479 6.98919351 10.8089665 7.66215976 10.2319328 8.14324324 C 9.65489908 8.62432673 8.84725076 8.86486486 7.80896359 8.86486486 L 7.09187675 8.86486486 L 7.09187675 12 L 5.4 12 Z M 7.09187675 7.76756757 L 7.4280112 7.76756757 C 8.01811686 7.76756757 8.4840319 7.63513646 8.82577031 7.37027027 C 9.16750871 7.10540408 9.33837535 6.74594822 9.33837535 6.29189189 C 9.33837535 5.49549151 8.81363737 5.0972973 7.76414566 5.0972973 L 7.09187675 5.0972973 L 7.09187675 7.76756757 Z M 7.09187675 7.76756757"/>
</span><span class="cx"> </svg>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceModelsRenderingFrameTimelineRecordjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Models/RenderingFrameTimelineRecord.js (185454 => 185455)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Models/RenderingFrameTimelineRecord.js 2015-06-11 15:24:55 UTC (rev 185454)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/RenderingFrameTimelineRecord.js 2015-06-11 15:42:02 UTC (rev 185455)
</span><span class="lines">@@ -30,8 +30,7 @@
</span><span class="cx"> super(WebInspector.TimelineRecord.Type.RenderingFrame, startTime, endTime);
</span><span class="cx">
</span><span class="cx"> this._children = children || [];
</span><del>- this._durationByRecordType = new Map;
- this._durationRemainder = NaN;
</del><ins>+ this._durationByTaskType = new Map;
</ins><span class="cx"> this._frameIndex = WebInspector.RenderingFrameTimelineRecord._nextFrameIndex++;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -42,6 +41,20 @@
</span><span class="cx"> WebInspector.RenderingFrameTimelineRecord._nextFrameIndex = 0;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ static displayNameForTaskType(taskType)
+ {
+ switch(taskType) {
+ case WebInspector.RenderingFrameTimelineRecord.TaskType.Script:
+ return WebInspector.UIString("Script");
+ case WebInspector.RenderingFrameTimelineRecord.TaskType.Layout:
+ return WebInspector.UIString("Layout");
+ case WebInspector.RenderingFrameTimelineRecord.TaskType.Paint:
+ return WebInspector.UIString("Paint");
+ case WebInspector.RenderingFrameTimelineRecord.TaskType.Other:
+ return WebInspector.UIString("Other");
+ }
+ }
+
</ins><span class="cx"> // Public
</span><span class="cx">
</span><span class="cx"> get frameIndex()
</span><span class="lines">@@ -59,48 +72,75 @@
</span><span class="cx"> return this._children.slice();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- get durationRemainder()
</del><ins>+ durationForTask(taskType)
</ins><span class="cx"> {
</span><del>- if (!isNaN(this._durationRemainder))
- return this._durationRemainder;
</del><ins>+ if (this._durationByTaskType.has(taskType))
+ return this._durationByTaskType.get(taskType);
</ins><span class="cx">
</span><del>- this._durationRemainder = this.duration;
- for (var recordType in WebInspector.TimelineRecord.Type)
- this._durationRemainder -= this.durationForRecords(WebInspector.TimelineRecord.Type[recordType]);
</del><ins>+ function validRecordForTaskType(record)
+ {
+ switch(taskType) {
+ case WebInspector.RenderingFrameTimelineRecord.TaskType.Script:
+ return record.type === WebInspector.TimelineRecord.Type.Script;
+ case WebInspector.RenderingFrameTimelineRecord.TaskType.Layout:
+ return record.type === WebInspector.TimelineRecord.Type.Layout && record.eventType !== WebInspector.LayoutTimelineRecord.EventType.Paint;
+ case WebInspector.RenderingFrameTimelineRecord.TaskType.Paint:
+ return record.type === WebInspector.TimelineRecord.Type.Layout && record.eventType === WebInspector.LayoutTimelineRecord.EventType.Paint;
+ default:
+ console.error("Unsupported task type: " + taskType);
+ return false;
+ }
+ }
</ins><span class="cx">
</span><del>- return this._durationRemainder;
- }
</del><ins>+ var duration;
+ if (taskType === WebInspector.RenderingFrameTimelineRecord.TaskType.Other)
+ duration = this._calculateDurationRemainder();
+ else {
+ duration = this._children.reduce(function(previousValue, currentValue) {
+ if (!validRecordForTaskType(currentValue))
+ return previousValue;
</ins><span class="cx">
</span><del>- durationForRecords(recordType)
- {
- if (this._durationByRecordType.has(recordType))
- return this._durationByRecordType.get(recordType);
</del><ins>+ var currentDuration = currentValue.duration;
+ if (currentValue.usesActiveStartTime)
+ currentDuration -= currentValue.inactiveDuration;
+ return previousValue + currentDuration;
+ }, 0);
</ins><span class="cx">
</span><del>- var duration = this._children.reduce(function(previousValue, currentValue) {
- if (currentValue.type !== recordType)
- return previousValue;
-
- var currentDuration = currentValue.duration;
- if (currentValue.usesActiveStartTime)
- currentDuration -= currentValue.inactiveDuration;
- return previousValue + currentDuration;
- }, 0);
-
- // Time spent in layout events which were synchronously triggered from JavaScript must be deducted from the
- // rendering frame's script duration, to prevent the time from being counted twice.
- if (recordType === WebInspector.TimelineRecord.Type.Script) {
- duration -= this._children.reduce(function(previousValue, currentValue) {
- if (currentValue.type === WebInspector.TimelineRecord.Type.Layout && (currentValue.sourceCodeLocation || currentValue.callFrames))
- return previousValue + currentValue.duration;
- return previousValue;
- }, 0);
</del><ins>+ // Time spent in layout events which were synchronously triggered from JavaScript must be deducted from the
+ // rendering frame's script duration, to prevent the time from being counted twice.
+ if (taskType === WebInspector.RenderingFrameTimelineRecord.TaskType.Script) {
+ duration -= this._children.reduce(function(previousValue, currentValue) {
+ if (currentValue.type === WebInspector.TimelineRecord.Type.Layout && (currentValue.sourceCodeLocation || currentValue.callFrames))
+ return previousValue + currentValue.duration;
+ return previousValue;
+ }, 0);
+ }
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- this._durationByRecordType.set(recordType, duration);
</del><ins>+ this._durationByTaskType.set(taskType, duration);
</ins><span class="cx"> return duration;
</span><span class="cx"> }
</span><ins>+
+ // Private
+
+ _calculateDurationRemainder()
+ {
+ return Object.keys(WebInspector.RenderingFrameTimelineRecord.TaskType).reduce(function(previousValue, key) {
+ var taskType = WebInspector.RenderingFrameTimelineRecord.TaskType[key];
+ if (taskType === WebInspector.RenderingFrameTimelineRecord.TaskType.Other)
+ return previousValue;
+ return previousValue - this.durationForTask(taskType);
+ }.bind(this), this.duration);
+ }
</ins><span class="cx"> };
</span><span class="cx">
</span><ins>+WebInspector.RenderingFrameTimelineRecord.TaskType = {
+ Script: "rendering-frame-timeline-record-script",
+ Layout: "rendering-frame-timeline-record-layout",
+ Paint: "rendering-frame-timeline-record-paint",
+ Other: "rendering-frame-timeline-record-other"
+};
+
</ins><span class="cx"> WebInspector.RenderingFrameTimelineRecord.TypeIdentifier = "rendering-frame-timeline-record";
</span><span class="cx">
</span><span class="cx"> WebInspector.RenderingFrameTimelineRecord._nextFrameIndex = 0;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineDataGridNodejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineDataGridNode.js (185454 => 185455)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineDataGridNode.js 2015-06-11 15:24:55 UTC (rev 185454)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineDataGridNode.js 2015-06-11 15:42:02 UTC (rev 185455)
</span><span class="lines">@@ -52,9 +52,11 @@
</span><span class="cx">
</span><span class="cx"> get data()
</span><span class="cx"> {
</span><del>- var layoutTime = this._record.durationForRecords(WebInspector.TimelineRecord.Type.Layout);
- var scriptTime = this._record.durationForRecords(WebInspector.TimelineRecord.Type.Script);
- return {startTime: this._record.startTime, layoutTime, scriptTime, otherTime: this._record.durationRemainder, totalTime: this._record.duration};
</del><ins>+ var scriptTime = this._record.durationForTask(WebInspector.RenderingFrameTimelineRecord.TaskType.Script);
+ var layoutTime = this._record.durationForTask(WebInspector.RenderingFrameTimelineRecord.TaskType.Layout);
+ var paintTime = this._record.durationForTask(WebInspector.RenderingFrameTimelineRecord.TaskType.Paint);
+ var otherTime = this._record.durationForTask(WebInspector.RenderingFrameTimelineRecord.TaskType.Other);
+ return {startTime: this._record.startTime, scriptTime, layoutTime, paintTime, otherTime, totalTime: this._record.duration};
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> createCellContent: function(columnIdentifier, cell)
</span><span class="lines">@@ -66,8 +68,9 @@
</span><span class="cx"> case "startTime":
</span><span class="cx"> return isNaN(value) ? emptyValuePlaceholderString : Number.secondsToString(value - this._baseStartTime, true);
</span><span class="cx">
</span><ins>+ case "scriptTime":
</ins><span class="cx"> case "layoutTime":
</span><del>- case "scriptTime":
</del><ins>+ case "paintTime":
</ins><span class="cx"> case "otherTime":
</span><span class="cx"> case "totalTime":
</span><span class="cx"> return (isNaN(value) || value === 0) ? emptyValuePlaceholderString : Number.secondsToString(value, true);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js (185454 => 185455)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js 2015-06-11 15:24:55 UTC (rev 185454)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js 2015-06-11 15:42:02 UTC (rev 185455)
</span><span class="lines">@@ -31,7 +31,7 @@
</span><span class="cx">
</span><span class="cx"> this.navigationSidebarTreeOutline.element.classList.add("rendering-frame");
</span><span class="cx">
</span><del>- var columns = {location: {}, startTime: {}, layoutTime: {}, scriptTime: {}, otherTime: {}, totalTime: {}};
</del><ins>+ var columns = {location: {}, startTime: {}, scriptTime: {}, paintTime: {}, layoutTime: {}, otherTime: {}, totalTime: {}};
</ins><span class="cx">
</span><span class="cx"> columns.location.title = WebInspector.UIString("Location");
</span><span class="cx">
</span><span class="lines">@@ -39,16 +39,20 @@
</span><span class="cx"> columns.startTime.width = "15%";
</span><span class="cx"> columns.startTime.aligned = "right";
</span><span class="cx">
</span><del>- columns.layoutTime.title = WebInspector.UIString("Layout");
- columns.layoutTime.width = "15%";
</del><ins>+ columns.scriptTime.title = WebInspector.RenderingFrameTimelineRecord.displayNameForTaskType(WebInspector.RenderingFrameTimelineRecord.TaskType.Script);
+ columns.scriptTime.width = "10%";
+ columns.scriptTime.aligned = "right";
+
+ columns.layoutTime.title = WebInspector.RenderingFrameTimelineRecord.displayNameForTaskType(WebInspector.RenderingFrameTimelineRecord.TaskType.Layout);
+ columns.layoutTime.width = "10%";
</ins><span class="cx"> columns.layoutTime.aligned = "right";
</span><span class="cx">
</span><del>- columns.scriptTime.title = WebInspector.UIString("Script");
- columns.scriptTime.width = "15%";
- columns.scriptTime.aligned = "right";
</del><ins>+ columns.paintTime.title = WebInspector.RenderingFrameTimelineRecord.displayNameForTaskType(WebInspector.RenderingFrameTimelineRecord.TaskType.Paint);
+ columns.paintTime.width = "10%";
+ columns.paintTime.aligned = "right";
</ins><span class="cx">
</span><del>- columns.otherTime.title = WebInspector.UIString("Other");
- columns.otherTime.width = "15%";
</del><ins>+ columns.otherTime.title = WebInspector.RenderingFrameTimelineRecord.displayNameForTaskType(WebInspector.RenderingFrameTimelineRecord.TaskType.Other);
+ columns.otherTime.width = "10%";
</ins><span class="cx"> columns.otherTime.aligned = "right";
</span><span class="cx">
</span><span class="cx"> columns.totalTime.title = WebInspector.UIString("Total Time");
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordFramecss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.css (185454 => 185455)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.css 2015-06-11 15:24:55 UTC (rev 185454)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.css 2015-06-11 15:42:02 UTC (rev 185455)
</span><span class="lines">@@ -50,7 +50,6 @@
</span><span class="cx"> box-sizing: border-box;
</span><span class="cx">
</span><span class="cx"> background-color: rgb(221, 221, 221);
</span><del>-
</del><span class="cx"> border-bottom: solid 1px rgb(245, 245, 245);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -58,14 +57,14 @@
</span><span class="cx"> border-bottom-style: none;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.timeline-record-frame > .frame > .duration.timeline-record-type-network {
- background-color: rgb(61, 147, 200);
</del><ins>+.timeline-record-frame > .frame > .duration.rendering-frame-timeline-record-script {
+ background-color: rgb(153, 113, 185);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.timeline-record-frame > .frame > .duration.timeline-record-type-layout {
</del><ins>+.timeline-record-frame > .frame > .duration.rendering-frame-timeline-record-layout {
</ins><span class="cx"> background-color: rgb(212, 108, 108);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.timeline-record-frame > .frame > .duration.timeline-record-type-script {
- background-color: rgb(153, 113, 185);
</del><ins>+.timeline-record-frame > .frame > .duration.rendering-frame-timeline-record-paint {
+ background-color: rgb(152, 188, 77);
</ins><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordFramejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.js (185454 => 185455)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.js 2015-06-11 15:24:55 UTC (rev 185454)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.js 2015-06-11 15:42:02 UTC (rev 185455)
</span><span class="lines">@@ -105,26 +105,21 @@
</span><span class="cx"> var frameHeight = this._record.duration / graphDataSource.graphHeightSeconds;
</span><span class="cx"> this._updateElementPosition(frameElement, frameHeight, "height");
</span><span class="cx">
</span><del>- function createDurationElement(duration, recordType)
</del><ins>+ function createDurationElement(duration, taskType)
</ins><span class="cx"> {
</span><span class="cx"> var element = document.createElement("div");
</span><span class="cx"> this._updateElementPosition(element, duration / this._record.duration, "height");
</span><del>- element.classList.add("duration");
- if (recordType)
- element.classList.add(recordType);
</del><ins>+ element.classList.add("duration", taskType);
</ins><span class="cx"> return element;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- if (this._record.durationRemainder > 0)
- frameElement.appendChild(createDurationElement.call(this, this._record.durationRemainder));
-
- for (var type in WebInspector.TimelineRecord.Type) {
- var recordType = WebInspector.TimelineRecord.Type[type];
- var duration = this._record.durationForRecords(recordType);
</del><ins>+ Object.keys(WebInspector.RenderingFrameTimelineRecord.TaskType).forEach(function(key) {
+ var taskType = WebInspector.RenderingFrameTimelineRecord.TaskType[key];
+ var duration = this._record.durationForTask(taskType);
</ins><span class="cx"> if (duration === 0)
</span><del>- continue;
- frameElement.appendChild(createDurationElement.call(this, duration, recordType));
- }
</del><ins>+ return;
+ frameElement.insertBefore(createDurationElement.call(this, duration, taskType), frameElement.firstChild);
+ }, this);
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> _updateElementPosition(element, newPosition, property)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js (185454 => 185455)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js 2015-06-11 15:24:55 UTC (rev 185454)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js 2015-06-11 15:42:02 UTC (rev 185455)
</span><span class="lines">@@ -79,11 +79,11 @@
</span><span class="cx"> container.appendChild(this._viewModeNavigationBar.element);
</span><span class="cx"> this.element.insertBefore(container, this.element.firstChild);
</span><span class="cx">
</span><del>- this._chartColors = {
- layout: "rgb(212, 108, 108)",
- script: "rgb(153, 113, 185)",
- other: "rgb(221, 221, 221)"
- };
</del><ins>+ this._chartColors = new Map;
+ this._chartColors.set(WebInspector.RenderingFrameTimelineRecord.TaskType.Script, "rgb(153, 113, 185)");
+ this._chartColors.set(WebInspector.RenderingFrameTimelineRecord.TaskType.Layout, "rgb(212, 108, 108)");
+ this._chartColors.set(WebInspector.RenderingFrameTimelineRecord.TaskType.Paint, "rgb(152, 188, 77)");
+ this._chartColors.set(WebInspector.RenderingFrameTimelineRecord.TaskType.Other, "rgb(221, 221, 221)");
</ins><span class="cx">
</span><span class="cx"> this._frameSelectionChartRow = new WebInspector.ChartDetailsSectionRow(this);
</span><span class="cx"> this._frameSelectionChartRow.innerRadius = 0.5;
</span><span class="lines">@@ -791,13 +791,18 @@
</span><span class="cx">
</span><span class="cx"> var chart = this._frameSelectionChartRow;
</span><span class="cx"> var records = getSelectedRecords.call(this);
</span><ins>+ var chartData = Object.keys(WebInspector.RenderingFrameTimelineRecord.TaskType).map(function(taskTypeKey) {
+ var taskType = WebInspector.RenderingFrameTimelineRecord.TaskType[taskTypeKey];
+ var label = WebInspector.RenderingFrameTimelineRecord.displayNameForTaskType(taskType);
+ var value = records.reduce(function(previousValue, currentValue) { return previousValue + currentValue.durationForTask(taskType); }, 0);
+ var color = this._chartColors.get(taskType);
+ return {label, value, color};
+ }, this);
+
+ this._frameSelectionChartRow.data = chartData;
+
</ins><span class="cx"> if (!records.length) {
</span><span class="cx"> this._frameSelectionChartRow.title = WebInspector.UIString("Frames: None Selected");
</span><del>- this._frameSelectionChartRow.data = [
- {label: WebInspector.UIString("Layout"), value: 0, color: this._chartColors.layout},
- {label: WebInspector.UIString("Script"), value: 0, color: this._chartColors.script},
- {label: WebInspector.UIString("Other"), value: 0, color: this._chartColors.other}
- ];
</del><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -811,24 +816,6 @@
</span><span class="cx"> this._frameSelectionChartRow.title = WebInspector.UIString("Frame: %d (%s – %s)").format(firstRecord.frameNumber,
</span><span class="cx"> Number.secondsToString(firstRecord.startTime), Number.secondsToString(lastRecord.endTime));
</span><span class="cx"> }
</span><del>-
- function durationForRecordType(type)
- {
- return records.reduce(function(previousValue, currentValue) {
- return previousValue + (type ? currentValue.durationForRecords(type) : currentValue.durationRemainder);
- }, 0);
- }
-
- var totalTime = lastRecord.endTime - firstRecord.startTime;
- var layoutTime = durationForRecordType(WebInspector.TimelineRecord.Type.Layout);
- var scriptTime = durationForRecordType(WebInspector.TimelineRecord.Type.Script);
- var otherTime = durationForRecordType();
-
- this._frameSelectionChartRow.data = [
- {label: WebInspector.UIString("Layout"), value: layoutTime, color: this._chartColors.layout},
- {label: WebInspector.UIString("Script"), value: scriptTime, color: this._chartColors.script},
- {label: WebInspector.UIString("Other"), value: otherTime, color: this._chartColors.other}
- ];
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // These methods are only used when ReplayAgent is available.
</span></span></pre>
</div>
</div>
</body>
</html>