<!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>[183721] 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/183721">183721</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2015-05-02 12:26:21 -0700 (Sat, 02 May 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>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.
Patch by Matt Baker <mattbaker@apple.com> on 2015-05-02
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.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs">trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceBaseMainjs">trunk/Source/WebInspectorUI/UserInterface/Base/Main.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceControllersTimelineManagerjs">trunk/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsChartDetailsSectionRowcss">trunk/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsChartDetailsSectionRowjs">trunk/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineOverviewGraphjs">trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordingContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineSidebarPanelcss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineTabContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineTabContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIWebInspectorUIvcxprojWebInspectorUIvcxproj">trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj</a></li>
<li><a href="#trunkSourceWebInspectorUIWebInspectorUIvcxprojWebInspectorUIvcxprojfilters">trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters</a></li>
</ul>
<h3>Removed Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsChartDetailsSectionLegendRowjs">trunk/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionLegendRow.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameDetailsSidebarPanel.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (183720 => 183721)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,3 +1,110 @@
</span><ins>+2015-05-02 Matt Baker <mattbaker@apple.com>
+
+ 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.
+
</ins><span class="cx"> 2015-05-02 Timothy Hatcher <timothy@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: Allow closing and reopening the Resources tab
</span></span></pre></div>
<a id="trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (183720 => 183721)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -22,7 +22,6 @@
</span><span class="cx"> localizedStrings["%d \xd7 %d pixels"] = "%d \xd7 %d pixels";
</span><span class="cx"> localizedStrings["%d \xd7 %d pixels (Natural: %d \xd7 %d pixels)"] = "%d \xd7 %d pixels (Natural: %d \xd7 %d pixels)";
</span><span class="cx"> localizedStrings["%d matches"] = "%d matches";
</span><del>-localizedStrings["%d %d"] = "%d %d";
</del><span class="cx"> localizedStrings["%fpx"] = "%fpx";
</span><span class="cx"> localizedStrings["%fpx\xB2"] = "%fpx\xB2";
</span><span class="cx"> localizedStrings["%s (computed)"] = "%s (computed)";
</span><span class="lines">@@ -30,7 +29,6 @@
</span><span class="cx"> localizedStrings["%s (hidden)"] = "%s (hidden)";
</span><span class="cx"> localizedStrings["%s Event Dispatched"] = "%s Event Dispatched";
</span><span class="cx"> localizedStrings["%s Prototype"] = "%s Prototype";
</span><del>-localizedStrings["%s %s"] = "%s %s";
</del><span class="cx"> localizedStrings["(Index)"] = "(Index)";
</span><span class="cx"> localizedStrings["(anonymous function)"] = "(anonymous function)";
</span><span class="cx"> localizedStrings["(many)"] = "(many)";
</span><span class="lines">@@ -88,7 +86,6 @@
</span><span class="cx"> localizedStrings["Capturing"] = "Capturing";
</span><span class="cx"> localizedStrings["Catch Variables"] = "Catch Variables";
</span><span class="cx"> localizedStrings["Character Data"] = "Character Data";
</span><del>-localizedStrings["Chart"] = "Chart";
</del><span class="cx"> localizedStrings["Checked"] = "Checked";
</span><span class="cx"> localizedStrings["Child Layers"] = "Child Layers";
</span><span class="cx"> localizedStrings["Children"] = "Children";
</span><span class="lines">@@ -130,7 +127,6 @@
</span><span class="cx"> localizedStrings["Copy as HTML"] = "Copy as HTML";
</span><span class="cx"> localizedStrings["Could not fetch properties. Object may no longer exist."] = "Could not fetch properties. Object may no longer exist.";
</span><span class="cx"> localizedStrings["Create a new tab"] = "Create a new tab";
</span><del>-localizedStrings["DOM Tree"] = "DOM Tree";
</del><span class="cx"> localizedStrings["Data"] = "Data";
</span><span class="cx"> localizedStrings["Data returned from the database is too large."] = "Data returned from the database is too large.";
</span><span class="cx"> localizedStrings["Database no longer has expected version."] = "Database no longer has expected version.";
</span><span class="lines">@@ -233,10 +229,12 @@
</span><span class="cx"> localizedStrings["Forced Pseudo-Classes"] = "Forced Pseudo-Classes";
</span><span class="cx"> localizedStrings["Forward (%s)"] = "Forward (%s)";
</span><span class="cx"> localizedStrings["Fragment"] = "Fragment";
</span><del>-localizedStrings["Frame"] = "Frame";
</del><span class="cx"> localizedStrings["Frame %d"] = "Frame %d";
</span><span class="cx"> localizedStrings["Frame URL"] = "Frame URL";
</span><ins>+localizedStrings["Frame: %d (%s %s)"] = "Frame: %d (%s %s)";
</ins><span class="cx"> localizedStrings["Frames"] = "Frames";
</span><ins>+localizedStrings["Frames: %d %d (%s %s)"] = "Frames: %d %d (%s %s)";
+localizedStrings["Frames: None Selected"] = "Frames: None Selected";
</ins><span class="cx"> localizedStrings["Full URL"] = "Full URL";
</span><span class="cx"> localizedStrings["Function"] = "Function";
</span><span class="cx"> localizedStrings["Function Name Variable"] = "Function Name Variable";
</span><span class="lines">@@ -419,9 +417,9 @@
</span><span class="cx"> localizedStrings["Security Issue"] = "Security Issue";
</span><span class="cx"> localizedStrings["Selected"] = "Selected";
</span><span class="cx"> localizedStrings["Selected Element"] = "Selected Element";
</span><ins>+localizedStrings["Selected Frames"] = "Selected Frames";
</ins><span class="cx"> localizedStrings["Selected Item"] = "Selected Item";
</span><span class="cx"> localizedStrings["Selected Items"] = "Selected Items";
</span><del>-localizedStrings["Selected Range"] = "Selected Range";
</del><span class="cx"> localizedStrings["Selected Symbol"] = "Selected Symbol";
</span><span class="cx"> localizedStrings["Selected Value"] = "Selected Value";
</span><span class="cx"> localizedStrings["Self Time"] = "Self Time";
</span><span class="lines">@@ -450,7 +448,6 @@
</span><span class="cx"> localizedStrings["Small Icons"] = "Small Icons";
</span><span class="cx"> localizedStrings["Socket"] = "Socket";
</span><span class="cx"> localizedStrings["Sockets"] = "Sockets";
</span><del>-localizedStrings["Source Code"] = "Source Code";
</del><span class="cx"> localizedStrings["Specificity: (%d, %d, %d)"] = "Specificity: (%d, %d, %d)";
</span><span class="cx"> localizedStrings["Specificity: No value for selected element"] = "Specificity: No value for selected element";
</span><span class="cx"> localizedStrings["Spelling"] = "Spelling";
</span><span class="lines">@@ -474,7 +471,6 @@
</span><span class="cx"> localizedStrings["Text Node"] = "Text Node";
</span><span class="cx"> localizedStrings["Text Only"] = "Text Only";
</span><span class="cx"> localizedStrings["The %s \ntable is empty."] = "The %s \ntable is empty.";
</span><del>-localizedStrings["Time"] = "Time";
</del><span class="cx"> localizedStrings["Timeline Events"] = "Timeline Events";
</span><span class="cx"> localizedStrings["Timeline Recording %d"] = "Timeline Recording %d";
</span><span class="cx"> localizedStrings["Timelines"] = "Timelines";
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceBaseMainjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Main.js (183720 => 183721)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -315,7 +315,6 @@
</span><span class="cx"> this.applicationCacheDetailsSidebarPanel = new WebInspector.ApplicationCacheDetailsSidebarPanel;
</span><span class="cx"> this.scopeChainDetailsSidebarPanel = new WebInspector.ScopeChainDetailsSidebarPanel;
</span><span class="cx"> this.probeDetailsSidebarPanel = new WebInspector.ProbeDetailsSidebarPanel;
</span><del>- this.renderingFrameDetailsSidebarPanel = new WebInspector.RenderingFrameDetailsSidebarPanel;
</del><span class="cx">
</span><span class="cx"> if (window.LayerTreeAgent)
</span><span class="cx"> this.layerTreeDetailsSidebarPanel = new WebInspector.LayerTreeDetailsSidebarPanel;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceControllersTimelineManagerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js (183720 => 183721)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -422,14 +422,13 @@
</span><span class="cx"> var identifier = this._nextRecordingIdentifier++;
</span><span class="cx"> var newRecording = new WebInspector.TimelineRecording(identifier, WebInspector.UIString("Timeline Recording %d").format(identifier));
</span><span class="cx"> newRecording.addTimeline(WebInspector.Timeline.create(WebInspector.TimelineRecord.Type.Network, newRecording));
</span><ins>+ newRecording.addTimeline(WebInspector.Timeline.create(WebInspector.TimelineRecord.Type.Layout, newRecording));
+ newRecording.addTimeline(WebInspector.Timeline.create(WebInspector.TimelineRecord.Type.Script, newRecording));
</ins><span class="cx">
</span><span class="cx"> // COMPATIBILITY (iOS 8): TimelineAgent.EventType.RenderingFrame did not exist.
</span><span class="cx"> if (window.TimelineAgent && TimelineAgent.EventType.RenderingFrame)
</span><span class="cx"> newRecording.addTimeline(WebInspector.Timeline.create(WebInspector.TimelineRecord.Type.RenderingFrame, newRecording));
</span><span class="cx">
</span><del>- newRecording.addTimeline(WebInspector.Timeline.create(WebInspector.TimelineRecord.Type.Layout, newRecording));
- newRecording.addTimeline(WebInspector.Timeline.create(WebInspector.TimelineRecord.Type.Script, newRecording));
-
</del><span class="cx"> this._recordings.push(newRecording);
</span><span class="cx"> this.dispatchEventToListeners(WebInspector.TimelineManager.Event.RecordingCreated, {recording: newRecording});
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (183720 => 183721)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -377,7 +377,6 @@
</span><span class="cx"> <script src="Views/CSSStyleDeclarationTextEditor.js"></script>
</span><span class="cx"> <script src="Views/CSSStyleDetailsSidebarPanel.js"></script>
</span><span class="cx"> <script src="Views/CallFrameTreeElement.js"></script>
</span><del>- <script src="Views/ChartDetailsSectionLegendRow.js"></script>
</del><span class="cx"> <script src="Views/ChartDetailsSectionRow.js"></script>
</span><span class="cx"> <script src="Views/ClusterContentView.js"></script>
</span><span class="cx"> <script src="Views/CodeMirrorAdditions.js"></script>
</span><span class="lines">@@ -473,7 +472,6 @@
</span><span class="cx"> <script src="Views/QuickConsole.js"></script>
</span><span class="cx"> <script src="Views/QuickConsoleNavigationBar.js"></script>
</span><span class="cx"> <script src="Views/RadioButtonNavigationItem.js"></script>
</span><del>- <script src="Views/RenderingFrameDetailsSidebarPanel.js"></script>
</del><span class="cx"> <script src="Views/RenderingFrameTimelineDataGridNode.js"></script>
</span><span class="cx"> <script src="Views/RenderingFrameTimelineOverview.js"></script>
</span><span class="cx"> <script src="Views/RenderingFrameTimelineOverviewGraph.js"></script>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsChartDetailsSectionLegendRowjs"></a>
<div class="delfile"><h4>Deleted: trunk/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionLegendRow.js (183720 => 183721)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,40 +0,0 @@
</span><del>-/*
- * 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);
- }
-};
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsChartDetailsSectionRowcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.css (183720 => 183721)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -23,24 +23,54 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-.details-section .row.chart {
</del><ins>+.details-section > .content > .group > .row.chart > .title {
+ color: rgb(57, 57, 57);
+
+ white-space: nowrap;
+ overflow: hidden;
</ins><span class="cx"> text-align: center;
</span><ins>+ text-overflow: ellipsis;
+
+ font-size: 11px;
+
+ padding: 4px 5px 0px 9px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.details-section .row.chart canvas {
- width: 150px;
- height: 150px;
</del><ins>+.details-section > .content > .group > .row.chart > .chart-content {
+ display: flex;
+ justify-content: center;
+ padding: 8px 5px 0px 12px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.details-section .row.chart.empty canvas {
- display: none;
</del><ins>+.details-section > .content > .group > .row.chart > .chart-content > .legend {
+ display: table;
+ margin-left: 12px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.details-section > .content > .group > .row.legend-item > .label > .color-swatch {
</del><ins>+.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 {
</ins><span class="cx"> display: inline-block;
</span><del>- margin-left: 6px;
</del><ins>+
</ins><span class="cx"> width: 8px;
</span><span class="cx"> height: 8px;
</span><ins>+ margin-right: 6px;
</ins><span class="cx">
</span><del>- border: solid 1px #666;
</del><ins>+ border: solid 1px rgb(102, 102, 102);
</ins><span class="cx"> }
</span><ins>+
+.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;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsChartDetailsSectionRowjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.js (183720 => 183721)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -25,100 +25,137 @@
</span><span class="cx">
</span><span class="cx"> WebInspector.ChartDetailsSectionRow = class ChartDetailsSectionRow extends WebInspector.DetailsSectionRow
</span><span class="cx"> {
</span><del>- constructor(formatValueCallback)
</del><ins>+ constructor(delegate)
</ins><span class="cx"> {
</span><span class="cx"> super(WebInspector.UIString("No Chart Available"));
</span><span class="cx">
</span><span class="cx"> this.element.classList.add("chart");
</span><span class="cx">
</span><del>- this._legendGroup = new WebInspector.DetailsSectionGroup;
- this._formatValueCallback = formatValueCallback;
- this._chartItems = [];
</del><ins>+ 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 = "";
</ins><span class="cx"> this._innerLabel = "";
</span><del>- this._innerRadius = 0.5;
</del><ins>+ this._innerRadius = 0;
</ins><span class="cx"> this._innerLabelFontSize = 11;
</span><del>- this._shadowColor = "rgba(0, 0, 0, 0.5)";
</del><ins>+ this._shadowColor = "rgba(0, 0, 0, 0.6)";
</ins><span class="cx"> this._total = 0;
</span><del>-
- this._refresh();
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="cx">
</span><del>- get legendGroup()
</del><ins>+ set title(title)
</ins><span class="cx"> {
</span><del>- return this._legendGroup;
</del><ins>+ if (this._title === title)
+ return;
+
+ this._title = title;
+ this._titleElement.textContent = title;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- set innerLabel(x)
</del><ins>+ set innerLabel(label)
</ins><span class="cx"> {
</span><del>- if (this._innerLabel === x)
</del><ins>+ if (this._innerLabel === label)
</ins><span class="cx"> return;
</span><span class="cx">
</span><del>- this._innerLabel = x;
</del><ins>+ this._innerLabel = label;
</ins><span class="cx">
</span><span class="cx"> this._refresh();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- addChartValue(label, value, color)
</del><ins>+ set innerRadius(radius)
</ins><span class="cx"> {
</span><del>- console.assert(value >= 0);
- if (value < 0)
</del><ins>+ if (this._innerRadius === radius)
</ins><span class="cx"> return;
</span><span class="cx">
</span><del>- this._chartItems.push({label, value, color});
- this._total += value
</del><ins>+ this._innerRadius = radius;
</ins><span class="cx">
</span><span class="cx"> this._refresh();
</span><ins>+ }
</ins><span class="cx">
</span><del>- 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;
</del><ins>+ get total()
+ {
+ return this._total;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- clearChart()
</del><ins>+ set data(items)
</ins><span class="cx"> {
</span><del>- this._chartItems = [];
- this._total = 0;
</del><ins>+ if (!(items instanceof Array))
+ items = [items];
</ins><span class="cx">
</span><del>- this._refresh();
</del><ins>+ items = items.filter(function(item) { return item.value >= 0; });
+ if (!this._items.length && !items.length)
+ return;
</ins><span class="cx">
</span><del>- if (!this._legendGroup)
</del><ins>+ if (this._items.length === items.length && this._items.every(function(item, index) { return JSON.stringify(item) === JSON.stringify(items[index]); }))
</ins><span class="cx"> return;
</span><span class="cx">
</span><del>- this._legendGroup.rows = [];
</del><ins>+ 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();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Private
</span><span class="cx">
</span><del>- _refresh()
</del><ins>+ _createLegendItem(item)
</ins><span class="cx"> {
</span><del>- if (!this._chartItems.length) {
- this._canvas = null;
- this.showEmptyMessage();
- return;
- }
</del><ins>+ var colorSwatchElement = document.createElement("div");
+ colorSwatchElement.className = "color-swatch";
+ colorSwatchElement.style.backgroundColor = item.color;
</ins><span class="cx">
</span><del>- if (!this._canvas) {
- this.hideEmptyMessage();
</del><ins>+ var labelElement = document.createElement("div");
+ labelElement.className = "label";
+ labelElement.appendChild(colorSwatchElement);
+ labelElement.appendChild(document.createTextNode(item.label));
</ins><span class="cx">
</span><del>- this._canvas = document.createElement("canvas");
- this.element.appendChild(this._canvas);
</del><ins>+ var valueElement = document.createElement("div");
+ valueElement.className = "value";
</ins><span class="cx">
</span><del>- this._canvas.width = this._canvas.offsetWidth * window.devicePixelRatio;
- this._canvas.height = this._canvas.offsetHeight * window.devicePixelRatio;
- }
</del><ins>+ if (this._delegate && typeof this._delegate.formatChartValue === "function")
+ valueElement.textContent = this._delegate.formatChartValue(item.value);
+ else
+ valueElement.textContent = item.value;
</ins><span class="cx">
</span><ins>+ 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;
+
</ins><span class="cx"> var context = this._canvas.getContext("2d");
</span><del>- context.clearRect(0, 0, this._canvas.width, this._canvas.height);
</del><ins>+ context.clearRect(0, 0, width, height);
</ins><span class="cx">
</span><del>- 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.
</del><ins>+ 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.
</ins><span class="cx"> var innerRadius = Math.floor(radius * this._innerRadius);
</span><span class="cx"> var startAngle = 1.5 * Math.PI;
</span><span class="cx"> var endAngle = startAngle;
</span><span class="lines">@@ -138,12 +175,14 @@
</span><span class="cx"> context.shadowBlur = 2 * window.devicePixelRatio;
</span><span class="cx"> context.shadowOffsetY = window.devicePixelRatio;
</span><span class="cx"> context.shadowColor = this._shadowColor;
</span><del>- drawSlice(centerX, centerY, 0, 2.0 * Math.PI, "rgb(255, 255, 255)");
</del><ins>+ drawSlice(x, y, 0, 2.0 * Math.PI, "rgb(242, 242, 242)");
</ins><span class="cx"> context.restore();
</span><span class="cx">
</span><del>- for (var item of this._chartItems) {
</del><ins>+ for (var item of this._items) {
+ if (item.value === 0)
+ continue;
</ins><span class="cx"> endAngle += (item.value / this._total) * 2.0 * Math.PI;
</span><del>- drawSlice(centerX, centerY, startAngle, endAngle, item.color);
</del><ins>+ drawSlice(x, y, startAngle, endAngle, item.color);
</ins><span class="cx"> startAngle = endAngle;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameDetailsSidebarPaneljs"></a>
<div class="delfile"><h4>Deleted: trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameDetailsSidebarPanel.js (183720 => 183721)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,189 +0,0 @@
</span><del>-/*
- * 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;
- }
-};
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineOverviewGraphjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.js (183720 => 183721)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -40,7 +40,7 @@
</span><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> WebInspector.RenderingFrameTimelineOverviewGraph.StyleClassName = "rendering-frame";
</span><del>-WebInspector.RenderingFrameTimelineOverviewGraph.MaximumGraphHeightSeconds = 0.05;
</del><ins>+WebInspector.RenderingFrameTimelineOverviewGraph.MaximumGraphHeightSeconds = 0.037;
</ins><span class="cx"> WebInspector.RenderingFrameTimelineOverviewGraph.MinimumGraphHeightSeconds = 0.0185;
</span><span class="cx">
</span><span class="cx"> WebInspector.RenderingFrameTimelineOverviewGraph.prototype = {
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js (183720 => 183721)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -86,15 +86,11 @@
</span><span class="cx"> {
</span><span class="cx"> WebInspector.ContentView.prototype.shown.call(this);
</span><span class="cx">
</span><del>- WebInspector.renderingFrameDetailsSidebarPanel.renderingFrameTimeline = this.representedObject;
-
</del><span class="cx"> this._dataGrid.shown();
</span><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> hidden: function()
</span><span class="cx"> {
</span><del>- WebInspector.renderingFrameDetailsSidebarPanel.renderingFrameTimeline = null;
-
</del><span class="cx"> this._dataGrid.hidden();
</span><span class="cx">
</span><span class="cx"> WebInspector.ContentView.prototype.hidden.call(this);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordingContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js (183720 => 183721)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -62,6 +62,7 @@
</span><span class="cx"> this._currentTime = NaN;
</span><span class="cx"> this._lastUpdateTimestamp = NaN;
</span><span class="cx"> this._startTimeNeedsReset = true;
</span><ins>+ this._renderingFrameTimeline = null;
</ins><span class="cx">
</span><span class="cx"> this._recording.addEventListener(WebInspector.TimelineRecording.Event.TimelineAdded, this._timelineAdded, this);
</span><span class="cx"> this._recording.addEventListener(WebInspector.TimelineRecording.Event.TimelineRemoved, this._timelineRemoved, this);
</span><span class="lines">@@ -260,19 +261,19 @@
</span><span class="cx"> var currentTime = this._currentTime || this._recording.startTime;
</span><span class="cx">
</span><span class="cx"> if (this._timelineSidebarPanel.viewMode === WebInspector.TimelineSidebarPanel.ViewMode.RenderingFrames) {
</span><del>- var timeline = this._getRenderingFrameTimeline();
- console.assert(timeline);
</del><ins>+ console.assert(this._renderingFrameTimeline);
</ins><span class="cx">
</span><del>- if (timeline && timeline.records.length) {
</del><ins>+ if (this._renderingFrameTimeline && this._renderingFrameTimeline.records.length) {
+ var records = this._renderingFrameTimeline.records;
</ins><span class="cx"> var startIndex = Math.floor(startTime);
</span><del>- if (startIndex >= timeline.records.length)
</del><ins>+ if (startIndex >= records.length)
</ins><span class="cx"> return false;
</span><span class="cx">
</span><del>- var endIndex = Math.min(Math.floor(endTime), timeline.records.length - 1);
</del><ins>+ var endIndex = Math.min(Math.floor(endTime), records.length - 1);
</ins><span class="cx"> console.assert(startIndex <= endIndex, startIndex);
</span><span class="cx">
</span><del>- startTime = timeline.records[startIndex].startTime;
- endTime = timeline.records[endIndex].endTime;
</del><ins>+ startTime = records[startIndex].startTime;
+ endTime = records[endIndex].endTime;
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -425,9 +426,10 @@
</span><span class="cx"> if (this.currentTimelineView)
</span><span class="cx"> this.currentTimelineView.currentTime = currentTime;
</span><span class="cx">
</span><del>- var timeline = this._getRenderingFrameTimeline();
- if (timeline)
- this._renderingFrameTimelineOverview.endTime = timeline.records.length;
</del><ins>+ if (this._renderingFrameTimeline && this.currentTimelineView.representedObject.type === WebInspector.TimelineRecord.Type.RenderingFrame) {
+ var oldEndTime = this._renderingFrameTimelineOverview.endTime;
+ this._renderingFrameTimelineOverview.endTime = this._renderingFrameTimeline.records.length;
+ }
</ins><span class="cx">
</span><span class="cx"> this._timelineSidebarPanel.updateFilter();
</span><span class="cx">
</span><span class="lines">@@ -536,7 +538,7 @@
</span><span class="cx"> overviewHeight = renderingFramesTimelineHeight;
</span><span class="cx"> else {
</span><span class="cx"> var timelineCount = this._timelineViewMap.size;
</span><del>- if (this._getRenderingFrameTimeline())
</del><ins>+ if (this._renderingFrameTimeline)
</ins><span class="cx"> timelineCount--;
</span><span class="cx">
</span><span class="cx"> overviewHeight = timelineCount * timelineHeight;
</span><span class="lines">@@ -547,16 +549,6 @@
</span><span class="cx"> this._contentViewContainer.element.style.top = styleValue;
</span><span class="cx"> },
</span><span class="cx">
</span><del>- _getRenderingFrameTimeline: function()
- {
- for (var timeline of this._timelineViewMap.keys()) {
- if (timeline.type === WebInspector.TimelineRecord.Type.RenderingFrame)
- return timeline;
- }
-
- return null;
- },
-
</del><span class="cx"> _timelineAdded: function(timelineOrEvent)
</span><span class="cx"> {
</span><span class="cx"> var timeline = timelineOrEvent;
</span><span class="lines">@@ -567,6 +559,8 @@
</span><span class="cx"> console.assert(!this._timelineViewMap.has(timeline), timeline);
</span><span class="cx">
</span><span class="cx"> this._timelineViewMap.set(timeline, new WebInspector.ContentView(timeline, {timelineSidebarPanel: this._timelineSidebarPanel}));
</span><ins>+ if (timeline.type === WebInspector.TimelineRecord.Type.RenderingFrame)
+ this._renderingFrameTimeline = timeline;
</ins><span class="cx">
</span><span class="cx"> var pathComponent = new WebInspector.HierarchicalPathComponent(timeline.displayName, timeline.iconClassName, timeline);
</span><span class="cx"> pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
</span><span class="lines">@@ -584,6 +578,8 @@
</span><span class="cx"> var timelineView = this._timelineViewMap.take(timeline);
</span><span class="cx"> if (this.currentTimelineView === timelineView)
</span><span class="cx"> this.showOverviewTimelineView();
</span><ins>+ if (timeline.type === WebInspector.TimelineRecord.Type.RenderingFrame)
+ this._renderingFrameTimeline = null;
</ins><span class="cx">
</span><span class="cx"> this._pathComponentMap.delete(timeline);
</span><span class="cx">
</span><span class="lines">@@ -643,7 +639,7 @@
</span><span class="cx"> this.currentTimelineView.endTime = this._currentTimelineOverview.selectionStartTime + this._currentTimelineOverview.selectionDuration;
</span><span class="cx">
</span><span class="cx"> if (this.currentTimelineView.representedObject.type === WebInspector.TimelineRecord.Type.RenderingFrame)
</span><del>- WebInspector.renderingFrameDetailsSidebarPanel.updateRangeSelection(this.currentTimelineView.startTime, this.currentTimelineView.endTime);
</del><ins>+ this._updateFrameSelection();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Delay until the next frame to stay in sync with the current timeline view's time-based layout changes.
</span><span class="lines">@@ -656,5 +652,16 @@
</span><span class="cx"> if (selectedTreeElement && selectedTreeElement.hidden !== selectionWasHidden)
</span><span class="cx"> this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
</span><span class="cx"> }.bind(this));
</span><ins>+ },
+
+ _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);
</ins><span class="cx"> }
</span><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineSidebarPanelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css (183720 => 183721)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -192,3 +192,16 @@
</span><span class="cx"> padding-right: 16px;
</span><span class="cx"> right: -16px;
</span><span class="cx"> }
</span><ins>+
+.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;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js (183720 => 183721)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -78,6 +78,19 @@
</span><span class="cx"> container.className = "navigation-bar-container";
</span><span class="cx"> container.appendChild(this._viewModeNavigationBar.element);
</span><span class="cx"> this.element.insertBefore(container, this.element.firstChild);
</span><ins>+
+ 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);
</ins><span class="cx"> } else {
</span><span class="cx"> var timelinesTitleBarElement = document.createElement("div");
</span><span class="cx"> timelinesTitleBarElement.textContent = WebInspector.UIString("Timelines");
</span><span class="lines">@@ -144,6 +157,9 @@
</span><span class="cx">
</span><span class="cx"> if (this._displayedContentView)
</span><span class="cx"> this.contentBrowser.showContentView(this._displayedContentView);
</span><ins>+
+ if (this.viewMode === WebInspector.TimelineSidebarPanel.ViewMode.RenderingFrames)
+ this._refreshFrameSelectionChart();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> get viewMode()
</span><span class="lines">@@ -255,7 +271,7 @@
</span><span class="cx"> this.contentBrowser.showContentView(this._displayedContentView);
</span><span class="cx">
</span><span class="cx"> var selectedByUser = false;
</span><del>- this._changeViewMode(this._viewModeForTimeline(null), selectedByUser);
</del><ins>+ this._changeViewMode(WebInspector.TimelineSidebarPanel.ViewMode.Timelines, selectedByUser);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> showTimelineViewForTimeline(timeline)
</span><span class="lines">@@ -263,6 +279,10 @@
</span><span class="cx"> console.assert(timeline instanceof WebInspector.Timeline, timeline);
</span><span class="cx"> console.assert(this._displayedRecording.timelines.has(timeline.type), "Cannot show timeline because it does not belong to the shown recording.", timeline.type);
</span><span class="cx">
</span><ins>+ // The sidebar view mode must be in the correct state before changing the content view.
+ var selectedByUser = false;
+ this._changeViewMode(this._viewModeForTimeline(timeline), selectedByUser);
+
</ins><span class="cx"> if (this._timelineTreeElementMap.has(timeline)) {
</span><span class="cx"> // Defer showing the relevant timeline to the onselect handler of the timelines tree element.
</span><span class="cx"> var wasSelectedByUser = true;
</span><span class="lines">@@ -272,11 +292,29 @@
</span><span class="cx"> this._displayedContentView.showTimelineViewForTimeline(timeline);
</span><span class="cx"> this.contentBrowser.showContentView(this._displayedContentView);
</span><span class="cx"> }
</span><ins>+ }
</ins><span class="cx">
</span><del>- var selectedByUser = false;
- this._changeViewMode(this._viewModeForTimeline(timeline), selectedByUser);
</del><ins>+ 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();
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+ formatChartValue(value)
+ {
+ return this._frameSelectionChartRow.total === 0 ? "" : Number.secondsToString(value);
+ }
+
</ins><span class="cx"> // Protected
</span><span class="cx">
</span><span class="cx"> updateFilter()
</span><span class="lines">@@ -373,6 +411,12 @@
</span><span class="cx"> this.updateFilter();
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ _renderingFrameTimelineTimesUpdated(event)
+ {
+ if (this.viewMode === WebInspector.TimelineSidebarPanel.ViewMode.RenderingFrames)
+ this._refreshFrameSelectionChart();
+ }
+
</ins><span class="cx"> _timelinesTreeElementSelected(treeElement, selectedByUser)
</span><span class="cx"> {
</span><span class="cx"> console.assert(this._timelineTreeElementMap.get(treeElement.representedObject) === treeElement, treeElement);
</span><span class="lines">@@ -395,6 +439,9 @@
</span><span class="cx"> {
</span><span class="cx"> var didShowTimelineRecordingContentView = this.contentBrowser.currentContentView instanceof WebInspector.TimelineRecordingContentView;
</span><span class="cx"> this.element.classList.toggle(WebInspector.TimelineSidebarPanel.TimelineRecordingContentViewShowingStyleClass, didShowTimelineRecordingContentView);
</span><ins>+
+ if (this.viewMode === WebInspector.TimelineSidebarPanel.ViewMode.RenderingFrames)
+ this._refreshFrameSelectionChart();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _capturingStarted(event)
</span><span class="lines">@@ -475,8 +522,10 @@
</span><span class="cx"> console.assert(timeline instanceof WebInspector.Timeline, timeline);
</span><span class="cx"> console.assert(!this._timelineTreeElementMap.has(timeline), timeline);
</span><span class="cx">
</span><del>- if (this._viewModeForTimeline(timeline) !== WebInspector.TimelineSidebarPanel.ViewMode.Timelines)
</del><ins>+ if (timeline.type === WebInspector.TimelineRecord.Type.RenderingFrame) {
+ timeline.addEventListener(WebInspector.Timeline.Event.TimesUpdated, this._renderingFrameTimelineTimesUpdated, this);
</ins><span class="cx"> return;
</span><ins>+ }
</ins><span class="cx">
</span><span class="cx"> var timelineTreeElement = new WebInspector.GeneralTreeElement([timeline.iconClassName, WebInspector.TimelineSidebarPanel.LargeIconStyleClass], timeline.displayName, null, timeline);
</span><span class="cx"> var tooltip = WebInspector.UIString("Close %s timeline view").format(timeline.displayName);
</span><span class="lines">@@ -495,8 +544,11 @@
</span><span class="cx"> {
</span><span class="cx"> var timeline = event.data.timeline;
</span><span class="cx"> console.assert(timeline instanceof WebInspector.Timeline, timeline);
</span><del>- if (this._viewModeForTimeline(timeline) !== WebInspector.TimelineSidebarPanel.ViewMode.Timelines)
</del><ins>+
+ if (timeline.type === WebInspector.TimelineRecord.Type.RenderingFrame) {
+ timeline.removeEventListener(WebInspector.Timeline.Event.TimesUpdated, this._renderingFrameTimelineTimesUpdated, this);
</ins><span class="cx"> return;
</span><ins>+ }
</ins><span class="cx">
</span><span class="cx"> console.assert(this._timelineTreeElementMap.has(timeline), timeline);
</span><span class="cx">
</span><span class="lines">@@ -594,10 +646,13 @@
</span><span class="cx"> this._viewMode = mode;
</span><span class="cx"> this._viewModeNavigationBar.selectedNavigationItem = this._viewMode;
</span><span class="cx">
</span><del>- if (this._viewMode === WebInspector.TimelineSidebarPanel.ViewMode.Timelines)
</del><ins>+ if (this._viewMode === WebInspector.TimelineSidebarPanel.ViewMode.Timelines) {
</ins><span class="cx"> this._timelinesTreeOutline.element.classList.remove(WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementHiddenStyleClassName);
</span><del>- else
</del><ins>+ this._frameSelectionChartSection.collapsed = true;
+ } else {
</ins><span class="cx"> this._timelinesTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementHiddenStyleClassName);
</span><ins>+ this._frameSelectionChartSection.collapsed = false;
+ }
</ins><span class="cx">
</span><span class="cx"> if (!selectedByUser)
</span><span class="cx"> return;
</span><span class="lines">@@ -615,6 +670,80 @@
</span><span class="cx"> this.showTimelineOverview();
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ _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}
+ ];
+ }
+
</ins><span class="cx"> // These methods are only used when ReplayAgent is available.
</span><span class="cx">
</span><span class="cx"> _updateReplayInterfaceVisibility()
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineTabContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineTabContentView.js (183720 => 183721)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -26,7 +26,7 @@
</span><span class="cx"> WebInspector.TimelineTabContentView = function(identifier)
</span><span class="cx"> {
</span><span class="cx"> var tabBarItem = new WebInspector.TabBarItem("Images/Timeline.svg", WebInspector.UIString("Timelines"));
</span><del>- var detailsSidebarPanels = [WebInspector.resourceDetailsSidebarPanel, WebInspector.probeDetailsSidebarPanel, WebInspector.renderingFrameDetailsSidebarPanel];
</del><ins>+ var detailsSidebarPanels = [WebInspector.resourceDetailsSidebarPanel, WebInspector.probeDetailsSidebarPanel];
</ins><span class="cx">
</span><span class="cx"> // FIME: Until TimelineSidebarPanel supports instantiating after inspector launch, disable closing.
</span><span class="cx"> tabBarItem.hideCloseButton = true;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIWebInspectorUIvcxprojWebInspectorUIvcxproj"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj (183720 => 183721)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -297,7 +297,6 @@
</span><span class="cx"> <None Include="..\UserInterface\CanvasProfileObject.js" />
</span><span class="cx"> <None Include="..\UserInterface\CanvasProfileType.js" />
</span><span class="cx"> <None Include="..\UserInterface\CanvasProfileView.js" />
</span><del>- <None Include="..\UserInterface\ChartDetailsSectionLegendRow.js" />
</del><span class="cx"> <None Include="..\UserInterface\ChartDetailsSectionRow.js" />
</span><span class="cx"> <None Include="..\UserInterface\ChartDetailsSectionRow.css" />
</span><span class="cx"> <None Include="..\UserInterface\ClusterContentView.css" />
</span><span class="lines">@@ -738,7 +737,6 @@
</span><span class="cx"> <None Include="..\UserInterface\RadioButtonNavigationItem.css" />
</span><span class="cx"> <None Include="..\UserInterface\RadioButtonNavigationItem.js" />
</span><span class="cx"> <None Include="..\UserInterface\RemoteObject.js" />
</span><del>- <None Include="..\UserInterface\RenderingFrameDetailsSidebarPanel.js" />
</del><span class="cx"> <None Include="..\UserInterface\RenderingFrameTimeDataGridNode.js" />
</span><span class="cx"> <None Include="..\UserInterface\RenderingFrameTimelineOverview.js" />
</span><span class="cx"> <None Include="..\UserInterface\RenderingFrameTimelineOverviewGraph.css" />
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIWebInspectorUIvcxprojWebInspectorUIvcxprojfilters"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters (183720 => 183721)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -141,9 +141,6 @@
</span><span class="cx"> <None Include="..\UserInterface\CanvasProfileView.js">
</span><span class="cx"> <Filter>UserInterface</Filter>
</span><span class="cx"> </None>
</span><del>- <None Include="..\UserInterface\ChartDetailsSectionLegendRow.js">
- <Filter>UserInterface</Filter>
- </None>
</del><span class="cx"> <None Include="..\UserInterface\ChartDetailsSectionRow.js">
</span><span class="cx"> <Filter>UserInterface</Filter>
</span><span class="cx"> </None>
</span><span class="lines">@@ -783,9 +780,6 @@
</span><span class="cx"> <None Include="..\UserInterface\RemoteObject.js">
</span><span class="cx"> <Filter>UserInterface</Filter>
</span><span class="cx"> </None>
</span><del>- <None Include="..\UserInterface\RenderingFrameDetailsSidebarPanel.js">
- <Filter>UserInterface</Filter>
- </None>
</del><span class="cx"> <None Include="..\UserInterface\RenderingFrameTimelineDataGridNode.js">
</span><span class="cx"> <Filter>UserInterface</Filter>
</span><span class="cx"> </None>
</span></span></pre>
</div>
</div>
</body>
</html>