Commit 430bc05b authored by timothy@apple.com's avatar 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.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@162415 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 16627bc9
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.
......
......@@ -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()
{
......
......@@ -48,6 +48,7 @@
overflow: hidden;
text-overflow: ellipsis;
font-size: 11px;
font-weight: bold;
padding: 4px 5px 4px 0;
......
......@@ -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>
......
/*
* 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;
}
/*
* 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.");
}
};
......@@ -168,6 +168,11 @@ WebInspector.ResourceTimelineDataGridNode.prototype = {
_needsRefresh: function()
{
if (this.dataGrid instanceof WebInspector.TimelineDataGrid) {
this.dataGrid.dataGridNodeNeedsRefresh(this);
return;
}
if (this._scheduledRefreshIdentifier)
return;
......
......@@ -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;
......
......@@ -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;
......
......@@ -47,7 +47,7 @@
overflow: hidden;
text-overflow: ellipsis;
font-size: 10px;
font-size: 11px;
font-family: "Lucida Grande", sans-serif;
font-weight: bold;
......
......@@ -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) {
......
......@@ -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;
console.assert(dataGridNode);
......@@ -150,6 +193,9 @@ WebInspector.TreeOutlineDataGridSynchronizer.prototype = {
_dataGridNodeCollapsed: function(event)
{
if (!this._enabled)
return;
var dataGridNode = event.data.dataGridNode;
console.assert(dataGridNode);
......@@ -159,6 +205,9 @@ WebInspector.TreeOutlineDataGridSynchronizer.prototype = {
_treeElementSelected: function(treeElement, selectedByUser)
{
if (!this._enabled)
return;
var dataGridNode = treeElement.__dataGridNode;
console.assert(dataGridNode);
......@@ -167,6 +216,9 @@ WebInspector.TreeOutlineDataGridSynchronizer.prototype = {
_treeElementAdded: function(treeElement)
{
if (!this._enabled)
return;
var dataGridNode = treeElement.__dataGridNode;
console.assert(dataGridNode);
......@@ -181,14 +233,21 @@ WebInspector.TreeOutlineDataGridSynchronizer.prototype = {
_treeElementRemoved: function(treeElement)
{
if (!this._enabled)
return;
var dataGridNode = treeElement.__dataGridNode;
console.assert(dataGridNode);
dataGridNode.parent.removeChild(dataGridNode);
if (dataGridNode.parent)
dataGridNode.parent.removeChild(dataGridNode);
},