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

Source/WebInspectorUI/ChangeLog

+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.

Source/WebInspectorUI/UserInterface/DataGrid.js

@@ -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);
     },

Source/WebInspectorUI/UserInterface/LayoutTimelineDataGrid.js

@@ -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;
 

Source/WebInspectorUI/UserInterface/LayoutTimelineDataGridNode.js

@@ -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;
+};

Source/WebInspectorUI/UserInterface/LayoutTimelineRecord.js

@@ -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;
     }
 };
 

Source/WebInspectorUI/UserInterface/LayoutTimelineView.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.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;
+}

Source/WebInspectorUI/UserInterface/LayoutTimelineView.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.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);
+    }
+};

Source/WebInspectorUI/UserInterface/Main.html

@@ -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>

Source/WebInspectorUI/UserInterface/ScriptTimelineDataGrid.js

@@ -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");
     }
 }
 

Source/WebInspectorUI/UserInterface/ScriptTimelineDataGridNode.js

@@ -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);
     }