<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[162416] trunk/Source/WebInspectorUI</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/162416">162416</a></dd>
<dt>Author</dt> <dd>timothy@apple.com</dd>
<dt>Date</dt> <dd>2014-01-20 18:56:04 -0800 (Mon, 20 Jan 2014)</dd>
</dl>

<h3>Log Message</h3>
<pre>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 &gt; .data-grid):
(.timeline-view.layout &gt; .data-grid .eventType-column):
(.sidebar &gt; .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 &gt; .data-grid):
(.timeline-view.script &gt; .data-grid .eventType-column):
(.sidebar &gt; .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.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceDataGridjs">trunk/Source/WebInspectorUI/UserInterface/DataGrid.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceLayoutTimelineDataGridjs">trunk/Source/WebInspectorUI/UserInterface/LayoutTimelineDataGrid.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceLayoutTimelineDataGridNodejs">trunk/Source/WebInspectorUI/UserInterface/LayoutTimelineDataGridNode.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceLayoutTimelineRecordjs">trunk/Source/WebInspectorUI/UserInterface/LayoutTimelineRecord.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceScriptTimelineDataGridjs">trunk/Source/WebInspectorUI/UserInterface/ScriptTimelineDataGrid.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceScriptTimelineDataGridNodejs">trunk/Source/WebInspectorUI/UserInterface/ScriptTimelineDataGridNode.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceScriptTimelineRecordjs">trunk/Source/WebInspectorUI/UserInterface/ScriptTimelineRecord.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceSourceCodeTimelineTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/SourceCodeTimelineTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceTimelineContentViewjs">trunk/Source/WebInspectorUI/UserInterface/TimelineContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceTimelineDataGridcss">trunk/Source/WebInspectorUI/UserInterface/TimelineDataGrid.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceTimelineDataGridNodejs">trunk/Source/WebInspectorUI/UserInterface/TimelineDataGridNode.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceTimelineRecordjs">trunk/Source/WebInspectorUI/UserInterface/TimelineRecord.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceTimelineSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/TimelineSidebarPanel.js</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceLayoutTimelineViewcss">trunk/Source/WebInspectorUI/UserInterface/LayoutTimelineView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceLayoutTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/LayoutTimelineView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceScriptTimelineViewcss">trunk/Source/WebInspectorUI/UserInterface/ScriptTimelineView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceScriptTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/ScriptTimelineView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceTimelineRecordTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/TimelineRecordTreeElement.js</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (162415 => 162416)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog        2014-01-21 02:55:52 UTC (rev 162415)
+++ trunk/Source/WebInspectorUI/ChangeLog        2014-01-21 02:56:04 UTC (rev 162416)
</span><span class="lines">@@ -1,3 +1,97 @@
</span><ins>+2014-01-15  Timothy Hatcher  &lt;timothy@apple.com&gt;
+
+        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 &gt; .data-grid):
+        (.timeline-view.layout &gt; .data-grid .eventType-column):
+        (.sidebar &gt; .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 &gt; .data-grid):
+        (.timeline-view.script &gt; .data-grid .eventType-column):
+        (.sidebar &gt; .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.
+
</ins><span class="cx"> 2014-01-14  Timothy Hatcher  &lt;timothy@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Implement the discrete Network timeline view.
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceDataGridjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/DataGrid.js (162415 => 162416)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/DataGrid.js        2014-01-21 02:55:52 UTC (rev 162415)
+++ trunk/Source/WebInspectorUI/UserInterface/DataGrid.js        2014-01-21 02:56:04 UTC (rev 162416)
</span><span class="lines">@@ -165,6 +165,7 @@
</span><span class="cx"> 
</span><span class="cx">     this.columns = columns || {};
</span><span class="cx">     this._columnsArray = [];
</span><ins>+
</ins><span class="cx">     for (var columnIdentifier in columns) {
</span><span class="cx">         columns[columnIdentifier].ordinal = this._columnsArray.length;
</span><span class="cx">         columns[columnIdentifier].identifier = columnIdentifier;
</span><span class="lines">@@ -187,6 +188,11 @@
</span><span class="cx">     this.resizers = [];
</span><span class="cx">     this._columnWidthsInitialized = false;
</span><span class="cx"> 
</span><ins>+    for (var columnIdentifier in columns) {
+        if (columns[columnIdentifier].hidden)
+            this._hideColumn(columnIdentifier);
+    }
+
</ins><span class="cx">     this._generateSortIndicatorImagesIfNeeded();
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="lines">@@ -545,13 +551,21 @@
</span><span class="cx">             var tableWidth = this._dataTable.offsetWidth;
</span><span class="cx">             var numColumns = headerTableColumns.length;
</span><span class="cx">             for (var i = 0; i &lt; numColumns; i++) {
</span><del>-                var columnWidth = this.headerTableBody.rows[0].cells[i].offsetWidth;
-                var percentWidth = ((columnWidth / tableWidth) * 100) + &quot;%&quot;;
-                this._headerTableColumnGroup.children[i].style.width = percentWidth;
-                this._dataTableColumnGroup.children[i].style.width = percentWidth;
</del><ins>+                var headerCell = this.headerTableBody.rows[0].cells[i]
+                if (this._isColumnVisible(headerCell.columnIdentifier)) {
+                    var columnWidth = headerCell.offsetWidth;
+                    var percentWidth = ((columnWidth / tableWidth) * 100) + &quot;%&quot;;
+                    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;
+                }
</ins><span class="cx">             }
</span><ins>+
</ins><span class="cx">             this._columnWidthsInitialized = true;
</span><span class="cx">         }
</span><ins>+
</ins><span class="cx">         this._positionResizers();
</span><span class="cx">         this.dispatchEventToListeners(WebInspector.DataGrid.Event.DidLayout);
</span><span class="cx">     },
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceLayoutTimelineDataGridjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/LayoutTimelineDataGrid.js (162415 => 162416)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/LayoutTimelineDataGrid.js        2014-01-21 02:55:52 UTC (rev 162415)
+++ trunk/Source/WebInspectorUI/UserInterface/LayoutTimelineDataGrid.js        2014-01-21 02:56:04 UTC (rev 162416)
</span><span class="lines">@@ -23,9 +23,9 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.LayoutTimelineDataGrid = function(columns)
</del><ins>+WebInspector.LayoutTimelineDataGrid = function(treeOutline, columns, editCallback, deleteCallback)
</ins><span class="cx"> {
</span><del>-    WebInspector.TimelineDataGrid.call(this, columns);
</del><ins>+    WebInspector.TimelineDataGrid.call(this, treeOutline, columns, editCallback, deleteCallback);
</ins><span class="cx"> 
</span><span class="cx">     this._showingHighlight = false;
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceLayoutTimelineDataGridNodejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/LayoutTimelineDataGridNode.js (162415 => 162416)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/LayoutTimelineDataGridNode.js        2014-01-21 02:55:52 UTC (rev 162415)
+++ trunk/Source/WebInspectorUI/UserInterface/LayoutTimelineDataGridNode.js        2014-01-21 02:56:04 UTC (rev 162416)
</span><span class="lines">@@ -25,7 +25,7 @@
</span><span class="cx"> 
</span><span class="cx"> WebInspector.LayoutTimelineDataGridNode = function(layoutTimelineRecord, baseStartTime)
</span><span class="cx"> {
</span><del>-    WebInspector.DataGridNode.call(this, {});
</del><ins>+    WebInspector.TimelineDataGridNode.call(this, false, null);
</ins><span class="cx"> 
</span><span class="cx">     this._record = layoutTimelineRecord;
</span><span class="cx">     this._baseStartTime = baseStartTime || 0;
</span><span class="lines">@@ -38,6 +38,7 @@
</span><span class="cx"> 
</span><span class="cx"> WebInspector.LayoutTimelineDataGridNode.prototype = {
</span><span class="cx">     constructor: WebInspector.LayoutTimelineDataGridNode,
</span><ins>+    __proto__: WebInspector.TimelineDataGridNode.prototype,
</ins><span class="cx"> 
</span><span class="cx">     // Public
</span><span class="cx"> 
</span><span class="lines">@@ -46,6 +47,11 @@
</span><span class="cx">         return this._record;
</span><span class="cx">     },
</span><span class="cx"> 
</span><ins>+    get records()
+    {
+        return [this._record];
+    },
+
</ins><span class="cx">     get data()
</span><span class="cx">     {
</span><span class="cx">         return this._record;
</span><span class="lines">@@ -60,77 +66,6 @@
</span><span class="cx">         case &quot;eventType&quot;:
</span><span class="cx">             return WebInspector.LayoutTimelineRecord.EventType.displayName(value);
</span><span class="cx"> 
</span><del>-        case &quot;initiatorCallFrame&quot;:
-            var callFrame = value;
-            if (!callFrame)
-                return emptyValuePlaceholderString;
-
-            var isAnonymousFunction = false;
-            var functionName = callFrame.functionName;
-            if (!functionName) {
-                functionName = WebInspector.UIString(&quot;(anonymous function)&quot;);
-                isAnonymousFunction = true;
-            }
-
-            cell.classList.add(WebInspector.CallFrameTreeElement.FunctionIconStyleClassName);
-
-            var fragment = document.createDocumentFragment();
-
-            if (callFrame.sourceCodeLocation &amp;&amp; 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(&quot;div&quot;);
-                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(&quot;Unknown SourceCode subclass.&quot;);
-                    }
-
-                    var titleElement = document.createElement(&quot;span&quot;);
-                    callFrame.sourceCodeLocation.populateLiveDisplayLocationString(titleElement, &quot;textContent&quot;);
-
-                    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(&quot;span&quot;);
-                    subtitleElement.className = WebInspector.LayoutTimelineDataGridNode.SubtitleStyleClassName;
-                    callFrame.sourceCodeLocation.populateLiveDisplayLocationString(subtitleElement, &quot;textContent&quot;);
-
-                    fragment.appendChild(subtitleElement);
-                }
-
-                return fragment;
-            }
-
-            var icon = document.createElement(&quot;div&quot;);
-            icon.className = WebInspector.LayoutTimelineDataGridNode.IconStyleClassName;
-            fragment.appendChild(icon);
-
-            fragment.appendChild(document.createTextNode(functionName));
-
-            return fragment;
-
</del><span class="cx">         case &quot;width&quot;:
</span><span class="cx">         case &quot;height&quot;:
</span><span class="cx">             return isNaN(value) ? emptyValuePlaceholderString : WebInspector.UIString(&quot;%fpx&quot;).format(value);
</span><span class="lines">@@ -145,8 +80,6 @@
</span><span class="cx">             return isNaN(value) ? emptyValuePlaceholderString : Number.secondsToString(value);
</span><span class="cx">         }
</span><span class="cx"> 
</span><del>-        return WebInspector.DataGridNode.prototype.createCellContent.call(this, columnIdentifier);
</del><ins>+        return WebInspector.TimelineDataGridNode.prototype.createCellContent.call(this, columnIdentifier, cell);
</ins><span class="cx">     }
</span><del>-}
-
-WebInspector.LayoutTimelineDataGridNode.prototype.__proto__ = WebInspector.DataGridNode.prototype;
</del><ins>+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceLayoutTimelineRecordjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/LayoutTimelineRecord.js (162415 => 162416)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/LayoutTimelineRecord.js        2014-01-21 02:55:52 UTC (rev 162415)
+++ trunk/Source/WebInspectorUI/UserInterface/LayoutTimelineRecord.js        2014-01-21 02:56:04 UTC (rev 162416)
</span><span class="lines">@@ -64,6 +64,9 @@
</span><span class="cx">     }
</span><span class="cx"> };
</span><span class="cx"> 
</span><ins>+WebInspector.LayoutTimelineRecord.TypeIdentifier = &quot;layout-timeline-record&quot;;
+WebInspector.LayoutTimelineRecord.EventTypeCookieKey = &quot;layout-timeline-record-event-type&quot;;
+
</ins><span class="cx"> WebInspector.LayoutTimelineRecord.prototype = {
</span><span class="cx">     constructor: WebInspector.LayoutTimelineRecord,
</span><span class="cx"> 
</span><span class="lines">@@ -109,6 +112,13 @@
</span><span class="cx">     get quad()
</span><span class="cx">     {
</span><span class="cx">         return this._quad;
</span><ins>+    },
+
+    saveIdentityToCookie: function(cookie)
+    {
+        WebInspector.TimelineRecord.prototype.saveIdentityToCookie.call(this, cookie);
+
+        cookie[WebInspector.LayoutTimelineRecord.EventTypeCookieKey] = this._eventType;
</ins><span class="cx">     }
</span><span class="cx"> };
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceLayoutTimelineViewcssfromrev162415trunkSourceWebInspectorUIUserInterfaceScriptTimelineDataGridjs"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebInspectorUI/UserInterface/LayoutTimelineView.css (from rev 162415, trunk/Source/WebInspectorUI/UserInterface/ScriptTimelineDataGrid.js) (0 => 162416)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/LayoutTimelineView.css                                (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/LayoutTimelineView.css        2014-01-21 02:56:04 UTC (rev 162416)
</span><span class="lines">@@ -0,0 +1,40 @@
</span><ins>+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.timeline-view.layout &gt; .data-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.timeline-view.layout &gt; .data-grid .eventType-column {
+    border-right: none;
+}
+
+.sidebar &gt; .panel.timeline.timeline-content-view-showing .navigation-sidebar-panel-content-tree-outline.layout .item .subtitle {
+    display: none;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceLayoutTimelineViewjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/LayoutTimelineView.js (0 => 162416)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/LayoutTimelineView.js                                (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/LayoutTimelineView.js        2014-01-21 02:56:04 UTC (rev 162416)
</span><span class="lines">@@ -0,0 +1,183 @@
</span><ins>+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.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(&quot;Type&quot;);
+    columns.eventType.width = &quot;15%&quot;;
+    columns.eventType.scopeBar = WebInspector.TimelineDataGrid.createColumnScopeBar(&quot;layout&quot;, WebInspector.LayoutTimelineRecord.EventType);
+    columns.eventType.hidden = true;
+
+    columns.initiatorCallFrame.title = WebInspector.UIString(&quot;Initiator&quot;);
+    columns.initiatorCallFrame.width = &quot;25%&quot;;
+
+    columns.width.title = WebInspector.UIString(&quot;Width&quot;);
+    columns.width.width = &quot;8%&quot;;
+
+    columns.height.title = WebInspector.UIString(&quot;Height&quot;);
+    columns.height.width = &quot;8%&quot;;
+
+    columns.startTime.title = WebInspector.UIString(&quot;Start Time&quot;);
+    columns.startTime.width = &quot;8%&quot;;
+    columns.startTime.aligned = &quot;right&quot;;
+    columns.startTime.sort = &quot;ascending&quot;;
+
+    columns.duration.title = WebInspector.UIString(&quot;Duration&quot;);
+    columns.duration.width = &quot;8%&quot;;
+    columns.duration.aligned = &quot;right&quot;;
+
+    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 = &quot;layout&quot;;
+WebInspector.LayoutTimelineView.TreeOutlineStyleClassName = &quot;layout&quot;;
+
+WebInspector.LayoutTimelineView.prototype = {
+    constructor: WebInspector.LayoutTimelineView,
+    __proto__: WebInspector.TimelineView.prototype,
+
+    // Public
+
+    get navigationSidebarTreeOutlineLabel()
+    {
+        return WebInspector.UIString(&quot;Records&quot;);
+    },
+
+    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(&quot;Unknown tree element selected.&quot;);
+            return;
+        }
+
+        if (!treeElement.record.sourceCodeLocation) {
+            WebInspector.timelineSidebarPanel.showTimelineView(WebInspector.TimelineRecord.Type.Layout);
+            return;
+        }
+
+        WebInspector.resourceSidebarPanel.showOriginalOrFormattedSourceCodeLocation(treeElement.record.sourceCodeLocation);
+    }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (162415 => 162416)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html        2014-01-21 02:55:52 UTC (rev 162415)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html        2014-01-21 02:56:04 UTC (rev 162416)
</span><span class="lines">@@ -85,6 +85,8 @@
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;TimelineContentView.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;OverviewTimelineView.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;NetworkTimelineView.css&quot;&gt;
</span><ins>+    &lt;link rel=&quot;stylesheet&quot; href=&quot;LayoutTimelineView.css&quot;&gt;
+    &lt;link rel=&quot;stylesheet&quot; href=&quot;ScriptTimelineView.css&quot;&gt;
</ins><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;TimelineIcons.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;TimelineRuler.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;TimelineDataGrid.css&quot;&gt;
</span><span class="lines">@@ -279,6 +281,8 @@
</span><span class="cx">     &lt;script src=&quot;TimelineView.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;OverviewTimelineView.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;NetworkTimelineView.js&quot;&gt;&lt;/script&gt;
</span><ins>+    &lt;script src=&quot;LayoutTimelineView.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;ScriptTimelineView.js&quot;&gt;&lt;/script&gt;
</ins><span class="cx">     &lt;script src=&quot;ApplicationCacheDetailsSidebarPanel.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;DOMTreeManager.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;DOMNode.js&quot;&gt;&lt;/script&gt;
</span><span class="lines">@@ -346,6 +350,7 @@
</span><span class="cx">     &lt;script src=&quot;CSSStyleDeclarationSection.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;IndeterminateProgressSpinner.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;TimelineSidebarPanel.js&quot;&gt;&lt;/script&gt;
</span><ins>+    &lt;script src=&quot;TimelineRecordTreeElement.js&quot;&gt;&lt;/script&gt;
</ins><span class="cx">     &lt;script src=&quot;SourceCodeTimelineTreeElement.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;TimelineRuler.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;TimelineDataGrid.js&quot;&gt;&lt;/script&gt;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceScriptTimelineDataGridjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/ScriptTimelineDataGrid.js (162415 => 162416)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/ScriptTimelineDataGrid.js        2014-01-21 02:55:52 UTC (rev 162415)
+++ trunk/Source/WebInspectorUI/UserInterface/ScriptTimelineDataGrid.js        2014-01-21 02:56:04 UTC (rev 162416)
</span><span class="lines">@@ -23,9 +23,9 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.ScriptTimelineDataGrid = function(columns)
</del><ins>+WebInspector.ScriptTimelineDataGrid = function(treeOutline, columns, editCallback, deleteCallback)
</ins><span class="cx"> {
</span><del>-    WebInspector.TimelineDataGrid.call(this, columns);
</del><ins>+    WebInspector.TimelineDataGrid.call(this, treeOutline, columns, editCallback, deleteCallback);
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> WebInspector.ScriptTimelineDataGrid.prototype = {
</span><span class="lines">@@ -35,7 +35,7 @@
</span><span class="cx"> 
</span><span class="cx">     callFramePopoverAnchorElement: function()
</span><span class="cx">     {
</span><del>-        return this.selectedNode.elementWithColumnIdentifier(&quot;resource&quot;);
</del><ins>+        return this.selectedNode.elementWithColumnIdentifier(&quot;location&quot;);
</ins><span class="cx">     }
</span><span class="cx"> }
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceScriptTimelineDataGridNodejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/ScriptTimelineDataGridNode.js (162415 => 162416)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/ScriptTimelineDataGridNode.js        2014-01-21 02:55:52 UTC (rev 162415)
+++ trunk/Source/WebInspectorUI/UserInterface/ScriptTimelineDataGridNode.js        2014-01-21 02:56:04 UTC (rev 162416)
</span><span class="lines">@@ -25,7 +25,7 @@
</span><span class="cx"> 
</span><span class="cx"> WebInspector.ScriptTimelineDataGridNode = function(scriptTimelineRecord, baseStartTime)
</span><span class="cx"> {
</span><del>-    WebInspector.DataGridNode.call(this, {});
</del><ins>+    WebInspector.TimelineDataGridNode.call(this, false, null);
</ins><span class="cx"> 
</span><span class="cx">     this._record = scriptTimelineRecord;
</span><span class="cx">     this._baseStartTime = baseStartTime || 0;
</span><span class="lines">@@ -37,6 +37,7 @@
</span><span class="cx"> 
</span><span class="cx"> WebInspector.ScriptTimelineDataGridNode.prototype = {
</span><span class="cx">     constructor: WebInspector.ScriptTimelineDataGridNode,
</span><ins>+    __proto__: WebInspector.TimelineDataGridNode.prototype,
</ins><span class="cx"> 
</span><span class="cx">     // Public
</span><span class="cx"> 
</span><span class="lines">@@ -45,9 +46,15 @@
</span><span class="cx">         return this._record;
</span><span class="cx">     },
</span><span class="cx"> 
</span><ins>+    get records()
+    {
+        return [this._record];
+    },
+
</ins><span class="cx">     get data()
</span><span class="cx">     {
</span><del>-        return this._record;
</del><ins>+        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};
</ins><span class="cx">     },
</span><span class="cx"> 
</span><span class="cx">     createCellContent: function(columnIdentifier, cell)
</span><span class="lines">@@ -62,34 +69,6 @@
</span><span class="cx">         case &quot;details&quot;:
</span><span class="cx">             return value ? value : emptyValuePlaceholderString;
</span><span class="cx"> 
</span><del>-        case &quot;resource&quot;:
-            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(&quot;div&quot;);
-            icon.className = WebInspector.ScriptTimelineDataGridNode.IconStyleClassName;
-            fragment.appendChild(icon);
-
-            var titleElement = document.createElement(&quot;span&quot;);
-            sourceCodeLocation.populateLiveDisplayLocationString(titleElement, &quot;textContent&quot;);
-            fragment.appendChild(titleElement);
-
-            return fragment;
-
</del><span class="cx">         case &quot;startTime&quot;:
</span><span class="cx">             return isNaN(value) ? emptyValuePlaceholderString : Number.secondsToString(value - this._baseStartTime);
</span><span class="cx"> 
</span><span class="lines">@@ -97,8 +76,6 @@
</span><span class="cx">             return isNaN(value) ? emptyValuePlaceholderString : Number.secondsToString(value);
</span><span class="cx">         }
</span><span class="cx"> 
</span><del>-        return WebInspector.DataGridNode.prototype.createCellContent.call(this, columnIdentifier);
</del><ins>+        return WebInspector.TimelineDataGridNode.prototype.createCellContent.call(this, columnIdentifier, cell);
</ins><span class="cx">     }
</span><del>-}
-
-WebInspector.ScriptTimelineDataGridNode.prototype.__proto__ = WebInspector.DataGridNode.prototype;
</del><ins>+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceScriptTimelineRecordjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/ScriptTimelineRecord.js (162415 => 162416)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/ScriptTimelineRecord.js        2014-01-21 02:55:52 UTC (rev 162415)
+++ trunk/Source/WebInspectorUI/UserInterface/ScriptTimelineRecord.js        2014-01-21 02:56:04 UTC (rev 162416)
</span><span class="lines">@@ -63,6 +63,10 @@
</span><span class="cx">     }
</span><span class="cx"> };
</span><span class="cx"> 
</span><ins>+WebInspector.ScriptTimelineRecord.TypeIdentifier = &quot;script-timeline-record&quot;;
+WebInspector.ScriptTimelineRecord.EventTypeCookieKey = &quot;script-timeline-record-event-type&quot;;
+WebInspector.ScriptTimelineRecord.DetailsCookieKey = &quot;script-timeline-record-details&quot;;
+
</ins><span class="cx"> WebInspector.ScriptTimelineRecord.prototype = {
</span><span class="cx">     constructor: WebInspector.ScriptTimelineRecord,
</span><span class="cx"> 
</span><span class="lines">@@ -76,6 +80,14 @@
</span><span class="cx">     get details()
</span><span class="cx">     {
</span><span class="cx">         return this._details;
</span><ins>+    },
+
+    saveIdentityToCookie: function(cookie)
+    {
+        WebInspector.TimelineRecord.prototype.saveIdentityToCookie.call(this, cookie);
+
+        cookie[WebInspector.ScriptTimelineRecord.EventTypeCookieKey] = this._eventType;
+        cookie[WebInspector.ScriptTimelineRecord.DetailsCookieKey] = this._details;
</ins><span class="cx">     }
</span><span class="cx"> };
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceScriptTimelineViewcssfromrev162415trunkSourceWebInspectorUIUserInterfaceScriptTimelineDataGridjs"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebInspectorUI/UserInterface/ScriptTimelineView.css (from rev 162415, trunk/Source/WebInspectorUI/UserInterface/ScriptTimelineDataGrid.js) (0 => 162416)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/ScriptTimelineView.css                                (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/ScriptTimelineView.css        2014-01-21 02:56:04 UTC (rev 162416)
</span><span class="lines">@@ -0,0 +1,40 @@
</span><ins>+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.timeline-view.script &gt; .data-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.timeline-view.script &gt; .data-grid .eventType-column {
+    border-right: none;
+}
+
+.sidebar &gt; .panel.timeline.timeline-content-view-showing .navigation-sidebar-panel-content-tree-outline.script .item .subtitle {
+    display: none;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceScriptTimelineViewjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/ScriptTimelineView.js (0 => 162416)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/ScriptTimelineView.js                                (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/ScriptTimelineView.js        2014-01-21 02:56:04 UTC (rev 162416)
</span><span class="lines">@@ -0,0 +1,180 @@
</span><ins>+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ScriptTimelineView = 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.ScriptTimelineView.TreeOutlineStyleClassName);
+
+    var columns = {eventType: {}, location: {}, details: {}, startTime: {}, duration: {}};
+
+    columns.eventType.title = WebInspector.UIString(&quot;Type&quot;);
+    columns.eventType.width = &quot;15%&quot;;
+    columns.eventType.scopeBar = WebInspector.TimelineDataGrid.createColumnScopeBar(&quot;script&quot;, WebInspector.ScriptTimelineRecord.EventType);
+    columns.eventType.hidden = true;
+
+    columns.location.title = WebInspector.UIString(&quot;Location&quot;);
+    columns.location.width = &quot;15%&quot;;
+
+    columns.details.title = WebInspector.UIString(&quot;Details&quot;);
+    columns.details.width = &quot;15%&quot;;
+
+    columns.startTime.title = WebInspector.UIString(&quot;Start Time&quot;);
+    columns.startTime.width = &quot;10%&quot;;
+    columns.startTime.aligned = &quot;right&quot;;
+    columns.startTime.sort = &quot;ascending&quot;;
+
+    columns.duration.title = WebInspector.UIString(&quot;Duration&quot;);
+    columns.duration.width = &quot;10%&quot;;
+    columns.duration.aligned = &quot;right&quot;;
+
+    for (var column in columns)
+        columns[column].sortable = true;
+
+    this._dataGrid = new WebInspector.ScriptTimelineDataGrid(this.navigationSidebarTreeOutline, columns);
+    this._dataGrid.addEventListener(WebInspector.TimelineDataGrid.Event.FiltersDidChange, this._dataGridFiltersDidChange, this);
+
+    this.element.classList.add(WebInspector.ScriptTimelineView.StyleClassName);
+    this.element.appendChild(this._dataGrid.element);
+
+    this._pendingRecords = [];
+};
+
+WebInspector.ScriptTimelineView.StyleClassName = &quot;script&quot;;
+WebInspector.ScriptTimelineView.TreeOutlineStyleClassName = &quot;script&quot;;
+
+WebInspector.ScriptTimelineView.prototype = {
+    constructor: WebInspector.ScriptTimelineView,
+    __proto__: WebInspector.TimelineView.prototype,
+
+    // Public
+
+    get navigationSidebarTreeOutlineLabel()
+    {
+        return WebInspector.UIString(&quot;Records&quot;);
+    },
+
+    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._scriptTimeline)
+            this._scriptTimeline.removeEventListener(null, null, this);
+
+        this._scriptTimeline = WebInspector.timelineManager.recording.timelines.get(WebInspector.TimelineRecord.Type.Script);
+        console.assert(this._scriptTimeline);
+
+        this._scriptTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._scriptTimelineRecordAdded, this);
+    },
+
+    // Private
+
+    _processPendingRecords: function()
+    {
+        if (!this._pendingRecords.length)
+            return;
+
+        for (var scriptTimelineRecord of this._pendingRecords) {
+            var treeElement = new WebInspector.TimelineRecordTreeElement(scriptTimelineRecord, true);
+            var dataGridNode = new WebInspector.ScriptTimelineDataGridNode(scriptTimelineRecord, this.zeroTime);
+
+            this._dataGrid.addRowInSortOrder(treeElement, dataGridNode);
+        }
+
+        this._pendingRecords = [];
+    },
+
+    _scriptTimelineRecordAdded: function(event)
+    {
+        var scriptTimelineRecord = event.data.record;
+        console.assert(scriptTimelineRecord instanceof WebInspector.ScriptTimelineRecord);
+
+        this._pendingRecords.push(scriptTimelineRecord);
+
+        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(&quot;Unknown tree element selected.&quot;);
+            return;
+        }
+
+        if (!treeElement.record.sourceCodeLocation) {
+            WebInspector.timelineSidebarPanel.showTimelineView(WebInspector.TimelineRecord.Type.Script);
+            return;
+        }
+
+        WebInspector.resourceSidebarPanel.showOriginalOrFormattedSourceCodeLocation(treeElement.record.sourceCodeLocation);
+    }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceSourceCodeTimelineTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/SourceCodeTimelineTreeElement.js (162415 => 162416)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/SourceCodeTimelineTreeElement.js        2014-01-21 02:55:52 UTC (rev 162415)
+++ trunk/Source/WebInspectorUI/UserInterface/SourceCodeTimelineTreeElement.js        2014-01-21 02:56:04 UTC (rev 162416)
</span><span class="lines">@@ -23,99 +23,23 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.SourceCodeTimelineTreeElement = function(sourceCodeTimeline)
</del><ins>+WebInspector.SourceCodeTimelineTreeElement = function(sourceCodeTimeline, showFullLocationSubtitle)
</ins><span class="cx"> {
</span><span class="cx">     console.assert(sourceCodeTimeline);
</span><span class="cx"> 
</span><span class="cx">     this._sourceCodeTimeline = sourceCodeTimeline;
</span><span class="cx"> 
</span><del>-    var title = &quot;&quot;;
-
-    var subtitle = &quot;&quot;;
-    var sourceCodeLocation = sourceCodeTimeline.sourceCodeLocation;
-    if (sourceCodeLocation) {
-        // FIXME: This needs to live update the subtitle in response to the WebInspector.SourceCodeLocation.Event.DisplayLocationChanged event.
-        subtitle = WebInspector.UIString(&quot;line &quot;) + (sourceCodeLocation.displayLineNumber + 1); // The user visible line number is 1-based.
-        if (sourceCodeLocation.displayColumnNumber &gt; WebInspector.SourceCodeLocation.LargeColumnNumber)
-            subtitle += &quot;:&quot; + (sourceCodeLocation.displayColumnNumber + 1); // The user visible column number is 1-based.
-    }
-
-    var iconStyleClass = null;
-
-    switch (sourceCodeTimeline.recordType) {
-    case WebInspector.TimelineRecord.Type.Layout:
-        switch (sourceCodeTimeline.recordEventType) {
-        case WebInspector.LayoutTimelineRecord.EventType.InvalidateStyles:
-            title = WebInspector.UIString(&quot;Styles Invalidated&quot;);
-            iconStyleClass = WebInspector.SourceCodeTimelineTreeElement.StyleRecordIconStyleClass;
-            break;
-        case WebInspector.LayoutTimelineRecord.EventType.RecalculateStyles:
-            title = WebInspector.UIString(&quot;Styles Recalculated&quot;);
-            iconStyleClass = WebInspector.SourceCodeTimelineTreeElement.StyleRecordIconStyleClass;
-            break;
-        case WebInspector.LayoutTimelineRecord.EventType.InvalidateLayout:
-            title = WebInspector.UIString(&quot;Layout Invalidated&quot;);
-            iconStyleClass = WebInspector.SourceCodeTimelineTreeElement.LayoutRecordIconStyleClass;
-            break;
-        case WebInspector.LayoutTimelineRecord.EventType.Layout:
-            title = WebInspector.UIString(&quot;Layout&quot;);
-            iconStyleClass = WebInspector.SourceCodeTimelineTreeElement.LayoutRecordIconStyleClass;
-            break;
-        case WebInspector.LayoutTimelineRecord.EventType.Paint:
-            title = WebInspector.UIString(&quot;Paint&quot;);
-            iconStyleClass = WebInspector.SourceCodeTimelineTreeElement.PaintRecordIconStyleClass;
-            break;
-        }
-
-    case WebInspector.TimelineRecord.Type.Script:
-        switch (sourceCodeTimeline.recordEventType) {
-        case WebInspector.ScriptTimelineRecord.EventType.ScriptEvaluated:
-            title = WebInspector.UIString(&quot;Script Evaluated&quot;);
-            iconStyleClass = WebInspector.SourceCodeTimelineTreeElement.EvaluatedRecordIconStyleClass;
-            break;
-        case WebInspector.ScriptTimelineRecord.EventType.EventDispatched:
-            title = WebInspector.UIString(&quot;Event Dispatched&quot;);
-            subtitle += &quot; \u2014 &quot; + sourceCodeTimeline.records[0].details;
-            iconStyleClass = WebInspector.SourceCodeTimelineTreeElement.EventRecordIconStyleClass;
-            break;
-        case WebInspector.ScriptTimelineRecord.EventType.TimerFired:
-            title = WebInspector.UIString(&quot;Timer Fired&quot;);
-            iconStyleClass = WebInspector.SourceCodeTimelineTreeElement.TimerRecordIconStyleClass;
-            break;
-        case WebInspector.ScriptTimelineRecord.EventType.TimerInstalled:
-            title = WebInspector.UIString(&quot;Timer Installed&quot;);
-            iconStyleClass = WebInspector.SourceCodeTimelineTreeElement.TimerRecordIconStyleClass;
-            break;
-        case WebInspector.ScriptTimelineRecord.EventType.TimerRemoved:
-            title = WebInspector.UIString(&quot;Timer Removed&quot;);
-            iconStyleClass = WebInspector.SourceCodeTimelineTreeElement.TimerRecordIconStyleClass;
-            break;
-        case WebInspector.ScriptTimelineRecord.EventType.AnimationFrameFired:
-            title = WebInspector.UIString(&quot;Animation Frame Fired&quot;);
-            iconStyleClass = WebInspector.SourceCodeTimelineTreeElement.AnimationRecordIconStyleClass;
-            break;
-        }
-    }
-
-    WebInspector.GeneralTreeElement.call(this, [iconStyleClass], title, subtitle, sourceCodeTimeline, false);
-
-    this.small = true;
</del><ins>+    WebInspector.TimelineRecordTreeElement.call(this, sourceCodeTimeline.records[0], showFullLocationSubtitle, sourceCodeTimeline.sourceCodeLocation, sourceCodeTimeline);
</ins><span class="cx"> };
</span><span class="cx"> 
</span><del>-WebInspector.SourceCodeTimelineTreeElement.StyleRecordIconStyleClass = &quot;style-record&quot;;
-WebInspector.SourceCodeTimelineTreeElement.LayoutRecordIconStyleClass = &quot;layout-record&quot;;
-WebInspector.SourceCodeTimelineTreeElement.PaintRecordIconStyleClass = &quot;paint-record&quot;;
-WebInspector.SourceCodeTimelineTreeElement.EvaluatedRecordIconStyleClass = &quot;evaluated-record&quot;;
-WebInspector.SourceCodeTimelineTreeElement.EventRecordIconStyleClass = &quot;event-record&quot;;
-WebInspector.SourceCodeTimelineTreeElement.TimerRecordIconStyleClass = &quot;timer-record&quot;;
-WebInspector.SourceCodeTimelineTreeElement.AnimationRecordIconStyleClass = &quot;animation-record&quot;;
-
</del><span class="cx"> WebInspector.SourceCodeTimelineTreeElement.prototype = {
</span><span class="cx">     constructor: WebInspector.SourceCodeTimelineTreeElement,
</span><del>-    __proto__: WebInspector.GeneralTreeElement.prototype,
</del><ins>+    __proto__: WebInspector.TimelineRecordTreeElement.prototype,
</ins><span class="cx"> 
</span><span class="cx">     // Public
</span><span class="cx"> 
</span><ins>+    record: undefined,
+
</ins><span class="cx">     get sourceCodeTimeline()
</span><span class="cx">     {
</span><span class="cx">         return this._sourceCodeTimeline;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceTimelineContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/TimelineContentView.js (162415 => 162416)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/TimelineContentView.js        2014-01-21 02:55:52 UTC (rev 162415)
+++ trunk/Source/WebInspectorUI/UserInterface/TimelineContentView.js        2014-01-21 02:56:04 UTC (rev 162416)
</span><span class="lines">@@ -43,8 +43,8 @@
</span><span class="cx">     this._overviewTimelineView = new WebInspector.OverviewTimelineView;
</span><span class="cx">     this._discreteTimelineViewMap = {
</span><span class="cx">         [WebInspector.TimelineRecord.Type.Network]: new WebInspector.NetworkTimelineView,
</span><del>-        [WebInspector.TimelineRecord.Type.Layout]: new WebInspector.TimelineView,
-        [WebInspector.TimelineRecord.Type.Script]: new WebInspector.TimelineView
</del><ins>+        [WebInspector.TimelineRecord.Type.Layout]: new WebInspector.LayoutTimelineView,
+        [WebInspector.TimelineRecord.Type.Script]: new WebInspector.ScriptTimelineView
</ins><span class="cx">     };
</span><span class="cx"> 
</span><span class="cx">     function createPathComponent(displayName, className, representedObject)
</span><span class="lines">@@ -186,6 +186,11 @@
</span><span class="cx">             return false;
</span><span class="cx">         }
</span><span class="cx"> 
</span><ins>+        if (treeElement instanceof WebInspector.TimelineRecordTreeElement) {
+            var record = treeElement.record;
+            return checkTimeBounds(record.startTime, record.endTime);
+        }
+
</ins><span class="cx">         console.error(&quot;Unknown TreeElement, can't filter by time.&quot;);
</span><span class="cx">         return true;
</span><span class="cx">     },
</span><span class="lines">@@ -218,7 +223,6 @@
</span><span class="cx">         if (this._currentTimelineView) {
</span><span class="cx">             this._viewContainer.appendChild(this._currentTimelineView.element);
</span><span class="cx"> 
</span><del>-            this._currentTimelineView.zeroTime = this._timelineOverview.startTime;
</del><span class="cx">             this._currentTimelineView.startTime = this._timelineOverview.selectionStartTime;
</span><span class="cx">             this._currentTimelineView.endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
</span><span class="cx">             this._currentTimelineView.currentTime = this._currentTimeMarker.time;
</span><span class="lines">@@ -241,8 +245,14 @@
</span><span class="cx"> 
</span><span class="cx">         if (this._startTimeNeedsReset &amp;&amp; !isNaN(startTime)) {
</span><span class="cx">             var selectionOffset = this._timelineOverview.selectionStartTime - this._timelineOverview.startTime;
</span><ins>+
</ins><span class="cx">             this._timelineOverview.startTime = startTime;
</span><span class="cx">             this._timelineOverview.selectionStartTime = startTime + selectionOffset;
</span><ins>+
+            this._overviewTimelineView.zeroTime = startTime;
+            for (var identifier in this._discreteTimelineViewMap)
+                this._discreteTimelineViewMap[identifier].zeroTime = startTime;
+
</ins><span class="cx">             delete this._startTimeNeedsReset;
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="lines">@@ -304,14 +314,12 @@
</span><span class="cx">         this._currentTimeMarker.time = 0;
</span><span class="cx"> 
</span><span class="cx">         this._overviewTimelineView.reset();
</span><del>-
</del><span class="cx">         for (var identifier in this._discreteTimelineViewMap)
</span><span class="cx">             this._discreteTimelineViewMap[identifier].reset();
</span><span class="cx">     },
</span><span class="cx"> 
</span><span class="cx">     _timeRangeSelectionChanged: function(event)
</span><span class="cx">     {
</span><del>-        this._currentTimelineView.zeroTime = this._timelineOverview.startTime;
</del><span class="cx">         this._currentTimelineView.startTime = this._timelineOverview.selectionStartTime;
</span><span class="cx">         this._currentTimelineView.endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceTimelineDataGridcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/TimelineDataGrid.css (162415 => 162416)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/TimelineDataGrid.css        2014-01-21 02:55:52 UTC (rev 162415)
+++ trunk/Source/WebInspectorUI/UserInterface/TimelineDataGrid.css        2014-01-21 02:56:04 UTC (rev 162416)
</span><span class="lines">@@ -105,6 +105,41 @@
</span><span class="cx">     color: inherit;
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+.data-grid.timeline td .icon {
+    display: inline-block;
+    vertical-align: top;
+
+    width: 16px;
+    height: 16px;
+
+    margin-right: 2px;
+}
+
+.data-grid.timeline td .go-to-arrow {
+    float: right;
+
+    visibility: hidden;
+
+    margin-left: 2px;
+}
+
+.data-grid.timeline tr.selected .go-to-arrow,
+.data-grid.timeline tr:hover .go-to-arrow {
+    visibility: visible;
+}
+
+.data-grid.timeline td .subtitle {
+    color: rgba(0, 0, 0, 0.7);
+}
+
+.data-grid.timeline td .subtitle::before {
+    content: &quot; — &quot;;
+}
+
+.data-grid.timeline:focus tr.selected td .subtitle {
+    color: rgba(255, 255, 255, 0.9);
+}
+
</ins><span class="cx"> .data-grid.timeline &gt; .navigation-bar-container {
</span><span class="cx">     position: absolute;
</span><span class="cx">     bottom: 0;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceTimelineDataGridNodejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/TimelineDataGridNode.js (162415 => 162416)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/TimelineDataGridNode.js        2014-01-21 02:55:52 UTC (rev 162415)
+++ trunk/Source/WebInspectorUI/UserInterface/TimelineDataGridNode.js        2014-01-21 02:56:04 UTC (rev 162416)
</span><span class="lines">@@ -57,23 +57,130 @@
</span><span class="cx"> 
</span><span class="cx">     get data()
</span><span class="cx">     {
</span><ins>+        if (!this._graphDataSource)
+            return {};
+
</ins><span class="cx">         var records = this.records || [];
</span><span class="cx">         return {graph: records.length ? records[0].startTime : 0};
</span><span class="cx">     },
</span><span class="cx"> 
</span><span class="cx">     createCellContent: function(columnIdentifier, cell)
</span><span class="cx">     {
</span><del>-        if (columnIdentifier === &quot;graph&quot;) {
</del><ins>+        if (columnIdentifier === &quot;graph&quot; &amp;&amp; this._graphDataSource) {
</ins><span class="cx">             this.refreshGraph();
</span><span class="cx">             return this._graphContainerElement;
</span><span class="cx">         }
</span><span class="cx"> 
</span><ins>+        var value = this.data[columnIdentifier];
+        if (!value)
+            return &quot;\u2014&quot;;
+
+        if (value instanceof WebInspector.SourceCodeLocation) {
+            if (value.sourceCode instanceof WebInspector.Resource) {
+                cell.classList.add(WebInspector.ResourceTreeElement.ResourceIconStyleClassName);
+                cell.classList.add(value.sourceCode.type);
+            } else if (value.sourceCode instanceof WebInspector.Script) {
+                if (value.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(&quot;Unknown SourceCode subclass.&quot;);
+
+            // Give the whole cell a tooltip and keep it up to date.
+            value.populateLiveDisplayLocationTooltip(cell);
+
+            var fragment = document.createDocumentFragment();
+
+            var goToArrowButtonLink = WebInspector.createSourceCodeLocationLink(value, false, true);
+            fragment.appendChild(goToArrowButtonLink);
+
+            var icon = document.createElement(&quot;div&quot;);
+            icon.className = WebInspector.ScriptTimelineDataGridNode.IconStyleClassName;
+            fragment.appendChild(icon);
+
+            var titleElement = document.createElement(&quot;span&quot;);
+            value.populateLiveDisplayLocationString(titleElement, &quot;textContent&quot;);
+            fragment.appendChild(titleElement);
+
+            return fragment;
+        }
+
+        if (value instanceof WebInspector.CallFrame) {
+            var callFrame = value;
+
+            var isAnonymousFunction = false;
+            var functionName = callFrame.functionName;
+            if (!functionName) {
+                functionName = WebInspector.UIString(&quot;(anonymous function)&quot;);
+                isAnonymousFunction = true;
+            }
+
+            cell.classList.add(WebInspector.CallFrameTreeElement.FunctionIconStyleClassName);
+
+            var fragment = document.createDocumentFragment();
+
+            if (callFrame.sourceCodeLocation &amp;&amp; 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(&quot;div&quot;);
+                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(&quot;Unknown SourceCode subclass.&quot;);
+
+                    var titleElement = document.createElement(&quot;span&quot;);
+                    callFrame.sourceCodeLocation.populateLiveDisplayLocationString(titleElement, &quot;textContent&quot;);
+
+                    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(&quot;span&quot;);
+                    subtitleElement.className = WebInspector.LayoutTimelineDataGridNode.SubtitleStyleClassName;
+                    callFrame.sourceCodeLocation.populateLiveDisplayLocationString(subtitleElement, &quot;textContent&quot;);
+
+                    fragment.appendChild(subtitleElement);
+                }
+
+                return fragment;
+            }
+
+            var icon = document.createElement(&quot;div&quot;);
+            icon.className = WebInspector.LayoutTimelineDataGridNode.IconStyleClassName;
+            fragment.appendChild(icon);
+
+            fragment.appendChild(document.createTextNode(functionName));
+
+            return fragment;
+        }
+
</ins><span class="cx">         return WebInspector.DataGridNode.prototype.createCellContent.call(this, columnIdentifier, cell);
</span><span class="cx">     },
</span><span class="cx"> 
</span><span class="cx">     refresh: function()
</span><span class="cx">     {
</span><del>-        if (this._graphOnly) {
</del><ins>+        if (this._graphDataSource &amp;&amp; this._graphOnly) {
</ins><span class="cx">             this.refreshGraph();
</span><span class="cx">             return;
</span><span class="cx">         }
</span><span class="lines">@@ -83,6 +190,9 @@
</span><span class="cx"> 
</span><span class="cx">     refreshGraph: function()
</span><span class="cx">     {
</span><ins>+        if (!this._graphDataSource)
+            return;
+
</ins><span class="cx">         if (this._scheduledGraphRefreshIdentifier) {
</span><span class="cx">             cancelAnimationFrame(this._scheduledGraphRefreshIdentifier);
</span><span class="cx">             delete this._scheduledGraphRefreshIdentifier;
</span><span class="lines">@@ -107,7 +217,7 @@
</span><span class="cx"> 
</span><span class="cx">     needsGraphRefresh: function()
</span><span class="cx">     {
</span><del>-        if (this._scheduledGraphRefreshIdentifier)
</del><ins>+        if (!this._graphDataSource || this._scheduledGraphRefreshIdentifier)
</ins><span class="cx">             return;
</span><span class="cx"> 
</span><span class="cx">         this._scheduledGraphRefreshIdentifier = requestAnimationFrame(this.refreshGraph.bind(this));
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceTimelineRecordjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/TimelineRecord.js (162415 => 162416)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/TimelineRecord.js        2014-01-21 02:55:52 UTC (rev 162415)
+++ trunk/Source/WebInspectorUI/UserInterface/TimelineRecord.js        2014-01-21 02:56:04 UTC (rev 162416)
</span><span class="lines">@@ -49,6 +49,13 @@
</span><span class="cx">     Script: &quot;timeline-record-type-script&quot;
</span><span class="cx"> };
</span><span class="cx"> 
</span><ins>+WebInspector.TimelineRecord.TypeIdentifier = &quot;timeline-record&quot;;
+WebInspector.TimelineRecord.SourceCodeURLCookieKey = &quot;timeline-record-source-code-url&quot;;
+WebInspector.TimelineRecord.SourceCodeLocationLineCookieKey = &quot;timeline-record-source-code-location-line&quot;;
+WebInspector.TimelineRecord.SourceCodeLocationColumnCookieKey = &quot;timeline-record-source-code-location-column&quot;;
+WebInspector.TimelineRecord.SourceCodeURLCookieKey = &quot;timeline-record-source-code-url&quot;;
+WebInspector.TimelineRecord.TypeCookieKey = &quot;timeline-record-type&quot;;
+
</ins><span class="cx"> WebInspector.TimelineRecord.prototype = {
</span><span class="cx">     constructor: WebInspector.TimelineRecord,
</span><span class="cx"> 
</span><span class="lines">@@ -130,6 +137,14 @@
</span><span class="cx">     get sourceCodeLocation()
</span><span class="cx">     {
</span><span class="cx">         return this._sourceCodeLocation;
</span><ins>+    },
+
+    saveIdentityToCookie: function(cookie)
+    {
+        cookie[WebInspector.TimelineRecord.SourceCodeURLCookieKey] = this._sourceCodeLocation ? this._sourceCodeLocation.sourceCode.url ? this._sourceCodeLocation.sourceCode.url.hash : null : null;
+        cookie[WebInspector.TimelineRecord.SourceCodeLocationLineCookieKey] = this._sourceCodeLocation ? this._sourceCodeLocation.lineNumber : null;
+        cookie[WebInspector.TimelineRecord.SourceCodeLocationColumnCookieKey] = this._sourceCodeLocation ? this._sourceCodeLocation.columnNumber : null;
+        cookie[WebInspector.TimelineRecord.TypeCookieKey] = this._type || null;
</ins><span class="cx">     }
</span><span class="cx"> };
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceTimelineRecordTreeElementjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/TimelineRecordTreeElement.js (0 => 162416)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/TimelineRecordTreeElement.js                                (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/TimelineRecordTreeElement.js        2014-01-21 02:56:04 UTC (rev 162416)
</span><span class="lines">@@ -0,0 +1,146 @@
</span><ins>+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelineRecordTreeElement = function(timelineRecord, showFullLocationSubtitle, sourceCodeLocation, representedObject)
+{
+    console.assert(timelineRecord);
+
+    this._record = timelineRecord;
+    this._sourceCodeLocation = sourceCodeLocation || timelineRecord.sourceCodeLocation;
+
+    var title = &quot;&quot;;
+    var subtitle = &quot;&quot;;
+
+    if (this._sourceCodeLocation) {
+        // FIXME: This needs to live update the subtitle in response to the WebInspector.SourceCodeLocation.Event.DisplayLocationChanged event.
+
+        if (showFullLocationSubtitle) {
+            subtitle = this._sourceCodeLocation.displayLocationString(WebInspector.SourceCodeLocation.ColumnStyle.OnlyIfLarge);
+        } else {
+            subtitle = WebInspector.UIString(&quot;line &quot;) + (this._sourceCodeLocation.displayLineNumber + 1); // The user visible line number is 1-based.
+            if (this._sourceCodeLocation.displayColumnNumber &gt; WebInspector.SourceCodeLocation.LargeColumnNumber)
+                subtitle += &quot;:&quot; + (this._sourceCodeLocation.displayColumnNumber + 1); // The user visible column number is 1-based.
+        }
+    }
+
+    var iconStyleClass = null;
+
+    switch (timelineRecord.type) {
+    case WebInspector.TimelineRecord.Type.Layout:
+        switch (timelineRecord.eventType) {
+        case WebInspector.LayoutTimelineRecord.EventType.InvalidateStyles:
+            title = WebInspector.UIString(&quot;Styles Invalidated&quot;);
+            iconStyleClass = WebInspector.TimelineRecordTreeElement.StyleRecordIconStyleClass;
+            break;
+        case WebInspector.LayoutTimelineRecord.EventType.RecalculateStyles:
+            title = WebInspector.UIString(&quot;Styles Recalculated&quot;);
+            iconStyleClass = WebInspector.TimelineRecordTreeElement.StyleRecordIconStyleClass;
+            break;
+        case WebInspector.LayoutTimelineRecord.EventType.InvalidateLayout:
+            title = WebInspector.UIString(&quot;Layout Invalidated&quot;);
+            iconStyleClass = WebInspector.TimelineRecordTreeElement.LayoutRecordIconStyleClass;
+            break;
+        case WebInspector.LayoutTimelineRecord.EventType.Layout:
+            title = WebInspector.UIString(&quot;Layout&quot;);
+            iconStyleClass = WebInspector.TimelineRecordTreeElement.LayoutRecordIconStyleClass;
+            break;
+        case WebInspector.LayoutTimelineRecord.EventType.Paint:
+            title = WebInspector.UIString(&quot;Paint&quot;);
+            iconStyleClass = WebInspector.TimelineRecordTreeElement.PaintRecordIconStyleClass;
+            break;
+        default:
+            console.error(&quot;Unknown LayoutTimelineRecord eventType: &quot; + timelineRecord.eventType, timelineRecord);
+        }
+
+        break;
+
+    case WebInspector.TimelineRecord.Type.Script:
+        switch (timelineRecord.eventType) {
+        case WebInspector.ScriptTimelineRecord.EventType.ScriptEvaluated:
+            title = WebInspector.UIString(&quot;Script Evaluated&quot;);
+            iconStyleClass = WebInspector.TimelineRecordTreeElement.EvaluatedRecordIconStyleClass;
+            break;
+        case WebInspector.ScriptTimelineRecord.EventType.EventDispatched:
+            title = WebInspector.UIString(&quot;Event Dispatched&quot;);
+            if (timelineRecord.details)
+                subtitle += &quot; \u2014 &quot; + timelineRecord.details;
+            iconStyleClass = WebInspector.TimelineRecordTreeElement.EventRecordIconStyleClass;
+            break;
+        case WebInspector.ScriptTimelineRecord.EventType.TimerFired:
+            title = WebInspector.UIString(&quot;Timer Fired&quot;);
+            iconStyleClass = WebInspector.TimelineRecordTreeElement.TimerRecordIconStyleClass;
+            break;
+        case WebInspector.ScriptTimelineRecord.EventType.TimerInstalled:
+            title = WebInspector.UIString(&quot;Timer Installed&quot;);
+            iconStyleClass = WebInspector.TimelineRecordTreeElement.TimerRecordIconStyleClass;
+            break;
+        case WebInspector.ScriptTimelineRecord.EventType.TimerRemoved:
+            title = WebInspector.UIString(&quot;Timer Removed&quot;);
+            iconStyleClass = WebInspector.TimelineRecordTreeElement.TimerRecordIconStyleClass;
+            break;
+        case WebInspector.ScriptTimelineRecord.EventType.AnimationFrameFired:
+            title = WebInspector.UIString(&quot;Animation Frame Fired&quot;);
+            iconStyleClass = WebInspector.TimelineRecordTreeElement.AnimationRecordIconStyleClass;
+            break;
+        default:
+            console.error(&quot;Unknown ScriptTimelineRecord eventType: &quot; + timelineRecord.eventType, timelineRecord);
+        }
+
+        break;
+
+    default:
+        console.error(&quot;Unknown TimelineRecord type: &quot; + timelineRecord.type, timelineRecord);
+    }
+
+    WebInspector.GeneralTreeElement.call(this, [iconStyleClass], title, subtitle, representedObject || timelineRecord, false);
+
+    this.small = true;
+};
+
+WebInspector.TimelineRecordTreeElement.StyleRecordIconStyleClass = &quot;style-record&quot;;
+WebInspector.TimelineRecordTreeElement.LayoutRecordIconStyleClass = &quot;layout-record&quot;;
+WebInspector.TimelineRecordTreeElement.PaintRecordIconStyleClass = &quot;paint-record&quot;;
+WebInspector.TimelineRecordTreeElement.EvaluatedRecordIconStyleClass = &quot;evaluated-record&quot;;
+WebInspector.TimelineRecordTreeElement.EventRecordIconStyleClass = &quot;event-record&quot;;
+WebInspector.TimelineRecordTreeElement.TimerRecordIconStyleClass = &quot;timer-record&quot;;
+WebInspector.TimelineRecordTreeElement.AnimationRecordIconStyleClass = &quot;animation-record&quot;;
+
+WebInspector.TimelineRecordTreeElement.prototype = {
+    constructor: WebInspector.TimelineRecordTreeElement,
+    __proto__: WebInspector.GeneralTreeElement.prototype,
+
+    // Public
+
+    get record()
+    {
+        return this._record;
+    },
+
+    get filterableData()
+    {
+        var url = this._sourceCodeLocation ? this._sourceCodeLocation.sourceCode.url : &quot;&quot;;
+        return {text: [this.mainTitle, url || &quot;&quot;, this._record.details || &quot;&quot;]};
+    }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceTimelineSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/TimelineSidebarPanel.js (162415 => 162416)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/TimelineSidebarPanel.js        2014-01-21 02:55:52 UTC (rev 162415)
+++ trunk/Source/WebInspectorUI/UserInterface/TimelineSidebarPanel.js        2014-01-21 02:56:04 UTC (rev 162416)
</span><span class="lines">@@ -131,7 +131,51 @@
</span><span class="cx">         if (representedObject instanceof WebInspector.Frame)
</span><span class="cx">             representedObject = representedObject.mainResource;
</span><span class="cx"> 
</span><del>-        return this.contentTreeOutline.getCachedTreeElement(representedObject);
</del><ins>+        var foundTreeElement = this.contentTreeOutline.getCachedTreeElement(representedObject);
+        if (foundTreeElement)
+            return foundTreeElement;
+
+        // Look for TreeElements loosely based on represented objects that can contain the represented
+        // object we are really looking for. This allows a SourceCodeTimelineTreeElement or a
+        // TimelineRecordTreeElement to stay selected when the Resource it represents is showing.
+
+        function looselyCompareRepresentedObjects(candidateTreeElement)
+        {
+            if (!candidateTreeElement)
+                return false;
+
+            var candidateRepresentedObject = candidateTreeElement.representedObject;
+            if (candidateRepresentedObject instanceof WebInspector.SourceCodeTimeline) {
+                if (candidateRepresentedObject.sourceCode === representedObject)
+                    return true;
+                return false;
+            }
+
+            if (candidateRepresentedObject instanceof WebInspector.TimelineRecord) {
+                if (!candidateRepresentedObject.sourceCodeLocation)
+                    return false;
+                if (candidateRepresentedObject.sourceCodeLocation.sourceCode === representedObject)
+                    return true;
+                return false;
+            }
+
+            console.error(&quot;Unknown TreeElement&quot;);
+            return false;
+        }
+
+        // Check the selected tree element first so we don't need to do a longer search and it is
+        // likely to be the best candidate for the current view.
+        if (looselyCompareRepresentedObjects(this.contentTreeOutline.selectedTreeElement))
+            return this.contentTreeOutline.selectedTreeElement;
+
+        var currentTreeElement = this._contentTreeOutline.children[0];
+        while (currentTreeElement &amp;&amp; !currentTreeElement.root) {
+            if (looselyCompareRepresentedObjects(currentTreeElement))
+                return currentTreeElement;
+            currentTreeElement = currentTreeElement.traverseNextTreeElement(false, null, false);
+        }
+
+        return null;
</ins><span class="cx">     },
</span><span class="cx"> 
</span><span class="cx">     get contentTreeOutlineLabel()
</span></span></pre>
</div>
</div>

</body>
</html>