Commit e6e3f133 authored by timothy@apple.com's avatar timothy@apple.com

Implement the discrete Script and Layout timeline views.

https://bugs.webkit.org/show_bug.cgi?id=127063

Reviewed by Joseph Pecoraro.

* Localizations/en.lproj/localizedStrings.js: Updated.

* UserInterface/DataGrid.js:
(WebInspector.DataGrid): Support hidden columns by default.
(WebInspector.DataGrid.prototype.updateLayout): Set the column width to zero for hidden columns.

* UserInterface/LayoutTimelineDataGrid.js:
(WebInspector.LayoutTimelineDataGrid): Pass the right parameters to the superclass.

* UserInterface/LayoutTimelineRecord.js:
(WebInspector.LayoutTimelineRecord.prototype.saveIdentityToCookie): Added.

* UserInterface/LayoutTimelineView.css: Copied from Source/WebInspectorUI/UserInterface/ScriptTimelineDataGrid.js.
(.timeline-view.layout > .data-grid):
(.timeline-view.layout > .data-grid .eventType-column):
(.sidebar > .panel.timeline.timeline-content-view-showing .navigation-sidebar-panel-content-tree-outline.layout .item .subtitle):

* UserInterface/LayoutTimelineView.js: Added.
(WebInspector.LayoutTimelineView):
(WebInspector.LayoutTimelineView.prototype.get navigationSidebarTreeOutlineLabel):
(WebInspector.LayoutTimelineView.prototype.shown):
(WebInspector.LayoutTimelineView.prototype.hidden):
(WebInspector.LayoutTimelineView.prototype.updateLayout):
(WebInspector.LayoutTimelineView.prototype.matchTreeElementAgainstCustomFilters):
(WebInspector.LayoutTimelineView.prototype._layoutTimelineRecordAdded):
(WebInspector.LayoutTimelineView.prototype._dataGridFiltersDidChange):
(WebInspector.LayoutTimelineView.prototype._treeElementSelected):

* UserInterface/Main.html: Added new files.

* UserInterface/ScriptTimelineDataGrid.js:
(WebInspector.ScriptTimelineDataGrid): Pass the right parameters to the superclass.

* UserInterface/ScriptTimelineDataGridNode.js:
(WebInspector.ScriptTimelineDataGridNode.prototype.createCellContent): Fix up how we create the link.

* UserInterface/ScriptTimelineRecord.js:
(WebInspector.ScriptTimelineRecord.prototype.saveIdentityToCookie): Added.

* UserInterface/ScriptTimelineView.css: Copied from Source/WebInspectorUI/UserInterface/ScriptTimelineDataGrid.js.
(.timeline-view.script > .data-grid):
(.timeline-view.script > .data-grid .eventType-column):
(.sidebar > .panel.timeline.timeline-content-view-showing .navigation-sidebar-panel-content-tree-outline.script .item .subtitle):

* UserInterface/ScriptTimelineView.js: Added.
(WebInspector.ScriptTimelineView):
(WebInspector.ScriptTimelineView.prototype.get navigationSidebarTreeOutlineLabel):
(WebInspector.ScriptTimelineView.prototype.shown):
(WebInspector.ScriptTimelineView.prototype.hidden):
(WebInspector.ScriptTimelineView.prototype.updateLayout):
(WebInspector.ScriptTimelineView.prototype.matchTreeElementAgainstCustomFilters):
(WebInspector.ScriptTimelineView.prototype._scriptTimelineRecordAdded):
(WebInspector.ScriptTimelineView.prototype._dataGridFiltersDidChange):
(WebInspector.ScriptTimelineView.prototype._treeElementSelected):

* UserInterface/SourceCodeTimelineTreeElement.js:
(WebInspector.SourceCodeTimelineTreeElement):
Moved code to TimelineRecordTreeElement. Subclass from it.

* UserInterface/TimelineContentView.js:
(WebInspector.TimelineContentView.prototype.matchTreeElementAgainstCustomFilters): Support TimelineRecordTreeElement.
(WebInspector.TimelineContentView.prototype._timeRangeSelectionChanged): Update zeroTime for all views.

