<!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>[162415] 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/162415">162415</a></dd>
<dt>Author</dt> <dd>timothy@apple.com</dd>
<dt>Date</dt> <dd>2014-01-20 18:55:52 -0800 (Mon, 20 Jan 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>Implement the discrete Network timeline view.
https://bugs.webkit.org/show_bug.cgi?id=127022
Reviewed by Joseph Pecoraro.
* UserInterface/DataGrid.js:
(WebInspector.DataGrid): Align the labels of the column headers to match the data.
(WebInspector.DataGridNode.prototype.get selectable): Prevent selection when hidden.
* UserInterface/DetailsSection.css:
(.details-section > .header): Bump the font size to match data grid header sizes.
* UserInterface/Main.html: Add new files.
* UserInterface/NetworkTimelineView.css: Added.
(.timeline-view.network > .data-grid):
(.sidebar > .panel.timeline.timeline-content-view-showing > .content .item.resource .subtitle):
Hide the domain subtitle when the content view is showing which also has the domain.
* UserInterface/NetworkTimelineView.js: Added.
(WebInspector.NetworkTimelineView):
(WebInspector.NetworkTimelineView.prototype.get navigationSidebarTreeOutlineLabel):
(WebInspector.NetworkTimelineView.prototype.shown):
(WebInspector.NetworkTimelineView.prototype.hidden):
(WebInspector.NetworkTimelineView.prototype.updateLayout):
(WebInspector.NetworkTimelineView.prototype.matchTreeElementAgainstCustomFilters):
(WebInspector.NetworkTimelineView.prototype._networkTimelineRecordAdded):
(WebInspector.NetworkTimelineView.prototype._dataGridFiltersDidChange):
(WebInspector.NetworkTimelineView.prototype._treeElementSelected):
* UserInterface/ResourceTimelineDataGridNode.js:
(WebInspector.ResourceTimelineDataGridNode.prototype._needsRefresh):
Call dataGridNodeNeedsRefresh on the TimelineDataGrid so things can be batched with
one request animation frame.
* UserInterface/TimelineContentView.js:
(WebInspector.TimelineContentView): Create a NetworkTimelineView.
(WebInspector.TimelineContentView.prototype.matchTreeElementAgainstCustomFilters):
* UserInterface/TimelineDataGrid.css:
(.data-grid.timeline table):
(.data-grid.timeline th):
(.data-grid.timeline th:not(:last-child)):
(.data-grid.timeline th.sortable:active):
(.data-grid.timeline th.sort-descending):
(.data-grid.timeline .data-container):
(.data-grid.timeline td):
(.data-grid.timeline td:last-child):
(.data-grid.timeline td:not(:last-child)):
(.data-grid.timeline:focus tr.selected td:not(:last-child)):
(.data-grid.timeline th.sort-descending > div:first-child):
(.data-grid.timeline th.sort-descending > div:first-child::after):
(.data-grid.timeline td.error):
(.data-grid.timeline tr.selected td.error):
(.data-grid.timeline > .navigation-bar-container):
(.data-grid.timeline:hover > .navigation-bar-container):
(.data-grid.timeline > .navigation-bar-container > .navigation-bar):
* UserInterface/TimelineDataGrid.js:
(WebInspector.TimelineDataGrid):
(WebInspector.TimelineDataGrid.createColumnScopeBar):
(WebInspector.TimelineDataGrid.prototype.reset):
(WebInspector.TimelineDataGrid.prototype.shown):
(WebInspector.TimelineDataGrid.prototype.hidden):
(WebInspector.TimelineDataGrid.prototype.callFramePopoverAnchorElement):
(WebInspector.TimelineDataGrid.prototype.updateLayout):
(WebInspector.TimelineDataGrid.prototype.treeElementMatchesActiveScopeFilters):
(WebInspector.TimelineDataGrid.prototype.addRowInSortOrder):
(WebInspector.TimelineDataGrid.prototype.shouldIgnoreSelectionEvent):
(WebInspector.TimelineDataGrid.prototype.dataGridNodeNeedsRefresh):
(WebInspector.TimelineDataGrid.prototype._refreshDirtyDataGridNodes):
(WebInspector.TimelineDataGrid.prototype._sort):
(WebInspector.TimelineDataGrid.prototype._sortComparator):
Add support for sorting, batch refresh and managing of a TreeOutlineDataGridSynchronizer.
* UserInterface/TimelineSidebarPanel.css:
(.sidebar > .panel.timeline > .title-bar): Bump the font size to match data grid header sizes.
* UserInterface/TimelineView.js:
(WebInspector.TimelineView.prototype.matchTreeElementAgainstCustomFilters): Added stub.
* UserInterface/TreeOutlineDataGridSynchronizer.js:
(WebInspector.TreeOutlineDataGridSynchronizer.prototype.get treeOutline):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype.get dataGrid):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype.get enabled):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype.set enabled):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype.treeElementForDataGridNode):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype.dataGridNodeForTreeElement):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeOutlineScrolled):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._dataGridScrolled):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._dataGridNodeSelected):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._dataGridNodeExpanded):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._dataGridNodeCollapsed):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementSelected):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementAdded):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementRemoved):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementExpanded):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementCollapsed):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementHiddenChanged):
Added support for disabling the synchronizer when the client can do a better job.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceDataGridjs">trunk/Source/WebInspectorUI/UserInterface/DataGrid.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceDetailsSectioncss">trunk/Source/WebInspectorUI/UserInterface/DetailsSection.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceResourceTimelineDataGridNodejs">trunk/Source/WebInspectorUI/UserInterface/ResourceTimelineDataGridNode.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceTimelineContentViewjs">trunk/Source/WebInspectorUI/UserInterface/TimelineContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceTimelineDataGridcss">trunk/Source/WebInspectorUI/UserInterface/TimelineDataGrid.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceTimelineDataGridjs">trunk/Source/WebInspectorUI/UserInterface/TimelineDataGrid.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceTimelineSidebarPanelcss">trunk/Source/WebInspectorUI/UserInterface/TimelineSidebarPanel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/TimelineView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceTreeOutlineDataGridSynchronizerjs">trunk/Source/WebInspectorUI/UserInterface/TreeOutlineDataGridSynchronizer.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceNetworkTimelineViewcss">trunk/Source/WebInspectorUI/UserInterface/NetworkTimelineView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceNetworkTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/NetworkTimelineView.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (162414 => 162415)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2014-01-21 02:55:44 UTC (rev 162414)
+++ trunk/Source/WebInspectorUI/ChangeLog 2014-01-21 02:55:52 UTC (rev 162415)
</span><span class="lines">@@ -1,3 +1,107 @@
</span><ins>+2014-01-14 Timothy Hatcher <timothy@apple.com>
+
+ Implement the discrete Network timeline view.
+
+ https://bugs.webkit.org/show_bug.cgi?id=127022
+
+ Reviewed by Joseph Pecoraro.
+
+ * UserInterface/DataGrid.js:
+ (WebInspector.DataGrid): Align the labels of the column headers to match the data.
+ (WebInspector.DataGridNode.prototype.get selectable): Prevent selection when hidden.
+
+ * UserInterface/DetailsSection.css:
+ (.details-section > .header): Bump the font size to match data grid header sizes.
+
+ * UserInterface/Main.html: Add new files.
+
+ * UserInterface/NetworkTimelineView.css: Added.
+ (.timeline-view.network > .data-grid):
+ (.sidebar > .panel.timeline.timeline-content-view-showing > .content .item.resource .subtitle):
+ Hide the domain subtitle when the content view is showing which also has the domain.
+
+ * UserInterface/NetworkTimelineView.js: Added.
+ (WebInspector.NetworkTimelineView):
+ (WebInspector.NetworkTimelineView.prototype.get navigationSidebarTreeOutlineLabel):
+ (WebInspector.NetworkTimelineView.prototype.shown):
+ (WebInspector.NetworkTimelineView.prototype.hidden):
+ (WebInspector.NetworkTimelineView.prototype.updateLayout):
+ (WebInspector.NetworkTimelineView.prototype.matchTreeElementAgainstCustomFilters):
+ (WebInspector.NetworkTimelineView.prototype._networkTimelineRecordAdded):
+ (WebInspector.NetworkTimelineView.prototype._dataGridFiltersDidChange):
+ (WebInspector.NetworkTimelineView.prototype._treeElementSelected):
+
+ * UserInterface/ResourceTimelineDataGridNode.js:
+ (WebInspector.ResourceTimelineDataGridNode.prototype._needsRefresh):
+ Call dataGridNodeNeedsRefresh on the TimelineDataGrid so things can be batched with
+ one request animation frame.
+
+ * UserInterface/TimelineContentView.js:
+ (WebInspector.TimelineContentView): Create a NetworkTimelineView.
+ (WebInspector.TimelineContentView.prototype.matchTreeElementAgainstCustomFilters):
+
+ * UserInterface/TimelineDataGrid.css:
+ (.data-grid.timeline table):
+ (.data-grid.timeline th):
+ (.data-grid.timeline th:not(:last-child)):
+ (.data-grid.timeline th.sortable:active):
+ (.data-grid.timeline th.sort-descending):
+ (.data-grid.timeline .data-container):
+ (.data-grid.timeline td):
+ (.data-grid.timeline td:last-child):
+ (.data-grid.timeline td:not(:last-child)):
+ (.data-grid.timeline:focus tr.selected td:not(:last-child)):
+ (.data-grid.timeline th.sort-descending > div:first-child):
+ (.data-grid.timeline th.sort-descending > div:first-child::after):
+ (.data-grid.timeline td.error):
+ (.data-grid.timeline tr.selected td.error):
+ (.data-grid.timeline > .navigation-bar-container):
+ (.data-grid.timeline:hover > .navigation-bar-container):
+ (.data-grid.timeline > .navigation-bar-container > .navigation-bar):
+
+ * UserInterface/TimelineDataGrid.js:
+ (WebInspector.TimelineDataGrid):
+ (WebInspector.TimelineDataGrid.createColumnScopeBar):
+ (WebInspector.TimelineDataGrid.prototype.reset):
+ (WebInspector.TimelineDataGrid.prototype.shown):
+ (WebInspector.TimelineDataGrid.prototype.hidden):
+ (WebInspector.TimelineDataGrid.prototype.callFramePopoverAnchorElement):
+ (WebInspector.TimelineDataGrid.prototype.updateLayout):
+ (WebInspector.TimelineDataGrid.prototype.treeElementMatchesActiveScopeFilters):
+ (WebInspector.TimelineDataGrid.prototype.addRowInSortOrder):
+ (WebInspector.TimelineDataGrid.prototype.shouldIgnoreSelectionEvent):
+ (WebInspector.TimelineDataGrid.prototype.dataGridNodeNeedsRefresh):
+ (WebInspector.TimelineDataGrid.prototype._refreshDirtyDataGridNodes):
+ (WebInspector.TimelineDataGrid.prototype._sort):
+ (WebInspector.TimelineDataGrid.prototype._sortComparator):
+ Add support for sorting, batch refresh and managing of a TreeOutlineDataGridSynchronizer.
+
+ * UserInterface/TimelineSidebarPanel.css:
+ (.sidebar > .panel.timeline > .title-bar): Bump the font size to match data grid header sizes.
+
+ * UserInterface/TimelineView.js:
+ (WebInspector.TimelineView.prototype.matchTreeElementAgainstCustomFilters): Added stub.
+
+ * UserInterface/TreeOutlineDataGridSynchronizer.js:
+ (WebInspector.TreeOutlineDataGridSynchronizer.prototype.get treeOutline):
+ (WebInspector.TreeOutlineDataGridSynchronizer.prototype.get dataGrid):
+ (WebInspector.TreeOutlineDataGridSynchronizer.prototype.get enabled):
+ (WebInspector.TreeOutlineDataGridSynchronizer.prototype.set enabled):
+ (WebInspector.TreeOutlineDataGridSynchronizer.prototype.treeElementForDataGridNode):
+ (WebInspector.TreeOutlineDataGridSynchronizer.prototype.dataGridNodeForTreeElement):
+ (WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeOutlineScrolled):
+ (WebInspector.TreeOutlineDataGridSynchronizer.prototype._dataGridScrolled):
+ (WebInspector.TreeOutlineDataGridSynchronizer.prototype._dataGridNodeSelected):
+ (WebInspector.TreeOutlineDataGridSynchronizer.prototype._dataGridNodeExpanded):
+ (WebInspector.TreeOutlineDataGridSynchronizer.prototype._dataGridNodeCollapsed):
+ (WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementSelected):
+ (WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementAdded):
+ (WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementRemoved):
+ (WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementExpanded):
+ (WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementCollapsed):
+ (WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementHiddenChanged):
+ Added support for disabling the synchronizer when the client can do a better job.
+
</ins><span class="cx"> 2014-01-13 Timothy Hatcher <timothy@apple.com>
</span><span class="cx">
</span><span class="cx"> Filter the Timeline overview graph and sidebar based on the current time selection.
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceDataGridjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/DataGrid.js (162414 => 162415)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/DataGrid.js 2014-01-21 02:55:44 UTC (rev 162414)
+++ trunk/Source/WebInspectorUI/UserInterface/DataGrid.js 2014-01-21 02:55:52 UTC (rev 162415)
</span><span class="lines">@@ -87,6 +87,8 @@
</span><span class="cx"> var cell = document.createElement("th");
</span><span class="cx"> cell.className = columnIdentifier + "-column";
</span><span class="cx"> cell.columnIdentifier = columnIdentifier;
</span><ins>+ if (column.aligned)
+ cell.classList.add(column.aligned);
</ins><span class="cx"> this._headerTableHeaders[columnIdentifier] = cell;
</span><span class="cx">
</span><span class="cx"> var div = document.createElement("div");
</span><span class="lines">@@ -1313,7 +1315,10 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> WebInspector.DataGridNode.prototype = {
</span><del>- selectable: true,
</del><ins>+ get selectable()
+ {
+ return !this._element || !this._element.classList.contains("hidden");
+ },
</ins><span class="cx">
</span><span class="cx"> get element()
</span><span class="cx"> {
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceDetailsSectioncss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/DetailsSection.css (162414 => 162415)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/DetailsSection.css 2014-01-21 02:55:44 UTC (rev 162414)
+++ trunk/Source/WebInspectorUI/UserInterface/DetailsSection.css 2014-01-21 02:55:52 UTC (rev 162415)
</span><span class="lines">@@ -48,6 +48,7 @@
</span><span class="cx"> overflow: hidden;
</span><span class="cx"> text-overflow: ellipsis;
</span><span class="cx">
</span><ins>+ font-size: 11px;
</ins><span class="cx"> font-weight: bold;
</span><span class="cx">
</span><span class="cx"> padding: 4px 5px 4px 0;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (162414 => 162415)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2014-01-21 02:55:44 UTC (rev 162414)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2014-01-21 02:55:52 UTC (rev 162415)
</span><span class="lines">@@ -84,6 +84,7 @@
</span><span class="cx"> <link rel="stylesheet" href="TimelineSidebarPanel.css">
</span><span class="cx"> <link rel="stylesheet" href="TimelineContentView.css">
</span><span class="cx"> <link rel="stylesheet" href="OverviewTimelineView.css">
</span><ins>+ <link rel="stylesheet" href="NetworkTimelineView.css">
</ins><span class="cx"> <link rel="stylesheet" href="TimelineIcons.css">
</span><span class="cx"> <link rel="stylesheet" href="TimelineRuler.css">
</span><span class="cx"> <link rel="stylesheet" href="TimelineDataGrid.css">
</span><span class="lines">@@ -277,6 +278,7 @@
</span><span class="cx"> <script src="TimelineContentView.js"></script>
</span><span class="cx"> <script src="TimelineView.js"></script>
</span><span class="cx"> <script src="OverviewTimelineView.js"></script>
</span><ins>+ <script src="NetworkTimelineView.js"></script>
</ins><span class="cx"> <script src="ApplicationCacheDetailsSidebarPanel.js"></script>
</span><span class="cx"> <script src="DOMTreeManager.js"></script>
</span><span class="cx"> <script src="DOMNode.js"></script>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceNetworkTimelineViewcss"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/NetworkTimelineView.css (0 => 162415)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/NetworkTimelineView.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/NetworkTimelineView.css 2014-01-21 02:55:52 UTC (rev 162415)
</span><span class="lines">@@ -0,0 +1,37 @@
</span><ins>+/*
+ * Copyright (C) 2014 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.
+ */
+
+.timeline-view.network > .data-grid {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border: none;
+}
+
+.sidebar > .panel.timeline.timeline-content-view-showing .navigation-sidebar-panel-content-tree-outline.network .item .subtitle {
+ display: none;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceNetworkTimelineViewjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/NetworkTimelineView.js (0 => 162415)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/NetworkTimelineView.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/NetworkTimelineView.js 2014-01-21 02:55:52 UTC (rev 162415)
</span><span class="lines">@@ -0,0 +1,200 @@
</span><ins>+/*
+ * Copyright (C) 2014 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.NetworkTimelineView = function()
+{
+ WebInspector.TimelineView.call(this);
+
+ this.navigationSidebarTreeOutline.onselect = this._treeElementSelected.bind(this);
+ this.navigationSidebarTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
+ this.navigationSidebarTreeOutline.element.classList.add(WebInspector.NetworkTimelineView.TreeOutlineStyleClassName);
+
+ var columns = {domain: {}, type: {}, method: {}, scheme: {}, statusCode: {}, cached: {}, size: {}, transferSize: {}, requestSent: {}, latency: {}, duration: {}};
+
+ columns.domain.title = WebInspector.UIString("Domain");
+ columns.domain.width = "10%";
+
+ columns.type.title = WebInspector.UIString("Type");
+ columns.type.width = "8%";
+ columns.type.scopeBar = WebInspector.TimelineDataGrid.createColumnScopeBar("network", WebInspector.Resource.Type);
+
+ columns.method.title = WebInspector.UIString("Method");
+ columns.method.width = "6%";
+
+ columns.scheme.title = WebInspector.UIString("Scheme");
+ columns.scheme.width = "6%";
+
+ columns.statusCode.title = WebInspector.UIString("Status");
+ columns.statusCode.width = "6%";
+
+ columns.cached.title = WebInspector.UIString("Cached");
+ columns.cached.width = "6%";
+
+ columns.size.title = WebInspector.UIString("Size");
+ columns.size.width = "8%";
+ columns.size.aligned = "right";
+
+ columns.transferSize.title = WebInspector.UIString("Transfered");
+ columns.transferSize.width = "8%";
+ columns.transferSize.aligned = "right";
+
+ columns.requestSent.title = WebInspector.UIString("Start Time");
+ columns.requestSent.width = "9%";
+ columns.requestSent.aligned = "right";
+ columns.requestSent.sort = "ascending";
+
+ columns.latency.title = WebInspector.UIString("Latency");
+ columns.latency.width = "9%";
+ columns.latency.aligned = "right";
+
+ columns.duration.title = WebInspector.UIString("Duration");
+ columns.duration.width = "9%";
+ columns.duration.aligned = "right";
+
+ for (var column in columns)
+ columns[column].sortable = true;
+
+ this._dataGrid = new WebInspector.TimelineDataGrid(this.navigationSidebarTreeOutline, columns);
+ this._dataGrid.addEventListener(WebInspector.TimelineDataGrid.Event.FiltersDidChange, this._dataGridFiltersDidChange, this);
+
+ this.element.classList.add(WebInspector.NetworkTimelineView.StyleClassName);
+ this.element.appendChild(this._dataGrid.element);
+
+ this._pendingRecords = [];
+};
+
+WebInspector.NetworkTimelineView.StyleClassName = "network";
+WebInspector.NetworkTimelineView.TreeOutlineStyleClassName = "network";
+
+WebInspector.NetworkTimelineView.prototype = {
+ constructor: WebInspector.NetworkTimelineView,
+ __proto__: WebInspector.TimelineView.prototype,
+
+ // Public
+
+ get navigationSidebarTreeOutlineLabel()
+ {
+ return WebInspector.UIString("Resources");
+ },
+
+ shown: function()
+ {
+ WebInspector.TimelineView.prototype.shown.call(this);
+
+ this._dataGrid.shown();
+ },
+
+ hidden: function()
+ {
+ this._dataGrid.hidden();
+
+ WebInspector.TimelineView.prototype.hidden.call(this);
+ },
+
+ updateLayout: function()
+ {
+ WebInspector.TimelineView.prototype.updateLayout.call(this);
+
+ this._dataGrid.updateLayout();
+
+ this._processPendingRecords();
+ },
+
+ matchTreeElementAgainstCustomFilters: function(treeElement)
+ {
+ return this._dataGrid.treeElementMatchesActiveScopeFilters(treeElement);
+ },
+
+ reset: function()
+ {
+ WebInspector.TimelineView.prototype.reset.call(this);
+
+ this._dataGrid.reset();
+
+ if (this._networkTimeline)
+ this._networkTimeline.removeEventListener(null, null, this);
+
+ this._networkTimeline = WebInspector.timelineManager.recording.timelines.get(WebInspector.TimelineRecord.Type.Network);
+ console.assert(this._networkTimeline);
+
+ this._networkTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._networkTimelineRecordAdded, this);
+ },
+
+ // Private
+
+ _processPendingRecords: function()
+ {
+ if (!this._pendingRecords.length)
+ return;
+
+ for (var resourceTimelineRecord of this._pendingRecords) {
+ // Skip the record if it already exists in the tree.
+ var treeElement = this.navigationSidebarTreeOutline.findTreeElement(resourceTimelineRecord.resource);
+ if (treeElement)
+ continue;
+
+ treeElement = new WebInspector.ResourceTreeElement(resourceTimelineRecord.resource);
+ var dataGridNode = new WebInspector.ResourceTimelineDataGridNode(resourceTimelineRecord, false, this);
+
+ this._dataGrid.addRowInSortOrder(treeElement, dataGridNode);
+ }
+
+ this._pendingRecords = [];
+ },
+
+ _networkTimelineRecordAdded: function(event)
+ {
+ var resourceTimelineRecord = event.data.record;
+ console.assert(resourceTimelineRecord instanceof WebInspector.ResourceTimelineRecord);
+
+ this._pendingRecords.push(resourceTimelineRecord);
+
+ this.needsLayout();
+ },
+
+ _dataGridFiltersDidChange: function(event)
+ {
+ WebInspector.timelineSidebarPanel.updateFilter();
+ },
+
+ _treeElementSelected: function(treeElement, selectedByUser)
+ {
+ if (this._dataGrid.shouldIgnoreSelectionEvent())
+ return;
+
+ if (!WebInspector.timelineSidebarPanel.canShowDifferentContentView())
+ return;
+
+ if (treeElement instanceof WebInspector.FolderTreeElement)
+ return;
+
+ if (treeElement instanceof WebInspector.ResourceTreeElement || treeElement instanceof WebInspector.ScriptTreeElement) {
+ WebInspector.resourceSidebarPanel.showSourceCode(treeElement.representedObject);
+ return;
+ }
+
+ console.error("Unknown tree element selected.");
+ }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceResourceTimelineDataGridNodejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/ResourceTimelineDataGridNode.js (162414 => 162415)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/ResourceTimelineDataGridNode.js 2014-01-21 02:55:44 UTC (rev 162414)
+++ trunk/Source/WebInspectorUI/UserInterface/ResourceTimelineDataGridNode.js 2014-01-21 02:55:52 UTC (rev 162415)
</span><span class="lines">@@ -168,6 +168,11 @@
</span><span class="cx">
</span><span class="cx"> _needsRefresh: function()
</span><span class="cx"> {
</span><ins>+ if (this.dataGrid instanceof WebInspector.TimelineDataGrid) {
+ this.dataGrid.dataGridNodeNeedsRefresh(this);
+ return;
+ }
+
</ins><span class="cx"> if (this._scheduledRefreshIdentifier)
</span><span class="cx"> return;
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceTimelineContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/TimelineContentView.js (162414 => 162415)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/TimelineContentView.js 2014-01-21 02:55:44 UTC (rev 162414)
+++ trunk/Source/WebInspectorUI/UserInterface/TimelineContentView.js 2014-01-21 02:55:52 UTC (rev 162415)
</span><span class="lines">@@ -42,7 +42,7 @@
</span><span class="cx">
</span><span class="cx"> this._overviewTimelineView = new WebInspector.OverviewTimelineView;
</span><span class="cx"> this._discreteTimelineViewMap = {
</span><del>- [WebInspector.TimelineRecord.Type.Network]: new WebInspector.TimelineView,
</del><ins>+ [WebInspector.TimelineRecord.Type.Network]: new WebInspector.NetworkTimelineView,
</ins><span class="cx"> [WebInspector.TimelineRecord.Type.Layout]: new WebInspector.TimelineView,
</span><span class="cx"> [WebInspector.TimelineRecord.Type.Script]: new WebInspector.TimelineView
</span><span class="cx"> };
</span><span class="lines">@@ -151,6 +151,9 @@
</span><span class="cx">
</span><span class="cx"> matchTreeElementAgainstCustomFilters: function(treeElement)
</span><span class="cx"> {
</span><ins>+ if (this._currentTimelineView && !this._currentTimelineView.matchTreeElementAgainstCustomFilters(treeElement))
+ return false;
+
</ins><span class="cx"> var startTime = this._timelineOverview.selectionStartTime;
</span><span class="cx"> var endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
</span><span class="cx"> var currentTime = this._currentTimeMarker.time || WebInspector.timelineManager.recording.startTime;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceTimelineDataGridcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/TimelineDataGrid.css (162414 => 162415)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/TimelineDataGrid.css 2014-01-21 02:55:44 UTC (rev 162414)
+++ trunk/Source/WebInspectorUI/UserInterface/TimelineDataGrid.css 2014-01-21 02:55:52 UTC (rev 162415)
</span><span class="lines">@@ -23,6 +23,118 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><ins>+.data-grid.timeline {
+ border: none;
+}
+
+.data-grid.timeline table {
+ font-size: 11px;
+}
+
+.data-grid.timeline th {
+ height: 22px;
+
+ font-size: 11px;
+ font-family: "Lucida Grande", sans-serif;
+
+ background-image: none;
+ background-color: white;
+
+ border-top: 1px solid rgb(179, 179, 179) !important;
+ border-bottom: 1px solid rgb(179, 179, 179) !important;
+}
+
+.data-grid.timeline th:not(:last-child) {
+ border-right: 1px solid rgb(179, 179, 179);
+}
+
+.data-grid.timeline th.sortable:active {
+ background-image: none !important;
+ background-color: rgb(210, 210, 210);
+}
+
+.data-grid.timeline th.sort-ascending,
+.data-grid.timeline th.sort-descending {
+ background-image: none !important;
+ background-color: rgb(230, 230, 230);
+}
+
+.data-grid.timeline .data-container {
+ top: 23px;
+}
+
+.data-grid.timeline th,
+.data-grid.timeline td {
+ padding-left: 6px;
+ padding-right: 6px;
+}
+
+.data-grid.timeline td:last-child {
+ padding-right: 12px;
+}
+
+.data-grid.timeline td {
+ padding-top: 2px;
+ padding-bottom: 2px;
+ line-height: 17px;
+}
+
+.data-grid.timeline td:not(:last-child) {
+ border-right: 1px solid rgb(179, 179, 179);
+}
+
+.data-grid.timeline:focus tr.selected td:not(:last-child) {
+ border-right-color: rgb(53, 109, 189);
+}
+
+.data-grid.timeline th.sort-ascending > div:first-child,
+.data-grid.timeline th.sort-descending > div:first-child {
+ padding-right: 13px;
+}
+
+.data-grid.timeline th.sort-ascending > div:first-child::after,
+.data-grid.timeline th.sort-descending > div:first-child::after {
+ top: 1px;
+}
+
+.data-grid.timeline td.error {
+ color: rgb(224, 16, 16);
+}
+
+.data-grid.timeline tr.selected td.error {
+ color: inherit;
+}
+
+.data-grid.timeline > .navigation-bar-container {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 32px;
+
+ pointer-events: none;
+ visibility: hidden;
+}
+
+.data-grid.timeline:hover > .navigation-bar-container {
+ pointer-events: all;
+ visibility: visible;
+}
+
+.data-grid.timeline > .navigation-bar-container > .navigation-bar {
+ position: absolute;
+ top: 10px;
+ left: 0;
+ right: 0;
+ height: 22px;
+
+ border-bottom: none;
+ border-top: 1px solid rgb(200, 200, 200);
+ box-shadow: none;
+
+ background-color: white;
+}
+
</ins><span class="cx"> .timeline-data-grid-tree-outline {
</span><span class="cx"> position: relative;
</span><span class="cx"> padding: 0;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceTimelineDataGridjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/TimelineDataGrid.js (162414 => 162415)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/TimelineDataGrid.js 2014-01-21 02:55:44 UTC (rev 162414)
+++ trunk/Source/WebInspectorUI/UserInterface/TimelineDataGrid.js 2014-01-21 02:55:52 UTC (rev 162415)
</span><span class="lines">@@ -23,37 +23,46 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.TimelineDataGrid = function(columns, editCallback, deleteCallback)
</del><ins>+WebInspector.TimelineDataGrid = function(treeOutline, columns, editCallback, deleteCallback)
</ins><span class="cx"> {
</span><span class="cx"> WebInspector.DataGrid.call(this, columns, editCallback, deleteCallback);
</span><span class="cx">
</span><del>- this.filterableColumns = [];
</del><ins>+ this._treeOutlineDataGridSynchronizer = new WebInspector.TreeOutlineDataGridSynchronizer(treeOutline, this);
</ins><span class="cx">
</span><ins>+ this.element.classList.add(WebInspector.TimelineDataGrid.StyleClassName);
+
+ this._filterableColumns = [];
+
</ins><span class="cx"> // Check if any of the cells can be filtered.
</span><span class="cx"> for (var identifier in columns) {
</span><span class="cx"> var scopeBar = columns[identifier].scopeBar;
</span><span class="cx"> if (!scopeBar)
</span><span class="cx"> continue;
</span><del>- this.filterableColumns.push(identifier);
</del><ins>+ this._filterableColumns.push(identifier);
</ins><span class="cx"> scopeBar.columnIdenfifier = identifier;
</span><span class="cx"> scopeBar.addEventListener(WebInspector.ScopeBar.Event.SelectionChanged, this._scopeBarSelectedItemsDidChange, this);
</span><span class="cx"> }
</span><span class="cx">
</span><del>- if (this.filterableColumns.length > 1) {
</del><ins>+ if (this._filterableColumns.length > 1) {
</ins><span class="cx"> console.error("Creating a TimelineDataGrid with more than one filterable column is not yet supported.");
</span><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- var items = [new WebInspector.FlexibleSpaceNavigationItem, this.columns[this.filterableColumns[0]].scopeBar];
- this._navigationBar = new WebInspector.NavigationBar(null, items);
- var container = this.element.appendChild(document.createElement("div"));
- container.className = "navigation-bar-container";
- container.appendChild(this._navigationBar.element);
</del><ins>+ if (this._filterableColumns.length) {
+ var items = [new WebInspector.FlexibleSpaceNavigationItem, this.columns[this._filterableColumns[0]].scopeBar, new WebInspector.FlexibleSpaceNavigationItem];
+ this._navigationBar = new WebInspector.NavigationBar(null, items);
+ var container = this.element.appendChild(document.createElement("div"));
+ container.className = "navigation-bar-container";
+ container.appendChild(this._navigationBar.element);
+ }
</ins><span class="cx">
</span><span class="cx"> this.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridSelectedNodeChanged, this);
</span><ins>+ this.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._sort, this);
+
</ins><span class="cx"> window.addEventListener("resize", this._windowResized.bind(this));
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+WebInspector.TimelineDataGrid.StyleClassName = "timeline";
</ins><span class="cx"> WebInspector.TimelineDataGrid.DelayedPopoverShowTimeout = 250;
</span><span class="cx"> WebInspector.TimelineDataGrid.DelayedPopoverHideContentClearTimeout = 500;
</span><span class="cx">
</span><span class="lines">@@ -61,76 +70,249 @@
</span><span class="cx"> FiltersDidChange: "timelinedatagrid-filters-did-change"
</span><span class="cx"> };
</span><span class="cx">
</span><ins>+WebInspector.TimelineDataGrid.createColumnScopeBar = function(prefix, dictionary)
+{
+ prefix = prefix + "-timeline-data-grid-";
+
+ var keys = Object.keys(dictionary).filter(function(key) {
+ return typeof dictionary[key] === "string" || dictionary[key] instanceof String;
+ });
+
+ var scopeBarItems = keys.map(function(key) {
+ var value = dictionary[key];
+ var id = prefix + value;
+ var label = dictionary.displayName(value, true);
+ var item = new WebInspector.ScopeBarItem(id, label);
+ item.value = value;
+ return item;
+ });
+
+ scopeBarItems.unshift(new WebInspector.ScopeBarItem(prefix + "type-all", WebInspector.UIString("All"), true));
+
+ return new WebInspector.ScopeBar(prefix + "scope-bar", scopeBarItems, scopeBarItems[0]);
+};
+
</ins><span class="cx"> WebInspector.TimelineDataGrid.prototype = {
</span><span class="cx"> constructor: WebInspector.TimelineDataGrid,
</span><ins>+ __proto__: WebInspector.DataGrid.prototype,
</ins><span class="cx">
</span><span class="cx"> // Public
</span><span class="cx">
</span><del>- get currentCalculator()
</del><ins>+ reset: function()
</ins><span class="cx"> {
</span><del>- // Implemented by subclasses if they have a graph.
- return null;
- },
</del><ins>+ // May be overridden by subclasses. If so, they should call the superclass.
</ins><span class="cx">
</span><del>- updateCalculatorBoundariesWithRecord: function(record)
- {
- // Implemented by subclasses if they have a graph.
</del><ins>+ this._hidePopover();
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- updateCalculatorBoundariesWithDataGridNode: function(node)
</del><ins>+ shown: function()
</ins><span class="cx"> {
</span><del>- // Implemented by subclasses if they have a graph.
- },
</del><ins>+ // May be overridden by subclasses. If so, they should call the superclass.
</ins><span class="cx">
</span><del>- updateCalculatorBoundariesWithEventMarker: function(eventMarker)
- {
- // Implemented by subclasses if they have a graph.
</del><ins>+ this._treeOutlineDataGridSynchronizer.synchronize();
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- reset: function()
</del><ins>+ hidden: function()
</ins><span class="cx"> {
</span><span class="cx"> // May be overridden by subclasses. If so, they should call the superclass.
</span><span class="cx">
</span><span class="cx"> this._hidePopover();
</span><span class="cx"> },
</span><span class="cx">
</span><del>- shown: function()
</del><ins>+ callFramePopoverAnchorElement: function()
</ins><span class="cx"> {
</span><span class="cx"> // Implemented by subclasses.
</span><ins>+ return null;
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- hidden: function()
</del><ins>+ updateLayout: function()
</ins><span class="cx"> {
</span><del>- // May be overridden by subclasses. If so, they should call the superclass.
</del><ins>+ WebInspector.DataGrid.prototype.updateLayout.call(this);
</ins><span class="cx">
</span><del>- this._hidePopover();
</del><ins>+ if (this._navigationBar)
+ this._navigationBar.updateLayout();
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- update: function()
</del><ins>+ treeElementMatchesActiveScopeFilters: function(treeElement)
</ins><span class="cx"> {
</span><del>- // Implemented by subclasses.
</del><ins>+ var dataGridNode = this._treeOutlineDataGridSynchronizer.dataGridNodeForTreeElement(treeElement);
+ console.assert(dataGridNode);
+
+ for (var identifier of this._filterableColumns) {
+ var scopeBar = this.columns[identifier].scopeBar;
+ if (!scopeBar || scopeBar.defaultItem.selected)
+ continue;
+
+ var value = dataGridNode.data[identifier];
+ var matchesFilter = scopeBar.selectedItems.some(function(scopeBarItem) {
+ return scopeBarItem.value === value;
+ });
+
+ if (!matchesFilter)
+ return false;
+ }
+
+ return true;
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- addTimelineEventMarker: function(eventMarker)
</del><ins>+ addRowInSortOrder: function(treeElement, dataGridNode)
</ins><span class="cx"> {
</span><del>- // Implemented by subclasses.
</del><ins>+ this._treeOutlineDataGridSynchronizer.associate(treeElement, dataGridNode);
+
+ var treeOutline = this._treeOutlineDataGridSynchronizer.treeOutline;
+
+ if (this.sortColumnIdentifier) {
+ var insertionIndex = insertionIndexForObjectInListSortedByFunction(dataGridNode, this.children, this._sortComparator.bind(this));
+
+ // Insert into the tree outline, which will cause the synchronizer to insert into the data grid.
+ treeOutline.insertChild(treeElement, insertionIndex);
+ } else {
+ // Append to the tree outline, which will cause the synchronizer to append to the data grid.
+ treeOutline.appendChild(treeElement);
+ }
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- callFramePopoverAnchorElement: function()
</del><ins>+ shouldIgnoreSelectionEvent: function()
</ins><span class="cx"> {
</span><del>- // Implemented by subclasses.
- return null;
</del><ins>+ return this._ignoreSelectionEvent || false;
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- updateLayout: function()
</del><ins>+ // Protected
+
+ dataGridNodeNeedsRefresh: function(dataGridNode)
</ins><span class="cx"> {
</span><del>- WebInspector.DataGrid.prototype.updateLayout.call(this);
</del><ins>+ if (!this._dirtyDataGridNodes)
+ this._dirtyDataGridNodes = new Set;
+ this._dirtyDataGridNodes.add(dataGridNode);
</ins><span class="cx">
</span><del>- this._navigationBar.updateLayout();
</del><ins>+ if (this._scheduledDataGridNodeRefreshIdentifier)
+ return;
+
+ this._scheduledDataGridNodeRefreshIdentifier = requestAnimationFrame(this._refreshDirtyDataGridNodes.bind(this));
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> // Private
</span><span class="cx">
</span><ins>+ _refreshDirtyDataGridNodes: function()
+ {
+ if (this._scheduledDataGridNodeRefreshIdentifier) {
+ cancelAnimationFrame(this._scheduledDataGridNodeRefreshIdentifier);
+ delete this._scheduledDataGridNodeRefreshIdentifier;
+ }
+
+ if (!this._dirtyDataGridNodes)
+ return;
+
+ var selectedNode = this.selectedNode;
+ var sortComparator = this._sortComparator.bind(this);
+ var treeOutline = this._treeOutlineDataGridSynchronizer.treeOutline;
+
+ this._treeOutlineDataGridSynchronizer.enabled = false;
+
+ for (var dataGridNode of this._dirtyDataGridNodes) {
+ dataGridNode.refresh();
+
+ if (!this.sortColumnIdentifier)
+ continue;
+
+ if (dataGridNode === selectedNode)
+ this._ignoreSelectionEvent = true;
+
+ var treeElement = this._treeOutlineDataGridSynchronizer.treeElementForDataGridNode(dataGridNode);
+ console.assert(treeElement);
+
+ treeOutline.removeChild(treeElement);
+ this.removeChild(dataGridNode);
+
+ var insertionIndex = insertionIndexForObjectInListSortedByFunction(dataGridNode, this.children, sortComparator);
+ treeOutline.insertChild(treeElement, insertionIndex);
+ this.insertChild(dataGridNode, insertionIndex);
+
+ if (dataGridNode === selectedNode) {
+ selectedNode.revealAndSelect();
+ delete this._ignoreSelectionEvent;
+ }
+ }
+
+ this._treeOutlineDataGridSynchronizer.enabled = true;
+
+ delete this._dirtyDataGridNodes;
+ },
+
+ _sort: function()
+ {
+ var sortColumnIdentifier = this.sortColumnIdentifier;
+ if (!sortColumnIdentifier)
+ return;
+
+ var selectedNode = this.selectedNode;
+ this._ignoreSelectionEvent = true;
+
+ var dataGridNodes = this.children.slice();
+ dataGridNodes.sort(this._sortComparator.bind(this));
+
+ this._treeOutlineDataGridSynchronizer.enabled = false;
+
+ var treeOutline = this._treeOutlineDataGridSynchronizer.treeOutline;
+
+ this.removeChildren();
+ treeOutline.removeChildren();
+
+ for (var dataGridNode of dataGridNodes) {
+ var treeElement = this._treeOutlineDataGridSynchronizer.treeElementForDataGridNode(dataGridNode);
+ console.assert(treeElement);
+
+ treeOutline.appendChild(treeElement);
+ this.appendChild(dataGridNode);
+ }
+
+ this._treeOutlineDataGridSynchronizer.enabled = true;
+
+ if (selectedNode)
+ selectedNode.revealAndSelect();
+
+ delete this._ignoreSelectionEvent;
+ },
+
+ _sortComparator: function(node1, node2)
+ {
+ var sortColumnIdentifier = this.sortColumnIdentifier;
+ if (!sortColumnIdentifier)
+ return 0;
+
+ var sortDirection = this.sortOrder === "ascending" ? 1 : -1;
+
+ var value1 = node1.data[sortColumnIdentifier];
+ var value2 = node2.data[sortColumnIdentifier];
+
+ if (typeof value1 === "number" && typeof value2 === "number") {
+ if (isNaN(value1) && isNaN(value2))
+ return 0;
+ if (isNaN(value1))
+ return -sortDirection;
+ if (isNaN(value2))
+ return sortDirection;
+ return (value1 - value2) * sortDirection;
+ }
+
+ if (typeof value1 === "string" && typeof value2 === "string")
+ return value1.localeCompare(value2) * sortDirection;
+
+ if (value1 instanceof WebInspector.CallFrame || value2 instanceof WebInspector.CallFrame) {
+ // Sort by function name if available, then fall back to the source code object.
+ value1 = value1 && value1.functionName ? value1.functionName : (value1 && value1.sourceCodeLocation ? value1.sourceCodeLocation.sourceCode : "");
+ value2 = value2 && value2.functionName ? value2.functionName : (value2 && value2.sourceCodeLocation ? value2.sourceCodeLocation.sourceCode : "");
+ }
+
+ if (value1 instanceof WebInspector.SourceCode || value2 instanceof WebInspector.SourceCode) {
+ value1 = value1 ? value1.displayName || "" : "";
+ value2 = value2 ? value2.displayName || "" : "";
+ }
+
+ // For everything else (mostly booleans).
+ return (value1 < value2 ? -1 : (value1 > value2 ? 1 : 0)) * sortDirection;
+ },
+
</ins><span class="cx"> _scopeBarSelectedItemsDidChange: function(event)
</span><span class="cx"> {
</span><span class="cx"> var columnIdentifier = event.target.columnIdenfifier;
</span><span class="lines">@@ -256,6 +438,4 @@
</span><span class="cx">
</span><span class="cx"> WebInspector.resourceSidebarPanel.showSourceCodeLocation(callFrame.sourceCodeLocation);
</span><span class="cx"> }
</span><del>-}
-
-WebInspector.TimelineDataGrid.prototype.__proto__ = WebInspector.DataGrid.prototype;
</del><ins>+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceTimelineSidebarPanelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/TimelineSidebarPanel.css (162414 => 162415)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/TimelineSidebarPanel.css 2014-01-21 02:55:44 UTC (rev 162414)
+++ trunk/Source/WebInspectorUI/UserInterface/TimelineSidebarPanel.css 2014-01-21 02:55:52 UTC (rev 162415)
</span><span class="lines">@@ -47,7 +47,7 @@
</span><span class="cx"> overflow: hidden;
</span><span class="cx"> text-overflow: ellipsis;
</span><span class="cx">
</span><del>- font-size: 10px;
</del><ins>+ font-size: 11px;
</ins><span class="cx"> font-family: "Lucida Grande", sans-serif;
</span><span class="cx"> font-weight: bold;
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceTimelineViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/TimelineView.js (162414 => 162415)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/TimelineView.js 2014-01-21 02:55:44 UTC (rev 162414)
+++ trunk/Source/WebInspectorUI/UserInterface/TimelineView.js 2014-01-21 02:55:52 UTC (rev 162415)
</span><span class="lines">@@ -151,6 +151,12 @@
</span><span class="cx"> this._visible = false;
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ matchTreeElementAgainstCustomFilters: function(treeElement)
+ {
+ // Implemented by sub-classes if needed.
+ return true;
+ },
+
</ins><span class="cx"> updateLayout: function()
</span><span class="cx"> {
</span><span class="cx"> if (this._scheduledLayoutUpdateIdentifier) {
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceTreeOutlineDataGridSynchronizerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/TreeOutlineDataGridSynchronizer.js (162414 => 162415)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/TreeOutlineDataGridSynchronizer.js 2014-01-21 02:55:44 UTC (rev 162414)
+++ trunk/Source/WebInspectorUI/UserInterface/TreeOutlineDataGridSynchronizer.js 2014-01-21 02:55:52 UTC (rev 162415)
</span><span class="lines">@@ -29,6 +29,7 @@
</span><span class="cx">
</span><span class="cx"> this._treeOutline = treeOutline;
</span><span class="cx"> this._dataGrid = dataGrid;
</span><ins>+ this._enabled = true;
</ins><span class="cx">
</span><span class="cx"> this._treeOutline.element.parentNode.addEventListener("scroll", this._treeOutlineScrolled.bind(this));
</span><span class="cx"> this._dataGrid.scrollContainer.addEventListener("scroll", this._dataGridScrolled.bind(this));
</span><span class="lines">@@ -90,6 +91,26 @@
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="cx">
</span><ins>+ get treeOutline()
+ {
+ return this._treeOutline;
+ },
+
+ get dataGrid()
+ {
+ return this._dataGrid;
+ },
+
+ get enabled()
+ {
+ return this._enabled;
+ },
+
+ set enabled(x)
+ {
+ this._enabled = x || false;
+ },
+
</ins><span class="cx"> associate: function(treeElement, dataGridNode)
</span><span class="cx"> {
</span><span class="cx"> console.assert(treeElement);
</span><span class="lines">@@ -108,10 +129,23 @@
</span><span class="cx"> this._dataGrid.selectedNode.deselect(true);
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ treeElementForDataGridNode: function(dataGridNode)
+ {
+ return dataGridNode.__treeElement || null;
+ },
+
+ dataGridNodeForTreeElement: function(treeElement)
+ {
+ return treeElement.__dataGridNode || null;
+ },
+
</ins><span class="cx"> // Private
</span><span class="cx">
</span><span class="cx"> _treeOutlineScrolled: function(event)
</span><span class="cx"> {
</span><ins>+ if (!this._enabled)
+ return;
+
</ins><span class="cx"> if (this._ignoreNextTreeOutlineScrollEvent) {
</span><span class="cx"> delete this._ignoreNextTreeOutlineScrollEvent;
</span><span class="cx"> return;
</span><span class="lines">@@ -123,6 +157,9 @@
</span><span class="cx">
</span><span class="cx"> _dataGridScrolled: function(event)
</span><span class="cx"> {
</span><ins>+ if (!this._enabled)
+ return;
+
</ins><span class="cx"> if (this._ignoreNextDataGridScrollEvent) {
</span><span class="cx"> delete this._ignoreNextDataGridScrollEvent;
</span><span class="cx"> return;
</span><span class="lines">@@ -134,6 +171,9 @@
</span><span class="cx">
</span><span class="cx"> _dataGridNodeSelected: function(event)
</span><span class="cx"> {
</span><ins>+ if (!this._enabled)
+ return;
+
</ins><span class="cx"> var dataGridNode = this._dataGrid.selectedNode;
</span><span class="cx"> if (dataGridNode)
</span><span class="cx"> dataGridNode.__treeElement.select(true, true, true, true);
</span><span class="lines">@@ -141,6 +181,9 @@
</span><span class="cx">
</span><span class="cx"> _dataGridNodeExpanded: function(event)
</span><span class="cx"> {
</span><ins>+ if (!this._enabled)
+ return;
+
</ins><span class="cx"> var dataGridNode = event.data.dataGridNode;
</span><span class="cx"> console.assert(dataGridNode);
</span><span class="cx">
</span><span class="lines">@@ -150,6 +193,9 @@
</span><span class="cx">
</span><span class="cx"> _dataGridNodeCollapsed: function(event)
</span><span class="cx"> {
</span><ins>+ if (!this._enabled)
+ return;
+
</ins><span class="cx"> var dataGridNode = event.data.dataGridNode;
</span><span class="cx"> console.assert(dataGridNode);
</span><span class="cx">
</span><span class="lines">@@ -159,6 +205,9 @@
</span><span class="cx">
</span><span class="cx"> _treeElementSelected: function(treeElement, selectedByUser)
</span><span class="cx"> {
</span><ins>+ if (!this._enabled)
+ return;
+
</ins><span class="cx"> var dataGridNode = treeElement.__dataGridNode;
</span><span class="cx"> console.assert(dataGridNode);
</span><span class="cx">
</span><span class="lines">@@ -167,6 +216,9 @@
</span><span class="cx">
</span><span class="cx"> _treeElementAdded: function(treeElement)
</span><span class="cx"> {
</span><ins>+ if (!this._enabled)
+ return;
+
</ins><span class="cx"> var dataGridNode = treeElement.__dataGridNode;
</span><span class="cx"> console.assert(dataGridNode);
</span><span class="cx">
</span><span class="lines">@@ -181,14 +233,21 @@
</span><span class="cx">
</span><span class="cx"> _treeElementRemoved: function(treeElement)
</span><span class="cx"> {
</span><ins>+ if (!this._enabled)
+ return;
+
</ins><span class="cx"> var dataGridNode = treeElement.__dataGridNode;
</span><span class="cx"> console.assert(dataGridNode);
</span><span class="cx">
</span><del>- dataGridNode.parent.removeChild(dataGridNode);
</del><ins>+ if (dataGridNode.parent)
+ dataGridNode.parent.removeChild(dataGridNode);
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> _treeElementExpanded: function(treeElement)
</span><span class="cx"> {
</span><ins>+ if (!this._enabled)
+ return;
+
</ins><span class="cx"> var dataGridNode = treeElement.__dataGridNode;
</span><span class="cx"> console.assert(dataGridNode);
</span><span class="cx">
</span><span class="lines">@@ -198,6 +257,9 @@
</span><span class="cx">
</span><span class="cx"> _treeElementCollapsed: function(treeElement)
</span><span class="cx"> {
</span><ins>+ if (!this._enabled)
+ return;
+
</ins><span class="cx"> var dataGridNode = treeElement.__dataGridNode;
</span><span class="cx"> console.assert(dataGridNode);
</span><span class="cx">
</span><span class="lines">@@ -207,13 +269,13 @@
</span><span class="cx">
</span><span class="cx"> _treeElementHiddenChanged: function(treeElement, hidden)
</span><span class="cx"> {
</span><ins>+ if (!this._enabled)
+ return;
+
</ins><span class="cx"> var dataGridNode = treeElement.__dataGridNode;
</span><span class="cx"> console.assert(dataGridNode);
</span><span class="cx">
</span><del>- if (hidden)
- dataGridNode.element.classList.add("hidden");
- else
- dataGridNode.element.classList.remove("hidden");
</del><ins>+ dataGridNode.element.classList.toggle("hidden", hidden);
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre>
</div>
</div>
</body>
</html>