<!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>[197488] 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/197488">197488</a></dd>
<dt>Author</dt> <dd>mattbaker@apple.com</dd>
<dt>Date</dt> <dd>2016-03-02 19:50:37 -0800 (Wed, 02 Mar 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Timelines UI redesign: replace content view container with a content browser
https://bugs.webkit.org/show_bug.cgi?id=153033
<rdar://problem/24195565>
Reviewed by Timothy Hatcher.
This patch replaces the ContentViewContainer in the Timelines tab with a ContentBrowser,
moves filtering controls from the sidebar to the new browser's navigation bar, and adds
a new leaf path component for the current ruler selection to the main content browser's
navigation bar.
* Localizations/en.lproj/localizedStrings.js:
New UI strings.
* UserInterface/Base/Utilities.js:
Added global en dash string.
* UserInterface/Main.html:
* UserInterface/Test.html:
New files.
* UserInterface/Models/TimelineRange.js:
(WebInspector.TimelineRange):
(WebInspector.TimelineRange.prototype.get startValue):
(WebInspector.TimelineRange.prototype.set startValue):
(WebInspector.TimelineRange.prototype.get endValue):
(WebInspector.TimelineRange.prototype.set endValue):
New represented object used by ruler selection path components.
* UserInterface/Views/FilterBarNavigationItem.js:
(WebInspector.FilterBarNavigationItem):
(WebInspector.FilterBarNavigationItem.prototype.get filterBar):
Adapter class for using a FilterBar as a NavigationItem.
* UserInterface/Views/TimelineIcons.css:
(.time-icon .icon):
Icon class used by ruler selection path component.
* UserInterface/Views/TimelineRecordingContentView.css:
(.content-view.timeline-recording > .content-browser):
(.content-view.timeline-recording > .content-browser > .navigation-bar):
(.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple):
(.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple .arrows):
(.content-view.timeline-recording > .content-browser > .content-view-container > .timeline-view > .data-grid td):
(.content-view.timeline-recording > .content-browser > .content-view-container > .timeline-view > .data-grid table.data):
(.content-view.timeline-recording > .content-view-container): Deleted.
(.content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid td): Deleted.
(.content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid table.data): Deleted.
New styles for the ContentBrowser that replaces the ContentViewContainer.
* UserInterface/Views/TimelineRecordingContentView.js:
(WebInspector.TimelineRecordingContentView):
Create the ContentBrowser, ruler selection path components, and the browser's filter bar.
(WebInspector.TimelineRecordingContentView.prototype.showOverviewTimelineView):
(WebInspector.TimelineRecordingContentView.prototype.showTimelineViewForTimeline):
Implemented by the content browser instead of the view container.
(WebInspector.TimelineRecordingContentView.prototype.get selectionPathComponents):
Add timeline and selection path components. Components for the current TimelineView
are now located in the lower content browser's navigation bar.
(WebInspector.TimelineRecordingContentView.prototype.get supplementalRepresentedObjects):
(WebInspector.TimelineRecordingContentView.prototype.get handleCopyEvent):
(WebInspector.TimelineRecordingContentView.prototype.get supportsSave):
(WebInspector.TimelineRecordingContentView.prototype.get saveData):
(WebInspector.TimelineRecordingContentView.prototype.get currentTimelineView):
(WebInspector.TimelineRecordingContentView.prototype.shown):
(WebInspector.TimelineRecordingContentView.prototype.hidden):
(WebInspector.TimelineRecordingContentView.prototype.closed):
(WebInspector.TimelineRecordingContentView.prototype.canGoBack):
(WebInspector.TimelineRecordingContentView.prototype.canGoForward):
(WebInspector.TimelineRecordingContentView.prototype.goBack):
(WebInspector.TimelineRecordingContentView.prototype.goForward):
(WebInspector.TimelineRecordingContentView.prototype.saveToCookie):
Implemented by the content browser instead of the view container.
(WebInspector.TimelineRecordingContentView.prototype.contentBrowserTreeElementForRepresentedObject):
Create the root tree element for the lower content browser's navigation bar.
(WebInspector.TimelineRecordingContentView.prototype._timeRangePathComponentSelected):
Update the ruler selection based on the new path component.
(WebInspector.TimelineRecordingContentView.prototype._contentViewSelectionPathComponentDidChange):
(WebInspector.TimelineRecordingContentView.prototype._contentViewSupplementalRepresentedObjectsDidChange):
(WebInspector.TimelineRecordingContentView.prototype._updateTimes):
(WebInspector.TimelineRecordingContentView.prototype._updateTimelineOverviewHeight):
Implemented by the content browser instead of the view container.
(WebInspector.TimelineRecordingContentView.prototype._timeRangeSelectionChanged):
Update the currently selected path component when the ruler selection changes.
If the entire range is selected, show the "Entire Recording" path component,
otherwise update the TimelineRange of the path component for the user-defined
selection and refresh all timeline range path components.
(WebInspector.TimelineRecordingContentView.prototype._updateTimeRangePathComponents):
Update title text and sibling relationships for ruler selection path components.
(WebInspector.TimelineRecordingContentView.prototype._createTimelineRangePathComponent):
Helper function for creating TimelineRange path components.
(WebInspector.TimelineRecordingContentView.prototype._currentContentViewDidChange):
The TimelineView scope bar is no longer added to the sidebar. The UI has been moved
to the lower content browser navigation bar.
(WebInspector.TimelineRecordingContentView.prototype._updateFrameSelection): Deleted.
No longer needed since the selected range is shown in the navigation bar.
* UserInterface/Views/TimelineView.js:
(WebInspector.TimelineView.prototype.get navigationItems):
Adds the TimelineView's scope bar (if any) to the lower content browser's navigation
bar. Items are inserted before the filter bar, which is always the right-most item.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs">trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceBaseUtilitiesjs">trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceTesthtml">trunk/Source/WebInspectorUI/UserInterface/Test.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineIconscss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineIcons.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordingContentViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordingContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceModelsTimelineRangejs">trunk/Source/WebInspectorUI/UserInterface/Models/TimelineRange.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsFilterBarNavigationItemjs">trunk/Source/WebInspectorUI/UserInterface/Views/FilterBarNavigationItem.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (197487 => 197488)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2016-03-03 03:45:50 UTC (rev 197487)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-03-03 03:50:37 UTC (rev 197488)
</span><span class="lines">@@ -1,5 +1,120 @@
</span><span class="cx"> 2016-03-02 Matt Baker <mattbaker@apple.com>
</span><span class="cx">
</span><ins>+ Web Inspector: Timelines UI redesign: replace content view container with a content browser
+ https://bugs.webkit.org/show_bug.cgi?id=153033
+ <rdar://problem/24195565>
+
+ Reviewed by Timothy Hatcher.
+
+ This patch replaces the ContentViewContainer in the Timelines tab with a ContentBrowser,
+ moves filtering controls from the sidebar to the new browser's navigation bar, and adds
+ a new leaf path component for the current ruler selection to the main content browser's
+ navigation bar.
+
+ * Localizations/en.lproj/localizedStrings.js:
+ New UI strings.
+
+ * UserInterface/Base/Utilities.js:
+ Added global en dash string.
+
+ * UserInterface/Main.html:
+ * UserInterface/Test.html:
+ New files.
+
+ * UserInterface/Models/TimelineRange.js:
+ (WebInspector.TimelineRange):
+ (WebInspector.TimelineRange.prototype.get startValue):
+ (WebInspector.TimelineRange.prototype.set startValue):
+ (WebInspector.TimelineRange.prototype.get endValue):
+ (WebInspector.TimelineRange.prototype.set endValue):
+ New represented object used by ruler selection path components.
+
+ * UserInterface/Views/FilterBarNavigationItem.js:
+ (WebInspector.FilterBarNavigationItem):
+ (WebInspector.FilterBarNavigationItem.prototype.get filterBar):
+ Adapter class for using a FilterBar as a NavigationItem.
+
+ * UserInterface/Views/TimelineIcons.css:
+ (.time-icon .icon):
+ Icon class used by ruler selection path component.
+
+ * UserInterface/Views/TimelineRecordingContentView.css:
+ (.content-view.timeline-recording > .content-browser):
+ (.content-view.timeline-recording > .content-browser > .navigation-bar):
+ (.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple):
+ (.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple .arrows):
+ (.content-view.timeline-recording > .content-browser > .content-view-container > .timeline-view > .data-grid td):
+ (.content-view.timeline-recording > .content-browser > .content-view-container > .timeline-view > .data-grid table.data):
+ (.content-view.timeline-recording > .content-view-container): Deleted.
+ (.content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid td): Deleted.
+ (.content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid table.data): Deleted.
+ New styles for the ContentBrowser that replaces the ContentViewContainer.
+
+ * UserInterface/Views/TimelineRecordingContentView.js:
+ (WebInspector.TimelineRecordingContentView):
+ Create the ContentBrowser, ruler selection path components, and the browser's filter bar.
+
+ (WebInspector.TimelineRecordingContentView.prototype.showOverviewTimelineView):
+ (WebInspector.TimelineRecordingContentView.prototype.showTimelineViewForTimeline):
+ Implemented by the content browser instead of the view container.
+
+ (WebInspector.TimelineRecordingContentView.prototype.get selectionPathComponents):
+ Add timeline and selection path components. Components for the current TimelineView
+ are now located in the lower content browser's navigation bar.
+
+ (WebInspector.TimelineRecordingContentView.prototype.get supplementalRepresentedObjects):
+ (WebInspector.TimelineRecordingContentView.prototype.get handleCopyEvent):
+ (WebInspector.TimelineRecordingContentView.prototype.get supportsSave):
+ (WebInspector.TimelineRecordingContentView.prototype.get saveData):
+ (WebInspector.TimelineRecordingContentView.prototype.get currentTimelineView):
+ (WebInspector.TimelineRecordingContentView.prototype.shown):
+ (WebInspector.TimelineRecordingContentView.prototype.hidden):
+ (WebInspector.TimelineRecordingContentView.prototype.closed):
+ (WebInspector.TimelineRecordingContentView.prototype.canGoBack):
+ (WebInspector.TimelineRecordingContentView.prototype.canGoForward):
+ (WebInspector.TimelineRecordingContentView.prototype.goBack):
+ (WebInspector.TimelineRecordingContentView.prototype.goForward):
+ (WebInspector.TimelineRecordingContentView.prototype.saveToCookie):
+ Implemented by the content browser instead of the view container.
+
+ (WebInspector.TimelineRecordingContentView.prototype.contentBrowserTreeElementForRepresentedObject):
+ Create the root tree element for the lower content browser's navigation bar.
+
+ (WebInspector.TimelineRecordingContentView.prototype._timeRangePathComponentSelected):
+ Update the ruler selection based on the new path component.
+
+ (WebInspector.TimelineRecordingContentView.prototype._contentViewSelectionPathComponentDidChange):
+ (WebInspector.TimelineRecordingContentView.prototype._contentViewSupplementalRepresentedObjectsDidChange):
+ (WebInspector.TimelineRecordingContentView.prototype._updateTimes):
+ (WebInspector.TimelineRecordingContentView.prototype._updateTimelineOverviewHeight):
+ Implemented by the content browser instead of the view container.
+
+ (WebInspector.TimelineRecordingContentView.prototype._timeRangeSelectionChanged):
+ Update the currently selected path component when the ruler selection changes.
+ If the entire range is selected, show the "Entire Recording" path component,
+ otherwise update the TimelineRange of the path component for the user-defined
+ selection and refresh all timeline range path components.
+
+ (WebInspector.TimelineRecordingContentView.prototype._updateTimeRangePathComponents):
+ Update title text and sibling relationships for ruler selection path components.
+
+ (WebInspector.TimelineRecordingContentView.prototype._createTimelineRangePathComponent):
+ Helper function for creating TimelineRange path components.
+
+ (WebInspector.TimelineRecordingContentView.prototype._currentContentViewDidChange):
+ The TimelineView scope bar is no longer added to the sidebar. The UI has been moved
+ to the lower content browser navigation bar.
+
+ (WebInspector.TimelineRecordingContentView.prototype._updateFrameSelection): Deleted.
+ No longer needed since the selected range is shown in the navigation bar.
+
+ * UserInterface/Views/TimelineView.js:
+ (WebInspector.TimelineView.prototype.get navigationItems):
+ Adds the TimelineView's scope bar (if any) to the lower content browser's navigation
+ bar. Items are inserted before the filter bar, which is always the right-most item.
+
+2016-03-02 Matt Baker <mattbaker@apple.com>
+
</ins><span class="cx"> Web Inspector: Timelines UI redesign: show content tree outline records in timeline data grids
</span><span class="cx"> https://bugs.webkit.org/show_bug.cgi?id=153032
</span><span class="cx"> <rdar://problem/24195317>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (197487 => 197488)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2016-03-03 03:45:50 UTC (rev 197487)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2016-03-03 03:50:37 UTC (rev 197488)
</span><span class="lines">@@ -31,6 +31,7 @@
</span><span class="cx"> localizedStrings["%s (hidden)"] = "%s (hidden)";
</span><span class="cx"> localizedStrings["%s Event Dispatched"] = "%s Event Dispatched";
</span><span class="cx"> localizedStrings["%s Prototype"] = "%s Prototype";
</span><ins>+localizedStrings["%s \u2013 %s"] = "%s \u2013 %s";
</ins><span class="cx"> localizedStrings["%s \u2014 %s"] = "%s \u2014 %s";
</span><span class="cx"> localizedStrings["%s delay"] = "%s delay";
</span><span class="cx"> localizedStrings["%s interval"] = "%s interval";
</span><span class="lines">@@ -285,6 +286,7 @@
</span><span class="cx"> localizedStrings["Enter a name."] = "Enter a name.";
</span><span class="cx"> localizedStrings["Enter a value"] = "Enter a value";
</span><span class="cx"> localizedStrings["Enter the name of a Keyframe"] = "Enter the name of a Keyframe";
</span><ins>+localizedStrings["Entire Recording"] = "Entire Recording";
</ins><span class="cx"> localizedStrings["Error: "] = "Error: ";
</span><span class="cx"> localizedStrings["Errors"] = "Errors";
</span><span class="cx"> localizedStrings["Eval Code"] = "Eval Code";
</span><span class="lines">@@ -307,6 +309,7 @@
</span><span class="cx"> localizedStrings["Filter %s"] = "Filter %s";
</span><span class="cx"> localizedStrings["Filter Breakpoint List"] = "Filter Breakpoint List";
</span><span class="cx"> localizedStrings["Filter Console Log"] = "Filter Console Log";
</span><ins>+localizedStrings["Filter Records"] = "Filter Records";
</ins><span class="cx"> localizedStrings["Filter Resource List"] = "Filter Resource List";
</span><span class="cx"> localizedStrings["Filter Search Results"] = "Filter Search Results";
</span><span class="cx"> localizedStrings["Filter Storage List"] = "Filter Storage List";
</span><span class="lines">@@ -336,6 +339,7 @@
</span><span class="cx"> localizedStrings["Frame URL"] = "Frame URL";
</span><span class="cx"> localizedStrings["Frame: %d (%s \u2013 %s)"] = "Frame: %d (%s \u2013 %s)";
</span><span class="cx"> localizedStrings["Frames"] = "Frames";
</span><ins>+localizedStrings["Frames %d \u2013 %d"] = "Frames %d \u2013 %d";
</ins><span class="cx"> localizedStrings["Frames: %d \u2013 %d (%s \u2013 %s)"] = "Frames: %d \u2013 %d (%s \u2013 %s)";
</span><span class="cx"> localizedStrings["Frames: None Selected"] = "Frames: None Selected";
</span><span class="cx"> localizedStrings["Full Garbage Collection"] = "Full Garbage Collection";
</span><span class="lines">@@ -497,6 +501,7 @@
</span><span class="cx"> localizedStrings["Over 1 ms"] = "Over 1 ms";
</span><span class="cx"> localizedStrings["Over 15 ms"] = "Over 15 ms";
</span><span class="cx"> localizedStrings["Overflow"] = "Overflow";
</span><ins>+localizedStrings["Overview"] = "Overview";
</ins><span class="cx"> localizedStrings["Owns"] = "Owns";
</span><span class="cx"> localizedStrings["Padding"] = "Padding";
</span><span class="cx"> localizedStrings["Page"] = "Page";
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceBaseUtilitiesjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js (197487 => 197488)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js 2016-03-03 03:45:50 UTC (rev 197487)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js 2016-03-03 03:50:37 UTC (rev 197488)
</span><span class="lines">@@ -24,6 +24,7 @@
</span><span class="cx"> */
</span><span class="cx">
</span><span class="cx"> var emDash = "\u2014";
</span><ins>+var enDash = "\u2013";
</ins><span class="cx"> var ellipsis = "\u2026";
</span><span class="cx">
</span><span class="cx"> Object.defineProperty(Object, "shallowCopy",
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (197487 => 197488)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2016-03-03 03:45:50 UTC (rev 197487)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2016-03-03 03:50:37 UTC (rev 197488)
</span><span class="lines">@@ -266,6 +266,7 @@
</span><span class="cx"> <script src="Models/SourceCode.js"></script>
</span><span class="cx"> <script src="Models/SourceCodeLocation.js"></script>
</span><span class="cx"> <script src="Models/Timeline.js"></script>
</span><ins>+ <script src="Models/TimelineRange.js"></script>
</ins><span class="cx"> <script src="Models/TimelineRecord.js"></script>
</span><span class="cx">
</span><span class="cx"> <script src="Models/AnalyzerMessage.js"></script>
</span><span class="lines">@@ -489,6 +490,7 @@
</span><span class="cx"> <script src="Views/EventListenerSectionGroup.js"></script>
</span><span class="cx"> <script src="Views/FilterBar.js"></script>
</span><span class="cx"> <script src="Views/FilterBarButton.js"></script>
</span><ins>+ <script src="Views/FilterBarNavigationItem.js"></script>
</ins><span class="cx"> <script src="Views/FindBanner.js"></script>
</span><span class="cx"> <script src="Views/FlexibleSpaceNavigationItem.js"></script>
</span><span class="cx"> <script src="Views/FontResourceContentView.js"></script>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceModelsTimelineRangejsfromrev197487trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordingContentViewcss"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebInspectorUI/UserInterface/Models/TimelineRange.js (from rev 197487, trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css) (0 => 197488)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Models/TimelineRange.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/TimelineRange.js 2016-03-03 03:50:37 UTC (rev 197488)
</span><span class="lines">@@ -0,0 +1,41 @@
</span><ins>+/*
+ * Copyright (C) 2016 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.TimelineRange = class TimelineRange extends WebInspector.Object
+{
+ constructor(startValue, endValue)
+ {
+ super();
+
+ this._startValue = startValue;
+ this._endValue = endValue;
+ }
+
+ get startValue() { return this._startValue; }
+ set startValue(x) { this._startValue = x; }
+
+ get endValue() { return this._endValue; }
+ set endValue(x) { this._endValue = x; }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceTesthtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Test.html (197487 => 197488)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Test.html 2016-03-03 03:45:50 UTC (rev 197487)
+++ trunk/Source/WebInspectorUI/UserInterface/Test.html 2016-03-03 03:50:37 UTC (rev 197488)
</span><span class="lines">@@ -82,6 +82,7 @@
</span><span class="cx"> <script src="Models/SourceCode.js"></script>
</span><span class="cx"> <script src="Models/SourceCodeLocation.js"></script>
</span><span class="cx"> <script src="Models/Timeline.js"></script>
</span><ins>+ <script src="Models/TimelineRange.js"></script>
</ins><span class="cx"> <script src="Models/TimelineRecord.js"></script>
</span><span class="cx">
</span><span class="cx"> <script src="Models/Breakpoint.js"></script>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsFilterBarNavigationItemjsfromrev197487trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordingContentViewcss"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebInspectorUI/UserInterface/Views/FilterBarNavigationItem.js (from rev 197487, trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css) (0 => 197488)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/FilterBarNavigationItem.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FilterBarNavigationItem.js 2016-03-03 03:50:37 UTC (rev 197488)
</span><span class="lines">@@ -0,0 +1,41 @@
</span><ins>+/*
+ * Copyright (C) 2016 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.FilterBarNavigationItem = class FilterBarNavigationItem extends WebInspector.NavigationItem
+{
+ constructor()
+ {
+ super();
+
+ this._filterBar = new WebInspector.FilterBar(this.element);
+ }
+
+ // Public
+
+ get filterBar()
+ {
+ return this._filterBar;
+ }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineIconscss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineIcons.css (197487 => 197488)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineIcons.css 2016-03-03 03:45:50 UTC (rev 197487)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineIcons.css 2016-03-03 03:50:37 UTC (rev 197488)
</span><span class="lines">@@ -81,6 +81,12 @@
</span><span class="cx"> content: -webkit-image-set(url(../Images/Stopwatch.png) 1x, url(../Images/Stopwatch@2x.png) 2x);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.time-icon .icon {
+ content: url(../Images/Timeline.svg);
+ width: 13px;
+ opacity: 0.6;
+}
+
</ins><span class="cx"> .style-record .icon {
</span><span class="cx"> content: url(../Images/TimelineRecordStyle.svg);
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordingContentViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css (197487 => 197488)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css 2016-03-03 03:45:50 UTC (rev 197487)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css 2016-03-03 03:50:37 UTC (rev 197488)
</span><span class="lines">@@ -30,20 +30,36 @@
</span><span class="cx"> right: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.content-view.timeline-recording > .content-view-container {
</del><ins>+.content-view.timeline-recording > .content-browser {
</ins><span class="cx"> position: absolute;
</span><span class="cx"> left: 0;
</span><span class="cx"> right: 0;
</span><span class="cx"> bottom: 0;
</span><span class="cx"> overflow: hidden;
</span><ins>+
+ border-top: 1px solid var(--border-color);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid td {
</del><ins>+.content-view.timeline-recording > .content-browser > .navigation-bar {
+ background-color: var(--panel-background-color);
+ border-bottom: none;
+}
+
+.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple {
+ background-color: transparent;
+ color: black;
+}
+
+.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple .arrows {
+ color: black;
+}
+
+.content-view.timeline-recording > .content-browser > .content-view-container > .timeline-view > .data-grid td {
</ins><span class="cx"> height: 16px;
</span><span class="cx"> line-height: 16px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid table.data {
</del><ins>+.content-view.timeline-recording > .content-browser > .content-view-container > .timeline-view > .data-grid table.data {
</ins><span class="cx"> background-image: linear-gradient(to bottom, white, white 50%, hsl(0, 0%, 95%) 50%, hsl(0, 0%, 95%));
</span><span class="cx"> background-size: 100% 40px;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordingContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js (197487 => 197488)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js 2016-03-03 03:45:50 UTC (rev 197487)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js 2016-03-03 03:50:37 UTC (rev 197488)
</span><span class="lines">@@ -44,10 +44,20 @@
</span><span class="cx"> this._timelineOverview.addEventListener(WebInspector.TimelineOverview.Event.TimelineSelected, this._timelineSelected, this);
</span><span class="cx"> this.addSubview(this._timelineOverview);
</span><span class="cx">
</span><del>- this._contentViewContainer = new WebInspector.ContentViewContainer;
- this._contentViewContainer.addEventListener(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange, this._currentContentViewDidChange, this);
- this.addSubview(this._contentViewContainer);
</del><ins>+ const disableBackForward = true;
+ this._timelineContentBrowser = new WebInspector.ContentBrowser(null, this, disableBackForward);
+ this._timelineContentBrowser.addEventListener(WebInspector.ContentBrowser.Event.CurrentContentViewDidChange, this._currentContentViewDidChange, this);
</ins><span class="cx">
</span><ins>+ this._entireRecordingPathComponent = this._createTimelineRangePathComponent(WebInspector.UIString("Entire Recording"));
+ this._timelineSelectionPathComponent = this._createTimelineRangePathComponent();
+ this._timelineSelectionPathComponent.previousSibling = this._entireRecordingPathComponent;
+ this._selectedTimeRangePathComponent = this._entireRecordingPathComponent;
+
+ this._filterBarNavigationItem = new WebInspector.FilterBarNavigationItem;
+ this._filterBarNavigationItem.filterBar.placeholder = WebInspector.UIString("Filter Records");
+ this._timelineContentBrowser.navigationBar.addNavigationItem(this._filterBarNavigationItem);
+ this.addSubview(this._timelineContentBrowser);
+
</ins><span class="cx"> this._clearTimelineNavigationItem = new WebInspector.ButtonNavigationItem("clear-timeline", WebInspector.UIString("Clear Timeline"), "Images/NavigationItemTrash.svg", 15, 15);
</span><span class="cx"> this._clearTimelineNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._clearTimeline, this);
</span><span class="cx">
</span><span class="lines">@@ -87,7 +97,7 @@
</span><span class="cx">
</span><span class="cx"> showOverviewTimelineView()
</span><span class="cx"> {
</span><del>- this._contentViewContainer.showContentView(this._overviewTimelineView);
</del><ins>+ this._timelineContentBrowser.showContentView(this._overviewTimelineView);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> showTimelineViewForTimeline(timeline)
</span><span class="lines">@@ -97,7 +107,7 @@
</span><span class="cx"> if (!this._timelineViewMap.has(timeline))
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- this._contentViewContainer.showContentView(this._timelineViewMap.get(timeline));
</del><ins>+ this._timelineContentBrowser.showContentView(this._timelineViewMap.get(timeline));
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> get supportsSplitContentBrowser()
</span><span class="lines">@@ -108,21 +118,23 @@
</span><span class="cx">
</span><span class="cx"> get selectionPathComponents()
</span><span class="cx"> {
</span><del>- if (!this._contentViewContainer.currentContentView)
</del><ins>+ if (!this._timelineContentBrowser.currentContentView)
</ins><span class="cx"> return [];
</span><span class="cx">
</span><del>- var pathComponents = this._contentViewContainer.currentContentView.selectionPathComponents || [];
- var representedObject = this._contentViewContainer.currentContentView.representedObject;
</del><ins>+ let pathComponents = [];
+ let representedObject = this._timelineContentBrowser.currentContentView.representedObject;
</ins><span class="cx"> if (representedObject instanceof WebInspector.Timeline)
</span><del>- pathComponents.unshift(this._pathComponentMap.get(representedObject));
</del><ins>+ pathComponents.push(this._pathComponentMap.get(representedObject));
+
+ pathComponents.push(this._selectedTimeRangePathComponent);
</ins><span class="cx"> return pathComponents;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> get supplementalRepresentedObjects()
</span><span class="cx"> {
</span><del>- if (!this._contentViewContainer.currentContentView)
</del><ins>+ if (!this._timelineContentBrowser.currentContentView)
</ins><span class="cx"> return [];
</span><del>- return this._contentViewContainer.currentContentView.supplementalRepresentedObjects;
</del><ins>+ return this._timelineContentBrowser.currentContentView.supplementalRepresentedObjects;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> get navigationItems()
</span><span class="lines">@@ -132,25 +144,25 @@
</span><span class="cx">
</span><span class="cx"> get handleCopyEvent()
</span><span class="cx"> {
</span><del>- var currentContentView = this._contentViewContainer.currentContentView;
</del><ins>+ let currentContentView = this._timelineContentBrowser.currentContentView;
</ins><span class="cx"> return currentContentView && typeof currentContentView.handleCopyEvent === "function" ? currentContentView.handleCopyEvent.bind(currentContentView) : null;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> get supportsSave()
</span><span class="cx"> {
</span><del>- var currentContentView = this._contentViewContainer.currentContentView;
</del><ins>+ let currentContentView = this._timelineContentBrowser.currentContentView;
</ins><span class="cx"> return currentContentView && currentContentView.supportsSave;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> get saveData()
</span><span class="cx"> {
</span><del>- var currentContentView = this._contentViewContainer.currentContentView;
</del><ins>+ let currentContentView = this._timelineContentBrowser.currentContentView;
</ins><span class="cx"> return currentContentView && currentContentView.saveData || null;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> get currentTimelineView()
</span><span class="cx"> {
</span><del>- var contentView = this._contentViewContainer.currentContentView;
</del><ins>+ let contentView = this._timelineContentBrowser.currentContentView;
</ins><span class="cx"> return (contentView instanceof WebInspector.TimelineView) ? contentView : null;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -162,7 +174,7 @@
</span><span class="cx"> shown()
</span><span class="cx"> {
</span><span class="cx"> this._timelineOverview.shown();
</span><del>- this._contentViewContainer.shown();
</del><ins>+ this._timelineContentBrowser.shown();
</ins><span class="cx"> this._clearTimelineNavigationItem.enabled = !this._recording.readonly && !isNaN(this._recording.startTime);
</span><span class="cx">
</span><span class="cx"> this._currentContentViewDidChange();
</span><span class="lines">@@ -174,7 +186,7 @@
</span><span class="cx"> hidden()
</span><span class="cx"> {
</span><span class="cx"> this._timelineOverview.hidden();
</span><del>- this._contentViewContainer.hidden();
</del><ins>+ this._timelineContentBrowser.hidden();
</ins><span class="cx">
</span><span class="cx"> if (this._updating)
</span><span class="cx"> this._stopUpdatingCurrentTime();
</span><span class="lines">@@ -182,7 +194,7 @@
</span><span class="cx">
</span><span class="cx"> closed()
</span><span class="cx"> {
</span><del>- this._contentViewContainer.closeAllContentViews();
</del><ins>+ this._timelinContentBrowser.contentViewContainer.closeAllContentViews();
</ins><span class="cx">
</span><span class="cx"> this._recording.removeEventListener(null, null, this);
</span><span class="cx">
</span><span class="lines">@@ -193,29 +205,29 @@
</span><span class="cx">
</span><span class="cx"> canGoBack()
</span><span class="cx"> {
</span><del>- return this._contentViewContainer.canGoBack();
</del><ins>+ return this._timelineContentBrowser.canGoBack();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> canGoForward()
</span><span class="cx"> {
</span><del>- return this._contentViewContainer.canGoForward();
</del><ins>+ return this._timelineContentBrowser.canGoForward();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> goBack()
</span><span class="cx"> {
</span><del>- this._contentViewContainer.goBack();
</del><ins>+ this._timelineContentBrowser.goBack();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> goForward()
</span><span class="cx"> {
</span><del>- this._contentViewContainer.goForward();
</del><ins>+ this._timelineContentBrowser.goForward();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> saveToCookie(cookie)
</span><span class="cx"> {
</span><span class="cx"> cookie.type = WebInspector.ContentViewCookieType.Timelines;
</span><span class="cx">
</span><del>- var currentContentView = this._contentViewContainer.currentContentView;
</del><ins>+ let currentContentView = this._timelineContentBrowser.currentContentView;
</ins><span class="cx"> if (!currentContentView || currentContentView === this._overviewTimelineView)
</span><span class="cx"> cookie[WebInspector.TimelineRecordingContentView.SelectedTimelineTypeCookieKey] = WebInspector.TimelineRecordingContentView.OverviewTimelineViewCookieValue;
</span><span class="cx"> else if (currentContentView.representedObject instanceof WebInspector.Timeline)
</span><span class="lines">@@ -319,6 +331,27 @@
</span><span class="cx"> return true;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ // ContentBrowser delegate
+
+ contentBrowserTreeElementForRepresentedObject(contentBrowser, representedObject)
+ {
+ if (!(representedObject instanceof WebInspector.Timeline) && !(representedObject instanceof WebInspector.TimelineRecording))
+ return null;
+
+ let iconClassName;
+ let title;
+ if (representedObject instanceof WebInspector.Timeline) {
+ iconClassName = WebInspector.TimelineTabContentView.iconClassNameForTimeline(representedObject);
+ title = WebInspector.UIString("Details");
+ } else {
+ iconClassName = "stopwatch-icon";
+ title = WebInspector.UIString("Overview");
+ }
+
+ const hasChildren = false;
+ return new WebInspector.GeneralTreeElement(iconClassName, title, representedObject, hasChildren);
+ }
+
</ins><span class="cx"> // Private
</span><span class="cx">
</span><span class="cx"> _currentContentViewDidChange(event)
</span><span class="lines">@@ -335,7 +368,6 @@
</span><span class="cx"> if (timelineView) {
</span><span class="cx"> this._timelineSidebarPanel.contentTreeOutline = timelineView.navigationSidebarTreeOutline;
</span><span class="cx"> this._timelineSidebarPanel.contentTreeOutlineLabel = timelineView.navigationSidebarTreeOutlineLabel;
</span><del>- this._timelineSidebarPanel.contentTreeOutlineScopeBar = timelineView.navigationSidebarTreeOutlineScopeBar;
</del><span class="cx">
</span><span class="cx"> this._updateTimelineViewSelection(timelineView);
</span><span class="cx"> timelineView.currentTime = this._currentTime;
</span><span class="lines">@@ -356,9 +388,25 @@
</span><span class="cx"> this._timelineSidebarPanel.showTimelineViewForTimeline(event.data.pathComponent.representedObject);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ _timeRangePathComponentSelected(event)
+ {
+ let selectedPathComponent = event.data.pathComponent;
+ if (selectedPathComponent === this._selectedTimeRangePathComponent)
+ return;
+
+ let timelineRuler = this._timelineOverview.timelineRuler
+ if (selectedPathComponent === this._entireRecordingPathComponent)
+ timelineRuler.selectEntireRange();
+ else {
+ let timelineRange = selectedPathComponent.representedObject;
+ timelineRuler.selectionStartTime = timelineRuler.zeroTime + timelineRange.startValue;
+ timelineRuler.selectionEndTime = timelineRuler.zeroTime + timelineRange.endValue;
+ }
+ }
+
</ins><span class="cx"> _contentViewSelectionPathComponentDidChange(event)
</span><span class="cx"> {
</span><del>- if (event.target !== this._contentViewContainer.currentContentView)
</del><ins>+ if (event.target !== this._timelineContentBrowser.currentContentView)
</ins><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
</span><span class="lines">@@ -373,7 +421,7 @@
</span><span class="cx">
</span><span class="cx"> _contentViewSupplementalRepresentedObjectsDidChange(event)
</span><span class="cx"> {
</span><del>- if (event.target !== this._contentViewContainer.currentContentView)
</del><ins>+ if (event.target !== this._timelineContentBrowser.currentContentView)
</ins><span class="cx"> return;
</span><span class="cx"> this.dispatchEventToListeners(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange);
</span><span class="cx"> }
</span><span class="lines">@@ -412,8 +460,12 @@
</span><span class="cx"> if (this._startTimeNeedsReset && !isNaN(startTime)) {
</span><span class="cx"> this._timelineOverview.startTime = startTime;
</span><span class="cx"> this._overviewTimelineView.zeroTime = startTime;
</span><del>- for (var timelineView of this._timelineViewMap.values())
</del><ins>+ for (var timelineView of this._timelineViewMap.values()) {
+ if (timelineView.representedObject.type === WebInspector.TimelineRecord.Type.RenderingFrame)
+ continue;
+
</ins><span class="cx"> timelineView.zeroTime = startTime;
</span><ins>+ }
</ins><span class="cx">
</span><span class="cx"> this._startTimeNeedsReset = false;
</span><span class="cx"> }
</span><span class="lines">@@ -539,7 +591,7 @@
</span><span class="cx">
</span><span class="cx"> let styleValue = (rulerHeight + this.timelineOverviewHeight) + "px";
</span><span class="cx"> this._timelineOverview.element.style.height = styleValue;
</span><del>- this._contentViewContainer.element.style.top = styleValue;
</del><ins>+ this._timelineContentBrowser.element.style.top = styleValue;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _instrumentAdded(instrumentOrEvent)
</span><span class="lines">@@ -630,13 +682,29 @@
</span><span class="cx">
</span><span class="cx"> _timeRangeSelectionChanged(event)
</span><span class="cx"> {
</span><del>- if (this.currentTimelineView) {
- this._updateTimelineViewSelection(this.currentTimelineView);
</del><ins>+ console.assert(this.currentTimelineView);
+ if (!this.currentTimelineView)
+ return;
</ins><span class="cx">
</span><del>- if (this.currentTimelineView.representedObject.type === WebInspector.TimelineRecord.Type.RenderingFrame)
- this._updateFrameSelection();
</del><ins>+ this._updateTimelineViewSelection(this.currentTimelineView);
+
+ let selectedPathComponent;
+ if (this._timelineOverview.timelineRuler.entireRangeSelected)
+ selectedPathComponent = this._entireRecordingPathComponent;
+ else {
+ let timelineRange = this._timelineSelectionPathComponent.representedObject;
+ timelineRange.startValue = this.currentTimelineView.startTime;
+ timelineRange.endValue = this.currentTimelineView.endTime;
+
+ this._updateTimeRangePathComponents();
+ selectedPathComponent = this._timelineSelectionPathComponent;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+ if (this._selectedTimeRangePathComponent !== selectedPathComponent) {
+ this._selectedTimeRangePathComponent = selectedPathComponent;
+ this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+ }
+
</ins><span class="cx"> // Delay until the next frame to stay in sync with the current timeline view's time-based layout changes.
</span><span class="cx"> requestAnimationFrame(function() {
</span><span class="cx"> var selectedTreeElement = this.currentTimelineView && this.currentTimelineView.navigationSidebarTreeOutline ? this.currentTimelineView.navigationSidebarTreeOutline.selectedTreeElement : null;
</span><span class="lines">@@ -684,17 +752,44 @@
</span><span class="cx"> this.showOverviewTimelineView();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- _updateFrameSelection()
</del><ins>+ _updateTimeRangePathComponents()
</ins><span class="cx"> {
</span><del>- console.assert(this._renderingFrameTimeline);
- if (!this._renderingFrameTimeline)
</del><ins>+ let timelineRange = this._timelineSelectionPathComponent.representedObject;
+ let startValue = timelineRange.startValue;
+ let endValue = timelineRange.endValue;
+ if (isNaN(startValue) || isNaN(endValue)) {
+ this._entireRecordingPathComponent.nextSibling = null;
</ins><span class="cx"> return;
</span><ins>+ }
</ins><span class="cx">
</span><del>- let startIndex = this._timelineOverview.selectionStartTime;
- let endIndex = startIndex + this._timelineOverview.selectionDuration - 1;
- this._timelineSidebarPanel.updateFrameSelection(startIndex, endIndex);
</del><ins>+ this._entireRecordingPathComponent.nextSibling = this._timelineSelectionPathComponent;
+
+ let displayName;
+ if (this._timelineOverview.viewMode === WebInspector.TimelineOverview.ViewMode.Timelines) {
+ let selectionStart = Number.secondsToString(startValue, true);
+ let selectionEnd = Number.secondsToString(endValue, true);
+ displayName = WebInspector.UIString("%s \u2013 %s").format(selectionStart, selectionEnd);
+ } else {
+ startValue += 1; // Convert index to frame number.
+ if (startValue === endValue)
+ displayName = WebInspector.UIString("Frame %d").format(startValue);
+ else
+ displayName = WebInspector.UIString("Frames %d \u2013 %d").format(startValue, endValue);
+ }
+
+ this._timelineSelectionPathComponent.displayName = displayName;
+ this._timelineSelectionPathComponent.title = displayName;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+ _createTimelineRangePathComponent(title)
+ {
+ let range = new WebInspector.TimelineRange(NaN, NaN);
+ let pathComponent = new WebInspector.HierarchicalPathComponent(title || enDash, "time-icon", range);
+ pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._timeRangePathComponentSelected, this);
+
+ return pathComponent;
+ }
+
</ins><span class="cx"> _updateTimelineViewSelection(timelineView)
</span><span class="cx"> {
</span><span class="cx"> let timelineRuler = this._timelineOverview.timelineRuler;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.js (197487 => 197488)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.js 2016-03-03 03:45:50 UTC (rev 197487)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.js 2016-03-03 03:50:37 UTC (rev 197488)
</span><span class="lines">@@ -52,6 +52,11 @@
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="cx">
</span><ins>+ get navigationItems()
+ {
+ return this._scopeBar ? [this._scopeBar] : [];
+ }
+
</ins><span class="cx"> get navigationSidebarTreeOutline()
</span><span class="cx"> {
</span><span class="cx"> return this._contentTreeOutline;
</span></span></pre>
</div>
</div>
</body>
</html>