Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (185454 => 185455)
--- 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)
@@ -1,5 +1,63 @@
2015-06-11 Matt Baker <[email protected]>
+ 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 <[email protected]>
+
Web Inspector: Wrong overview graph shown after switching from Frames to Timelines
https://bugs.webkit.org/show_bug.cgi?id=145778
Modified: trunk/Source/WebInspectorUI/UserInterface/Images/TimelineRecordPaint.svg (185454 => 185455)
--- 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)
@@ -1,8 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
- <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"/>
+ <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"/>
<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"/>
</svg>
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/RenderingFrameTimelineRecord.js (185454 => 185455)
--- 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)
@@ -30,8 +30,7 @@
super(WebInspector.TimelineRecord.Type.RenderingFrame, startTime, endTime);
this._children = children || [];
- this._durationByRecordType = new Map;
- this._durationRemainder = NaN;
+ this._durationByTaskType = new Map;
this._frameIndex = WebInspector.RenderingFrameTimelineRecord._nextFrameIndex++;
}
@@ -42,6 +41,20 @@
WebInspector.RenderingFrameTimelineRecord._nextFrameIndex = 0;
}
+ 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");
+ }
+ }
+
// Public
get frameIndex()
@@ -59,48 +72,75 @@
return this._children.slice();
}
- get durationRemainder()
+ durationForTask(taskType)
{
- if (!isNaN(this._durationRemainder))
- return this._durationRemainder;
+ if (this._durationByTaskType.has(taskType))
+ return this._durationByTaskType.get(taskType);
- this._durationRemainder = this.duration;
- for (var recordType in WebInspector.TimelineRecord.Type)
- this._durationRemainder -= this.durationForRecords(WebInspector.TimelineRecord.Type[recordType]);
+ 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;
+ }
+ }
- return this._durationRemainder;
- }
+ var duration;
+ if (taskType === WebInspector.RenderingFrameTimelineRecord.TaskType.Other)
+ duration = this._calculateDurationRemainder();
+ else {
+ duration = this._children.reduce(function(previousValue, currentValue) {
+ if (!validRecordForTaskType(currentValue))
+ return previousValue;
- durationForRecords(recordType)
- {
- if (this._durationByRecordType.has(recordType))
- return this._durationByRecordType.get(recordType);
+ var currentDuration = currentValue.duration;
+ if (currentValue.usesActiveStartTime)
+ currentDuration -= currentValue.inactiveDuration;
+ return previousValue + currentDuration;
+ }, 0);
- 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);
+ // 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);
+ }
}
- this._durationByRecordType.set(recordType, duration);
+ this._durationByTaskType.set(taskType, duration);
return duration;
}
+
+ // 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);
+ }
};
+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"
+};
+
WebInspector.RenderingFrameTimelineRecord.TypeIdentifier = "rendering-frame-timeline-record";
WebInspector.RenderingFrameTimelineRecord._nextFrameIndex = 0;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineDataGridNode.js (185454 => 185455)
--- 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)
@@ -52,9 +52,11 @@
get data()
{
- 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};
+ 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};
},
createCellContent: function(columnIdentifier, cell)
@@ -66,8 +68,9 @@
case "startTime":
return isNaN(value) ? emptyValuePlaceholderString : Number.secondsToString(value - this._baseStartTime, true);
+ case "scriptTime":
case "layoutTime":
- case "scriptTime":
+ case "paintTime":
case "otherTime":
case "totalTime":
return (isNaN(value) || value === 0) ? emptyValuePlaceholderString : Number.secondsToString(value, true);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js (185454 => 185455)
--- 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)
@@ -31,7 +31,7 @@
this.navigationSidebarTreeOutline.element.classList.add("rendering-frame");
- var columns = {location: {}, startTime: {}, layoutTime: {}, scriptTime: {}, otherTime: {}, totalTime: {}};
+ var columns = {location: {}, startTime: {}, scriptTime: {}, paintTime: {}, layoutTime: {}, otherTime: {}, totalTime: {}};
columns.location.title = WebInspector.UIString("Location");
@@ -39,16 +39,20 @@
columns.startTime.width = "15%";
columns.startTime.aligned = "right";
- columns.layoutTime.title = WebInspector.UIString("Layout");
- columns.layoutTime.width = "15%";
+ 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%";
columns.layoutTime.aligned = "right";
- columns.scriptTime.title = WebInspector.UIString("Script");
- columns.scriptTime.width = "15%";
- columns.scriptTime.aligned = "right";
+ columns.paintTime.title = WebInspector.RenderingFrameTimelineRecord.displayNameForTaskType(WebInspector.RenderingFrameTimelineRecord.TaskType.Paint);
+ columns.paintTime.width = "10%";
+ columns.paintTime.aligned = "right";
- columns.otherTime.title = WebInspector.UIString("Other");
- columns.otherTime.width = "15%";
+ columns.otherTime.title = WebInspector.RenderingFrameTimelineRecord.displayNameForTaskType(WebInspector.RenderingFrameTimelineRecord.TaskType.Other);
+ columns.otherTime.width = "10%";
columns.otherTime.aligned = "right";
columns.totalTime.title = WebInspector.UIString("Total Time");
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.css (185454 => 185455)
--- 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)
@@ -50,7 +50,6 @@
box-sizing: border-box;
background-color: rgb(221, 221, 221);
-
border-bottom: solid 1px rgb(245, 245, 245);
}
@@ -58,14 +57,14 @@
border-bottom-style: none;
}
-.timeline-record-frame > .frame > .duration.timeline-record-type-network {
- background-color: rgb(61, 147, 200);
+.timeline-record-frame > .frame > .duration.rendering-frame-timeline-record-script {
+ background-color: rgb(153, 113, 185);
}
-.timeline-record-frame > .frame > .duration.timeline-record-type-layout {
+.timeline-record-frame > .frame > .duration.rendering-frame-timeline-record-layout {
background-color: rgb(212, 108, 108);
}
-.timeline-record-frame > .frame > .duration.timeline-record-type-script {
- background-color: rgb(153, 113, 185);
+.timeline-record-frame > .frame > .duration.rendering-frame-timeline-record-paint {
+ background-color: rgb(152, 188, 77);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.js (185454 => 185455)
--- 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)
@@ -105,26 +105,21 @@
var frameHeight = this._record.duration / graphDataSource.graphHeightSeconds;
this._updateElementPosition(frameElement, frameHeight, "height");
- function createDurationElement(duration, recordType)
+ function createDurationElement(duration, taskType)
{
var element = document.createElement("div");
this._updateElementPosition(element, duration / this._record.duration, "height");
- element.classList.add("duration");
- if (recordType)
- element.classList.add(recordType);
+ element.classList.add("duration", taskType);
return element;
}
- 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);
+ Object.keys(WebInspector.RenderingFrameTimelineRecord.TaskType).forEach(function(key) {
+ var taskType = WebInspector.RenderingFrameTimelineRecord.TaskType[key];
+ var duration = this._record.durationForTask(taskType);
if (duration === 0)
- continue;
- frameElement.appendChild(createDurationElement.call(this, duration, recordType));
- }
+ return;
+ frameElement.insertBefore(createDurationElement.call(this, duration, taskType), frameElement.firstChild);
+ }, this);
},
_updateElementPosition(element, newPosition, property)
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js (185454 => 185455)
--- 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)
@@ -79,11 +79,11 @@
container.appendChild(this._viewModeNavigationBar.element);
this.element.insertBefore(container, this.element.firstChild);
- this._chartColors = {
- layout: "rgb(212, 108, 108)",
- script: "rgb(153, 113, 185)",
- other: "rgb(221, 221, 221)"
- };
+ 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)");
this._frameSelectionChartRow = new WebInspector.ChartDetailsSectionRow(this);
this._frameSelectionChartRow.innerRadius = 0.5;
@@ -791,13 +791,18 @@
var chart = this._frameSelectionChartRow;
var records = getSelectedRecords.call(this);
+ 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 = ""
+
if (!records.length) {
this._frameSelectionChartRow.title = WebInspector.UIString("Frames: None Selected");
- 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}
- ];
return;
}
@@ -811,24 +816,6 @@
this._frameSelectionChartRow.title = WebInspector.UIString("Frame: %d (%s – %s)").format(firstRecord.frameNumber,
Number.secondsToString(firstRecord.startTime), Number.secondsToString(lastRecord.endTime));
}
-
- 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}
- ];
}
// These methods are only used when ReplayAgent is available.