* UserInterface/TimelineDataGrid.css:
(.data-grid.timeline td .icon):
(.data-grid.timeline td .go-to-arrow):
(.data-grid.timeline tr:hover .go-to-arrow):
(.data-grid.timeline td .subtitle):
(.data-grid.timeline td .subtitle::before):
(.data-grid.timeline:focus tr.selected td .subtitle):

* UserInterface/TimelineRecord.js:
(WebInspector.TimelineRecord.prototype.saveIdentityToCookie): Added.

* UserInterface/TimelineRecordTreeElement.js: Added.
(WebInspector.TimelineRecordTreeElement):
(WebInspector.TimelineRecordTreeElement.prototype.get record):
(WebInspector.TimelineRecordTreeElement.prototype.get filterableData):
Factored out from SourceCodeTimelineTreeElement.

* UserInterface/TimelineSidebarPanel.js:
(WebInspector.TimelineSidebarPanel.prototype.treeElementForRepresentedObject.looslyCompareRepresentedObjects):
(WebInspector.TimelineSidebarPanel.prototype.treeElementForRepresentedObject):
Find TreeElements via a loose lookup based on represented objects that might contain the represented object we are
really looking for.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@162416 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 430bc05b
2014-01-15 Timothy Hatcher <timothy@apple.com>
Implement the discrete Script and Layout timeline views.
https://bugs.webkit.org/show_bug.cgi?id=127063
Reviewed by Joseph Pecoraro.
* Localizations/en.lproj/localizedStrings.js: Updated.
* UserInterface/DataGrid.js:
(WebInspector.DataGrid): Support hidden columns by default.
(WebInspector.DataGrid.prototype.updateLayout): Set the column width to zero for hidden columns.
* UserInterface/LayoutTimelineDataGrid.js:
(WebInspector.LayoutTimelineDataGrid): Pass the right parameters to the superclass.
* UserInterface/LayoutTimelineRecord.js:
(WebInspector.LayoutTimelineRecord.prototype.saveIdentityToCookie): Added.
* UserInterface/LayoutTimelineView.css: Copied from Source/WebInspectorUI/UserInterface/ScriptTimelineDataGrid.js.
(.timeline-view.layout > .data-grid):
(.timeline-view.layout > .data-grid .eventType-column):
(.sidebar > .panel.timeline.timeline-content-view-showing .navigation-sidebar-panel-content-tree-outline.layout .item .subtitle):
* UserInterface/LayoutTimelineView.js: Added.
(WebInspector.LayoutTimelineView):
(WebInspector.LayoutTimelineView.prototype.get navigationSidebarTreeOutlineLabel):
(WebInspector.LayoutTimelineView.prototype.shown):
(WebInspector.LayoutTimelineView.prototype.hidden):
(WebInspector.LayoutTimelineView.prototype.updateLayout):
(WebInspector.LayoutTimelineView.prototype.matchTreeElementAgainstCustomFilters):
(WebInspector.LayoutTimelineView.prototype._layoutTimelineRecordAdded):
(WebInspector.LayoutTimelineView.prototype._dataGridFiltersDidChange):
(WebInspector.LayoutTimelineView.prototype._treeElementSelected):
* UserInterface/Main.html: Added new files.
* UserInterface/ScriptTimelineDataGrid.js:
(WebInspector.ScriptTimelineDataGrid): Pass the right parameters to the superclass.
* UserInterface/ScriptTimelineDataGridNode.js:
(WebInspector.ScriptTimelineDataGridNode.prototype.createCellContent): Fix up how we create the link.
* UserInterface/ScriptTimelineRecord.js:
(WebInspector.ScriptTimelineRecord.prototype.saveIdentityToCookie): Added.
* UserInterface/ScriptTimelineView.css: Copied from Source/WebInspectorUI/UserInterface/ScriptTimelineDataGrid.js.
(.timeline-view.script > .data-grid):
(.timeline-view.script > .data-grid .eventType-column):
(.sidebar > .panel.timeline.timeline-content-view-showing .navigation-sidebar-panel-content-tree-outline.script .item .subtitle):
* UserInterface/ScriptTimelineView.js: Added.
(WebInspector.ScriptTimelineView):
(WebInspector.ScriptTimelineView.prototype.get navigationSidebarTreeOutlineLabel):
(WebInspector.ScriptTimelineView.prototype.shown):
(WebInspector.ScriptTimelineView.prototype.hidden):
(WebInspector.ScriptTimelineView.prototype.updateLayout):
(WebInspector.ScriptTimelineView.prototype.matchTreeElementAgainstCustomFilters):
(WebInspector.ScriptTimelineView.prototype._scriptTimelineRecordAdded):
(WebInspector.ScriptTimelineView.prototype._dataGridFiltersDidChange):
(WebInspector.ScriptTimelineView.prototype._treeElementSelected):
* UserInterface/SourceCodeTimelineTreeElement.js:
(WebInspector.SourceCodeTimelineTreeElement):
Moved code to TimelineRecordTreeElement. Subclass from it.
* UserInterface/TimelineContentView.js:
(WebInspector.TimelineContentView.prototype.matchTreeElementAgainstCustomFilters): Support TimelineRecordTreeElement.
(WebInspector.TimelineContentView.prototype._timeRangeSelectionChanged): Update zeroTime for all views.
* UserInterface/TimelineDataGrid.css:
(.data-grid.timeline td .icon):
(.data-grid.timeline td .go-to-arrow):
(.data-grid.timeline tr:hover .go-to-arrow):
(.data-grid.timeline td .subtitle):
(.data-grid.timeline td .subtitle::before):
(.data-grid.timeline:focus tr.selected td .subtitle):
* UserInterface/TimelineRecord.js:
(WebInspector.TimelineRecord.prototype.saveIdentityToCookie): Added.
* UserInterface/TimelineRecordTreeElement.js: Added.
(WebInspector.TimelineRecordTreeElement):
(WebInspector.TimelineRecordTreeElement.prototype.get record):
(WebInspector.TimelineRecordTreeElement.prototype.get filterableData):
Factored out from SourceCodeTimelineTreeElement.
* UserInterface/TimelineSidebarPanel.js:
(WebInspector.TimelineSidebarPanel.prototype.treeElementForRepresentedObject.looslyCompareRepresentedObjects):
(WebInspector.TimelineSidebarPanel.prototype.treeElementForRepresentedObject):
Find TreeElements via a loose lookup based on represented objects that might contain the represented object we are
really looking for.
2014-01-14 Timothy Hatcher <timothy@apple.com>
Implement the discrete Network timeline view.
......
......@@ -165,6 +165,7 @@ WebInspector.DataGrid = function(columns, editCallback, deleteCallback)
this.columns = columns || {};
this._columnsArray = [];
for (var columnIdentifier in columns) {
columns[columnIdentifier].ordinal = this._columnsArray.length;
columns[columnIdentifier].identifier = columnIdentifier;
......@@ -187,6 +188,11 @@ WebInspector.DataGrid = function(columns, editCallback, deleteCallback)
this.resizers = [];
this._columnWidthsInitialized = false;
for (var columnIdentifier in columns) {
if (columns[columnIdentifier].hidden)
this._hideColumn(columnIdentifier);
}
this._generateSortIndicatorImagesIfNeeded();
}
......@@ -545,13 +551,21 @@ WebInspector.DataGrid.prototype = {
var tableWidth = this._dataTable.offsetWidth;
var numColumns = headerTableColumns.length;
for (var i = 0; i < numColumns; i++) {
var columnWidth = this.headerTableBody.rows[0].cells[i].offsetWidth;
var percentWidth = ((columnWidth / tableWidth) * 100) + "%";
this._headerTableColumnGroup.children[i].style.width = percentWidth;
this._dataTableColumnGroup.children[i].style.width = percentWidth;
var headerCell = this.headerTableBody.rows[0].cells[i]
if (this._isColumnVisible(headerCell.columnIdentifier)) {
var columnWidth = headerCell.offsetWidth;
var percentWidth = ((columnWidth / tableWidth) * 100) + "%";
this._headerTableColumnGroup.children[i].style.width = percentWidth;
this._dataTableColumnGroup.children[i].style.width = percentWidth;
} else {
this._headerTableColumnGroup.children[i].style.width = 0;
this._dataTableColumnGroup.children[i].style.width = 0;
}
}
this._columnWidthsInitialized = true;
}
this._positionResizers();
this.dispatchEventToListeners(WebInspector.DataGrid.Event.DidLayout);
},
......
......@@ -23,9 +23,9 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
WebInspector.LayoutTimelineDataGrid = function(columns)
WebInspector.LayoutTimelineDataGrid = function(treeOutline, columns, editCallback, deleteCallback)
{
WebInspector.TimelineDataGrid.call(this, columns);
WebInspector.TimelineDataGrid.call(this, treeOutline, columns, editCallback, deleteCallback);
this._showingHighlight = false;
......
......@@ -25,7 +25,7 @@
WebInspector.LayoutTimelineDataGridNode = function(layoutTimelineRecord, baseStartTime)
{
WebInspector.DataGridNode.call(this, {});
WebInspector.TimelineDataGridNode.call(this, false, null);
this._record = layoutTimelineRecord;
this._baseStartTime = baseStartTime || 0;
......@@ -38,6 +38,7 @@ WebInspector.LayoutTimelineDataGridNode.SubtitleStyleClassName = "subtitle";
WebInspector.LayoutTimelineDataGridNode.prototype = {
constructor: WebInspector.LayoutTimelineDataGridNode,
__proto__: WebInspector.TimelineDataGridNode.prototype,
// Public
......@@ -46,6 +47,11 @@ WebInspector.LayoutTimelineDataGridNode.prototype = {
return this._record;
},
get records()
{
return [this._record];
},
get data()
{
return this._record;
......@@ -60,77 +66,6 @@ WebInspector.LayoutTimelineDataGridNode.prototype = {
case "eventType":
return WebInspector.LayoutTimelineRecord.EventType.displayName(value);
case "initiatorCallFrame":
var callFrame = value;
if (!callFrame)
return emptyValuePlaceholderString;
var isAnonymousFunction = false;
var functionName = callFrame.functionName;
if (!functionName) {
functionName = WebInspector.UIString("(anonymous function)");
isAnonymousFunction = true;
}
cell.classList.add(WebInspector.CallFrameTreeElement.FunctionIconStyleClassName);
var fragment = document.createDocumentFragment();
if (callFrame.sourceCodeLocation && callFrame.sourceCodeLocation.sourceCode) {
// Give the whole cell a tooltip and keep it up to date.
callFrame.sourceCodeLocation.populateLiveDisplayLocationTooltip(cell);
var goToArrowButtonLink = WebInspector.createSourceCodeLocationLink(callFrame.sourceCodeLocation, false, true);
fragment.appendChild(goToArrowButtonLink);
var icon = document.createElement("div");
icon.className = WebInspector.LayoutTimelineDataGridNode.IconStyleClassName;
fragment.appendChild(icon);
if (isAnonymousFunction) {
// For anonymous functions we show the resource or script icon and name.
if (callFrame.sourceCodeLocation.sourceCode instanceof WebInspector.Resource) {
cell.classList.add(WebInspector.ResourceTreeElement.ResourceIconStyleClassName);
cell.classList.add(callFrame.sourceCodeLocation.sourceCode.type);
} else if (callFrame.sourceCodeLocation.sourceCode instanceof WebInspector.Script) {
if (callFrame.sourceCodeLocation.sourceCode.url) {
cell.classList.add(WebInspector.ResourceTreeElement.ResourceIconStyleClassName);
cell.classList.add(WebInspector.Resource.Type.Script);
} else
cell.classList.add(WebInspector.ScriptTreeElement.AnonymousScriptIconStyleClassName);
} else {
console.error("Unknown SourceCode subclass.");
}
var titleElement = document.createElement("span");
callFrame.sourceCodeLocation.populateLiveDisplayLocationString(titleElement, "textContent");
fragment.appendChild(titleElement);
} else {
// Show the function name and icon.
cell.classList.add(WebInspector.CallFrameTreeElement.FunctionIconStyleClassName);
fragment.appendChild(document.createTextNode(functionName));
var subtitleElement = document.createElement("span");
subtitleElement.className = WebInspector.LayoutTimelineDataGridNode.SubtitleStyleClassName;
callFrame.sourceCodeLocation.populateLiveDisplayLocationString(subtitleElement, "textContent");
fragment.appendChild(subtitleElement);
}
return fragment;
}
var icon = document.createElement("div");
icon.className = WebInspector.LayoutTimelineDataGridNode.IconStyleClassName;
fragment.appendChild(icon);
fragment.appendChild(document.createTextNode(functionName));
return fragment;
case "width":
case "height":
return isNaN(value) ? emptyValuePlaceholderString : WebInspector.UIString("%fpx").format(value);
......@@ -145,8 +80,6 @@ WebInspector.LayoutTimelineDataGridNode.prototype = {
return isNaN(value) ? emptyValuePlaceholderString : Number.secondsToString(value);
}
return WebInspector.DataGridNode.prototype.createCellContent.call(this, columnIdentifier);
return WebInspector.TimelineDataGridNode.prototype.createCellContent.call(this, columnIdentifier, cell);
}
}
WebInspector.LayoutTimelineDataGridNode.prototype.__proto__ = WebInspector.DataGridNode.prototype;
};
......@@ -64,6 +64,9 @@ WebInspector.LayoutTimelineRecord.EventType.displayName = function(eventType)
}
};
WebInspector.LayoutTimelineRecord.TypeIdentifier = "layout-timeline-record";
WebInspector.LayoutTimelineRecord.EventTypeCookieKey = "layout-timeline-record-event-type";
WebInspector.LayoutTimelineRecord.prototype = {
constructor: WebInspector.LayoutTimelineRecord,
......@@ -109,6 +112,13 @@ WebInspector.LayoutTimelineRecord.prototype = {
get quad()
{
return this._quad;
},
saveIdentityToCookie: function(cookie)
{
WebInspector.TimelineRecord.prototype.saveIdentityToCookie.call(this, cookie);
cookie[WebInspector.LayoutTimelineRecord.EventTypeCookieKey] = this._eventType;
}
};
......
/*
* 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.layout > .data-grid {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.timeline-view.layout > .data-grid .eventType-column {
border-right: none;
}
.sidebar > .panel.timeline.timeline-content-view-showing .navigation-sidebar-panel-content-tree-outline.layout .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.LayoutTimelineView = 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.LayoutTimelineView.TreeOutlineStyleClassName);
var columns = {eventType: {}, initiatorCallFrame: {}, width: {}, height: {}, startTime: {}, duration: {}};
columns.eventType.title = WebInspector.UIString("Type");
columns.eventType.width = "15%";
columns.eventType.scopeBar = WebInspector.TimelineDataGrid.createColumnScopeBar("layout", WebInspector.LayoutTimelineRecord.EventType);
columns.eventType.hidden = true;
columns.initiatorCallFrame.title = WebInspector.UIString("Initiator");
columns.initiatorCallFrame.width = "25%";
columns.width.title = WebInspector.UIString("Width");
columns.width.width = "8%";
columns.height.title = WebInspector.UIString("Height");
columns.height.width = "8%";
columns.startTime.title = WebInspector.UIString("Start Time");
columns.startTime.width = "8%";
columns.startTime.aligned = "right";
columns.startTime.sort = "ascending";
columns.duration.title = WebInspector.UIString("Duration");
columns.duration.width = "8%";
columns.duration.aligned = "right";
for (var column in columns)
columns[column].sortable = true;
this._dataGrid = new WebInspector.LayoutTimelineDataGrid(this.navigationSidebarTreeOutline, columns);
this._dataGrid.addEventListener(WebInspector.TimelineDataGrid.Event.FiltersDidChange, this._dataGridFiltersDidChange, this);
this.element.classList.add(WebInspector.LayoutTimelineView.StyleClassName);
this.element.appendChild(this._dataGrid.element);
this._pendingRecords = [];
};
WebInspector.LayoutTimelineView.StyleClassName = "layout";
WebInspector.LayoutTimelineView.TreeOutlineStyleClassName = "layout";
WebInspector.LayoutTimelineView.prototype = {
constructor: WebInspector.LayoutTimelineView,
__proto__: WebInspector.TimelineView.prototype,
// Public
get navigationSidebarTreeOutlineLabel()
{
return WebInspector.UIString("Records");
},
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._layoutTimeline)
this._layoutTimeline.removeEventListener(null, null, this);
this._layoutTimeline = WebInspector.timelineManager.recording.timelines.get(WebInspector.TimelineRecord.Type.Layout);
console.assert(this._layoutTimeline);
this._layoutTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._layoutTimelineRecordAdded, this);
},
// Private
_processPendingRecords: function()
{
if (!this._pendingRecords.length)
return;
for (var layoutTimelineRecord of this._pendingRecords) {
var treeElement = new WebInspector.TimelineRecordTreeElement(layoutTimelineRecord, true);
var dataGridNode = new WebInspector.LayoutTimelineDataGridNode(layoutTimelineRecord, this.zeroTime);
this._dataGrid.addRowInSortOrder(treeElement, dataGridNode);
}
this._pendingRecords = [];
},
_layoutTimelineRecordAdded: function(event)
{
var layoutTimelineRecord = event.data.record;
console.assert(layoutTimelineRecord instanceof WebInspector.LayoutTimelineRecord);
this._pendingRecords.push(layoutTimelineRecord);
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.TimelineRecordTreeElement)) {
console.error("Unknown tree element selected.");
return;
}
if (!treeElement.record.sourceCodeLocation) {
WebInspector.timelineSidebarPanel.showTimelineView(WebInspector.TimelineRecord.Type.Layout);
return;
}
WebInspector.resourceSidebarPanel.showOriginalOrFormattedSourceCodeLocation(treeElement.record.sourceCodeLocation);
}
};
......@@ -85,6 +85,8 @@
<link rel="stylesheet" href="TimelineContentView.css">
<link rel="stylesheet" href="OverviewTimelineView.css">
<link rel="stylesheet" href="NetworkTimelineView.css">
<link rel="stylesheet" href="LayoutTimelineView.css">
<link rel="stylesheet" href="ScriptTimelineView.css">
<link rel="stylesheet" href="TimelineIcons.css">
<link rel="stylesheet" href="TimelineRuler.css">
<link rel="stylesheet" href="TimelineDataGrid.css">
......@@ -279,6 +281,8 @@
<script src="TimelineView.js"></script>
<script src="OverviewTimelineView.js"></script>
<script src="NetworkTimelineView.js"></script>
<script src="LayoutTimelineView.js"></script>
<script src="ScriptTimelineView.js"></script>
<script src="ApplicationCacheDetailsSidebarPanel.js"></script>
<script src="DOMTreeManager.js"></script>
<script src="DOMNode.js"></script>
......@@ -346,6 +350,7 @@
<script src="CSSStyleDeclarationSection.js"></script>
<script src="IndeterminateProgressSpinner.js"></script>
<script src="TimelineSidebarPanel.js"></script>
<script src="TimelineRecordTreeElement.js"></script>
<script src="SourceCodeTimelineTreeElement.js"></script>
<script src="TimelineRuler.js"></script>
<script src="TimelineDataGrid.js"></script>
......
......@@ -23,9 +23,9 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
WebInspector.ScriptTimelineDataGrid = function(columns)
WebInspector.ScriptTimelineDataGrid = function(treeOutline, columns, editCallback, deleteCallback)
{
WebInspector.TimelineDataGrid.call(this, columns);
WebInspector.TimelineDataGrid.call(this, treeOutline, columns, editCallback, deleteCallback);
}
WebInspector.ScriptTimelineDataGrid.prototype = {
......@@ -35,7 +35,7 @@ WebInspector.ScriptTimelineDataGrid.prototype = {
callFramePopoverAnchorElement: function()
{
return this.selectedNode.elementWithColumnIdentifier("resource");
return this.selectedNode.elementWithColumnIdentifier("location");
}
}
......
......@@ -25,7 +25,7 @@
WebInspector.ScriptTimelineDataGridNode = function(scriptTimelineRecord, baseStartTime)
{
WebInspector.DataGridNode.call(this, {});
WebInspector.TimelineDataGridNode.call(this, false, null);
this._record = scriptTimelineRecord;
this._baseStartTime = baseStartTime || 0;
......@@ -37,6 +37,7 @@ WebInspector.ScriptTimelineDataGridNode.IconStyleClassName = "icon";
WebInspector.ScriptTimelineDataGridNode.prototype = {
constructor: WebInspector.ScriptTimelineDataGridNode,
__proto__: WebInspector.TimelineDataGridNode.prototype,
// Public
......@@ -45,9 +46,15 @@ WebInspector.ScriptTimelineDataGridNode.prototype = {
return this._record;
},
get records()
{
return [this._record];
},
get data()
{
return this._record;
var callFrameOrSourceCodeLocation = this._record.initiatorCallFrame || this._record.sourceCodeLocation;
return {eventType: this._record.eventType, details: this._record.details, startTime: this._record.startTime, duration: this._record.duration, location: callFrameOrSourceCodeLocation};
},
createCellContent: function(columnIdentifier, cell)
......@@ -62,34 +69,6 @@ WebInspector.ScriptTimelineDataGridNode.prototype = {
case "details":
return value ? value : emptyValuePlaceholderString;
case "resource":
if (!value)
return emptyValuePlaceholderString;
console.assert(this.data.sourceCodeLocation);
cell.classList.add(WebInspector.ResourceTreeElement.ResourceIconStyleClassName);
cell.classList.add(value.type);
// Give the whole cell a tooltip and keep it up to date.
var sourceCodeLocation = this.data.sourceCodeLocation;
sourceCodeLocation.populateLiveDisplayLocationTooltip(cell);
var fragment = document.createDocumentFragment();
var goToArrowButtonLink = WebInspector.createSourceCodeLocationLink(sourceCodeLocation, false, true);
fragment.appendChild(goToArrowButtonLink);
var icon = document.createElement("div");
icon.className = WebInspector.ScriptTimelineDataGridNode.IconStyleClassName;
fragment.appendChild(icon);
var titleElement = document.createElement("span");
sourceCodeLocation.populateLiveDisplayLocationString(titleElement, "textContent");
fragment.appendChild(titleElement);
return fragment;
case "startTime":
return isNaN(value) ? emptyValuePlaceholderString : Number.secondsToString(value - this._baseStartTime);
......@@ -97,8 +76,6 @@ WebInspector.ScriptTimelineDataGridNode.prototype = {
return isNaN(value) ? emptyValuePlaceholderString : Number.secondsToString(value);
}
return WebInspector.DataGridNode.prototype.createCellContent.call(this, columnIdentifier);
return WebInspector.TimelineDataGridNode.prototype.createCellContent.call(this, columnIdentifier, cell);
}
}
WebInspector.ScriptTimelineDataGridNode.prototype.__proto__ = WebInspector.DataGridNode.prototype;
};
......@@ -63,6 +63,10 @@ WebInspector.ScriptTimelineRecord.EventType.displayName = function(eventType)
}
};
WebInspector.ScriptTimelineRecord.TypeIdentifier = "script-timeline-record";
WebInspector.ScriptTimelineRecord.EventTypeCookieKey = "script-timeline-record-event-type";
WebInspector.ScriptTimelineRecord.DetailsCookieKey = "script-timeline-record-details";
WebInspector.ScriptTimelineRecord.prototype = {
constructor: WebInspector.ScriptTimelineRecord,
......@@ -76,6 +80,14 @@ WebInspector.ScriptTimelineRecord.prototype = {
get details()
{
return this._details;
},
saveIdentityToCookie: function(cookie)
{
WebInspector.TimelineRecord.prototype.saveIdentityToCookie.call(this, cookie);
cookie[WebInspector.ScriptTimelineRecord.EventTypeCookieKey] = this._eventType;
cookie[WebInspector.ScriptTimelineRecord.DetailsCookieKey] = this._details;
}
};
......
/*
* 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.
*