<!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>[183469] 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/183469">183469</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2015-04-28 06:30:22 -0700 (Tue, 28 Apr 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: add a separate overview for the Rendering Frames timeline
https://bugs.webkit.org/show_bug.cgi?id=144245
Patch by Matt Baker <mattbaker@apple.com> on 2015-04-28
Reviewed by Timothy Hatcher.
The Timelines tab now supports two view modes, labeled "Timelines" and "Rendering Frames", with each mode
having a seperate timeline overview and selected range. The Timelines mode displays the original time-based
graphs (Network, Layout, and Script), and switching to the Rendering Frames mode displays a frames graph
with a timeline ruler which shows frame indices.
If the rendering frames timeline is supported by the backend, a navigation bar is added to the timelines
sidebar with controls for switching between view modes. In addition to user-triggered view mode changes, the
timelines sidebar will automatically change the current view mode in response to content view changes that
are triggered elsewhere in the UI (for example, when a timeline that does not belong to the current view
mode is selected via the navigation path).
* UserInterface/Controllers/TimelineManager.js:
(WebInspector.TimelineManager.prototype.get activeRecording): Deleted.
(WebInspector.TimelineManager.prototype.get recordings): Deleted.
Removed unused code.
* UserInterface/Main.html:
New files.
* UserInterface/Models/RenderingFrameTimelineRecord.js:
(WebInspector.RenderingFrameTimelineRecord):
(WebInspector.RenderingFrameTimelineRecord.resetFrameIndex):
(WebInspector.RenderingFrameTimelineRecord.prototype.get frameIndex):
(WebInspector.RenderingFrameTimelineRecord.prototype.get frameNumber):
* UserInterface/Models/TimelineRecording.js:
(WebInspector.TimelineRecording.prototype.reset):
Frame number is now derived from frame index.
* UserInterface/Views/LinearTimelineOverview.js:
(WebInspector.LinearTimelineOverview):
(WebInspector.LinearTimelineOverview.prototype.canShowTimeline):
New overview class for time-based timeline graphs.
* UserInterface/Views/RenderingFrameDetailsSidebarPanel.js:
(WebInspector.RenderingFrameDetailsSidebarPanel):
(WebInspector.RenderingFrameDetailsSidebarPanel.prototype.updateRangeSelection):
(WebInspector.RenderingFrameDetailsSidebarPanel.prototype._getSelectedRecords):
Changed type of selected range from time to frame indices.
* UserInterface/Views/RenderingFrameTimelineOverview.js:
(WebInspector.RenderingFrameTimelineOverview.this.timelineRuler.formatLabelCallback):
(WebInspector.RenderingFrameTimelineOverview):
(WebInspector.RenderingFrameTimelineOverview.prototype.canShowTimeline):
New overview class for frame-based timeline graphs.
* UserInterface/Views/RenderingFrameTimelineOverviewGraph.css:
(.timeline-overview > .graphs-container > .timeline-overview-graph.rendering-frame):
* UserInterface/Views/RenderingFrameTimelineOverviewGraph.js:
(WebInspector.RenderingFrameTimelineOverviewGraph):
(WebInspector.RenderingFrameTimelineOverviewGraph.prototype._updateDividers.createDividerAtPosition.get if):
Updated to use frame index ruler and removed frame combining logic.
* UserInterface/Views/RenderingFrameTimelineView.js:
(WebInspector.RenderingFrameTimelineView):
Increased column widths.
* UserInterface/Views/TimelineOverview.css:
(.timeline-overview > .graphs-container):
(body.mac-platform.legacy .timeline-overview > .graphs-container):
Updated for new ruler height.
* UserInterface/Views/TimelineOverview.js:
(WebInspector.TimelineOverview):
(WebInspector.TimelineOverview.prototype.get secondsPerPixel):
(WebInspector.TimelineOverview.prototype.set secondsPerPixel):
(WebInspector.TimelineOverview.prototype.get visibleDuration):
(WebInspector.TimelineOverview.prototype.set selectionDuration):
(WebInspector.TimelineOverview.prototype.updateLayout):
(WebInspector.TimelineOverview.prototype.get timelineRuler):
(WebInspector.TimelineOverview.prototype.canShowTimeline):
(WebInspector.TimelineOverview.prototype._handleScrollEvent):
(WebInspector.TimelineOverview.prototype._handleWheelEvent):
(WebInspector.TimelineOverview.prototype._timelineRemoved):
(WebInspector.TimelineOverview.prototype._timeRangeSelectionChanged):
(WebInspector.TimelineOverview.prototype.set currentTime): Deleted.
(WebInspector.TimelineOverview.prototype.updateLayoutIfNeeded): Deleted.
(WebInspector.TimelineOverview.prototype._needsLayout): Deleted.
Converted to base class. Derived classes provide settings and permitted timeline types.
* UserInterface/Views/TimelineRecordFrame.css:
(.timeline-record-frame):
(.timeline-record-frame > .frame):
(.timeline-record-frame > .frame > .duration):
(.timeline-record-frame > .frame > .duration.timeline-record-type-network):
(.timeline-record-frame > .frame > .duration.timeline-record-type-layout):
(.timeline-record-frame > .frame > .duration.timeline-record-type-script):
(.timeline-record-frame > .frame > .duration:last-child): Deleted.
New graph frames styles.
* UserInterface/Views/TimelineRecordFrame.js:
(WebInspector.TimelineRecordFrame):
(WebInspector.TimelineRecordFrame.prototype.get record):
(WebInspector.TimelineRecordFrame.prototype.set record):
(WebInspector.TimelineRecordFrame.prototype._updateChildElements.createDurationElement):
(WebInspector.TimelineRecordFrame.prototype.get element): Deleted.
Updated to use frame index ruler.
Removed dropped frames and frame combining logic.
* UserInterface/Views/TimelineRecordingContentView.js:
(WebInspector.TimelineRecordingContentView):
(WebInspector.TimelineRecordingContentView.prototype.shown):
(WebInspector.TimelineRecordingContentView.prototype.hidden):
(WebInspector.TimelineRecordingContentView.prototype.updateLayout):
(WebInspector.TimelineRecordingContentView.prototype._currentContentViewDidChange):
(WebInspector.TimelineRecordingContentView.prototype._updateTimes):
(WebInspector.TimelineRecordingContentView.prototype._updateTimelineOverviewHeight):
(WebInspector.TimelineRecordingContentView.prototype._getRenderingFrameTimeline):
(WebInspector.TimelineRecordingContentView.prototype._timelineRemoved):
(WebInspector.TimelineRecordingContentView.prototype._timelineCountChanged):
(WebInspector.TimelineRecordingContentView.prototype._recordingReset):
(WebInspector.TimelineRecordingContentView.prototype._timeRangeSelectionChanged):
(WebInspector.TimelineRecordingContentView.prototype.get currentTimelineView): Deleted.
(WebInspector.TimelineRecordingContentView.prototype.goForward): Deleted.
(WebInspector.TimelineRecordingContentView.prototype.matchTreeElementAgainstCustomFilters): Deleted.
(WebInspector.TimelineRecordingContentView.prototype._contentViewSupplementalRepresentedObjectsDidChange): Deleted.
(WebInspector.TimelineRecordingContentView.prototype._update): Deleted.
(WebInspector.TimelineRecordingContentView.prototype._debuggerPaused): Deleted.
(WebInspector.TimelineRecordingContentView.prototype._debuggerResumed): Deleted.
(WebInspector.TimelineRecordingContentView.prototype._recordingTimesUpdated): Deleted.
Maintains two timeline overviews, switching between them based on the current content view.
Updated tree element filtering to support both overview rulers.
* UserInterface/Views/TimelineRuler.css:
(.timeline-ruler > .header):
(body.mac-platform.legacy .timeline-ruler > .header):
(.timeline-ruler > .header > .divider > .label):
(.timeline-ruler > .selection-drag):
(body.mac-platform.legacy .timeline-ruler > .selection-drag):
(.timeline-ruler > .selection-handle):
(body.mac-platform.legacy .timeline-ruler > .selection-handle):
(.timeline-ruler > .header > .divider): Deleted.
(.timeline-ruler > .selection-drag:active): Deleted.
Updated for new ruler height.
* UserInterface/Views/TimelineRuler.js:
(WebInspector.TimelineRuler):
(WebInspector.TimelineRuler.prototype.set formatLabelCallback):
(WebInspector.TimelineRuler.prototype.updateLayout):
(WebInspector.TimelineRuler.prototype._formatDividerLabelText):
(WebInspector.TimelineRuler.prototype.set allowsClippedLabels): Deleted.
(WebInspector.TimelineRuler.prototype._updateSelection): Deleted.
Added ability to customize label formatting.
* UserInterface/Views/TimelineSidebarPanel.css:
(.panel.timeline .navigation-bar.timelines-view):
(.sidebar > .panel.navigation.timeline > .title-bar):
(body.mac-platform.legacy .sidebar > .panel.navigation.timeline > .title-bar):
(.sidebar > .panel.navigation.timeline > .title-bar.timelines):
(.sidebar > .panel.navigation.timeline > .navigation-bar-container):
(.sidebar > .panel.navigation.timeline > .navigation-bar-container > .navigation-bar):
(.sidebar > .panel.navigation.timeline > .title-bar.timeline-events):
(body.mac-platform.legacy .sidebar > .panel.navigation.timeline > .title-bar.timeline-events):
(.sidebar > .panel.navigation.timeline > .timelines-content):
(.sidebar > .panel.navigation.timeline > .empty-content-placeholder):
(body.mac-platform.legacy .sidebar > .panel.navigation.timeline > :matches(.content, .empty-content-placeholder)):
(.sidebar > .panel.navigation.timeline > .timelines-content li.item.selected + li.item): Deleted.
(body.window-inactive .sidebar > .panel.navigation.timeline > .timelines-content li.item.selected + li.item): Deleted.
Updated for new navigation bar and ruler height.
* UserInterface/Views/TimelineSidebarPanel.js:
(WebInspector.TimelineSidebarPanel):
(WebInspector.TimelineSidebarPanel.prototype.get viewMode):
(WebInspector.TimelineSidebarPanel.prototype.canShowTimeline):
(WebInspector.TimelineSidebarPanel.showTimelineViewForTimeline.this._timelineTreeElementMap.get select):
(WebInspector.TimelineSidebarPanel.get this):
(WebInspector.TimelineSidebarPanel._timelineAdded.set this):
Added support for two view modes: Timelines and Rendering Frames.
* WebInspectorUI.vcxproj/WebInspectorUI.vcxproj:
* WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters:
New files.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</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="#trunkSourceWebInspectorUIUserInterfaceModelsRenderingFrameTimelineRecordjs">trunk/Source/WebInspectorUI/UserInterface/Models/RenderingFrameTimelineRecord.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceModelsTimelineRecordingjs">trunk/Source/WebInspectorUI/UserInterface/Models/TimelineRecording.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameDetailsSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineOverviewGraphcss">trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.css</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="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewcss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordFramecss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordFramejs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordingContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineRulercss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineRulerjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.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="#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>Added Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsLinearTimelineOverviewjs">trunk/Source/WebInspectorUI/UserInterface/Views/LinearTimelineOverview.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineOverviewjs">trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverview.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (183468 => 183469)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2015-04-28 13:04:38 UTC (rev 183468)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-04-28 13:30:22 UTC (rev 183469)
</span><span class="lines">@@ -1,3 +1,182 @@
</span><ins>+2015-04-28 Matt Baker <mattbaker@apple.com>
+
+ Web Inspector: add a separate overview for the Rendering Frames timeline
+ https://bugs.webkit.org/show_bug.cgi?id=144245
+
+ Reviewed by Timothy Hatcher.
+
+ The Timelines tab now supports two view modes, labeled "Timelines" and "Rendering Frames", with each mode
+ having a seperate timeline overview and selected range. The Timelines mode displays the original time-based
+ graphs (Network, Layout, and Script), and switching to the Rendering Frames mode displays a frames graph
+ with a timeline ruler which shows frame indices.
+
+ If the rendering frames timeline is supported by the backend, a navigation bar is added to the timelines
+ sidebar with controls for switching between view modes. In addition to user-triggered view mode changes, the
+ timelines sidebar will automatically change the current view mode in response to content view changes that
+ are triggered elsewhere in the UI (for example, when a timeline that does not belong to the current view
+ mode is selected via the navigation path).
+
+ * UserInterface/Controllers/TimelineManager.js:
+ (WebInspector.TimelineManager.prototype.get activeRecording): Deleted.
+ (WebInspector.TimelineManager.prototype.get recordings): Deleted.
+ Removed unused code.
+
+ * UserInterface/Main.html:
+ New files.
+
+ * UserInterface/Models/RenderingFrameTimelineRecord.js:
+ (WebInspector.RenderingFrameTimelineRecord):
+ (WebInspector.RenderingFrameTimelineRecord.resetFrameIndex):
+ (WebInspector.RenderingFrameTimelineRecord.prototype.get frameIndex):
+ (WebInspector.RenderingFrameTimelineRecord.prototype.get frameNumber):
+ * UserInterface/Models/TimelineRecording.js:
+ (WebInspector.TimelineRecording.prototype.reset):
+ Frame number is now derived from frame index.
+
+ * UserInterface/Views/LinearTimelineOverview.js:
+ (WebInspector.LinearTimelineOverview):
+ (WebInspector.LinearTimelineOverview.prototype.canShowTimeline):
+ New overview class for time-based timeline graphs.
+
+ * UserInterface/Views/RenderingFrameDetailsSidebarPanel.js:
+ (WebInspector.RenderingFrameDetailsSidebarPanel):
+ (WebInspector.RenderingFrameDetailsSidebarPanel.prototype.updateRangeSelection):
+ (WebInspector.RenderingFrameDetailsSidebarPanel.prototype._getSelectedRecords):
+ Changed type of selected range from time to frame indices.
+
+ * UserInterface/Views/RenderingFrameTimelineOverview.js:
+ (WebInspector.RenderingFrameTimelineOverview.this.timelineRuler.formatLabelCallback):
+ (WebInspector.RenderingFrameTimelineOverview):
+ (WebInspector.RenderingFrameTimelineOverview.prototype.canShowTimeline):
+ New overview class for frame-based timeline graphs.
+
+ * UserInterface/Views/RenderingFrameTimelineOverviewGraph.css:
+ (.timeline-overview > .graphs-container > .timeline-overview-graph.rendering-frame):
+ * UserInterface/Views/RenderingFrameTimelineOverviewGraph.js:
+ (WebInspector.RenderingFrameTimelineOverviewGraph):
+ (WebInspector.RenderingFrameTimelineOverviewGraph.prototype._updateDividers.createDividerAtPosition.get if):
+ Updated to use frame index ruler and removed frame combining logic.
+
+ * UserInterface/Views/RenderingFrameTimelineView.js:
+ (WebInspector.RenderingFrameTimelineView):
+ Increased column widths.
+
+ * UserInterface/Views/TimelineOverview.css:
+ (.timeline-overview > .graphs-container):
+ (body.mac-platform.legacy .timeline-overview > .graphs-container):
+ Updated for new ruler height.
+
+ * UserInterface/Views/TimelineOverview.js:
+ (WebInspector.TimelineOverview):
+ (WebInspector.TimelineOverview.prototype.get secondsPerPixel):
+ (WebInspector.TimelineOverview.prototype.set secondsPerPixel):
+ (WebInspector.TimelineOverview.prototype.get visibleDuration):
+ (WebInspector.TimelineOverview.prototype.set selectionDuration):
+ (WebInspector.TimelineOverview.prototype.updateLayout):
+ (WebInspector.TimelineOverview.prototype.get timelineRuler):
+ (WebInspector.TimelineOverview.prototype.canShowTimeline):
+ (WebInspector.TimelineOverview.prototype._handleScrollEvent):
+ (WebInspector.TimelineOverview.prototype._handleWheelEvent):
+ (WebInspector.TimelineOverview.prototype._timelineRemoved):
+ (WebInspector.TimelineOverview.prototype._timeRangeSelectionChanged):
+ (WebInspector.TimelineOverview.prototype.set currentTime): Deleted.
+ (WebInspector.TimelineOverview.prototype.updateLayoutIfNeeded): Deleted.
+ (WebInspector.TimelineOverview.prototype._needsLayout): Deleted.
+ Converted to base class. Derived classes provide settings and permitted timeline types.
+
+ * UserInterface/Views/TimelineRecordFrame.css:
+ (.timeline-record-frame):
+ (.timeline-record-frame > .frame):
+ (.timeline-record-frame > .frame > .duration):
+ (.timeline-record-frame > .frame > .duration.timeline-record-type-network):
+ (.timeline-record-frame > .frame > .duration.timeline-record-type-layout):
+ (.timeline-record-frame > .frame > .duration.timeline-record-type-script):
+ (.timeline-record-frame > .frame > .duration:last-child): Deleted.
+ New graph frames styles.
+
+ * UserInterface/Views/TimelineRecordFrame.js:
+ (WebInspector.TimelineRecordFrame):
+ (WebInspector.TimelineRecordFrame.prototype.get record):
+ (WebInspector.TimelineRecordFrame.prototype.set record):
+ (WebInspector.TimelineRecordFrame.prototype._updateChildElements.createDurationElement):
+ (WebInspector.TimelineRecordFrame.prototype.get element): Deleted.
+ Updated to use frame index ruler.
+ Removed dropped frames and frame combining logic.
+
+ * UserInterface/Views/TimelineRecordingContentView.js:
+ (WebInspector.TimelineRecordingContentView):
+ (WebInspector.TimelineRecordingContentView.prototype.shown):
+ (WebInspector.TimelineRecordingContentView.prototype.hidden):
+ (WebInspector.TimelineRecordingContentView.prototype.updateLayout):
+ (WebInspector.TimelineRecordingContentView.prototype._currentContentViewDidChange):
+ (WebInspector.TimelineRecordingContentView.prototype._updateTimes):
+ (WebInspector.TimelineRecordingContentView.prototype._updateTimelineOverviewHeight):
+ (WebInspector.TimelineRecordingContentView.prototype._getRenderingFrameTimeline):
+ (WebInspector.TimelineRecordingContentView.prototype._timelineRemoved):
+ (WebInspector.TimelineRecordingContentView.prototype._timelineCountChanged):
+ (WebInspector.TimelineRecordingContentView.prototype._recordingReset):
+ (WebInspector.TimelineRecordingContentView.prototype._timeRangeSelectionChanged):
+ (WebInspector.TimelineRecordingContentView.prototype.get currentTimelineView): Deleted.
+ (WebInspector.TimelineRecordingContentView.prototype.goForward): Deleted.
+ (WebInspector.TimelineRecordingContentView.prototype.matchTreeElementAgainstCustomFilters): Deleted.
+ (WebInspector.TimelineRecordingContentView.prototype._contentViewSupplementalRepresentedObjectsDidChange): Deleted.
+ (WebInspector.TimelineRecordingContentView.prototype._update): Deleted.
+ (WebInspector.TimelineRecordingContentView.prototype._debuggerPaused): Deleted.
+ (WebInspector.TimelineRecordingContentView.prototype._debuggerResumed): Deleted.
+ (WebInspector.TimelineRecordingContentView.prototype._recordingTimesUpdated): Deleted.
+ Maintains two timeline overviews, switching between them based on the current content view.
+ Updated tree element filtering to support both overview rulers.
+
+ * UserInterface/Views/TimelineRuler.css:
+ (.timeline-ruler > .header):
+ (body.mac-platform.legacy .timeline-ruler > .header):
+ (.timeline-ruler > .header > .divider > .label):
+ (.timeline-ruler > .selection-drag):
+ (body.mac-platform.legacy .timeline-ruler > .selection-drag):
+ (.timeline-ruler > .selection-handle):
+ (body.mac-platform.legacy .timeline-ruler > .selection-handle):
+ (.timeline-ruler > .header > .divider): Deleted.
+ (.timeline-ruler > .selection-drag:active): Deleted.
+ Updated for new ruler height.
+
+ * UserInterface/Views/TimelineRuler.js:
+ (WebInspector.TimelineRuler):
+ (WebInspector.TimelineRuler.prototype.set formatLabelCallback):
+ (WebInspector.TimelineRuler.prototype.updateLayout):
+ (WebInspector.TimelineRuler.prototype._formatDividerLabelText):
+ (WebInspector.TimelineRuler.prototype.set allowsClippedLabels): Deleted.
+ (WebInspector.TimelineRuler.prototype._updateSelection): Deleted.
+ Added ability to customize label formatting.
+
+ * UserInterface/Views/TimelineSidebarPanel.css:
+ (.panel.timeline .navigation-bar.timelines-view):
+ (.sidebar > .panel.navigation.timeline > .title-bar):
+ (body.mac-platform.legacy .sidebar > .panel.navigation.timeline > .title-bar):
+ (.sidebar > .panel.navigation.timeline > .title-bar.timelines):
+ (.sidebar > .panel.navigation.timeline > .navigation-bar-container):
+ (.sidebar > .panel.navigation.timeline > .navigation-bar-container > .navigation-bar):
+ (.sidebar > .panel.navigation.timeline > .title-bar.timeline-events):
+ (body.mac-platform.legacy .sidebar > .panel.navigation.timeline > .title-bar.timeline-events):
+ (.sidebar > .panel.navigation.timeline > .timelines-content):
+ (.sidebar > .panel.navigation.timeline > .empty-content-placeholder):
+ (body.mac-platform.legacy .sidebar > .panel.navigation.timeline > :matches(.content, .empty-content-placeholder)):
+ (.sidebar > .panel.navigation.timeline > .timelines-content li.item.selected + li.item): Deleted.
+ (body.window-inactive .sidebar > .panel.navigation.timeline > .timelines-content li.item.selected + li.item): Deleted.
+ Updated for new navigation bar and ruler height.
+
+ * UserInterface/Views/TimelineSidebarPanel.js:
+ (WebInspector.TimelineSidebarPanel):
+ (WebInspector.TimelineSidebarPanel.prototype.get viewMode):
+ (WebInspector.TimelineSidebarPanel.prototype.canShowTimeline):
+ (WebInspector.TimelineSidebarPanel.showTimelineViewForTimeline.this._timelineTreeElementMap.get select):
+ (WebInspector.TimelineSidebarPanel.get this):
+ (WebInspector.TimelineSidebarPanel._timelineAdded.set this):
+ Added support for two view modes: Timelines and Rendering Frames.
+
+ * WebInspectorUI.vcxproj/WebInspectorUI.vcxproj:
+ * WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters:
+ New files.
+
</ins><span class="cx"> 2015-04-27 Timothy Hatcher <timothy@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: Add new tab button to make it easy to bring a closed tab back
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceControllersTimelineManagerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js (183468 => 183469)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js 2015-04-28 13:04:38 UTC (rev 183468)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js 2015-04-28 13:30:22 UTC (rev 183469)
</span><span class="lines">@@ -50,19 +50,6 @@
</span><span class="cx"> setTimeout(delayedWork.bind(this), 0);
</span><span class="cx"> }
</span><span class="cx">
</span><del>- // Static
-
- static shouldShowViewForTimeline(timeline)
- {
- // COMPATIBILITY (iOS 8): TimelineAgent.EventType.RenderingFrame did not exist,
- // fallback to displaying all other timelines.
- if (window.TimelineAgent && !TimelineAgent.EventType.RenderingFrame)
- return timeline.type !== WebInspector.TimelineRecord.Type.RenderingFrame;
-
- // Don't show the Layout timeline view when the RenderingFrame timeline exists.
- return timeline.type !== WebInspector.TimelineRecord.Type.Layout;
- }
-
</del><span class="cx"> // Public
</span><span class="cx">
</span><span class="cx"> // The current recording that new timeline records will be appended to, if any.
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (183468 => 183469)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2015-04-28 13:04:38 UTC (rev 183468)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2015-04-28 13:30:22 UTC (rev 183469)
</span><span class="lines">@@ -342,6 +342,7 @@
</span><span class="cx"> <script src="Views/ObjectTreeBaseTreeElement.js"></script>
</span><span class="cx"> <script src="Views/SourceCodeTreeElement.js"></script>
</span><span class="cx"> <script src="Views/StorageTreeElement.js"></script>
</span><ins>+ <script src="Views/TimelineOverview.js"></script>
</ins><span class="cx"> <script src="Views/TimelineRecordTreeElement.js"></script>
</span><span class="cx">
</span><span class="cx"> <script src="Views/ConsoleTabContentView.js"></script>
</span><span class="lines">@@ -448,6 +449,7 @@
</span><span class="cx"> <script src="Views/LayoutTimelineDataGridNode.js"></script>
</span><span class="cx"> <script src="Views/LayoutTimelineOverviewGraph.js"></script>
</span><span class="cx"> <script src="Views/LayoutTimelineView.js"></script>
</span><ins>+ <script src="Views/LinearTimelineOverview.js"></script>
</ins><span class="cx"> <script src="Views/LogContentView.js"></script>
</span><span class="cx"> <script src="Views/LogTreeElement.js"></script>
</span><span class="cx"> <script src="Views/MetricsStyleDetailsPanel.js"></script>
</span><span class="lines">@@ -473,6 +475,7 @@
</span><span class="cx"> <script src="Views/RadioButtonNavigationItem.js"></script>
</span><span class="cx"> <script src="Views/RenderingFrameDetailsSidebarPanel.js"></script>
</span><span class="cx"> <script src="Views/RenderingFrameTimelineDataGridNode.js"></script>
</span><ins>+ <script src="Views/RenderingFrameTimelineOverview.js"></script>
</ins><span class="cx"> <script src="Views/RenderingFrameTimelineOverviewGraph.js"></script>
</span><span class="cx"> <script src="Views/RenderingFrameTimelineView.js"></script>
</span><span class="cx"> <script src="Views/ReplayDashboardView.js"></script>
</span><span class="lines">@@ -504,7 +507,6 @@
</span><span class="cx"> <script src="Views/SyntaxHighlightingSupport.js"></script>
</span><span class="cx"> <script src="Views/TextContentView.js"></script>
</span><span class="cx"> <script src="Views/TextResourceContentView.js"></script>
</span><del>- <script src="Views/TimelineOverview.js"></script>
</del><span class="cx"> <script src="Views/TimelineRecordBar.js"></script>
</span><span class="cx"> <script src="Views/TimelineRecordFrame.js"></script>
</span><span class="cx"> <script src="Views/TimelineRecordingContentView.js"></script>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceModelsRenderingFrameTimelineRecordjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Models/RenderingFrameTimelineRecord.js (183468 => 183469)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Models/RenderingFrameTimelineRecord.js 2015-04-28 13:04:38 UTC (rev 183468)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/RenderingFrameTimelineRecord.js 2015-04-28 13:30:22 UTC (rev 183469)
</span><span class="lines">@@ -32,21 +32,26 @@
</span><span class="cx"> this._children = children || [];
</span><span class="cx"> this._durationByRecordType = new Map;
</span><span class="cx"> this._durationRemainder = NaN;
</span><del>- this._frameNumber = WebInspector.RenderingFrameTimelineRecord._nextFrameNumber++;
</del><ins>+ this._frameIndex = WebInspector.RenderingFrameTimelineRecord._nextFrameIndex++;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Static
</span><span class="cx">
</span><del>- static resetFrameNumber()
</del><ins>+ static resetFrameIndex()
</ins><span class="cx"> {
</span><del>- WebInspector.RenderingFrameTimelineRecord._nextFrameNumber = 1;
</del><ins>+ WebInspector.RenderingFrameTimelineRecord._nextFrameIndex = 0;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="cx">
</span><ins>+ get frameIndex()
+ {
+ return this._frameIndex;
+ }
+
</ins><span class="cx"> get frameNumber()
</span><span class="cx"> {
</span><del>- return this._frameNumber;
</del><ins>+ return this._frameIndex + 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> get children()
</span><span class="lines">@@ -98,4 +103,4 @@
</span><span class="cx">
</span><span class="cx"> WebInspector.RenderingFrameTimelineRecord.TypeIdentifier = "rendering-frame-timeline-record";
</span><span class="cx">
</span><del>-WebInspector.RenderingFrameTimelineRecord._nextFrameNumber = 1;
</del><ins>+WebInspector.RenderingFrameTimelineRecord._nextFrameIndex = 0;
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceModelsTimelineRecordingjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Models/TimelineRecording.js (183468 => 183469)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Models/TimelineRecording.js 2015-04-28 13:04:38 UTC (rev 183468)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/TimelineRecording.js 2015-04-28 13:30:22 UTC (rev 183469)
</span><span class="lines">@@ -109,7 +109,7 @@
</span><span class="cx"> for (var timeline of this._timelines.values())
</span><span class="cx"> timeline.reset(suppressEvents);
</span><span class="cx">
</span><del>- WebInspector.RenderingFrameTimelineRecord.resetFrameNumber();
</del><ins>+ WebInspector.RenderingFrameTimelineRecord.resetFrameIndex();
</ins><span class="cx">
</span><span class="cx"> if (!suppressEvents) {
</span><span class="cx"> this.dispatchEventToListeners(WebInspector.TimelineRecording.Event.Reset);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsLinearTimelineOverviewjsfromrev183468trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineOverviewGraphcss"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebInspectorUI/UserInterface/Views/LinearTimelineOverview.js (from rev 183468, trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.css) (0 => 183469)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/LinearTimelineOverview.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LinearTimelineOverview.js 2015-04-28 13:30:22 UTC (rev 183469)
</span><span class="lines">@@ -0,0 +1,49 @@
</span><ins>+/*
+ * 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.LinearTimelineOverview = function(timelineRecording)
+{
+ // FIXME: Convert this to a WebInspector.TimelineOverview subclass, and call super().
+
+ var defaultSettingsValues = {
+ durationPerPixel: 0.01,
+ selectionStartValue: 0,
+ selectionDuration: 5
+ };
+
+ WebInspector.TimelineOverview.call(this, "linear", timelineRecording, 0.0001, 60, defaultSettingsValues);
+};
+
+WebInspector.LinearTimelineOverview.prototype = {
+ constructor: WebInspector.LinearTimelineOverview,
+ __proto__: WebInspector.TimelineOverview.prototype,
+
+ // Protected
+
+ canShowTimeline: function(timeline)
+ {
+ return timeline.type !== WebInspector.TimelineRecord.Type.RenderingFrame;
+ }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameDetailsSidebarPanel.js (183468 => 183469)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameDetailsSidebarPanel.js 2015-04-28 13:04:38 UTC (rev 183468)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameDetailsSidebarPanel.js 2015-04-28 13:30:22 UTC (rev 183469)
</span><span class="lines">@@ -50,8 +50,8 @@
</span><span class="cx"> this.contentElement.appendChild(detailsSection.element);
</span><span class="cx">
</span><span class="cx"> this._renderingFrameTimeline = null;
</span><del>- this._startTime = 0;
- this._endTime = 0;
</del><ins>+ this._startFrameIndex = 0;
+ this._endFrameIndex = 0;
</ins><span class="cx">
</span><span class="cx"> this._emptyValuePlaceholderString = "\u2014";
</span><span class="cx">
</span><span class="lines">@@ -70,13 +70,13 @@
</span><span class="cx"> return !!this._renderingFrameTimeline;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- updateRangeSelection(startTime, endTime)
</del><ins>+ updateRangeSelection(startFrameIndex, endFrameIndex)
</ins><span class="cx"> {
</span><del>- if (this._startTime === startTime && this._endTime === endTime)
</del><ins>+ if (this._startFrameIndex === startFrameIndex && this._endFrameIndex === endFrameIndex)
</ins><span class="cx"> return;
</span><span class="cx">
</span><del>- this._startTime = startTime || 0;
- this._endTime = endTime || 0;
</del><ins>+ this._startFrameIndex = startFrameIndex || 0;
+ this._endFrameIndex = endFrameIndex || 0;
</ins><span class="cx">
</span><span class="cx"> this.needsRefresh();
</span><span class="cx"> }
</span><span class="lines">@@ -173,12 +173,12 @@
</span><span class="cx"> for (var record of this._renderingFrameTimeline.records) {
</span><span class="cx"> console.assert(record instanceof WebInspector.RenderingFrameTimelineRecord);
</span><span class="cx"> // If this frame is completely before the bounds of the graph, skip this record.
</span><del>- if (record.endTime < this._startTime)
</del><ins>+ if (record.frameIndex < Math.floor(this._startFrameIndex))
</ins><span class="cx"> continue;
</span><span class="cx">
</span><span class="cx"> // If this record is completely after the end time, break out now.
</span><span class="cx"> // Records are sorted, so all records after this will be beyond the end time too.
</span><del>- if (record.startTime > this._endTime)
</del><ins>+ if (record.frameIndex > this._endFrameIndex)
</ins><span class="cx"> break;
</span><span class="cx">
</span><span class="cx"> records.push(record);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineOverviewjsfromrev183468trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineOverviewGraphcss"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverview.js (from rev 183468, trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.css) (0 => 183469)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverview.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverview.js 2015-04-28 13:30:22 UTC (rev 183469)
</span><span class="lines">@@ -0,0 +1,55 @@
</span><ins>+/*
+ * 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.RenderingFrameTimelineOverview = function(timelineRecording)
+{
+ // FIXME: Convert this to a WebInspector.TimelineOverview subclass, and call super().
+
+ var minimumDurationPerPixel = 1 / WebInspector.TimelineRecordFrame.MaximumWidthPixels;
+ var maximumDurationPerPixel = 1 / WebInspector.TimelineRecordFrame.MinimumWidthPixels;
+ var defaultSettingsValues = {
+ durationPerPixel: minimumDurationPerPixel,
+ selectionStartValue: 0,
+ selectionDuration: 100
+ };
+
+ WebInspector.TimelineOverview.call(this, "frames", timelineRecording, minimumDurationPerPixel, maximumDurationPerPixel, defaultSettingsValues);
+
+ this.timelineRuler.formatLabelCallback = function(value) {
+ return value.toFixed(0);
+ };
+};
+
+WebInspector.RenderingFrameTimelineOverview.prototype = {
+ constructor: WebInspector.RenderingFrameTimelineOverview,
+ __proto__: WebInspector.TimelineOverview.prototype,
+
+ // Protected
+
+ canShowTimeline: function(timeline)
+ {
+ return timeline.type === WebInspector.TimelineRecord.Type.RenderingFrame;
+ }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineOverviewGraphcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.css (183468 => 183469)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.css 2015-04-28 13:04:38 UTC (rev 183468)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.css 2015-04-28 13:30:22 UTC (rev 183469)
</span><span class="lines">@@ -23,6 +23,10 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><ins>+.timeline-overview > .graphs-container > .timeline-overview-graph.rendering-frame {
+ height: 100%;
+}
+
</ins><span class="cx"> .timeline-overview-graph.rendering-frame > .divider {
</span><span class="cx"> position: absolute;
</span><span class="cx"> z-index: 10;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineOverviewGraphjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.js (183468 => 183469)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.js 2015-04-28 13:04:38 UTC (rev 183468)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.js 2015-04-28 13:30:22 UTC (rev 183469)
</span><span class="lines">@@ -30,12 +30,12 @@
</span><span class="cx"> this.element.classList.add(WebInspector.RenderingFrameTimelineOverviewGraph.StyleClassName);
</span><span class="cx">
</span><span class="cx"> this._renderingFrameTimeline = timeline;
</span><ins>+ this._renderingFrameTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._timelineRecordAdded, this);
+
</ins><span class="cx"> this._timelineRecordFrames = [];
</span><span class="cx"> this._graphHeightSeconds = NaN;
</span><del>- this._framesPerSecondDividers = new Map;
</del><ins>+ this._framesPerSecondDividerMap = new Map;
</ins><span class="cx">
</span><del>- this._renderingFrameTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._timelineRecordAdded, this);
-
</del><span class="cx"> this.reset();
</span><span class="cx"> };
</span><span class="cx">
</span><span class="lines">@@ -70,7 +70,7 @@
</span><span class="cx">
</span><span class="cx"> this.element.removeChildren();
</span><span class="cx">
</span><del>- this._framesPerSecondDividers.clear();
</del><ins>+ this._framesPerSecondDividerMap.clear();
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> updateLayout()
</span><span class="lines">@@ -80,28 +80,29 @@
</span><span class="cx"> if (!this._renderingFrameTimeline.records.length)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- var secondsPerPixel = this.timelineOverview.secondsPerPixel;
</del><ins>+ var records = this._renderingFrameTimeline.records;
+ var startIndex = Math.floor(this.startTime);
+ var endIndex = Math.min(Math.floor(this.endTime), records.length - 1);
</ins><span class="cx"> var recordFrameIndex = 0;
</span><span class="cx">
</span><del>- function createFrame(records)
- {
</del><ins>+ for (var i = startIndex; i <= endIndex; ++i) {
+ var record = records[i];
</ins><span class="cx"> var timelineRecordFrame = this._timelineRecordFrames[recordFrameIndex];
</span><span class="cx"> if (!timelineRecordFrame)
</span><del>- timelineRecordFrame = this._timelineRecordFrames[recordFrameIndex] = new WebInspector.TimelineRecordFrame(this, records);
</del><ins>+ timelineRecordFrame = this._timelineRecordFrames[recordFrameIndex] = new WebInspector.TimelineRecordFrame(this, record);
</ins><span class="cx"> else
</span><del>- timelineRecordFrame.records = records;
</del><ins>+ timelineRecordFrame.record = record;
</ins><span class="cx">
</span><span class="cx"> timelineRecordFrame.refresh(this);
</span><span class="cx"> if (!timelineRecordFrame.element.parentNode)
</span><span class="cx"> this.element.appendChild(timelineRecordFrame.element);
</span><ins>+
</ins><span class="cx"> ++recordFrameIndex;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- WebInspector.TimelineRecordFrame.createCombinedFrames(this._renderingFrameTimeline.records, secondsPerPixel, this, createFrame.bind(this));
-
</del><span class="cx"> // Remove the remaining unused TimelineRecordFrames.
</span><span class="cx"> for (; recordFrameIndex < this._timelineRecordFrames.length; ++recordFrameIndex) {
</span><del>- this._timelineRecordFrames[recordFrameIndex].records = null;
</del><ins>+ this._timelineRecordFrames[recordFrameIndex].record = null;
</ins><span class="cx"> this._timelineRecordFrames[recordFrameIndex].element.remove();
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -131,7 +132,7 @@
</span><span class="cx"> if (dividerTop < 0.01 || dividerTop >= 1)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- var divider = this._framesPerSecondDividers.get(framesPerSecond);
</del><ins>+ var divider = this._framesPerSecondDividerMap.get(framesPerSecond);
</ins><span class="cx"> if (!divider) {
</span><span class="cx"> divider = document.createElement("div");
</span><span class="cx"> divider.classList.add("divider");
</span><span class="lines">@@ -143,7 +144,7 @@
</span><span class="cx">
</span><span class="cx"> this.element.appendChild(divider);
</span><span class="cx">
</span><del>- this._framesPerSecondDividers.set(framesPerSecond, divider);
</del><ins>+ this._framesPerSecondDividerMap.set(framesPerSecond, divider);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> divider.style.marginTop = (dividerTop * overviewGraphHeight).toFixed(2) + "px";
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js (183468 => 183469)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js 2015-04-28 13:04:38 UTC (rev 183468)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js 2015-04-28 13:30:22 UTC (rev 183469)
</span><span class="lines">@@ -40,15 +40,15 @@
</span><span class="cx"> columns.startTime.aligned = "right";
</span><span class="cx">
</span><span class="cx"> columns.layoutTime.title = WebInspector.UIString("Layout");
</span><del>- columns.layoutTime.width = "10%";
</del><ins>+ columns.layoutTime.width = "15%";
</ins><span class="cx"> columns.layoutTime.aligned = "right";
</span><span class="cx">
</span><span class="cx"> columns.scriptTime.title = WebInspector.UIString("Script");
</span><del>- columns.scriptTime.width = "10%";
</del><ins>+ columns.scriptTime.width = "15%";
</ins><span class="cx"> columns.scriptTime.aligned = "right";
</span><span class="cx">
</span><span class="cx"> columns.otherTime.title = WebInspector.UIString("Other");
</span><del>- columns.otherTime.width = "10%";
</del><ins>+ columns.otherTime.width = "15%";
</ins><span class="cx"> columns.otherTime.aligned = "right";
</span><span class="cx">
</span><span class="cx"> columns.totalTime.title = WebInspector.UIString("Total Time");
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css (183468 => 183469)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css 2015-04-28 13:04:38 UTC (rev 183468)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css 2015-04-28 13:30:22 UTC (rev 183469)
</span><span class="lines">@@ -55,12 +55,16 @@
</span><span class="cx">
</span><span class="cx"> .timeline-overview > .graphs-container {
</span><span class="cx"> position: absolute;
</span><del>- top: 22px;
</del><ins>+ top: 29px;
</ins><span class="cx"> left: 0;
</span><span class="cx"> bottom: 0;
</span><span class="cx"> right: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+body.mac-platform.legacy .timeline-overview > .graphs-container {
+ top: 22px;
+}
+
</ins><span class="cx"> .timeline-overview > .graphs-container > .timeline-overview-graph {
</span><span class="cx"> height: 36px;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js (183468 => 183469)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js 2015-04-28 13:04:38 UTC (rev 183468)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js 2015-04-28 13:30:22 UTC (rev 183469)
</span><span class="lines">@@ -23,7 +23,7 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.TimelineOverview = function(timelineRecording)
</del><ins>+WebInspector.TimelineOverview = function(identifier, timelineRecording, minimumDurationPerPixel, maximumDurationPerPixel, defaultSettingsValues)
</ins><span class="cx"> {
</span><span class="cx"> // FIXME: Convert this to a WebInspector.Object subclass, and call super().
</span><span class="cx"> // WebInspector.Object.call(this);
</span><span class="lines">@@ -60,18 +60,20 @@
</span><span class="cx"> this._scrollWidthSizer.className = WebInspector.TimelineOverview.ScrollWidthSizerStyleClassName;
</span><span class="cx"> this._scrollContainerElement.appendChild(this._scrollWidthSizer);
</span><span class="cx">
</span><del>- this._secondsPerPixelSetting = new WebInspector.Setting("timeline-overview-seconds-per-pixel", 0.01);
- this._selectionStartTimeSetting = new WebInspector.Setting("timeline-overview-selection-start-time", 0);
- this._selectionDurationSetting = new WebInspector.Setting("timeline-overview-selection-duration", 5);
</del><ins>+ this._durationPerPixelSetting = new WebInspector.Setting(identifier + "-timeline-overview-duration-per-pixel", defaultSettingsValues.durationPerPixel);
+ this._selectionStartValueSetting = new WebInspector.Setting(identifier + "-timeline-overview-selection-start-value", defaultSettingsValues.selectionStartValue);
+ this._selectionDurationSetting = new WebInspector.Setting(identifier + "-timeline-overview-selection-duration", defaultSettingsValues.selectionDuration);
</ins><span class="cx">
</span><span class="cx"> this._startTime = 0;
</span><span class="cx"> this._currentTime = 0;
</span><span class="cx"> this._endTime = 0;
</span><del>- this._secondsPerPixel = this._secondsPerPixelSetting.value;
</del><ins>+ this._minimumDurationPerPixel = minimumDurationPerPixel;
+ this._maximumDurationPerPixel = maximumDurationPerPixel;
+ this._durationPerPixel = Math.min(this._maximumDurationPerPixel, Math.max(this._minimumDurationPerPixel, this._durationPerPixelSetting.value));
</ins><span class="cx"> this._scrollStartTime = 0;
</span><span class="cx"> this._cachedScrollContainerWidth = NaN;
</span><span class="cx">
</span><del>- this.selectionStartTime = this._selectionStartTimeSetting.value;
</del><ins>+ this.selectionStartTime = this._selectionStartValueSetting.value;
</ins><span class="cx"> this.selectionDuration = this._selectionDurationSetting.value;
</span><span class="cx">
</span><span class="cx"> for (var timeline of this._recording.timelines.values())
</span><span class="lines">@@ -82,7 +84,6 @@
</span><span class="cx"> WebInspector.TimelineOverview.GraphsContainerStyleClassName = "graphs-container";
</span><span class="cx"> WebInspector.TimelineOverview.ScrollContainerStyleClassName = "scroll-container";
</span><span class="cx"> WebInspector.TimelineOverview.ScrollWidthSizerStyleClassName = "scroll-width-sizer";
</span><del>-WebInspector.TimelineOverview.MinimumSecondsPerPixel = 0.001;
</del><span class="cx"> WebInspector.TimelineOverview.ScrollDeltaDenominator = 500;
</span><span class="cx">
</span><span class="cx"> WebInspector.TimelineOverview.Event = {
</span><span class="lines">@@ -133,18 +134,18 @@
</span><span class="cx">
</span><span class="cx"> get secondsPerPixel()
</span><span class="cx"> {
</span><del>- return this._secondsPerPixel;
</del><ins>+ return this._durationPerPixel;
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> set secondsPerPixel(x)
</span><span class="cx"> {
</span><del>- x = Math.max(WebInspector.TimelineOverview.MinimumSecondsPerPixel, x);
</del><ins>+ x = Math.min(this._maximumDurationPerPixel, Math.max(this._minimumDurationPerPixel, x));
</ins><span class="cx">
</span><del>- if (this._secondsPerPixel === x)
</del><ins>+ if (this._durationPerPixel === x)
</ins><span class="cx"> return;
</span><span class="cx">
</span><del>- this._secondsPerPixel = x;
- this._secondsPerPixelSetting.value = x;
</del><ins>+ this._durationPerPixel = x;
+ this._durationPerPixelSetting.value = x;
</ins><span class="cx">
</span><span class="cx"> this._needsLayout();
</span><span class="cx"> },
</span><span class="lines">@@ -186,7 +187,7 @@
</span><span class="cx"> console.assert(this._cachedScrollContainerWidth > 0);
</span><span class="cx"> }
</span><span class="cx">
</span><del>- return this._cachedScrollContainerWidth * this._secondsPerPixel;
</del><ins>+ return this._cachedScrollContainerWidth * this._durationPerPixel;
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> get selectionStartTime()
</span><span class="lines">@@ -211,6 +212,7 @@
</span><span class="cx"> set selectionDuration(x)
</span><span class="cx"> {
</span><span class="cx"> x = Math.max(WebInspector.TimelineRuler.MinimumSelectionTimeRange, x);
</span><ins>+
</ins><span class="cx"> this._timelineRuler.selectionEndTime = this._timelineRuler.selectionStartTime + x;
</span><span class="cx"> },
</span><span class="cx">
</span><span class="lines">@@ -268,7 +270,7 @@
</span><span class="cx">
</span><span class="cx"> // Calculate the required width based on the duration and seconds per pixel.
</span><span class="cx"> var duration = this._endTime - this._startTime;
</span><del>- var newWidth = Math.ceil(duration / this._secondsPerPixel);
</del><ins>+ var newWidth = Math.ceil(duration / this._durationPerPixel);
</ins><span class="cx">
</span><span class="cx"> // Update all relevant elements to the new required width.
</span><span class="cx"> this._updateElementWidth(this._scrollWidthSizer, newWidth);
</span><span class="lines">@@ -288,11 +290,11 @@
</span><span class="cx">
</span><span class="cx"> this._timelineRuler.zeroTime = this._startTime;
</span><span class="cx"> this._timelineRuler.startTime = scrollStartTime;
</span><del>- this._timelineRuler.secondsPerPixel = this._secondsPerPixel;
</del><ins>+ this._timelineRuler.secondsPerPixel = this._durationPerPixel;
</ins><span class="cx">
</span><span class="cx"> if (!this._dontUpdateScrollLeft) {
</span><span class="cx"> this._ignoreNextScrollEvent = true;
</span><del>- this._scrollContainerElement.scrollLeft = Math.ceil((scrollStartTime - this._startTime) / this._secondsPerPixel);
</del><ins>+ this._scrollContainerElement.scrollLeft = Math.ceil((scrollStartTime - this._startTime) / this._durationPerPixel);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this._timelineRuler.updateLayout();
</span><span class="lines">@@ -319,6 +321,19 @@
</span><span class="cx"> timelineOverviewGraph.updateLayoutIfNeeded();
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ // Protected
+
+ get timelineRuler()
+ {
+ return this._timelineRuler;
+ },
+
+ canShowTimeline: function(timeline)
+ {
+ // Implemented by subclasses.
+ console.error("Needs to be implemented by a subclass.");
+ },
+
</ins><span class="cx"> // Private
</span><span class="cx">
</span><span class="cx"> _updateElementWidth: function(element, newWidth)
</span><span class="lines">@@ -349,7 +364,7 @@
</span><span class="cx"> this._dontUpdateScrollLeft = true;
</span><span class="cx">
</span><span class="cx"> var scrollOffset = this._scrollContainerElement.scrollLeft;
</span><del>- this.scrollStartTime = this._startTime + (scrollOffset * this._secondsPerPixel);
</del><ins>+ this.scrollStartTime = this._startTime + (scrollOffset * this._durationPerPixel);
</ins><span class="cx">
</span><span class="cx"> // Force layout so we can update with the scroll position synchronously.
</span><span class="cx"> this.updateLayoutIfNeeded();
</span><span class="lines">@@ -376,13 +391,13 @@
</span><span class="cx">
</span><span class="cx"> // Remember the mouse position in time.
</span><span class="cx"> var mouseOffset = event.pageX - this._element.totalOffsetLeft;
</span><del>- var mousePositionTime = this._scrollStartTime + (mouseOffset * this._secondsPerPixel);
</del><ins>+ var mousePositionTime = this._scrollStartTime + (mouseOffset * this._durationPerPixel);
</ins><span class="cx"> var deviceDirection = event.webkitDirectionInvertedFromDevice ? 1 : -1;
</span><span class="cx">
</span><del>- this.secondsPerPixel += event.deltaY * (this._secondsPerPixel / WebInspector.TimelineOverview.ScrollDeltaDenominator) * deviceDirection;
</del><ins>+ this.secondsPerPixel += event.deltaY * (this._durationPerPixel / WebInspector.TimelineOverview.ScrollDeltaDenominator) * deviceDirection;
</ins><span class="cx">
</span><span class="cx"> // Center the zoom around the mouse based on the remembered mouse position time.
</span><del>- this.scrollStartTime = mousePositionTime - (mouseOffset * this._secondsPerPixel);
</del><ins>+ this.scrollStartTime = mousePositionTime - (mouseOffset * this._durationPerPixel);
</ins><span class="cx">
</span><span class="cx"> event.preventDefault();
</span><span class="cx"> event.stopPropagation();
</span><span class="lines">@@ -396,8 +411,7 @@
</span><span class="cx">
</span><span class="cx"> console.assert(timeline instanceof WebInspector.Timeline, timeline);
</span><span class="cx"> console.assert(!this._timelineOverviewGraphsMap.has(timeline), timeline);
</span><del>-
- if (!WebInspector.TimelineManager.shouldShowViewForTimeline(timeline))
</del><ins>+ if (!this.canShowTimeline(timeline))
</ins><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> var overviewGraph = new WebInspector.TimelineOverviewGraph(timeline);
</span><span class="lines">@@ -410,7 +424,7 @@
</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 (!WebInspector.TimelineManager.shouldShowViewForTimeline(timeline))
</del><ins>+ if (!this.canShowTimeline(timeline))
</ins><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> console.assert(this._timelineOverviewGraphsMap.has(timeline), timeline);
</span><span class="lines">@@ -422,7 +436,7 @@
</span><span class="cx">
</span><span class="cx"> _timeRangeSelectionChanged: function(event)
</span><span class="cx"> {
</span><del>- this._selectionStartTimeSetting.value = this.selectionStartTime - this._startTime;
</del><ins>+ this._selectionStartValueSetting.value = this.selectionStartTime - this._startTime;
</ins><span class="cx"> this._selectionDurationSetting.value = this.selectionDuration;
</span><span class="cx">
</span><span class="cx"> this.dispatchEventToListeners(WebInspector.TimelineOverview.Event.TimeRangeSelectionChanged);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordFramecss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.css (183468 => 183469)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.css 2015-04-28 13:04:38 UTC (rev 183468)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.css 2015-04-28 13:30:22 UTC (rev 183469)
</span><span class="lines">@@ -25,8 +25,9 @@
</span><span class="cx">
</span><span class="cx"> .timeline-record-frame {
</span><span class="cx"> position: absolute;
</span><del>- height: 36px;
</del><ins>+ height: 108px;
</ins><span class="cx"> min-width: 4px;
</span><ins>+ width: 4px;
</ins><span class="cx">
</span><span class="cx"> overflow: hidden;
</span><span class="cx">
</span><span class="lines">@@ -38,24 +39,11 @@
</span><span class="cx"> z-index: 1;
</span><span class="cx"> bottom: 1px;
</span><span class="cx"> min-width: 4px;
</span><ins>+ width: 100%;
</ins><span class="cx">
</span><del>- box-sizing: border-box;
-}
</del><ins>+ padding-left: 1px;
</ins><span class="cx">
</span><del>-.timeline-record-frame > .dropped {
- position: absolute;
- bottom: 1px;
- right: 0;
-
- min-width: 6px;
</del><span class="cx"> box-sizing: border-box;
</span><del>-
- background: repeating-linear-gradient(-45deg, white, white 2px, rgb(234, 234, 234) 2px, rgb(234, 234, 234) 4px);
-
- border-top-style: solid;
- border-right-style: solid;
- border-width: 1px;
- border-color: rgb(221, 221, 221);
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .timeline-record-frame > .frame > .duration {
</span><span class="lines">@@ -63,30 +51,21 @@
</span><span class="cx">
</span><span class="cx"> background-color: rgb(221, 221, 221);
</span><span class="cx">
</span><del>- border-color: rgb(176, 176, 176);
- border-style: none solid solid solid;
- border-width: 1px;
</del><ins>+ border-bottom: solid 1px rgb(245, 245, 245);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.timeline-record-frame > .frame > .duration:first-child {
- border-top-style: solid;
-}
-
</del><span class="cx"> .timeline-record-frame > .frame > .duration:last-child {
</span><span class="cx"> border-bottom-style: none;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .timeline-record-frame > .frame > .duration.timeline-record-type-network {
</span><del>- background-color: rgb(120, 176, 225);
- border-color: rgb(61, 147, 200);
</del><ins>+ background-color: rgb(61, 147, 200);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .timeline-record-frame > .frame > .duration.timeline-record-type-layout {
</span><del>- background-color: rgb(234, 153, 153);
- border-color: rgb(212, 108, 108);
</del><ins>+ background-color: rgb(212, 108, 108);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .timeline-record-frame > .frame > .duration.timeline-record-type-script {
</span><del>- background-color: rgb(190, 148, 233);
- border-color: rgb(153, 113, 185);
</del><ins>+ background-color: rgb(153, 113, 185);
</ins><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordFramejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.js (183468 => 183469)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.js 2015-04-28 13:04:38 UTC (rev 183468)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.js 2015-04-28 13:30:22 UTC (rev 183469)
</span><span class="lines">@@ -23,7 +23,7 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.TimelineRecordFrame = function(graphDataSource, records)
</del><ins>+WebInspector.TimelineRecordFrame = function(graphDataSource, record)
</ins><span class="cx"> {
</span><span class="cx"> // FIXME: Convert this to a WebInspector.Object subclass, and call super().
</span><span class="cx"> // WebInspector.Object.call(this);
</span><span class="lines">@@ -32,89 +32,16 @@
</span><span class="cx"> this._element.classList.add(WebInspector.TimelineRecordFrame.StyleClassName);
</span><span class="cx">
</span><span class="cx"> this._graphDataSource = graphDataSource;
</span><del>- this.records = records || [];
</del><ins>+ this._record = record || null;
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> // FIXME: Move to a WebInspector.Object subclass and we can remove this.
</span><span class="cx"> WebInspector.Object.deprecatedAddConstructorFunctions(WebInspector.TimelineRecordFrame);
</span><span class="cx">
</span><span class="cx"> WebInspector.TimelineRecordFrame.StyleClassName = "timeline-record-frame";
</span><del>-WebInspector.TimelineRecordFrame.SixtyFpsFrameBudget = 0.0166;
-WebInspector.TimelineRecordFrame.MaximumCombinedWidthPixels = 12;
</del><ins>+WebInspector.TimelineRecordFrame.MaximumWidthPixels = 16;
</ins><span class="cx"> WebInspector.TimelineRecordFrame.MinimumWidthPixels = 4;
</span><del>-WebInspector.TimelineRecordFrame.MinimumMarginPixels = 1;
</del><span class="cx">
</span><del>-WebInspector.TimelineRecordFrame.createCombinedFrames = function(records, secondsPerPixel, graphDataSource, createFrameCallback)
-{
- if (!records.length)
- return;
-
- var startTime = graphDataSource.startTime;
- var currentTime = graphDataSource.currentTime;
- var endTime = graphDataSource.endTime;
-
- var visibleRecords = [];
-
- for (var record of records) {
- if (isNaN(record.startTime))
- continue;
-
- // If this frame is completely before the bounds of the graph, skip this record.
- if (record.endTime < startTime)
- continue;
-
- // If this record is completely after the current time or end time, break out now.
- // Records are sorted, so all records after this will be beyond the current or end time too.
- if (record.startTime > currentTime || record.startTime > endTime)
- break;
-
- visibleRecords.push(record);
- }
-
- if (!visibleRecords.length)
- return;
-
- var maximumCombinedFrameDuration = secondsPerPixel * WebInspector.TimelineRecordFrame.MaximumCombinedWidthPixels;
- var minimumFrameDuration = secondsPerPixel * WebInspector.TimelineRecordFrame.MinimumWidthPixels;
- var minimumMargin = secondsPerPixel * WebInspector.TimelineRecordFrame.MinimumMarginPixels;
-
- var activeStartTime = NaN;
- var activeEndTime = NaN;
- var activeRecords = [];
-
- function createFrameFromActiveRecords()
- {
- createFrameCallback(activeRecords);
- activeRecords = [];
- activeStartTime = NaN;
- activeEndTime = NaN;
- }
-
- for (var record of visibleRecords) {
- // Check if the previous record is far enough away to create the frame.
- if (!isNaN(activeStartTime) && (activeStartTime + Math.max(activeEndTime - activeStartTime, minimumFrameDuration) + minimumMargin <= record.startTime))
- createFrameFromActiveRecords();
-
- // Check if active records exceeds the maximum combined frame width.
- if (!isNaN(activeStartTime) && (activeEndTime - activeStartTime) > maximumCombinedFrameDuration)
- createFrameFromActiveRecords();
-
- // If this is a new frame, peg the start time.
- if (isNaN(activeStartTime))
- activeStartTime = record.startTime;
-
- // Update the end time to be the maximum we encounter. endTime might be NaN, so "|| 0" to prevent Math.max from returning NaN.
- if (!isNaN(record.endTime))
- activeEndTime = Math.max(activeEndTime || 0, record.endTime);
-
- activeRecords.push(record);
- }
-
- // Create the active frame for the last record if needed.
- if (!isNaN(activeStartTime))
- createFrameCallback(activeRecords);
-};
-
</del><span class="cx"> WebInspector.TimelineRecordFrame.prototype = {
</span><span class="cx"> constructor: WebInspector.TimelineRecordFrame,
</span><span class="cx"> __proto__: WebInspector.Object.prototype,
</span><span class="lines">@@ -126,62 +53,34 @@
</span><span class="cx"> return this._element;
</span><span class="cx"> },
</span><span class="cx">
</span><del>- get duration()
</del><ins>+ get record()
</ins><span class="cx"> {
</span><del>- if (this.records.length === 0)
- return 0;
-
- return this.records.lastValue.endTime - this.records[0].startTime;
</del><ins>+ return this._record;
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- get records()
</del><ins>+ set record(record)
</ins><span class="cx"> {
</span><del>- return this._records;
</del><ins>+ this._record = record;
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- set records(records)
- {
- records = records || [];
-
- if (!(records instanceof Array))
- records = [records];
-
- this._records = records;
- },
-
</del><span class="cx"> refresh(graphDataSource)
</span><span class="cx"> {
</span><del>- if (!this.records || !this.records.length)
</del><ins>+ if (!this._record)
</ins><span class="cx"> return false;
</span><span class="cx">
</span><del>- var firstRecord = this.records[0];
- var frameStartTime = firstRecord.startTime;
</del><ins>+ var frameIndex = this._record.frameIndex;
+ var graphStartFrameIndex = Math.floor(graphDataSource.startTime);
+ var graphEndFrameIndex = graphDataSource.endTime;
</ins><span class="cx">
</span><del>- // If this frame has no time info, return early.
- if (isNaN(frameStartTime))
- return false;
-
- var graphStartTime = graphDataSource.startTime;
- var graphEndTime = graphDataSource.endTime;
- var graphCurrentTime = graphDataSource.currentTime;
-
- // If this frame is completely after the current time, return early.
- if (frameStartTime > graphCurrentTime)
- return false;
-
- var frameEndTime = this.records.lastValue.endTime;
-
</del><span class="cx"> // If this frame is completely before or after the bounds of the graph, return early.
</span><del>- if (frameEndTime < graphStartTime || frameStartTime > graphEndTime)
</del><ins>+ if (frameIndex < graphStartFrameIndex || frameIndex > graphEndFrameIndex)
</ins><span class="cx"> return false;
</span><span class="cx">
</span><del>- var graphDuration = graphEndTime - graphStartTime;
- var recordLeftPosition = (frameStartTime - graphStartTime) / graphDuration;
- this._updateElementPosition(this._element, recordLeftPosition, "left");
</del><ins>+ this._element.style.width = (1 / graphDataSource.timelineOverview.secondsPerPixel) + "px";
</ins><span class="cx">
</span><del>- var recordWidth = (frameEndTime - frameStartTime) / graphDuration;
- this._updateElementPosition(this._element, recordWidth, "width");
-
</del><ins>+ var graphDuration = graphDataSource.endTime - graphDataSource.startTime
+ var recordLeftPosition = (frameIndex - graphDataSource.startTime) / graphDuration;
+ this._updateElementPosition(this._element, recordLeftPosition, "left");
</ins><span class="cx"> this._updateChildElements(graphDataSource);
</span><span class="cx">
</span><span class="cx"> return true;
</span><span class="lines">@@ -193,72 +92,40 @@
</span><span class="cx"> {
</span><span class="cx"> this._element.removeChildren();
</span><span class="cx">
</span><del>- console.assert(this.records.length);
- if (!this.records.length)
</del><ins>+ console.assert(this._record);
+ if (!this._record)
</ins><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> if (graphDataSource.graphHeightSeconds === 0)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- // When combining multiple records into a frame, display the record with the longest duration rather than averaging.
- var displayRecord = this.records.reduce(function(previousValue, currentValue) {
- return currentValue.duration >= previousValue.duration ? currentValue : previousValue;
- });
-
</del><span class="cx"> var frameElement = document.createElement("div");
</span><span class="cx"> frameElement.classList.add("frame");
</span><span class="cx"> this._element.appendChild(frameElement);
</span><span class="cx">
</span><del>- var frameHeight = displayRecord.duration / graphDataSource.graphHeightSeconds;
</del><ins>+ var frameHeight = this._record.duration / graphDataSource.graphHeightSeconds;
</ins><span class="cx"> this._updateElementPosition(frameElement, frameHeight, "height");
</span><span class="cx">
</span><span class="cx"> function createDurationElement(duration, recordType)
</span><span class="cx"> {
</span><span class="cx"> var element = document.createElement("div");
</span><del>- this._updateElementPosition(element, duration / displayRecord.duration, "height");
</del><ins>+ this._updateElementPosition(element, duration / this._record.duration, "height");
</ins><span class="cx"> element.classList.add("duration");
</span><span class="cx"> if (recordType)
</span><span class="cx"> element.classList.add(recordType);
</span><span class="cx"> return element;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- if (displayRecord.durationRemainder > 0)
- frameElement.appendChild(createDurationElement.call(this, displayRecord.durationRemainder));
</del><ins>+ if (this._record.durationRemainder > 0)
+ frameElement.appendChild(createDurationElement.call(this, this._record.durationRemainder));
</ins><span class="cx">
</span><span class="cx"> for (var type in WebInspector.TimelineRecord.Type) {
</span><span class="cx"> var recordType = WebInspector.TimelineRecord.Type[type];
</span><del>- var duration = displayRecord.durationForRecords(recordType);
</del><ins>+ var duration = this._record.durationForRecords(recordType);
</ins><span class="cx"> if (duration === 0)
</span><span class="cx"> continue;
</span><span class="cx"> frameElement.appendChild(createDurationElement.call(this, duration, recordType));
</span><span class="cx"> }
</span><del>-
- // Add "includes-dropped" style class if multiple records are being combined in the frame,
- // and one of those records exceeds the 60 fps frame budget.
- if (this.records.length > 1 && displayRecord.duration > WebInspector.TimelineRecordFrame.SixtyFpsFrameBudget)
- frameElement.classList.add("includes-dropped");
-
- // If the display record is the last combined record and also exceeds the 60 fps budget,
- // add a "dropped" element to the right of the frame.
- var frameWidth = 1;
- var secondsPerPixel = this._graphDataSource.timelineOverview.secondsPerPixel;
- var minimumRecordDuration = secondsPerPixel * WebInspector.TimelineRecordFrame.MinimumWidthPixels * 2; // Combine minimum widths of the frame element and dropped element.
-
- if (displayRecord === this.records.lastValue && displayRecord.duration > WebInspector.TimelineRecordFrame.SixtyFpsFrameBudget && displayRecord.duration >= minimumRecordDuration) {
- var overflowDuration = displayRecord.duration - WebInspector.TimelineRecordFrame.SixtyFpsFrameBudget;
- var droppedElementWidth = overflowDuration / displayRecord.duration;
- frameWidth -= droppedElementWidth;
-
- var droppedElement = document.createElement("div");
- droppedElement.className = "dropped";
-
- this._element.appendChild(droppedElement);
-
- this._updateElementPosition(droppedElement, frameHeight, "height");
- this._updateElementPosition(droppedElement, droppedElementWidth, "width");
- }
-
- this._updateElementPosition(frameElement, frameWidth, "width");
</del><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> _updateElementPosition(element, newPosition, property)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordingContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js (183468 => 183469)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js 2015-04-28 13:04:38 UTC (rev 183468)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js 2015-04-28 13:30:22 UTC (rev 183469)
</span><span class="lines">@@ -36,10 +36,15 @@
</span><span class="cx">
</span><span class="cx"> this.element.classList.add(WebInspector.TimelineRecordingContentView.StyleClassName);
</span><span class="cx">
</span><del>- this._timelineOverview = new WebInspector.TimelineOverview(this._recording);
- this._timelineOverview.addEventListener(WebInspector.TimelineOverview.Event.TimeRangeSelectionChanged, this._timeRangeSelectionChanged, this);
- this.element.appendChild(this._timelineOverview.element);
</del><ins>+ this._linearTimelineOverview = new WebInspector.LinearTimelineOverview(this._recording);
+ this._linearTimelineOverview.addEventListener(WebInspector.TimelineOverview.Event.TimeRangeSelectionChanged, this._timeRangeSelectionChanged, this);
</ins><span class="cx">
</span><ins>+ this._renderingFrameTimelineOverview = new WebInspector.RenderingFrameTimelineOverview(this._recording);
+ this._renderingFrameTimelineOverview.addEventListener(WebInspector.TimelineOverview.Event.TimeRangeSelectionChanged, this._timeRangeSelectionChanged, this);
+
+ this._currentTimelineOverview = this._linearTimelineOverview;
+ this.element.appendChild(this._currentTimelineOverview.element);
+
</ins><span class="cx"> this._contentViewContainer = new WebInspector.ContentViewContainer();
</span><span class="cx"> this._contentViewContainer.addEventListener(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange, this._currentContentViewDidChange, this);
</span><span class="cx"> this.element.appendChild(this._contentViewContainer.element);
</span><span class="lines">@@ -54,7 +59,7 @@
</span><span class="cx"> this._clearTimelineNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._clearTimeline, this);
</span><span class="cx">
</span><span class="cx"> this._overviewTimelineView = new WebInspector.OverviewTimelineView(recording, {timelineSidebarPanel: this._timelineSidebarPanel});
</span><del>- this._overviewTimelineView.secondsPerPixel = this._timelineOverview.secondsPerPixel;
</del><ins>+ this._overviewTimelineView.secondsPerPixel = this._linearTimelineOverview.secondsPerPixel;
</ins><span class="cx">
</span><span class="cx"> this._timelineViewMap = new Map;
</span><span class="cx"> this._pathComponentMap = new Map;
</span><span class="lines">@@ -166,7 +171,7 @@
</span><span class="cx">
</span><span class="cx"> shown: function()
</span><span class="cx"> {
</span><del>- this._timelineOverview.shown();
</del><ins>+ this._currentTimelineOverview.shown();
</ins><span class="cx"> this._contentViewContainer.shown();
</span><span class="cx"> this._clearTimelineNavigationItem.enabled = this._recording.isWritable();
</span><span class="cx">
</span><span class="lines">@@ -176,7 +181,7 @@
</span><span class="cx">
</span><span class="cx"> hidden: function()
</span><span class="cx"> {
</span><del>- this._timelineOverview.hidden();
</del><ins>+ this._currentTimelineOverview.hidden();
</ins><span class="cx"> this._contentViewContainer.hidden();
</span><span class="cx">
</span><span class="cx"> if (this._updating)
</span><span class="lines">@@ -216,7 +221,7 @@
</span><span class="cx">
</span><span class="cx"> updateLayout: function()
</span><span class="cx"> {
</span><del>- this._timelineOverview.updateLayoutForResize();
</del><ins>+ this._currentTimelineOverview.updateLayoutForResize();
</ins><span class="cx">
</span><span class="cx"> var currentContentView = this._contentViewContainer.currentContentView;
</span><span class="cx"> if (currentContentView)
</span><span class="lines">@@ -237,7 +242,6 @@
</span><span class="cx"> restoreFromCookie: function(cookie)
</span><span class="cx"> {
</span><span class="cx"> var timelineType = cookie[WebInspector.TimelineRecordingContentView.SelectedTimelineTypeCookieKey];
</span><del>-
</del><span class="cx"> if (timelineType === WebInspector.TimelineRecordingContentView.OverviewTimelineViewCookieValue)
</span><span class="cx"> this.showOverviewTimelineView();
</span><span class="cx"> else
</span><span class="lines">@@ -257,10 +261,27 @@
</span><span class="cx"> if (this.currentTimelineView && !this.currentTimelineView.matchTreeElementAgainstCustomFilters(treeElement))
</span><span class="cx"> return false;
</span><span class="cx">
</span><del>- var startTime = this._timelineOverview.selectionStartTime;
- var endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
</del><ins>+ var startTime = this._currentTimelineOverview.selectionStartTime;
+ var endTime = startTime + this._currentTimelineOverview.selectionDuration;
</ins><span class="cx"> var currentTime = this._currentTime || this._recording.startTime;
</span><span class="cx">
</span><ins>+ if (this._timelineSidebarPanel.viewMode === WebInspector.TimelineSidebarPanel.ViewMode.RenderingFrames) {
+ var timeline = this._getRenderingFrameTimeline();
+ console.assert(timeline);
+
+ if (timeline && timeline.records.length) {
+ var startIndex = Math.floor(startTime);
+ if (startIndex >= timeline.records.length)
+ return false;
+
+ var endIndex = Math.min(Math.floor(endTime), timeline.records.length - 1);
+ console.assert(startIndex <= endIndex, startIndex);
+
+ startTime = timeline.records[startIndex].startTime;
+ endTime = timeline.records[endIndex].endTime;
+ }
+ }
+
</ins><span class="cx"> function checkTimeBounds(itemStartTime, itemEndTime)
</span><span class="cx"> {
</span><span class="cx"> itemStartTime = itemStartTime || currentTime;
</span><span class="lines">@@ -312,16 +333,32 @@
</span><span class="cx">
</span><span class="cx"> _currentContentViewDidChange: function(event)
</span><span class="cx"> {
</span><ins>+ var newTimelineOverview = this._linearTimelineOverview;
</ins><span class="cx"> var timelineView = this.currentTimelineView;
</span><span class="cx"> if (timelineView) {
</span><span class="cx"> this._timelineSidebarPanel.contentTreeOutline = timelineView.navigationSidebarTreeOutline;
</span><span class="cx"> this._timelineSidebarPanel.contentTreeOutlineLabel = timelineView.navigationSidebarTreeOutlineLabel;
</span><span class="cx">
</span><del>- timelineView.startTime = this._timelineOverview.selectionStartTime;
- timelineView.endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
</del><ins>+ if (timelineView.representedObject.type === WebInspector.TimelineRecord.Type.RenderingFrame)
+ newTimelineOverview = this._renderingFrameTimelineOverview;
+
+ timelineView.startTime = newTimelineOverview.selectionStartTime;
+ timelineView.endTime = newTimelineOverview.selectionStartTime + newTimelineOverview.selectionDuration;
</ins><span class="cx"> timelineView.currentTime = this._currentTime;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ if (newTimelineOverview !== this._currentTimelineOverview) {
+ this._currentTimelineOverview.hidden();
+
+ this.element.insertBefore(newTimelineOverview.element, this._currentTimelineOverview.element);
+ this.element.removeChild(this._currentTimelineOverview.element);
+
+ this._currentTimelineOverview = newTimelineOverview;
+ this._currentTimelineOverview.shown();
+
+ this._updateTimelineOverviewHeight();
+ }
+
</ins><span class="cx"> this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
</span><span class="cx"> this.dispatchEventToListeners(WebInspector.ContentView.Event.NavigationItemsDidChange);
</span><span class="cx"> },
</span><span class="lines">@@ -375,10 +412,10 @@
</span><span class="cx"> _updateTimes: function(startTime, currentTime, endTime)
</span><span class="cx"> {
</span><span class="cx"> if (this._startTimeNeedsReset && !isNaN(startTime)) {
</span><del>- var selectionOffset = this._timelineOverview.selectionStartTime - this._timelineOverview.startTime;
</del><ins>+ var selectionOffset = this._linearTimelineOverview.selectionStartTime - this._linearTimelineOverview.startTime;
</ins><span class="cx">
</span><del>- this._timelineOverview.startTime = startTime;
- this._timelineOverview.selectionStartTime = startTime + selectionOffset;
</del><ins>+ this._linearTimelineOverview.startTime = startTime;
+ this._linearTimelineOverview.selectionStartTime = startTime + selectionOffset;
</ins><span class="cx">
</span><span class="cx"> this._overviewTimelineView.zeroTime = startTime;
</span><span class="cx"> for (var timelineView of this._timelineViewMap.values())
</span><span class="lines">@@ -387,17 +424,21 @@
</span><span class="cx"> delete this._startTimeNeedsReset;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- this._timelineOverview.endTime = Math.max(endTime, currentTime);
</del><ins>+ this._linearTimelineOverview.endTime = Math.max(endTime, currentTime);
</ins><span class="cx">
</span><span class="cx"> this._currentTime = currentTime;
</span><del>- this._timelineOverview.currentTime = currentTime;
</del><ins>+ this._linearTimelineOverview.currentTime = currentTime;
</ins><span class="cx"> if (this.currentTimelineView)
</span><span class="cx"> this.currentTimelineView.currentTime = currentTime;
</span><span class="cx">
</span><ins>+ var timeline = this._getRenderingFrameTimeline();
+ if (timeline)
+ this._renderingFrameTimelineOverview.endTime = timeline.records.length;
+
</ins><span class="cx"> this._timelineSidebarPanel.updateFilter();
</span><span class="cx">
</span><span class="cx"> // Force a layout now since we are already in an animation frame and don't need to delay it until the next.
</span><del>- this._timelineOverview.updateLayoutIfNeeded();
</del><ins>+ this._currentTimelineOverview.updateLayoutIfNeeded();
</ins><span class="cx"> if (this.currentTimelineView)
</span><span class="cx"> this.currentTimelineView.updateLayoutIfNeeded();
</span><span class="cx"> },
</span><span class="lines">@@ -489,6 +530,39 @@
</span><span class="cx"> this._recording.reset();
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ _updateTimelineOverviewHeight: function()
+ {
+ const timelineHeight = 36;
+ const renderingFramesTimelineHeight = 108;
+ const rulerHeight = 29;
+
+ var overviewHeight;
+
+ if (this.currentTimelineView && this.currentTimelineView.representedObject.type === WebInspector.TimelineRecord.Type.RenderingFrame)
+ overviewHeight = renderingFramesTimelineHeight;
+ else {
+ var timelineCount = this._timelineViewMap.size;
+ if (this._getRenderingFrameTimeline())
+ timelineCount--;
+
+ overviewHeight = timelineCount * timelineHeight;
+ }
+
+ var styleValue = (rulerHeight + overviewHeight) + "px";
+ this._currentTimelineOverview.element.style.height = styleValue;
+ 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;
+ },
+
</ins><span class="cx"> _timelineAdded: function(timelineOrEvent)
</span><span class="cx"> {
</span><span class="cx"> var timeline = timelineOrEvent;
</span><span class="lines">@@ -496,9 +570,6 @@
</span><span class="cx"> timeline = timelineOrEvent.data.timeline;
</span><span class="cx">
</span><span class="cx"> console.assert(timeline instanceof WebInspector.Timeline, timeline);
</span><del>- if (!WebInspector.TimelineManager.shouldShowViewForTimeline(timeline))
- return;
-
</del><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><span class="lines">@@ -514,9 +585,6 @@
</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 (!WebInspector.TimelineManager.shouldShowViewForTimeline(timeline))
- return;
-
</del><span class="cx"> console.assert(this._timelineViewMap.has(timeline), timeline);
</span><span class="cx">
</span><span class="cx"> var timelineView = this._timelineViewMap.take(timeline);
</span><span class="lines">@@ -540,11 +608,7 @@
</span><span class="cx"> previousPathComponent = pathComponent;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- var timelineCount = this._timelineViewMap.size;
- const timelineHeight = 36;
- const extraOffset = 22;
- this._timelineOverview.element.style.height = (timelineCount * timelineHeight + extraOffset) + "px";
- this._contentViewContainer.element.style.top = (timelineCount * timelineHeight + extraOffset) + "px";
</del><ins>+ this._updateTimelineOverviewHeight();
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> _recordingReset: function(event)
</span><span class="lines">@@ -563,7 +627,8 @@
</span><span class="cx"> this._recording.removeEventListener(WebInspector.TimelineRecording.Event.TimesUpdated, this._recordingTimesUpdated, this);
</span><span class="cx"> this._waitingToResetCurrentTime = false;
</span><span class="cx">
</span><del>- this._timelineOverview.reset();
</del><ins>+ this._linearTimelineOverview.reset();
+ this._renderingFrameTimelineOverview.reset();
</ins><span class="cx"> this._overviewTimelineView.reset();
</span><span class="cx"> for (var timelineView of this._timelineViewMap.values())
</span><span class="cx"> timelineView.reset();
</span><span class="lines">@@ -580,10 +645,11 @@
</span><span class="cx"> _timeRangeSelectionChanged: function(event)
</span><span class="cx"> {
</span><span class="cx"> if (this.currentTimelineView) {
</span><del>- this.currentTimelineView.startTime = this._timelineOverview.selectionStartTime;
- this.currentTimelineView.endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
</del><ins>+ this.currentTimelineView.startTime = this._currentTimelineOverview.selectionStartTime;
+ this.currentTimelineView.endTime = this._currentTimelineOverview.selectionStartTime + this._currentTimelineOverview.selectionDuration;
</ins><span class="cx">
</span><del>- WebInspector.renderingFrameDetailsSidebarPanel.updateRangeSelection(this.currentTimelineView.startTime, this.currentTimelineView.endTime);
</del><ins>+ if (this.currentTimelineView.representedObject.type === WebInspector.TimelineRecord.Type.RenderingFrame)
+ WebInspector.renderingFrameDetailsSidebarPanel.updateRangeSelection(this.currentTimelineView.startTime, this.currentTimelineView.endTime);
</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></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRulercss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css (183468 => 183469)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css 2015-04-28 13:04:38 UTC (rev 183468)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css 2015-04-28 13:30:22 UTC (rev 183469)
</span><span class="lines">@@ -44,6 +44,10 @@
</span><span class="cx"> top: 0;
</span><span class="cx"> left: 0;
</span><span class="cx"> right: 0;
</span><ins>+ height: 29px;
+}
+
+body.mac-platform.legacy .timeline-ruler > .header {
</ins><span class="cx"> height: 22px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -58,7 +62,7 @@
</span><span class="cx">
</span><span class="cx"> .timeline-ruler > .header > .divider > .label {
</span><span class="cx"> position: absolute;
</span><del>- top: 5px;
</del><ins>+ top: 8px;
</ins><span class="cx"> right: 5px;
</span><span class="cx"> font-size: 9px;
</span><span class="cx"> color: rgb(128, 128, 128);
</span><span class="lines">@@ -129,11 +133,15 @@
</span><span class="cx"> .timeline-ruler > .selection-drag {
</span><span class="cx"> position: absolute;
</span><span class="cx"> top: 0;
</span><del>- height: 22px;
</del><ins>+ height: 29px;
</ins><span class="cx"> cursor: -webkit-grab;
</span><span class="cx"> pointer-events: all;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+body.mac-platform.legacy .timeline-ruler > .selection-drag {
+ height: 22px;
+}
+
</ins><span class="cx"> .timeline-ruler > .selection-drag:active {
</span><span class="cx"> cursor: -webkit-grabbing;
</span><span class="cx"> }
</span><span class="lines">@@ -142,7 +150,7 @@
</span><span class="cx"> position: absolute;
</span><span class="cx"> top: 0;
</span><span class="cx"> width: 8px;
</span><del>- height: 21px;
</del><ins>+ height: 28px;
</ins><span class="cx"> border-radius: 5px;
</span><span class="cx"> background-color: rgb(164, 164, 164);
</span><span class="cx"> border: 1px solid white;
</span><span class="lines">@@ -151,6 +159,10 @@
</span><span class="cx"> z-index: 15;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+body.mac-platform.legacy .timeline-ruler > .selection-handle {
+ height: 21px;
+}
+
</ins><span class="cx"> .timeline-ruler > .selection-handle.left {
</span><span class="cx"> -webkit-transform: translateX(-4px);
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRulerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.js (183468 => 183469)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.js 2015-04-28 13:04:38 UTC (rev 183468)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.js 2015-04-28 13:30:22 UTC (rev 183469)
</span><span class="lines">@@ -49,6 +49,7 @@
</span><span class="cx"> this._endTimePinned = false;
</span><span class="cx"> this._allowsClippedLabels = false;
</span><span class="cx"> this._allowsTimeRangeSelection = false;
</span><ins>+ this._formatLabelCallback = null;
</ins><span class="cx">
</span><span class="cx"> this._markerElementMap = new Map;
</span><span class="cx"> };
</span><span class="lines">@@ -100,6 +101,18 @@
</span><span class="cx"> this._needsLayout();
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ set formatLabelCallback(x)
+ {
+ console.assert(typeof x === "function" || !x, x);
+
+ if (this._formatLabelCallback === x)
+ return;
+
+ this._formatLabelCallback = x || null;
+
+ this._needsLayout();
+ },
+
</ins><span class="cx"> get allowsTimeRangeSelection()
</span><span class="cx"> {
</span><span class="cx"> return this._allowsTimeRangeSelection;
</span><span class="lines">@@ -403,7 +416,7 @@
</span><span class="cx">
</span><span class="cx"> console.assert(dividerElement.firstChild.classList.contains(WebInspector.TimelineRuler.DividerLabelElementStyleClassName));
</span><span class="cx">
</span><del>- dividerElement.firstChild.textContent = isNaN(dividerTime) ? "" : Number.secondsToString(dividerTime - this._zeroTime, true);
</del><ins>+ dividerElement.firstChild.textContent = isNaN(dividerTime) ? "" : this._formatDividerLabelText(dividerTime - this._zeroTime);
</ins><span class="cx"> dividerElement = dividerElement.nextSibling;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -592,6 +605,14 @@
</span><span class="cx"> this._dispatchTimeRangeSelectionChangedEvent();
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ _formatDividerLabelText: function(value)
+ {
+ if (this._formatLabelCallback)
+ return this._formatLabelCallback(value);
+
+ return Number.secondsToString(value, true);
+ },
+
</ins><span class="cx"> _dispatchTimeRangeSelectionChangedEvent: function()
</span><span class="cx"> {
</span><span class="cx"> delete this._timeRangeSelectionChanged;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineSidebarPanelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css (183468 => 183469)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css 2015-04-28 13:04:38 UTC (rev 183468)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css 2015-04-28 13:30:22 UTC (rev 183469)
</span><span class="lines">@@ -116,12 +116,16 @@
</span><span class="cx"> top: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.panel.timeline .navigation-bar.timelines-view {
+ justify-content: flex-end;
+}
+
</ins><span class="cx"> .sidebar > .panel.navigation.timeline > .title-bar {
</span><span class="cx"> position: absolute;
</span><span class="cx"> left: 0;
</span><span class="cx"> right: 0;
</span><span class="cx">
</span><del>- height: 22px;
</del><ins>+ height: 29px;
</ins><span class="cx">
</span><span class="cx"> border-bottom: 1px solid rgb(179, 179, 179);
</span><span class="cx"> background-color: rgb(242, 242, 242);
</span><span class="lines">@@ -140,6 +144,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> body.mac-platform.legacy .sidebar > .panel.navigation.timeline > .title-bar {
</span><ins>+ height: 22px;
+
</ins><span class="cx"> background-color: transparent;
</span><span class="cx"> background-image: linear-gradient(to bottom, rgb(238, 240, 244), rgb(224, 226, 230));
</span><span class="cx"> text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
</span><span class="lines">@@ -147,8 +153,24 @@
</span><span class="cx">
</span><span class="cx"> .sidebar > .panel.navigation.timeline > .title-bar.timelines {
</span><span class="cx"> top: 29px;
</span><ins>+ padding: 8px 9px;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+.sidebar > .panel.navigation.timeline > .navigation-bar-container {
+ position: absolute;
+ top: 29px;
+ left: 0;
+ right: 0;
+}
+
+.sidebar > .panel.navigation.timeline > .navigation-bar-container > .navigation-bar {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ align-content: center;
+}
+
</ins><span class="cx"> body.mac-platform.legacy .sidebar > .panel.navigation.timeline > .title-bar.timelines {
</span><span class="cx"> top: 22px;
</span><span class="cx"> }
</span><span class="lines">@@ -156,16 +178,16 @@
</span><span class="cx"> .sidebar > .panel.navigation.timeline > .title-bar.timeline-events {
</span><span class="cx"> height: 23px;
</span><span class="cx"> border-top: 1px solid rgb(179, 179, 179);
</span><del>- top: 159px;
</del><ins>+ top: 166px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> body.mac-platform.legacy .sidebar > .panel.navigation.timeline > .title-bar.timeline-events {
</span><del>- top: 152px;
</del><ins>+ top: 159px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .sidebar > .panel.navigation.timeline > .timelines-content {
</span><span class="cx"> position: absolute;
</span><del>- top: 51px;
</del><ins>+ top: 58px;
</ins><span class="cx"> height: 108px;
</span><span class="cx"> left: 0;
</span><span class="cx"> right: 0;
</span><span class="lines">@@ -232,11 +254,11 @@
</span><span class="cx">
</span><span class="cx"> .sidebar > .panel.navigation.timeline > .content,
</span><span class="cx"> .sidebar > .panel.navigation.timeline > .empty-content-placeholder {
</span><del>- top: 182px;
</del><ins>+ top: 189px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> body.mac-platform.legacy .sidebar > .panel.navigation.timeline > :matches(.content, .empty-content-placeholder) {
</span><del>- top: 175px;
</del><ins>+ top: 182px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing > .content {
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js (183468 => 183469)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js 2015-04-28 13:04:38 UTC (rev 183468)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js 2015-04-28 13:30:22 UTC (rev 183469)
</span><span class="lines">@@ -34,6 +34,7 @@
</span><span class="cx"> this._timelineEventsTitleBarElement = document.createElement("div");
</span><span class="cx"> this._timelineEventsTitleBarElement.classList.add(WebInspector.TimelineSidebarPanel.TitleBarStyleClass);
</span><span class="cx"> this._timelineEventsTitleBarElement.classList.add(WebInspector.TimelineSidebarPanel.TimelineEventsTitleBarStyleClass);
</span><ins>+
</ins><span class="cx"> this.element.insertBefore(this._timelineEventsTitleBarElement, this.element.firstChild);
</span><span class="cx">
</span><span class="cx"> this.contentTreeOutlineLabel = "";
</span><span class="lines">@@ -44,6 +45,8 @@
</span><span class="cx">
</span><span class="cx"> this._displayedRecording = null;
</span><span class="cx"> this._displayedContentView = null;
</span><ins>+ this._viewMode = null;
+ this._previousTimelineSelection = null;
</ins><span class="cx">
</span><span class="cx"> // Maintain an invisible tree outline containing tree elements for all recordings.
</span><span class="cx"> // The visible recording's tree element is selected when the content view changes.
</span><span class="lines">@@ -62,12 +65,27 @@
</span><span class="cx">
</span><span class="cx"> this._timelineTreeElementMap = new Map;
</span><span class="cx">
</span><del>- var timelinesTitleBarElement = document.createElement("div");
- timelinesTitleBarElement.textContent = WebInspector.UIString("Timelines");
- timelinesTitleBarElement.classList.add(WebInspector.TimelineSidebarPanel.TitleBarStyleClass);
- timelinesTitleBarElement.classList.add(WebInspector.TimelineSidebarPanel.TimelinesTitleBarStyleClass);
- this.element.insertBefore(timelinesTitleBarElement, this.element.firstChild);
</del><ins>+ // COMPATIBILITY (iOS 8): TimelineAgent.EventType.RenderingFrame did not exist.
+ this._renderingFramesSupported = window.TimelineAgent && TimelineAgent.EventType.RenderingFrame;
</ins><span class="cx">
</span><ins>+ if (this._renderingFramesSupported) {
+ var timelinesNavigationItem = new WebInspector.RadioButtonNavigationItem(WebInspector.TimelineSidebarPanel.ViewMode.Timelines, WebInspector.UIString("Timelines"))
+ var renderingFramesNavigationItem = new WebInspector.RadioButtonNavigationItem(WebInspector.TimelineSidebarPanel.ViewMode.RenderingFrames, WebInspector.UIString("Rendering Frames"))
+ this._viewModeNavigationBar = new WebInspector.NavigationBar(null, [timelinesNavigationItem, renderingFramesNavigationItem], "tablist");
+ this._viewModeNavigationBar.addEventListener(WebInspector.NavigationBar.Event.NavigationItemSelected, this._viewModeSelected, this);
+
+ var container = document.createElement("div");
+ container.className = "navigation-bar-container";
+ container.appendChild(this._viewModeNavigationBar.element);
+ this.element.insertBefore(container, this.element.firstChild);
+ } else {
+ var timelinesTitleBarElement = document.createElement("div");
+ timelinesTitleBarElement.textContent = WebInspector.UIString("Timelines");
+ timelinesTitleBarElement.classList.add(WebInspector.TimelineSidebarPanel.TitleBarStyleClass);
+ timelinesTitleBarElement.classList.add(WebInspector.TimelineSidebarPanel.TimelinesTitleBarStyleClass);
+ this.element.insertBefore(timelinesTitleBarElement, this.element.firstChild);
+ }
+
</ins><span class="cx"> var statusBarElement = this._statusBarElement = document.createElement("div");
</span><span class="cx"> statusBarElement.classList.add(WebInspector.TimelineSidebarPanel.StatusBarStyleClass);
</span><span class="cx"> this.element.insertBefore(statusBarElement, this.element.firstChild);
</span><span class="lines">@@ -85,16 +103,16 @@
</span><span class="cx">
</span><span class="cx"> WebInspector.showReplayInterfaceSetting.addEventListener(WebInspector.Setting.Event.Changed, this._updateReplayInterfaceVisibility, this);
</span><span class="cx">
</span><del>- // We always create a navigation bar; its visibility is controlled by WebInspector.showReplayInterfaceSetting.
- this._navigationBar = new WebInspector.NavigationBar;
- this.element.appendChild(this._navigationBar.element);
</del><ins>+ // We always create a replay navigation bar; its visibility is controlled by WebInspector.showReplayInterfaceSetting.
+ this._replayNavigationBar = new WebInspector.NavigationBar;
+ this.element.appendChild(this._replayNavigationBar.element);
</ins><span class="cx">
</span><span class="cx"> var toolTip = WebInspector.UIString("Begin Capturing");
</span><span class="cx"> var altToolTip = WebInspector.UIString("End Capturing");
</span><span class="cx"> this._replayCaptureButtonItem = new WebInspector.ActivateButtonNavigationItem("replay-capture", toolTip, altToolTip, "Images/Circle.svg", 16, 16);
</span><span class="cx"> this._replayCaptureButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._replayCaptureButtonClicked, this);
</span><span class="cx"> this._replayCaptureButtonItem.enabled = true;
</span><del>- this._navigationBar.addNavigationItem(this._replayCaptureButtonItem);
</del><ins>+ this._replayNavigationBar.addNavigationItem(this._replayCaptureButtonItem);
</ins><span class="cx">
</span><span class="cx"> var pauseImage, resumeImage;
</span><span class="cx"> if (WebInspector.Platform.isLegacyMacOS) {
</span><span class="lines">@@ -110,13 +128,13 @@
</span><span class="cx"> this._replayPauseResumeButtonItem = new WebInspector.ToggleButtonNavigationItem("replay-pause-resume", toolTip, altToolTip, resumeImage.src, pauseImage.src, pauseImage.width, pauseImage.height, true);
</span><span class="cx"> this._replayPauseResumeButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._replayPauseResumeButtonClicked, this);
</span><span class="cx"> this._replayPauseResumeButtonItem.enabled = false;
</span><del>- this._navigationBar.addNavigationItem(this._replayPauseResumeButtonItem);
</del><ins>+ this._replayNavigationBar.addNavigationItem(this._replayPauseResumeButtonItem);
</ins><span class="cx">
</span><span class="cx"> WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.CaptureStarted, this._captureStarted, this);
</span><span class="cx"> WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.CaptureStopped, this._captureStopped, this);
</span><span class="cx">
</span><span class="cx"> this._statusBarElement.oncontextmenu = this._contextMenuNavigationBarOrStatusBar.bind(this);
</span><del>- this._navigationBar.element.oncontextmenu = this._contextMenuNavigationBarOrStatusBar.bind(this);
</del><ins>+ this._replayNavigationBar.element.oncontextmenu = this._contextMenuNavigationBarOrStatusBar.bind(this);
</ins><span class="cx"> this._updateReplayInterfaceVisibility();
</span><span class="cx">
</span><span class="cx"> WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordingCreated, this._recordingCreated, this);
</span><span class="lines">@@ -137,6 +155,11 @@
</span><span class="cx"> this.contentBrowser.showContentView(this._displayedContentView);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ get viewMode()
+ {
+ return this._viewMode;
+ }
+
</ins><span class="cx"> showDefaultContentView()
</span><span class="cx"> {
</span><span class="cx"> if (this._displayedContentView)
</span><span class="lines">@@ -239,17 +262,28 @@
</span><span class="cx">
</span><span class="cx"> this._displayedContentView.showOverviewTimelineView();
</span><span class="cx"> this.contentBrowser.showContentView(this._displayedContentView);
</span><ins>+
+ var selectedByUser = false;
+ this._changeViewMode(this._viewModeForTimeline(null), selectedByUser);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> showTimelineViewForTimeline(timeline)
</span><span class="cx"> {
</span><span class="cx"> console.assert(timeline instanceof WebInspector.Timeline, timeline);
</span><del>- console.assert(this._timelineTreeElementMap.has(timeline), "Cannot show timeline because it does not belong to the shown recording.", timeline);
</del><ins>+ console.assert(this._displayedRecording.timelines.has(timeline.type), "Cannot show timeline because it does not belong to the shown recording.", timeline.type);
</ins><span class="cx">
</span><del>- // Defer showing the relevant timeline to the onselect handler of the timelines tree element.
- var wasSelectedByUser = true;
- var shouldSuppressOnSelect = false;
- this._timelineTreeElementMap.get(timeline).select(true, wasSelectedByUser, shouldSuppressOnSelect, true);
</del><ins>+ if (this._timelineTreeElementMap.has(timeline)) {
+ // Defer showing the relevant timeline to the onselect handler of the timelines tree element.
+ var wasSelectedByUser = true;
+ var shouldSuppressOnSelect = false;
+ this._timelineTreeElementMap.get(timeline).select(true, wasSelectedByUser, shouldSuppressOnSelect, true);
+ } else {
+ this._displayedContentView.showTimelineViewForTimeline(timeline);
+ this.contentBrowser.showContentView(this._displayedContentView);
+ }
+
+ var selectedByUser = false;
+ this._changeViewMode(this._viewModeForTimeline(timeline), selectedByUser);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Protected
</span><span class="lines">@@ -288,11 +322,15 @@
</span><span class="cx">
</span><span class="cx"> cookie[WebInspector.TimelineSidebarPanel.ShowingTimelineRecordingContentViewCookieKey] = this.contentBrowser.currentContentView instanceof WebInspector.TimelineRecordingContentView;
</span><span class="cx">
</span><del>- var selectedTreeElement = this._timelinesTreeOutline.selectedTreeElement;
- if (selectedTreeElement)
- cookie[WebInspector.TimelineSidebarPanel.SelectedTimelineViewIdentifierCookieKey] = selectedTreeElement.representedObject.type;
- else
- cookie[WebInspector.TimelineSidebarPanel.SelectedTimelineViewIdentifierCookieKey] = WebInspector.TimelineSidebarPanel.OverviewTimelineIdentifierCookieValue;
</del><ins>+ if (this._viewMode === WebInspector.TimelineSidebarPanel.ViewMode.RenderingFrames)
+ cookie[WebInspector.TimelineSidebarPanel.SelectedTimelineViewIdentifierCookieKey] = WebInspector.TimelineRecord.Type.RenderingFrame;
+ else {
+ var selectedTreeElement = this._timelinesTreeOutline.selectedTreeElement;
+ if (selectedTreeElement)
+ cookie[WebInspector.TimelineSidebarPanel.SelectedTimelineViewIdentifierCookieKey] = selectedTreeElement.representedObject.type;
+ else
+ cookie[WebInspector.TimelineSidebarPanel.SelectedTimelineViewIdentifierCookieKey] = WebInspector.TimelineSidebarPanel.OverviewTimelineIdentifierCookieValue;
+ }
</ins><span class="cx">
</span><span class="cx"> super.saveStateToCookie(cookie);
</span><span class="cx"> }
</span><span class="lines">@@ -311,9 +349,10 @@
</span><span class="cx"> this._restoredShowingTimelineRecordingContentView = cookie[WebInspector.TimelineSidebarPanel.ShowingTimelineRecordingContentViewCookieKey];
</span><span class="cx">
</span><span class="cx"> var selectedTimelineViewIdentifier = cookie[WebInspector.TimelineSidebarPanel.SelectedTimelineViewIdentifierCookieKey];
</span><del>- if (!selectedTimelineViewIdentifier || selectedTimelineViewIdentifier === WebInspector.TimelineSidebarPanel.OverviewTimelineIdentifierCookieValue)
- this.showTimelineOverview();
- else if (this._displayedRecording.timelines.has(selectedTimelineViewIdentifier))
</del><ins>+ if (selectedTimelineViewIdentifier === WebInspector.TimelineRecord.Type.RenderingFrame && !this._renderingFramesSupported)
+ selectedTimelineViewIdentifier = null;
+
+ if (selectedTimelineViewIdentifier && this._displayedRecording.timelines.has(selectedTimelineViewIdentifier))
</ins><span class="cx"> this.showTimelineViewForTimeline(this._displayedRecording.timelines.get(selectedTimelineViewIdentifier));
</span><span class="cx"> else
</span><span class="cx"> this.showTimelineOverview();
</span><span class="lines">@@ -409,6 +448,7 @@
</span><span class="cx"> console.assert(recording instanceof WebInspector.TimelineRecording, recording);
</span><span class="cx">
</span><span class="cx"> var oldRecording = this._displayedRecording || null;
</span><ins>+
</ins><span class="cx"> if (oldRecording) {
</span><span class="cx"> oldRecording.removeEventListener(WebInspector.TimelineRecording.Event.TimelineAdded, this._timelineAdded, this);
</span><span class="cx"> oldRecording.removeEventListener(WebInspector.TimelineRecording.Event.TimelineRemoved, this._timelineRemoved, this);
</span><span class="lines">@@ -442,11 +482,11 @@
</span><span class="cx"> timeline = timelineOrEvent.data.timeline;
</span><span class="cx">
</span><span class="cx"> console.assert(timeline instanceof WebInspector.Timeline, timeline);
</span><del>- if (!WebInspector.TimelineManager.shouldShowViewForTimeline(timeline))
</del><ins>+ console.assert(!this._timelineTreeElementMap.has(timeline), timeline);
+
+ if (this._viewModeForTimeline(timeline) !== WebInspector.TimelineSidebarPanel.ViewMode.Timelines)
</ins><span class="cx"> return;
</span><span class="cx">
</span><del>- console.assert(!this._timelineTreeElementMap.has(timeline), timeline);
-
</del><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="cx"> wrappedSVGDocument(platformImagePath("CloseLarge.svg"), WebInspector.TimelineSidebarPanel.CloseButtonStyleClass, tooltip, function(element) {
</span><span class="lines">@@ -464,7 +504,7 @@
</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 (!WebInspector.TimelineManager.shouldShowViewForTimeline(timeline))
</del><ins>+ if (this._viewModeForTimeline(timeline) !== WebInspector.TimelineSidebarPanel.ViewMode.Timelines)
</ins><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> console.assert(this._timelineTreeElementMap.has(timeline), timeline);
</span><span class="lines">@@ -491,9 +531,10 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> var timelineHeight = 36;
</span><del>- var eventTitleBarOffset = 51;
- var contentElementOffset = 74;
</del><ins>+ var eventTitleBarOffset = 58;
+ var contentElementOffset = 81;
</ins><span class="cx"> var timelineCount = this._timelineTreeElementMap.size;
</span><ins>+
</ins><span class="cx"> this._timelinesContentContainerElement.style.height = (timelineHeight * timelineCount) + "px";
</span><span class="cx"> this._timelineEventsTitleBarElement.style.top = (timelineHeight * timelineCount + eventTitleBarOffset) + "px";
</span><span class="cx"> this.contentElement.style.top = (timelineHeight * timelineCount + contentElementOffset) + "px";
</span><span class="lines">@@ -535,6 +576,54 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ _viewModeSelected(event)
+ {
+ console.assert(event.target.selectedNavigationItem);
+ if (!event.target.selectedNavigationItem)
+ return;
+
+ var selectedNavigationItem = event.target.selectedNavigationItem;
+ var selectedByUser = true;
+ this._changeViewMode(selectedNavigationItem.identifier, selectedByUser);
+ }
+
+ _viewModeForTimeline(timeline)
+ {
+ if (timeline && timeline.type === WebInspector.TimelineRecord.Type.RenderingFrame)
+ return WebInspector.TimelineSidebarPanel.ViewMode.RenderingFrames;
+
+ return WebInspector.TimelineSidebarPanel.ViewMode.Timelines;
+ }
+
+ _changeViewMode(mode, selectedByUser)
+ {
+ if (!this._renderingFramesSupported || this._viewMode === mode)
+ return;
+
+ this._viewMode = mode;
+ this._viewModeNavigationBar.selectedNavigationItem = this._viewMode;
+
+ if (this._viewMode === WebInspector.TimelineSidebarPanel.ViewMode.Timelines)
+ this._timelinesTreeOutline.element.classList.remove(WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementHiddenStyleClassName);
+ else
+ this._timelinesTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementHiddenStyleClassName);
+
+ if (!selectedByUser)
+ return;
+
+ if (this._viewMode === WebInspector.TimelineSidebarPanel.ViewMode.RenderingFrames) {
+ if (this._timelinesTreeOutline.selectedTreeElement)
+ this._previousTimelineSelection = this._timelinesTreeOutline.selectedTreeElement.representedObject;
+
+ console.assert(this._displayedRecording);
+ this.showTimelineViewForTimeline(this._displayedRecording.timelines.get(WebInspector.TimelineRecord.Type.RenderingFrame));
+ } else if (this._previousTimelineSelection) {
+ this.showTimelineViewForTimeline(this._previousTimelineSelection);
+ this._previousTimelineSelection = null;
+ } else
+ this.showTimelineOverview();
+ }
+
</ins><span class="cx"> // These methods are only used when ReplayAgent is available.
</span><span class="cx">
</span><span class="cx"> _updateReplayInterfaceVisibility()
</span><span class="lines">@@ -542,7 +631,7 @@
</span><span class="cx"> var shouldShowReplayInterface = window.ReplayAgent && WebInspector.showReplayInterfaceSetting.value;
</span><span class="cx">
</span><span class="cx"> this._statusBarElement.classList.toggle(WebInspector.TimelineSidebarPanel.HiddenStyleClassName, shouldShowReplayInterface);
</span><del>- this._navigationBar.element.classList.toggle(WebInspector.TimelineSidebarPanel.HiddenStyleClassName, !shouldShowReplayInterface);
</del><ins>+ this._replayNavigationBar.element.classList.toggle(WebInspector.TimelineSidebarPanel.HiddenStyleClassName, !shouldShowReplayInterface);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _contextMenuNavigationBarOrStatusBar()
</span><span class="lines">@@ -609,6 +698,11 @@
</span><span class="cx"> }
</span><span class="cx"> };
</span><span class="cx">
</span><ins>+WebInspector.TimelineSidebarPanel.ViewMode = {
+ Timelines: "timeline-sidebar-panel-view-mode-timelines",
+ RenderingFrames: "timeline-sidebar-panel-view-mode-frames"
+};
+
</ins><span class="cx"> WebInspector.TimelineSidebarPanel.HiddenStyleClassName = "hidden";
</span><span class="cx"> WebInspector.TimelineSidebarPanel.StatusBarStyleClass = "status-bar";
</span><span class="cx"> WebInspector.TimelineSidebarPanel.RecordGlyphStyleClass = "record-glyph";
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIWebInspectorUIvcxprojWebInspectorUIvcxproj"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj (183468 => 183469)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj 2015-04-28 13:04:38 UTC (rev 183468)
+++ trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj 2015-04-28 13:30:22 UTC (rev 183469)
</span><span class="lines">@@ -695,6 +695,7 @@
</span><span class="cx"> <None Include="..\UserInterface\Legacy\6.0\InspectorBackendCommands.js" />
</span><span class="cx"> <None Include="..\UserInterface\Legacy\7.0\InspectorBackendCommands.js" />
</span><span class="cx"> <None Include="..\UserInterface\Legacy\8.0\InspectorBackendCommands.js" />
</span><ins>+ <None Include="..\UserInterface\LinearTimelineOverview.js" />
</ins><span class="cx"> <None Include="..\UserInterface\LoadInspectorBackendCommands.js" />
</span><span class="cx"> <None Include="..\UserInterface\LoadLocalizedStrings.js" />
</span><span class="cx"> <None Include="..\UserInterface\LogContentView.css" />
</span><span class="lines">@@ -739,6 +740,7 @@
</span><span class="cx"> <None Include="..\UserInterface\RemoteObject.js" />
</span><span class="cx"> <None Include="..\UserInterface\RenderingFrameDetailsSidebarPanel.js" />
</span><span class="cx"> <None Include="..\UserInterface\RenderingFrameTimeDataGridNode.js" />
</span><ins>+ <None Include="..\UserInterface\RenderingFrameTimelineOverview.js" />
</ins><span class="cx"> <None Include="..\UserInterface\RenderingFrameTimelineOverviewGraph.css" />
</span><span class="cx"> <None Include="..\UserInterface\RenderingFrameTimelineOverviewGraph.js" />
</span><span class="cx"> <None Include="..\UserInterface\RenderingFrameTimelineRecord.js" />
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIWebInspectorUIvcxprojWebInspectorUIvcxprojfilters"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters (183468 => 183469)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters 2015-04-28 13:04:38 UTC (rev 183468)
+++ trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters 2015-04-28 13:30:22 UTC (rev 183469)
</span><span class="lines">@@ -654,6 +654,9 @@
</span><span class="cx"> <None Include="..\UserInterface\LayoutTimelineRecord.js">
</span><span class="cx"> <Filter>UserInterface</Filter>
</span><span class="cx"> </None>
</span><ins>+ <None Include="..\UserInterface\LinearTimelineOverview.js">
+ <Filter>UserInterface</Filter>
+ </None>
</ins><span class="cx"> <None Include="..\UserInterface\LoadInspectorBackendCommands.js">
</span><span class="cx"> <Filter>UserInterface</Filter>
</span><span class="cx"> </None>
</span><span class="lines">@@ -786,6 +789,9 @@
</span><span class="cx"> <None Include="..\UserInterface\RenderingFrameTimelineDataGridNode.js">
</span><span class="cx"> <Filter>UserInterface</Filter>
</span><span class="cx"> </None>
</span><ins>+ <None Include="..\UserInterface\RenderingFrameTimelineOverview.js">
+ <Filter>UserInterface</Filter>
+ </None>
</ins><span class="cx"> <None Include="..\UserInterface\RenderingFrameTimelineOverviewGraph.css">
</span><span class="cx"> <Filter>UserInterface</Filter>
</span><span class="cx"> </None>
</span></span></pre>
</div>
</div>
</body>
</html>