Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (183720 => 183721)
--- trunk/Source/WebInspectorUI/ChangeLog 2015-05-02 19:19:07 UTC (rev 183720)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-05-02 19:26:21 UTC (rev 183721)
@@ -1,3 +1,110 @@
+2015-05-02 Matt Baker <[email protected]>
+
+ Web Inspector: Relocate the selected range details in the Rendering Frames timeline UI
+ https://bugs.webkit.org/show_bug.cgi?id=144346
+
+ This patch removes the details sidebar used by the rendering frames view, and relocates the frame selection
+ chart the Timelines navigation sidebar.
+
+ Reviewed by Timothy Hatcher.
+
+ * Localizations/en.lproj/localizedStrings.js:
+ * UserInterface/Base/Main.js:
+ (WebInspector.contentLoaded):
+ RenderingFramesDetailsSidebar is no longer used.
+
+ * UserInterface/Controllers/TimelineManager.js:
+ (WebInspector.TimelineManager.prototype._loadNewRecording):
+ Reordered timelines.
+
+ * UserInterface/Main.html:
+ Removed references to deleted files.
+
+ * UserInterface/Views/ChartDetailsSectionLegendRow.js: Removed.
+ No longer used. The legend is now a child element of the chart.
+
+ * UserInterface/Views/ChartDetailsSectionRow.css:
+ (.details-section > .content > .group > .row.chart > .title):
+ (.details-section > .content > .group > .row.chart > .chart-content):
+ (.details-section > .content > .group > .row.chart > .chart-content > .legend):
+ (.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item):
+ (.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > .label > .color-swatch):
+ (.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > .label):
+ (.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > .value):
+ (.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > *):
+ New chart and legend styles.
+
+ * UserInterface/Views/ChartDetailsSectionRow.js:
+ (WebInspector.ChartDetailsSectionRow):
+ (WebInspector.ChartDetailsSectionRow.prototype.set title):
+ (WebInspector.ChartDetailsSectionRow.prototype.set innerLabel):
+ (WebInspector.ChartDetailsSectionRow.prototype.set innerRadius):
+ (WebInspector.ChartDetailsSectionRow.prototype.get total):
+ (WebInspector.ChartDetailsSectionRow.set data):
+ (WebInspector.ChartDetailsSectionRow.prototype.set data):
+ (WebInspector.ChartDetailsSectionRow.prototype._createLegendItem):
+ (WebInspector.ChartDetailsSectionRow.prototype._refresh):
+
+ A few changes have been made to the appearance and behavior of the chart. A chart title can now be set,
+ and the legend appears to the right of the chart rather than in a separate details group.
+
+ The chart now has better support for adding empty data points, ensuring that a meaningful legend is shown even
+ when no rendering frames are selected in the timeline overview graph. This ensures that the task associated
+ with each colored frame segment is apparent, without having to make a selection or record a timeline.
+
+ * UserInterface/Views/RenderingFrameDetailsSidebarPanel.js: Removed.
+ No longer used.
+
+ * UserInterface/Views/RenderingFrameTimelineOverviewGraph.js:
+ Reduced maximum timeline height to increase the height of short frames.
+
+ * UserInterface/Views/RenderingFrameTimelineView.js:
+ (WebInspector.RenderingFrameTimelineView.prototype.shown):
+ (WebInspector.RenderingFrameTimelineView.prototype.hidden):
+ RenderingFramesDetailsSidebar is no longer used.
+
+ * UserInterface/Views/TimelineRecordingContentView.js:
+ (WebInspector.TimelineRecordingContentView):
+ (WebInspector.TimelineRecordingContentView.prototype._updateTimes):
+ (WebInspector.TimelineRecordingContentView.prototype._updateTimelineOverviewHeight):
+ (WebInspector.TimelineRecordingContentView.prototype._timelineRemoved):
+ (WebInspector.TimelineRecordingContentView.prototype._timeRangeSelectionChanged):
+ (WebInspector.TimelineRecordingContentView.prototype._updateFrameSelection):
+ Improved logic for updating the frame selection.
+
+ * UserInterface/Views/TimelineSidebarPanel.css:
+ (.sidebar > .panel.navigation.timeline > .timelines-content > .details-section > div.header):
+ (.sidebar > .panel.navigation.timeline > .timelines-content > .details-section > .content > .group > .row.chart):
+ (.sidebar > .panel.navigation.timeline > .timelines-content > .details-section > .content > .group > .row.chart > .chart-content > .chart):
+ (.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing > .content): Deleted.
+ New chart styles.
+
+ * UserInterface/Views/TimelineSidebarPanel.js:
+ (WebInspector.TimelineSidebarPanel):
+ (WebInspector.TimelineSidebarPanel.prototype.shown):
+ (WebInspector.TimelineSidebarPanel._timelineAdded.set this):
+ (WebInspector.TimelineSidebarPanel.this._timelineTreeElementMap.get select):
+ (WebInspector.TimelineSidebarPanel.get else):
+ (WebInspector.TimelineSidebarPanel._refreshFrameSelectionChart.getSelectedRecords.get var):
+ (WebInspector.TimelineSidebarPanel._refreshFrameSelectionChart.getSelectedRecords):
+ (WebInspector.TimelineSidebarPanel.showTimelineViewForTimeline.this._timelineTreeElementMap.get select):
+ (WebInspector.TimelineSidebarPanel.prototype.treeElementForRepresentedObject.get if.get if):
+ (WebInspector.TimelineSidebarPanel.prototype.treeElementForRepresentedObject.get if):
+ (WebInspector.TimelineSidebarPanel._refreshFrameSelectionChart.durationForRecordType):
+ (WebInspector.TimelineSidebarPanel.prototype.treeElementForRepresentedObject):
+ (WebInspector.TimelineSidebarPanel.set contentTreeOutlineLabel): Deleted.
+ (WebInspector.TimelineSidebarPanel._recordingCreated.set this): Deleted.
+ (WebInspector.TimelineSidebarPanel.get this): Deleted.
+ Moved the selected frames chart to the navigation sidebar.
+
+ * UserInterface/Views/TimelineTabContentView.js:
+ (WebInspector.TimelineTabContentView):
+ RenderingFramesDetailsSidebar is no longer used.
+
+ * WebInspectorUI.vcxproj/WebInspectorUI.vcxproj:
+ * WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters:
+ Removed references to deleted files.
+
2015-05-02 Timothy Hatcher <[email protected]>
Web Inspector: Allow closing and reopening the Resources tab
Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (183720 => 183721)
--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2015-05-02 19:19:07 UTC (rev 183720)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2015-05-02 19:26:21 UTC (rev 183721)
@@ -22,7 +22,6 @@
localizedStrings["%d \xd7 %d pixels"] = "%d \xd7 %d pixels";
localizedStrings["%d \xd7 %d pixels (Natural: %d \xd7 %d pixels)"] = "%d \xd7 %d pixels (Natural: %d \xd7 %d pixels)";
localizedStrings["%d matches"] = "%d matches";
-localizedStrings["%d %d"] = "%d %d";
localizedStrings["%fpx"] = "%fpx";
localizedStrings["%fpx\xB2"] = "%fpx\xB2";
localizedStrings["%s (computed)"] = "%s (computed)";
@@ -30,7 +29,6 @@
localizedStrings["%s (hidden)"] = "%s (hidden)";
localizedStrings["%s Event Dispatched"] = "%s Event Dispatched";
localizedStrings["%s Prototype"] = "%s Prototype";
-localizedStrings["%s %s"] = "%s %s";
localizedStrings["(Index)"] = "(Index)";
localizedStrings["(anonymous function)"] = "(anonymous function)";
localizedStrings["(many)"] = "(many)";
@@ -88,7 +86,6 @@
localizedStrings["Capturing"] = "Capturing";
localizedStrings["Catch Variables"] = "Catch Variables";
localizedStrings["Character Data"] = "Character Data";
-localizedStrings["Chart"] = "Chart";
localizedStrings["Checked"] = "Checked";
localizedStrings["Child Layers"] = "Child Layers";
localizedStrings["Children"] = "Children";
@@ -130,7 +127,6 @@
localizedStrings["Copy as HTML"] = "Copy as HTML";
localizedStrings["Could not fetch properties. Object may no longer exist."] = "Could not fetch properties. Object may no longer exist.";
localizedStrings["Create a new tab"] = "Create a new tab";
-localizedStrings["DOM Tree"] = "DOM Tree";
localizedStrings["Data"] = "Data";
localizedStrings["Data returned from the database is too large."] = "Data returned from the database is too large.";
localizedStrings["Database no longer has expected version."] = "Database no longer has expected version.";
@@ -233,10 +229,12 @@
localizedStrings["Forced Pseudo-Classes"] = "Forced Pseudo-Classes";
localizedStrings["Forward (%s)"] = "Forward (%s)";
localizedStrings["Fragment"] = "Fragment";
-localizedStrings["Frame"] = "Frame";
localizedStrings["Frame %d"] = "Frame %d";
localizedStrings["Frame URL"] = "Frame URL";
+localizedStrings["Frame: %d (%s %s)"] = "Frame: %d (%s %s)";
localizedStrings["Frames"] = "Frames";
+localizedStrings["Frames: %d %d (%s %s)"] = "Frames: %d %d (%s %s)";
+localizedStrings["Frames: None Selected"] = "Frames: None Selected";
localizedStrings["Full URL"] = "Full URL";
localizedStrings["Function"] = "Function";
localizedStrings["Function Name Variable"] = "Function Name Variable";
@@ -419,9 +417,9 @@
localizedStrings["Security Issue"] = "Security Issue";
localizedStrings["Selected"] = "Selected";
localizedStrings["Selected Element"] = "Selected Element";
+localizedStrings["Selected Frames"] = "Selected Frames";
localizedStrings["Selected Item"] = "Selected Item";
localizedStrings["Selected Items"] = "Selected Items";
-localizedStrings["Selected Range"] = "Selected Range";
localizedStrings["Selected Symbol"] = "Selected Symbol";
localizedStrings["Selected Value"] = "Selected Value";
localizedStrings["Self Time"] = "Self Time";
@@ -450,7 +448,6 @@
localizedStrings["Small Icons"] = "Small Icons";
localizedStrings["Socket"] = "Socket";
localizedStrings["Sockets"] = "Sockets";
-localizedStrings["Source Code"] = "Source Code";
localizedStrings["Specificity: (%d, %d, %d)"] = "Specificity: (%d, %d, %d)";
localizedStrings["Specificity: No value for selected element"] = "Specificity: No value for selected element";
localizedStrings["Spelling"] = "Spelling";
@@ -474,7 +471,6 @@
localizedStrings["Text Node"] = "Text Node";
localizedStrings["Text Only"] = "Text Only";
localizedStrings["The %s \ntable is empty."] = "The %s \ntable is empty.";
-localizedStrings["Time"] = "Time";
localizedStrings["Timeline Events"] = "Timeline Events";
localizedStrings["Timeline Recording %d"] = "Timeline Recording %d";
localizedStrings["Timelines"] = "Timelines";
Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Main.js (183720 => 183721)
--- trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2015-05-02 19:19:07 UTC (rev 183720)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2015-05-02 19:26:21 UTC (rev 183721)
@@ -315,7 +315,6 @@
this.applicationCacheDetailsSidebarPanel = new WebInspector.ApplicationCacheDetailsSidebarPanel;
this.scopeChainDetailsSidebarPanel = new WebInspector.ScopeChainDetailsSidebarPanel;
this.probeDetailsSidebarPanel = new WebInspector.ProbeDetailsSidebarPanel;
- this.renderingFrameDetailsSidebarPanel = new WebInspector.RenderingFrameDetailsSidebarPanel;
if (window.LayerTreeAgent)
this.layerTreeDetailsSidebarPanel = new WebInspector.LayerTreeDetailsSidebarPanel;
Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js (183720 => 183721)
--- trunk/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js 2015-05-02 19:19:07 UTC (rev 183720)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js 2015-05-02 19:26:21 UTC (rev 183721)
@@ -422,14 +422,13 @@
var identifier = this._nextRecordingIdentifier++;
var newRecording = new WebInspector.TimelineRecording(identifier, WebInspector.UIString("Timeline Recording %d").format(identifier));
newRecording.addTimeline(WebInspector.Timeline.create(WebInspector.TimelineRecord.Type.Network, newRecording));
+ newRecording.addTimeline(WebInspector.Timeline.create(WebInspector.TimelineRecord.Type.Layout, newRecording));
+ newRecording.addTimeline(WebInspector.Timeline.create(WebInspector.TimelineRecord.Type.Script, newRecording));
// COMPATIBILITY (iOS 8): TimelineAgent.EventType.RenderingFrame did not exist.
if (window.TimelineAgent && TimelineAgent.EventType.RenderingFrame)
newRecording.addTimeline(WebInspector.Timeline.create(WebInspector.TimelineRecord.Type.RenderingFrame, newRecording));
- newRecording.addTimeline(WebInspector.Timeline.create(WebInspector.TimelineRecord.Type.Layout, newRecording));
- newRecording.addTimeline(WebInspector.Timeline.create(WebInspector.TimelineRecord.Type.Script, newRecording));
-
this._recordings.push(newRecording);
this.dispatchEventToListeners(WebInspector.TimelineManager.Event.RecordingCreated, {recording: newRecording});
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (183720 => 183721)
--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2015-05-02 19:19:07 UTC (rev 183720)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2015-05-02 19:26:21 UTC (rev 183721)
@@ -377,7 +377,6 @@
<script src=""
<script src=""
<script src=""
- <script src=""
<script src=""
<script src=""
<script src=""
@@ -473,7 +472,6 @@
<script src=""
<script src=""
<script src=""
- <script src=""
<script src=""
<script src=""
<script src=""
Deleted: trunk/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionLegendRow.js (183720 => 183721)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionLegendRow.js 2015-05-02 19:19:07 UTC (rev 183720)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionLegendRow.js 2015-05-02 19:26:21 UTC (rev 183721)
@@ -1,40 +0,0 @@
-/*
- * Copyright (C) 2015 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- * notice, this list of conditions and the following disclaimer in the
- * documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ChartDetailsSectionLegendRow = class ChartDetailsSectionLegendRow extends WebInspector.DetailsSectionSimpleRow
-{
- constructor(label, value, color)
- {
- super(label, value);
-
- this.element.classList.add("legend-item");
-
- var colorSwatchElement = document.createElement("div");
- colorSwatchElement.className = "color-swatch";
- colorSwatchElement.style.backgroundColor = color;
-
- this._labelElement.appendChild(colorSwatchElement);
- }
-};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.css (183720 => 183721)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.css 2015-05-02 19:19:07 UTC (rev 183720)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.css 2015-05-02 19:26:21 UTC (rev 183721)
@@ -23,24 +23,54 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
-.details-section .row.chart {
+.details-section > .content > .group > .row.chart > .title {
+ color: rgb(57, 57, 57);
+
+ white-space: nowrap;
+ overflow: hidden;
text-align: center;
+ text-overflow: ellipsis;
+
+ font-size: 11px;
+
+ padding: 4px 5px 0px 9px;
}
-.details-section .row.chart canvas {
- width: 150px;
- height: 150px;
+.details-section > .content > .group > .row.chart > .chart-content {
+ display: flex;
+ justify-content: center;
+ padding: 8px 5px 0px 12px;
}
-.details-section .row.chart.empty canvas {
- display: none;
+.details-section > .content > .group > .row.chart > .chart-content > .legend {
+ display: table;
+ margin-left: 12px;
}
-.details-section > .content > .group > .row.legend-item > .label > .color-swatch {
+.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item {
+ display: table-row;
+ height: 16px;
+}
+
+.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > .label > .color-swatch {
display: inline-block;
- margin-left: 6px;
+
width: 8px;
height: 8px;
+ margin-right: 6px;
- border: solid 1px #666;
+ border: solid 1px rgb(102, 102, 102);
}
+
+.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > .label {
+ color: rgb(51, 51, 51);
+}
+
+.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > .value {
+ padding-left: 8px;
+}
+
+.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > * {
+ display: table-cell;
+ vertical-align: middle;
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.js (183720 => 183721)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.js 2015-05-02 19:19:07 UTC (rev 183720)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.js 2015-05-02 19:26:21 UTC (rev 183721)
@@ -25,100 +25,137 @@
WebInspector.ChartDetailsSectionRow = class ChartDetailsSectionRow extends WebInspector.DetailsSectionRow
{
- constructor(formatValueCallback)
+ constructor(delegate)
{
super(WebInspector.UIString("No Chart Available"));
this.element.classList.add("chart");
- this._legendGroup = new WebInspector.DetailsSectionGroup;
- this._formatValueCallback = formatValueCallback;
- this._chartItems = [];
+ this._titleElement = document.createElement("div");
+ this._titleElement.className = "title";
+ this.element.appendChild(this._titleElement);
+
+ var chartContentElement = document.createElement("div");
+ chartContentElement.className = "chart-content";
+ this.element.appendChild(chartContentElement);
+
+ this._canvas = document.createElement("canvas");
+ this._canvas.className = "chart";
+ chartContentElement.appendChild(this._canvas);
+
+ this._legendElement = document.createElement("div");
+ this._legendElement.className = "legend";
+ chartContentElement.appendChild(this._legendElement);
+
+ this._delegate = delegate;
+ this._items = [];
+ this._title = "";
this._innerLabel = "";
- this._innerRadius = 0.5;
+ this._innerRadius = 0;
this._innerLabelFontSize = 11;
- this._shadowColor = "rgba(0, 0, 0, 0.5)";
+ this._shadowColor = "rgba(0, 0, 0, 0.6)";
this._total = 0;
-
- this._refresh();
}
// Public
- get legendGroup()
+ set title(title)
{
- return this._legendGroup;
+ if (this._title === title)
+ return;
+
+ this._title = title;
+ this._titleElement.textContent = title;
}
- set innerLabel(x)
+ set innerLabel(label)
{
- if (this._innerLabel === x)
+ if (this._innerLabel === label)
return;
- this._innerLabel = x;
+ this._innerLabel = label;
this._refresh();
}
- addChartValue(label, value, color)
+ set innerRadius(radius)
{
- console.assert(value >= 0);
- if (value < 0)
+ if (this._innerRadius === radius)
return;
- this._chartItems.push({label, value, color});
- this._total += value
+ this._innerRadius = radius;
this._refresh();
+ }
- if (!this._legendGroup)
- return;
-
- var rows = this._legendGroup.rows;
- var formattedValue = this._formatValueCallback ? this._formatValueCallback(value) : value;
- rows.push(new WebInspector.ChartDetailsSectionLegendRow(label, formattedValue, color));
- this._legendGroup.rows = rows;
+ get total()
+ {
+ return this._total;
}
- clearChart()
+ set data(items)
{
- this._chartItems = [];
- this._total = 0;
+ if (!(items instanceof Array))
+ items = [items];
- this._refresh();
+ items = items.filter(function(item) { return item.value >= 0; });
+ if (!this._items.length && !items.length)
+ return;
- if (!this._legendGroup)
+ if (this._items.length === items.length && this._items.every(function(item, index) { return JSON.stringify(item) === JSON.stringify(items[index]); }))
return;
- this._legendGroup.rows = [];
+ this._items = items;
+ this._total = this._items.reduce(function(previousValue, currentValue) { return previousValue + currentValue.value; }, 0);;
+
+ this._legendElement.removeChildren();
+ this._items.forEach(function(item) { this._legendElement.appendChild(this._createLegendItem(item)); }, this);
+
+ this._refresh();
}
// Private
- _refresh()
+ _createLegendItem(item)
{
- if (!this._chartItems.length) {
- this._canvas = null;
- this.showEmptyMessage();
- return;
- }
+ var colorSwatchElement = document.createElement("div");
+ colorSwatchElement.className = "color-swatch";
+ colorSwatchElement.style.backgroundColor = item.color;
- if (!this._canvas) {
- this.hideEmptyMessage();
+ var labelElement = document.createElement("div");
+ labelElement.className = "label";
+ labelElement.appendChild(colorSwatchElement);
+ labelElement.appendChild(document.createTextNode(item.label));
- this._canvas = document.createElement("canvas");
- this.element.appendChild(this._canvas);
+ var valueElement = document.createElement("div");
+ valueElement.className = "value";
- this._canvas.width = this._canvas.offsetWidth * window.devicePixelRatio;
- this._canvas.height = this._canvas.offsetHeight * window.devicePixelRatio;
- }
+ if (this._delegate && typeof this._delegate.formatChartValue === "function")
+ valueElement.textContent = this._delegate.formatChartValue(item.value);
+ else
+ valueElement.textContent = item.value;
+ var legendItemElement = document.createElement("div");
+ legendItemElement.className = "legend-item";
+ legendItemElement.appendChild(labelElement);
+ legendItemElement.appendChild(valueElement);
+
+ return legendItemElement;
+ }
+
+ _refresh()
+ {
+ var width = this._canvas.clientWidth * window.devicePixelRatio;
+ var height = this._canvas.clientHeight * window.devicePixelRatio;
+ this._canvas.width = width;
+ this._canvas.height = height;
+
var context = this._canvas.getContext("2d");
- context.clearRect(0, 0, this._canvas.width, this._canvas.height);
+ context.clearRect(0, 0, width, height);
- var centerX = Math.floor(this._canvas.width / 2);
- var centerY = Math.floor(this._canvas.height / 2);
- var radius = Math.floor(Math.min(centerX, centerY) * 0.96); // Add a small margin to prevent clipping of the chart shadow.
+ var x = Math.floor(width / 2);
+ var y = Math.floor(height / 2);
+ var radius = Math.floor(Math.min(x, y) * 0.96); // Add a small margin to prevent clipping of the chart shadow.
var innerRadius = Math.floor(radius * this._innerRadius);
var startAngle = 1.5 * Math.PI;
var endAngle = startAngle;
@@ -138,12 +175,14 @@
context.shadowBlur = 2 * window.devicePixelRatio;
context.shadowOffsetY = window.devicePixelRatio;
context.shadowColor = this._shadowColor;
- drawSlice(centerX, centerY, 0, 2.0 * Math.PI, "rgb(255, 255, 255)");
+ drawSlice(x, y, 0, 2.0 * Math.PI, "rgb(242, 242, 242)");
context.restore();
- for (var item of this._chartItems) {
+ for (var item of this._items) {
+ if (item.value === 0)
+ continue;
endAngle += (item.value / this._total) * 2.0 * Math.PI;
- drawSlice(centerX, centerY, startAngle, endAngle, item.color);
+ drawSlice(x, y, startAngle, endAngle, item.color);
startAngle = endAngle;
}
Deleted: trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameDetailsSidebarPanel.js (183720 => 183721)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameDetailsSidebarPanel.js 2015-05-02 19:19:07 UTC (rev 183720)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameDetailsSidebarPanel.js 2015-05-02 19:26:21 UTC (rev 183721)
@@ -1,189 +0,0 @@
-/*
- * Copyright (C) 2015 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- * notice, this list of conditions and the following disclaimer in the
- * documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.RenderingFrameDetailsSidebarPanel = class RenderingFrameDetailsSidebarPanel extends WebInspector.DetailsSidebarPanel
-{
- constructor()
- {
- super("rendering-frame-details", WebInspector.UIString("Frames"));
-
- this._frameRangeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Frames"));
- this._timeRangeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Time"));
- var rangeGroup = new WebInspector.DetailsSectionGroup([this._frameRangeRow, this._timeRangeRow]);
-
- function formatChartValue(value)
- {
- return Number.secondsToString(value);
- }
-
- this._chartRow = new WebInspector.ChartDetailsSectionRow(formatChartValue);
- var chartGroup = new WebInspector.DetailsSectionGroup([this._chartRow]);
-
- var rangeSection = new WebInspector.DetailsSection("rendering-frames-range", WebInspector.UIString("Selected Range"), [rangeGroup]);
- var chartSection = new WebInspector.DetailsSection("rendering-frames-chart", WebInspector.UIString("Chart"), [chartGroup]);
- var detailsSection = new WebInspector.DetailsSection("rendering-frames-details", WebInspector.UIString("Details"), [this._chartRow.legendGroup]);
-
- this.contentElement.appendChild(rangeSection.element);
- this.contentElement.appendChild(chartSection.element);
- this.contentElement.appendChild(detailsSection.element);
-
- this._renderingFrameTimeline = null;
- this._startFrameIndex = 0;
- this._endFrameIndex = 0;
-
- this._emptyValuePlaceholderString = "\u2014";
-
- this._chartColors = {
- layout: "rgb(212, 108, 108)",
- script: "rgb(153, 113, 185)",
- other: "rgb(221, 221, 221)",
- idle: "rgb(255, 255, 255)"
- };
- }
-
- // Public
-
- inspect(objects)
- {
- return !!this._renderingFrameTimeline;
- }
-
- updateRangeSelection(startFrameIndex, endFrameIndex)
- {
- if (this._startFrameIndex === startFrameIndex && this._endFrameIndex === endFrameIndex)
- return;
-
- this._startFrameIndex = startFrameIndex || 0;
- this._endFrameIndex = endFrameIndex || 0;
-
- this.needsRefresh();
- }
-
- get renderingFrameTimeline()
- {
- return this._renderingFrameTimeline;
- }
-
- set renderingFrameTimeline(renderingFrameTimeline)
- {
- if (renderingFrameTimeline === this._renderingFrameTimeline)
- return;
-
- if (this._renderingFrameTimeline) {
- this._renderingFrameTimeline.removeEventListener(WebInspector.Timeline.Event.RecordAdded, this._recordAdded, this);
- this._renderingFrameTimeline.removeEventListener(WebInspector.Timeline.Event.Reset, this._timelineReset, this);
- }
-
- this._renderingFrameTimeline = renderingFrameTimeline;
-
- if (this._renderingFrameTimeline) {
- this._renderingFrameTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._recordAdded, this);
- this._renderingFrameTimeline.addEventListener(WebInspector.Timeline.Event.Reset, this._timelineReset, this);
- }
-
- this.needsRefresh();
- }
-
- refresh()
- {
- var records = this._getSelectedRecords();
- if (!records.length) {
- this._resetAll();
- return;
- }
-
- var firstRecord = records[0];
- var lastRecord = records.lastValue;
-
- this._frameRangeRow.label = records.length > 1 ? WebInspector.UIString("Frames") : WebInspector.UIString("Frame");
- this._frameRangeRow.value = records.length > 1 ? WebInspector.UIString("%d – %d").format(firstRecord.frameNumber, lastRecord.frameNumber) : firstRecord.frameNumber;
- this._timeRangeRow.value = WebInspector.UIString("%s – %s").format(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();
- var idleTime = totalTime - layoutTime - scriptTime - otherTime;
-
- this._chartRow.clearChart();
-
- this._chartRow.addChartValue(WebInspector.UIString("Layout"), layoutTime, this._chartColors.layout);
- this._chartRow.addChartValue(WebInspector.UIString("Script"), scriptTime, this._chartColors.script);
- this._chartRow.addChartValue(WebInspector.UIString("Other"), otherTime, this._chartColors.other);
- this._chartRow.addChartValue(WebInspector.UIString("Idle"), idleTime, this._chartColors.idle);
-
- this._chartRow.innerLabel = Number.secondsToString(totalTime)
- }
-
- // Private
-
- _resetAll()
- {
- this._frameRangeRow.value = this._emptyValuePlaceholderString;
- this._timeRangeRow.value = this._emptyValuePlaceholderString;
-
- this._chartRow.clearChart();
- }
-
- _recordAdded(event)
- {
- this.needsRefresh();
- }
-
- _timelineReset(event)
- {
- this.needsRefresh();
- }
-
- _getSelectedRecords()
- {
- if (!this._renderingFrameTimeline)
- return [];
-
- var records = [];
- for (var record of this._renderingFrameTimeline.records) {
- console.assert(record instanceof WebInspector.RenderingFrameTimelineRecord);
- // If this frame is completely before the bounds of the graph, skip this record.
- if (record.frameIndex < Math.floor(this._startFrameIndex))
- continue;
-
- // If this record is completely after the end time, break out now.
- // Records are sorted, so all records after this will be beyond the end time too.
- if (record.frameIndex > this._endFrameIndex)
- break;
-
- records.push(record);
- }
-
- return records;
- }
-};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.js (183720 => 183721)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.js 2015-05-02 19:19:07 UTC (rev 183720)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.js 2015-05-02 19:26:21 UTC (rev 183721)
@@ -40,7 +40,7 @@
};
WebInspector.RenderingFrameTimelineOverviewGraph.StyleClassName = "rendering-frame";
-WebInspector.RenderingFrameTimelineOverviewGraph.MaximumGraphHeightSeconds = 0.05;
+WebInspector.RenderingFrameTimelineOverviewGraph.MaximumGraphHeightSeconds = 0.037;
WebInspector.RenderingFrameTimelineOverviewGraph.MinimumGraphHeightSeconds = 0.0185;
WebInspector.RenderingFrameTimelineOverviewGraph.prototype = {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js (183720 => 183721)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js 2015-05-02 19:19:07 UTC (rev 183720)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js 2015-05-02 19:26:21 UTC (rev 183721)
@@ -86,15 +86,11 @@
{
WebInspector.ContentView.prototype.shown.call(this);
- WebInspector.renderingFrameDetailsSidebarPanel.renderingFrameTimeline = this.representedObject;
-
this._dataGrid.shown();
},
hidden: function()
{
- WebInspector.renderingFrameDetailsSidebarPanel.renderingFrameTimeline = null;
-
this._dataGrid.hidden();
WebInspector.ContentView.prototype.hidden.call(this);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js (183720 => 183721)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js 2015-05-02 19:19:07 UTC (rev 183720)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js 2015-05-02 19:26:21 UTC (rev 183721)
@@ -62,6 +62,7 @@
this._currentTime = NaN;
this._lastUpdateTimestamp = NaN;
this._startTimeNeedsReset = true;
+ this._renderingFrameTimeline = null;
this._recording.addEventListener(WebInspector.TimelineRecording.Event.TimelineAdded, this._timelineAdded, this);
this._recording.addEventListener(WebInspector.TimelineRecording.Event.TimelineRemoved, this._timelineRemoved, this);
@@ -260,19 +261,19 @@
var currentTime = this._currentTime || this._recording.startTime;
if (this._timelineSidebarPanel.viewMode === WebInspector.TimelineSidebarPanel.ViewMode.RenderingFrames) {
- var timeline = this._getRenderingFrameTimeline();
- console.assert(timeline);
+ console.assert(this._renderingFrameTimeline);
- if (timeline && timeline.records.length) {
+ if (this._renderingFrameTimeline && this._renderingFrameTimeline.records.length) {
+ var records = this._renderingFrameTimeline.records;
var startIndex = Math.floor(startTime);
- if (startIndex >= timeline.records.length)
+ if (startIndex >= records.length)
return false;
- var endIndex = Math.min(Math.floor(endTime), timeline.records.length - 1);
+ var endIndex = Math.min(Math.floor(endTime), records.length - 1);
console.assert(startIndex <= endIndex, startIndex);
- startTime = timeline.records[startIndex].startTime;
- endTime = timeline.records[endIndex].endTime;
+ startTime = records[startIndex].startTime;
+ endTime = records[endIndex].endTime;
}
}
@@ -425,9 +426,10 @@
if (this.currentTimelineView)
this.currentTimelineView.currentTime = currentTime;
- var timeline = this._getRenderingFrameTimeline();
- if (timeline)
- this._renderingFrameTimelineOverview.endTime = timeline.records.length;
+ if (this._renderingFrameTimeline && this.currentTimelineView.representedObject.type === WebInspector.TimelineRecord.Type.RenderingFrame) {
+ var oldEndTime = this._renderingFrameTimelineOverview.endTime;
+ this._renderingFrameTimelineOverview.endTime = this._renderingFrameTimeline.records.length;
+ }
this._timelineSidebarPanel.updateFilter();
@@ -536,7 +538,7 @@
overviewHeight = renderingFramesTimelineHeight;
else {
var timelineCount = this._timelineViewMap.size;
- if (this._getRenderingFrameTimeline())
+ if (this._renderingFrameTimeline)
timelineCount--;
overviewHeight = timelineCount * timelineHeight;
@@ -547,16 +549,6 @@
this._contentViewContainer.element.style.top = styleValue;
},
- _getRenderingFrameTimeline: function()
- {
- for (var timeline of this._timelineViewMap.keys()) {
- if (timeline.type === WebInspector.TimelineRecord.Type.RenderingFrame)
- return timeline;
- }
-
- return null;
- },
-
_timelineAdded: function(timelineOrEvent)
{
var timeline = timelineOrEvent;
@@ -567,6 +559,8 @@
console.assert(!this._timelineViewMap.has(timeline), timeline);
this._timelineViewMap.set(timeline, new WebInspector.ContentView(timeline, {timelineSidebarPanel: this._timelineSidebarPanel}));
+ if (timeline.type === WebInspector.TimelineRecord.Type.RenderingFrame)
+ this._renderingFrameTimeline = timeline;
var pathComponent = new WebInspector.HierarchicalPathComponent(timeline.displayName, timeline.iconClassName, timeline);
pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
@@ -584,6 +578,8 @@
var timelineView = this._timelineViewMap.take(timeline);
if (this.currentTimelineView === timelineView)
this.showOverviewTimelineView();
+ if (timeline.type === WebInspector.TimelineRecord.Type.RenderingFrame)
+ this._renderingFrameTimeline = null;
this._pathComponentMap.delete(timeline);
@@ -643,7 +639,7 @@
this.currentTimelineView.endTime = this._currentTimelineOverview.selectionStartTime + this._currentTimelineOverview.selectionDuration;
if (this.currentTimelineView.representedObject.type === WebInspector.TimelineRecord.Type.RenderingFrame)
- WebInspector.renderingFrameDetailsSidebarPanel.updateRangeSelection(this.currentTimelineView.startTime, this.currentTimelineView.endTime);
+ this._updateFrameSelection();
}
// Delay until the next frame to stay in sync with the current timeline view's time-based layout changes.
@@ -656,5 +652,16 @@
if (selectedTreeElement && selectedTreeElement.hidden !== selectionWasHidden)
this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
}.bind(this));
+ },
+
+ _updateFrameSelection: function()
+ {
+ console.assert(this._renderingFrameTimeline);
+ if (!this._renderingFrameTimeline)
+ return;
+
+ var startIndex = this._renderingFrameTimelineOverview.selectionStartTime;
+ var endIndex = startIndex + this._renderingFrameTimelineOverview.selectionDuration;
+ this._timelineSidebarPanel.updateFrameSelection(startIndex, endIndex);
}
};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css (183720 => 183721)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css 2015-05-02 19:19:07 UTC (rev 183720)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css 2015-05-02 19:26:21 UTC (rev 183721)
@@ -192,3 +192,16 @@
padding-right: 16px;
right: -16px;
}
+
+.sidebar > .panel.navigation.timeline > .timelines-content > .details-section > div.header {
+ display: none;
+}
+
+.sidebar > .panel.navigation.timeline > .timelines-content > .details-section > .content > .group > .row.chart {
+ height: 108px;
+}
+
+.sidebar > .panel.navigation.timeline > .timelines-content > .details-section > .content > .group > .row.chart > .chart-content > .chart {
+ width: 76px;
+ height: 76px;
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js (183720 => 183721)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js 2015-05-02 19:19:07 UTC (rev 183720)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js 2015-05-02 19:26:21 UTC (rev 183721)
@@ -78,6 +78,19 @@
container.className = "navigation-bar-container";
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)",
+ idle: "rgb(255, 255, 255)"
+ };
+
+ this._frameSelectionChartRow = new WebInspector.ChartDetailsSectionRow(this);
+
+ var chartGroup = new WebInspector.DetailsSectionGroup([this._frameSelectionChartRow]);
+ this._frameSelectionChartSection = new WebInspector.DetailsSection("frames-selection-chart", WebInspector.UIString("Selected Frames"), [chartGroup], null, true);
+ this._timelinesContentContainerElement.appendChild(this._frameSelectionChartSection.element);
} else {
var timelinesTitleBarElement = document.createElement("div");
timelinesTitleBarElement.textContent = WebInspector.UIString("Timelines");
@@ -144,6 +157,9 @@
if (this._displayedContentView)
this.contentBrowser.showContentView(this._displayedContentView);
+
+ if (this.viewMode === WebInspector.TimelineSidebarPanel.ViewMode.RenderingFrames)
+ this._refreshFrameSelectionChart();
}
get viewMode()
@@ -255,7 +271,7 @@
this.contentBrowser.showContentView(this._displayedContentView);
var selectedByUser = false;
- this._changeViewMode(this._viewModeForTimeline(null), selectedByUser);
+ this._changeViewMode(WebInspector.TimelineSidebarPanel.ViewMode.Timelines, selectedByUser);
}
showTimelineViewForTimeline(timeline)
@@ -263,6 +279,10 @@
console.assert(timeline instanceof WebInspector.Timeline, timeline);
console.assert(this._displayedRecording.timelines.has(timeline.type), "Cannot show timeline because it does not belong to the shown recording.", timeline.type);
+ // The sidebar view mode must be in the correct state before changing the content view.
+ var selectedByUser = false;
+ this._changeViewMode(this._viewModeForTimeline(timeline), selectedByUser);
+
if (this._timelineTreeElementMap.has(timeline)) {
// Defer showing the relevant timeline to the onselect handler of the timelines tree element.
var wasSelectedByUser = true;
@@ -272,11 +292,29 @@
this._displayedContentView.showTimelineViewForTimeline(timeline);
this.contentBrowser.showContentView(this._displayedContentView);
}
+ }
- var selectedByUser = false;
- this._changeViewMode(this._viewModeForTimeline(timeline), selectedByUser);
+ updateFrameSelection(startFrameIndex, endFrameIndex)
+ {
+ console.assert(startFrameIndex <= endFrameIndex);
+ console.assert(this.viewMode === WebInspector.TimelineSidebarPanel.ViewMode.RenderingFrames, this._viewMode);
+
+ startFrameIndex = Math.floor(startFrameIndex);
+ endFrameIndex = Math.floor(endFrameIndex);
+ if (this._startFrameIndex === startFrameIndex && this._endFrameIndex === endFrameIndex)
+ return;
+
+ this._startFrameIndex = startFrameIndex;
+ this._endFrameIndex = endFrameIndex;
+
+ this._refreshFrameSelectionChart();
}
+ formatChartValue(value)
+ {
+ return this._frameSelectionChartRow.total === 0 ? "" : Number.secondsToString(value);
+ }
+
// Protected
updateFilter()
@@ -373,6 +411,12 @@
this.updateFilter();
}
+ _renderingFrameTimelineTimesUpdated(event)
+ {
+ if (this.viewMode === WebInspector.TimelineSidebarPanel.ViewMode.RenderingFrames)
+ this._refreshFrameSelectionChart();
+ }
+
_timelinesTreeElementSelected(treeElement, selectedByUser)
{
console.assert(this._timelineTreeElementMap.get(treeElement.representedObject) === treeElement, treeElement);
@@ -395,6 +439,9 @@
{
var didShowTimelineRecordingContentView = this.contentBrowser.currentContentView instanceof WebInspector.TimelineRecordingContentView;
this.element.classList.toggle(WebInspector.TimelineSidebarPanel.TimelineRecordingContentViewShowingStyleClass, didShowTimelineRecordingContentView);
+
+ if (this.viewMode === WebInspector.TimelineSidebarPanel.ViewMode.RenderingFrames)
+ this._refreshFrameSelectionChart();
}
_capturingStarted(event)
@@ -475,8 +522,10 @@
console.assert(timeline instanceof WebInspector.Timeline, timeline);
console.assert(!this._timelineTreeElementMap.has(timeline), timeline);
- if (this._viewModeForTimeline(timeline) !== WebInspector.TimelineSidebarPanel.ViewMode.Timelines)
+ if (timeline.type === WebInspector.TimelineRecord.Type.RenderingFrame) {
+ timeline.addEventListener(WebInspector.Timeline.Event.TimesUpdated, this._renderingFrameTimelineTimesUpdated, this);
return;
+ }
var timelineTreeElement = new WebInspector.GeneralTreeElement([timeline.iconClassName, WebInspector.TimelineSidebarPanel.LargeIconStyleClass], timeline.displayName, null, timeline);
var tooltip = WebInspector.UIString("Close %s timeline view").format(timeline.displayName);
@@ -495,8 +544,11 @@
{
var timeline = event.data.timeline;
console.assert(timeline instanceof WebInspector.Timeline, timeline);
- if (this._viewModeForTimeline(timeline) !== WebInspector.TimelineSidebarPanel.ViewMode.Timelines)
+
+ if (timeline.type === WebInspector.TimelineRecord.Type.RenderingFrame) {
+ timeline.removeEventListener(WebInspector.Timeline.Event.TimesUpdated, this._renderingFrameTimelineTimesUpdated, this);
return;
+ }
console.assert(this._timelineTreeElementMap.has(timeline), timeline);
@@ -594,10 +646,13 @@
this._viewMode = mode;
this._viewModeNavigationBar.selectedNavigationItem = this._viewMode;
- if (this._viewMode === WebInspector.TimelineSidebarPanel.ViewMode.Timelines)
+ if (this._viewMode === WebInspector.TimelineSidebarPanel.ViewMode.Timelines) {
this._timelinesTreeOutline.element.classList.remove(WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementHiddenStyleClassName);
- else
+ this._frameSelectionChartSection.collapsed = true;
+ } else {
this._timelinesTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementHiddenStyleClassName);
+ this._frameSelectionChartSection.collapsed = false;
+ }
if (!selectedByUser)
return;
@@ -615,6 +670,80 @@
this.showTimelineOverview();
}
+ _refreshFrameSelectionChart()
+ {
+ if (!this.visible)
+ return;
+
+ function getSelectedRecords()
+ {
+ console.assert(this._displayedRecording);
+ console.assert(this._displayedRecording.timelines.has(WebInspector.TimelineRecord.Type.RenderingFrame), "Cannot find rendering frames timeline in displayed recording");
+
+ var timeline = this._displayedRecording.timelines.get(WebInspector.TimelineRecord.Type.RenderingFrame);
+ var selectedRecords = [];
+ for (var record of timeline.records) {
+ console.assert(record instanceof WebInspector.RenderingFrameTimelineRecord);
+ // If this frame is completely before the bounds of the graph, skip this record.
+ if (record.frameIndex < this._startFrameIndex)
+ continue;
+
+ // If this record is completely after the end time, break out now.
+ // Records are sorted, so all records after this will be beyond the end time too.
+ if (record.frameIndex > this._endFrameIndex)
+ break;
+
+ selectedRecords.push(record);
+ }
+
+ return selectedRecords;
+ }
+
+ var chart = this._frameSelectionChartRow;
+ var records = getSelectedRecords.call(this);
+ 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},
+ {label: WebInspector.UIString("Idle"), value: 0, color: this._chartColors.idle}
+ ];
+ return;
+ }
+
+ var firstRecord = records[0];
+ var lastRecord = records.lastValue;
+
+ if (records.length > 1) {
+ this._frameSelectionChartRow.title = WebInspector.UIString("Frames: %d – %d (%s – %s)").format(firstRecord.frameNumber, lastRecord.frameNumber,
+ Number.secondsToString(firstRecord.startTime), Number.secondsToString(lastRecord.endTime));
+ } else {
+ 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();
+ var idleTime = totalTime - layoutTime - scriptTime - otherTime;
+
+ 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},
+ {label: WebInspector.UIString("Idle"), value: idleTime, color: this._chartColors.idle}
+ ];
+ }
+
// These methods are only used when ReplayAgent is available.
_updateReplayInterfaceVisibility()
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineTabContentView.js (183720 => 183721)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineTabContentView.js 2015-05-02 19:19:07 UTC (rev 183720)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineTabContentView.js 2015-05-02 19:26:21 UTC (rev 183721)
@@ -26,7 +26,7 @@
WebInspector.TimelineTabContentView = function(identifier)
{
var tabBarItem = new WebInspector.TabBarItem("Images/Timeline.svg", WebInspector.UIString("Timelines"));
- var detailsSidebarPanels = [WebInspector.resourceDetailsSidebarPanel, WebInspector.probeDetailsSidebarPanel, WebInspector.renderingFrameDetailsSidebarPanel];
+ var detailsSidebarPanels = [WebInspector.resourceDetailsSidebarPanel, WebInspector.probeDetailsSidebarPanel];
// FIME: Until TimelineSidebarPanel supports instantiating after inspector launch, disable closing.
tabBarItem.hideCloseButton = true;
Modified: trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj (183720 => 183721)
--- trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj 2015-05-02 19:19:07 UTC (rev 183720)
+++ trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj 2015-05-02 19:26:21 UTC (rev 183721)
@@ -297,7 +297,6 @@
<None Include="..\UserInterface\CanvasProfileObject.js" />
<None Include="..\UserInterface\CanvasProfileType.js" />
<None Include="..\UserInterface\CanvasProfileView.js" />
- <None Include="..\UserInterface\ChartDetailsSectionLegendRow.js" />
<None Include="..\UserInterface\ChartDetailsSectionRow.js" />
<None Include="..\UserInterface\ChartDetailsSectionRow.css" />
<None Include="..\UserInterface\ClusterContentView.css" />
@@ -738,7 +737,6 @@
<None Include="..\UserInterface\RadioButtonNavigationItem.css" />
<None Include="..\UserInterface\RadioButtonNavigationItem.js" />
<None Include="..\UserInterface\RemoteObject.js" />
- <None Include="..\UserInterface\RenderingFrameDetailsSidebarPanel.js" />
<None Include="..\UserInterface\RenderingFrameTimeDataGridNode.js" />
<None Include="..\UserInterface\RenderingFrameTimelineOverview.js" />
<None Include="..\UserInterface\RenderingFrameTimelineOverviewGraph.css" />
Modified: trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters (183720 => 183721)
--- trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters 2015-05-02 19:19:07 UTC (rev 183720)
+++ trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters 2015-05-02 19:26:21 UTC (rev 183721)
@@ -141,9 +141,6 @@
<None Include="..\UserInterface\CanvasProfileView.js">
<Filter>UserInterface</Filter>
</None>
- <None Include="..\UserInterface\ChartDetailsSectionLegendRow.js">
- <Filter>UserInterface</Filter>
- </None>
<None Include="..\UserInterface\ChartDetailsSectionRow.js">
<Filter>UserInterface</Filter>
</None>
@@ -783,9 +780,6 @@
<None Include="..\UserInterface\RemoteObject.js">
<Filter>UserInterface</Filter>
</None>
- <None Include="..\UserInterface\RenderingFrameDetailsSidebarPanel.js">
- <Filter>UserInterface</Filter>
- </None>
<None Include="..\UserInterface\RenderingFrameTimelineDataGridNode.js">
<Filter>UserInterface</Filter>
</None>
