<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[197473] trunk/Source/WebInspectorUI</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/197473">197473</a></dd>
<dt>Author</dt> <dd>mattbaker@apple.com</dd>
<dt>Date</dt> <dd>2016-03-02 16:21:00 -0800 (Wed, 02 Mar 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Timelines UI redesign: add the timelines tree outline to the TimelineOverview
https://bugs.webkit.org/show_bug.cgi?id=153034
<rdar://problem/24195628>
Reviewed by Timothy Hatcher.
Move the Timelines tree outline to the overview, in preparation for <https://webkit.org/b/153036>.
* UserInterface/Views/OverviewTimelineView.css:
(.timeline-view.overview > .timeline-ruler > .header): Deleted.
(.timeline-view.overview > .timeline-ruler > .event-markers): Deleted.
These are now part of the default ruler style.
* UserInterface/Views/TimelineOverview.css:
(.timeline-overview > .tree-outline.timelines):
(.timeline-overview > .tree-outline.timelines::before):
(body.window-inactive .timeline-overview > .tree-outline.timelines):
(.timeline-overview.frames > .tree-outline.timelines):
(.timeline-overview > .tree-outline.timelines .close-button):
(.timeline-overview > .tree-outline.timelines .item.selected .close-button):
(.timeline-overview > .tree-outline.timelines .item:not(.selected):nth-child(even)):
(.timeline-overview > .tree-outline.timelines .item:not(.selected):not(:first-child)):
(.timeline-overview > .tree-outline.timelines .item.selected + .item):
(body.window-inactive .timeline-overview > .tree-outline.timelines .item.selected + .item):
(.timeline-overview > .tree-outline.timelines :focus .item.selected + .item):
(.timeline-overview > .scroll-container):
(.timeline-overview.frames > .scroll-container):
(.timeline-overview > .timeline-ruler):
(.timeline-overview.frames > .timeline-ruler):
(.timeline-overview > .timeline-ruler > .markers):
(.timeline-overview > .graphs-container):
(.timeline-overview.frames > .graphs-container):
Styles for the timelines tree outline. A content element is inserted before the
tree to fill the gap created by the timeline ruler. For now the tree has a fixed
width of 185px, and is hidden when displaying the FPS instrument.
* UserInterface/Views/TimelineOverview.js:
(WebInspector.TimelineOverview):
(WebInspector.TimelineOverview.prototype.get selectedTimeline):
(WebInspector.TimelineOverview.prototype.set selectedTimeline):
Make the selected timeline accessible to the parent view, since the overview doesn't
have a "represented object", or receive ContentView change notifications.
(WebInspector.TimelineOverview.prototype._instrumentAdded):
(WebInspector.TimelineOverview.prototype._instrumentRemoved):
(WebInspector.TimelineOverview.prototype._viewModeDidChange):
Add and remove instrument tree elements. Each tree element is created with a height
equal to it's overview graph, and is shown/hidden based on the current view mode.
(WebInspector.TimelineOverview.prototype._timelinesTreeSelectionDidChange):
Update the selected timeline and dispatch change event.
* UserInterface/Views/TimelineRecordingContentView.js:
(WebInspector.TimelineRecordingContentView):
(WebInspector.TimelineRecordingContentView.prototype._currentContentViewDidChange):
(WebInspector.TimelineRecordingContentView.prototype._updateTimelineOverviewHeight):
(WebInspector.TimelineRecordingContentView.prototype._timelineSelected):
Sync the overview's timeline selection with the current ContentView's represented object.
* UserInterface/Views/TimelineRuler.css:
(.timeline-ruler > .header):
(.timeline-ruler > .header > .divider > .label):
(.timeline-ruler > .selection-drag):
(.timeline-ruler > .selection-handle):
Ruler height changed to 23px, to be consistent with the DataGrid header.
* UserInterface/Views/TreeOutline.css:
(.tree-outline.large .item .icon):
Large icon style updated to match TimelineSidebarPanel.css. The 32px
size is outdated and no longer used.
* UserInterface/Views/Variables.css:
(:root):
New color variables, used by TimelineOverview.css.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsOverviewTimelineViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewcss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordingContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineRulercss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTreeOutlinecss">trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (197472 => 197473)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2016-03-03 00:19:05 UTC (rev 197472)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-03-03 00:21:00 UTC (rev 197473)
</span><span class="lines">@@ -1,3 +1,80 @@
</span><ins>+2016-03-02 Matt Baker <mattbaker@apple.com>
+
+ Web Inspector: Timelines UI redesign: add the timelines tree outline to the TimelineOverview
+ https://bugs.webkit.org/show_bug.cgi?id=153034
+ <rdar://problem/24195628>
+
+ Reviewed by Timothy Hatcher.
+
+ Move the Timelines tree outline to the overview, in preparation for <https://webkit.org/b/153036>.
+
+ * UserInterface/Views/OverviewTimelineView.css:
+ (.timeline-view.overview > .timeline-ruler > .header): Deleted.
+ (.timeline-view.overview > .timeline-ruler > .event-markers): Deleted.
+ These are now part of the default ruler style.
+
+ * UserInterface/Views/TimelineOverview.css:
+ (.timeline-overview > .tree-outline.timelines):
+ (.timeline-overview > .tree-outline.timelines::before):
+ (body.window-inactive .timeline-overview > .tree-outline.timelines):
+ (.timeline-overview.frames > .tree-outline.timelines):
+ (.timeline-overview > .tree-outline.timelines .close-button):
+ (.timeline-overview > .tree-outline.timelines .item.selected .close-button):
+ (.timeline-overview > .tree-outline.timelines .item:not(.selected):nth-child(even)):
+ (.timeline-overview > .tree-outline.timelines .item:not(.selected):not(:first-child)):
+ (.timeline-overview > .tree-outline.timelines .item.selected + .item):
+ (body.window-inactive .timeline-overview > .tree-outline.timelines .item.selected + .item):
+ (.timeline-overview > .tree-outline.timelines :focus .item.selected + .item):
+ (.timeline-overview > .scroll-container):
+ (.timeline-overview.frames > .scroll-container):
+ (.timeline-overview > .timeline-ruler):
+ (.timeline-overview.frames > .timeline-ruler):
+ (.timeline-overview > .timeline-ruler > .markers):
+ (.timeline-overview > .graphs-container):
+ (.timeline-overview.frames > .graphs-container):
+ Styles for the timelines tree outline. A content element is inserted before the
+ tree to fill the gap created by the timeline ruler. For now the tree has a fixed
+ width of 185px, and is hidden when displaying the FPS instrument.
+
+ * UserInterface/Views/TimelineOverview.js:
+ (WebInspector.TimelineOverview):
+ (WebInspector.TimelineOverview.prototype.get selectedTimeline):
+ (WebInspector.TimelineOverview.prototype.set selectedTimeline):
+ Make the selected timeline accessible to the parent view, since the overview doesn't
+ have a "represented object", or receive ContentView change notifications.
+
+ (WebInspector.TimelineOverview.prototype._instrumentAdded):
+ (WebInspector.TimelineOverview.prototype._instrumentRemoved):
+ (WebInspector.TimelineOverview.prototype._viewModeDidChange):
+ Add and remove instrument tree elements. Each tree element is created with a height
+ equal to it's overview graph, and is shown/hidden based on the current view mode.
+
+ (WebInspector.TimelineOverview.prototype._timelinesTreeSelectionDidChange):
+ Update the selected timeline and dispatch change event.
+
+ * UserInterface/Views/TimelineRecordingContentView.js:
+ (WebInspector.TimelineRecordingContentView):
+ (WebInspector.TimelineRecordingContentView.prototype._currentContentViewDidChange):
+ (WebInspector.TimelineRecordingContentView.prototype._updateTimelineOverviewHeight):
+ (WebInspector.TimelineRecordingContentView.prototype._timelineSelected):
+ Sync the overview's timeline selection with the current ContentView's represented object.
+
+ * UserInterface/Views/TimelineRuler.css:
+ (.timeline-ruler > .header):
+ (.timeline-ruler > .header > .divider > .label):
+ (.timeline-ruler > .selection-drag):
+ (.timeline-ruler > .selection-handle):
+ Ruler height changed to 23px, to be consistent with the DataGrid header.
+
+ * UserInterface/Views/TreeOutline.css:
+ (.tree-outline.large .item .icon):
+ Large icon style updated to match TimelineSidebarPanel.css. The 32px
+ size is outdated and no longer used.
+
+ * UserInterface/Views/Variables.css:
+ (:root):
+ New color variables, used by TimelineOverview.css.
+
</ins><span class="cx"> 2016-02-29 Devin Rousso <dcrousso+webkit@gmail.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: Add direct number inputs to Bezier editor
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsOverviewTimelineViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.css (197472 => 197473)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.css 2016-03-03 00:19:05 UTC (rev 197472)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.css 2016-03-03 00:21:00 UTC (rev 197473)
</span><span class="lines">@@ -38,6 +38,7 @@
</span><span class="cx">
</span><span class="cx"> .timeline-view.overview > .timeline-ruler > .event-markers {
</span><span class="cx"> top: 23px;
</span><ins>+ border-top: 1px solid var(--border-color);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .timeline-view.overview > .data-grid {
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css (197472 => 197473)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css 2016-03-03 00:19:05 UTC (rev 197472)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css 2016-03-03 00:21:00 UTC (rev 197473)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2016 Apple Inc. All rights reserved.
</ins><span class="cx"> *
</span><span class="cx"> * Redistribution and use in source and binary forms, with or without
</span><span class="cx"> * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,9 +23,67 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><ins>+.timeline-overview > .tree-outline.timelines {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 185px;
+ z-index: var(--z-index-header);
+ background-color: var(--panel-background-color);
+ border-right: 1px solid var(--border-color);
+}
+
+.timeline-overview > .tree-outline.timelines::before {
+ display: block;
+ content: "";
+ left: 0;
+ top: 0;
+ width: 185px;
+ height: 23px;
+ box-sizing: border-box;
+ background-color: white;
+ border-right: 1px solid var(--border-color);
+ border-bottom: 1px solid var(--border-color);
+}
+
+.timeline-overview.frames > .tree-outline.timelines {
+ display: none;
+}
+
+.timeline-overview > .tree-outline.timelines .close-button {
+ width: 14px;
+
+ visibility: hidden;
+}
+
+.timeline-overview > .tree-outline.timelines .item.selected .close-button {
+ visibility: visible;
+}
+
+.timeline-overview > .tree-outline.timelines .item:not(.selected):nth-child(even) {
+ background-color: hsla(0, 0%, 0%, 0.03);
+ background-clip: padding-box;
+}
+
+.timeline-overview > .tree-outline.timelines .item:not(.selected):not(:first-child) {
+ border-top: 1px solid hsla(0, 0%, 0%, 0.09);
+}
+
+.timeline-overview > .tree-outline.timelines .item.selected + .item {
+ border-top-color: hsl(0, 0%, 83%);
+}
+
+body.window-inactive .timeline-overview > .tree-outline.timelines .item.selected + .item {
+ border-top-color: hsl(0, 0%, 83%);
+}
+
+.timeline-overview > .tree-outline.timelines :focus .item.selected + .item {
+ border-top-color: hsl(209, 100%, 49%);
+}
+
</ins><span class="cx"> .timeline-overview > .scroll-container {
</span><span class="cx"> position: absolute;
</span><del>- left: 0;
</del><ins>+ left: 185px;
</ins><span class="cx"> right: 0;
</span><span class="cx"> bottom: 0;
</span><span class="cx"> height: 16px;
</span><span class="lines">@@ -37,6 +95,10 @@
</span><span class="cx"> z-index: calc(var(--z-index-resizer) + 1);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.timeline-overview.frames > .scroll-container {
+ left: 0;
+}
+
</ins><span class="cx"> .timeline-overview:hover > .scroll-container {
</span><span class="cx"> opacity: 0.75;
</span><span class="cx"> }
</span><span class="lines">@@ -48,13 +110,17 @@
</span><span class="cx"> .timeline-overview > .timeline-ruler {
</span><span class="cx"> position: absolute;
</span><span class="cx"> top: 0;
</span><del>- left: 0;
</del><ins>+ left: 185px;
</ins><span class="cx"> bottom: 0;
</span><span class="cx"> right: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.timeline-overview.frames > .timeline-ruler {
+ left: 0;
+}
+
</ins><span class="cx"> .timeline-overview > .timeline-ruler > .markers {
</span><del>- top: 28px;
</del><ins>+ top: 23px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .timeline-overview.frames > .timeline-ruler > .markers > .marker:not(.current-time) {
</span><span class="lines">@@ -76,12 +142,16 @@
</span><span class="cx">
</span><span class="cx"> .timeline-overview > .graphs-container {
</span><span class="cx"> position: absolute;
</span><del>- top: 29px;
- left: 0;
</del><ins>+ top: 23px;
+ left: 185px;
</ins><span class="cx"> bottom: 0;
</span><span class="cx"> right: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.timeline-overview.frames > .graphs-container {
+ left: 0;
+}
+
</ins><span class="cx"> body.mac-platform.legacy .timeline-overview > .graphs-container {
</span><span class="cx"> top: 22px;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js (197472 => 197473)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js 2016-03-03 00:19:05 UTC (rev 197472)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js 2016-03-03 00:21:00 UTC (rev 197473)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2015-2016 Apple Inc. All rights reserved.
</ins><span class="cx"> *
</span><span class="cx"> * Redistribution and use in source and binary forms, with or without
</span><span class="cx"> * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -57,6 +57,15 @@
</span><span class="cx">
</span><span class="cx"> this._overviewGraphsByTypeMap = new Map;
</span><span class="cx">
</span><ins>+ this._timelinesTreeOutline = new WebInspector.TreeOutline;
+ this._timelinesTreeOutline.element.classList.add("timelines");
+ this._timelinesTreeOutline.disclosureButtons = false;
+ this._timelinesTreeOutline.large = true;
+ this._timelinesTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._timelinesTreeSelectionDidChange, this);
+ this.element.appendChild(this._timelinesTreeOutline.element);
+
+ this._treeElementsByTypeMap = new Map;
+
</ins><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">@@ -86,6 +95,7 @@
</span><span class="cx"> this._cachedScrollContainerWidth = NaN;
</span><span class="cx"> this._timelineRulerSelectionChanged = false;
</span><span class="cx"> this._viewMode = WebInspector.TimelineOverview.ViewMode.Timelines;
</span><ins>+ this._selectedTimeline = null;;
</ins><span class="cx">
</span><span class="cx"> for (let instrument of this._recording.instruments)
</span><span class="cx"> this._instrumentAdded(instrument);
</span><span class="lines">@@ -98,6 +108,28 @@
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="cx">
</span><ins>+ get selectedTimeline()
+ {
+ return this._selectedTimeline;
+ }
+
+ set selectedTimeline(x)
+ {
+ if (this._selectedTimeline === x)
+ return;
+
+ this._selectedTimeline = x;
+ if (this._selectedTimeline) {
+ let treeElement = this._treeElementsByTypeMap.get(this._selectedTimeline.type);
+ console.assert(treeElement, "Missing tree element for timeline", this._selectedTimeline);
+
+ let omitFocus = true;
+ let wasSelectedByUser = false;
+ treeElement.select(omitFocus, wasSelectedByUser);
+ } else if (this._timelinesTreeOutline.selectedTreeElement)
+ this._timelinesTreeOutline.selectedTreeElement.deselect();
+ }
+
</ins><span class="cx"> get viewMode()
</span><span class="cx"> {
</span><span class="cx"> return this._viewMode;
</span><span class="lines">@@ -546,6 +578,7 @@
</span><span class="cx">
</span><span class="cx"> let timeline = this._recording.timelineForInstrument(instrument);
</span><span class="cx"> console.assert(!this._overviewGraphsByTypeMap.has(timeline.type), timeline);
</span><ins>+ console.assert(!this._treeElementsByTypeMap.has(timeline.type), timeline);
</ins><span class="cx">
</span><span class="cx"> let overviewGraph = WebInspector.TimelineOverviewGraph.createForTimeline(timeline, this);
</span><span class="cx"> overviewGraph.addEventListener(WebInspector.TimelineOverviewGraph.Event.RecordSelected, this._recordSelected, this);
</span><span class="lines">@@ -553,8 +586,24 @@
</span><span class="cx">
</span><span class="cx"> this._graphsContainerView.addSubview(overviewGraph);
</span><span class="cx">
</span><del>- if (!this._canShowTimelineType(timeline.type))
</del><ins>+ let displayName = WebInspector.TimelineTabContentView.displayNameForTimeline(timeline);
+ let iconClassName = WebInspector.TimelineTabContentView.iconClassNameForTimeline(timeline);
+ let genericClassName = WebInspector.TimelineTabContentView.genericClassNameForTimeline(timeline);
+ let treeElement = new WebInspector.GeneralTreeElement([iconClassName, genericClassName], displayName, null, timeline);
+ let tooltip = WebInspector.UIString("Close %s timeline view").format(displayName);
+ let button = new WebInspector.TreeElementStatusButton(useSVGSymbol("Images/CloseLarge.svg", "close-button", tooltip));
+ button.addEventListener(WebInspector.TreeElementStatusButton.Event.Clicked, () => { treeElement.deselect(); });
+ treeElement.status = button.element;
+
+ this._timelinesTreeOutline.appendChild(treeElement);
+ treeElement.element.style.height = overviewGraph.height + "px";
+
+ this._treeElementsByTypeMap.set(timeline.type, treeElement);
+
+ if (!this._canShowTimelineType(timeline.type)) {
</ins><span class="cx"> overviewGraph.hidden();
</span><ins>+ treeElement.hidden = true;
+ }
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _instrumentRemoved(event)
</span><span class="lines">@@ -568,6 +617,11 @@
</span><span class="cx"> let overviewGraph = this._overviewGraphsByTypeMap.take(timeline.type);
</span><span class="cx"> overviewGraph.removeEventListener(WebInspector.TimelineOverviewGraph.Event.RecordSelected, this._recordSelected, this);
</span><span class="cx"> this._graphsContainerView.removeSubview(overviewGraph);
</span><ins>+
+ let treeElement = this._treeElementsByTypeMap.take(timeline.type);
+ let shouldSuppressOnDeselect = false;
+ let shouldSuppressSelectSibling = true;
+ this._timelinesTreeOutline.removeChild(treeElement, shouldSuppressOnDeselect, shouldSuppressSelectSibling);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _markerAdded(event)
</span><span class="lines">@@ -675,10 +729,14 @@
</span><span class="cx"> this.selectionDuration = this._currentSettings.selectionDurationSetting.value;
</span><span class="cx">
</span><span class="cx"> for (let [type, overviewGraph] of this._overviewGraphsByTypeMap) {
</span><del>- if (this._canShowTimelineType(type))
</del><ins>+ let treeElement = this._treeElementsByTypeMap.get(type);
+ console.assert(treeElement, "Missing tree element for timeline type", type)
+
+ treeElement.hidden = !this._canShowTimelineType(type);
+ if (treeElement.hidden)
+ overviewGraph.hidden();
+ else
</ins><span class="cx"> overviewGraph.shown();
</span><del>- else
- overviewGraph.hidden();
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this.element.classList.toggle("frames", isRenderingFramesMode);
</span><span class="lines">@@ -706,6 +764,20 @@
</span><span class="cx"> {
</span><span class="cx"> return this._viewMode === WebInspector.TimelineOverview.ViewMode.Timelines ? this._timelinesViewModeSettings : this._renderingFramesViewModeSettings;
</span><span class="cx"> }
</span><ins>+
+ _timelinesTreeSelectionDidChange()
+ {
+ let treeElement = this._timelinesTreeOutline.selectedTreeElement;
+ let timeline = null;
+ if (treeElement) {
+ timeline = treeElement.representedObject;
+ console.assert(timeline instanceof WebInspector.Timeline, timeline);
+ console.assert(this._recording.timelines.get(timeline.type) === timeline, timeline);
+ }
+
+ this._selectedTimeline = timeline;
+ this.dispatchEventToListeners(WebInspector.TimelineOverview.Event.TimelineSelected);
+ }
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> WebInspector.TimelineOverview.ScrollDeltaDenominator = 500;
</span><span class="lines">@@ -717,5 +789,6 @@
</span><span class="cx">
</span><span class="cx"> WebInspector.TimelineOverview.Event = {
</span><span class="cx"> RecordSelected: "timeline-overview-record-selected",
</span><ins>+ TimelineSelected: "timeline-overview-timeline-selected",
</ins><span class="cx"> TimeRangeSelectionChanged: "timeline-overview-time-range-selection-changed"
</span><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordingContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js (197472 => 197473)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js 2016-03-03 00:19:05 UTC (rev 197472)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js 2016-03-03 00:21:00 UTC (rev 197473)
</span><span class="lines">@@ -41,6 +41,7 @@
</span><span class="cx"> this._timelineOverview = new WebInspector.TimelineOverview(this._recording);
</span><span class="cx"> this._timelineOverview.addEventListener(WebInspector.TimelineOverview.Event.TimeRangeSelectionChanged, this._timeRangeSelectionChanged, this);
</span><span class="cx"> this._timelineOverview.addEventListener(WebInspector.TimelineOverview.Event.RecordSelected, this._recordSelected, this);
</span><ins>+ this._timelineOverview.addEventListener(WebInspector.TimelineOverview.Event.TimelineSelected, this._timelineSelected, this);
</ins><span class="cx"> this.addSubview(this._timelineOverview);
</span><span class="cx">
</span><span class="cx"> this._contentViewContainer = new WebInspector.ContentViewContainer;
</span><span class="lines">@@ -338,6 +339,12 @@
</span><span class="cx">
</span><span class="cx"> this._updateTimelineViewSelection(timelineView);
</span><span class="cx"> timelineView.currentTime = this._currentTime;
</span><ins>+
+ let timeline = null;
+ if (timelineView.representedObject instanceof WebInspector.Timeline)
+ timeline = timelineView.representedObject;
+
+ this._timelineOverview.selectedTimeline = timeline;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
</span><span class="lines">@@ -528,7 +535,7 @@
</span><span class="cx">
</span><span class="cx"> _updateTimelineOverviewHeight()
</span><span class="cx"> {
</span><del>- const rulerHeight = 29;
</del><ins>+ const rulerHeight = 23;
</ins><span class="cx">
</span><span class="cx"> let styleValue = (rulerHeight + this.timelineOverviewHeight) + "px";
</span><span class="cx"> this._timelineOverview.element.style.height = styleValue;
</span><span class="lines">@@ -668,6 +675,15 @@
</span><span class="cx"> treeElement.revealAndSelect(false, false, false, true);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ _timelineSelected()
+ {
+ let timeline = this._timelineOverview.selectedTimeline;
+ if (timeline)
+ this.showTimelineViewForTimeline(timeline);
+ else
+ this.showOverviewTimelineView();
+ }
+
</ins><span class="cx"> _updateFrameSelection()
</span><span class="cx"> {
</span><span class="cx"> console.assert(this._renderingFrameTimeline);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRulercss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css (197472 => 197473)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css 2016-03-03 00:19:05 UTC (rev 197472)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css 2016-03-03 00:21:00 UTC (rev 197473)
</span><span class="lines">@@ -49,7 +49,7 @@
</span><span class="cx"> top: 0;
</span><span class="cx"> left: 0;
</span><span class="cx"> right: 0;
</span><del>- height: 29px;
</del><ins>+ height: 23px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .timeline-ruler > .header > .divider {
</span><span class="lines">@@ -67,7 +67,7 @@
</span><span class="cx">
</span><span class="cx"> .timeline-ruler > .header > .divider > .label {
</span><span class="cx"> position: absolute;
</span><del>- top: 8px;
</del><ins>+ top: 6px;
</ins><span class="cx"> right: 5px;
</span><span class="cx"> font-size: 9px;
</span><span class="cx"> color: hsl(0, 0%, 50%);
</span><span class="lines">@@ -156,7 +156,7 @@
</span><span class="cx"> .timeline-ruler > .selection-drag {
</span><span class="cx"> position: absolute;
</span><span class="cx"> top: 0;
</span><del>- height: 29px;
</del><ins>+ height: 23px;
</ins><span class="cx"> cursor: -webkit-grab;
</span><span class="cx"> pointer-events: all;
</span><span class="cx"> }
</span><span class="lines">@@ -169,7 +169,7 @@
</span><span class="cx"> position: absolute;
</span><span class="cx"> top: 0;
</span><span class="cx"> width: 8px;
</span><del>- height: 28px;
</del><ins>+ height: 22px;
</ins><span class="cx"> border-radius: 5px;
</span><span class="cx"> background-color: hsl(0, 0%, 64%);
</span><span class="cx"> border: 1px solid white;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTreeOutlinecss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css (197472 => 197473)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css 2016-03-03 00:19:05 UTC (rev 197472)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css 2016-03-03 00:21:00 UTC (rev 197473)
</span><span class="lines">@@ -127,8 +127,11 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .tree-outline.large .item .icon {
</span><del>- width: 32px;
</del><ins>+ margin-top: 5px;
</ins><span class="cx"> margin-right: 6px;
</span><ins>+
+ width: 24px;
+ height: 24px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .tree-outline .item .status {
</span></span></pre>
</div>
</div>
</body>
</html>