No subject
Tue Jan 27 15:54:36 PST 2015
The timeline views and timeline sidebar require more extensive changes to support this functionality.
Instead of keeping a fixed set of timeline tree elements, the sidebar view now adds and removes
tree elements to reflect the available timelines for the displayed timeline recording.
This change also includes several minor cleanups, such as appending 'Element' to view properties that
are DOM elements, and renaming TimelineContentView to TimelineRecordingContentView.
* UserInterface/Controllers/TimelineManager.js:
(WebInspector.TimelineManager.prototype._loadNewRecording):
Populate predefined network, layout, and script timelines here after constructing the recording.
* UserInterface/Main.html:
* UserInterface/Models/Timeline.js:
Move hardcoded class names and localized strings to these base class methods. This is not implemented
using overridden methods because not all timeline types have their own subclasses. Add a dummy
implementation of saveIdentityToCookie() to avoid warnings when saving sidebar panel selection state.
(WebInspector.Timeline.prototype.get type):
(WebInspector.Timeline.prototype.get displayName): Added.
(WebInspector.Timeline.prototype.get iconClassName): Added.
(WebInspector.Timeline.prototype.addRecord):
* UserInterface/Models/TimelineRecording.js:
(WebInspector.TimelineRecording):
(WebInspector.TimelineRecording.prototype.addTimeline.set timeline): Added.
(WebInspector.TimelineRecording.prototype.addTimeline): Added.
(WebInspector.TimelineRecording.prototype.removeTimeline.get this): Added.
(WebInspector.TimelineRecording.prototype.removeTimeline): Added.
* UserInterface/Views/ContentView.js:
(WebInspector.ContentView):
* UserInterface/Views/LayoutTimelineView.css:
(.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.layout .item .subtitle):
(.sidebar > .panel.navigation.timeline.timeline-content-view-showing .navigation-sidebar-panel-content-tree-outline.layout .item .subtitle): Deleted.
* UserInterface/Views/LayoutTimelineView.js:
(WebInspector.LayoutTimelineView.prototype._treeElementSelected):
(WebInspector.LayoutTimelineView.prototype._closeStatusButtonClicked):
* UserInterface/Views/NavigationSidebarPanel.js:
(WebInspector.NavigationSidebarPanel.prototype.saveStateToCookie): Fix error message formatting.
(WebInspector.NavigationSidebarPanel.prototype._updateFilter):
* UserInterface/Views/NetworkTimelineView.css:
(.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.network .item .subtitle):
(.sidebar > .panel.navigation.timeline.timeline-content-view-showing .navigation-sidebar-panel-content-tree-outline.network .item .subtitle): Deleted.
* UserInterface/Views/NetworkTimelineView.js:
(WebInspector.NetworkTimelineView.prototype._closeStatusButtonClicked):
* UserInterface/Views/ScriptTimelineView.css:
(.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.script .item .subtitle):
(.sidebar > .panel.navigation.timeline.timeline-content-view-showing .navigation-sidebar-panel-content-tree-outline.script .item .subtitle): Deleted.
* UserInterface/Views/ScriptTimelineView.js:
(WebInspector.ScriptTimelineView.prototype._treeElementSelected):
(WebInspector.ScriptTimelineView.prototype._closeStatusButtonClicked):
* UserInterface/Views/TimelineOverview.js:
Convert this class to use the representedObject class pattern. It manages its own mapping from timelines
to overview graph views. Append 'Element' to some properties holding DOM elements.
(WebInspector.TimelineOverview):
(WebInspector.TimelineOverview.prototype.get visibleDuration):
(WebInspector.TimelineOverview.prototype.reset):
(WebInspector.TimelineOverview.prototype.updateLayout):
(WebInspector.TimelineOverview.prototype._handleScrollEvent):
(WebInspector.TimelineOverview.prototype._handleWheelEvent):
(WebInspector.TimelineOverview.prototype._timelineRemoved):
(WebInspector.TimelineOverview.prototype.updateLayoutIfNeeded):
(WebInspector.TimelineOverview.prototype._timeRangeSelectionChanged):
* UserInterface/Views/TimelineRecordingContentView.css: Renamed from Source/WebInspectorUI/UserInterface/Views/TimelineContentView.css.
Remove hard-coded top offsets and heights that need to be dynamically calculated.
(.content-view.timeline-recording > .timeline-overview):
(.content-view.timeline-recording > .view-container):
(.content-view.timeline-recording > .view-container > .timeline-view > .data-grid td):
(.content-view.timeline-recording > .view-container > .timeline-view > .data-grid table.data):
* UserInterface/Views/TimelineRecordingContentView.js: Renamed from Source/WebInspectorUI/UserInterface/Views/TimelineContentView.js.
Manage timeline views and path components dynamically. Adjust view heights as necessary. Append 'Element'
to some properties holding DOM elements.
(WebInspector.TimelineRecordingContentView):
(WebInspector.TimelineRecordingContentView.prototype.showOverviewTimelineView):
(WebInspector.TimelineRecordingContentView.prototype.showTimelineViewForTimeline):
(WebInspector.TimelineRecordingContentView.prototype.get allowedNavigationSidebarPanels):
(WebInspector.TimelineRecordingContentView.prototype.get supportsSplitContentBrowser):
(WebInspector.TimelineRecordingContentView.prototype.get navigationItems):
(WebInspector.TimelineRecordingContentView.prototype.get currentTimelineView):
(WebInspector.TimelineRecordingContentView.prototype.shown):
(WebInspector.TimelineRecordingContentView.prototype.hidden):
(WebInspector.TimelineRecordingContentView.prototype.filterDidChange):
(WebInspector.TimelineRecordingContentView.prototype.updateLayout):
(WebInspector.TimelineRecordingContentView.prototype.saveToCookie):
(WebInspector.TimelineRecordingContentView.prototype.restoreFromCookie):
(WebInspector.TimelineRecordingContentView.prototype.get matchTreeElementAgainstCustomFilters.checkTimeBounds):
(WebInspector.TimelineRecordingContentView.prototype.get matchTreeElementAgainstCustomFilters):
(WebInspector.TimelineRecordingContentView.prototype._pathComponentSelected):
(WebInspector.TimelineRecordingContentView.prototype._timelineViewSelectionPathComponentsDidChange):
(WebInspector.TimelineRecordingContentView.prototype._showTimelineView):
(WebInspector.TimelineRecordingContentView.prototype._update):
(WebInspector.TimelineRecordingContentView.prototype._updateTimes):
(WebInspector.TimelineRecordingContentView.prototype._startUpdatingCurrentTime):
(WebInspector.TimelineRecordingContentView.prototype._stopUpdatingCurrentTime):
(WebInspector.TimelineRecordingContentView.prototype._capturingStarted):
(WebInspector.TimelineRecordingContentView.prototype._capturingStopped):
(WebInspector.TimelineRecordingContentView.prototype._debuggerPaused):
(WebInspector.TimelineRecordingContentView.prototype._debuggerResumed):
Fix a minor regression where we make a useless call to stop updating the time.
(WebInspector.TimelineRecordingContentView.prototype._recordingTimesUpdated):
(WebInspector.TimelineRecordingContentView.prototype._clearTimeline):
(WebInspector.TimelineRecordingContentView.prototype._timelineRemoved):
(WebInspector.TimelineRecordingContentView.prototype._timelineCountChanged):
(WebInspector.TimelineRecordingContentView.prototype._recordingReset):
(WebInspector.TimelineRecordingContentView.prototype._recordingUnloaded):
(WebInspector.TimelineRecordingContentView.prototype._timeRangeSelectionChanged):
* UserInterface/Views/TimelineSidebarPanel.css:
(.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing > .content):
(.sidebar > .panel.navigation.timeline.timeline-content-view-showing > .content): Deleted.
* UserInterface/Views/TimelineSidebarPanel.js:
Manage timeline tree elements dynamically. Adjust view heights as necessary. Append 'Element'
to some properties holding DOM elements. Keep track of the displayed recording and view explicitly.
(WebInspector.TimelineSidebarPanel):
(WebInspector.TimelineSidebarPanel.prototype.shown):
(WebInspector.TimelineSidebarPanel.prototype.showDefaultContentView):
(WebInspector.TimelineSidebarPanel.prototype.treeElementForRepresentedObject.looselyCompareRepresentedObjects):
(WebInspector.TimelineSidebarPanel.prototype.showTimelineOverview):
(WebInspector.TimelineSidebarPanel.prototype.updateFilter):
(WebInspector.TimelineSidebarPanel.prototype.matchTreeElementAgainstCustomFilters):
(WebInspector.TimelineSidebarPanel.prototype.canShowDifferentContentView):
(WebInspector.TimelineSidebarPanel.prototype.saveStateToCookie):
(WebInspector.TimelineSidebarPanel.prototype.get if):
(WebInspector.TimelineSidebarPanel.prototype._contentBrowserCurrentContentViewDidChange):
(WebInspector.TimelineSidebarPanel.prototype._recordingCountChanged):
(WebInspector.TimelineSidebarPanel.prototype._recordingSelected):
(WebInspector.TimelineSidebarPanel.prototype._recordingLoaded):
(WebInspector.TimelineSidebarPanel.prototype._timelineRemoved):
(WebInspector.TimelineSidebarPanel.prototype._timelineCountChanged):
(WebInspector.TimelineSidebarPanel.createTimelineTreeElement): Deleted.
(WebInspector.TimelineSidebarPanel.prototype.restoreStateFromCookie):
* UserInterface/Views/TimelineView.css:
(.panel.navigation.timeline.timeline-recording-content-view-showing > .content > .navigation-sidebar-panel-content-tree-outline):
(.panel.navigation.timeline.timeline-content-view-showing > .content > .navigation-sidebar-panel-content-tree-outline): Deleted.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceControllersTimelineManagerjs">trunk/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceModelsTimelinejs">trunk/Source/WebInspectorUI/UserInterface/Models/Timeline.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceModelsTimelineRecordingjs">trunk/Source/WebInspectorUI/UserInterface/Models/TimelineRecording.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/ContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsLayoutTimelineViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsLayoutTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNavigationSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNetworkTimelineViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNetworkTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsScriptTimelineViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsScriptTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineSidebarPanelcss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.css</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<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>
</ul>
<h3>Removed Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineContentViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineContentView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineContentView.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (180000 => 180001)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2015-02-12 18:50:53 UTC (rev 180000)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-02-12 19:00:03 UTC (rev 180001)
</span><span class="lines">@@ -1,5 +1,149 @@
</span><span class="cx"> 2015-02-12 Brian J. Burg <burg at cs.washington.edu>
</span><span class="cx">
</span><ins>+ Web Inspector: support adding and removing timelines to the timeline sidebar panel and overview
+ https://bugs.webkit.org/show_bug.cgi?id=138434
+
+ Reviewed by Timothy Hatcher.
+
+ A timeline recording's timelines should not be static. This patch adds relevant machinery to
+ dynamically add and remove timelines from the Timeline model object and its various views.
+
+ From the model side, this is a simple change that adds TimelineAdded and TimelineRemoved events.
+ The timeline views and timeline sidebar require more extensive changes to support this functionality.
+ Instead of keeping a fixed set of timeline tree elements, the sidebar view now adds and removes
+ tree elements to reflect the available timelines for the displayed timeline recording.
+
+ This change also includes several minor cleanups, such as appending 'Element' to view properties that
+ are DOM elements, and renaming TimelineContentView to TimelineRecordingContentView.
+
+ * UserInterface/Controllers/TimelineManager.js:
+ (WebInspector.TimelineManager.prototype._loadNewRecording):
+ Populate predefined network, layout, and script timelines here after constructing the recording.
+
+ * UserInterface/Main.html:
+ * UserInterface/Models/Timeline.js:
+ Move hardcoded class names and localized strings to these base class methods. This is not implemented
+ using overridden methods because not all timeline types have their own subclasses. Add a dummy
+ implementation of saveIdentityToCookie() to avoid warnings when saving sidebar panel selection state.
+
+ (WebInspector.Timeline.prototype.get type):
+ (WebInspector.Timeline.prototype.get displayName): Added.
+ (WebInspector.Timeline.prototype.get iconClassName): Added.
+ (WebInspector.Timeline.prototype.addRecord):
+ * UserInterface/Models/TimelineRecording.js:
+ (WebInspector.TimelineRecording):
+ (WebInspector.TimelineRecording.prototype.addTimeline.set timeline): Added.
+ (WebInspector.TimelineRecording.prototype.addTimeline): Added.
+ (WebInspector.TimelineRecording.prototype.removeTimeline.get this): Added.
+ (WebInspector.TimelineRecording.prototype.removeTimeline): Added.
+ * UserInterface/Views/ContentView.js:
+ (WebInspector.ContentView):
+ * UserInterface/Views/LayoutTimelineView.css:
+ (.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.layout .item .subtitle):
+ (.sidebar > .panel.navigation.timeline.timeline-content-view-showing .navigation-sidebar-panel-content-tree-outline.layout .item .subtitle): Deleted.
+ * UserInterface/Views/LayoutTimelineView.js:
+ (WebInspector.LayoutTimelineView.prototype._treeElementSelected):
+ (WebInspector.LayoutTimelineView.prototype._closeStatusButtonClicked):
+ * UserInterface/Views/NavigationSidebarPanel.js:
+ (WebInspector.NavigationSidebarPanel.prototype.saveStateToCookie): Fix error message formatting.
+ (WebInspector.NavigationSidebarPanel.prototype._updateFilter):
+ * UserInterface/Views/NetworkTimelineView.css:
+ (.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.network .item .subtitle):
+ (.sidebar > .panel.navigation.timeline.timeline-content-view-showing .navigation-sidebar-panel-content-tree-outline.network .item .subtitle): Deleted.
+ * UserInterface/Views/NetworkTimelineView.js:
+ (WebInspector.NetworkTimelineView.prototype._closeStatusButtonClicked):
+ * UserInterface/Views/ScriptTimelineView.css:
+ (.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.script .item .subtitle):
+ (.sidebar > .panel.navigation.timeline.timeline-content-view-showing .navigation-sidebar-panel-content-tree-outline.script .item .subtitle): Deleted.
+ * UserInterface/Views/ScriptTimelineView.js:
+ (WebInspector.ScriptTimelineView.prototype._treeElementSelected):
+ (WebInspector.ScriptTimelineView.prototype._closeStatusButtonClicked):
+ * UserInterface/Views/TimelineOverview.js:
+ Convert this class to use the representedObject class pattern. It manages its own mapping from timelines
+ to overview graph views. Append 'Element' to some properties holding DOM elements.
+ (WebInspector.TimelineOverview):
+ (WebInspector.TimelineOverview.prototype.get visibleDuration):
+ (WebInspector.TimelineOverview.prototype.reset):
+ (WebInspector.TimelineOverview.prototype.updateLayout):
+ (WebInspector.TimelineOverview.prototype._handleScrollEvent):
+ (WebInspector.TimelineOverview.prototype._handleWheelEvent):
+ (WebInspector.TimelineOverview.prototype._timelineRemoved):
+ (WebInspector.TimelineOverview.prototype.updateLayoutIfNeeded):
+ (WebInspector.TimelineOverview.prototype._timeRangeSelectionChanged):
+ * UserInterface/Views/TimelineRecordingContentView.css: Renamed from Source/WebInspectorUI/UserInterface/Views/TimelineContentView.css.
+ Remove hard-coded top offsets and heights that need to be dynamically calculated.
+ (.content-view.timeline-recording > .timeline-overview):
+ (.content-view.timeline-recording > .view-container):
+ (.content-view.timeline-recording > .view-container > .timeline-view > .data-grid td):
+ (.content-view.timeline-recording > .view-container > .timeline-view > .data-grid table.data):
+ * UserInterface/Views/TimelineRecordingContentView.js: Renamed from Source/WebInspectorUI/UserInterface/Views/TimelineContentView.js.
+ Manage timeline views and path components dynamically. Adjust view heights as necessary. Append 'Element'
+ to some properties holding DOM elements.
+ (WebInspector.TimelineRecordingContentView):
+ (WebInspector.TimelineRecordingContentView.prototype.showOverviewTimelineView):
+ (WebInspector.TimelineRecordingContentView.prototype.showTimelineViewForTimeline):
+ (WebInspector.TimelineRecordingContentView.prototype.get allowedNavigationSidebarPanels):
+ (WebInspector.TimelineRecordingContentView.prototype.get supportsSplitContentBrowser):
+ (WebInspector.TimelineRecordingContentView.prototype.get navigationItems):
+ (WebInspector.TimelineRecordingContentView.prototype.get currentTimelineView):
+ (WebInspector.TimelineRecordingContentView.prototype.shown):
+ (WebInspector.TimelineRecordingContentView.prototype.hidden):
+ (WebInspector.TimelineRecordingContentView.prototype.filterDidChange):
+ (WebInspector.TimelineRecordingContentView.prototype.updateLayout):
+ (WebInspector.TimelineRecordingContentView.prototype.saveToCookie):
+ (WebInspector.TimelineRecordingContentView.prototype.restoreFromCookie):
+ (WebInspector.TimelineRecordingContentView.prototype.get matchTreeElementAgainstCustomFilters.checkTimeBounds):
+ (WebInspector.TimelineRecordingContentView.prototype.get matchTreeElementAgainstCustomFilters):
+ (WebInspector.TimelineRecordingContentView.prototype._pathComponentSelected):
+ (WebInspector.TimelineRecordingContentView.prototype._timelineViewSelectionPathComponentsDidChange):
+ (WebInspector.TimelineRecordingContentView.prototype._showTimelineView):
+ (WebInspector.TimelineRecordingContentView.prototype._update):
+ (WebInspector.TimelineRecordingContentView.prototype._updateTimes):
+ (WebInspector.TimelineRecordingContentView.prototype._startUpdatingCurrentTime):
+ (WebInspector.TimelineRecordingContentView.prototype._stopUpdatingCurrentTime):
+ (WebInspector.TimelineRecordingContentView.prototype._capturingStarted):
+ (WebInspector.TimelineRecordingContentView.prototype._capturingStopped):
+ (WebInspector.TimelineRecordingContentView.prototype._debuggerPaused):
+ (WebInspector.TimelineRecordingContentView.prototype._debuggerResumed):
+ Fix a minor regression where we make a useless call to stop updating the time.
+
+ (WebInspector.TimelineRecordingContentView.prototype._recordingTimesUpdated):
+ (WebInspector.TimelineRecordingContentView.prototype._clearTimeline):
+ (WebInspector.TimelineRecordingContentView.prototype._timelineRemoved):
+ (WebInspector.TimelineRecordingContentView.prototype._timelineCountChanged):
+ (WebInspector.TimelineRecordingContentView.prototype._recordingReset):
+ (WebInspector.TimelineRecordingContentView.prototype._recordingUnloaded):
+ (WebInspector.TimelineRecordingContentView.prototype._timeRangeSelectionChanged):
+ * UserInterface/Views/TimelineSidebarPanel.css:
+ (.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing > .content):
+ (.sidebar > .panel.navigation.timeline.timeline-content-view-showing > .content): Deleted.
+ * UserInterface/Views/TimelineSidebarPanel.js:
+ Manage timeline tree elements dynamically. Adjust view heights as necessary. Append 'Element'
+ to some properties holding DOM elements. Keep track of the displayed recording and view explicitly.
+ (WebInspector.TimelineSidebarPanel):
+ (WebInspector.TimelineSidebarPanel.prototype.shown):
+ (WebInspector.TimelineSidebarPanel.prototype.showDefaultContentView):
+ (WebInspector.TimelineSidebarPanel.prototype.treeElementForRepresentedObject.looselyCompareRepresentedObjects):
+ (WebInspector.TimelineSidebarPanel.prototype.showTimelineOverview):
+ (WebInspector.TimelineSidebarPanel.prototype.updateFilter):
+ (WebInspector.TimelineSidebarPanel.prototype.matchTreeElementAgainstCustomFilters):
+ (WebInspector.TimelineSidebarPanel.prototype.canShowDifferentContentView):
+ (WebInspector.TimelineSidebarPanel.prototype.saveStateToCookie):
+ (WebInspector.TimelineSidebarPanel.prototype.get if):
+ (WebInspector.TimelineSidebarPanel.prototype._contentBrowserCurrentContentViewDidChange):
+ (WebInspector.TimelineSidebarPanel.prototype._recordingCountChanged):
+ (WebInspector.TimelineSidebarPanel.prototype._recordingSelected):
+ (WebInspector.TimelineSidebarPanel.prototype._recordingLoaded):
+ (WebInspector.TimelineSidebarPanel.prototype._timelineRemoved):
+ (WebInspector.TimelineSidebarPanel.prototype._timelineCountChanged):
+ (WebInspector.TimelineSidebarPanel.createTimelineTreeElement): Deleted.
+ (WebInspector.TimelineSidebarPanel.prototype.restoreStateFromCookie):
+ * UserInterface/Views/TimelineView.css:
+ (.panel.navigation.timeline.timeline-recording-content-view-showing > .content > .navigation-sidebar-panel-content-tree-outline):
+ (.panel.navigation.timeline.timeline-content-view-showing > .content > .navigation-sidebar-panel-content-tree-outline): Deleted.
+
+2015-02-12 Brian J. Burg <burg at cs.washington.edu>
+
</ins><span class="cx"> Web Inspector: Large background image fails to load in inspector
</span><span class="cx"> https://bugs.webkit.org/show_bug.cgi?id=141405
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceControllersTimelineManagerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js (180000 => 180001)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js 2015-02-12 18:50:53 UTC (rev 180000)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js 2015-02-12 19:00:03 UTC (rev 180001)
</span><span class="lines">@@ -411,6 +411,10 @@
</span><span class="cx">
</span><span class="cx"> var identifier = this._nextRecordingIdentifier++;
</span><span class="cx"> var newRecording = new WebInspector.TimelineRecording(identifier, WebInspector.UIString("Timeline Recording %d").format(identifier));
</span><ins>+ newRecording.addTimeline(new WebInspector.Timeline(WebInspector.TimelineRecord.Type.Network));
+ newRecording.addTimeline(new WebInspector.Timeline(WebInspector.TimelineRecord.Type.Layout));
+ newRecording.addTimeline(new WebInspector.Timeline(WebInspector.TimelineRecord.Type.Script));
+
</ins><span class="cx"> this._recordings.push(newRecording);
</span><span class="cx"> this.dispatchEventToListeners(WebInspector.TimelineManager.Event.RecordingCreated, {recording: newRecording});
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (180000 => 180001)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2015-02-12 18:50:53 UTC (rev 180000)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2015-02-12 19:00:03 UTC (rev 180001)
</span><span class="lines">@@ -124,11 +124,11 @@
</span><span class="cx"> <link rel="stylesheet" href="Views/TextContentView.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/TextEditor.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/TextResourceContentView.css">
</span><del>- <link rel="stylesheet" href="Views/TimelineContentView.css">
</del><span class="cx"> <link rel="stylesheet" href="Views/TimelineDataGrid.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/TimelineIcons.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/TimelineOverview.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/TimelineRecordBar.css">
</span><ins>+ <link rel="stylesheet" href="Views/TimelineRecordingContentView.css">
</ins><span class="cx"> <link rel="stylesheet" href="Views/TimelineRuler.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/TimelineSidebarPanel.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/TimelineView.css">
</span><span class="lines">@@ -446,9 +446,9 @@
</span><span class="cx"> <script src="Views/SyntaxHighlightingSupport.js"></script>
</span><span class="cx"> <script src="Views/TextContentView.js"></script>
</span><span class="cx"> <script src="Views/TextResourceContentView.js"></script>
</span><del>- <script src="Views/TimelineContentView.js"></script>
</del><span class="cx"> <script src="Views/TimelineOverview.js"></script>
</span><span class="cx"> <script src="Views/TimelineRecordBar.js"></script>
</span><ins>+ <script src="Views/TimelineRecordingContentView.js"></script>
</ins><span class="cx"> <script src="Views/TimelineRuler.js"></script>
</span><span class="cx"> <script src="Views/TimelineSidebarPanel.js"></script>
</span><span class="cx"> <script src="Views/ToggleButtonNavigationItem.js"></script>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceModelsTimelinejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Models/Timeline.js (180000 => 180001)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Models/Timeline.js 2015-02-12 18:50:53 UTC (rev 180000)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/Timeline.js 2015-02-12 19:00:03 UTC (rev 180001)
</span><span class="lines">@@ -44,6 +44,8 @@
</span><span class="cx"> TimesUpdated: "timeline-times-updated"
</span><span class="cx"> };
</span><span class="cx">
</span><ins>+WebInspector.Timeline.TimelineTypeCookieKey = "timeline-type";
+
</ins><span class="cx"> WebInspector.Timeline.prototype = {
</span><span class="cx"> constructor: WebInspector.Timeline,
</span><span class="cx"> __proto__: WebInspector.Object.prototype,
</span><span class="lines">@@ -70,6 +72,30 @@
</span><span class="cx"> return this._type;
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ get displayName()
+ {
+ if (this._type === WebInspector.TimelineRecord.Type.Network)
+ return WebInspector.UIString("Network Requests");
+ if (this._type === WebInspector.TimelineRecord.Type.Layout)
+ return WebInspector.UIString("Layout & Rendering");
+ if (this._type === WebInspector.TimelineRecord.Type.Script)
+ return WebInspector.UIString("JavaScript & Events");
+
+ console.error("Timeline has unknown type:", this._type, this);
+ },
+
+ get iconClassName()
+ {
+ if (this._type === WebInspector.TimelineRecord.Type.Network)
+ return WebInspector.TimelineSidebarPanel.NetworkIconStyleClass;
+ if (this._type === WebInspector.TimelineRecord.Type.Layout)
+ return WebInspector.TimelineSidebarPanel.ColorsIconStyleClass;
+ if (this._type === WebInspector.TimelineRecord.Type.Script)
+ return WebInspector.TimelineSidebarPanel.ScriptIconStyleClass;
+
+ console.error("Timeline has unknown type:", this._type, this);
+ },
+
</ins><span class="cx"> reset: function(suppressEvents)
</span><span class="cx"> {
</span><span class="cx"> this._records = [];
</span><span class="lines">@@ -94,6 +120,11 @@
</span><span class="cx"> this.dispatchEventToListeners(WebInspector.Timeline.Event.RecordAdded, {record: record});
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ saveIdentityToCookie: function(cookie)
+ {
+ cookie[WebInspector.Timeline.TimelineTypeCookieKey] = this._type;
+ },
+
</ins><span class="cx"> // Private
</span><span class="cx">
</span><span class="cx"> _updateTimesIfNeeded: function(record)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceModelsTimelineRecordingjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Models/TimelineRecording.js (180000 => 180001)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Models/TimelineRecording.js 2015-02-12 18:50:53 UTC (rev 180000)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/TimelineRecording.js 2015-02-12 19:00:03 UTC (rev 180001)
</span><span class="lines">@@ -35,13 +35,6 @@
</span><span class="cx"> // For legacy backends, we compute the elapsed time of records relative to this timestamp.
</span><span class="cx"> this._legacyFirstRecordedTimestamp = NaN;
</span><span class="cx">
</span><del>- for (var key of Object.keys(WebInspector.TimelineRecord.Type)) {
- var type = WebInspector.TimelineRecord.Type[key];
- var timeline = new WebInspector.Timeline(type);
- this._timelines.set(type, timeline);
- timeline.addEventListener(WebInspector.Timeline.Event.TimesUpdated, this._timelineTimesUpdated, this);
- }
-
</del><span class="cx"> this.reset(true);
</span><span class="cx"> };
</span><span class="cx">
</span><span class="lines">@@ -49,6 +42,8 @@
</span><span class="cx"> Reset: "timeline-recording-reset",
</span><span class="cx"> Unloaded: "timeline-recording-unloaded",
</span><span class="cx"> SourceCodeTimelineAdded: "timeline-recording-source-code-timeline-added",
</span><ins>+ TimelineAdded: "timeline-recording-timeline-added",
+ TimelineRemoved: "timeline-recording-timeline-removed",
</ins><span class="cx"> TimesUpdated: "timeline-recording-times-updated"
</span><span class="cx"> };
</span><span class="cx">
</span><span class="lines">@@ -141,6 +136,29 @@
</span><span class="cx"> return [...timelines.values()];
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ addTimeline: function(timeline)
+ {
+ console.assert(timeline instanceof WebInspector.Timeline, timeline);
+ console.assert(!this._timelines.has(timeline), this._timelines, timeline);
+
+ this._timelines.set(timeline.type, timeline);
+
+ timeline.addEventListener(WebInspector.Timeline.Event.TimesUpdated, this._timelineTimesUpdated, this);
+ this.dispatchEventToListeners(WebInspector.TimelineRecording.Event.TimelineAdded, {timeline: timeline});
+ },
+
+ removeTimeline: function(timeline)
+ {
+ console.assert(timeline instanceof WebInspector.Timeline, timeline);
+ console.assert(this._timelines.has(timeline.type), this._timelines, timeline);
+ console.assert(this._timelines.get(timeline.type) === timeline, this._timelines, timeline);
+
+ this._timelines.delete(timeline.type);
+
+ timeline.removeEventListener(WebInspector.Timeline.Event.TimesUpdated, this._timelineTimesUpdated, this);
+ this.dispatchEventToListeners(WebInspector.TimelineRecording.Event.TimelineRemoved, {timeline: timeline});
+ },
+
</ins><span class="cx"> addEventMarker: function(eventMarker)
</span><span class="cx"> {
</span><span class="cx"> this._eventMarkers.push(eventMarker);
</span><span class="lines">@@ -148,6 +166,11 @@
</span><span class="cx">
</span><span class="cx"> addRecord: function(record)
</span><span class="cx"> {
</span><ins>+ var hasCorrespondingTimeline = this._timelines.has(record.type);
+ console.assert(hasCorrespondingTimeline, record, this._timelines);
+ if (!hasCorrespondingTimeline)
+ return;
+
</ins><span class="cx"> // Add the record to the global timeline by type.
</span><span class="cx"> this._timelines.get(record.type).addRecord(record);
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ContentView.js (180000 => 180001)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ContentView.js 2015-02-12 18:50:53 UTC (rev 180000)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ContentView.js 2015-02-12 19:00:03 UTC (rev 180001)
</span><span class="lines">@@ -40,7 +40,7 @@
</span><span class="cx"> return new WebInspector.ScriptContentView(representedObject);
</span><span class="cx">
</span><span class="cx"> if (representedObject instanceof WebInspector.TimelineRecording)
</span><del>- return new WebInspector.TimelineContentView(representedObject);
</del><ins>+ return new WebInspector.TimelineRecordingContentView(representedObject);
</ins><span class="cx">
</span><span class="cx"> if (representedObject instanceof WebInspector.DOMStorageObject)
</span><span class="cx"> return new WebInspector.DOMStorageContentView(representedObject);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsLayoutTimelineViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.css (180000 => 180001)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.css 2015-02-12 18:50:53 UTC (rev 180000)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.css 2015-02-12 19:00:03 UTC (rev 180001)
</span><span class="lines">@@ -35,6 +35,6 @@
</span><span class="cx"> border-right: none;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.sidebar > .panel.navigation.timeline.timeline-content-view-showing .navigation-sidebar-panel-content-tree-outline.layout .item .subtitle {
</del><ins>+.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.layout .item .subtitle {
</ins><span class="cx"> display: none;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsLayoutTimelineViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js (180000 => 180001)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js 2015-02-12 18:50:53 UTC (rev 180000)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js 2015-02-12 19:00:03 UTC (rev 180001)
</span><span class="lines">@@ -229,7 +229,7 @@
</span><span class="cx"> this._updateHighlight();
</span><span class="cx">
</span><span class="cx"> if (!treeElement.record.sourceCodeLocation) {
</span><del>- WebInspector.timelineSidebarPanel.showTimelineViewForType(WebInspector.TimelineRecord.Type.Layout);
</del><ins>+ WebInspector.timelineSidebarPanel.showTimelineViewForTimeline(this.representedObject);
</ins><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -255,7 +255,7 @@
</span><span class="cx"> _closeStatusButtonClicked: function(event)
</span><span class="cx"> {
</span><span class="cx"> this.navigationSidebarTreeOutline.selectedTreeElement.deselect();
</span><del>- WebInspector.timelineSidebarPanel.showTimelineViewForType(WebInspector.TimelineRecord.Type.Layout);
</del><ins>+ WebInspector.timelineSidebarPanel.showTimelineViewForTimeline(this.representedObject);
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> _updateHighlight: function()
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNavigationSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js (180000 => 180001)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js 2015-02-12 18:50:53 UTC (rev 180000)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js 2015-02-12 19:00:03 UTC (rev 180001)
</span><span class="lines">@@ -225,7 +225,7 @@
</span><span class="cx"> if (representedObject.saveIdentityToCookie)
</span><span class="cx"> representedObject.saveIdentityToCookie(cookie);
</span><span class="cx"> else
</span><del>- console.error("Error: TreeElement.representedObject is missing a saveIdentityToCookie implementation. TreeElement.constructor: %s", selectedTreeElement.constructor);
</del><ins>+ console.error("Error: TreeElement.representedObject is missing a saveIdentityToCookie implementation. TreeElement.constructor: ", selectedTreeElement.constructor);
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> // This can be supplemented by subclasses that admit a simpler strategy for static tree elements.
</span><span class="lines">@@ -521,7 +521,7 @@
</span><span class="cx"> // Filter may have hidden the selected resource in the timeline view, which should now notify its listeners.
</span><span class="cx"> if (selectedTreeElement && selectedTreeElement.hidden !== selectionWasHidden) {
</span><span class="cx"> var currentContentView = WebInspector.contentBrowser.currentContentView;
</span><del>- if (currentContentView instanceof WebInspector.TimelineContentView && typeof currentContentView.currentTimelineView.filterUpdated === "function")
</del><ins>+ if (currentContentView instanceof WebInspector.TimelineRecordingContentView && typeof currentContentView.currentTimelineView.filterUpdated === "function")
</ins><span class="cx"> currentContentView.currentTimelineView.filterUpdated();
</span><span class="cx"> }
</span><span class="cx"> },
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNetworkTimelineViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.css (180000 => 180001)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.css 2015-02-12 18:50:53 UTC (rev 180000)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.css 2015-02-12 19:00:03 UTC (rev 180001)
</span><span class="lines">@@ -31,6 +31,6 @@
</span><span class="cx"> bottom: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.sidebar > .panel.navigation.timeline.timeline-content-view-showing .navigation-sidebar-panel-content-tree-outline.network .item .subtitle {
</del><ins>+.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.network .item .subtitle {
</ins><span class="cx"> display: none;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNetworkTimelineViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js (180000 => 180001)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js 2015-02-12 18:50:53 UTC (rev 180000)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js 2015-02-12 19:00:03 UTC (rev 180001)
</span><span class="lines">@@ -244,6 +244,6 @@
</span><span class="cx"> _closeStatusButtonClicked: function(event)
</span><span class="cx"> {
</span><span class="cx"> this.navigationSidebarTreeOutline.selectedTreeElement.deselect();
</span><del>- WebInspector.timelineSidebarPanel.showTimelineViewForType(WebInspector.TimelineRecord.Type.Network);
</del><ins>+ WebInspector.timelineSidebarPanel.showTimelineViewForTimeline(this.representedObject);
</ins><span class="cx"> }
</span><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsScriptTimelineViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.css (180000 => 180001)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.css 2015-02-12 18:50:53 UTC (rev 180000)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.css 2015-02-12 19:00:03 UTC (rev 180001)
</span><span class="lines">@@ -35,6 +35,6 @@
</span><span class="cx"> border-right: none;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.sidebar > .panel.navigation.timeline.timeline-content-view-showing .navigation-sidebar-panel-content-tree-outline.script .item .subtitle {
</del><ins>+.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.script .item .subtitle {
</ins><span class="cx"> display: none;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsScriptTimelineViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.js (180000 => 180001)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.js 2015-02-12 18:50:53 UTC (rev 180000)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.js 2015-02-12 19:00:03 UTC (rev 180001)
</span><span class="lines">@@ -272,7 +272,7 @@
</span><span class="cx"> console.error("Unknown tree element selected.");
</span><span class="cx">
</span><span class="cx"> if (!sourceCodeLocation) {
</span><del>- WebInspector.timelineSidebarPanel.showTimelineViewForType(WebInspector.TimelineRecord.Type.Script);
</del><ins>+ WebInspector.timelineSidebarPanel.showTimelineViewForTimeline(this.representedObject);
</ins><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -298,6 +298,6 @@
</span><span class="cx"> _closeStatusButtonClicked: function(event)
</span><span class="cx"> {
</span><span class="cx"> this.navigationSidebarTreeOutline.selectedTreeElement.deselect();
</span><del>- WebInspector.timelineSidebarPanel.showTimelineViewForType(WebInspector.TimelineRecord.Type.Script);
</del><ins>+ WebInspector.timelineSidebarPanel.showTimelineViewForTimeline(this.representedObject);
</ins><span class="cx"> }
</span><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineContentViewcss"></a>
<div class="delfile"><h4>Deleted: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineContentView.css (180000 => 180001)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineContentView.css 2015-02-12 18:50:53 UTC (rev 180000)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineContentView.css 2015-02-12 19:00:03 UTC (rev 180001)
</span><span class="lines">@@ -1,51 +0,0 @@
</span><del>-/*
- * Copyright (C) 2013 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.
- */
-
-.content-view.timeline > .timeline-overview {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- height: 130px;
-}
-
-.content-view.timeline > .view-container {
- position: absolute;
- top: 130px;
- left: 0;
- right: 0;
- bottom: 0;
- overflow: hidden;
-}
-
-.content-view.timeline > .view-container > .timeline-view > .data-grid td {
- height: 16px;
- line-height: 16px;
-}
-
-.content-view.timeline > .view-container > .timeline-view > .data-grid table.data {
- background-image: linear-gradient(to bottom, white, white 50%, rgb(243, 243, 243) 50%, rgb(243, 243, 243));
- background-size: 100% 40px;
-}
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineContentViewjs"></a>
<div class="delfile"><h4>Deleted: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineContentView.js (180000 => 180001)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineContentView.js 2015-02-12 18:50:53 UTC (rev 180000)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineContentView.js 2015-02-12 19:00:03 UTC (rev 180001)
</span><span class="lines">@@ -1,522 +0,0 @@
</span><del>-/*
- * Copyright (C) 2013 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.TimelineContentView = function(recording)
-{
- WebInspector.ContentView.call(this, recording);
-
- this._recording = recording;
-
- this.element.classList.add(WebInspector.TimelineContentView.StyleClassName);
-
- this._discreteTimelineOverviewGraphMap = new Map;
- for (var [identifier, timeline] of recording.timelines)
- this._discreteTimelineOverviewGraphMap.set(timeline, new WebInspector.TimelineOverviewGraph(timeline));
-
- this._timelineOverview = new WebInspector.TimelineOverview(this._discreteTimelineOverviewGraphMap);
- this._timelineOverview.addEventListener(WebInspector.TimelineOverview.Event.TimeRangeSelectionChanged, this._timeRangeSelectionChanged, this);
- this.element.appendChild(this._timelineOverview.element);
-
- this._viewContainer = document.createElement("div");
- this._viewContainer.classList.add(WebInspector.TimelineContentView.ViewContainerStyleClassName);
- this.element.appendChild(this._viewContainer);
-
- var trashImage;
- if (WebInspector.Platform.isLegacyMacOS)
- trashImage = {src: "Images/Legacy/NavigationItemTrash.svg", width: 16, height: 16};
- else
- trashImage = {src: "Images/NavigationItemTrash.svg", width: 15, height: 15};
-
- this._clearTimelineNavigationItem = new WebInspector.ButtonNavigationItem("clear-timeline", WebInspector.UIString("Clear Timeline"), trashImage.src, trashImage.width, trashImage.height);
- this._clearTimelineNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._clearTimeline, this);
-
- this._overviewTimelineView = new WebInspector.OverviewTimelineView(recording);
- this._overviewTimelineView.secondsPerPixel = this._timelineOverview.secondsPerPixel;
-
- this._discreteTimelineViewMap = new Map;
- for (var [identifier, timeline] of recording.timelines)
- this._discreteTimelineViewMap.set(timeline, new WebInspector.TimelineView(timeline));
-
- function createPathComponent(displayName, className, representedObject)
- {
- var pathComponent = new WebInspector.HierarchicalPathComponent(displayName, className, representedObject);
- pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
- return pathComponent;
- }
-
- var networkTimeline = recording.timelines.get(WebInspector.TimelineRecord.Type.Network);
- var layoutTimeline = recording.timelines.get(WebInspector.TimelineRecord.Type.Layout);
- var scriptTimeline = recording.timelines.get(WebInspector.TimelineRecord.Type.Script);
-
- this._pathComponentMap = new Map;
- this._pathComponentMap.set(networkTimeline, createPathComponent.call(this, WebInspector.UIString("Network Requests"), WebInspector.TimelineSidebarPanel.NetworkIconStyleClass, networkTimeline));
- this._pathComponentMap.set(layoutTimeline, createPathComponent.call(this, WebInspector.UIString("Layout & Rendering"), WebInspector.TimelineSidebarPanel.ColorsIconStyleClass, layoutTimeline));
- this._pathComponentMap.set(scriptTimeline, createPathComponent.call(this, WebInspector.UIString("JavaScript & Events"), WebInspector.TimelineSidebarPanel.ScriptIconStyleClass, scriptTimeline));
-
- var previousPathComponent = null;
- for (var pathComponent of this._pathComponentMap.values()) {
- if (previousPathComponent) {
- previousPathComponent.nextSibling = pathComponent;
- pathComponent.previousSibling = previousPathComponent;
- }
-
- previousPathComponent = pathComponent;
- }
-
- this._currentTimelineView = null;
- this._currentTimelineViewIdentifier = null;
-
- this._updating = false;
- this._currentTime = NaN;
- this._lastUpdateTimestamp = NaN;
- this._startTimeNeedsReset = true;
-
- recording.addEventListener(WebInspector.TimelineRecording.Event.Reset, this._recordingReset, this);
- recording.addEventListener(WebInspector.TimelineRecording.Event.Unloaded, this._recordingUnloaded, this);
-
- WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.CapturingStarted, this._capturingStarted, this);
- WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.CapturingStopped, this._capturingStopped, this);
-
- WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Paused, this._debuggerPaused, this);
- WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Resumed, this._debuggerResumed, this);
-
- this.showOverviewTimelineView();
-};
-
-WebInspector.TimelineContentView.StyleClassName = "timeline";
-WebInspector.TimelineContentView.ViewContainerStyleClassName = "view-container";
-
-WebInspector.TimelineContentView.SelectedTimelineTypeCookieKey = "timeline-content-view-selected-timeline-type";
-WebInspector.TimelineContentView.OverviewTimelineViewCookieValue = "timeline-content-view-overview-timeline-view";
-
-WebInspector.TimelineContentView.prototype = {
- constructor: WebInspector.TimelineContentView,
- __proto__: WebInspector.ContentView.prototype,
-
- // Public
-
- showOverviewTimelineView: function()
- {
- this._showTimelineView(this._overviewTimelineView);
- },
-
- showTimelineViewForTimeline: function(timeline)
- {
- console.assert(timeline instanceof WebInspector.Timeline, timeline);
- console.assert(this._discreteTimelineViewMap.has(timeline), timeline);
- if (!this._discreteTimelineViewMap.has(timeline))
- return;
-
- this._showTimelineView(this._discreteTimelineViewMap.get(timeline));
- },
-
- get allowedNavigationSidebarPanels()
- {
- return [WebInspector.timelineSidebarPanel.identifier];
- },
-
- get supportsSplitContentBrowser()
- {
- // The layout of the overview and split content browser don't work well.
- return false;
- },
-
- get selectionPathComponents()
- {
- var pathComponents = [];
- if (this._currentTimelineView.representedObject instanceof WebInspector.Timeline)
- pathComponents.push(this._pathComponentMap.get(this._currentTimelineView.representedObject));
- pathComponents = pathComponents.concat(this._currentTimelineView.selectionPathComponents || []);
- return pathComponents;
- },
-
- get navigationItems()
- {
- return [this._clearTimelineNavigationItem];
- },
-
- get currentTimelineView()
- {
- return this._currentTimelineView;
- },
-
- shown: function()
- {
- if (!this._currentTimelineView)
- return;
-
- this._timelineOverview.shown();
- this._currentTimelineView.shown();
- this._clearTimelineNavigationItem.enabled = this._recording.isWritable();
-
- if (!this._updating && WebInspector.timelineManager.activeRecording === this._recording && WebInspector.timelineManager.isCapturing())
- this._startUpdatingCurrentTime();
- },
-
- hidden: function()
- {
- if (!this._currentTimelineView)
- return;
-
- this._timelineOverview.hidden();
- this._currentTimelineView.hidden();
-
- if (this._updating)
- this._stopUpdatingCurrentTime();
- },
-
- filterDidChange: function()
- {
- if (!this._currentTimelineView)
- return;
-
- this._currentTimelineView.filterDidChange();
- },
-
- updateLayout: function()
- {
- this._timelineOverview.updateLayoutForResize();
-
- if (!this._currentTimelineView)
- return;
-
- this._currentTimelineView.updateLayout();
- },
-
- saveToCookie: function(cookie)
- {
- cookie.type = WebInspector.ContentViewCookieType.Timelines;
-
- if (!this._currentTimelineView || this._currentTimelineView === this._overviewTimelineView)
- cookie[WebInspector.TimelineContentView.SelectedTimelineTypeCookieKey] = WebInspector.TimelineContentView.OverviewTimelineViewCookieValue;
- else
- cookie[WebInspector.TimelineContentView.SelectedTimelineTypeCookieKey] = this._currentTimelineView.representedObject.type;
- },
-
- restoreFromCookie: function(cookie)
- {
- var timelineType = cookie[WebInspector.TimelineContentView.SelectedTimelineTypeCookieKey];
-
- if (timelineType === WebInspector.TimelineContentView.OverviewTimelineViewCookieValue)
- this.showOverviewTimelineView();
- else
- this.showTimelineViewForTimeline(this.representedObject.timelines.get(timelineType));
- },
-
- matchTreeElementAgainstCustomFilters: function(treeElement)
- {
- if (this._currentTimelineView && !this._currentTimelineView.matchTreeElementAgainstCustomFilters(treeElement))
- return false;
-
- var startTime = this._timelineOverview.selectionStartTime;
- var endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
- var currentTime = this._currentTime || this._recording.startTime;
-
- function checkTimeBounds(itemStartTime, itemEndTime)
- {
- itemStartTime = itemStartTime || currentTime;
- itemEndTime = itemEndTime || currentTime;
-
- return startTime <= itemEndTime && itemStartTime <= endTime;
- }
-
- if (treeElement instanceof WebInspector.ResourceTreeElement) {
- var resource = treeElement.resource;
- return checkTimeBounds(resource.requestSentTimestamp, resource.finishedOrFailedTimestamp);
- }
-
- if (treeElement instanceof WebInspector.SourceCodeTimelineTreeElement) {
- var sourceCodeTimeline = treeElement.sourceCodeTimeline;
-
- // Do a quick check of the timeline bounds before we check each record.
- if (!checkTimeBounds(sourceCodeTimeline.startTime, sourceCodeTimeline.endTime))
- return false;
-
- for (var record of sourceCodeTimeline.records) {
- if (checkTimeBounds(record.startTime, record.endTime))
- return true;
- }
-
- return false;
- }
-
- if (treeElement instanceof WebInspector.ProfileNodeTreeElement) {
- var profileNode = treeElement.profileNode;
- for (var call of profileNode.calls) {
- if (checkTimeBounds(call.startTime, call.endTime))
- return true;
- }
-
- return false;
- }
-
- if (treeElement instanceof WebInspector.TimelineRecordTreeElement) {
- var record = treeElement.record;
- return checkTimeBounds(record.startTime, record.endTime);
- }
-
- console.error("Unknown TreeElement, can't filter by time.");
- return true;
- },
-
- // Private
-
- _pathComponentSelected: function(event)
- {
- WebInspector.timelineSidebarPanel.showTimelineViewForType(event.data.pathComponent.representedObject.type);
- },
-
- _timelineViewSelectionPathComponentsDidChange: function()
- {
- this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
- },
-
- _showTimelineView: function(timelineView)
- {
- console.assert(timelineView instanceof WebInspector.TimelineView);
- console.assert(timelineView.representedObject === this._recording || this._recording.timelines.has(timelineView.representedObject.type));
-
- // If the content view is shown and then hidden, we must reattach the content tree outline and timeline view.
- if (timelineView.visible && timelineView === this._currentTimelineView)
- return;
-
- if (this._currentTimelineView) {
- this._currentTimelineView.removeEventListener(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange, this._timelineViewSelectionPathComponentsDidChange, this);
-
- this._currentTimelineView.hidden();
- this._currentTimelineView.element.remove();
- }
-
- this._currentTimelineView = timelineView;
-
- WebInspector.timelineSidebarPanel.contentTreeOutline = timelineView && timelineView.navigationSidebarTreeOutline;
- WebInspector.timelineSidebarPanel.contentTreeOutlineLabel = timelineView && timelineView.navigationSidebarTreeOutlineLabel;
-
- if (this._currentTimelineView) {
- this._currentTimelineView.addEventListener(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange, this._timelineViewSelectionPathComponentsDidChange, this);
-
- this._viewContainer.appendChild(this._currentTimelineView.element);
-
- this._currentTimelineView.startTime = this._timelineOverview.selectionStartTime;
- this._currentTimelineView.endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
- this._currentTimelineView.currentTime = this._currentTime;
-
- this._currentTimelineView.shown();
- this._currentTimelineView.updateLayout();
- }
-
- this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
- },
-
- _update: function(timestamp)
- {
- if (this._waitingToResetCurrentTime) {
- requestAnimationFrame(this._updateCallback);
- return;
- }
-
- var startTime = this._recording.startTime;
- var currentTime = this._currentTime || startTime;
- var endTime = this._recording.endTime;
- var timespanSinceLastUpdate = (timestamp - this._lastUpdateTimestamp) / 1000 || 0;
-
- currentTime += timespanSinceLastUpdate;
-
- this._updateTimes(startTime, currentTime, endTime);
-
- // Only stop updating if the current time is greater than the end time.
- if (!this._updating && currentTime >= endTime) {
- this._lastUpdateTimestamp = NaN;
- return;
- }
-
- this._lastUpdateTimestamp = timestamp;
-
- requestAnimationFrame(this._updateCallback);
- },
-
- _updateTimes: function(startTime, currentTime, endTime)
- {
- if (this._startTimeNeedsReset && !isNaN(startTime)) {
- var selectionOffset = this._timelineOverview.selectionStartTime - this._timelineOverview.startTime;
-
- this._timelineOverview.startTime = startTime;
- this._timelineOverview.selectionStartTime = startTime + selectionOffset;
-
- this._overviewTimelineView.zeroTime = startTime;
- for (var timelineView of this._discreteTimelineViewMap.values())
- timelineView.zeroTime = startTime;
-
- delete this._startTimeNeedsReset;
- }
-
- this._timelineOverview.endTime = Math.max(endTime, currentTime);
-
- this._currentTime = currentTime;
- this._timelineOverview.currentTime = currentTime;
- this._currentTimelineView.currentTime = currentTime;
-
- WebInspector.timelineSidebarPanel.updateFilter();
-
- // Force a layout now since we are already in an animation frame and don't need to delay it until the next.
- this._timelineOverview.updateLayoutIfNeeded();
- this._currentTimelineView.updateLayoutIfNeeded();
- },
-
- _startUpdatingCurrentTime: function()
- {
- console.assert(!this._updating);
- if (this._updating)
- return;
-
- if (!isNaN(this._currentTime)) {
- // We have a current time already, so we likely need to jump into the future to a better current time.
- // This happens when you stop and later restart recording.
- console.assert(!this._waitingToResetCurrentTime);
- this._waitingToResetCurrentTime = true;
- this._recording.addEventListener(WebInspector.TimelineRecording.Event.TimesUpdated, this._recordingTimesUpdated, this);
- }
-
- this._updating = true;
-
- if (!this._updateCallback)
- this._updateCallback = this._update.bind(this);
-
- requestAnimationFrame(this._updateCallback);
- },
-
- _stopUpdatingCurrentTime: function()
- {
- console.assert(this._updating);
- this._updating = false;
-
- if (this._waitingToResetCurrentTime) {
- // Did not get any event while waiting for the current time, but we should stop waiting.
- this._recording.removeEventListener(WebInspector.TimelineRecording.Event.TimesUpdated, this._recordingTimesUpdated, this);
- this._waitingToResetCurrentTime = false;
- }
- },
-
- _capturingStarted: function(event)
- {
- this._startUpdatingCurrentTime();
- },
-
- _capturingStopped: function(event)
- {
- this._stopUpdatingCurrentTime();
- },
-
- _debuggerPaused: function(event)
- {
- if (WebInspector.replayManager.sessionState === WebInspector.ReplayManager.SessionState.Replaying)
- return;
-
- this._stopUpdatingCurrentTime();
- },
-
- _debuggerResumed: function(event)
- {
- if (WebInspector.replayManager.sessionState === WebInspector.ReplayManager.SessionState.Replaying)
- return;
-
- this._startUpdatingCurrentTime();
- },
-
- _recordingTimesUpdated: function(event)
- {
- if (!this._waitingToResetCurrentTime)
- return;
-
- // Make the current time be the start time of the last added record. This is the best way
- // currently to jump to the right period of time after recording starts.
- // FIXME: If no activity is happening we can sit for a while until a record is added.
- // We might want to have the backend send a "start" record to get current time moving.
-
- for (var timeline of this._recording.timelines.values()) {
- var lastRecord = timeline.records.lastValue;
- if (!lastRecord)
- continue;
- this._currentTime = Math.max(this._currentTime, lastRecord.startTime);
- }
-
- this._recording.removeEventListener(WebInspector.TimelineRecording.Event.TimesUpdated, this._recordingTimesUpdated, this);
- this._waitingToResetCurrentTime = false;
- },
-
- _clearTimeline: function(event)
- {
- this._recording.reset();
- },
-
- _recordingReset: function(event)
- {
- this._currentTime = NaN;
-
- if (!this._updating) {
- // Force the time ruler and views to reset to 0.
- this._startTimeNeedsReset = true;
- this._updateTimes(0, 0, 0);
- }
-
- this._lastUpdateTimestamp = NaN;
- this._startTimeNeedsReset = true;
-
- this._recording.removeEventListener(WebInspector.TimelineRecording.Event.TimesUpdated, this._recordingTimesUpdated, this);
- this._waitingToResetCurrentTime = false;
-
- this._overviewTimelineView.reset();
- for (var timelineView of this._discreteTimelineViewMap.values())
- timelineView.reset();
-
- for (var timelineOverviewGraph of this._discreteTimelineOverviewGraphMap.values())
- timelineOverviewGraph.reset();
- },
-
- _recordingUnloaded: function(event)
- {
- console.assert(!this._updating);
-
- WebInspector.timelineManager.removeEventListener(WebInspector.TimelineManager.Event.CapturingStarted, this._capturingStarted, this);
- WebInspector.timelineManager.removeEventListener(WebInspector.TimelineManager.Event.CapturingStopped, this._capturingStopped, this);
- },
-
- _timeRangeSelectionChanged: function(event)
- {
- this._currentTimelineView.startTime = this._timelineOverview.selectionStartTime;
- this._currentTimelineView.endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
-
- // 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;
- var selectionWasHidden = selectedTreeElement && selectedTreeElement.hidden;
-
- WebInspector.timelineSidebarPanel.updateFilter();
-
- if (selectedTreeElement && selectedTreeElement.hidden !== selectionWasHidden)
- this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
- }.bind(this));
- }
-};
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js (180000 => 180001)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js 2015-02-12 18:50:53 UTC (rev 180000)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js 2015-02-12 19:00:03 UTC (rev 180001)
</span><span class="lines">@@ -23,25 +23,24 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.TimelineOverview = function(timelineOverviewGraphsMap)
</del><ins>+WebInspector.TimelineOverview = function(timelineRecording)
</ins><span class="cx"> {
</span><span class="cx"> WebInspector.Object.call(this);
</span><span class="cx">
</span><ins>+ this._recording = timelineRecording;
+ this._recording.addEventListener(WebInspector.TimelineRecording.Event.TimelineAdded, this._timelineAdded, this);
+ this._recording.addEventListener(WebInspector.TimelineRecording.Event.TimelineRemoved, this._timelineRemoved, this);
+
</ins><span class="cx"> this._element = document.createElement("div");
</span><span class="cx"> this._element.className = WebInspector.TimelineOverview.StyleClassName;
</span><span class="cx"> this._element.addEventListener("wheel", this._handleWheelEvent.bind(this));
</span><span class="cx">
</span><del>- this._graphsContainer = document.createElement("div");
- this._graphsContainer.className = WebInspector.TimelineOverview.GraphsContainerStyleClassName;
- this._element.appendChild(this._graphsContainer);
</del><ins>+ this._graphsContainerElement = document.createElement("div");
+ this._graphsContainerElement.className = WebInspector.TimelineOverview.GraphsContainerStyleClassName;
+ this._element.appendChild(this._graphsContainerElement);
</ins><span class="cx">
</span><del>- this._timelineOverviewGraphsMap = timelineOverviewGraphsMap;
</del><ins>+ this._timelineOverviewGraphsMap = new Map;
</ins><span class="cx">
</span><del>- for (var timelineOverviewGraph of this._timelineOverviewGraphsMap.values()) {
- timelineOverviewGraph.timelineOverview = this;
- this._graphsContainer.appendChild(timelineOverviewGraph.element);
- }
-
</del><span class="cx"> this._timelineRuler = new WebInspector.TimelineRuler;
</span><span class="cx"> this._timelineRuler.allowsClippedLabels = true;
</span><span class="cx"> this._timelineRuler.allowsTimeRangeSelection = true;
</span><span class="lines">@@ -51,14 +50,14 @@
</span><span class="cx"> this._currentTimeMarker = new WebInspector.TimelineMarker(0, WebInspector.TimelineMarker.Type.CurrentTime);
</span><span class="cx"> this._timelineRuler.addMarker(this._currentTimeMarker);
</span><span class="cx">
</span><del>- this._scrollContainer = document.createElement("div");
- this._scrollContainer.className = WebInspector.TimelineOverview.ScrollContainerStyleClassName;
- this._scrollContainer.addEventListener("scroll", this._handleScrollEvent.bind(this));
- this._element.appendChild(this._scrollContainer);
</del><ins>+ this._scrollContainerElement = document.createElement("div");
+ this._scrollContainerElement.className = WebInspector.TimelineOverview.ScrollContainerStyleClassName;
+ this._scrollContainerElement.addEventListener("scroll", this._handleScrollEvent.bind(this));
+ this._element.appendChild(this._scrollContainerElement);
</ins><span class="cx">
</span><span class="cx"> this._scrollWidthSizer = document.createElement("div");
</span><span class="cx"> this._scrollWidthSizer.className = WebInspector.TimelineOverview.ScrollWidthSizerStyleClassName;
</span><del>- this._scrollContainer.appendChild(this._scrollWidthSizer);
</del><ins>+ this._scrollContainerElement.appendChild(this._scrollWidthSizer);
</ins><span class="cx">
</span><span class="cx"> this._secondsPerPixelSetting = new WebInspector.Setting("timeline-overview-seconds-per-pixel", 0.01);
</span><span class="cx"> this._selectionStartTimeSetting = new WebInspector.Setting("timeline-overview-selection-start-time", 0);
</span><span class="lines">@@ -73,6 +72,9 @@
</span><span class="cx">
</span><span class="cx"> this.selectionStartTime = this._selectionStartTimeSetting.value;
</span><span class="cx"> this.selectionDuration = this._selectionDurationSetting.value;
</span><ins>+
+ for (var timeline of this._recording.timelines.values())
+ this._timelineAdded(timeline);
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> WebInspector.TimelineOverview.StyleClassName = "timeline-overview";
</span><span class="lines">@@ -179,7 +181,7 @@
</span><span class="cx"> get visibleDuration()
</span><span class="cx"> {
</span><span class="cx"> if (isNaN(this._cachedScrollContainerWidth)) {
</span><del>- this._cachedScrollContainerWidth = this._scrollContainer.offsetWidth;
</del><ins>+ this._cachedScrollContainerWidth = this._scrollContainerElement.offsetWidth;
</ins><span class="cx"> console.assert(this._cachedScrollContainerWidth > 0);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -234,6 +236,12 @@
</span><span class="cx"> timelineOverviewGraph.hidden();
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ reset: function()
+ {
+ for (var timelineOverviewGraph of this._timelineOverviewGraphsMap.values())
+ timelineOverviewGraph.reset();
+ },
+
</ins><span class="cx"> addMarker: function(marker)
</span><span class="cx"> {
</span><span class="cx"> this._timelineRuler.addMarker(marker);
</span><span class="lines">@@ -283,7 +291,7 @@
</span><span class="cx">
</span><span class="cx"> if (!this._dontUpdateScrollLeft) {
</span><span class="cx"> this._ignoreNextScrollEvent = true;
</span><del>- this._scrollContainer.scrollLeft = Math.ceil((scrollStartTime - this._startTime) / this._secondsPerPixel);
</del><ins>+ this._scrollContainerElement.scrollLeft = Math.ceil((scrollStartTime - this._startTime) / this._secondsPerPixel);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this._timelineRuler.updateLayout();
</span><span class="lines">@@ -339,7 +347,7 @@
</span><span class="cx">
</span><span class="cx"> this._dontUpdateScrollLeft = true;
</span><span class="cx">
</span><del>- var scrollOffset = this._scrollContainer.scrollLeft;
</del><ins>+ var scrollOffset = this._scrollContainerElement.scrollLeft;
</ins><span class="cx"> this.scrollStartTime = this._startTime + (scrollOffset * this._secondsPerPixel);
</span><span class="cx">
</span><span class="cx"> // Force layout so we can update with the scroll position synchronously.
</span><span class="lines">@@ -361,7 +369,7 @@
</span><span class="cx"> var newWheelEvent = new event.constructor(event.type, event);
</span><span class="cx"> newWheelEvent.__cloned = true;
</span><span class="cx">
</span><del>- this._scrollContainer.dispatchEvent(newWheelEvent);
</del><ins>+ this._scrollContainerElement.dispatchEvent(newWheelEvent);
</ins><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -379,6 +387,32 @@
</span><span class="cx"> event.stopPropagation();
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ _timelineAdded: function(timelineOrEvent)
+ {
+ var timeline = timelineOrEvent;
+ if (!(timeline instanceof WebInspector.Timeline))
+ timeline = timelineOrEvent.data.timeline;
+
+ console.assert(timeline instanceof WebInspector.Timeline, timeline);
+ console.assert(!this._timelineOverviewGraphsMap.has(timeline), timeline);
+
+ var overviewGraph = new WebInspector.TimelineOverviewGraph(timeline);
+ overviewGraph.timelineOverview = this;
+ this._timelineOverviewGraphsMap.set(timeline, overviewGraph);
+ this._graphsContainerElement.appendChild(overviewGraph.element);
+ },
+
+ _timelineRemoved: function(event)
+ {
+ var timeline = event.data.timeline;
+ console.assert(timeline instanceof WebInspector.Timeline, timeline);
+ console.assert(this._timelineOverviewGraphsMap.has(timeline), timeline);
+
+ var overviewGraph = this._timelineOverviewGraphsMap.take(timeline);
+ overviewGraph.timelineOverview = null;
+ this._graphsContainerElement.removeChild(overviewGraph.element);
+ },
+
</ins><span class="cx"> _timeRangeSelectionChanged: function(event)
</span><span class="cx"> {
</span><span class="cx"> this._selectionStartTimeSetting.value = this.selectionStartTime - this._startTime;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordingContentViewcssfromrev180000trunkSourceWebInspectorUIUserInterfaceViewsTimelineContentViewcss"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css (from rev 180000, trunk/Source/WebInspectorUI/UserInterface/Views/TimelineContentView.css) (0 => 180001)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css 2015-02-12 19:00:03 UTC (rev 180001)
</span><span class="lines">@@ -0,0 +1,49 @@
</span><ins>+/*
+ * Copyright (C) 2013 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.
+ */
+
+.content-view.timeline-recording > .timeline-overview {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+}
+
+.content-view.timeline-recording > .view-container {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: hidden;
+}
+
+.content-view.timeline-recording > .view-container > .timeline-view > .data-grid td {
+ height: 16px;
+ line-height: 16px;
+}
+
+.content-view.timeline-recording > .view-container > .timeline-view > .data-grid table.data {
+ background-image: linear-gradient(to bottom, white, white 50%, rgb(243, 243, 243) 50%, rgb(243, 243, 243));
+ background-size: 100% 40px;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordingContentViewjsfromrev180000trunkSourceWebInspectorUIUserInterfaceViewsTimelineContentViewjs"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js (from rev 180000, trunk/Source/WebInspectorUI/UserInterface/Views/TimelineContentView.js) (0 => 180001)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js 2015-02-12 19:00:03 UTC (rev 180001)
</span><span class="lines">@@ -0,0 +1,547 @@
</span><ins>+/*
+ * Copyright (C) 2013 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.TimelineRecordingContentView = function(recording)
+{
+ WebInspector.ContentView.call(this, recording);
+
+ this._recording = recording;
+
+ this.element.classList.add(WebInspector.TimelineRecordingContentView.StyleClassName);
+
+ this._timelineOverview = new WebInspector.TimelineOverview(this._recording);
+ this._timelineOverview.addEventListener(WebInspector.TimelineOverview.Event.TimeRangeSelectionChanged, this._timeRangeSelectionChanged, this);
+ this.element.appendChild(this._timelineOverview.element);
+
+ this._viewContainerElement = document.createElement("div");
+ this._viewContainerElement.classList.add(WebInspector.TimelineRecordingContentView.ViewContainerStyleClassName);
+ this.element.appendChild(this._viewContainerElement);
+
+ var trashImage;
+ if (WebInspector.Platform.isLegacyMacOS)
+ trashImage = {src: "Images/Legacy/NavigationItemTrash.svg", width: 16, height: 16};
+ else
+ trashImage = {src: "Images/NavigationItemTrash.svg", width: 15, height: 15};
+
+ this._clearTimelineNavigationItem = new WebInspector.ButtonNavigationItem("clear-timeline", WebInspector.UIString("Clear Timeline"), trashImage.src, trashImage.width, trashImage.height);
+ this._clearTimelineNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._clearTimeline, this);
+
+ this._overviewTimelineView = new WebInspector.OverviewTimelineView(recording);
+ this._overviewTimelineView.secondsPerPixel = this._timelineOverview.secondsPerPixel;
+
+ this._timelineViewMap = new Map;
+ this._pathComponentMap = new Map;
+
+ this._currentTimelineView = null;
+ this._currentTimelineViewIdentifier = null;
+
+ this._updating = false;
+ this._currentTime = NaN;
+ this._lastUpdateTimestamp = NaN;
+ this._startTimeNeedsReset = true;
+
+ this._recording.addEventListener(WebInspector.TimelineRecording.Event.TimelineAdded, this._timelineAdded, this);
+ this._recording.addEventListener(WebInspector.TimelineRecording.Event.TimelineRemoved, this._timelineRemoved, this);
+ this._recording.addEventListener(WebInspector.TimelineRecording.Event.Reset, this._recordingReset, this);
+ this._recording.addEventListener(WebInspector.TimelineRecording.Event.Unloaded, this._recordingUnloaded, this);
+
+ WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.CapturingStarted, this._capturingStarted, this);
+ WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.CapturingStopped, this._capturingStopped, this);
+
+ WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Paused, this._debuggerPaused, this);
+ WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Resumed, this._debuggerResumed, this);
+
+ for (var timeline of this._recording.timelines.values())
+ this._timelineAdded(timeline);
+
+ this.showOverviewTimelineView();
+};
+
+WebInspector.TimelineRecordingContentView.StyleClassName = "timeline-recording";
+WebInspector.TimelineRecordingContentView.ViewContainerStyleClassName = "view-container";
+
+WebInspector.TimelineRecordingContentView.SelectedTimelineTypeCookieKey = "timeline-recording-content-view-selected-timeline-type";
+WebInspector.TimelineRecordingContentView.OverviewTimelineViewCookieValue = "timeline-recording-content-view-overview-timeline-view";
+
+WebInspector.TimelineRecordingContentView.prototype = {
+ constructor: WebInspector.TimelineRecordingContentView,
+ __proto__: WebInspector.ContentView.prototype,
+
+ // Public
+
+ showOverviewTimelineView: function()
+ {
+ this._showTimelineView(this._overviewTimelineView);
+ },
+
+ showTimelineViewForTimeline: function(timeline)
+ {
+ console.assert(timeline instanceof WebInspector.Timeline, timeline);
+ console.assert(this._timelineViewMap.has(timeline), timeline);
+ if (!this._timelineViewMap.has(timeline))
+ return;
+
+ this._showTimelineView(this._timelineViewMap.get(timeline));
+ },
+
+ get allowedNavigationSidebarPanels()
+ {
+ return [WebInspector.timelineSidebarPanel.identifier];
+ },
+
+ get supportsSplitContentBrowser()
+ {
+ // The layout of the overview and split content browser don't work well.
+ return false;
+ },
+
+ get selectionPathComponents()
+ {
+ var pathComponents = [];
+ if (this._currentTimelineView.representedObject instanceof WebInspector.Timeline)
+ pathComponents.push(this._pathComponentMap.get(this._currentTimelineView.representedObject));
+ pathComponents = pathComponents.concat(this._currentTimelineView.selectionPathComponents || []);
+ return pathComponents;
+ },
+
+ get navigationItems()
+ {
+ return [this._clearTimelineNavigationItem];
+ },
+
+ get currentTimelineView()
+ {
+ return this._currentTimelineView;
+ },
+
+ shown: function()
+ {
+ if (!this._currentTimelineView)
+ return;
+
+ this._timelineOverview.shown();
+ this._currentTimelineView.shown();
+ this._clearTimelineNavigationItem.enabled = this._recording.isWritable();
+
+ if (!this._updating && WebInspector.timelineManager.activeRecording === this._recording && WebInspector.timelineManager.isCapturing())
+ this._startUpdatingCurrentTime();
+ },
+
+ hidden: function()
+ {
+ if (!this._currentTimelineView)
+ return;
+
+ this._timelineOverview.hidden();
+ this._currentTimelineView.hidden();
+
+ if (this._updating)
+ this._stopUpdatingCurrentTime();
+ },
+
+ filterDidChange: function()
+ {
+ if (!this._currentTimelineView)
+ return;
+
+ this._currentTimelineView.filterDidChange();
+ },
+
+ updateLayout: function()
+ {
+ this._timelineOverview.updateLayoutForResize();
+
+ if (!this._currentTimelineView)
+ return;
+
+ this._currentTimelineView.updateLayout();
+ },
+
+ saveToCookie: function(cookie)
+ {
+ cookie.type = WebInspector.ContentViewCookieType.Timelines;
+
+ if (!this._currentTimelineView || this._currentTimelineView === this._overviewTimelineView)
+ cookie[WebInspector.TimelineRecordingContentView.SelectedTimelineTypeCookieKey] = WebInspector.TimelineRecordingContentView.OverviewTimelineViewCookieValue;
+ else
+ cookie[WebInspector.TimelineRecordingContentView.SelectedTimelineTypeCookieKey] = this._currentTimelineView.representedObject.type;
+ },
+
+ restoreFromCookie: function(cookie)
+ {
+ var timelineType = cookie[WebInspector.TimelineRecordingContentView.SelectedTimelineTypeCookieKey];
+
+ if (timelineType === WebInspector.TimelineRecordingContentView.OverviewTimelineViewCookieValue)
+ this.showOverviewTimelineView();
+ else
+ this.showTimelineViewForTimeline(this.representedObject.timelines.get(timelineType));
+ },
+
+ matchTreeElementAgainstCustomFilters: function(treeElement)
+ {
+ if (this._currentTimelineView && !this._currentTimelineView.matchTreeElementAgainstCustomFilters(treeElement))
+ return false;
+
+ var startTime = this._timelineOverview.selectionStartTime;
+ var endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
+ var currentTime = this._currentTime || this._recording.startTime;
+
+ function checkTimeBounds(itemStartTime, itemEndTime)
+ {
+ itemStartTime = itemStartTime || currentTime;
+ itemEndTime = itemEndTime || currentTime;
+
+ return startTime <= itemEndTime && itemStartTime <= endTime;
+ }
+
+ if (treeElement instanceof WebInspector.ResourceTreeElement) {
+ var resource = treeElement.resource;
+ return checkTimeBounds(resource.requestSentTimestamp, resource.finishedOrFailedTimestamp);
+ }
+
+ if (treeElement instanceof WebInspector.SourceCodeTimelineTreeElement) {
+ var sourceCodeTimeline = treeElement.sourceCodeTimeline;
+
+ // Do a quick check of the timeline bounds before we check each record.
+ if (!checkTimeBounds(sourceCodeTimeline.startTime, sourceCodeTimeline.endTime))
+ return false;
+
+ for (var record of sourceCodeTimeline.records) {
+ if (checkTimeBounds(record.startTime, record.endTime))
+ return true;
+ }
+
+ return false;
+ }
+
+ if (treeElement instanceof WebInspector.ProfileNodeTreeElement) {
+ var profileNode = treeElement.profileNode;
+ for (var call of profileNode.calls) {
+ if (checkTimeBounds(call.startTime, call.endTime))
+ return true;
+ }
+
+ return false;
+ }
+
+ if (treeElement instanceof WebInspector.TimelineRecordTreeElement) {
+ var record = treeElement.record;
+ return checkTimeBounds(record.startTime, record.endTime);
+ }
+
+ console.error("Unknown TreeElement, can't filter by time.");
+ return true;
+ },
+
+ // Private
+
+ _pathComponentSelected: function(event)
+ {
+ WebInspector.timelineSidebarPanel.showTimelineViewForTimeline(event.data.pathComponent.representedObject);
+ },
+
+ _timelineViewSelectionPathComponentsDidChange: function()
+ {
+ this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+ },
+
+ _showTimelineView: function(timelineView)
+ {
+ console.assert(timelineView instanceof WebInspector.TimelineView);
+ console.assert(timelineView.representedObject === this._recording || this._recording.timelines.has(timelineView.representedObject.type));
+
+ // If the content view is shown and then hidden, we must reattach the content tree outline and timeline view.
+ if (timelineView.visible && timelineView === this._currentTimelineView)
+ return;
+
+ if (this._currentTimelineView) {
+ this._currentTimelineView.removeEventListener(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange, this._timelineViewSelectionPathComponentsDidChange, this);
+
+ this._currentTimelineView.hidden();
+ this._currentTimelineView.element.remove();
+ }
+
+ this._currentTimelineView = timelineView;
+
+ WebInspector.timelineSidebarPanel.contentTreeOutline = timelineView && timelineView.navigationSidebarTreeOutline;
+ WebInspector.timelineSidebarPanel.contentTreeOutlineLabel = timelineView && timelineView.navigationSidebarTreeOutlineLabel;
+
+ if (this._currentTimelineView) {
+ this._currentTimelineView.addEventListener(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange, this._timelineViewSelectionPathComponentsDidChange, this);
+
+ this._viewContainerElement.appendChild(this._currentTimelineView.element);
+
+ this._currentTimelineView.startTime = this._timelineOverview.selectionStartTime;
+ this._currentTimelineView.endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
+ this._currentTimelineView.currentTime = this._currentTime;
+
+ this._currentTimelineView.shown();
+ this._currentTimelineView.updateLayout();
+ }
+
+ this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+ },
+
+ _update: function(timestamp)
+ {
+ if (this._waitingToResetCurrentTime) {
+ requestAnimationFrame(this._updateCallback);
+ return;
+ }
+
+ var startTime = this._recording.startTime;
+ var currentTime = this._currentTime || startTime;
+ var endTime = this._recording.endTime;
+ var timespanSinceLastUpdate = (timestamp - this._lastUpdateTimestamp) / 1000 || 0;
+
+ currentTime += timespanSinceLastUpdate;
+
+ this._updateTimes(startTime, currentTime, endTime);
+
+ // Only stop updating if the current time is greater than the end time.
+ if (!this._updating && currentTime >= endTime) {
+ this._lastUpdateTimestamp = NaN;
+ return;
+ }
+
+ this._lastUpdateTimestamp = timestamp;
+
+ requestAnimationFrame(this._updateCallback);
+ },
+
+ _updateTimes: function(startTime, currentTime, endTime)
+ {
+ if (this._startTimeNeedsReset && !isNaN(startTime)) {
+ var selectionOffset = this._timelineOverview.selectionStartTime - this._timelineOverview.startTime;
+
+ this._timelineOverview.startTime = startTime;
+ this._timelineOverview.selectionStartTime = startTime + selectionOffset;
+
+ this._overviewTimelineView.zeroTime = startTime;
+ for (var timelineView of this._timelineViewMap.values())
+ timelineView.zeroTime = startTime;
+
+ delete this._startTimeNeedsReset;
+ }
+
+ this._timelineOverview.endTime = Math.max(endTime, currentTime);
+
+ this._currentTime = currentTime;
+ this._timelineOverview.currentTime = currentTime;
+ this._currentTimelineView.currentTime = currentTime;
+
+ WebInspector.timelineSidebarPanel.updateFilter();
+
+ // Force a layout now since we are already in an animation frame and don't need to delay it until the next.
+ this._timelineOverview.updateLayoutIfNeeded();
+ this._currentTimelineView.updateLayoutIfNeeded();
+ },
+
+ _startUpdatingCurrentTime: function()
+ {
+ console.assert(!this._updating);
+ if (this._updating)
+ return;
+
+ if (!isNaN(this._currentTime)) {
+ // We have a current time already, so we likely need to jump into the future to a better current time.
+ // This happens when you stop and later restart recording.
+ console.assert(!this._waitingToResetCurrentTime);
+ this._waitingToResetCurrentTime = true;
+ this._recording.addEventListener(WebInspector.TimelineRecording.Event.TimesUpdated, this._recordingTimesUpdated, this);
+ }
+
+ this._updating = true;
+
+ if (!this._updateCallback)
+ this._updateCallback = this._update.bind(this);
+
+ requestAnimationFrame(this._updateCallback);
+ },
+
+ _stopUpdatingCurrentTime: function()
+ {
+ console.assert(this._updating);
+ this._updating = false;
+
+ if (this._waitingToResetCurrentTime) {
+ // Did not get any event while waiting for the current time, but we should stop waiting.
+ this._recording.removeEventListener(WebInspector.TimelineRecording.Event.TimesUpdated, this._recordingTimesUpdated, this);
+ this._waitingToResetCurrentTime = false;
+ }
+ },
+
+ _capturingStarted: function(event)
+ {
+ this._startUpdatingCurrentTime();
+ },
+
+ _capturingStopped: function(event)
+ {
+ if (this._updating)
+ this._stopUpdatingCurrentTime();
+ },
+
+ _debuggerPaused: function(event)
+ {
+ if (WebInspector.replayManager.sessionState === WebInspector.ReplayManager.SessionState.Replaying)
+ return;
+
+ this._stopUpdatingCurrentTime();
+ },
+
+ _debuggerResumed: function(event)
+ {
+ if (WebInspector.replayManager.sessionState === WebInspector.ReplayManager.SessionState.Replaying)
+ return;
+
+ this._startUpdatingCurrentTime();
+ },
+
+ _recordingTimesUpdated: function(event)
+ {
+ if (!this._waitingToResetCurrentTime)
+ return;
+
+ // Make the current time be the start time of the last added record. This is the best way
+ // currently to jump to the right period of time after recording starts.
+ // FIXME: If no activity is happening we can sit for a while until a record is added.
+ // We might want to have the backend send a "start" record to get current time moving.
+
+ for (var timeline of this._recording.timelines.values()) {
+ var lastRecord = timeline.records.lastValue;
+ if (!lastRecord)
+ continue;
+ this._currentTime = Math.max(this._currentTime, lastRecord.startTime);
+ }
+
+ this._recording.removeEventListener(WebInspector.TimelineRecording.Event.TimesUpdated, this._recordingTimesUpdated, this);
+ this._waitingToResetCurrentTime = false;
+ },
+
+ _clearTimeline: function(event)
+ {
+ this._recording.reset();
+ },
+
+ _timelineAdded: function(timelineOrEvent)
+ {
+ var timeline = timelineOrEvent;
+ if (!(timeline instanceof WebInspector.Timeline))
+ timeline = timelineOrEvent.data.timeline;
+
+ console.assert(timeline instanceof WebInspector.Timeline, timeline);
+ console.assert(!this._timelineViewMap.has(timeline), timeline);
+
+ this._timelineViewMap.set(timeline, new WebInspector.TimelineView(timeline));
+
+ var pathComponent = new WebInspector.HierarchicalPathComponent(timeline.displayName, timeline.iconClassName, timeline);
+ pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
+ this._pathComponentMap.set(timeline, pathComponent);
+
+ this._timelineCountChanged();
+ },
+
+ _timelineRemoved: function(event)
+ {
+ var timeline = event.data.timeline;
+ console.assert(timeline instanceof WebInspector.Timeline, timeline);
+ console.assert(this._timelineViewMap.has(timeline), timeline);
+
+ var timelineView = this._timelineViewMap.take(timeline);
+ if (this._currentTimelineView === timelineView)
+ this.showOverviewTimelineView();
+
+ this._pathComponentMap.delete(timeline);
+
+ this._timelineCountChanged();
+ },
+
+ _timelineCountChanged: function()
+ {
+ var previousPathComponent = null;
+ for (var pathComponent of this._pathComponentMap.values()) {
+ if (previousPathComponent) {
+ previousPathComponent.nextSibling = pathComponent;
+ pathComponent.previousSibling = previousPathComponent;
+ }
+
+ previousPathComponent = pathComponent;
+ }
+
+ var timelineCount = this._recording.timelines.size;
+ const timelineHeight = 36;
+ const extraOffset = 22;
+ this._timelineOverview.element.style.height = (timelineCount * timelineHeight + extraOffset) + "px";
+ this._viewContainerElement.style.top = (timelineCount * timelineHeight + extraOffset) + "px";
+ },
+
+ _recordingReset: function(event)
+ {
+ this._currentTime = NaN;
+
+ if (!this._updating) {
+ // Force the time ruler and views to reset to 0.
+ this._startTimeNeedsReset = true;
+ this._updateTimes(0, 0, 0);
+ }
+
+ this._lastUpdateTimestamp = NaN;
+ this._startTimeNeedsReset = true;
+
+ this._recording.removeEventListener(WebInspector.TimelineRecording.Event.TimesUpdated, this._recordingTimesUpdated, this);
+ this._waitingToResetCurrentTime = false;
+
+ this._timelineOverview.reset();
+ this._overviewTimelineView.reset();
+ for (var timelineView of this._timelineViewMap.values())
+ timelineView.reset();
+ },
+
+ _recordingUnloaded: function(event)
+ {
+ console.assert(!this._updating);
+
+ WebInspector.timelineManager.removeEventListener(WebInspector.TimelineManager.Event.CapturingStarted, this._capturingStarted, this);
+ WebInspector.timelineManager.removeEventListener(WebInspector.TimelineManager.Event.CapturingStopped, this._capturingStopped, this);
+ },
+
+ _timeRangeSelectionChanged: function(event)
+ {
+ this._currentTimelineView.startTime = this._timelineOverview.selectionStartTime;
+ this._currentTimelineView.endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
+
+ // 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;
+ var selectionWasHidden = selectedTreeElement && selectedTreeElement.hidden;
+
+ WebInspector.timelineSidebarPanel.updateFilter();
+
+ if (selectedTreeElement && selectedTreeElement.hidden !== selectionWasHidden)
+ this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+ }.bind(this));
+ }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineSidebarPanelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css (180000 => 180001)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css 2015-02-12 18:50:53 UTC (rev 180000)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css 2015-02-12 19:00:03 UTC (rev 180001)
</span><span class="lines">@@ -239,7 +239,7 @@
</span><span class="cx"> top: 175px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.sidebar > .panel.navigation.timeline.timeline-content-view-showing > .content {
</del><ins>+.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing > .content {
</ins><span class="cx"> /* This hides the scrollbar. The view shows a scrollbar, we don't need two. */
</span><span class="cx"> padding-right: 16px;
</span><span class="cx"> right: -16px;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js (180000 => 180001)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js 2015-02-12 18:50:53 UTC (rev 180000)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js 2015-02-12 19:00:03 UTC (rev 180001)
</span><span class="lines">@@ -34,10 +34,13 @@
</span><span class="cx">
</span><span class="cx"> this.contentTreeOutlineLabel = "";
</span><span class="cx">
</span><del>- this._timelinesContentContainer = document.createElement("div");
- this._timelinesContentContainer.classList.add(WebInspector.TimelineSidebarPanel.TimelinesContentContainerStyleClass);
- this.element.insertBefore(this._timelinesContentContainer, this.element.firstChild);
</del><ins>+ this._timelinesContentContainerElement = document.createElement("div");
+ this._timelinesContentContainerElement.classList.add(WebInspector.TimelineSidebarPanel.TimelinesContentContainerStyleClass);
+ this.element.insertBefore(this._timelinesContentContainerElement, this.element.firstChild);
</ins><span class="cx">
</span><ins>+ this._displayedRecording = null;
+ this._displayedContentView = null;
+
</ins><span class="cx"> // Maintain an invisible tree outline containing tree elements for all recordings.
</span><span class="cx"> // The visible recording's tree element is selected when the content view changes.
</span><span class="cx"> this._recordingTreeElementMap = new Map;
</span><span class="lines">@@ -45,37 +48,16 @@
</span><span class="cx"> this._recordingsTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
</span><span class="cx"> this._recordingsTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementHiddenStyleClassName);
</span><span class="cx"> this._recordingsTreeOutline.onselect = this._recordingsTreeElementSelected.bind(this);
</span><del>- this._timelinesContentContainer.appendChild(this._recordingsTreeOutline.element);
</del><ins>+ this._timelinesContentContainerElement.appendChild(this._recordingsTreeOutline.element);
</ins><span class="cx">
</span><ins>+ // Maintain a tree outline with tree elements for each timeline of the selected recording.
</ins><span class="cx"> this._timelinesTreeOutline = this.createContentTreeOutline(true, true);
</span><span class="cx"> this._timelinesTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
</span><span class="cx"> this._timelinesTreeOutline.onselect = this._timelinesTreeElementSelected.bind(this);
</span><del>- this._timelinesContentContainer.appendChild(this._timelinesTreeOutline.element);
</del><ins>+ this._timelinesContentContainerElement.appendChild(this._timelinesTreeOutline.element);
</ins><span class="cx">
</span><del>- function createTimelineTreeElement(label, iconClass, identifier)
- {
- var treeElement = new WebInspector.GeneralTreeElement([iconClass, WebInspector.TimelineSidebarPanel.LargeIconStyleClass], label, null, identifier);
-
- const tooltip = WebInspector.UIString("Close %s timeline view").format(label);
- wrappedSVGDocument(platformImagePath("CloseLarge.svg"), WebInspector.TimelineSidebarPanel.CloseButtonStyleClass, tooltip, function(element) {
- var button = new WebInspector.TreeElementStatusButton(element);
- button.addEventListener(WebInspector.TreeElementStatusButton.Event.Clicked, this.showTimelineOverview, this);
- treeElement.status = button.element;
- }.bind(this));
-
- return treeElement;
- }
-
- // Timeline elements are reused; clicking them displays a TimelineView
- // for the relevant timeline of the active recording.
</del><span class="cx"> this._timelineTreeElementMap = new Map;
</span><del>- this._timelineTreeElementMap.set(WebInspector.TimelineRecord.Type.Network, createTimelineTreeElement.call(this, WebInspector.UIString("Network Requests"), WebInspector.TimelineSidebarPanel.NetworkIconStyleClass, WebInspector.TimelineRecord.Type.Network));
- this._timelineTreeElementMap.set(WebInspector.TimelineRecord.Type.Layout, createTimelineTreeElement.call(this, WebInspector.UIString("Layout & Rendering"), WebInspector.TimelineSidebarPanel.ColorsIconStyleClass, WebInspector.TimelineRecord.Type.Layout));
- this._timelineTreeElementMap.set(WebInspector.TimelineRecord.Type.Script, createTimelineTreeElement.call(this, WebInspector.UIString("JavaScript & Events"), WebInspector.TimelineSidebarPanel.ScriptIconStyleClass, WebInspector.TimelineRecord.Type.Script));
</del><span class="cx">
</span><del>- for (var timelineTreeElement of this._timelineTreeElementMap.values())
- this._timelinesTreeOutline.appendChild(timelineTreeElement);
-
</del><span class="cx"> var timelinesTitleBarElement = document.createElement("div");
</span><span class="cx"> timelinesTitleBarElement.textContent = WebInspector.UIString("Timelines");
</span><span class="cx"> timelinesTitleBarElement.classList.add(WebInspector.TimelineSidebarPanel.TitleBarStyleClass);
</span><span class="lines">@@ -157,9 +139,9 @@
</span><span class="cx"> WebInspector.TimelineSidebarPanel.NetworkIconStyleClass = "network-icon";
</span><span class="cx"> WebInspector.TimelineSidebarPanel.ColorsIconStyleClass = "colors-icon";
</span><span class="cx"> WebInspector.TimelineSidebarPanel.ScriptIconStyleClass = "script-icon";
</span><del>-WebInspector.TimelineSidebarPanel.TimelineContentViewShowingStyleClass = "timeline-content-view-showing";
</del><ins>+WebInspector.TimelineSidebarPanel.TimelineRecordingContentViewShowingStyleClass = "timeline-recording-content-view-showing";
</ins><span class="cx">
</span><del>-WebInspector.TimelineSidebarPanel.ShowingTimelineContentViewCookieKey = "timeline-sidebar-panel-showing-timeline-content-view";
</del><ins>+WebInspector.TimelineSidebarPanel.ShowingTimelineRecordingContentViewCookieKey = "timeline-sidebar-panel-showing-timeline-recording-content-view";
</ins><span class="cx"> WebInspector.TimelineSidebarPanel.SelectedTimelineViewIdentifierCookieKey = "timeline-sidebar-panel-selected-timeline-view-identifier";
</span><span class="cx"> WebInspector.TimelineSidebarPanel.OverviewTimelineIdentifierCookieValue = "overview";
</span><span class="cx">
</span><span class="lines">@@ -173,13 +155,13 @@
</span><span class="cx"> {
</span><span class="cx"> WebInspector.NavigationSidebarPanel.prototype.shown.call(this);
</span><span class="cx">
</span><del>- if (this._activeContentView)
- WebInspector.contentBrowser.showContentView(this._activeContentView);
</del><ins>+ if (this._displayedContentView)
+ WebInspector.contentBrowser.showContentView(this._displayedContentView);
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> showDefaultContentView: function()
</span><span class="cx"> {
</span><del>- if (this._activeContentView)
</del><ins>+ if (this._displayedContentView)
</ins><span class="cx"> this.showTimelineOverview();
</span><span class="cx"> },
</span><span class="cx">
</span><span class="lines">@@ -193,6 +175,13 @@
</span><span class="cx"> if (representedObject instanceof WebInspector.TimelineRecording)
</span><span class="cx"> return this._recordingTreeElementMap.get(representedObject);
</span><span class="cx">
</span><ins>+ // This fails if the timeline does not belong to the selected recording.
+ if (representedObject instanceof WebInspector.Timeline) {
+ var foundTreeElement = this._timelineTreeElementMap.get(representedObject);
+ if (foundTreeElement)
+ return foundTreeElement;
+ }
+
</ins><span class="cx"> // The main resource is used as the representedObject instead of Frame in our tree.
</span><span class="cx"> if (representedObject instanceof WebInspector.Frame)
</span><span class="cx"> representedObject = representedObject.mainResource;
</span><span class="lines">@@ -215,6 +204,11 @@
</span><span class="cx"> if (candidateRepresentedObject.sourceCode === representedObject)
</span><span class="cx"> return true;
</span><span class="cx"> return false;
</span><ins>+ } else if (candidateRepresentedObject instanceof WebInspector.Timeline && representedObject instanceof WebInspector.Timeline) {
+ // Reopen to the same timeline, even if a different parent recording is currently shown.
+ if (candidateRepresentedObject.type === representedObject.type)
+ return true;
+ return false;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if (candidateRepresentedObject instanceof WebInspector.TimelineRecord) {
</span><span class="lines">@@ -265,20 +259,19 @@
</span><span class="cx"> if (this._timelinesTreeOutline.selectedTreeElement)
</span><span class="cx"> this._timelinesTreeOutline.selectedTreeElement.deselect();
</span><span class="cx">
</span><del>- this._activeContentView.showOverviewTimelineView();
- WebInspector.contentBrowser.showContentView(this._activeContentView);
</del><ins>+ this._displayedContentView.showOverviewTimelineView();
+ WebInspector.contentBrowser.showContentView(this._displayedContentView);
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- showTimelineViewForType: function(timelineType)
</del><ins>+ showTimelineViewForTimeline: function(timeline)
</ins><span class="cx"> {
</span><del>- console.assert(this._timelineTreeElementMap.has(timelineType), timelineType);
- if (!this._timelineTreeElementMap.has(timelineType))
- return;
</del><ins>+ console.assert(timeline instanceof WebInspector.Timeline, timeline);
+ console.assert(this._timelineTreeElementMap.has(timeline), "Cannot show timeline because it does not belong to the shown recording.", timeline);
</ins><span class="cx">
</span><span class="cx"> // Defer showing the relevant timeline to the onselect handler of the timelines tree element.
</span><span class="cx"> const wasSelectedByUser = true;
</span><span class="cx"> const shouldSuppressOnSelect = false;
</span><del>- this._timelineTreeElementMap.get(timelineType).select(true, wasSelectedByUser, shouldSuppressOnSelect, true);
</del><ins>+ this._timelineTreeElementMap.get(timeline).select(true, wasSelectedByUser, shouldSuppressOnSelect, true);
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> // Protected
</span><span class="lines">@@ -287,7 +280,7 @@
</span><span class="cx"> {
</span><span class="cx"> WebInspector.NavigationSidebarPanel.prototype.updateFilter.call(this);
</span><span class="cx">
</span><del>- this._activeContentView.filterDidChange();
</del><ins>+ this._displayedContentView.filterDidChange();
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> hasCustomFilters: function()
</span><span class="lines">@@ -297,22 +290,22 @@
</span><span class="cx">
</span><span class="cx"> matchTreeElementAgainstCustomFilters: function(treeElement)
</span><span class="cx"> {
</span><del>- if (!this._activeContentView)
</del><ins>+ if (!this._displayedContentView)
</ins><span class="cx"> return true;
</span><span class="cx">
</span><del>- return this._activeContentView.matchTreeElementAgainstCustomFilters(treeElement);
</del><ins>+ return this._displayedContentView.matchTreeElementAgainstCustomFilters(treeElement);
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> canShowDifferentContentView: function()
</span><span class="cx"> {
</span><del>- return !this.restoringState || !this._restoredShowingTimelineContentView;
</del><ins>+ return !this.restoringState || !this._restoredShowingTimelineRecordingContentView;
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> saveStateToCookie: function(cookie)
</span><span class="cx"> {
</span><span class="cx"> console.assert(cookie);
</span><span class="cx">
</span><del>- cookie[WebInspector.TimelineSidebarPanel.ShowingTimelineContentViewCookieKey] = WebInspector.contentBrowser.currentContentView instanceof WebInspector.TimelineContentView;
</del><ins>+ cookie[WebInspector.TimelineSidebarPanel.ShowingTimelineRecordingContentViewCookieKey] = WebInspector.contentBrowser.currentContentView instanceof WebInspector.TimelineRecordingContentView;
</ins><span class="cx">
</span><span class="cx"> var selectedTreeElement = this._timelinesTreeOutline.selectedTreeElement;
</span><span class="cx"> if (selectedTreeElement)
</span><span class="lines">@@ -327,20 +320,22 @@
</span><span class="cx"> {
</span><span class="cx"> console.assert(cookie);
</span><span class="cx">
</span><del>- // The _activeContentView is not ready on initial load, so delay the restore.
</del><ins>+ // The _displayedContentView is not ready on initial load, so delay the restore.
</ins><span class="cx"> // This matches the delayed work in the WebInspector.TimelineSidebarPanel constructor.
</span><del>- if (!this._activeContentView) {
</del><ins>+ if (!this._displayedContentView) {
</ins><span class="cx"> setTimeout(this.restoreStateFromCookie.bind(this, cookie, relaxedMatchDelay), 0);
</span><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- this._restoredShowingTimelineContentView = cookie[WebInspector.TimelineSidebarPanel.ShowingTimelineContentViewCookieKey];
</del><ins>+ this._restoredShowingTimelineRecordingContentView = cookie[WebInspector.TimelineSidebarPanel.ShowingTimelineRecordingContentViewCookieKey];
</ins><span class="cx">
</span><span class="cx"> var selectedTimelineViewIdentifier = cookie[WebInspector.TimelineSidebarPanel.SelectedTimelineViewIdentifierCookieKey];
</span><span class="cx"> if (!selectedTimelineViewIdentifier || selectedTimelineViewIdentifier === WebInspector.TimelineSidebarPanel.OverviewTimelineIdentifierCookieValue)
</span><span class="cx"> this.showTimelineOverview();
</span><ins>+ else if (this._displayedRecording.timelines.has(selectedTimelineViewIdentifier))
+ this.showTimelineViewForTimeline(this._displayedRecording.timelines.get(selectedTimelineViewIdentifier));
</ins><span class="cx"> else
</span><del>- this.showTimelineViewForType(selectedTimelineViewIdentifier);
</del><ins>+ this.showTimelineOverview();
</ins><span class="cx">
</span><span class="cx"> // Don't call NavigationSidebarPanel.restoreStateFromCookie, because it tries to match based
</span><span class="cx"> // on type only as a last resort. This would cause the first recording to be reselected on reload.
</span><span class="lines">@@ -353,14 +348,14 @@
</span><span class="cx"> console.assert(treeElement.representedObject instanceof WebInspector.TimelineRecording);
</span><span class="cx"> console.assert(!selectedByUser, "Recording tree elements should be hidden and only programmatically selectable.");
</span><span class="cx">
</span><del>- this._activeContentView = WebInspector.contentBrowser.contentViewForRepresentedObject(treeElement.representedObject);
</del><ins>+ this._recordingSelected(treeElement.representedObject);
</ins><span class="cx">
</span><span class="cx"> // Deselect or re-select the timeline tree element for the timeline view being displayed.
</span><del>- var currentTimelineView = this._activeContentView.currentTimelineView;
</del><ins>+ var currentTimelineView = this._displayedContentView.currentTimelineView;
</ins><span class="cx"> if (currentTimelineView && currentTimelineView.representedObject instanceof WebInspector.Timeline) {
</span><span class="cx"> const wasSelectedByUser = false; // This is a simulated selection.
</span><span class="cx"> const shouldSuppressOnSelect = false;
</span><del>- this._timelineTreeElementMap.get(currentTimelineView.representedObject.type).select(true, wasSelectedByUser, shouldSuppressOnSelect, true);
</del><ins>+ this._timelineTreeElementMap.get(currentTimelineView.representedObject).select(true, wasSelectedByUser, shouldSuppressOnSelect, true);
</ins><span class="cx"> } else if (this._timelinesTreeOutline.selectedTreeElement)
</span><span class="cx"> this._timelinesTreeOutline.selectedTreeElement.deselect();
</span><span class="cx">
</span><span class="lines">@@ -373,20 +368,22 @@
</span><span class="cx">
</span><span class="cx"> // If not selected by user, then this selection merely synced the tree element with the content view's contents.
</span><span class="cx"> if (!selectedByUser) {
</span><del>- console.assert(this._activeContentView.currentTimelineView.representedObject.type === treeElement.representedObject);
</del><ins>+ console.assert(this._displayedContentView.currentTimelineView.representedObject === treeElement.representedObject);
</ins><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- var timelineType = treeElement.representedObject;
- var timeline = this._activeContentView.representedObject.timelines.get(timelineType);
- this._activeContentView.showTimelineViewForTimeline(timeline);
- WebInspector.contentBrowser.showContentView(this._activeContentView);
</del><ins>+ var timeline = treeElement.representedObject;
+ console.assert(timeline instanceof WebInspector.Timeline, timeline);
+ console.assert(this._displayedRecording.timelines.get(timeline.type) === timeline, timeline);
+
+ this._displayedContentView.showTimelineViewForTimeline(timeline);
+ WebInspector.contentBrowser.showContentView(this._displayedContentView);
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> _contentBrowserCurrentContentViewDidChange: function(event)
</span><span class="cx"> {
</span><del>- var didShowTimelineContentView = WebInspector.contentBrowser.currentContentView instanceof WebInspector.TimelineContentView;
- this.element.classList.toggle(WebInspector.TimelineSidebarPanel.TimelineContentViewShowingStyleClass, didShowTimelineContentView);
</del><ins>+ var didShowTimelineRecordingContentView = WebInspector.contentBrowser.currentContentView instanceof WebInspector.TimelineRecordingContentView;
+ this.element.classList.toggle(WebInspector.TimelineSidebarPanel.TimelineRecordingContentViewShowingStyleClass, didShowTimelineRecordingContentView);
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> _capturingStarted: function(event)
</span><span class="lines">@@ -410,6 +407,11 @@
</span><span class="cx"> this._recordingTreeElementMap.set(recording, recordingTreeElement);
</span><span class="cx"> this._recordingsTreeOutline.appendChild(recordingTreeElement);
</span><span class="cx">
</span><ins>+ this._recordingCountChanged();
+ },
+
+ _recordingCountChanged: function()
+ {
</ins><span class="cx"> var previousTreeElement = null;
</span><span class="cx"> for (var treeElement of this._recordingTreeElementMap.values()) {
</span><span class="cx"> if (previousTreeElement) {
</span><span class="lines">@@ -421,14 +423,95 @@
</span><span class="cx"> }
</span><span class="cx"> },
</span><span class="cx">
</span><del>- _recordingLoaded: function()
</del><ins>+ _recordingSelected: function(recording)
</ins><span class="cx"> {
</span><del>- this._activeContentView = WebInspector.contentBrowser.contentViewForRepresentedObject(WebInspector.timelineManager.activeRecording);
</del><ins>+ console.assert(recording instanceof WebInspector.TimelineRecording, recording);
</ins><span class="cx">
</span><ins>+ var oldRecording = this._displayedRecording || null;
+ if (oldRecording) {
+ oldRecording.removeEventListener(WebInspector.TimelineRecording.Event.TimelineAdded, this._timelineAdded, this);
+ oldRecording.removeEventListener(WebInspector.TimelineRecording.Event.TimelineRemoved, this._timelineRemoved, this);
+
+ // Destroy tree elements in one operation to avoid unnecessary fixups.
+ this._timelinesTreeOutline.removeChildren();
+ this._timelineTreeElementMap.clear();
+ }
+
+ this._displayedRecording = recording;
+ this._displayedRecording.addEventListener(WebInspector.TimelineRecording.Event.TimelineAdded, this._timelineAdded, this);
+ this._displayedRecording.addEventListener(WebInspector.TimelineRecording.Event.TimelineRemoved, this._timelineRemoved, this);
+
+ for (var timeline of recording.timelines.values())
+ this._timelineAdded(timeline);
+
+ this._displayedContentView = WebInspector.contentBrowser.contentViewForRepresentedObject(this._displayedRecording);
</ins><span class="cx"> if (this.selected)
</span><del>- WebInspector.contentBrowser.showContentView(this._activeContentView);
</del><ins>+ WebInspector.contentBrowser.showContentView(this._displayedContentView);
</ins><span class="cx"> },
</span><span class="cx">
</span><ins>+ _recordingLoaded: function(event)
+ {
+ this._recordingSelected(WebInspector.timelineManager.activeRecording);
+ },
+
+ _timelineAdded: function(timelineOrEvent)
+ {
+ var timeline = timelineOrEvent;
+ if (!(timeline instanceof WebInspector.Timeline))
+ timeline = timelineOrEvent.data.timeline;
+
+ console.assert(timeline instanceof WebInspector.Timeline, timeline);
+ console.assert(!this._timelineTreeElementMap.has(timeline), timeline);
+
+ var timelineTreeElement = new WebInspector.GeneralTreeElement([timeline.iconClassName, WebInspector.TimelineSidebarPanel.LargeIconStyleClass], timeline.displayName, null, timeline);
+ const tooltip = WebInspector.UIString("Close %s timeline view").format(timeline.displayName);
+ wrappedSVGDocument(platformImagePath("CloseLarge.svg"), WebInspector.TimelineSidebarPanel.CloseButtonStyleClass, tooltip, function(element) {
+ var button = new WebInspector.TreeElementStatusButton(element);
+ button.addEventListener(WebInspector.TreeElementStatusButton.Event.Clicked, this.showTimelineOverview, this);
+ timelineTreeElement.status = button.element;
+ }.bind(this));
+ this._timelinesTreeOutline.appendChild(timelineTreeElement);
+ this._timelineTreeElementMap.set(timeline, timelineTreeElement);
+
+ this._timelineCountChanged();
+ },
+
+ _timelineRemoved: function(event)
+ {
+ var timeline = event.data.timeline;
+ console.assert(timeline instanceof WebInspector.Timeline, timeline);
+ console.assert(this._timelineTreeElementMap.has(timeline), timeline);
+
+ var timelineTreeElement = this._timelineTreeElementMap.take(timeline);
+ const shouldSuppressOnDeselect = false;
+ const shouldSuppressSelectSibling = true;
+ this._timelinesTreeOutline.removeChild(timelineTreeElement, shouldSuppressOnDeselect, shouldSuppressSelectSibling);
+ this._timelineTreeElementMap.delete(timeline);
+
+ this._timelineCountChanged();
+ },
+
+ _timelineCountChanged: function()
+ {
+ var previousTreeElement = null;
+ for (var treeElement of this._timelineTreeElementMap.values()) {
+ if (previousTreeElement) {
+ previousTreeElement.nextSibling = treeElement;
+ treeElement.previousSibling = previousTreeElement;
+ }
+
+ previousTreeElement = treeElement;
+ }
+
+ const timelineHeight = 36;
+ const eventTitleBarOffset = 51;
+ const contentElementOffset = 74;
+ var timelineCount = this._displayedRecording.timelines.size;
+ this._timelinesContentContainerElement.style.height = (timelineHeight * timelineCount) + "px";
+ this._timelineEventsTitleBarElement.style.top = (timelineHeight * timelineCount + eventTitleBarOffset) + "px";
+ this.contentElement.style.top = (timelineHeight * timelineCount + contentElementOffset) + "px";
+ },
+
</ins><span class="cx"> _recordGlyphMousedOver: function(event)
</span><span class="cx"> {
</span><span class="cx"> this._recordGlyphElement.classList.remove(WebInspector.TimelineSidebarPanel.RecordGlyphRecordingForcedStyleClass);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.css (180000 => 180001)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.css 2015-02-12 18:50:53 UTC (rev 180000)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.css 2015-02-12 19:00:03 UTC (rev 180001)
</span><span class="lines">@@ -36,7 +36,7 @@
</span><span class="cx"> background-image: none;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.panel.navigation.timeline.timeline-content-view-showing > .content > .navigation-sidebar-panel-content-tree-outline {
</del><ins>+.panel.navigation.timeline.timeline-recording-content-view-showing > .content > .navigation-sidebar-panel-content-tree-outline {
</ins><span class="cx"> background-image: linear-gradient(to bottom, transparent, transparent 50%, rgba(0, 0, 0, 0.03) 50%, rgba(0, 0, 0, 0.03));
</span><span class="cx"> background-size: 100% 40px;
</span><span class="cx"> }
</span></span></pre>
</div>
</div>
</body>
</html>
More information about the webkit-changes
mailing list