<!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>[162560] 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/162560">162560</a></dd>
<dt>Author</dt> <dd>timothy@apple.com</dd>
<dt>Date</dt> <dd>2014-01-22 14:57:11 -0800 (Wed, 22 Jan 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>Support collapsing call site records into the resource timeline.
Also fix some filtering and graph issues.
https://bugs.webkit.org/show_bug.cgi?id=127440
Reviewed by Joseph Pecoraro.
* UserInterface/NavigationSidebarPanel.js:
(WebInspector.NavigationSidebarPanel.prototype.updateFilter):
(WebInspector.NavigationSidebarPanel.prototype.applyFiltersToTreeElement.matchTextFilter):
(WebInspector.NavigationSidebarPanel.prototype.applyFiltersToTreeElement.makeVisible):
(WebInspector.NavigationSidebarPanel.prototype.applyFiltersToTreeElement):
(WebInspector.NavigationSidebarPanel.prototype._updateFilter):
Tweak how filtering happens so custom filters never expand to reveal and auto expanded
tree elements will auto-collapse again later even with custom filters.
* UserInterface/OverviewTimelineView.css:
(.timeline-view.overview > .data-grid tr.parent:not(.expanded) td.graph-column .timeline-record-bar:not(.timeline-record-type-network) > .segment):
(.timeline-view.overview > .data-grid tr.parent:not(.expanded).selected td.graph-column .timeline-record-bar:not(.timeline-record-type-network) > .segment):
(.timeline-view.overview > .data-grid:focus tr.parent:not(.expanded).selected td.graph-column .timeline-record-bar:not(.timeline-record-type-network) > .segment):
Add a shadow to provide some negative space between juxtaposed records. Only needed when not expanded and not netwrok records.
* UserInterface/OverviewTimelineView.js:
(WebInspector.OverviewTimelineView.prototype.updateLayout):
(WebInspector.OverviewTimelineView.prototype._addResourceToTreeIfNeeded):
Update the filter when current time changes and only auto expand the main resource.
* UserInterface/ResourceTimelineDataGridNode.js:
(WebInspector.ResourceTimelineDataGridNode):
(WebInspector.ResourceTimelineDataGridNode.prototype._timelineRecordUpdated):
Don't schedule a refresh of the graph if the record isn't visible.
* UserInterface/SourceCodeTimelineTimelineDataGridNode.js:
(WebInspector.SourceCodeTimelineTimelineDataGridNode):
(WebInspector.SourceCodeTimelineTimelineDataGridNode.prototype._timelineRecordAdded):
Don't schedule a refresh of the graph if the record isn't visible.
* UserInterface/TimelineContentView.js:
(WebInspector.TimelineContentView.prototype._timeRangeSelectionChanged):
Remove the boolean for updateFilter.
* UserInterface/TimelineDataGrid.js:
(WebInspector.TimelineDataGrid.prototype._refreshDirtyDataGridNodes):
(WebInspector.TimelineDataGrid.prototype._sort):
Keep the hidden state in-sync between node and element.
* UserInterface/TimelineDataGridNode.js:
(WebInspector.TimelineDataGridNode.prototype.collapse):
(WebInspector.TimelineDataGridNode.prototype.expand):
(WebInspector.TimelineDataGridNode.prototype.appendChild):
(WebInspector.TimelineDataGridNode.prototype.insertChild):
(WebInspector.TimelineDataGridNode.prototype.removeChild):
(WebInspector.TimelineDataGridNode.prototype.removeChildren):
(WebInspector.TimelineDataGridNode.prototype.removeChildrenRecursive):
(WebInspector.TimelineDataGridNode.prototype.refreshGraph.createBarsForRecords):
(WebInspector.TimelineDataGridNode.prototype.refreshGraph.else.collectRecordsByType.get if):
(WebInspector.TimelineDataGridNode.prototype.needsGraphRefresh):
(WebInspector.TimelineDataGridNode.prototype.isRecordVisible):
Support drawing the children records on the parent graph.
* UserInterface/TimelineRecordBar.css:
(.timeline-record-bar.unfinished > .segment):
(:focus .selected .timeline-record-bar > .segment):
(:focus .selected .timeline-record-bar > .segment.inactive):
(:focus .selected .timeline-record-bar.has-inactive-segment > .segment:not(.inactive)):
Tweaked styles to look bettwen when selected.
* UserInterface/TimelineRecordBar.js:
(WebInspector.TimelineRecordBar.recordsCannotBeCombined):
(WebInspector.TimelineRecordBar.prototype.set records):
(WebInspector.TimelineRecordBar.prototype.refresh):
Drive-by fixes for some bug with bars being reused.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceNavigationSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceOverviewTimelineViewcss">trunk/Source/WebInspectorUI/UserInterface/OverviewTimelineView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceOverviewTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/OverviewTimelineView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceResourceTimelineDataGridNodejs">trunk/Source/WebInspectorUI/UserInterface/ResourceTimelineDataGridNode.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceSourceCodeTimelineTimelineDataGridNodejs">trunk/Source/WebInspectorUI/UserInterface/SourceCodeTimelineTimelineDataGridNode.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceTimelineContentViewjs">trunk/Source/WebInspectorUI/UserInterface/TimelineContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceTimelineDataGridjs">trunk/Source/WebInspectorUI/UserInterface/TimelineDataGrid.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceTimelineDataGridNodejs">trunk/Source/WebInspectorUI/UserInterface/TimelineDataGridNode.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceTimelineRecordBarcss">trunk/Source/WebInspectorUI/UserInterface/TimelineRecordBar.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceTimelineRecordBarjs">trunk/Source/WebInspectorUI/UserInterface/TimelineRecordBar.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (162559 => 162560)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2014-01-22 22:56:17 UTC (rev 162559)
+++ trunk/Source/WebInspectorUI/ChangeLog 2014-01-22 22:57:11 UTC (rev 162560)
</span><span class="lines">@@ -1,3 +1,79 @@
</span><ins>+2014-01-22 Timothy Hatcher <timothy@apple.com>
+
+ Support collapsing call site records into the resource timeline.
+
+ Also fix some filtering and graph issues.
+
+ https://bugs.webkit.org/show_bug.cgi?id=127440
+
+ Reviewed by Joseph Pecoraro.
+
+ * UserInterface/NavigationSidebarPanel.js:
+ (WebInspector.NavigationSidebarPanel.prototype.updateFilter):
+ (WebInspector.NavigationSidebarPanel.prototype.applyFiltersToTreeElement.matchTextFilter):
+ (WebInspector.NavigationSidebarPanel.prototype.applyFiltersToTreeElement.makeVisible):
+ (WebInspector.NavigationSidebarPanel.prototype.applyFiltersToTreeElement):
+ (WebInspector.NavigationSidebarPanel.prototype._updateFilter):
+ Tweak how filtering happens so custom filters never expand to reveal and auto expanded
+ tree elements will auto-collapse again later even with custom filters.
+
+ * UserInterface/OverviewTimelineView.css:
+ (.timeline-view.overview > .data-grid tr.parent:not(.expanded) td.graph-column .timeline-record-bar:not(.timeline-record-type-network) > .segment):
+ (.timeline-view.overview > .data-grid tr.parent:not(.expanded).selected td.graph-column .timeline-record-bar:not(.timeline-record-type-network) > .segment):
+ (.timeline-view.overview > .data-grid:focus tr.parent:not(.expanded).selected td.graph-column .timeline-record-bar:not(.timeline-record-type-network) > .segment):
+ Add a shadow to provide some negative space between juxtaposed records. Only needed when not expanded.
+
+ * UserInterface/OverviewTimelineView.js:
+ (WebInspector.OverviewTimelineView.prototype.updateLayout):
+ (WebInspector.OverviewTimelineView.prototype._addResourceToTreeIfNeeded):
+ Update the filter when current time changes and only auto expand the main resource.
+
+ * UserInterface/ResourceTimelineDataGridNode.js:
+ (WebInspector.ResourceTimelineDataGridNode):
+ (WebInspector.ResourceTimelineDataGridNode.prototype._timelineRecordUpdated):
+ Don't schedule a refresh of the graph if the record isn't visible.
+
+ * UserInterface/SourceCodeTimelineTimelineDataGridNode.js:
+ (WebInspector.SourceCodeTimelineTimelineDataGridNode):
+ (WebInspector.SourceCodeTimelineTimelineDataGridNode.prototype._timelineRecordAdded):
+ Don't schedule a refresh of the graph if the record isn't visible.
+
+ * UserInterface/TimelineContentView.js:
+ (WebInspector.TimelineContentView.prototype._timeRangeSelectionChanged):
+ Remove the boolean for updateFilter.
+
+ * UserInterface/TimelineDataGrid.js:
+ (WebInspector.TimelineDataGrid.prototype._refreshDirtyDataGridNodes):
+ (WebInspector.TimelineDataGrid.prototype._sort):
+ Keep the hidden state in-sync between node and element.
+
+ * UserInterface/TimelineDataGridNode.js:
+ (WebInspector.TimelineDataGridNode.prototype.collapse):
+ (WebInspector.TimelineDataGridNode.prototype.expand):
+ (WebInspector.TimelineDataGridNode.prototype.appendChild):
+ (WebInspector.TimelineDataGridNode.prototype.insertChild):
+ (WebInspector.TimelineDataGridNode.prototype.removeChild):
+ (WebInspector.TimelineDataGridNode.prototype.removeChildren):
+ (WebInspector.TimelineDataGridNode.prototype.removeChildrenRecursive):
+ (WebInspector.TimelineDataGridNode.prototype.refreshGraph.createBarsForRecords):
+ (WebInspector.TimelineDataGridNode.prototype.refreshGraph.else.collectRecordsByType.get if):
+ (WebInspector.TimelineDataGridNode.prototype.needsGraphRefresh):
+ (WebInspector.TimelineDataGridNode.prototype.isRecordVisible):
+ Support drawing the children records on the parent graph.
+
+ * UserInterface/TimelineRecordBar.css:
+ (.timeline-record-bar.unfinished > .segment):
+ (:focus .selected .timeline-record-bar > .segment):
+ (:focus .selected .timeline-record-bar > .segment.inactive):
+ (:focus .selected .timeline-record-bar.has-inactive-segment > .segment:not(.inactive)):
+ Tweaked styles to look better when selected.
+
+ * UserInterface/TimelineRecordBar.js:
+ (WebInspector.TimelineRecordBar.recordsCannotBeCombined):
+ (WebInspector.TimelineRecordBar.prototype.set records):
+ (WebInspector.TimelineRecordBar.prototype.refresh):
+ Drive-by fixes for some bug with bars being reused.
+
</ins><span class="cx"> 2014-01-21 Timothy Hatcher <timothy@apple.com>
</span><span class="cx">
</span><span class="cx"> Remember the Timeline Overview zoom and selection between sessions.
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceNavigationSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.js (162559 => 162560)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.js 2014-01-22 22:56:17 UTC (rev 162559)
+++ trunk/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.js 2014-01-22 22:57:11 UTC (rev 162560)
</span><span class="lines">@@ -292,9 +292,9 @@
</span><span class="cx"> // Implemented by subclasses if needed.
</span><span class="cx"> },
</span><span class="cx">
</span><del>- updateFilter: function(dontExpandOnMatch)
</del><ins>+ updateFilter: function()
</ins><span class="cx"> {
</span><del>- this._updateFilter(dontExpandOnMatch);
</del><ins>+ this._updateFilter();
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> hasCustomFilters: function()
</span><span class="lines">@@ -309,7 +309,7 @@
</span><span class="cx"> return true;
</span><span class="cx"> },
</span><span class="cx">
</span><del>- applyFiltersToTreeElement: function(treeElement, dontExpandOnMatch)
</del><ins>+ applyFiltersToTreeElement: function(treeElement)
</ins><span class="cx"> {
</span><span class="cx"> if (!this._filterBar.hasActiveFilters() && !this.hasCustomFilters()) {
</span><span class="cx"> // No filters, so make everything visible.
</span><span class="lines">@@ -326,6 +326,8 @@
</span><span class="cx">
</span><span class="cx"> var filterableData = treeElement.filterableData || {};
</span><span class="cx">
</span><ins>+ var matchedBuiltInFilters = false;
+
</ins><span class="cx"> var self = this;
</span><span class="cx"> function matchTextFilter(inputs)
</span><span class="cx"> {
</span><span class="lines">@@ -340,8 +342,10 @@
</span><span class="cx"> for (var input of inputs) {
</span><span class="cx"> if (!input)
</span><span class="cx"> continue;
</span><del>- if (self._textFilterRegex.test(input))
</del><ins>+ if (self._textFilterRegex.test(input)) {
+ matchedBuiltInFilters = true;
</ins><span class="cx"> return true;
</span><ins>+ }
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // No inputs matched.
</span><span class="lines">@@ -358,7 +362,8 @@
</span><span class="cx"> while (currentAncestor && !currentAncestor.root) {
</span><span class="cx"> currentAncestor.hidden = false;
</span><span class="cx">
</span><del>- if (!currentAncestor.expanded && !dontExpandOnMatch) {
</del><ins>+ // Only expand if the built-in filters matched, not custom filters.
+ if (matchedBuiltInFilters && !currentAncestor.expanded) {
</ins><span class="cx"> currentAncestor.__wasExpandedDuringFiltering = true;
</span><span class="cx"> currentAncestor.expand();
</span><span class="cx"> }
</span><span class="lines">@@ -370,6 +375,13 @@
</span><span class="cx"> if (matchTextFilter(filterableData.text) && this.matchTreeElementAgainstCustomFilters(treeElement)) {
</span><span class="cx"> // Make this element visible since it matches.
</span><span class="cx"> makeVisible();
</span><ins>+
+ // If this tree element didn't match a built-in filter and was expanded earlier during filtering, collapse it again.
+ if (!matchedBuiltInFilters && treeElement.expanded && treeElement.__wasExpandedDuringFiltering) {
+ delete treeElement.__wasExpandedDuringFiltering;
+ treeElement.collapse();
+ }
+
</ins><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -468,7 +480,7 @@
</span><span class="cx"> this._updateFilter();
</span><span class="cx"> },
</span><span class="cx">
</span><del>- _updateFilter: function(dontExpandOnMatch)
</del><ins>+ _updateFilter: function()
</ins><span class="cx"> {
</span><span class="cx"> var filters = this._filterBar.filters;
</span><span class="cx"> this._textFilterRegex = simpleGlobStringToRegExp(filters.text, "i");
</span><span class="lines">@@ -477,7 +489,7 @@
</span><span class="cx"> // Update the whole tree.
</span><span class="cx"> var currentTreeElement = this._contentTreeOutline.children[0];
</span><span class="cx"> while (currentTreeElement && !currentTreeElement.root) {
</span><del>- this.applyFiltersToTreeElement(currentTreeElement, dontExpandOnMatch);
</del><ins>+ this.applyFiltersToTreeElement(currentTreeElement);
</ins><span class="cx"> currentTreeElement = currentTreeElement.traverseNextTreeElement(false, null, false);
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceOverviewTimelineViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/OverviewTimelineView.css (162559 => 162560)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/OverviewTimelineView.css 2014-01-22 22:56:17 UTC (rev 162559)
+++ trunk/Source/WebInspectorUI/UserInterface/OverviewTimelineView.css 2014-01-22 22:57:11 UTC (rev 162560)
</span><span class="lines">@@ -69,3 +69,27 @@
</span><span class="cx"> .timeline-view.overview > .data-grid td.graph-column .timeline-record-bar {
</span><span class="cx"> top: 2px;
</span><span class="cx"> }
</span><ins>+
+.timeline-view.overview > .data-grid tr.parent:not(.expanded) td.graph-column .timeline-record-bar:not(.has-inactive-segment) > .segment {
+ box-shadow: white 0 0 0 1px;
+}
+
+.timeline-view.overview > .data-grid tr.parent:not(.expanded).selected td.graph-column .timeline-record-bar:not(.has-inactive-segment) > .segment {
+ box-shadow: rgb(212, 212, 212) 0 0 0 1px;
+}
+
+.timeline-view.overview > .data-grid:focus tr.parent:not(.expanded).selected td.graph-column .timeline-record-bar:not(.has-inactive-segment) > .segment {
+ box-shadow: rgb(56, 121, 217) 0 0 0 1px;
+}
+
+.timeline-view.overview > .data-grid tr.parent:not(.expanded) td.graph-column .timeline-record-bar.has-inactive-segment > .segment:not(.inactive) {
+ box-shadow: white 1px 0 0;
+}
+
+.timeline-view.overview > .data-grid tr.parent:not(.expanded).selected td.graph-column .timeline-record-bar.has-inactive-segment > .segment:not(.inactive) {
+ box-shadow: rgb(212, 212, 212) 1px 0 0;
+}
+
+.timeline-view.overview > .data-grid:focus tr.parent:not(.expanded).selected td.graph-column .timeline-record-bar.has-inactive-segment > .segment:not(.inactive) {
+ box-shadow: rgb(56, 121, 217) 1px 0 0;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceOverviewTimelineViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/OverviewTimelineView.js (162559 => 162560)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/OverviewTimelineView.js 2014-01-22 22:56:17 UTC (rev 162559)
+++ trunk/Source/WebInspectorUI/UserInterface/OverviewTimelineView.js 2014-01-22 22:57:11 UTC (rev 162560)
</span><span class="lines">@@ -93,13 +93,18 @@
</span><span class="cx"> // The TimelineDataGridNode graphs are positioned with percentages, so they auto resize with the view.
</span><span class="cx"> // We only need to refresh the graphs when the any of the times change.
</span><span class="cx"> if (this.zeroTime !== oldZeroTime || this.startTime !== oldStartTime || this.endTime !== oldEndTime || this.currentTime !== oldCurrentTime) {
</span><del>- var item = this._dataGrid.children[0];
- while (item) {
- item.refreshGraph();
- item = item.traverseNextNode(false, null, true);
</del><ins>+ var dataGridNode = this._dataGrid.children[0];
+ while (dataGridNode) {
+ dataGridNode.refreshGraph();
+ dataGridNode = dataGridNode.traverseNextNode(true, null, true);
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ if (!this.currentTime !== oldCurrentTime) {
+ // Check the filters again since the current time change might have revealed this node. Start and end time changes are handled by TimelineContentView.
+ WebInspector.timelineSidebarPanel.updateFilter();
+ }
+
</ins><span class="cx"> this._timelineRuler.updateLayout();
</span><span class="cx">
</span><span class="cx"> this._processPendingRepresentedObjects();
</span><span class="lines">@@ -216,11 +221,15 @@
</span><span class="cx"> if (!parentFrame)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- if (parentFrame.mainResource === resource || parentFrame.provisionalMainResource === resource)
</del><ins>+ var expandedByDefault = false;
+ if (parentFrame.mainResource === resource || parentFrame.provisionalMainResource === resource) {
</ins><span class="cx"> parentFrame = parentFrame.parentFrame;
</span><ins>+ expandedByDefault = !parentFrame; // Main frame expands by default.
+ }
</ins><span class="cx">
</span><span class="cx"> var resourceTreeElement = new WebInspector.ResourceTreeElement(resource);
</span><del>- resourceTreeElement.expand();
</del><ins>+ if (expandedByDefault)
+ resourceTreeElement.expand();
</ins><span class="cx">
</span><span class="cx"> var resourceTimelineRecord = this._networkTimeline ? this._networkTimeline.recordForResource(resource) : null;
</span><span class="cx"> if (!resourceTimelineRecord)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceResourceTimelineDataGridNodejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/ResourceTimelineDataGridNode.js (162559 => 162560)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/ResourceTimelineDataGridNode.js 2014-01-22 22:56:17 UTC (rev 162559)
+++ trunk/Source/WebInspectorUI/UserInterface/ResourceTimelineDataGridNode.js 2014-01-22 22:57:11 UTC (rev 162560)
</span><span class="lines">@@ -30,7 +30,7 @@
</span><span class="cx"> this._resource = resourceTimelineRecord.resource;
</span><span class="cx"> this._record = resourceTimelineRecord;
</span><span class="cx">
</span><del>- this._record.addEventListener(WebInspector.TimelineRecord.Event.Updated, graphOnly ? this.needsGraphRefresh : this._needsRefresh, this);
</del><ins>+ this._record.addEventListener(WebInspector.TimelineRecord.Event.Updated, graphOnly ? this._timelineRecordUpdated : this._needsRefresh, this);
</ins><span class="cx">
</span><span class="cx"> if (!graphOnly) {
</span><span class="cx"> this._resource.addEventListener(WebInspector.Resource.Event.URLDidChange, this._needsRefresh, this);
</span><span class="lines">@@ -182,5 +182,11 @@
</span><span class="cx"> _goToResource: function(event)
</span><span class="cx"> {
</span><span class="cx"> WebInspector.resourceSidebarPanel.showSourceCode(this._resource);
</span><ins>+ },
+
+ _timelineRecordUpdated: function(event)
+ {
+ if (this.isRecordVisible(this._record))
+ this.needsGraphRefresh();
</ins><span class="cx"> }
</span><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceSourceCodeTimelineTimelineDataGridNodejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/SourceCodeTimelineTimelineDataGridNode.js (162559 => 162560)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/SourceCodeTimelineTimelineDataGridNode.js 2014-01-22 22:56:17 UTC (rev 162559)
+++ trunk/Source/WebInspectorUI/UserInterface/SourceCodeTimelineTimelineDataGridNode.js 2014-01-22 22:57:11 UTC (rev 162560)
</span><span class="lines">@@ -28,7 +28,7 @@
</span><span class="cx"> WebInspector.TimelineDataGridNode.call(this, true, graphDataSource);
</span><span class="cx">
</span><span class="cx"> this._sourceCodeTimeline = sourceCodeTimeline;
</span><del>- this._sourceCodeTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this.needsGraphRefresh, this);
</del><ins>+ this._sourceCodeTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._timelineRecordAdded, this);
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> WebInspector.Object.addConstructorFunctions(WebInspector.SourceCodeTimelineTimelineDataGridNode);
</span><span class="lines">@@ -52,5 +52,13 @@
</span><span class="cx"> get data()
</span><span class="cx"> {
</span><span class="cx"> return {graph: this._sourceCodeTimeline.startTime};
</span><ins>+ },
+
+ // Private
+
+ _timelineRecordAdded: function(event)
+ {
+ if (this.isRecordVisible(event.data.record))
+ this.needsGraphRefresh();
</ins><span class="cx"> }
</span><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceTimelineContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/TimelineContentView.js (162559 => 162560)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/TimelineContentView.js 2014-01-22 22:56:17 UTC (rev 162559)
+++ trunk/Source/WebInspectorUI/UserInterface/TimelineContentView.js 2014-01-22 22:57:11 UTC (rev 162560)
</span><span class="lines">@@ -404,6 +404,6 @@
</span><span class="cx"> this._currentTimelineView.endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
</span><span class="cx">
</span><span class="cx"> // Delay until the next frame to stay in sync with the current timeline view's time-based layout changes.
</span><del>- requestAnimationFrame(function() { WebInspector.timelineSidebarPanel.updateFilter(true); });
</del><ins>+ requestAnimationFrame(function() { WebInspector.timelineSidebarPanel.updateFilter(); });
</ins><span class="cx"> }
</span><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceTimelineDataGridjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/TimelineDataGrid.js (162559 => 162560)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/TimelineDataGrid.js 2014-01-22 22:56:17 UTC (rev 162559)
+++ trunk/Source/WebInspectorUI/UserInterface/TimelineDataGrid.js 2014-01-22 22:57:11 UTC (rev 162560)
</span><span class="lines">@@ -238,6 +238,10 @@
</span><span class="cx"> treeOutline.insertChild(treeElement, insertionIndex);
</span><span class="cx"> this.insertChild(dataGridNode, insertionIndex);
</span><span class="cx">
</span><ins>+ // Adding the tree element back to the tree outline subjects it to filters.
+ // Make sure we keep the hidden state in-sync while the synchronizer is disabled.
+ dataGridNode.element.classList.toggle("hidden", treeElement.hidden);
+
</ins><span class="cx"> if (dataGridNode === selectedNode) {
</span><span class="cx"> selectedNode.revealAndSelect();
</span><span class="cx"> delete this._ignoreSelectionEvent;
</span><span class="lines">@@ -274,6 +278,10 @@
</span><span class="cx">
</span><span class="cx"> treeOutline.appendChild(treeElement);
</span><span class="cx"> this.appendChild(dataGridNode);
</span><ins>+
+ // Adding the tree element back to the tree outline subjects it to filters.
+ // Make sure we keep the hidden state in-sync while the synchronizer is disabled.
+ dataGridNode.element.classList.toggle("hidden", treeElement.hidden);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this._treeOutlineDataGridSynchronizer.enabled = true;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceTimelineDataGridNodejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/TimelineDataGridNode.js (162559 => 162560)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/TimelineDataGridNode.js 2014-01-22 22:56:17 UTC (rev 162559)
+++ trunk/Source/WebInspectorUI/UserInterface/TimelineDataGridNode.js 2014-01-22 22:57:11 UTC (rev 162560)
</span><span class="lines">@@ -64,6 +64,33 @@
</span><span class="cx"> return {graph: records.length ? records[0].startTime : 0};
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ collapse: function()
+ {
+ WebInspector.DataGridNode.prototype.collapse.call(this);
+
+ // Refresh to show child bars in our graph now that we collapsed.
+ this.refreshGraph();
+ },
+
+ expand: function()
+ {
+ WebInspector.DataGridNode.prototype.expand.call(this);
+
+ if (!this.revealed)
+ return;
+
+ // Refresh to remove child bars from our graph now that we expanded.
+ this.refreshGraph();
+
+ // Refresh child graphs since they haven't been updating while we were collapsed.
+ var childNode = this.children[0];
+ while (childNode) {
+ if (childNode instanceof WebInspector.TimelineDataGridNode)
+ childNode.refreshGraph();
+ childNode = childNode.traverseNextNode(true, this);
+ }
+ },
+
</ins><span class="cx"> createCellContent: function(columnIdentifier, cell)
</span><span class="cx"> {
</span><span class="cx"> if (columnIdentifier === "graph" && this._graphDataSource) {
</span><span class="lines">@@ -198,42 +225,29 @@
</span><span class="cx"> delete this._scheduledGraphRefreshIdentifier;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- var records = this.records;
- if (!records || !records.length)
- return;
</del><ins>+ if (!this.revealed) {
+ // We are not visible, but an ancestor will be drawing our graph.
+ // Notify the next visible ancestor to refresh their graph.
+ var ancestor = this;
+ while (ancestor && !ancestor.root) {
+ if (ancestor.revealed && ancestor instanceof WebInspector.TimelineDataGridNode) {
+ ancestor.refreshGraph();
+ return;
+ }
</ins><span class="cx">
</span><del>- // Fast path for single records.
- if (records.length === 1) {
- var record = records[0];
- var timelineRecordBar = this._timelineRecordBars[0];
-
- if (timelineRecordBar && timelineRecordBar.record !== record) {
- timelineRecordBar.element.remove();
- timelineRecordBar = null;
</del><ins>+ ancestor = ancestor.parent;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- if (!timelineRecordBar)
- timelineRecordBar = this._timelineRecordBars[0] = new WebInspector.TimelineRecordBar(record);
-
- if (timelineRecordBar.refresh(this._graphDataSource)) {
- if (!timelineRecordBar.element.parentNode)
- this._graphContainerElement.appendChild(timelineRecordBar.element);
- } else
- timelineRecordBar.element.remove();
-
</del><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- // Multiple records attempt to share a bar if their time is close to prevent overlapping bars.
</del><span class="cx"> var startTime = this._graphDataSource.startTime;
</span><span class="cx"> var currentTime = this._graphDataSource.currentTime;
</span><span class="cx"> var endTime = this._graphDataSource.endTime;
</span><span class="cx"> var duration = endTime - startTime;
</span><span class="cx"> var visibleWidth = this._graphContainerElement.offsetWidth;
</span><span class="cx"> var secondsPerPixel = duration / visibleWidth;
</span><del>-
</del><span class="cx"> var recordBarIndex = 0;
</span><del>- var barRecords = [];
</del><span class="cx">
</span><span class="cx"> function createBar(barRecords)
</span><span class="cx"> {
</span><span class="lines">@@ -247,36 +261,72 @@
</span><span class="cx"> ++recordBarIndex;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- for (var record of records) {
- // Combining multiple record bars is not supported with records that have inactive time.
- // ResourceTimelineRecord is the only one right, and it is always a single record handled above.
- console.assert(!record.usesActiveStartTime);
</del><ins>+ function createBarsForRecords(records)
+ {
+ var barRecords = [];
</ins><span class="cx">
</span><del>- if (isNaN(record.startTime))
- continue;
</del><ins>+ for (var record of records) {
+ if (isNaN(record.startTime))
+ continue;
</ins><span class="cx">
</span><del>- // If this bar is completely before the bounds of the graph, skip this record.
- if (record.endTime < startTime)
- continue;
</del><ins>+ // If this bar is completely before the bounds of the graph, skip this record.
+ if (record.endTime < startTime)
+ continue;
</ins><span class="cx">
</span><del>- // If this record is completely after the current time or end time, break out now.
- // Records are sorted, so all records after this will be beyond the current or end time too.
- if (record.startTime > currentTime || record.startTime > endTime)
- break;
</del><ins>+ // If this record is completely after the current time or end time, break out now.
+ // Records are sorted, so all records after this will be beyond the current or end time too.
+ if (record.startTime > currentTime || record.startTime > endTime)
+ break;
</ins><span class="cx">
</span><del>- // Check if the previous record can be combined with the current record, if not make a new bar.
- if (barRecords.length && WebInspector.TimelineRecordBar.recordsCannotBeCombined(barRecords, record, secondsPerPixel)) {
</del><ins>+ // Check if the previous record can be combined with the current record, if not make a new bar.
+ if (barRecords.length && WebInspector.TimelineRecordBar.recordsCannotBeCombined(barRecords, record, secondsPerPixel)) {
+ createBar.call(this, barRecords);
+ barRecords = [];
+ }
+
+ barRecords.push(record);
+ }
+
+ // Create the bar for the last record if needed.
+ if (barRecords.length)
</ins><span class="cx"> createBar.call(this, barRecords);
</span><del>- barRecords = [];
</del><ins>+ }
+
+ if (this.expanded) {
+ // When expanded just use the records for this node.
+ createBarsForRecords.call(this, this.records);
+ } else {
+ // When collapsed use the records for this node and its descendants.
+ // To share bars better, group records by type.
+
+ var recordTypeMap = new Map;
+
+ function collectRecordsByType(records)
+ {
+ for (var record of records) {
+ var typedRecords = recordTypeMap.get(record.type);
+ if (!typedRecords) {
+ typedRecords = [];
+ recordTypeMap.set(record.type, typedRecords);
+ }
+
+ typedRecords.push(record);
+ }
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- barRecords.push(record);
</del><ins>+ collectRecordsByType(this.records);
+
+ var childNode = this.children[0];
+ while (childNode) {
+ if (childNode instanceof WebInspector.TimelineDataGridNode)
+ collectRecordsByType(childNode.records);
+ childNode = childNode.traverseNextNode(false, this);
+ }
+
+ for (var records of recordTypeMap.values())
+ createBarsForRecords.call(this, records);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- // Create the bar for the last record if needed.
- if (barRecords.length)
- createBar.call(this, barRecords);
-
</del><span class="cx"> // Remove the remaining unused TimelineRecordBars.
</span><span class="cx"> for (; recordBarIndex < this._timelineRecordBars.length; ++recordBarIndex) {
</span><span class="cx"> this._timelineRecordBars[recordBarIndex].records = null;
</span><span class="lines">@@ -290,5 +340,26 @@
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> this._scheduledGraphRefreshIdentifier = requestAnimationFrame(this.refreshGraph.bind(this));
</span><ins>+ },
+
+ // Protected
+
+ isRecordVisible: function(record)
+ {
+ if (!this._graphDataSource)
+ return false;
+
+ if (isNaN(record.startTime))
+ return false;
+
+ // If this bar is completely before the bounds of the graph, not visible.
+ if (record.endTime < this.graphDataSource.startTime)
+ return false;
+
+ // If this record is completely after the current time or end time, not visible.
+ if (record.startTime > this.graphDataSource.currentTime || record.startTime > this.graphDataSource.endTime)
+ return false;
+
+ return true;
</ins><span class="cx"> }
</span><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceTimelineRecordBarcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/TimelineRecordBar.css (162559 => 162560)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/TimelineRecordBar.css 2014-01-22 22:56:17 UTC (rev 162559)
+++ trunk/Source/WebInspectorUI/UserInterface/TimelineRecordBar.css 2014-01-22 22:57:11 UTC (rev 162560)
</span><span class="lines">@@ -35,6 +35,7 @@
</span><span class="cx"> border: 1px solid rgb(200, 200, 200);
</span><span class="cx"> border-radius: 3px;
</span><span class="cx"> min-width: 4px;
</span><ins>+ z-index: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .timeline-record-bar:not(.has-inactive-segment) > .segment {
</span><span class="lines">@@ -42,11 +43,16 @@
</span><span class="cx"> width: 100%;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.timeline-record-bar > .segment.inactive {
+ z-index: 0;
+}
+
</ins><span class="cx"> .timeline-record-bar > .segment.inactive,
</span><span class="cx"> .timeline-record-bar.unfinished > .segment {
</span><span class="cx"> border-top-right-radius: 0 !important;
</span><span class="cx"> border-bottom-right-radius: 0 !important;
</span><span class="cx"> border-right: none;
</span><ins>+ margin-right: -1px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .timeline-record-bar > .segment.inactive + .segment {
</span><span class="lines">@@ -56,9 +62,17 @@
</span><span class="cx">
</span><span class="cx"> :focus .selected .timeline-record-bar > .segment {
</span><span class="cx"> background-color: white !important;
</span><del>- border-color: white !important;
</del><ins>+ border: none !important;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+:focus .selected .timeline-record-bar > .segment.inactive {
+ opacity: 0.7;
+}
+
+:focus .selected .timeline-record-bar.has-inactive-segment > .segment:not(.inactive) {
+ border-left: 1px solid rgba(56, 121, 217, 0.7) !important;
+}
+
</ins><span class="cx"> .timeline-record-bar.timeline-record-type-network > .segment {
</span><span class="cx"> background-color: rgb(120, 176, 225);
</span><span class="cx"> border-color: rgb(61, 147, 200);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceTimelineRecordBarjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/TimelineRecordBar.js (162559 => 162560)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/TimelineRecordBar.js 2014-01-22 22:56:17 UTC (rev 162559)
+++ trunk/Source/WebInspectorUI/UserInterface/TimelineRecordBar.js 2014-01-22 22:57:11 UTC (rev 162560)
</span><span class="lines">@@ -58,7 +58,13 @@
</span><span class="cx"> if (!records.length)
</span><span class="cx"> return true;
</span><span class="cx">
</span><ins>+ if (candidateRecord.usesActiveStartTime)
+ return true;
+
</ins><span class="cx"> var lastRecord = records.lastValue;
</span><ins>+ if (lastRecord.usesActiveStartTime)
+ return true;
+
</ins><span class="cx"> if (lastRecord.type !== candidateRecord.type)
</span><span class="cx"> return true;
</span><span class="cx">
</span><span class="lines">@@ -112,9 +118,10 @@
</span><span class="cx"> this._inactiveBarElement.classList.add(WebInspector.TimelineRecordBar.BarSegmentStyleClassName);
</span><span class="cx"> this._inactiveBarElement.classList.add(WebInspector.TimelineRecordBar.InactiveStyleClassName);
</span><span class="cx"> this._element.classList.add(WebInspector.TimelineRecordBar.HasInactiveSegmentStyleClassName);
</span><del>- this._element.insertBefore(this._inactiveBarElement, this._activeBarElement);
</del><ins>+ this._element.insertBefore(this._inactiveBarElement, this._element.firstChild);
</ins><span class="cx"> }
</span><span class="cx"> } else if (this._inactiveBarElement) {
</span><ins>+ this._element.classList.remove(WebInspector.TimelineRecordBar.HasInactiveSegmentStyleClassName);
</ins><span class="cx"> this._inactiveBarElement.remove();
</span><span class="cx"> delete this._inactiveBarElement;
</span><span class="cx"> }
</span><span class="lines">@@ -165,8 +172,15 @@
</span><span class="cx"> var newBarWidth = ((barEndTime - graphStartTime) / graphDuration) - newBarLeftPosition;
</span><span class="cx"> this._updateElementPosition(this._element, newBarWidth, "width");
</span><span class="cx">
</span><del>- if (!this._inactiveBarElement)
</del><ins>+ if (!this._inactiveBarElement) {
+ // If this TimelineRecordBar is reused and had an inactive bar previously,
+ // we might need to remove some styles and add the active element back.
+ this._activeBarElement.style.removeProperty("left");
+ this._activeBarElement.style.removeProperty("width");
+ if (!this._activeBarElement.parentNode)
+ this._element.appendChild(this._activeBarElement);
</ins><span class="cx"> return true;
</span><ins>+ }
</ins><span class="cx">
</span><span class="cx"> console.assert(firstRecord === lastRecord);
</span><span class="cx">
</span></span></pre>
</div>
</div>
</body>
</html>