<!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>[198537] 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/198537">198537</a></dd>
<dt>Author</dt> <dd>mattbaker@apple.com</dd>
<dt>Date</dt> <dd>2016-03-22 10:59:51 -0700 (Tue, 22 Mar 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Timelines UI redesign: Provide a way to configure which instruments to use
https://bugs.webkit.org/show_bug.cgi?id=153672
<rdar://problem/24417575>
Reviewed by Timothy Hatcher.
Adds UI for configuring a timeline recording's instrument list. TimelineManager
maintains the list of supported timeline types, and tracks the subset
of user-configured timelines which are used to create the instrument list
that is passed to new recordings.
* Localizations/en.lproj/localizedStrings.js:
New strings for "Edit" Timelines button.
* UserInterface/Controllers/TimelineManager.js:
(WebInspector.TimelineManager):
Added setting for user-configured (enabled) timeline types.
Initialized to the default timeline types.
(WebInspector.TimelineManager.defaultTimelineTypes):
(WebInspector.TimelineManager.availableTimelineTypes):
Get the list of all supported timeline types, which is a superset
of the list of default timeline types.
(WebInspector.TimelineManager.prototype.get enabledTimelineTypes):
(WebInspector.TimelineManager.prototype.set enabledTimelineTypes):
List of user-configured timeline types, backed by a Setting.
(WebInspector.TimelineManager.prototype._loadNewRecording):
Create new recordings with the current user-configured instrument list.
(WebInspector.TimelineManager.defaultInstruments): Deleted.
Renamed defaultTimelineTypes.
* UserInterface/Main.html:
New class, TimelineTreeElement.
* UserInterface/Models/Instrument.js:
(WebInspector.Instrument.createForTimelineType):
Factory method for creating Instruments.
* UserInterface/Models/TimelineRecording.js:
(WebInspector.TimelineRecording):
Replace fixed instrument list with TimelineManager's list.
(WebInspector.TimelineRecording.prototype.instrumentForTimeline):
Get the instrument in the recording for a given timeline.
(WebInspector.TimelineRecording.prototype.addInstrument):
(WebInspector.TimelineRecording.prototype.removeInstrument):
Drive-by syntax error fixes: Array.prototype.contains doesn't exist.
* UserInterface/Views/TimelineOverview.css:
(.timeline-overview > .navigation-bar.timelines):
(.navigation-bar.timelines .item.button.toggle-edit-instruments:not(.disabled):matches(:focus, .activate.activated, .radio.selected)):
(.navigation-bar.timelines .item.button.toggle-edit-instruments:not(.disabled):active:matches(:focus, .activate.activated, .radio.selected)):
(.navigation-bar.timelines .item.button.toggle-edit-instruments.disabled):
(.navigation-bar.timelines .toggle-edit-instruments:not(.disabled):active):
(.timeline-overview > .tree-outline.timelines):
(.timeline-overview.edit-instruments > .tree-outline.timelines):
(.timeline-overview.edit-instruments > .tree-outline.timelines .item.selected):
(.timeline-overview > .tree-outline.timelines input[type=checkbox].status-button):
(.timeline-overview.frames > :matches(.tree-outline.timelines, .navigation-bar.timelines)):
(.timeline-overview > .tree-outline.timelines::before): Deleted.
(.timeline-overview.frames > .tree-outline.timelines): Deleted.
Styles for the "Edit" navigation bar above the timelines tree outline,
and tree element styles for showing checkboxes and hiding the current
selection while in edit mode.
* UserInterface/Views/TimelineOverview.js:
(WebInspector.TimelineOverview):
Create "Edit" button and navigation bar and add event handlers for
capturing events, so that timeline editing can be closed and
disabled when capturing begins.
(WebInspector.TimelineOverview.prototype.set selectedTimeline):
Prevent timeline selection while in edit mode.
(WebInspector.TimelineOverview.prototype.get editingInstruments):
(WebInspector.TimelineOverview.prototype.set viewMode):
Prevent view mode change while in edit mode.
(WebInspector.TimelineOverview.prototype._instrumentAdded):
Create a TimelineTreeElement, and insert into the tree outline and graph
container in sorted order instead of appending timeline elements.
(WebInspector.TimelineOverview.prototype._toggleEditingInstruments):
Handler for Edit button click event.
(WebInspector.TimelineOverview.prototype._editingInstrumentsDidChange):
Update UI in response to editing mode change: toggle CSS, enable/disable
the timeline ruler and wheel/gesture events, and update Edit button appearance.
(WebInspector.TimelineOverview.prototype._updateEditInstrumentsButton):
Update label text and button state.
(WebInspector.TimelineOverview.prototype._updateWheelAndGestureHandlers):
Add/remove event handlers based on editing state.
(WebInspector.TimelineOverview.prototype._startEditingInstruments):
Enable edit mode UI. Placeholder elements are added for timelines that
aren't included in the recording, and all tree elements have checkboxes
for toggling their associated timelines.
(WebInspector.TimelineOverview.prototype._stopEditingInstruments):
Disable edit mode UI. Unchecked instruments are first removed from the
recording, then placeholder tree elements are removed, and their instruments
added, as needed. TimelineManager's list of user-configured timeline types
is then updated.
(WebInspector.TimelineOverview.prototype._capturingStarted):
(WebInspector.TimelineOverview.prototype._capturingStopped):
Enable/disable the Edit button. Quit editing mode when capturing starts.
(WebInspector.TimelineOverview.prototype._compareTimelineTreeElements):
Special sorting for the timelines tree outline. The sort order is:
1. Instruments that are in the recording, except Rendering Frames.
2. Instruments that aren't in the recording (placeholders).
3. Rendering Frames.
Timelines in groups 1 & 2 are sorted based on the order of the list returned
by TimelineManager.availableTimelineTypes(). The Rendering Frames tree
element must be last, since it's always hidden and would otherwise interfere
with the alternating tree element CSS styles.
* UserInterface/Views/TimelineRecordingContentView.css:
(.content-view.timeline-recording.edit-instruments > .timeline-overview):
(.content-view.timeline-recording.edit-instruments > .content-browser):
Hide lower content browser and extend timelines tree height in edit mode.
* UserInterface/Views/TimelineRecordingContentView.js:
(WebInspector.TimelineRecordingContentView):
Listen for edit mode changes on TimelineOverview.
(WebInspector.TimelineRecordingContentView.prototype.contentBrowserTreeElementForRepresentedObject):
(WebInspector.TimelineRecordingContentView.prototype._updateTimelineOverviewHeight):
When in edit mode, remove inline style rule for TimelineOverview height.
(WebInspector.TimelineRecordingContentView.prototype._instrumentAdded):
(WebInspector.TimelineRecordingContentView.prototype._editingInstrumentsDidChange):
Update CSS and TimelineOverview height when edit mode changes.
(WebInspector.TimelineRecordingContentView.prototype.get timelineOverviewHeight): Deleted.
No longer used.
* UserInterface/Views/TimelineTabContentView.js:
(WebInspector.TimelineTabContentView.displayNameForTimelineType):
(WebInspector.TimelineTabContentView.iconClassNameForTimelineType):
(WebInspector.TimelineTabContentView.genericClassNameForTimelineType):
(WebInspector.TimelineTabContentView.displayNameForTimeline): Deleted.
(WebInspector.TimelineTabContentView.iconClassNameForTimeline): Deleted.
(WebInspector.TimelineTabContentView.genericClassNameForTimeline): Deleted.
Helper functions now take a timeline type instead of a timeline object.
* UserInterface/Views/TimelineTreeElement.js: Added.
New tree element class to encapsulate behavior specific to the timelines
tree outline, such as status element changes and disabling selection
when editing.
(WebInspector.TimelineTreeElement):
(WebInspector.TimelineTreeElement.prototype.get placeholder):
(WebInspector.TimelineTreeElement.prototype.get editing):
(WebInspector.TimelineTreeElement.prototype.set editing):
(WebInspector.TimelineTreeElement.prototype._showCloseButton):
(WebInspector.TimelineTreeElement.prototype._showCheckbox):
(WebInspector.TimelineTreeElement.prototype._updateStatusButton):</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs">trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js</a></li>
<li><a href="#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="#trunkSourceWebInspectorUIUserInterfaceModelsInstrumentjs">trunk/Source/WebInspectorUI/UserInterface/Models/Instrument.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceModelsTimelineRecordingjs">trunk/Source/WebInspectorUI/UserInterface/Models/TimelineRecording.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewcss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordingContentViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordingContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineTabContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineTabContentView.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineTreeElement.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (198536 => 198537)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2016-03-22 17:58:54 UTC (rev 198536)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-03-22 17:59:51 UTC (rev 198537)
</span><span class="lines">@@ -1,3 +1,161 @@
</span><ins>+2016-03-22 Matt Baker <mattbaker@apple.com>
+
+ Web Inspector: Timelines UI redesign: Provide a way to configure which instruments to use
+ https://bugs.webkit.org/show_bug.cgi?id=153672
+ <rdar://problem/24417575>
+
+ Reviewed by Timothy Hatcher.
+
+ Adds UI for configuring a timeline recording's instrument list. TimelineManager
+ maintains the list of supported timeline types, and tracks the subset
+ of user-configured timelines which are used to create the instrument list
+ that is passed to new recordings.
+
+ * Localizations/en.lproj/localizedStrings.js:
+ New strings for "Edit" Timelines button.
+
+ * UserInterface/Controllers/TimelineManager.js:
+ (WebInspector.TimelineManager):
+ Added setting for user-configured (enabled) timeline types.
+ Initialized to the default timeline types.
+
+ (WebInspector.TimelineManager.defaultTimelineTypes):
+ (WebInspector.TimelineManager.availableTimelineTypes):
+ Get the list of all supported timeline types, which is a superset
+ of the list of default timeline types.
+
+ (WebInspector.TimelineManager.prototype.get enabledTimelineTypes):
+ (WebInspector.TimelineManager.prototype.set enabledTimelineTypes):
+ List of user-configured timeline types, backed by a Setting.
+ (WebInspector.TimelineManager.prototype._loadNewRecording):
+ Create new recordings with the current user-configured instrument list.
+ (WebInspector.TimelineManager.defaultInstruments): Deleted.
+ Renamed defaultTimelineTypes.
+
+ * UserInterface/Main.html:
+ New class, TimelineTreeElement.
+
+ * UserInterface/Models/Instrument.js:
+ (WebInspector.Instrument.createForTimelineType):
+ Factory method for creating Instruments.
+
+ * UserInterface/Models/TimelineRecording.js:
+ (WebInspector.TimelineRecording):
+ Replace fixed instrument list with TimelineManager's list.
+ (WebInspector.TimelineRecording.prototype.instrumentForTimeline):
+ Get the instrument in the recording for a given timeline.
+ (WebInspector.TimelineRecording.prototype.addInstrument):
+ (WebInspector.TimelineRecording.prototype.removeInstrument):
+ Drive-by syntax error fixes: Array.prototype.contains doesn't exist.
+
+ * UserInterface/Views/TimelineOverview.css:
+ (.timeline-overview > .navigation-bar.timelines):
+ (.navigation-bar.timelines .item.button.toggle-edit-instruments:not(.disabled):matches(:focus, .activate.activated, .radio.selected)):
+ (.navigation-bar.timelines .item.button.toggle-edit-instruments:not(.disabled):active:matches(:focus, .activate.activated, .radio.selected)):
+ (.navigation-bar.timelines .item.button.toggle-edit-instruments.disabled):
+ (.navigation-bar.timelines .toggle-edit-instruments:not(.disabled):active):
+ (.timeline-overview > .tree-outline.timelines):
+ (.timeline-overview.edit-instruments > .tree-outline.timelines):
+ (.timeline-overview.edit-instruments > .tree-outline.timelines .item.selected):
+ (.timeline-overview > .tree-outline.timelines input[type=checkbox].status-button):
+ (.timeline-overview.frames > :matches(.tree-outline.timelines, .navigation-bar.timelines)):
+ (.timeline-overview > .tree-outline.timelines::before): Deleted.
+ (.timeline-overview.frames > .tree-outline.timelines): Deleted.
+ Styles for the "Edit" navigation bar above the timelines tree outline,
+ and tree element styles for showing checkboxes and hiding the current
+ selection while in edit mode.
+
+ * UserInterface/Views/TimelineOverview.js:
+ (WebInspector.TimelineOverview):
+ Create "Edit" button and navigation bar and add event handlers for
+ capturing events, so that timeline editing can be closed and
+ disabled when capturing begins.
+
+ (WebInspector.TimelineOverview.prototype.set selectedTimeline):
+ Prevent timeline selection while in edit mode.
+ (WebInspector.TimelineOverview.prototype.get editingInstruments):
+ (WebInspector.TimelineOverview.prototype.set viewMode):
+ Prevent view mode change while in edit mode.
+
+ (WebInspector.TimelineOverview.prototype._instrumentAdded):
+ Create a TimelineTreeElement, and insert into the tree outline and graph
+ container in sorted order instead of appending timeline elements.
+
+ (WebInspector.TimelineOverview.prototype._toggleEditingInstruments):
+ Handler for Edit button click event.
+ (WebInspector.TimelineOverview.prototype._editingInstrumentsDidChange):
+ Update UI in response to editing mode change: toggle CSS, enable/disable
+ the timeline ruler and wheel/gesture events, and update Edit button appearance.
+
+ (WebInspector.TimelineOverview.prototype._updateEditInstrumentsButton):
+ Update label text and button state.
+ (WebInspector.TimelineOverview.prototype._updateWheelAndGestureHandlers):
+ Add/remove event handlers based on editing state.
+
+ (WebInspector.TimelineOverview.prototype._startEditingInstruments):
+ Enable edit mode UI. Placeholder elements are added for timelines that
+ aren't included in the recording, and all tree elements have checkboxes
+ for toggling their associated timelines.
+
+ (WebInspector.TimelineOverview.prototype._stopEditingInstruments):
+ Disable edit mode UI. Unchecked instruments are first removed from the
+ recording, then placeholder tree elements are removed, and their instruments
+ added, as needed. TimelineManager's list of user-configured timeline types
+ is then updated.
+
+ (WebInspector.TimelineOverview.prototype._capturingStarted):
+ (WebInspector.TimelineOverview.prototype._capturingStopped):
+ Enable/disable the Edit button. Quit editing mode when capturing starts.
+ (WebInspector.TimelineOverview.prototype._compareTimelineTreeElements):
+ Special sorting for the timelines tree outline. The sort order is:
+ 1. Instruments that are in the recording, except Rendering Frames.
+ 2. Instruments that aren't in the recording (placeholders).
+ 3. Rendering Frames.
+
+ Timelines in groups 1 & 2 are sorted based on the order of the list returned
+ by TimelineManager.availableTimelineTypes(). The Rendering Frames tree
+ element must be last, since it's always hidden and would otherwise interfere
+ with the alternating tree element CSS styles.
+
+ * UserInterface/Views/TimelineRecordingContentView.css:
+ (.content-view.timeline-recording.edit-instruments > .timeline-overview):
+ (.content-view.timeline-recording.edit-instruments > .content-browser):
+ Hide lower content browser and extend timelines tree height in edit mode.
+
+ * UserInterface/Views/TimelineRecordingContentView.js:
+ (WebInspector.TimelineRecordingContentView):
+ Listen for edit mode changes on TimelineOverview.
+ (WebInspector.TimelineRecordingContentView.prototype.contentBrowserTreeElementForRepresentedObject):
+ (WebInspector.TimelineRecordingContentView.prototype._updateTimelineOverviewHeight):
+ When in edit mode, remove inline style rule for TimelineOverview height.
+ (WebInspector.TimelineRecordingContentView.prototype._instrumentAdded):
+ (WebInspector.TimelineRecordingContentView.prototype._editingInstrumentsDidChange):
+ Update CSS and TimelineOverview height when edit mode changes.
+ (WebInspector.TimelineRecordingContentView.prototype.get timelineOverviewHeight): Deleted.
+ No longer used.
+
+ * UserInterface/Views/TimelineTabContentView.js:
+ (WebInspector.TimelineTabContentView.displayNameForTimelineType):
+ (WebInspector.TimelineTabContentView.iconClassNameForTimelineType):
+ (WebInspector.TimelineTabContentView.genericClassNameForTimelineType):
+ (WebInspector.TimelineTabContentView.displayNameForTimeline): Deleted.
+ (WebInspector.TimelineTabContentView.iconClassNameForTimeline): Deleted.
+ (WebInspector.TimelineTabContentView.genericClassNameForTimeline): Deleted.
+ Helper functions now take a timeline type instead of a timeline object.
+
+ * UserInterface/Views/TimelineTreeElement.js: Added.
+ New tree element class to encapsulate behavior specific to the timelines
+ tree outline, such as status element changes and disabling selection
+ when editing.
+
+ (WebInspector.TimelineTreeElement):
+ (WebInspector.TimelineTreeElement.prototype.get placeholder):
+ (WebInspector.TimelineTreeElement.prototype.get editing):
+ (WebInspector.TimelineTreeElement.prototype.set editing):
+ (WebInspector.TimelineTreeElement.prototype._showCloseButton):
+ (WebInspector.TimelineTreeElement.prototype._showCheckbox):
+ (WebInspector.TimelineTreeElement.prototype._updateStatusButton):
+
</ins><span class="cx"> 2016-03-21 Matt Baker <mattbaker@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: New icon for Heap Allocations timeline
</span></span></pre></div>
<a id="trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (198536 => 198537)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2016-03-22 17:58:54 UTC (rev 198536)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2016-03-22 17:59:51 UTC (rev 198537)
</span><span class="lines">@@ -250,10 +250,12 @@
</span><span class="cx"> localizedStrings["Dynamically calculated for the parent element"] = "Dynamically calculated for the parent element";
</span><span class="cx"> localizedStrings["Dynamically calculated for the selected element"] = "Dynamically calculated for the selected element";
</span><span class="cx"> localizedStrings["Dynamically calculated for the selected element and did not match"] = "Dynamically calculated for the selected element and did not match";
</span><ins>+localizedStrings["Edit"] = "Edit";
</ins><span class="cx"> localizedStrings["Edit Attribute"] = "Edit Attribute";
</span><span class="cx"> localizedStrings["Edit Breakpoint &"] = "Edit Breakpoint &";
</span><span class="cx"> localizedStrings["Edit Text"] = "Edit Text";
</span><span class="cx"> localizedStrings["Edit as HTML"] = "Edit as HTML";
</span><ins>+localizedStrings["Edit configuration"] = "Edit configuration";
</ins><span class="cx"> localizedStrings["Edit %s "] = "Edit %s ";
</span><span class="cx"> localizedStrings["Effects"] = "Effects";
</span><span class="cx"> localizedStrings["Element"] = "Element";
</span><span class="lines">@@ -601,6 +603,7 @@
</span><span class="cx"> localizedStrings["Right"] = "Right";
</span><span class="cx"> localizedStrings["Role"] = "Role";
</span><span class="cx"> localizedStrings["Samples"] = "Samples";
</span><ins>+localizedStrings["Save configuration"] = "Save configuration";
</ins><span class="cx"> localizedStrings["Scheme"] = "Scheme";
</span><span class="cx"> localizedStrings["Scope"] = "Scope";
</span><span class="cx"> localizedStrings["Scope Chain"] = "Scope Chain";
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceControllersTimelineManagerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js (198536 => 198537)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js 2016-03-22 17:58:54 UTC (rev 198536)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js 2016-03-22 17:59:51 UTC (rev 198537)
</span><span class="lines">@@ -36,6 +36,8 @@
</span><span class="cx"> WebInspector.heapManager.addEventListener(WebInspector.HeapManager.Event.GarbageCollected, this._garbageCollected, this);
</span><span class="cx"> WebInspector.memoryManager.addEventListener(WebInspector.MemoryManager.Event.MemoryPressure, this._memoryPressure, this);
</span><span class="cx">
</span><ins>+ this._enabledTimelineTypesSetting = new WebInspector.Setting("enabled-instrument-types", WebInspector.TimelineManager.defaultTimelineTypes());
+
</ins><span class="cx"> this._persistentNetworkTimeline = new WebInspector.NetworkTimeline;
</span><span class="cx">
</span><span class="cx"> this._isCapturing = false;
</span><span class="lines">@@ -51,31 +53,40 @@
</span><span class="cx">
</span><span class="cx"> // Static
</span><span class="cx">
</span><del>- static defaultInstruments()
</del><ins>+ static defaultTimelineTypes()
</ins><span class="cx"> {
</span><span class="cx"> if (WebInspector.debuggableType === WebInspector.DebuggableType.JavaScript) {
</span><del>- let defaults = [new WebInspector.ScriptInstrument];
</del><ins>+ let defaultTypes = [WebInspector.TimelineRecord.Type.Script];
</ins><span class="cx"> if (WebInspector.HeapAllocationsInstrument.supported())
</span><del>- defaults.push(new WebInspector.HeapAllocationsInstrument);
- return defaults;
</del><ins>+ defaultTypes.push(WebInspector.TimelineRecord.Type.HeapAllocations);
+ return defaultTypes;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- let defaults = [
- new WebInspector.NetworkInstrument,
- new WebInspector.LayoutInstrument,
- new WebInspector.ScriptInstrument,
</del><ins>+ let defaultTypes = [
+ WebInspector.TimelineRecord.Type.Network,
+ WebInspector.TimelineRecord.Type.Layout,
+ WebInspector.TimelineRecord.Type.Script,
</ins><span class="cx"> ];
</span><span class="cx">
</span><ins>+ if (WebInspector.FPSInstrument.supported())
+ defaultTypes.push(WebInspector.TimelineRecord.Type.RenderingFrame);
+
+ return defaultTypes;
+ }
+
+ static availableTimelineTypes()
+ {
+ let types = WebInspector.TimelineManager.defaultTimelineTypes();
+ if (WebInspector.debuggableType === WebInspector.DebuggableType.JavaScript)
+ return types;
+
</ins><span class="cx"> if (WebInspector.MemoryInstrument.supported())
</span><del>- defaults.push(new WebInspector.MemoryInstrument);
</del><ins>+ types.push(WebInspector.TimelineRecord.Type.Memory);
</ins><span class="cx">
</span><span class="cx"> if (WebInspector.HeapAllocationsInstrument.supported())
</span><del>- defaults.push(new WebInspector.HeapAllocationsInstrument);
</del><ins>+ types.push(WebInspector.TimelineRecord.Type.HeapAllocations);
</ins><span class="cx">
</span><del>- if (WebInspector.FPSInstrument.supported())
- defaults.push(new WebInspector.FPSInstrument);
-
- return defaults;
</del><ins>+ return types;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="lines">@@ -119,6 +130,17 @@
</span><span class="cx"> this._autoCaptureOnPageLoad = autoCapture;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ get enabledTimelineTypes()
+ {
+ let availableTimelineTypes = WebInspector.TimelineManager.availableTimelineTypes();
+ return this._enabledTimelineTypesSetting.value.filter((type) => availableTimelineTypes.includes(type));
+ }
+
+ set enabledTimelineTypes(x)
+ {
+ this._enabledTimelineTypesSetting.value = x || [];
+ }
+
</ins><span class="cx"> isCapturing()
</span><span class="cx"> {
</span><span class="cx"> return this._isCapturing;
</span><span class="lines">@@ -546,13 +568,10 @@
</span><span class="cx"> if (this._activeRecording && this._activeRecording.isEmpty())
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- // FIXME: <https://webkit.org/b/153672> Web Inspector: Timelines UI redesign: Provide a way to configure which instruments to use
- // FIXME: Move the list of instruments for a new recording to a Setting when new Instruments are supported.
- let instruments = WebInspector.TimelineManager.defaultInstruments();
</del><ins>+ let instruments = this.enabledTimelineTypes.map((type) => WebInspector.Instrument.createForTimelineType(type));
+ let identifier = this._nextRecordingIdentifier++;
+ let newRecording = new WebInspector.TimelineRecording(identifier, WebInspector.UIString("Timeline Recording %d").format(identifier), instruments);
</ins><span class="cx">
</span><del>- var identifier = this._nextRecordingIdentifier++;
- var newRecording = new WebInspector.TimelineRecording(identifier, WebInspector.UIString("Timeline Recording %d").format(identifier), instruments);
-
</del><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 (198536 => 198537)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2016-03-22 17:58:54 UTC (rev 198536)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2016-03-22 17:59:51 UTC (rev 198537)
</span><span class="lines">@@ -425,6 +425,7 @@
</span><span class="cx"> <script src="Views/StorageTreeElement.js"></script>
</span><span class="cx"> <script src="Views/TimelineOverview.js"></script>
</span><span class="cx"> <script src="Views/TimelineRecordTreeElement.js"></script>
</span><ins>+ <script src="Views/TimelineTreeElement.js"></script>
</ins><span class="cx">
</span><span class="cx"> <script src="Views/ConsoleTabContentView.js"></script>
</span><span class="cx"> <script src="Views/DebuggerTabContentView.js"></script>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceModelsInstrumentjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Models/Instrument.js (198536 => 198537)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Models/Instrument.js 2016-03-22 17:58:54 UTC (rev 198536)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/Instrument.js 2016-03-22 17:59:51 UTC (rev 198537)
</span><span class="lines">@@ -27,6 +27,27 @@
</span><span class="cx"> {
</span><span class="cx"> // Static
</span><span class="cx">
</span><ins>+ static createForTimelineType(type)
+ {
+ switch (type) {
+ case WebInspector.TimelineRecord.Type.Network:
+ return new WebInspector.NetworkInstrument;
+ case WebInspector.TimelineRecord.Type.Layout:
+ return new WebInspector.LayoutInstrument;
+ case WebInspector.TimelineRecord.Type.Script:
+ return new WebInspector.ScriptInstrument;
+ case WebInspector.TimelineRecord.Type.RenderingFrame:
+ return new WebInspector.FPSInstrument;
+ case WebInspector.TimelineRecord.Type.Memory:
+ return new WebInspector.MemoryInstrument;
+ case WebInspector.TimelineRecord.Type.HeapAllocations:
+ return new WebInspector.HeapAllocationsInstrument;
+ default:
+ console.error("Unknown TimelineRecord.Type: " + type);
+ return null;
+ }
+ }
+
</ins><span class="cx"> static startLegacyTimelineAgent()
</span><span class="cx"> {
</span><span class="cx"> console.assert(window.TimelineAgent, "Attempted to start legacy timeline agent without TimelineAgent.");
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceModelsTimelineRecordingjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Models/TimelineRecording.js (198536 => 198537)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Models/TimelineRecording.js 2016-03-22 17:58:54 UTC (rev 198536)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/TimelineRecording.js 2016-03-22 17:59:51 UTC (rev 198537)
</span><span class="lines">@@ -38,16 +38,7 @@
</span><span class="cx"> this._topDownCallingContextTree = new WebInspector.CallingContextTree(WebInspector.CallingContextTree.Type.TopDown);
</span><span class="cx"> this._bottomUpCallingContextTree = new WebInspector.CallingContextTree(WebInspector.CallingContextTree.Type.BottomUp);
</span><span class="cx">
</span><del>- let timelines = [
- WebInspector.TimelineRecord.Type.Network,
- WebInspector.TimelineRecord.Type.Layout,
- WebInspector.TimelineRecord.Type.Script,
- WebInspector.TimelineRecord.Type.RenderingFrame,
- WebInspector.TimelineRecord.Type.Memory,
- WebInspector.TimelineRecord.Type.HeapAllocations,
- ];
-
- for (let type of timelines) {
</del><ins>+ for (let type of WebInspector.TimelineManager.availableTimelineTypes()) {
</ins><span class="cx"> let timeline = WebInspector.Timeline.create(type);
</span><span class="cx"> this._timelines.set(type, timeline);
</span><span class="cx"> timeline.addEventListener(WebInspector.Timeline.Event.TimesUpdated, this._timelineTimesUpdated, this);
</span><span class="lines">@@ -196,6 +187,11 @@
</span><span class="cx"> return this._timelines.get(instrument.timelineRecordType);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ instrumentForTimeline(timeline)
+ {
+ return this._instruments.find((instrument) => instrument.timelineRecordType === timeline.type);
+ }
+
</ins><span class="cx"> timelineForRecordType(recordType)
</span><span class="cx"> {
</span><span class="cx"> return this._timelines.get(recordType);
</span><span class="lines">@@ -204,7 +200,7 @@
</span><span class="cx"> addInstrument(instrument)
</span><span class="cx"> {
</span><span class="cx"> console.assert(instrument instanceof WebInspector.Instrument, instrument);
</span><del>- console.assert(!this._instruments.contains(instrument), this._instruments, instrument);
</del><ins>+ console.assert(!this._instruments.includes(instrument), this._instruments, instrument);
</ins><span class="cx">
</span><span class="cx"> this._instruments.push(instrument);
</span><span class="cx">
</span><span class="lines">@@ -214,7 +210,7 @@
</span><span class="cx"> removeInstrument(instrument)
</span><span class="cx"> {
</span><span class="cx"> console.assert(instrument instanceof WebInspector.Instrument, instrument);
</span><del>- console.assert(this._instruments.contains(instrument), this._instruments, instrument);
</del><ins>+ console.assert(this._instruments.includes(instrument), this._instruments, instrument);
</ins><span class="cx">
</span><span class="cx"> this._instruments.remove(instrument);
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css (198536 => 198537)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css 2016-03-22 17:58:54 UTC (rev 198536)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css 2016-03-22 17:59:51 UTC (rev 198537)
</span><span class="lines">@@ -23,33 +23,57 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-.timeline-overview > .tree-outline.timelines {
</del><ins>+.timeline-overview > .navigation-bar.timelines {
+ justify-content: flex-start;
</ins><span class="cx"> position: absolute;
</span><span class="cx"> top: 0;
</span><span class="cx"> left: 0;
</span><span class="cx"> width: 185px;
</span><ins>+ height: 23px;
+
+ box-sizing: border-box;
</ins><span class="cx"> z-index: var(--z-index-header);
</span><del>- background-color: var(--panel-background-color);
</del><ins>+
+ background-color: white;
</ins><span class="cx"> border-right: 1px solid var(--border-color);
</span><ins>+ border-bottom: 1px solid var(--border-color);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.timeline-overview > .tree-outline.timelines::before {
- display: block;
- content: "";
</del><ins>+.navigation-bar.timelines .item.button.toggle-edit-instruments:not(.disabled):matches(:focus, .activate.activated, .radio.selected) {
+ color: var(--glyph-color-active);
+}
+
+.navigation-bar.timelines .item.button.toggle-edit-instruments:not(.disabled):active:matches(:focus, .activate.activated, .radio.selected) {
+ color: var(--glyph-color-active-pressed);
+}
+
+.navigation-bar.timelines .item.button.toggle-edit-instruments.disabled {
+ color: var(--glyph-color-disabled);
+}
+
+.navigation-bar.timelines .toggle-edit-instruments:not(.disabled):active {
+ color: var(--glyph-color-pressed);
+}
+
+.timeline-overview > .tree-outline.timelines {
+ position: absolute;
+ top: 23px;
</ins><span class="cx"> left: 0;
</span><del>- top: 0;
</del><span class="cx"> width: 185px;
</span><del>- height: 23px;
- box-sizing: border-box;
- background-color: white;
</del><ins>+ z-index: var(--z-index-header);
+ background-color: var(--panel-background-color);
</ins><span class="cx"> border-right: 1px solid var(--border-color);
</span><del>- border-bottom: 1px solid var(--border-color);
</del><span class="cx"> }
</span><span class="cx">
</span><del>-.timeline-overview.frames > .tree-outline.timelines {
- display: none;
</del><ins>+.timeline-overview.edit-instruments > .tree-outline.timelines {
+ bottom: 0;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+.timeline-overview.edit-instruments > .tree-outline.timelines .item.selected {
+ color: initial;
+ background-color: transparent;
+}
+
</ins><span class="cx"> .timeline-overview > .tree-outline.timelines .close-button {
</span><span class="cx"> width: 14px;
</span><span class="cx">
</span><span class="lines">@@ -60,11 +84,18 @@
</span><span class="cx"> visibility: visible;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.timeline-overview > .tree-outline.timelines input[type=checkbox].status-button {
+ width: 12px;
+ height: 12px;
+}
+
+.timeline-overview.edit-instruments > .tree-outline.timelines .item:nth-child(even),
</ins><span class="cx"> .timeline-overview > .tree-outline.timelines .item:not(.selected):nth-child(even) {
</span><span class="cx"> background-color: hsla(0, 0%, 0%, 0.03);
</span><span class="cx"> background-clip: padding-box;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.timeline-overview.edit-instruments > .tree-outline.timelines .item:not(:first-child),
</ins><span class="cx"> .timeline-overview > .tree-outline.timelines .item:not(.selected):not(:first-child) {
</span><span class="cx"> border-top: 1px solid hsla(0, 0%, 0%, 0.09);
</span><span class="cx"> }
</span><span class="lines">@@ -95,6 +126,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 > :matches(.tree-outline.timelines, .navigation-bar.timelines) {
+ display: none;
+}
+
</ins><span class="cx"> .timeline-overview.frames > .scroll-container {
</span><span class="cx"> left: 0;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js (198536 => 198537)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js 2016-03-22 17:58:54 UTC (rev 198536)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js 2016-03-22 17:59:51 UTC (rev 198537)
</span><span class="lines">@@ -32,6 +32,7 @@
</span><span class="cx"> console.assert(timelineRecording instanceof WebInspector.TimelineRecording);
</span><span class="cx">
</span><span class="cx"> this._timelinesViewModeSettings = this._createViewModeSettings(WebInspector.TimelineOverview.ViewMode.Timelines, 0.0001, 60, 0.01, 0, 15);
</span><ins>+ this._instrumentTypes = WebInspector.TimelineManager.availableTimelineTypes();
</ins><span class="cx">
</span><span class="cx"> if (WebInspector.FPSInstrument.supported()) {
</span><span class="cx"> let minimumDurationPerPixel = 1 / WebInspector.TimelineRecordFrame.MaximumWidthPixels;
</span><span class="lines">@@ -48,10 +49,7 @@
</span><span class="cx"> this._delegate = delegate;
</span><span class="cx">
</span><span class="cx"> this.element.classList.add("timeline-overview");
</span><del>- this.element.addEventListener("wheel", this._handleWheelEvent.bind(this));
- this.element.addEventListener("gesturestart", this._handleGestureStart.bind(this));
- this.element.addEventListener("gesturechange", this._handleGestureChange.bind(this));
- this.element.addEventListener("gestureend", this._handleGestureEnd.bind(this));
</del><ins>+ this._updateWheelAndGestureHandlers();
</ins><span class="cx">
</span><span class="cx"> this._graphsContainerView = new WebInspector.View;
</span><span class="cx"> this._graphsContainerView.element.classList.add("graphs-container");
</span><span class="lines">@@ -59,6 +57,16 @@
</span><span class="cx">
</span><span class="cx"> this._overviewGraphsByTypeMap = new Map;
</span><span class="cx">
</span><ins>+ this._editInstrumentsButton = new WebInspector.ActivateButtonNavigationItem("toggle-edit-instruments", WebInspector.UIString("Edit configuration"), WebInspector.UIString("Save configuration"));
+ this._editInstrumentsButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._toggleEditingInstruments, this);
+ this._editingInstruments = false;
+ this._updateEditInstrumentsButton();
+
+ let instrumentsNavigationBar = new WebInspector.NavigationBar;
+ instrumentsNavigationBar.element.classList.add("timelines");
+ instrumentsNavigationBar.addNavigationItem(this._editInstrumentsButton);
+ this.addSubview(instrumentsNavigationBar);
+
</ins><span class="cx"> this._timelinesTreeOutline = new WebInspector.TreeOutline;
</span><span class="cx"> this._timelinesTreeOutline.element.classList.add("timelines");
</span><span class="cx"> this._timelinesTreeOutline.disclosureButtons = false;
</span><span class="lines">@@ -106,6 +114,9 @@
</span><span class="cx"> this._resetSelection();
</span><span class="cx">
</span><span class="cx"> this._viewModeDidChange();
</span><ins>+
+ WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.CapturingStarted, this._capturingStarted, this);
+ WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.CapturingStopped, this._capturingStopped, this);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="lines">@@ -117,6 +128,9 @@
</span><span class="cx">
</span><span class="cx"> set selectedTimeline(x)
</span><span class="cx"> {
</span><ins>+ if (this._editingInstruments)
+ return;
+
</ins><span class="cx"> if (this._selectedTimeline === x)
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="lines">@@ -132,6 +146,11 @@
</span><span class="cx"> this._timelinesTreeOutline.selectedTreeElement.deselect();
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ get editingInstruments()
+ {
+ return this._editingInstruments;
+ }
+
</ins><span class="cx"> get viewMode()
</span><span class="cx"> {
</span><span class="cx"> return this._viewMode;
</span><span class="lines">@@ -139,6 +158,9 @@
</span><span class="cx">
</span><span class="cx"> set viewMode(x)
</span><span class="cx"> {
</span><ins>+ if (this._editingInstruments)
+ return;
+
</ins><span class="cx"> if (this._viewMode === x)
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="lines">@@ -588,26 +610,18 @@
</span><span class="cx"> console.assert(!this._overviewGraphsByTypeMap.has(timeline.type), timeline);
</span><span class="cx"> console.assert(!this._treeElementsByTypeMap.has(timeline.type), timeline);
</span><span class="cx">
</span><ins>+ let treeElement = new WebInspector.TimelineTreeElement(timeline);
+ let insertionIndex = insertionIndexForObjectInListSortedByFunction(treeElement, this._timelinesTreeOutline.children, this._compareTimelineTreeElements.bind(this));
+ this._timelinesTreeOutline.insertChild(treeElement, insertionIndex);
+ this._treeElementsByTypeMap.set(timeline.type, treeElement);
+
</ins><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="cx"> this._overviewGraphsByTypeMap.set(timeline.type, overviewGraph);
</span><ins>+ this._graphsContainerView.insertSubviewBefore(overviewGraph, this._graphsContainerView.subviews[insertionIndex]);
</ins><span class="cx">
</span><del>- this._graphsContainerView.addSubview(overviewGraph);
-
- 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);
</del><span class="cx"> treeElement.element.style.height = overviewGraph.height + "px";
</span><span class="cx">
</span><del>- this._treeElementsByTypeMap.set(timeline.type, treeElement);
-
</del><span class="cx"> if (!this._canShowTimelineType(timeline.type)) {
</span><span class="cx"> overviewGraph.hidden();
</span><span class="cx"> treeElement.hidden = true;
</span><span class="lines">@@ -788,9 +802,153 @@
</span><span class="cx"> this._selectedTimeline = timeline;
</span><span class="cx"> this.dispatchEventToListeners(WebInspector.TimelineOverview.Event.TimelineSelected);
</span><span class="cx"> }
</span><ins>+
+ _toggleEditingInstruments(event)
+ {
+ if (this._editingInstruments)
+ this._stopEditingInstruments();
+ else
+ this._startEditingInstruments();
+ }
+
+ _editingInstrumentsDidChange()
+ {
+ this.element.classList.toggle(WebInspector.TimelineOverview.EditInstrumentsStyleClassName, this._editingInstruments);
+ this._timelineRuler.enabled = !this._editingInstruments;
+
+ this._updateWheelAndGestureHandlers();
+ this._updateEditInstrumentsButton();
+
+ this.dispatchEventToListeners(WebInspector.TimelineOverview.Event.EditingInstrumentsDidChange);
+ }
+
+ _updateEditInstrumentsButton()
+ {
+ let newLabel = this._editingInstruments ? WebInspector.UIString("Done") : WebInspector.UIString("Edit");
+ this._editInstrumentsButton.label = newLabel;
+ this._editInstrumentsButton.activated = this._editingInstruments;
+ this._editInstrumentsButton.enabled = !WebInspector.timelineManager.isCapturing();
+ }
+
+ _updateWheelAndGestureHandlers()
+ {
+ if (this._editingInstruments) {
+ this.element.removeEventListener("wheel", this._handleWheelEventListener);
+ this.element.removeEventListener("gesturestart", this._handleGestureStartEventListener);
+ this.element.removeEventListener("gesturechange", this._handleGestureChangeEventListener);
+ this.element.removeEventListener("gestureend", this._handleGestureEndEventListener);
+ this._handleWheelEventListener = null;
+ this._handleGestureStartEventListener = null;
+ this._handleGestureChangeEventListener = null;
+ this._handleGestureEndEventListener = null;
+ } else {
+ this._handleWheelEventListener = this._handleWheelEvent.bind(this);
+ this._handleGestureStartEventListener = this._handleGestureStart.bind(this);
+ this._handleGestureChangeEventListener = this._handleGestureChange.bind(this);
+ this._handleGestureEndEventListener = this._handleGestureEnd.bind(this);
+ this.element.addEventListener("wheel", this._handleWheelEventListener);
+ this.element.addEventListener("gesturestart", this._handleGestureStartEventListener);
+ this.element.addEventListener("gesturechange", this._handleGestureChangeEventListener);
+ this.element.addEventListener("gestureend", this._handleGestureEndEventListener);
+ }
+ }
+
+ _startEditingInstruments()
+ {
+ console.assert(this._viewMode === WebInspector.TimelineOverview.ViewMode.Timelines);
+
+ if (this._editingInstruments)
+ return;
+
+ this._editingInstruments = true;
+
+ for (let type of this._instrumentTypes) {
+ let treeElement = this._treeElementsByTypeMap.get(type);
+ let checked = !!treeElement;
+ if (!treeElement) {
+ let timeline = this._recording.timelines.get(type);
+ console.assert(timeline, "Missing timeline for type " + type);
+
+ const placeholder = true;
+ treeElement = new WebInspector.TimelineTreeElement(timeline, placeholder);
+
+ let insertionIndex = insertionIndexForObjectInListSortedByFunction(treeElement, this._timelinesTreeOutline.children, this._compareTimelineTreeElements.bind(this));
+ this._timelinesTreeOutline.insertChild(treeElement, insertionIndex);
+ }
+
+ treeElement.editing = true;
+ }
+
+ this._editingInstrumentsDidChange();
+ }
+
+ _stopEditingInstruments()
+ {
+ if (!this._editingInstruments)
+ return;
+
+ this._editingInstruments = false;
+
+ let instruments = this._recording.instruments;
+ for (let treeElement of this._treeElementsByTypeMap.values()) {
+ if (treeElement.status.checked) {
+ treeElement.editing = false;
+ continue;
+ }
+
+ let timelineInstrument = instruments.find((instrument) => instrument.timelineRecordType === treeElement.representedObject.type);
+ this._recording.removeInstrument(timelineInstrument);
+ }
+
+ let placeholderTreeElements = this._timelinesTreeOutline.children.filter((treeElement) => treeElement.placeholder);
+ for (let treeElement of placeholderTreeElements) {
+ this._timelinesTreeOutline.removeChild(treeElement);
+
+ if (treeElement.status.checked) {
+ let instrument = WebInspector.Instrument.createForTimelineType(treeElement.representedObject.type);
+ this._recording.addInstrument(instrument);
+ }
+ }
+
+ let instrumentTypes = instruments.map((instrument) => instrument.timelineRecordType);
+ WebInspector.timelineManager.enabledTimelineTypes = instrumentTypes;
+
+ this._editingInstrumentsDidChange();
+ }
+
+ _capturingStarted()
+ {
+ this._editInstrumentsButton.enabled = false;
+ this._stopEditingInstruments();
+ }
+
+ _capturingStopped()
+ {
+ this._editInstrumentsButton.enabled = true;
+ }
+
+ _compareTimelineTreeElements(a, b)
+ {
+ let aTimelineType = a.representedObject.type;
+ let bTimelineType = b.representedObject.type;
+
+ // Always sort the Rendering Frames timeline last.
+ if (aTimelineType === WebInspector.TimelineRecord.Type.RenderingFrame)
+ return 1;
+ if (bTimelineType === WebInspector.TimelineRecord.Type.RenderingFrame)
+ return -1;
+
+ if (a.placeholder !== b.placeholder)
+ return a.placeholder ? 1 : -1;
+
+ let aTimelineIndex = this._instrumentTypes.indexOf(aTimelineType);
+ let bTimelineIndex = this._instrumentTypes.indexOf(bTimelineType);
+ return aTimelineIndex - bTimelineIndex;
+ }
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> WebInspector.TimelineOverview.ScrollDeltaDenominator = 500;
</span><ins>+WebInspector.TimelineOverview.EditInstrumentsStyleClassName = "edit-instruments";
</ins><span class="cx">
</span><span class="cx"> WebInspector.TimelineOverview.ViewMode = {
</span><span class="cx"> Timelines: "timeline-overview-view-mode-timelines",
</span><span class="lines">@@ -798,6 +956,7 @@
</span><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> WebInspector.TimelineOverview.Event = {
</span><ins>+ EditingInstrumentsDidChange: "editing-instruments-did-change",
</ins><span class="cx"> RecordSelected: "timeline-overview-record-selected",
</span><span class="cx"> TimelineSelected: "timeline-overview-timeline-selected",
</span><span class="cx"> TimeRangeSelectionChanged: "timeline-overview-time-range-selection-changed"
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordingContentViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css (198536 => 198537)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css 2016-03-22 17:58:54 UTC (rev 198536)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css 2016-03-22 17:59:51 UTC (rev 198537)
</span><span class="lines">@@ -30,6 +30,14 @@
</span><span class="cx"> right: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.content-view.timeline-recording.edit-instruments > .timeline-overview {
+ bottom: 0;
+}
+
+.content-view.timeline-recording.edit-instruments > .content-browser {
+ display: none;
+}
+
</ins><span class="cx"> .content-view.timeline-recording > .content-browser {
</span><span class="cx"> position: absolute;
</span><span class="cx"> left: 0;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordingContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js (198536 => 198537)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js 2016-03-22 17:58:54 UTC (rev 198536)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js 2016-03-22 17:59:51 UTC (rev 198537)
</span><span class="lines">@@ -38,6 +38,7 @@
</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><span class="cx"> this._timelineOverview.addEventListener(WebInspector.TimelineOverview.Event.TimelineSelected, this._timelineSelected, this);
</span><ins>+ this._timelineOverview.addEventListener(WebInspector.TimelineOverview.Event.EditingInstrumentsDidChange, this._editingInstrumentsDidChange, this);
</ins><span class="cx"> this.addSubview(this._timelineOverview);
</span><span class="cx">
</span><span class="cx"> const disableBackForward = true;
</span><span class="lines">@@ -161,11 +162,6 @@
</span><span class="cx"> return this._timelineContentBrowser.currentContentView;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- get timelineOverviewHeight()
- {
- return this._timelineOverview.height;
- }
-
</del><span class="cx"> shown()
</span><span class="cx"> {
</span><span class="cx"> this._timelineOverview.shown();
</span><span class="lines">@@ -336,7 +332,7 @@
</span><span class="cx"> let iconClassName;
</span><span class="cx"> let title;
</span><span class="cx"> if (representedObject instanceof WebInspector.Timeline) {
</span><del>- iconClassName = WebInspector.TimelineTabContentView.iconClassNameForTimeline(representedObject);
</del><ins>+ iconClassName = WebInspector.TimelineTabContentView.iconClassNameForTimelineType(representedObject.type);
</ins><span class="cx"> title = WebInspector.UIString("Details");
</span><span class="cx"> } else {
</span><span class="cx"> iconClassName = WebInspector.TimelineTabContentView.StopwatchIconStyleClass;
</span><span class="lines">@@ -599,11 +595,15 @@
</span><span class="cx">
</span><span class="cx"> _updateTimelineOverviewHeight()
</span><span class="cx"> {
</span><del>- const rulerHeight = 23;
-
- let styleValue = (rulerHeight + this.timelineOverviewHeight) + "px";
- this._timelineOverview.element.style.height = styleValue;
- this._timelineContentBrowser.element.style.top = styleValue;
</del><ins>+ if (this._timelineOverview.editingInstruments)
+ this._timelineOverview.element.style.height = "";
+ else {
+ const rulerHeight = 23;
+
+ let styleValue = (rulerHeight + this._timelineOverview.height) + "px";
+ this._timelineOverview.element.style.height = styleValue;
+ this._timelineContentBrowser.element.style.top = styleValue;
+ }
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _instrumentAdded(instrumentOrEvent)
</span><span class="lines">@@ -618,8 +618,8 @@
</span><span class="cx"> if (timeline.type === WebInspector.TimelineRecord.Type.RenderingFrame)
</span><span class="cx"> this._renderingFrameTimeline = timeline;
</span><span class="cx">
</span><del>- let displayName = WebInspector.TimelineTabContentView.displayNameForTimeline(timeline);
- let iconClassName = WebInspector.TimelineTabContentView.iconClassNameForTimeline(timeline);
</del><ins>+ let displayName = WebInspector.TimelineTabContentView.displayNameForTimelineType(timeline.type);
+ let iconClassName = WebInspector.TimelineTabContentView.iconClassNameForTimelineType(timeline.type);
</ins><span class="cx"> let pathComponent = new WebInspector.HierarchicalPathComponent(displayName, iconClassName, timeline);
</span><span class="cx"> pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
</span><span class="cx"> this._pathComponentMap.set(timeline, pathComponent);
</span><span class="lines">@@ -821,6 +821,14 @@
</span><span class="cx"> timelineView.startTime = this._timelineOverview.selectionStartTime;
</span><span class="cx"> timelineView.endTime = endTime;
</span><span class="cx"> }
</span><ins>+
+ _editingInstrumentsDidChange(event)
+ {
+ let editingInstruments = this._timelineOverview.editingInstruments;
+ this.element.classList.toggle(WebInspector.TimelineOverview.EditInstrumentsStyleClassName, editingInstruments);
+
+ this._updateTimelineOverviewHeight();
+ }
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> WebInspector.TimelineRecordingContentView.SelectedTimelineTypeCookieKey = "timeline-recording-content-view-selected-timeline-type";
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineTabContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineTabContentView.js (198536 => 198537)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineTabContentView.js 2016-03-22 17:58:54 UTC (rev 198536)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineTabContentView.js 2016-03-22 17:59:51 UTC (rev 198537)
</span><span class="lines">@@ -105,9 +105,9 @@
</span><span class="cx"> return !!window.TimelineAgent || !!window.ScriptProfilerAgent;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- static displayNameForTimeline(timeline)
</del><ins>+ static displayNameForTimelineType(timelineType)
</ins><span class="cx"> {
</span><del>- switch (timeline.type) {
</del><ins>+ switch (timelineType) {
</ins><span class="cx"> case WebInspector.TimelineRecord.Type.Network:
</span><span class="cx"> return WebInspector.UIString("Network Requests");
</span><span class="cx"> case WebInspector.TimelineRecord.Type.Layout:
</span><span class="lines">@@ -121,15 +121,15 @@
</span><span class="cx"> case WebInspector.TimelineRecord.Type.HeapAllocations:
</span><span class="cx"> return WebInspector.UIString("JavaScript Allocations");
</span><span class="cx"> default:
</span><del>- console.error("Unknown Timeline type:", timeline.type);
</del><ins>+ console.error("Unknown Timeline type:", timelineType);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> return null;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- static iconClassNameForTimeline(timeline)
</del><ins>+ static iconClassNameForTimelineType(timelineType)
</ins><span class="cx"> {
</span><del>- switch (timeline.type) {
</del><ins>+ switch (timelineType) {
</ins><span class="cx"> case WebInspector.TimelineRecord.Type.Network:
</span><span class="cx"> return "network-icon";
</span><span class="cx"> case WebInspector.TimelineRecord.Type.Layout:
</span><span class="lines">@@ -143,15 +143,15 @@
</span><span class="cx"> case WebInspector.TimelineRecord.Type.RenderingFrame:
</span><span class="cx"> return "rendering-frame-icon";
</span><span class="cx"> default:
</span><del>- console.error("Unknown Timeline type:", timeline.type);
</del><ins>+ console.error("Unknown Timeline type:", timelineType);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> return null;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- static genericClassNameForTimeline(timeline)
</del><ins>+ static genericClassNameForTimelineType(timelineType)
</ins><span class="cx"> {
</span><del>- switch (timeline.type) {
</del><ins>+ switch (timelineType) {
</ins><span class="cx"> case WebInspector.TimelineRecord.Type.Network:
</span><span class="cx"> return "network";
</span><span class="cx"> case WebInspector.TimelineRecord.Type.Layout:
</span><span class="lines">@@ -165,7 +165,7 @@
</span><span class="cx"> case WebInspector.TimelineRecord.Type.RenderingFrame:
</span><span class="cx"> return "rendering-frame";
</span><span class="cx"> default:
</span><del>- console.error("Unknown Timeline type:", timeline.type);
</del><ins>+ console.error("Unknown Timeline type:", timelineType);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> return null;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineTreeElementjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineTreeElement.js (0 => 198537)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineTreeElement.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineTreeElement.js 2016-03-22 17:59:51 UTC (rev 198537)
</span><span class="lines">@@ -0,0 +1,91 @@
</span><ins>+/*
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelineTreeElement = class TimelineTreeElement extends WebInspector.GeneralTreeElement
+{
+ constructor(timeline, placeholder)
+ {
+ let displayName = WebInspector.TimelineTabContentView.displayNameForTimelineType(timeline.type);
+ let iconClassName = WebInspector.TimelineTabContentView.iconClassNameForTimelineType(timeline.type);
+ let genericClassName = WebInspector.TimelineTabContentView.genericClassNameForTimelineType(timeline.type);
+
+ super([iconClassName, genericClassName], displayName, "", timeline);
+
+ this._placeholder = placeholder || false;
+ this.editing = this._placeholder;
+ }
+
+ // Public
+
+ get placeholder()
+ {
+ return this._placeholder;
+ }
+
+ get editing()
+ {
+ return this._editing;
+ }
+
+ set editing(x)
+ {
+ if (this._editing === x)
+ return;
+
+ this._editing = x;
+ this.selectable = !this._editing;
+
+ this._updateStatusButton();
+ }
+
+ // Private
+
+ _showCloseButton()
+ {
+ let tooltip = WebInspector.UIString("Close %s timeline view").format(this.mainTitle);
+ let button = new WebInspector.TreeElementStatusButton(useSVGSymbol("Images/CloseLarge.svg", "close-button", tooltip));
+ button.addEventListener(WebInspector.TreeElementStatusButton.Event.Clicked, () => { this.deselect(); });
+
+ this.status = button.element;
+ }
+
+ _showCheckbox()
+ {
+ let checkboxElement = document.createElement("input");
+ checkboxElement.type = "checkbox";
+ checkboxElement.checked = !this._placeholder;
+
+ let button = new WebInspector.TreeElementStatusButton(checkboxElement);
+ this.status = checkboxElement;
+ }
+
+ _updateStatusButton()
+ {
+ if (this._editing)
+ this._showCheckbox();
+ else
+ this._showCloseButton();
+ }
+};
</ins></span></pre>
</div>
</div>
</body>
</html>