Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (197487 => 197488)
--- 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)
@@ -1,5 +1,120 @@
2016-03-02 Matt Baker <[email protected]>
+ 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 <[email protected]>
+
Web Inspector: Timelines UI redesign: show content tree outline records in timeline data grids
https://bugs.webkit.org/show_bug.cgi?id=153032
<rdar://problem/24195317>
Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (197487 => 197488)
--- 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)
@@ -31,6 +31,7 @@
localizedStrings["%s (hidden)"] = "%s (hidden)";
localizedStrings["%s Event Dispatched"] = "%s Event Dispatched";
localizedStrings["%s Prototype"] = "%s Prototype";
+localizedStrings["%s \u2013 %s"] = "%s \u2013 %s";
localizedStrings["%s \u2014 %s"] = "%s \u2014 %s";
localizedStrings["%s delay"] = "%s delay";
localizedStrings["%s interval"] = "%s interval";
@@ -285,6 +286,7 @@
localizedStrings["Enter a name."] = "Enter a name.";
localizedStrings["Enter a value"] = "Enter a value";
localizedStrings["Enter the name of a Keyframe"] = "Enter the name of a Keyframe";
+localizedStrings["Entire Recording"] = "Entire Recording";
localizedStrings["Error: "] = "Error: ";
localizedStrings["Errors"] = "Errors";
localizedStrings["Eval Code"] = "Eval Code";
@@ -307,6 +309,7 @@
localizedStrings["Filter %s"] = "Filter %s";
localizedStrings["Filter Breakpoint List"] = "Filter Breakpoint List";
localizedStrings["Filter Console Log"] = "Filter Console Log";
+localizedStrings["Filter Records"] = "Filter Records";
localizedStrings["Filter Resource List"] = "Filter Resource List";
localizedStrings["Filter Search Results"] = "Filter Search Results";
localizedStrings["Filter Storage List"] = "Filter Storage List";
@@ -336,6 +339,7 @@
localizedStrings["Frame URL"] = "Frame URL";
localizedStrings["Frame: %d (%s \u2013 %s)"] = "Frame: %d (%s \u2013 %s)";
localizedStrings["Frames"] = "Frames";
+localizedStrings["Frames %d \u2013 %d"] = "Frames %d \u2013 %d";
localizedStrings["Frames: %d \u2013 %d (%s \u2013 %s)"] = "Frames: %d \u2013 %d (%s \u2013 %s)";
localizedStrings["Frames: None Selected"] = "Frames: None Selected";
localizedStrings["Full Garbage Collection"] = "Full Garbage Collection";
@@ -497,6 +501,7 @@
localizedStrings["Over 1 ms"] = "Over 1 ms";
localizedStrings["Over 15 ms"] = "Over 15 ms";
localizedStrings["Overflow"] = "Overflow";
+localizedStrings["Overview"] = "Overview";
localizedStrings["Owns"] = "Owns";
localizedStrings["Padding"] = "Padding";
localizedStrings["Page"] = "Page";
Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js (197487 => 197488)
--- 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)
@@ -24,6 +24,7 @@
*/
var emDash = "\u2014";
+var enDash = "\u2013";
var ellipsis = "\u2026";
Object.defineProperty(Object, "shallowCopy",
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (197487 => 197488)
--- 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)
@@ -266,6 +266,7 @@
<script src=""
<script src=""
<script src=""
+ <script src=""
<script src=""
<script src=""
@@ -489,6 +490,7 @@
<script src=""
<script src=""
<script src=""
+ <script src=""
<script src=""
<script src=""
<script src=""
Copied: trunk/Source/WebInspectorUI/UserInterface/Models/TimelineRange.js (from rev 197487, trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css) (0 => 197488)
--- 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)
@@ -0,0 +1,41 @@
+/*
+ * 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; }
+};
Modified: trunk/Source/WebInspectorUI/UserInterface/Test.html (197487 => 197488)
--- 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)
@@ -82,6 +82,7 @@
<script src=""
<script src=""
<script src=""
+ <script src=""
<script src=""
<script src=""
Copied: trunk/Source/WebInspectorUI/UserInterface/Views/FilterBarNavigationItem.js (from rev 197487, trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css) (0 => 197488)
--- 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)
@@ -0,0 +1,41 @@
+/*
+ * 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;
+ }
+};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineIcons.css (197487 => 197488)
--- 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)
@@ -81,6 +81,12 @@
content: -webkit-image-set(url(../Images/Stopwatch.png) 1x, url(../Images/[email protected]) 2x);
}
+.time-icon .icon {
+ content: url(../Images/Timeline.svg);
+ width: 13px;
+ opacity: 0.6;
+}
+
.style-record .icon {
content: url(../Images/TimelineRecordStyle.svg);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css (197487 => 197488)
--- 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)
@@ -30,20 +30,36 @@
right: 0;
}
-.content-view.timeline-recording > .content-view-container {
+.content-view.timeline-recording > .content-browser {
position: absolute;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
+
+ border-top: 1px solid var(--border-color);
}
-.content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid td {
+.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 {
height: 16px;
line-height: 16px;
}
-.content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid table.data {
+.content-view.timeline-recording > .content-browser > .content-view-container > .timeline-view > .data-grid table.data {
background-image: linear-gradient(to bottom, white, white 50%, hsl(0, 0%, 95%) 50%, hsl(0, 0%, 95%));
background-size: 100% 40px;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js (197487 => 197488)
--- 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)
@@ -44,10 +44,20 @@
this._timelineOverview.addEventListener(WebInspector.TimelineOverview.Event.TimelineSelected, this._timelineSelected, this);
this.addSubview(this._timelineOverview);
- this._contentViewContainer = new WebInspector.ContentViewContainer;
- this._contentViewContainer.addEventListener(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange, this._currentContentViewDidChange, this);
- this.addSubview(this._contentViewContainer);
+ const disableBackForward = true;
+ this._timelineContentBrowser = new WebInspector.ContentBrowser(null, this, disableBackForward);
+ this._timelineContentBrowser.addEventListener(WebInspector.ContentBrowser.Event.CurrentContentViewDidChange, this._currentContentViewDidChange, this);
+ 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);
+
this._clearTimelineNavigationItem = new WebInspector.ButtonNavigationItem("clear-timeline", WebInspector.UIString("Clear Timeline"), "Images/NavigationItemTrash.svg", 15, 15);
this._clearTimelineNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._clearTimeline, this);
@@ -87,7 +97,7 @@
showOverviewTimelineView()
{
- this._contentViewContainer.showContentView(this._overviewTimelineView);
+ this._timelineContentBrowser.showContentView(this._overviewTimelineView);
}
showTimelineViewForTimeline(timeline)
@@ -97,7 +107,7 @@
if (!this._timelineViewMap.has(timeline))
return;
- this._contentViewContainer.showContentView(this._timelineViewMap.get(timeline));
+ this._timelineContentBrowser.showContentView(this._timelineViewMap.get(timeline));
}
get supportsSplitContentBrowser()
@@ -108,21 +118,23 @@
get selectionPathComponents()
{
- if (!this._contentViewContainer.currentContentView)
+ if (!this._timelineContentBrowser.currentContentView)
return [];
- var pathComponents = this._contentViewContainer.currentContentView.selectionPathComponents || [];
- var representedObject = this._contentViewContainer.currentContentView.representedObject;
+ let pathComponents = [];
+ let representedObject = this._timelineContentBrowser.currentContentView.representedObject;
if (representedObject instanceof WebInspector.Timeline)
- pathComponents.unshift(this._pathComponentMap.get(representedObject));
+ pathComponents.push(this._pathComponentMap.get(representedObject));
+
+ pathComponents.push(this._selectedTimeRangePathComponent);
return pathComponents;
}
get supplementalRepresentedObjects()
{
- if (!this._contentViewContainer.currentContentView)
+ if (!this._timelineContentBrowser.currentContentView)
return [];
- return this._contentViewContainer.currentContentView.supplementalRepresentedObjects;
+ return this._timelineContentBrowser.currentContentView.supplementalRepresentedObjects;
}
get navigationItems()
@@ -132,25 +144,25 @@
get handleCopyEvent()
{
- var currentContentView = this._contentViewContainer.currentContentView;
+ let currentContentView = this._timelineContentBrowser.currentContentView;
return currentContentView && typeof currentContentView.handleCopyEvent === "function" ? currentContentView.handleCopyEvent.bind(currentContentView) : null;
}
get supportsSave()
{
- var currentContentView = this._contentViewContainer.currentContentView;
+ let currentContentView = this._timelineContentBrowser.currentContentView;
return currentContentView && currentContentView.supportsSave;
}
get saveData()
{
- var currentContentView = this._contentViewContainer.currentContentView;
+ let currentContentView = this._timelineContentBrowser.currentContentView;
return currentContentView && currentContentView.saveData || null;
}
get currentTimelineView()
{
- var contentView = this._contentViewContainer.currentContentView;
+ let contentView = this._timelineContentBrowser.currentContentView;
return (contentView instanceof WebInspector.TimelineView) ? contentView : null;
}
@@ -162,7 +174,7 @@
shown()
{
this._timelineOverview.shown();
- this._contentViewContainer.shown();
+ this._timelineContentBrowser.shown();
this._clearTimelineNavigationItem.enabled = !this._recording.readonly && !isNaN(this._recording.startTime);
this._currentContentViewDidChange();
@@ -174,7 +186,7 @@
hidden()
{
this._timelineOverview.hidden();
- this._contentViewContainer.hidden();
+ this._timelineContentBrowser.hidden();
if (this._updating)
this._stopUpdatingCurrentTime();
@@ -182,7 +194,7 @@
closed()
{
- this._contentViewContainer.closeAllContentViews();
+ this._timelinContentBrowser.contentViewContainer.closeAllContentViews();
this._recording.removeEventListener(null, null, this);
@@ -193,29 +205,29 @@
canGoBack()
{
- return this._contentViewContainer.canGoBack();
+ return this._timelineContentBrowser.canGoBack();
}
canGoForward()
{
- return this._contentViewContainer.canGoForward();
+ return this._timelineContentBrowser.canGoForward();
}
goBack()
{
- this._contentViewContainer.goBack();
+ this._timelineContentBrowser.goBack();
}
goForward()
{
- this._contentViewContainer.goForward();
+ this._timelineContentBrowser.goForward();
}
saveToCookie(cookie)
{
cookie.type = WebInspector.ContentViewCookieType.Timelines;
- var currentContentView = this._contentViewContainer.currentContentView;
+ let currentContentView = this._timelineContentBrowser.currentContentView;
if (!currentContentView || currentContentView === this._overviewTimelineView)
cookie[WebInspector.TimelineRecordingContentView.SelectedTimelineTypeCookieKey] = WebInspector.TimelineRecordingContentView.OverviewTimelineViewCookieValue;
else if (currentContentView.representedObject instanceof WebInspector.Timeline)
@@ -319,6 +331,27 @@
return true;
}
+ // 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);
+ }
+
// Private
_currentContentViewDidChange(event)
@@ -335,7 +368,6 @@
if (timelineView) {
this._timelineSidebarPanel.contentTreeOutline = timelineView.navigationSidebarTreeOutline;
this._timelineSidebarPanel.contentTreeOutlineLabel = timelineView.navigationSidebarTreeOutlineLabel;
- this._timelineSidebarPanel.contentTreeOutlineScopeBar = timelineView.navigationSidebarTreeOutlineScopeBar;
this._updateTimelineViewSelection(timelineView);
timelineView.currentTime = this._currentTime;
@@ -356,9 +388,25 @@
this._timelineSidebarPanel.showTimelineViewForTimeline(event.data.pathComponent.representedObject);
}
+ _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;
+ }
+ }
+
_contentViewSelectionPathComponentDidChange(event)
{
- if (event.target !== this._contentViewContainer.currentContentView)
+ if (event.target !== this._timelineContentBrowser.currentContentView)
return;
this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
@@ -373,7 +421,7 @@
_contentViewSupplementalRepresentedObjectsDidChange(event)
{
- if (event.target !== this._contentViewContainer.currentContentView)
+ if (event.target !== this._timelineContentBrowser.currentContentView)
return;
this.dispatchEventToListeners(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange);
}
@@ -412,8 +460,12 @@
if (this._startTimeNeedsReset && !isNaN(startTime)) {
this._timelineOverview.startTime = startTime;
this._overviewTimelineView.zeroTime = startTime;
- for (var timelineView of this._timelineViewMap.values())
+ for (var timelineView of this._timelineViewMap.values()) {
+ if (timelineView.representedObject.type === WebInspector.TimelineRecord.Type.RenderingFrame)
+ continue;
+
timelineView.zeroTime = startTime;
+ }
this._startTimeNeedsReset = false;
}
@@ -539,7 +591,7 @@
let styleValue = (rulerHeight + this.timelineOverviewHeight) + "px";
this._timelineOverview.element.style.height = styleValue;
- this._contentViewContainer.element.style.top = styleValue;
+ this._timelineContentBrowser.element.style.top = styleValue;
}
_instrumentAdded(instrumentOrEvent)
@@ -630,13 +682,29 @@
_timeRangeSelectionChanged(event)
{
- if (this.currentTimelineView) {
- this._updateTimelineViewSelection(this.currentTimelineView);
+ console.assert(this.currentTimelineView);
+ if (!this.currentTimelineView)
+ return;
- if (this.currentTimelineView.representedObject.type === WebInspector.TimelineRecord.Type.RenderingFrame)
- this._updateFrameSelection();
+ 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;
}
+ if (this._selectedTimeRangePathComponent !== selectedPathComponent) {
+ this._selectedTimeRangePathComponent = selectedPathComponent;
+ this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+ }
+
// Delay until the next frame to stay in sync with the current timeline view's time-based layout changes.
requestAnimationFrame(function() {
var selectedTreeElement = this.currentTimelineView && this.currentTimelineView.navigationSidebarTreeOutline ? this.currentTimelineView.navigationSidebarTreeOutline.selectedTreeElement : null;
@@ -684,17 +752,44 @@
this.showOverviewTimelineView();
}
- _updateFrameSelection()
+ _updateTimeRangePathComponents()
{
- console.assert(this._renderingFrameTimeline);
- if (!this._renderingFrameTimeline)
+ let timelineRange = this._timelineSelectionPathComponent.representedObject;
+ let startValue = timelineRange.startValue;
+ let endValue = timelineRange.endValue;
+ if (isNaN(startValue) || isNaN(endValue)) {
+ this._entireRecordingPathComponent.nextSibling = null;
return;
+ }
- let startIndex = this._timelineOverview.selectionStartTime;
- let endIndex = startIndex + this._timelineOverview.selectionDuration - 1;
- this._timelineSidebarPanel.updateFrameSelection(startIndex, endIndex);
+ 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;
}
+ _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;
+ }
+
_updateTimelineViewSelection(timelineView)
{
let timelineRuler = this._timelineOverview.timelineRuler;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.js (197487 => 197488)
--- 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)
@@ -52,6 +52,11 @@
// Public
+ get navigationItems()
+ {
+ return this._scopeBar ? [this._scopeBar] : [];
+ }
+
get navigationSidebarTreeOutline()
{
return this._contentTreeOutline;
