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.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@162415 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog

+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.
+
 2014-01-13  Timothy Hatcher  <timothy@apple.com>
 
         Filter the Timeline overview graph and sidebar based on the current time selection.

Source/WebInspectorUI/UserInterface/DataGrid.js

@@ -87,6 +87,8 @@ WebInspector.DataGrid = function(columns, editCallback, deleteCallback)
         var cell = document.createElement("th");
         cell.className = columnIdentifier + "-column";
         cell.columnIdentifier = columnIdentifier;
+        if (column.aligned)
+            cell.classList.add(column.aligned);
         this._headerTableHeaders[columnIdentifier] = cell;
 
         var div = document.createElement("div");
@@ -1313,7 +1315,10 @@ WebInspector.DataGridNode = function(data, hasChildren)
 }
 
 WebInspector.DataGridNode.prototype = {
-    selectable: true,
+    get selectable()
+    {
+        return !this._element || !this._element.classList.contains("hidden");
+    },
 
     get element()
     {

Source/WebInspectorUI/UserInterface/DetailsSection.css

@@ -48,6 +48,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
 
+    font-size: 11px;
     font-weight: bold;
 
     padding: 4px 5px 4px 0;

Source/WebInspectorUI/UserInterface/Main.html

@@ -84,6 +84,7 @@
     <link rel="stylesheet" href="TimelineSidebarPanel.css">
     <link rel="stylesheet" href="TimelineContentView.css">
     <link rel="stylesheet" href="OverviewTimelineView.css">
+    <link rel="stylesheet" href="NetworkTimelineView.css">
     <link rel="stylesheet" href="TimelineIcons.css">
     <link rel="stylesheet" href="TimelineRuler.css">
     <link rel="stylesheet" href="TimelineDataGrid.css">
@@ -277,6 +278,7 @@
     <script src="TimelineContentView.js"></script>
     <script src="TimelineView.js"></script>
     <script src="OverviewTimelineView.js"></script>
+    <script src="NetworkTimelineView.js"></script>
     <script src="ApplicationCacheDetailsSidebarPanel.js"></script>
     <script src="DOMTreeManager.js"></script>
     <script src="DOMNode.js"></script>

Source/WebInspectorUI/UserInterface/NetworkTimelineView.css

+/*
+ * 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;
+}

Source/WebInspectorUI/UserInterface/NetworkTimelineView.js

+/*
+ * 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.");
+    }
+};

Source/WebInspectorUI/UserInterface/ResourceTimelineDataGridNode.js

@@ -168,6 +168,11 @@ WebInspector.ResourceTimelineDataGridNode.prototype = {
 
     _needsRefresh: function()
     {
+        if (this.dataGrid instanceof WebInspector.TimelineDataGrid) {
+            this.dataGrid.dataGridNodeNeedsRefresh(this);
+            return;
+        }
+
         if (this._scheduledRefreshIdentifier)
             return;
 

Source/WebInspectorUI/UserInterface/TimelineContentView.js

@@ -42,7 +42,7 @@ WebInspector.TimelineContentView = function(recording)
 
     this._overviewTimelineView = new WebInspector.OverviewTimelineView;
     this._discreteTimelineViewMap = {
-        [WebInspector.TimelineRecord.Type.Network]: new WebInspector.TimelineView,
+        [WebInspector.TimelineRecord.Type.Network]: new WebInspector.NetworkTimelineView,
         [WebInspector.TimelineRecord.Type.Layout]: new WebInspector.TimelineView,
         [WebInspector.TimelineRecord.Type.Script]: new WebInspector.TimelineView
     };
@@ -151,6 +151,9 @@ WebInspector.TimelineContentView.prototype = {
 
     matchTreeElementAgainstCustomFilters: function(treeElement)
     {
+        if (this._currentTimelineView && !this._currentTimelineView.matchTreeElementAgainstCustomFilters(treeElement))
+            return false;
+
         var startTime = this._timelineOverview.selectionStartTime;
         var endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
         var currentTime = this._currentTimeMarker.time || WebInspector.timelineManager.recording.startTime;

Source/WebInspectorUI/UserInterface/TimelineDataGrid.css

@@ -23,6 +23,118 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+.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;
+}
+
 .timeline-data-grid-tree-outline {
     position: relative;
     padding: 0;

Source/WebInspectorUI/UserInterface/TimelineSidebarPanel.css

@@ -47,7 +47,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
 
-    font-size: 10px;
+    font-size: 11px;
     font-family: "Lucida Grande", sans-serif;
     font-weight: bold;
 

Source/WebInspectorUI/UserInterface/TimelineView.js

@@ -151,6 +151,12 @@ WebInspector.TimelineView.prototype = {
         this._visible = false;
     },
 
+    matchTreeElementAgainstCustomFilters: function(treeElement)
+    {
+        // Implemented by sub-classes if needed.
+        return true;
+    },
+
     updateLayout: function()
     {
         if (this._scheduledLayoutUpdateIdentifier) {

Source/WebInspectorUI/UserInterface/TreeOutlineDataGridSynchronizer.js

@@ -29,6 +29,7 @@ WebInspector.TreeOutlineDataGridSynchronizer = function(treeOutline, dataGrid)
 
     this._treeOutline = treeOutline;
     this._dataGrid = dataGrid;
+    this._enabled = true;
 
     this._treeOutline.element.parentNode.addEventListener("scroll", this._treeOutlineScrolled.bind(this));
     this._dataGrid.scrollContainer.addEventListener("scroll", this._dataGridScrolled.bind(this));
@@ -90,6 +91,26 @@ WebInspector.TreeOutlineDataGridSynchronizer.prototype = {
 
     // Public
 
+    get treeOutline()
+    {
+        return this._treeOutline;
+    },
+
+    get dataGrid()
+    {
+        return this._dataGrid;
+    },
+
+    get enabled()
+    {
+        return this._enabled;
+    },
+
+    set enabled(x)
+    {
+        this._enabled = x || false;
+    },
+
     associate: function(treeElement, dataGridNode)
     {
         console.assert(treeElement);
@@ -108,10 +129,23 @@ WebInspector.TreeOutlineDataGridSynchronizer.prototype = {
             this._dataGrid.selectedNode.deselect(true);
     },
 
+    treeElementForDataGridNode: function(dataGridNode)
+    {
+        return dataGridNode.__treeElement || null;
+    },
+
+    dataGridNodeForTreeElement: function(treeElement)
+    {
+        return treeElement.__dataGridNode || null;
+    },
+
     // Private
 
     _treeOutlineScrolled: function(event)
     {
+        if (!this._enabled)
+            return;
+
         if (this._ignoreNextTreeOutlineScrollEvent) {
             delete this._ignoreNextTreeOutlineScrollEvent;
             return;
@@ -123,6 +157,9 @@ WebInspector.TreeOutlineDataGridSynchronizer.prototype = {
 
     _dataGridScrolled: function(event)
     {
+        if (!this._enabled)
+            return;
+
         if (this._ignoreNextDataGridScrollEvent) {
             delete this._ignoreNextDataGridScrollEvent;
             return;
@@ -134,6 +171,9 @@ WebInspector.TreeOutlineDataGridSynchronizer.prototype = {
 
     _dataGridNodeSelected: function(event)
     {
+        if (!this._enabled)
+            return;
+
         var dataGridNode = this._dataGrid.selectedNode;
         if (dataGridNode)
             dataGridNode.__treeElement.select(true, true, true, true);
@@ -141,6 +181,9 @@ WebInspector.TreeOutlineDataGridSynchronizer.prototype = {
 
     _dataGridNodeExpanded: function(event)
     {
+        if (!this._enabled)
+            return;
+
         var dataGridNode = event.data.dataGridNode;