<!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>[196606] 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/196606">196606</a></dd>
<dt>Author</dt> <dd>mattbaker@apple.com</dd>
<dt>Date</dt> <dd>2016-02-15 15:57:25 -0800 (Mon, 15 Feb 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: eliminate the linear and rendering frames TimelineOverview subclasses
https://bugs.webkit.org/show_bug.cgi?id=154000
<rdar://problem/24553105>
Reviewed by Timothy Hatcher.
This patch eliminates the TimelineOverview subclasses, and moves logic for switching between
a time-based or frame-based graph into the overview itself. The values of the overview's start
time, current time, and end time now match the values in the timeline recording regardless of the
current view mode. When viewing the rendering frames graph, the recording times are ignored and
all frames are included. The overview maintains separate zoom level and ruler selection settings
for each view mode.
* UserInterface/Main.html:
* UserInterface/Views/LinearTimelineOverview.js: Removed.
* UserInterface/Views/RenderingFrameTimelineOverview.js: Removed.
Removed TimelineOverview subclasses.
* UserInterface/Views/RenderingFrameTimelineOverviewGraph.js:
(WebInspector.RenderingFrameTimelineOverviewGraph.prototype.get height):
Set FPS graph height to 108 pixels.
* UserInterface/Views/TimelineOverview.css:
(.timeline-overview:not(.frames) > .graphs-container > .timeline-overview-graph:nth-child(even)):
(.timeline-overview:not(.frames) > .graphs-container > .timeline-overview-graph:not(:first-child)):
(.timeline-overview > .graphs-container > .timeline-overview-graph:nth-child(even)): Deleted.
(.timeline-overview > .graphs-container > .timeline-overview-graph:not(:first-child)): Deleted.
Disable alternating graph styles when showing FPS instrument.
* UserInterface/Views/TimelineOverview.js:
(WebInspector.TimelineOverview):
Create separate settings for timelines and FPS view modes.
(WebInspector.TimelineOverview.prototype.get viewMode):
(WebInspector.TimelineOverview.prototype.set viewMode):
(WebInspector.TimelineOverview.prototype.set startTime):
Adjust the current ruler selection when start time changes. Not necessary
when showing the FPS instrument, which doesn't have a start time.
(WebInspector.TimelineOverview.prototype.get secondsPerPixel):
(WebInspector.TimelineOverview.prototype.set secondsPerPixel):
Now a wrapper around the corresponding view mode setting.
(WebInspector.TimelineOverview.prototype.set pixelAlignDuration):
(WebInspector.TimelineOverview.prototype.get scrollStartTime):
(WebInspector.TimelineOverview.prototype.set scrollStartTime):
Now a wrapper around the corresponding view mode setting.
(WebInspector.TimelineOverview.prototype.get visibleDuration):
(WebInspector.TimelineOverview.prototype.get height):
Return the sum height of all visible overview graphs.
(WebInspector.TimelineOverview.prototype.shown):
Show overview graphs for the current view mode.
(WebInspector.TimelineOverview.prototype.hidden):
(WebInspector.TimelineOverview.prototype.reset):
(WebInspector.TimelineOverview.prototype.recordWasFiltered):
(WebInspector.TimelineOverview.prototype.selectRecord):
(WebInspector.TimelineOverview.prototype.updateLayoutIfNeeded):
(WebInspector.TimelineOverview.prototype.layout):
Layout for both view modes is largely identical, and differs only in the treatment
of the overview's start time, current time, and end time. Time-based instruments
use time values from the recording, while the FPS instrument has a fixed start time
of zero, and a current and end time pinned to the last rendering frame.
(WebInspector.TimelineOverview.prototype._handleScrollEvent):
(WebInspector.TimelineOverview.prototype._handleWheelEvent):
(WebInspector.TimelineOverview._handleGestureStart):
(WebInspector.TimelineOverview.prototype._handleGestureChange):
(WebInspector.TimelineOverview.prototype._instrumentAdded):
(WebInspector.TimelineOverview.prototype._instrumentRemoved):
(WebInspector.TimelineOverview.prototype._timelineRulerMouseClicked):
(WebInspector.TimelineOverview.prototype._timeRangeSelectionChanged):
Save the selection for the current view mode.
(WebInspector.TimelineOverview.prototype._recordSelected):
(WebInspector.TimelineOverview.prototype._resetSelection.reset):
(WebInspector.TimelineOverview.prototype._resetSelection):
(WebInspector.TimelineOverview.prototype._canShowTimelineType):
(WebInspector.TimelineOverview.prototype._viewModeDidChange):
Sets zoom level, ruler selection, and graph visibility based on current view mode.
(WebInspector.TimelineOverview.prototype._createViewModeSettings):
Helper function for creating an object to track the zoom level and ruler
selection of each view mode.
(WebInspector.TimelineOverview.prototype.get _currentSettings):
Internal getter for retrieving the settings for the current view mode.
(WebInspector.TimelineOverview.prototype.canShowTimeline): Deleted.
Not needed now that the overview contains all timelines.
* UserInterface/Views/TimelineOverviewGraph.js:
(WebInspector.TimelineOverviewGraph):
(WebInspector.TimelineOverviewGraph.prototype.shown):
(WebInspector.TimelineOverviewGraph.prototype.hidden):
Toggle CSS hidden class.
* UserInterface/Views/TimelineRecordFrame.js:
No need to query offsetHeight now that TimelineOverviewGraph has a height property.
* UserInterface/Views/TimelineRecordingContentView.js:
(WebInspector.TimelineRecordingContentView):
Create a single timeline overview.
(WebInspector.TimelineRecordingContentView.prototype.get timelineOverviewHeight):
(WebInspector.TimelineRecordingContentView.prototype.shown):
(WebInspector.TimelineRecordingContentView.prototype.hidden):
(WebInspector.TimelineRecordingContentView.prototype.recordWasFiltered):
(WebInspector.TimelineRecordingContentView.prototype._currentContentViewDidChange):
Update the timeline overview's mode based on the current timeline view.
(WebInspector.TimelineRecordingContentView.prototype._contentViewSelectionPathComponentDidChange):
(WebInspector.TimelineRecordingContentView.prototype._updateTimes):
Removed special handling for the FPS overview.
Removed selection start time adjustment, which is now handled internally by TimelineOverview.
(WebInspector.TimelineRecordingContentView.prototype._updateTimelineOverviewHeight):
(WebInspector.TimelineRecordingContentView.prototype._recordingReset):
(WebInspector.TimelineRecordingContentView.prototype._timeRangeSelectionChanged):
(WebInspector.TimelineRecordingContentView.prototype._updateFrameSelection):
* UserInterface/Views/TimelineSidebarPanel.js:
(WebInspector.TimelineSidebarPanel):
(WebInspector.TimelineSidebarPanel.prototype.matchTreeElementAgainstCustomFilters):
(WebInspector.TimelineSidebarPanel.prototype.saveStateToCookie):
(WebInspector.TimelineSidebarPanel.prototype._renderingFrameTimelineTimesUpdated):
(WebInspector.TimelineSidebarPanel.prototype._contentBrowserCurrentContentViewDidChange):
Refresh the view mode when the content view changes.
(WebInspector.TimelineSidebarPanel.prototype._recordingSelected):
(WebInspector.TimelineSidebarPanel.prototype._viewModeSelected):
(WebInspector.TimelineSidebarPanel.prototype._viewModeForTimeline):
(WebInspector.TimelineSidebarPanel.prototype._updateViewModeIfNeeded):
Sync the tree outline, frames chart, and navigation bar with the current view mode.
(WebInspector.TimelineSidebarPanel.prototype.shown):
Refreshing the frame selection is unnecessary. It's updated by the recording content
view whenever the ruler selection changes.
(WebInspector.TimelineSidebarPanel.prototype.get viewMode): Deleted.
No longer public, since the timeline overview now owns the view mode. Internally the sidebar
still tracks the current state so it can determine when the value has changed.
(WebInspector.TimelineSidebarPanel.prototype.showTimelineOverview):
(WebInspector.TimelineSidebarPanel.prototype.showTimelineViewForTimeline):
The sidebar should only be synced to the overview after the content view has changed.
(WebInspector.TimelineSidebarPanel.prototype.updateFrameSelection):
Removed unnecessary assertion.
(WebInspector.TimelineSidebarPanel.prototype._changeViewMode): Deleted.
Replaced by _updateViewModeIfNeeded.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineOverviewGraphjs">trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.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="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewGraphjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverviewGraph.js</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="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js</a></li>
</ul>
<h3>Removed 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 (196605 => 196606)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2016-02-15 23:57:22 UTC (rev 196605)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-02-15 23:57:25 UTC (rev 196606)
</span><span class="lines">@@ -1,3 +1,140 @@
</span><ins>+2016-02-15 Matt Baker <mattbaker@apple.com>
+
+ Web Inspector: eliminate the linear and rendering frames TimelineOverview subclasses
+ https://bugs.webkit.org/show_bug.cgi?id=154000
+ <rdar://problem/24553105>
+
+ Reviewed by Timothy Hatcher.
+
+ This patch eliminates the TimelineOverview subclasses, and moves logic for switching between
+ a time-based or frame-based graph into the overview itself. The values of the overview's start
+ time, current time, and end time now match the values in the timeline recording regardless of the
+ current view mode. When viewing the rendering frames graph, the recording times are ignored and
+ all frames are included. The overview maintains separate zoom level and ruler selection settings
+ for each view mode.
+
+ * UserInterface/Main.html:
+ * UserInterface/Views/LinearTimelineOverview.js: Removed.
+ * UserInterface/Views/RenderingFrameTimelineOverview.js: Removed.
+ Removed TimelineOverview subclasses.
+
+ * UserInterface/Views/RenderingFrameTimelineOverviewGraph.js:
+ (WebInspector.RenderingFrameTimelineOverviewGraph.prototype.get height):
+ Set FPS graph height to 108 pixels.
+
+ * UserInterface/Views/TimelineOverview.css:
+ (.timeline-overview:not(.frames) > .graphs-container > .timeline-overview-graph:nth-child(even)):
+ (.timeline-overview:not(.frames) > .graphs-container > .timeline-overview-graph:not(:first-child)):
+ (.timeline-overview > .graphs-container > .timeline-overview-graph:nth-child(even)): Deleted.
+ (.timeline-overview > .graphs-container > .timeline-overview-graph:not(:first-child)): Deleted.
+ Disable alternating graph styles when showing FPS instrument.
+
+ * UserInterface/Views/TimelineOverview.js:
+ (WebInspector.TimelineOverview):
+ Create separate settings for timelines and FPS view modes.
+ (WebInspector.TimelineOverview.prototype.get viewMode):
+ (WebInspector.TimelineOverview.prototype.set viewMode):
+ (WebInspector.TimelineOverview.prototype.set startTime):
+ Adjust the current ruler selection when start time changes. Not necessary
+ when showing the FPS instrument, which doesn't have a start time.
+ (WebInspector.TimelineOverview.prototype.get secondsPerPixel):
+ (WebInspector.TimelineOverview.prototype.set secondsPerPixel):
+ Now a wrapper around the corresponding view mode setting.
+ (WebInspector.TimelineOverview.prototype.set pixelAlignDuration):
+ (WebInspector.TimelineOverview.prototype.get scrollStartTime):
+ (WebInspector.TimelineOverview.prototype.set scrollStartTime):
+ Now a wrapper around the corresponding view mode setting.
+ (WebInspector.TimelineOverview.prototype.get visibleDuration):
+ (WebInspector.TimelineOverview.prototype.get height):
+ Return the sum height of all visible overview graphs.
+ (WebInspector.TimelineOverview.prototype.shown):
+ Show overview graphs for the current view mode.
+ (WebInspector.TimelineOverview.prototype.hidden):
+ (WebInspector.TimelineOverview.prototype.reset):
+ (WebInspector.TimelineOverview.prototype.recordWasFiltered):
+ (WebInspector.TimelineOverview.prototype.selectRecord):
+ (WebInspector.TimelineOverview.prototype.updateLayoutIfNeeded):
+ (WebInspector.TimelineOverview.prototype.layout):
+ Layout for both view modes is largely identical, and differs only in the treatment
+ of the overview's start time, current time, and end time. Time-based instruments
+ use time values from the recording, while the FPS instrument has a fixed start time
+ of zero, and a current and end time pinned to the last rendering frame.
+ (WebInspector.TimelineOverview.prototype._handleScrollEvent):
+ (WebInspector.TimelineOverview.prototype._handleWheelEvent):
+ (WebInspector.TimelineOverview._handleGestureStart):
+ (WebInspector.TimelineOverview.prototype._handleGestureChange):
+ (WebInspector.TimelineOverview.prototype._instrumentAdded):
+ (WebInspector.TimelineOverview.prototype._instrumentRemoved):
+ (WebInspector.TimelineOverview.prototype._timelineRulerMouseClicked):
+ (WebInspector.TimelineOverview.prototype._timeRangeSelectionChanged):
+ Save the selection for the current view mode.
+ (WebInspector.TimelineOverview.prototype._recordSelected):
+ (WebInspector.TimelineOverview.prototype._resetSelection.reset):
+ (WebInspector.TimelineOverview.prototype._resetSelection):
+ (WebInspector.TimelineOverview.prototype._canShowTimelineType):
+ (WebInspector.TimelineOverview.prototype._viewModeDidChange):
+ Sets zoom level, ruler selection, and graph visibility based on current view mode.
+ (WebInspector.TimelineOverview.prototype._createViewModeSettings):
+ Helper function for creating an object to track the zoom level and ruler
+ selection of each view mode.
+ (WebInspector.TimelineOverview.prototype.get _currentSettings):
+ Internal getter for retrieving the settings for the current view mode.
+ (WebInspector.TimelineOverview.prototype.canShowTimeline): Deleted.
+ Not needed now that the overview contains all timelines.
+
+ * UserInterface/Views/TimelineOverviewGraph.js:
+ (WebInspector.TimelineOverviewGraph):
+ (WebInspector.TimelineOverviewGraph.prototype.shown):
+ (WebInspector.TimelineOverviewGraph.prototype.hidden):
+ Toggle CSS hidden class.
+
+ * UserInterface/Views/TimelineRecordFrame.js:
+ No need to query offsetHeight now that TimelineOverviewGraph has a height property.
+
+ * UserInterface/Views/TimelineRecordingContentView.js:
+ (WebInspector.TimelineRecordingContentView):
+ Create a single timeline overview.
+ (WebInspector.TimelineRecordingContentView.prototype.get timelineOverviewHeight):
+ (WebInspector.TimelineRecordingContentView.prototype.shown):
+ (WebInspector.TimelineRecordingContentView.prototype.hidden):
+ (WebInspector.TimelineRecordingContentView.prototype.recordWasFiltered):
+ (WebInspector.TimelineRecordingContentView.prototype._currentContentViewDidChange):
+ Update the timeline overview's mode based on the current timeline view.
+ (WebInspector.TimelineRecordingContentView.prototype._contentViewSelectionPathComponentDidChange):
+ (WebInspector.TimelineRecordingContentView.prototype._updateTimes):
+ Removed special handling for the FPS overview.
+ Removed selection start time adjustment, which is now handled internally by TimelineOverview.
+ (WebInspector.TimelineRecordingContentView.prototype._updateTimelineOverviewHeight):
+ (WebInspector.TimelineRecordingContentView.prototype._recordingReset):
+ (WebInspector.TimelineRecordingContentView.prototype._timeRangeSelectionChanged):
+ (WebInspector.TimelineRecordingContentView.prototype._updateFrameSelection):
+
+ * UserInterface/Views/TimelineSidebarPanel.js:
+ (WebInspector.TimelineSidebarPanel):
+ (WebInspector.TimelineSidebarPanel.prototype.matchTreeElementAgainstCustomFilters):
+ (WebInspector.TimelineSidebarPanel.prototype.saveStateToCookie):
+ (WebInspector.TimelineSidebarPanel.prototype._renderingFrameTimelineTimesUpdated):
+ (WebInspector.TimelineSidebarPanel.prototype._contentBrowserCurrentContentViewDidChange):
+ Refresh the view mode when the content view changes.
+ (WebInspector.TimelineSidebarPanel.prototype._recordingSelected):
+ (WebInspector.TimelineSidebarPanel.prototype._viewModeSelected):
+ (WebInspector.TimelineSidebarPanel.prototype._viewModeForTimeline):
+ (WebInspector.TimelineSidebarPanel.prototype._updateViewModeIfNeeded):
+ Sync the tree outline, frames chart, and navigation bar with the current view mode.
+ (WebInspector.TimelineSidebarPanel.prototype.shown):
+ Refreshing the frame selection is unnecessary. It's updated by the recording content
+ view whenever the ruler selection changes.
+ (WebInspector.TimelineSidebarPanel.prototype.get viewMode): Deleted.
+ No longer public, since the timeline overview now owns the view mode. Internally the sidebar
+ still tracks the current state so it can determine when the value has changed.
+ (WebInspector.TimelineSidebarPanel.prototype.showTimelineOverview):
+ (WebInspector.TimelineSidebarPanel.prototype.showTimelineViewForTimeline):
+ The sidebar should only be synced to the overview after the content view has changed.
+ (WebInspector.TimelineSidebarPanel.prototype.updateFrameSelection):
+ Removed unnecessary assertion.
+ (WebInspector.TimelineSidebarPanel.prototype._changeViewMode): Deleted.
+ Replaced by _updateViewModeIfNeeded.
+
</ins><span class="cx"> 2016-02-15 Timothy Hatcher <timothy@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: Show inherited CSS variables in the Style sidebar
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (196605 => 196606)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2016-02-15 23:57:22 UTC (rev 196605)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2016-02-15 23:57:25 UTC (rev 196606)
</span><span class="lines">@@ -518,7 +518,6 @@
</span><span class="cx"> <script src="Views/LayoutTimelineOverviewGraph.js"></script>
</span><span class="cx"> <script src="Views/LayoutTimelineView.js"></script>
</span><span class="cx"> <script src="Views/LineChart.js"></script>
</span><del>- <script src="Views/LinearTimelineOverview.js"></script>
</del><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/MemoryCategoryView.js"></script>
</span><span class="lines">@@ -548,7 +547,6 @@
</span><span class="cx"> <script src="Views/QuickConsoleNavigationBar.js"></script>
</span><span class="cx"> <script src="Views/RadioButtonNavigationItem.js"></script>
</span><span class="cx"> <script src="Views/RenderingFrameTimelineDataGridNode.js"></script>
</span><del>- <script src="Views/RenderingFrameTimelineOverview.js"></script>
</del><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></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsLinearTimelineOverviewjs"></a>
<div class="delfile"><h4>Deleted: trunk/Source/WebInspectorUI/UserInterface/Views/LinearTimelineOverview.js (196605 => 196606)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/LinearTimelineOverview.js 2016-02-15 23:57:22 UTC (rev 196605)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LinearTimelineOverview.js 2016-02-15 23:57:25 UTC (rev 196606)
</span><span class="lines">@@ -1,45 +0,0 @@
</span><del>-/*
- * Copyright (C) 2015 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- * notice, this list of conditions and the following disclaimer in the
- * documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.LinearTimelineOverview = class LinearTimelineOverview extends WebInspector.TimelineOverview
-{
- constructor(timelineRecording)
- {
- var defaultSettingsValues = {
- durationPerPixel: 0.01,
- selectionStartValue: 0,
- selectionDuration: 15
- };
-
- super("linear", timelineRecording, 0.0001, 2, defaultSettingsValues);
- }
-
- // Protected
-
- canShowTimeline(timeline)
- {
- return timeline.type !== WebInspector.TimelineRecord.Type.RenderingFrame;
- }
-};
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineOverviewjs"></a>
<div class="delfile"><h4>Deleted: trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverview.js (196605 => 196606)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverview.js 2016-02-15 23:57:22 UTC (rev 196605)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverview.js 2016-02-15 23:57:25 UTC (rev 196606)
</span><span class="lines">@@ -1,59 +0,0 @@
</span><del>-/*
- * Copyright (C) 2015 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- * notice, this list of conditions and the following disclaimer in the
- * documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.RenderingFrameTimelineOverview = class RenderingFrameTimelineOverview extends WebInspector.TimelineOverview
-{
- constructor(timelineRecording)
- {
- var minimumDurationPerPixel = 1 / WebInspector.TimelineRecordFrame.MaximumWidthPixels;
- var maximumDurationPerPixel = 1 / WebInspector.TimelineRecordFrame.MinimumWidthPixels;
- var defaultSettingsValues = {
- durationPerPixel: minimumDurationPerPixel,
- selectionStartValue: 0,
- selectionDuration: 100
- };
-
- super("frames", timelineRecording, minimumDurationPerPixel, maximumDurationPerPixel, defaultSettingsValues);
-
- this.pixelAlignDuration = true;
- this.timelineRuler.minimumSelectionDuration = 1;
- this.timelineRuler.snapInterval = 1;
- this.timelineRuler.formatLabelCallback = function(value) {
- return value.toFixed(0);
- };
- }
-
- // Protected
-
- get height()
- {
- return 108;
- }
-
- canShowTimeline(timeline)
- {
- return timeline.type === WebInspector.TimelineRecord.Type.RenderingFrame;
- }
-};
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineOverviewGraphjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.js (196605 => 196606)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.js 2016-02-15 23:57:22 UTC (rev 196605)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.js 2016-02-15 23:57:25 UTC (rev 196606)
</span><span class="lines">@@ -95,6 +95,11 @@
</span><span class="cx">
</span><span class="cx"> // Protected
</span><span class="cx">
</span><ins>+ get height()
+ {
+ return 108;
+ }
+
</ins><span class="cx"> layout()
</span><span class="cx"> {
</span><span class="cx"> if (!this._renderingFrameTimeline.records.length)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css (196605 => 196606)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css 2016-02-15 23:57:22 UTC (rev 196605)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css 2016-02-15 23:57:25 UTC (rev 196606)
</span><span class="lines">@@ -90,12 +90,12 @@
</span><span class="cx"> height: 36px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.timeline-overview > .graphs-container > .timeline-overview-graph:nth-child(even) {
</del><ins>+.timeline-overview:not(.frames) > .graphs-container > .timeline-overview-graph:nth-child(even) {
</ins><span class="cx"> background-color: hsl(0, 0%, 96%);
</span><span class="cx"> background-clip: padding-box;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.timeline-overview > .graphs-container > .timeline-overview-graph:not(:first-child) {
</del><ins>+.timeline-overview:not(.frames) > .graphs-container > .timeline-overview-graph:not(:first-child) {
</ins><span class="cx"> border-top: 1px solid hsla(0, 0%, 0%, 0.09);
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js (196605 => 196606)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js 2016-02-15 23:57:22 UTC (rev 196605)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js 2016-02-15 23:57:25 UTC (rev 196606)
</span><span class="lines">@@ -25,19 +25,27 @@
</span><span class="cx">
</span><span class="cx"> WebInspector.TimelineOverview = class TimelineOverview extends WebInspector.View
</span><span class="cx"> {
</span><del>- constructor(identifier, timelineRecording, minimumDurationPerPixel, maximumDurationPerPixel, defaultSettingsValues)
</del><ins>+ constructor(timelineRecording)
</ins><span class="cx"> {
</span><span class="cx"> super();
</span><span class="cx">
</span><span class="cx"> console.assert(timelineRecording instanceof WebInspector.TimelineRecording);
</span><span class="cx">
</span><ins>+ this._timelinesViewModeSettings = this._createViewModeSettings(WebInspector.TimelineOverview.ViewMode.Timelines, 0.0001, 60, 0.01, 0, 15);
+
+ if (WebInspector.FPSInstrument.supported()) {
+ let minimumDurationPerPixel = 1 / WebInspector.TimelineRecordFrame.MaximumWidthPixels;
+ let maximumDurationPerPixel = 1 / WebInspector.TimelineRecordFrame.MinimumWidthPixels;
+ this._renderingFramesViewModeSettings = this._createViewModeSettings(WebInspector.TimelineOverview.ViewMode.RenderingFrames, minimumDurationPerPixel, maximumDurationPerPixel, minimumDurationPerPixel, 0, 100);
+ }
+
</ins><span class="cx"> this._recording = timelineRecording;
</span><span class="cx"> this._recording.addEventListener(WebInspector.TimelineRecording.Event.InstrumentAdded, this._instrumentAdded, this);
</span><span class="cx"> this._recording.addEventListener(WebInspector.TimelineRecording.Event.InstrumentRemoved, this._instrumentRemoved, this);
</span><span class="cx"> this._recording.addEventListener(WebInspector.TimelineRecording.Event.MarkerAdded, this._markerAdded, this);
</span><span class="cx"> this._recording.addEventListener(WebInspector.TimelineRecording.Event.Reset, this._recordingReset, this);
</span><span class="cx">
</span><del>- this.element.classList.add("timeline-overview", identifier);
</del><ins>+ this.element.classList.add("timeline-overview");
</ins><span class="cx"> this.element.addEventListener("wheel", this._handleWheelEvent.bind(this));
</span><span class="cx"> this.element.addEventListener("gesturestart", this._handleGestureStart.bind(this));
</span><span class="cx"> this.element.addEventListener("gesturechange", this._handleGestureChange.bind(this));
</span><span class="lines">@@ -47,7 +55,7 @@
</span><span class="cx"> this._graphsContainerView.element.classList.add("graphs-container");
</span><span class="cx"> this.addSubview(this._graphsContainerView);
</span><span class="cx">
</span><del>- this._timelineOverviewGraphsMap = new Map;
</del><ins>+ this._overviewGraphsByTypeMap = new Map;
</ins><span class="cx">
</span><span class="cx"> this._timelineRuler = new WebInspector.TimelineRuler;
</span><span class="cx"> this._timelineRuler.allowsClippedLabels = true;
</span><span class="lines">@@ -69,36 +77,40 @@
</span><span class="cx"> this._scrollWidthSizer.classList.add("scroll-width-sizer");
</span><span class="cx"> this._scrollContainerElement.appendChild(this._scrollWidthSizer);
</span><span class="cx">
</span><del>- this._defaultSettingsValues = defaultSettingsValues;
- this._durationPerPixelSetting = new WebInspector.Setting(identifier + "-timeline-overview-duration-per-pixel", this._defaultSettingsValues.durationPerPixel);
- this._selectionStartValueSetting = new WebInspector.Setting(identifier + "-timeline-overview-selection-start-value", this._defaultSettingsValues.selectionStartValue);
- this._selectionDurationSetting = new WebInspector.Setting(identifier + "-timeline-overview-selection-duration", this._defaultSettingsValues.selectionDuration);
-
</del><span class="cx"> this._startTime = 0;
</span><span class="cx"> this._currentTime = 0;
</span><span class="cx"> this._revealCurrentTime = false;
</span><span class="cx"> this._endTime = 0;
</span><del>- this._minimumDurationPerPixel = minimumDurationPerPixel;
- this._maximumDurationPerPixel = maximumDurationPerPixel;
- this._durationPerPixel = Math.min(this._maximumDurationPerPixel, Math.max(this._minimumDurationPerPixel, this._durationPerPixelSetting.value));
</del><span class="cx"> this._pixelAlignDuration = false;
</span><span class="cx"> this._mouseWheelDelta = 0;
</span><del>- this._scrollStartTime = 0;
</del><span class="cx"> this._cachedScrollContainerWidth = NaN;
</span><span class="cx"> this._timelineRulerSelectionChanged = false;
</span><span class="cx">
</span><del>- this.selectionStartTime = this._selectionStartValueSetting.value;
- this.selectionDuration = this._selectionDurationSetting.value;
-
</del><span class="cx"> for (let instrument of this._recording.instruments)
</span><span class="cx"> this._instrumentAdded(instrument);
</span><span class="cx">
</span><span class="cx"> if (!WebInspector.timelineManager.isCapturingPageReload())
</span><span class="cx"> this._resetSelection();
</span><ins>+
+ this.viewMode = WebInspector.TimelineOverview.ViewMode.Timelines;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="cx">
</span><ins>+ get viewMode()
+ {
+ return this._viewMode;
+ }
+
+ set viewMode(x)
+ {
+ if (this._viewMode === x)
+ return;
+
+ this._viewMode = x;
+ this._viewModeDidChange();
+ }
+
</ins><span class="cx"> get startTime()
</span><span class="cx"> {
</span><span class="cx"> return this._startTime;
</span><span class="lines">@@ -111,6 +123,11 @@
</span><span class="cx"> if (this._startTime === x)
</span><span class="cx"> return;
</span><span class="cx">
</span><ins>+ if (this._viewMode !== WebInspector.TimelineOverview.ViewMode.RenderingFrames) {
+ let selectionOffset = this.selectionStartTime - this._startTime;
+ this.selectionStartTime = selectionOffset + x;
+ }
+
</ins><span class="cx"> this._startTime = x;
</span><span class="cx">
</span><span class="cx"> this.needsLayout();
</span><span class="lines">@@ -136,24 +153,23 @@
</span><span class="cx">
</span><span class="cx"> get secondsPerPixel()
</span><span class="cx"> {
</span><del>- return this._durationPerPixel;
</del><ins>+ return this._currentSettings.durationPerPixelSetting.value;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> set secondsPerPixel(x)
</span><span class="cx"> {
</span><del>- x = Math.min(this._maximumDurationPerPixel, Math.max(this._minimumDurationPerPixel, x));
</del><ins>+ x = Math.min(this._currentSettings.maximumDurationPerPixel, Math.max(this._currentSettings.minimumDurationPerPixel, x));
</ins><span class="cx">
</span><del>- if (this._durationPerPixel === x)
</del><ins>+ if (this.secondsPerPixel === x)
</ins><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> if (this._pixelAlignDuration) {
</span><span class="cx"> x = 1 / Math.round(1 / x);
</span><del>- if (this._durationPerPixel === x)
</del><ins>+ if (this.secondsPerPixel === x)
</ins><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- this._durationPerPixel = x;
- this._durationPerPixelSetting.value = x;
</del><ins>+ this._currentSettings.durationPerPixelSetting.value = x;
</ins><span class="cx">
</span><span class="cx"> this.needsLayout();
</span><span class="cx"> }
</span><span class="lines">@@ -171,7 +187,7 @@
</span><span class="cx"> this._mouseWheelDelta = 0;
</span><span class="cx"> this._pixelAlignDuration = x;
</span><span class="cx"> if (this._pixelAlignDuration)
</span><del>- this.secondsPerPixel = 1 / Math.round(1 / this._durationPerPixel);
</del><ins>+ this.secondsPerPixel = 1 / Math.round(1 / this.secondsPerPixel);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> get endTime()
</span><span class="lines">@@ -193,17 +209,17 @@
</span><span class="cx">
</span><span class="cx"> get scrollStartTime()
</span><span class="cx"> {
</span><del>- return this._scrollStartTime;
</del><ins>+ return this._currentSettings.scrollStartTime;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> set scrollStartTime(x)
</span><span class="cx"> {
</span><span class="cx"> x = x || 0;
</span><span class="cx">
</span><del>- if (this._scrollStartTime === x)
</del><ins>+ if (this.scrollStartTime === x)
</ins><span class="cx"> return;
</span><span class="cx">
</span><del>- this._scrollStartTime = x;
</del><ins>+ this._currentSettings.scrollStartTime = x;
</ins><span class="cx">
</span><span class="cx"> this.needsLayout();
</span><span class="cx"> }
</span><span class="lines">@@ -221,7 +237,7 @@
</span><span class="cx"> this._cachedScrollContainerWidth = NaN;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- return this._cachedScrollContainerWidth * this._durationPerPixel;
</del><ins>+ return this._cachedScrollContainerWidth * this.secondsPerPixel;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> get selectionStartTime()
</span><span class="lines">@@ -256,8 +272,10 @@
</span><span class="cx"> get height()
</span><span class="cx"> {
</span><span class="cx"> let height = 0;
</span><del>- for (let graph of this._timelineOverviewGraphsMap.values())
- height += graph.height;
</del><ins>+ for (let overviewGraph of this._overviewGraphsByTypeMap.values()) {
+ if (overviewGraph.visible)
+ height += overviewGraph.height;
+ }
</ins><span class="cx"> return height;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -270,8 +288,10 @@
</span><span class="cx"> {
</span><span class="cx"> this._visible = true;
</span><span class="cx">
</span><del>- for (var timelineOverviewGraph of this._timelineOverviewGraphsMap.values())
- timelineOverviewGraph.shown();
</del><ins>+ for (let [type, overviewGraph] of this._overviewGraphsByTypeMap) {
+ if (this._canShowTimelineType(type))
+ overviewGraph.shown();
+ }
</ins><span class="cx">
</span><span class="cx"> this.updateLayout(WebInspector.View.LayoutReason.Resize);
</span><span class="cx"> }
</span><span class="lines">@@ -280,14 +300,14 @@
</span><span class="cx"> {
</span><span class="cx"> this._visible = false;
</span><span class="cx">
</span><del>- for (var timelineOverviewGraph of this._timelineOverviewGraphsMap.values())
- timelineOverviewGraph.hidden();
</del><ins>+ for (let overviewGraph of this._overviewGraphsByTypeMap.values())
+ overviewGraph.hidden();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> reset()
</span><span class="cx"> {
</span><del>- for (var timelineOverviewGraph of this._timelineOverviewGraphsMap.values())
- timelineOverviewGraph.reset();
</del><ins>+ for (let overviewGraph of this._overviewGraphsByTypeMap.values())
+ overviewGraph.reset();
</ins><span class="cx">
</span><span class="cx"> this._mouseWheelDelta = 0;
</span><span class="cx">
</span><span class="lines">@@ -301,25 +321,25 @@
</span><span class="cx">
</span><span class="cx"> recordWasFiltered(timeline, record, filtered)
</span><span class="cx"> {
</span><del>- console.assert(this.canShowTimeline(timeline), timeline);
-
- let overviewGraph = this._timelineOverviewGraphsMap.get(timeline);
</del><ins>+ let overviewGraph = this._overviewGraphsByTypeMap.get(timeline.type);
</ins><span class="cx"> console.assert(overviewGraph, "Missing overview graph for timeline type " + timeline.type);
</span><span class="cx"> if (!overviewGraph)
</span><span class="cx"> return;
</span><span class="cx">
</span><ins>+ console.assert(overviewGraph.visible, "Record filtered in hidden overview graph", record);
+
</ins><span class="cx"> overviewGraph.recordWasFiltered(record, filtered);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> selectRecord(timeline, record)
</span><span class="cx"> {
</span><del>- console.assert(this.canShowTimeline(timeline), timeline);
-
- var overviewGraph = this._timelineOverviewGraphsMap.get(timeline);
</del><ins>+ let overviewGraph = this._overviewGraphsByTypeMap.get(timeline.type);
</ins><span class="cx"> console.assert(overviewGraph, "Missing overview graph for timeline type " + timeline.type);
</span><span class="cx"> if (!overviewGraph)
</span><span class="cx"> return;
</span><span class="cx">
</span><ins>+ console.assert(overviewGraph.visible, "Record selected in hidden overview graph", record);
+
</ins><span class="cx"> overviewGraph.selectedRecord = record;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -332,8 +352,10 @@
</span><span class="cx">
</span><span class="cx"> this._timelineRuler.updateLayoutIfNeeded();
</span><span class="cx">
</span><del>- for (let timelineOverviewGraph of this._timelineOverviewGraphsMap.values())
- timelineOverviewGraph.updateLayoutIfNeeded();
</del><ins>+ for (let overviewGraph of this._overviewGraphsByTypeMap.values()) {
+ if (overviewGraph.visible)
+ overviewGraph.updateLayoutIfNeeded();
+ }
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Protected
</span><span class="lines">@@ -343,25 +365,31 @@
</span><span class="cx"> return this._timelineRuler;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- canShowTimeline(timeline)
- {
- // Implemented by subclasses.
- console.error("Needs to be implemented by a subclass.");
- }
-
</del><span class="cx"> layout(layoutReason)
</span><span class="cx"> {
</span><span class="cx"> if (layoutReason === WebInspector.View.LayoutReason.Resize)
</span><span class="cx"> this._cachedScrollContainerWidth = NaN;
</span><span class="cx">
</span><ins>+ let startTime = this._startTime;
+ let endTime = this._endTime;
+ let currentTime = this._currentTime;
+ if (this._viewMode === WebInspector.TimelineOverview.ViewMode.RenderingFrames) {
+ let renderingFramesTimeline = this._recording.timelines.get(WebInspector.TimelineRecord.Type.RenderingFrame);
+ console.assert(renderingFramesTimeline, "Recoring missing rendering frames timeline");
+
+ startTime = 0;
+ endTime = renderingFramesTimeline.records.length;
+ currentTime = endTime;
+ }
+
</ins><span class="cx"> // Calculate the required width based on the duration and seconds per pixel.
</span><del>- let duration = this._endTime - this._startTime;
- let newWidth = Math.ceil(duration / this._durationPerPixel);
</del><ins>+ let duration = endTime - startTime;
+ let newWidth = Math.ceil(duration / this.secondsPerPixel);
</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="cx">
</span><del>- this._currentTimeMarker.time = this._currentTime;
</del><ins>+ this._currentTimeMarker.time = currentTime;
</ins><span class="cx">
</span><span class="cx"> if (this._revealCurrentTime) {
</span><span class="cx"> this.revealMarker(this._currentTimeMarker);
</span><span class="lines">@@ -371,25 +399,28 @@
</span><span class="cx"> const visibleDuration = this.visibleDuration;
</span><span class="cx">
</span><span class="cx"> // Clamp the scroll start time to match what the scroll bar would allow.
</span><del>- let scrollStartTime = Math.min(this._scrollStartTime, this._endTime - visibleDuration);
- scrollStartTime = Math.max(this._startTime, scrollStartTime);
</del><ins>+ let scrollStartTime = Math.min(this.scrollStartTime, endTime - visibleDuration);
+ scrollStartTime = Math.max(startTime, scrollStartTime);
</ins><span class="cx">
</span><del>- this._timelineRuler.zeroTime = this._startTime;
</del><ins>+ this._timelineRuler.zeroTime = startTime;
</ins><span class="cx"> this._timelineRuler.startTime = scrollStartTime;
</span><del>- this._timelineRuler.secondsPerPixel = this._durationPerPixel;
</del><ins>+ this._timelineRuler.secondsPerPixel = this.secondsPerPixel;
</ins><span class="cx">
</span><span class="cx"> if (!this._dontUpdateScrollLeft) {
</span><span class="cx"> this._ignoreNextScrollEvent = true;
</span><del>- let scrollLeft = Math.ceil((scrollStartTime - this._startTime) / this._durationPerPixel);
</del><ins>+ let scrollLeft = Math.ceil((scrollStartTime - startTime) / this.secondsPerPixel);
</ins><span class="cx"> if (scrollLeft)
</span><span class="cx"> this._scrollContainerElement.scrollLeft = scrollLeft;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- for (let timelineOverviewGraph of this._timelineOverviewGraphsMap.values()) {
- timelineOverviewGraph.zeroTime = this._startTime;
- timelineOverviewGraph.startTime = scrollStartTime;
- timelineOverviewGraph.currentTime = this._currentTime;
- timelineOverviewGraph.endTime = scrollStartTime + visibleDuration;
</del><ins>+ for (let overviewGraph of this._overviewGraphsByTypeMap.values()) {
+ if (!overviewGraph.visible)
+ continue;
+
+ overviewGraph.zeroTime = startTime;
+ overviewGraph.startTime = scrollStartTime;
+ overviewGraph.currentTime = currentTime;
+ overviewGraph.endTime = scrollStartTime + visibleDuration;
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -411,8 +442,8 @@
</span><span class="cx">
</span><span class="cx"> this._dontUpdateScrollLeft = true;
</span><span class="cx">
</span><del>- var scrollOffset = this._scrollContainerElement.scrollLeft;
- this.scrollStartTime = this._startTime + (scrollOffset * this._durationPerPixel);
</del><ins>+ let scrollOffset = this._scrollContainerElement.scrollLeft;
+ this.scrollStartTime = this._startTime + (scrollOffset * this.secondsPerPixel);
</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">@@ -443,25 +474,25 @@
</span><span class="cx">
</span><span class="cx"> // Remember the mouse position in time.
</span><span class="cx"> let mouseOffset = event.pageX - this.element.totalOffsetLeft;
</span><del>- let mousePositionTime = this._scrollStartTime + (mouseOffset * this._durationPerPixel);
</del><ins>+ let mousePositionTime = this._currentSettings.scrollStartTime + (mouseOffset * this.secondsPerPixel);
</ins><span class="cx"> let deviceDirection = event.webkitDirectionInvertedFromDevice ? 1 : -1;
</span><del>- let delta = event.deltaY * (this._durationPerPixel / WebInspector.TimelineOverview.ScrollDeltaDenominator) * deviceDirection;
</del><ins>+ let delta = event.deltaY * (this.secondsPerPixel / WebInspector.TimelineOverview.ScrollDeltaDenominator) * deviceDirection;
</ins><span class="cx">
</span><span class="cx"> // Reset accumulated wheel delta when direction changes.
</span><span class="cx"> if (this._pixelAlignDuration && (delta < 0 && this._mouseWheelDelta >= 0 || delta >= 0 && this._mouseWheelDelta < 0))
</span><span class="cx"> this._mouseWheelDelta = 0;
</span><span class="cx">
</span><del>- let previousDurationPerPixel = this._durationPerPixel;
</del><ins>+ let previousDurationPerPixel = this.secondsPerPixel;
</ins><span class="cx"> this._mouseWheelDelta += delta;
</span><span class="cx"> this.secondsPerPixel += this._mouseWheelDelta;
</span><span class="cx">
</span><del>- if (this._durationPerPixel === this._minimumDurationPerPixel && delta < 0 || this._durationPerPixel === this._maximumDurationPerPixel && delta >= 0)
</del><ins>+ if (this.secondsPerPixel === this._currentSettings.minimumDurationPerPixel && delta < 0 || this.secondsPerPixel === this._currentSettings.maximumDurationPerPixel && delta >= 0)
</ins><span class="cx"> this._mouseWheelDelta = 0;
</span><span class="cx"> else
</span><del>- this._mouseWheelDelta = previousDurationPerPixel + this._mouseWheelDelta - this._durationPerPixel;
</del><ins>+ this._mouseWheelDelta = previousDurationPerPixel + this._mouseWheelDelta - this.secondsPerPixel;
</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._durationPerPixel);
</del><ins>+ this.scrollStartTime = mousePositionTime - (mouseOffset * this.secondsPerPixel);
</ins><span class="cx">
</span><span class="cx"> event.preventDefault();
</span><span class="cx"> event.stopPropagation();
</span><span class="lines">@@ -475,11 +506,11 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> let mouseOffset = event.pageX - this.element.totalOffsetLeft;
</span><del>- let mousePositionTime = this._scrollStartTime + (mouseOffset * this._durationPerPixel);
</del><ins>+ let mousePositionTime = this._currentSettings.scrollStartTime + (mouseOffset * this.secondsPerPixel);
</ins><span class="cx">
</span><span class="cx"> this._handlingGesture = true;
</span><span class="cx"> this._gestureStartStartTime = mousePositionTime;
</span><del>- this._gestureStartDurationPerPixel = this._durationPerPixel;
</del><ins>+ this._gestureStartDurationPerPixel = this.secondsPerPixel;
</ins><span class="cx">
</span><span class="cx"> event.preventDefault();
</span><span class="cx"> event.stopPropagation();
</span><span class="lines">@@ -494,7 +525,7 @@
</span><span class="cx"> let newSecondsPerPixel = this._gestureStartDurationPerPixel / scale;
</span><span class="cx">
</span><span class="cx"> this.secondsPerPixel = newSecondsPerPixel;
</span><del>- this.scrollStartTime = this._gestureStartStartTime - (mouseOffset * this._durationPerPixel);
</del><ins>+ this.scrollStartTime = this._gestureStartStartTime - (mouseOffset * this.secondsPerPixel);
</ins><span class="cx">
</span><span class="cx"> event.preventDefault();
</span><span class="cx"> event.stopPropagation();
</span><span class="lines">@@ -513,15 +544,16 @@
</span><span class="cx"> console.assert(instrument instanceof WebInspector.Instrument, instrument);
</span><span class="cx">
</span><span class="cx"> let timeline = this._recording.timelineForInstrument(instrument);
</span><del>- console.assert(!this._timelineOverviewGraphsMap.has(timeline), timeline);
- if (!this.canShowTimeline(timeline))
- return;
</del><ins>+ console.assert(!this._overviewGraphsByTypeMap.has(timeline.type), timeline);
</ins><span class="cx">
</span><span class="cx"> let overviewGraph = WebInspector.TimelineOverviewGraph.createForTimeline(timeline, this);
</span><span class="cx"> overviewGraph.addEventListener(WebInspector.TimelineOverviewGraph.Event.RecordSelected, this._recordSelected, this);
</span><del>- this._timelineOverviewGraphsMap.set(timeline, overviewGraph);
</del><ins>+ this._overviewGraphsByTypeMap.set(timeline.type, overviewGraph);
</ins><span class="cx">
</span><span class="cx"> this._graphsContainerView.addSubview(overviewGraph);
</span><ins>+
+ if (!this._canShowTimelineType(timeline.type))
+ overviewGraph.hidden();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _instrumentRemoved(event)
</span><span class="lines">@@ -530,12 +562,9 @@
</span><span class="cx"> console.assert(instrument instanceof WebInspector.Instrument, instrument);
</span><span class="cx">
</span><span class="cx"> let timeline = this._recording.timelineForInstrument(instrument);
</span><del>- if (!this.canShowTimeline(timeline))
- return;
</del><ins>+ console.assert(this._overviewGraphsByTypeMap.has(timeline.type), timeline);
</ins><span class="cx">
</span><del>- console.assert(this._timelineOverviewGraphsMap.has(timeline), timeline);
-
- let overviewGraph = this._timelineOverviewGraphsMap.take(timeline);
</del><ins>+ let overviewGraph = this._overviewGraphsByTypeMap.take(timeline.type);
</ins><span class="cx"> overviewGraph.removeEventListener(WebInspector.TimelineOverviewGraph.Event.RecordSelected, this._recordSelected, this);
</span><span class="cx"> this._graphsContainerView.removeSubview(overviewGraph);
</span><span class="cx"> }
</span><span class="lines">@@ -555,13 +584,13 @@
</span><span class="cx"> if (this._timelineRulerSelectionChanged)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- for (var overviewGraph of this._timelineOverviewGraphsMap.values()) {
- var graphRect = overviewGraph.element.getBoundingClientRect();
</del><ins>+ for (let overviewGraph of this._overviewGraphsByTypeMap.values()) {
+ let graphRect = overviewGraph.element.getBoundingClientRect();
</ins><span class="cx"> if (!(event.pageX >= graphRect.left && event.pageX <= graphRect.right && event.pageY >= graphRect.top && event.pageY <= graphRect.bottom))
</span><span class="cx"> continue;
</span><span class="cx">
</span><span class="cx"> // Clone the event to dispatch it on the overview graph element.
</span><del>- var newClickEvent = new event.constructor(event.type, event);
</del><ins>+ let newClickEvent = new event.constructor(event.type, event);
</ins><span class="cx"> overviewGraph.element.dispatchEvent(newClickEvent);
</span><span class="cx"> return;
</span><span class="cx"> }
</span><span class="lines">@@ -570,18 +599,22 @@
</span><span class="cx"> _timeRangeSelectionChanged(event)
</span><span class="cx"> {
</span><span class="cx"> this._timelineRulerSelectionChanged = true;
</span><del>- this._selectionStartValueSetting.value = this.selectionStartTime - this._startTime;
- this._selectionDurationSetting.value = this.selectionDuration;
</del><span class="cx">
</span><ins>+ let startTime = this._viewMode === WebInspector.TimelineOverview.ViewMode.Timelines ? this._startTime : 0;
+ this._currentSettings.selectionStartValueSetting.value = this.selectionStartTime - startTime;
+ this._currentSettings.selectionDurationSetting.value = this.selectionDuration;
+
</ins><span class="cx"> this.dispatchEventToListeners(WebInspector.TimelineOverview.Event.TimeRangeSelectionChanged);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _recordSelected(event)
</span><span class="cx"> {
</span><del>- for (var [timeline, overviewGraph] of this._timelineOverviewGraphsMap) {
</del><ins>+ for (let [type, overviewGraph] of this._overviewGraphsByTypeMap) {
</ins><span class="cx"> if (overviewGraph !== event.target)
</span><span class="cx"> continue;
</span><span class="cx">
</span><ins>+ let timeline = this._recording.timelines.get(type);
+ console.assert(timeline, "Timeline recording missing timeline type", type);
</ins><span class="cx"> this.dispatchEventToListeners(WebInspector.TimelineOverview.Event.RecordSelected, {timeline, record: event.data.record});
</span><span class="cx"> return;
</span><span class="cx"> }
</span><span class="lines">@@ -589,9 +622,20 @@
</span><span class="cx">
</span><span class="cx"> _resetSelection()
</span><span class="cx"> {
</span><del>- this.secondsPerPixel = this._defaultSettingsValues.durationPerPixel;
- this.selectionStartTime = this._defaultSettingsValues.selectionStartValue;
- this.selectionDuration = this._defaultSettingsValues.selectionDuration;
</del><ins>+ function reset(settings)
+ {
+ settings.durationPerPixelSetting.reset();
+ settings.selectionStartValueSetting.reset();
+ settings.selectionDurationSetting.reset();
+ }
+
+ reset(this._timelinesViewModeSettings);
+ if (this._renderingFramesViewModeSettings)
+ reset(this._renderingFramesViewModeSettings);
+
+ this.secondsPerPixel = this._currentSettings.durationPerPixelSetting.value;
+ this.selectionStartTime = this._currentSettings.selectionStartValueSetting.value;
+ this.selectionDuration = this._currentSettings.selectionDurationSetting.value;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _recordingReset(event)
</span><span class="lines">@@ -599,10 +643,77 @@
</span><span class="cx"> this._timelineRuler.clearMarkers();
</span><span class="cx"> this._timelineRuler.addMarker(this._currentTimeMarker);
</span><span class="cx"> }
</span><ins>+
+ _canShowTimelineType(type)
+ {
+ let timelineViewMode = WebInspector.TimelineOverview.ViewMode.Timelines;
+ if (type === WebInspector.TimelineRecord.Type.RenderingFrame)
+ timelineViewMode = WebInspector.TimelineOverview.ViewMode.RenderingFrames;
+
+ return timelineViewMode === this._viewMode;
+ }
+
+ _viewModeDidChange()
+ {
+ let startTime = 0;
+ let isRenderingFramesMode = this._viewMode === WebInspector.TimelineOverview.ViewMode.RenderingFrames;
+ if (isRenderingFramesMode) {
+ this._timelineRuler.minimumSelectionDuration = 1;
+ this._timelineRuler.snapInterval = 1;
+ this._timelineRuler.formatLabelCallback = (value) => value.toFixed(0);
+ } else {
+ this._timelineRuler.minimumSelectionDuration = 0.01;
+ this._timelineRuler.snapInterval = NaN;
+ this._timelineRuler.formatLabelCallback = null;
+
+ startTime = this._startTime;
+ }
+
+ this.pixelAlignDuration = isRenderingFramesMode;
+ this.selectionStartTime = this._currentSettings.selectionStartValueSetting.value + startTime;
+ this.selectionDuration = this._currentSettings.selectionDurationSetting.value;
+
+ for (let [type, overviewGraph] of this._overviewGraphsByTypeMap) {
+ if (this._canShowTimelineType(type))
+ overviewGraph.shown();
+ else
+ overviewGraph.hidden();
+ }
+
+ this.element.classList.toggle("frames", isRenderingFramesMode);
+ }
+
+ _createViewModeSettings(viewMode, minimumDurationPerPixel, maximumDurationPerPixel, durationPerPixel, selectionStartValue, selectionDuration)
+ {
+ durationPerPixel = Math.min(maximumDurationPerPixel, Math.max(minimumDurationPerPixel, durationPerPixel));
+
+ let durationPerPixelSetting = new WebInspector.Setting(viewMode + "-duration-per-pixel", durationPerPixel);
+ let selectionStartValueSetting = new WebInspector.Setting(viewMode + "-selection-start-value", selectionStartValue);
+ let selectionDurationSetting = new WebInspector.Setting(viewMode + "-selection-duration", selectionDuration);
+
+ return {
+ scrollStartTime: 0,
+ minimumDurationPerPixel,
+ maximumDurationPerPixel,
+ durationPerPixelSetting,
+ selectionStartValueSetting,
+ selectionDurationSetting
+ };
+ }
+
+ get _currentSettings()
+ {
+ return this._viewMode === WebInspector.TimelineOverview.ViewMode.Timelines ? this._timelinesViewModeSettings : this._renderingFramesViewModeSettings;
+ }
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> WebInspector.TimelineOverview.ScrollDeltaDenominator = 500;
</span><span class="cx">
</span><ins>+WebInspector.TimelineOverview.ViewMode = {
+ Timelines: "timeline-overview-view-mode-timelines",
+ RenderingFrames: "timeline-overview-view-mode-rendering-frames"
+};
+
</ins><span class="cx"> WebInspector.TimelineOverview.Event = {
</span><span class="cx"> RecordSelected: "timeline-overview-record-selected",
</span><span class="cx"> TimeRangeSelectionChanged: "timeline-overview-time-range-selection-changed"
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewGraphjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverviewGraph.js (196605 => 196606)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverviewGraph.js 2016-02-15 23:57:22 UTC (rev 196605)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverviewGraph.js 2016-02-15 23:57:25 UTC (rev 196606)
</span><span class="lines">@@ -39,6 +39,7 @@
</span><span class="cx"> this._selectedRecord = null;
</span><span class="cx"> this._selectedRecordChanged = false;
</span><span class="cx"> this._scheduledSelectedRecordLayoutUpdateIdentifier = undefined;
</span><ins>+ this._visible = true;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="lines">@@ -172,13 +173,21 @@
</span><span class="cx">
</span><span class="cx"> shown()
</span><span class="cx"> {
</span><ins>+ if (this._visible)
+ return;
+
</ins><span class="cx"> this._visible = true;
</span><ins>+ this.element.classList.toggle("hidden", !this._visible);
</ins><span class="cx"> this.updateLayout();
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> hidden()
</span><span class="cx"> {
</span><ins>+ if (!this._visible)
+ return;
+
</ins><span class="cx"> this._visible = false;
</span><ins>+ this.element.classList.toggle("hidden", !this._visible);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> reset()
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordFramejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.js (196605 => 196606)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.js 2016-02-15 23:57:22 UTC (rev 196605)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.js 2016-02-15 23:57:25 UTC (rev 196606)
</span><span class="lines">@@ -108,7 +108,7 @@
</span><span class="cx">
</span><span class="cx"> _calculateFrameDisplayData(graphDataSource)
</span><span class="cx"> {
</span><del>- var secondsPerBlock = (graphDataSource.graphHeightSeconds / graphDataSource.element.offsetHeight) * WebInspector.TimelineRecordFrame.MinimumHeightPixels;
</del><ins>+ var secondsPerBlock = (graphDataSource.graphHeightSeconds / graphDataSource.height) * WebInspector.TimelineRecordFrame.MinimumHeightPixels;
</ins><span class="cx"> var segments = [];
</span><span class="cx"> var invisibleSegments = [];
</span><span class="cx"> var currentSegment = null;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordingContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js (196605 => 196606)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js 2016-02-15 23:57:22 UTC (rev 196605)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js 2016-02-15 23:57:25 UTC (rev 196606)
</span><span class="lines">@@ -38,17 +38,11 @@
</span><span class="cx">
</span><span class="cx"> this.element.classList.add("timeline-recording");
</span><span class="cx">
</span><del>- this._linearTimelineOverview = new WebInspector.LinearTimelineOverview(this._recording);
- this._linearTimelineOverview.addEventListener(WebInspector.TimelineOverview.Event.TimeRangeSelectionChanged, this._timeRangeSelectionChanged, this);
</del><ins>+ this._timelineOverview = new WebInspector.TimelineOverview(this._recording);
+ this._timelineOverview.addEventListener(WebInspector.TimelineOverview.Event.TimeRangeSelectionChanged, this._timeRangeSelectionChanged, this);
+ this._timelineOverview.addEventListener(WebInspector.TimelineOverview.Event.RecordSelected, this._recordSelected, this);
+ this.addSubview(this._timelineOverview);
</ins><span class="cx">
</span><del>- this._renderingFrameTimelineOverview = new WebInspector.RenderingFrameTimelineOverview(this._recording);
- this._renderingFrameTimelineOverview.addEventListener(WebInspector.TimelineOverview.Event.TimeRangeSelectionChanged, this._timeRangeSelectionChanged, this);
- this._renderingFrameTimelineOverview.addEventListener(WebInspector.TimelineOverview.Event.RecordSelected, this._recordSelected, this);
-
- this._currentTimelineOverview = this._linearTimelineOverview;
-
- this.addSubview(this._currentTimelineOverview);
-
</del><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.addSubview(this._contentViewContainer);
</span><span class="lines">@@ -57,7 +51,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._linearTimelineOverview.secondsPerPixel;
</del><ins>+ this._overviewTimelineView.secondsPerPixel = this._timelineOverview.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">@@ -161,12 +155,12 @@
</span><span class="cx">
</span><span class="cx"> get timelineOverviewHeight()
</span><span class="cx"> {
</span><del>- return this._currentTimelineOverview.height;
</del><ins>+ return this._timelineOverview.height;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> shown()
</span><span class="cx"> {
</span><del>- this._currentTimelineOverview.shown();
</del><ins>+ this._timelineOverview.shown();
</ins><span class="cx"> this._contentViewContainer.shown();
</span><span class="cx"> this._clearTimelineNavigationItem.enabled = !this._recording.readonly && !isNaN(this._recording.startTime);
</span><span class="cx">
</span><span class="lines">@@ -178,7 +172,7 @@
</span><span class="cx">
</span><span class="cx"> hidden()
</span><span class="cx"> {
</span><del>- this._currentTimelineOverview.hidden();
</del><ins>+ this._timelineOverview.hidden();
</ins><span class="cx"> this._contentViewContainer.hidden();
</span><span class="cx">
</span><span class="cx"> if (this._updating)
</span><span class="lines">@@ -249,7 +243,7 @@
</span><span class="cx"> if (!this.currentTimelineView)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- this._currentTimelineOverview.recordWasFiltered(this.currentTimelineView.representedObject, record, filtered);
</del><ins>+ this._timelineOverview.recordWasFiltered(this.currentTimelineView.representedObject, record, filtered);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> matchTreeElementAgainstCustomFilters(treeElement)
</span><span class="lines">@@ -257,20 +251,20 @@
</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._currentTimelineOverview.selectionStartTime;
- var endTime = startTime + this._currentTimelineOverview.selectionDuration;
- var currentTime = this._currentTime || this._recording.startTime;
</del><ins>+ let startTime = this._timelineOverview.selectionStartTime;
+ let endTime = startTime + this._timelineOverview.selectionDuration;
+ let currentTime = this._currentTime || this._recording.startTime;
</ins><span class="cx">
</span><del>- if (this._timelineSidebarPanel.viewMode === WebInspector.TimelineSidebarPanel.ViewMode.RenderingFrames) {
</del><ins>+ if (this._timelineOverview.viewMode === WebInspector.TimelineOverview.ViewMode.RenderingFrames) {
</ins><span class="cx"> console.assert(this._renderingFrameTimeline);
</span><span class="cx">
</span><span class="cx"> if (this._renderingFrameTimeline && this._renderingFrameTimeline.records.length) {
</span><del>- var records = this._renderingFrameTimeline.records;
- var startIndex = this._currentTimelineOverview.timelineRuler.snapInterval ? startTime : Math.floor(startTime);
</del><ins>+ let records = this._renderingFrameTimeline.records;
+ let startIndex = this._timelineOverview.timelineRuler.snapInterval ? startTime : Math.floor(startTime);
</ins><span class="cx"> if (startIndex >= records.length)
</span><span class="cx"> return false;
</span><span class="cx">
</span><del>- var endIndex = this._currentTimelineOverview.timelineRuler.snapInterval ? endTime - 1: Math.floor(endTime);
</del><ins>+ let endIndex = this._timelineOverview.timelineRuler.snapInterval ? endTime - 1: Math.floor(endTime);
</ins><span class="cx"> endIndex = Math.min(endIndex, records.length - 1);
</span><span class="cx"> console.assert(startIndex <= endIndex, startIndex);
</span><span class="cx">
</span><span class="lines">@@ -328,31 +322,22 @@
</span><span class="cx">
</span><span class="cx"> _currentContentViewDidChange(event)
</span><span class="cx"> {
</span><del>- let newTimelineOverview;
</del><ins>+ let newViewMode;
</ins><span class="cx"> let timelineView = this.currentTimelineView;
</span><span class="cx"> if (timelineView && timelineView.representedObject.type === WebInspector.TimelineRecord.Type.RenderingFrame)
</span><del>- newTimelineOverview = this._renderingFrameTimelineOverview;
</del><ins>+ newViewMode = WebInspector.TimelineOverview.ViewMode.RenderingFrames;
</ins><span class="cx"> else
</span><del>- newTimelineOverview = this._linearTimelineOverview;
</del><ins>+ newViewMode = WebInspector.TimelineOverview.ViewMode.Timelines;
</ins><span class="cx">
</span><del>- if (newTimelineOverview !== this._currentTimelineOverview) {
- this._currentTimelineOverview.hidden();
</del><ins>+ this._timelineOverview.viewMode = newViewMode;
</ins><span class="cx">
</span><del>- this.replaceSubview(this._currentTimelineOverview, newTimelineOverview);
-
- this._currentTimelineOverview = newTimelineOverview;
-
- this._updateTimelineOverviewHeight();
- this._currentTimelineOverview.shown();
- }
-
</del><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"> this._timelineSidebarPanel.contentTreeOutlineScopeBar = timelineView.navigationSidebarTreeOutlineScopeBar;
</span><span class="cx">
</span><del>- timelineView.startTime = newTimelineOverview.selectionStartTime;
- timelineView.endTime = newTimelineOverview.selectionStartTime + newTimelineOverview.selectionDuration;
</del><ins>+ timelineView.startTime = this._timelineOverview.selectionStartTime;
+ timelineView.endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
</ins><span class="cx"> timelineView.currentTime = this._currentTime;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -377,7 +362,7 @@
</span><span class="cx">
</span><span class="cx"> var recordPathComponent = this.selectionPathComponents.find(function(element) { return element.representedObject instanceof WebInspector.TimelineRecord; });
</span><span class="cx"> var record = recordPathComponent ? recordPathComponent.representedObject : null;
</span><del>- this._currentTimelineOverview.selectRecord(event.target.representedObject, record);
</del><ins>+ this._timelineOverview.selectRecord(event.target.representedObject, record);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _contentViewSupplementalRepresentedObjectsDidChange(event)
</span><span class="lines">@@ -419,11 +404,7 @@
</span><span class="cx"> _updateTimes(startTime, currentTime, endTime)
</span><span class="cx"> {
</span><span class="cx"> if (this._startTimeNeedsReset && !isNaN(startTime)) {
</span><del>- var selectionOffset = this._linearTimelineOverview.selectionStartTime - this._linearTimelineOverview.startTime;
-
- this._linearTimelineOverview.startTime = startTime;
- this._linearTimelineOverview.selectionStartTime = startTime + selectionOffset;
-
</del><ins>+ this._timelineOverview.startTime = startTime;
</ins><span class="cx"> this._overviewTimelineView.zeroTime = startTime;
</span><span class="cx"> for (var timelineView of this._timelineViewMap.values())
</span><span class="cx"> timelineView.zeroTime = startTime;
</span><span class="lines">@@ -431,25 +412,17 @@
</span><span class="cx"> this._startTimeNeedsReset = false;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- this._linearTimelineOverview.endTime = Math.max(endTime, currentTime);
</del><ins>+ this._timelineOverview.endTime = Math.max(endTime, currentTime);
</ins><span class="cx">
</span><span class="cx"> this._currentTime = currentTime;
</span><del>- this._linearTimelineOverview.currentTime = currentTime;
</del><ins>+ this._timelineOverview.currentTime = currentTime;
</ins><span class="cx"> if (this.currentTimelineView)
</span><span class="cx"> this.currentTimelineView.currentTime = currentTime;
</span><span class="cx">
</span><del>- if (this._renderingFrameTimeline) {
- var currentFrameNumber = 0;
- if (this._renderingFrameTimeline.records.length)
- currentFrameNumber = this._renderingFrameTimeline.records.lastValue.frameNumber;
-
- this._renderingFrameTimelineOverview.currentTime = this._renderingFrameTimelineOverview.endTime = currentFrameNumber;
- }
-
</del><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._currentTimelineOverview.updateLayoutIfNeeded();
</del><ins>+ this._timelineOverview.updateLayoutIfNeeded();
</ins><span class="cx"> if (this.currentTimelineView)
</span><span class="cx"> this.currentTimelineView.updateLayoutIfNeeded();
</span><span class="cx"> }
</span><span class="lines">@@ -556,7 +529,7 @@
</span><span class="cx"> const rulerHeight = 29;
</span><span class="cx">
</span><span class="cx"> let styleValue = (rulerHeight + this.timelineOverviewHeight) + "px";
</span><del>- this._currentTimelineOverview.element.style.height = styleValue;
</del><ins>+ this._timelineOverview.element.style.height = styleValue;
</ins><span class="cx"> this._contentViewContainer.element.style.top = styleValue;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -631,8 +604,7 @@
</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._linearTimelineOverview.reset();
- this._renderingFrameTimelineOverview.reset();
</del><ins>+ this._timelineOverview.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">@@ -650,8 +622,8 @@
</span><span class="cx"> _timeRangeSelectionChanged(event)
</span><span class="cx"> {
</span><span class="cx"> if (this.currentTimelineView) {
</span><del>- this.currentTimelineView.startTime = this._currentTimelineOverview.selectionStartTime;
- this.currentTimelineView.endTime = this._currentTimelineOverview.selectionStartTime + this._currentTimelineOverview.selectionDuration;
</del><ins>+ this.currentTimelineView.startTime = this._timelineOverview.selectionStartTime;
+ this.currentTimelineView.endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
</ins><span class="cx">
</span><span class="cx"> if (this.currentTimelineView.representedObject.type === WebInspector.TimelineRecord.Type.RenderingFrame)
</span><span class="cx"> this._updateFrameSelection();
</span><span class="lines">@@ -701,8 +673,8 @@
</span><span class="cx"> if (!this._renderingFrameTimeline)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- var startIndex = this._renderingFrameTimelineOverview.selectionStartTime;
- var endIndex = startIndex + this._renderingFrameTimelineOverview.selectionDuration - 1;
</del><ins>+ let startIndex = this._timelineOverview.selectionStartTime;
+ let endIndex = startIndex + this._timelineOverview.selectionDuration - 1;
</ins><span class="cx"> this._timelineSidebarPanel.updateFrameSelection(startIndex, endIndex);
</span><span class="cx"> }
</span><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js (196605 => 196606)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js 2016-02-15 23:57:22 UTC (rev 196605)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js 2016-02-15 23:57:25 UTC (rev 196606)
</span><span class="lines">@@ -81,8 +81,8 @@
</span><span class="cx"> this.element.insertBefore(this._basicTitleBar, this.element.firstChild);
</span><span class="cx">
</span><span class="cx"> if (WebInspector.FPSInstrument.supported()) {
</span><del>- 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"))
</del><ins>+ let timelinesNavigationItem = new WebInspector.RadioButtonNavigationItem(WebInspector.TimelineOverview.ViewMode.Timelines, WebInspector.UIString("Timelines"))
+ let renderingFramesNavigationItem = new WebInspector.RadioButtonNavigationItem(WebInspector.TimelineOverview.ViewMode.RenderingFrames, WebInspector.UIString("Rendering Frames"))
</ins><span class="cx"> this._viewModeNavigationBar = new WebInspector.NavigationBar(null, [timelinesNavigationItem, renderingFramesNavigationItem], "tablist");
</span><span class="cx"> this._viewModeNavigationBar.addEventListener(WebInspector.NavigationBar.Event.NavigationItemSelected, this._viewModeSelected, this);
</span><span class="cx">
</span><span class="lines">@@ -198,9 +198,6 @@
</span><span class="cx"> if (this._displayedContentView)
</span><span class="cx"> this.contentBrowser.showContentView(this._displayedContentView);
</span><span class="cx">
</span><del>- if (this.viewMode === WebInspector.TimelineSidebarPanel.ViewMode.RenderingFrames)
- this._refreshFrameSelectionChart();
-
</del><span class="cx"> this._toggleRecordingShortcut.disabled = false;
</span><span class="cx"> this._toggleNewRecordingShortcut.disabled = false;
</span><span class="cx">
</span><span class="lines">@@ -226,11 +223,6 @@
</span><span class="cx"> WebInspector.timelineManager.reset();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- get viewMode()
- {
- return this._viewMode;
- }
-
</del><span class="cx"> showDefaultContentView()
</span><span class="cx"> {
</span><span class="cx"> if (this._displayedContentView)
</span><span class="lines">@@ -343,9 +335,6 @@
</span><span class="cx">
</span><span class="cx"> this._displayedContentView.showOverviewTimelineView();
</span><span class="cx"> this.contentBrowser.showContentView(this._displayedContentView);
</span><del>-
- var selectedByUser = false;
- this._changeViewMode(WebInspector.TimelineSidebarPanel.ViewMode.Timelines, selectedByUser);
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> showTimelineViewForTimeline(timeline)
</span><span class="lines">@@ -353,10 +342,6 @@
</span><span class="cx"> console.assert(timeline instanceof WebInspector.Timeline, timeline);
</span><span class="cx"> console.assert(this._displayedRecording.timelines.has(timeline.type), "Cannot show timeline because it does not belong to the shown recording.", timeline.type);
</span><span class="cx">
</span><del>- // The sidebar view mode must be in the correct state before changing the content view.
- var selectedByUser = false;
- this._changeViewMode(this._viewModeForTimeline(timeline), selectedByUser);
-
</del><span class="cx"> if (this._timelineTreeElementMap.has(timeline)) {
</span><span class="cx"> // Defer showing the relevant timeline to the onselect handler of the timelines tree element.
</span><span class="cx"> var wasSelectedByUser = true;
</span><span class="lines">@@ -371,7 +356,6 @@
</span><span class="cx"> updateFrameSelection(startFrameIndex, endFrameIndex)
</span><span class="cx"> {
</span><span class="cx"> console.assert(startFrameIndex <= endFrameIndex, startFrameIndex, endFrameIndex);
</span><del>- console.assert(this.viewMode === WebInspector.TimelineSidebarPanel.ViewMode.RenderingFrames, this._viewMode);
</del><span class="cx"> if (this._startFrameIndex === startFrameIndex && this._endFrameIndex === endFrameIndex)
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="lines">@@ -418,7 +402,7 @@
</span><span class="cx"> if (!this._displayedContentView)
</span><span class="cx"> return true;
</span><span class="cx">
</span><del>- if (this._viewMode === WebInspector.TimelineSidebarPanel.ViewMode.RenderingFrames && this._renderingFrameTaskFilter.size) {
</del><ins>+ if (this._viewMode === WebInspector.TimelineOverview.ViewMode.RenderingFrames && this._renderingFrameTaskFilter.size) {
</ins><span class="cx"> while (treeElement && !(treeElement.record instanceof WebInspector.TimelineRecord))
</span><span class="cx"> treeElement = treeElement.parent;
</span><span class="cx">
</span><span class="lines">@@ -487,7 +471,7 @@
</span><span class="cx">
</span><span class="cx"> cookie[WebInspector.TimelineSidebarPanel.ShowingTimelineRecordingContentViewCookieKey] = this.contentBrowser.currentContentView instanceof WebInspector.TimelineRecordingContentView;
</span><span class="cx">
</span><del>- if (this._viewMode === WebInspector.TimelineSidebarPanel.ViewMode.RenderingFrames)
</del><ins>+ if (this._viewMode === WebInspector.TimelineOverview.ViewMode.RenderingFrames)
</ins><span class="cx"> cookie[WebInspector.TimelineSidebarPanel.SelectedTimelineViewIdentifierCookieKey] = WebInspector.TimelineRecord.Type.RenderingFrame;
</span><span class="cx"> else {
</span><span class="cx"> var selectedTreeElement = this._timelinesTreeOutline.selectedTreeElement;
</span><span class="lines">@@ -593,7 +577,7 @@
</span><span class="cx">
</span><span class="cx"> _renderingFrameTimelineTimesUpdated(event)
</span><span class="cx"> {
</span><del>- if (this.viewMode === WebInspector.TimelineSidebarPanel.ViewMode.RenderingFrames)
</del><ins>+ if (this._viewMode === WebInspector.TimelineOverview.ViewMode.RenderingFrames)
</ins><span class="cx"> this._refreshFrameSelectionChart();
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -624,10 +608,19 @@
</span><span class="cx">
</span><span class="cx"> _contentBrowserCurrentContentViewDidChange(event)
</span><span class="cx"> {
</span><del>- var didShowTimelineRecordingContentView = this.contentBrowser.currentContentView instanceof WebInspector.TimelineRecordingContentView;
</del><ins>+ let didShowTimelineRecordingContentView = this.contentBrowser.currentContentView instanceof WebInspector.TimelineRecordingContentView;
</ins><span class="cx"> this.element.classList.toggle(WebInspector.TimelineSidebarPanel.TimelineRecordingContentViewShowingStyleClass, didShowTimelineRecordingContentView);
</span><span class="cx">
</span><del>- if (this.viewMode === WebInspector.TimelineSidebarPanel.ViewMode.RenderingFrames)
</del><ins>+ if (!didShowTimelineRecordingContentView)
+ return;
+
+ this._updateViewModeIfNeeded();
+ this._timelineCountChanged();
+
+ this.updateFilter();
+
+ let timelineView = this.contentBrowser.currentContentView.currentTimelineView;
+ if (timelineView.representedObject.type === WebInspector.TimelineRecord.Type.RenderingFrame)
</ins><span class="cx"> this._refreshFrameSelectionChart();
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -693,10 +686,15 @@
</span><span class="cx"> var cookie = {};
</span><span class="cx"> this.saveStateToCookie(cookie);
</span><span class="cx">
</span><ins>+ if (this._displayedContentView)
+ this._displayedContentView.removeEventListener(WebInspector.ContentView.Event.NavigationItemsDidChange, this._updateViewModeIfNeeded, this);
+
</ins><span class="cx"> // Try to get the recording content view if it exists already, if it does we don't want to restore the cookie.
</span><span class="cx"> var onlyExisting = true;
</span><span class="cx"> this._displayedContentView = this.contentBrowser.contentViewForRepresentedObject(this._displayedRecording, onlyExisting, {timelineSidebarPanel: this});
</span><span class="cx"> if (this._displayedContentView) {
</span><ins>+ this._displayedContentView.addEventListener(WebInspector.ContentView.Event.NavigationItemsDidChange, this._updateViewModeIfNeeded, this);
+
</ins><span class="cx"> // Show the timeline that was being shown to update the sidebar tree state.
</span><span class="cx"> var currentTimelineView = this._displayedContentView.currentTimelineView;
</span><span class="cx"> if (currentTimelineView && currentTimelineView.representedObject instanceof WebInspector.Timeline)
</span><span class="lines">@@ -710,6 +708,8 @@
</span><span class="cx">
</span><span class="cx"> onlyExisting = false;
</span><span class="cx"> this._displayedContentView = this.contentBrowser.contentViewForRepresentedObject(this._displayedRecording, onlyExisting, {timelineSidebarPanel: this});
</span><ins>+ if (this._displayedContentView)
+ this._displayedContentView.addEventListener(WebInspector.ContentView.Event.NavigationItemsDidChange, this._updateViewModeIfNeeded, this);
</ins><span class="cx">
</span><span class="cx"> // Restore the cookie to carry over the previous recording view state to the new recording.
</span><span class="cx"> this.restoreStateFromCookie(cookie);
</span><span class="lines">@@ -859,52 +859,32 @@
</span><span class="cx"> if (!event.target.selectedNavigationItem)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- 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 (!WebInspector.FPSInstrument.supported() || this._viewMode === mode)
</del><ins>+ let selectedNavigationItem = event.target.selectedNavigationItem;
+ let newViewMode = selectedNavigationItem.identifier;
+ if (this._viewMode === newViewMode)
</ins><span class="cx"> return;
</span><span class="cx">
</span><del>- this._viewMode = mode;
- this._viewModeNavigationBar.selectedNavigationItem = this._viewMode;
-
- if (this._viewMode === WebInspector.TimelineSidebarPanel.ViewMode.Timelines) {
- this._timelinesTreeOutline.hidden = false;
- this._frameSelectionChartSection.collapsed = true;
- } else {
- this._timelinesTreeOutline.hidden = true;
- this._frameSelectionChartSection.collapsed = false;
</del><ins>+ let timelineType = this._previousSelectedTimelineType;
+ if (newViewMode === WebInspector.TimelineOverview.ViewMode.RenderingFrames) {
+ this._previousSelectedTimelineType = this._timelinesTreeOutline.selectedTreeElement ? this._timelinesTreeOutline.selectedTreeElement.representedObject.type : null;
+ timelineType = WebInspector.TimelineRecord.Type.RenderingFrame;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- if (selectedByUser) {
- var timelineType = this._previousSelectedTimelineType;
- if (this._viewMode === WebInspector.TimelineSidebarPanel.ViewMode.RenderingFrames) {
- this._previousSelectedTimelineType = this._timelinesTreeOutline.selectedTreeElement ? this._timelinesTreeOutline.selectedTreeElement.representedObject.type : null;
- timelineType = WebInspector.TimelineRecord.Type.RenderingFrame;
- }
-
- if (timelineType) {
- console.assert(this._displayedRecording.timelines.has(timelineType), timelineType);
- this.showTimelineViewForTimeline(this._displayedRecording.timelines.get(timelineType));
- } else
- this.showTimelineOverview();
</del><ins>+ if (timelineType) {
+ console.assert(this._displayedRecording.timelines.has(timelineType), timelineType);
+ this.showTimelineViewForTimeline(this._displayedRecording.timelines.get(timelineType));
+ return;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- this._timelineCountChanged();
</del><ins>+ this.showTimelineOverview();
+ }
</ins><span class="cx">
</span><del>- this.updateFilter();
</del><ins>+ _viewModeForTimeline(timeline)
+ {
+ if (timeline && timeline.type === WebInspector.TimelineRecord.Type.RenderingFrame)
+ return WebInspector.TimelineOverview.ViewMode.RenderingFrames;
+
+ return WebInspector.TimelineOverview.ViewMode.Timelines;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _frameSelectionLegendItemChecked(event)
</span><span class="lines">@@ -1041,11 +1021,29 @@
</span><span class="cx"> {
</span><span class="cx"> this._replayPauseResumeButtonItem.toggled = false;
</span><span class="cx"> }
</span><del>-};
</del><span class="cx">
</span><del>-WebInspector.TimelineSidebarPanel.ViewMode = {
- Timelines: "timeline-sidebar-panel-view-mode-timelines",
- RenderingFrames: "timeline-sidebar-panel-view-mode-frames"
</del><ins>+ _updateViewModeIfNeeded()
+ {
+ let timelineView = this.contentBrowser.currentContentView.currentTimelineView;
+ let newViewMode = WebInspector.TimelineOverview.ViewMode.Timelines;
+ if (timelineView.representedObject instanceof WebInspector.Timeline && timelineView.representedObject.type === WebInspector.TimelineRecord.Type.RenderingFrame)
+ newViewMode = WebInspector.TimelineOverview.ViewMode.RenderingFrames;
+
+ if (newViewMode === this._viewMode)
+ return;
+
+ this._viewMode = newViewMode;
+
+ if (this._viewMode === WebInspector.TimelineOverview.ViewMode.Timelines) {
+ this._timelinesTreeOutline.hidden = false;
+ this._frameSelectionChartSection.collapsed = true;
+ } else {
+ this._timelinesTreeOutline.hidden = true;
+ this._frameSelectionChartSection.collapsed = false;
+ }
+
+ this._viewModeNavigationBar.selectedNavigationItem = this._viewMode;
+ }
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> WebInspector.TimelineSidebarPanel.HiddenStyleClassName = "hidden";
</span></span></pre>
</div>
</div>
</body>
</html>