<!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>[197487] 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/197487">197487</a></dd>
<dt>Author</dt> <dd>mattbaker@apple.com</dd>
<dt>Date</dt> <dd>2016-03-02 19:45:50 -0800 (Wed, 02 Mar 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Timelines UI redesign: show content tree outline records in timeline data grids
https://bugs.webkit.org/show_bug.cgi?id=153032
<rdar://problem/24195317>
Reviewed by Timothy Hatcher.
This patch relocates the data shown in the Timelines navigation sidebar content tree outline
to a new grid column in each TimelineDataGrid. Logic for creating subtitles, goto arrow buttons,
and status elements (the progress spinner used for network resources) has been replicated in
the appropriate TimelineDataGridNode classes.
Duplicate logic contained in TimelineRecordTreeElement classes is left in place for now, but
will be removed in <https://webkit.org/b/153036>.
* UserInterface/Views/DataGrid.css:
(.data-grid td.error):
Use --error-text-color CSS variable.
* UserInterface/Views/DataGrid.js:
Removed GoToArrowClicked event.
(WebInspector.DataGridNode.prototype.createGoToArrowButton.buttonClicked): Deleted.
(WebInspector.DataGridNode.prototype.createGoToArrowButton): Deleted.
Now part of TimelineDataGridNode.
* UserInterface/Views/LayoutTimelineDataGridNode.js:
(WebInspector.LayoutTimelineDataGridNode):
(WebInspector.LayoutTimelineDataGridNode.prototype.get data):
Add name cell to row data.
(WebInspector.LayoutTimelineDataGridNode.prototype.createCellContent):
Create name cell.
* UserInterface/Views/LayoutTimelineView.css:
(.timeline-view.layout > .data-grid .eventType-column): Deleted.
Column border no longer hidden.
* UserInterface/Views/LayoutTimelineView.js:
(WebInspector.LayoutTimelineView):
Setup name column.
* UserInterface/Views/NetworkTimelineView.css:
(.timeline-view.network > .data-grid .name-column .subtitle):
Don't show subtitles in the Network grid's name column.
* UserInterface/Views/NetworkTimelineView.js:
(WebInspector.NetworkTimelineView):
Setup name column.
* UserInterface/Views/OverviewTimelineView.css:
(.timeline-view.overview > .data-grid th.graph-column > .timeline-ruler):
(.timeline-view.overview > .data-grid th.graph-column > .timeline-ruler > .header):
(.timeline-view.overview > .data-grid th):
(body.window-inactive .timeline-view.overview > .data-grid th):
(.timeline-view.overview .timeline-ruler > .event-markers):
(.timeline-view.overview > .data-grid):
(.timeline-view.overview > .timeline-ruler): Deleted.
(.timeline-view.overview > .timeline-ruler > .header): Deleted.
(body.window-inactive .timeline-view.overview > .timeline-ruler > .header): Deleted.
(.timeline-view.overview > .timeline-ruler > .event-markers): Deleted.
New styles for adding grid column headers and using a TimelineRuler as the
graph column header.
* UserInterface/Views/OverviewTimelineView.js:
(WebInspector.OverviewTimelineView):
Setup name column and add ruler to graph column header.
* UserInterface/Views/ProfileNodeDataGridNode.js:
(WebInspector.ProfileNodeDataGridNode):
Use cached data instead of creating row data at construction time.
(WebInspector.ProfileNodeDataGridNode.prototype.get data):
Add name cell to row data.
(WebInspector.ProfileNodeDataGridNode.prototype.createCellContent):
Create name cell.
(WebInspector.ProfileNodeDataGridNode.prototype._iconClassNameForProfileNode):
(WebInspector.ProfileNodeDataGridNode.prototype._titleForProfileNode):
Copied from ProfileNodeTreeElement.
* UserInterface/Views/RenderingFrameTimelineDataGridNode.js:
(WebInspector.RenderingFrameTimelineDataGridNode):
(WebInspector.RenderingFrameTimelineDataGridNode.prototype.get data):
Add name cell to row data.
(WebInspector.RenderingFrameTimelineDataGridNode.prototype.createCellContent):
Create name cell.
* UserInterface/Views/RenderingFrameTimelineView.js:
(WebInspector.RenderingFrameTimelineView):
Setup name column.
* UserInterface/Views/ResourceTimelineDataGridNode.js:
(WebInspector.ResourceTimelineDataGridNode):
Renamed "graphOnly" to "includesGraph", since resource rows in the overview
now show the name column in addition to the graph column. Resource events
LoadingDidFinish and LoadingDidFail now need to be handled for both types
of resource rows.
(WebInspector.ResourceTimelineDataGridNode.prototype.get data):
(WebInspector.ResourceTimelineDataGridNode.prototype.createCellContent):
Update resource status element and create name cell content.
(WebInspector.ResourceTimelineDataGridNode.prototype._createNameCellDocumentFragment):
Create DOM fragment with titles. Based on code in TimelineRecordTreeElement.
(WebInspector.ResourceTimelineDataGridNode.prototype._dataGridNodeGoToArrowClicked):
Show resource when goto arrow is clicked.
(WebInspector.ResourceTimelineDataGridNode.prototype._updateStatus):
Update name cell's text color and progress spinner.
* UserInterface/Views/ResourceTreeElement.css:
(.item.resource.failed):
(.item.resource.failed .subtitle):
Use --error-text-color CSS variable.
* UserInterface/Views/ScriptTimelineDataGridNode.js:
(WebInspector.ScriptTimelineDataGridNode):
(WebInspector.ScriptTimelineDataGridNode.prototype.createCellContent):
(WebInspector.ScriptTimelineDataGridNode.prototype._createNameCellDocumentFragment):
Create DOM fragment with titles. Based on code in TimelineRecordTreeElement.
* UserInterface/Views/ScriptTimelineView.js:
(WebInspector.ScriptTimelineView):
Setup name column.
* UserInterface/Views/SourceCodeTimelineTimelineDataGridNode.js:
(WebInspector.SourceCodeTimelineTimelineDataGridNode.prototype.createCellContent):
Added now that this node type is no longer "graph only".
(WebInspector.SourceCodeTimelineTimelineDataGridNode.prototype._createNameCellContent):
Create DOM fragment with titles. Based on code in TimelineRecordTreeElement.
* UserInterface/Views/TimelineDataGridNode.js:
(WebInspector.TimelineDataGridNode):
Renamed `graphOnly` to `includesGraph`.
(WebInspector.TimelineDataGridNode.prototype.createCellContent):
Removed icon element creation. This is now handled by the DataGrid.
(WebInspector.TimelineDataGridNode.prototype.refresh):
Refresh of all node cells after updating the graph.
(WebInspector.TimelineDataGridNode.prototype.createGoToArrowButton):
(WebInspector.TimelineDataGridNode.prototype.createGoToArrowButton.buttonClicked):
Relocated from DataGrid, as it's only used by TimelineDataGridNodes.
* UserInterface/Views/TimelineView.css:
(.timeline-view > .data-grid .indeterminate-progress-spinner):
Styles for grid cell progress spinners.
* UserInterface/Views/Variables.css:
(:root):
Added --error-text-color variable to remove duplication.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDataGridcss">trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDataGridjs">trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsLayoutTimelineDataGridNodejs">trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineDataGridNode.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsLayoutTimelineViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsLayoutTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNetworkTimelineViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNetworkTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsOverviewTimelineViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsOverviewTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsProfileNodeDataGridNodejs">trunk/Source/WebInspectorUI/UserInterface/Views/ProfileNodeDataGridNode.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineDataGridNodejs">trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineDataGridNode.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsResourceTimelineDataGridNodejs">trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimelineDataGridNode.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsResourceTreeElementcss">trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsScriptTimelineDataGridNodejs">trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineDataGridNode.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsScriptTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSourceCodeTimelineTimelineDataGridNodejs">trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTimelineTimelineDataGridNode.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineDataGridNodejs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGridNode.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVariablescss">trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (197486 => 197487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2016-03-03 03:30:30 UTC (rev 197486)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-03-03 03:45:50 UTC (rev 197487)
</span><span class="lines">@@ -1,5 +1,151 @@
</span><span class="cx"> 2016-03-02 Matt Baker <mattbaker@apple.com>
</span><span class="cx">
</span><ins>+ Web Inspector: Timelines UI redesign: show content tree outline records in timeline data grids
+ https://bugs.webkit.org/show_bug.cgi?id=153032
+ <rdar://problem/24195317>
+
+ Reviewed by Timothy Hatcher.
+
+ This patch relocates the data shown in the Timelines navigation sidebar content tree outline
+ to a new grid column in each TimelineDataGrid. Logic for creating subtitles, goto arrow buttons,
+ and status elements (the progress spinner used for network resources) has been replicated in
+ the appropriate TimelineDataGridNode classes.
+
+ Duplicate logic contained in TimelineRecordTreeElement classes is left in place for now, but
+ will be removed in <https://webkit.org/b/153036>.
+
+ * UserInterface/Views/DataGrid.css:
+ (.data-grid td.error):
+ Use --error-text-color CSS variable.
+
+ * UserInterface/Views/DataGrid.js:
+ Removed GoToArrowClicked event.
+ (WebInspector.DataGridNode.prototype.createGoToArrowButton.buttonClicked): Deleted.
+ (WebInspector.DataGridNode.prototype.createGoToArrowButton): Deleted.
+ Now part of TimelineDataGridNode.
+
+ * UserInterface/Views/LayoutTimelineDataGridNode.js:
+ (WebInspector.LayoutTimelineDataGridNode):
+ (WebInspector.LayoutTimelineDataGridNode.prototype.get data):
+ Add name cell to row data.
+ (WebInspector.LayoutTimelineDataGridNode.prototype.createCellContent):
+ Create name cell.
+
+ * UserInterface/Views/LayoutTimelineView.css:
+ (.timeline-view.layout > .data-grid .eventType-column): Deleted.
+ Column border no longer hidden.
+
+ * UserInterface/Views/LayoutTimelineView.js:
+ (WebInspector.LayoutTimelineView):
+ Setup name column.
+
+ * UserInterface/Views/NetworkTimelineView.css:
+ (.timeline-view.network > .data-grid .name-column .subtitle):
+ Don't show subtitles in the Network grid's name column.
+
+ * UserInterface/Views/NetworkTimelineView.js:
+ (WebInspector.NetworkTimelineView):
+ Setup name column.
+
+ * UserInterface/Views/OverviewTimelineView.css:
+ (.timeline-view.overview > .data-grid th.graph-column > .timeline-ruler):
+ (.timeline-view.overview > .data-grid th.graph-column > .timeline-ruler > .header):
+ (.timeline-view.overview > .data-grid th):
+ (body.window-inactive .timeline-view.overview > .data-grid th):
+ (.timeline-view.overview .timeline-ruler > .event-markers):
+ (.timeline-view.overview > .data-grid):
+ (.timeline-view.overview > .timeline-ruler): Deleted.
+ (.timeline-view.overview > .timeline-ruler > .header): Deleted.
+ (body.window-inactive .timeline-view.overview > .timeline-ruler > .header): Deleted.
+ (.timeline-view.overview > .timeline-ruler > .event-markers): Deleted.
+ New styles for adding grid column headers and using a TimelineRuler as the
+ graph column header.
+
+ * UserInterface/Views/OverviewTimelineView.js:
+ (WebInspector.OverviewTimelineView):
+ Setup name column and add ruler to graph column header.
+
+ * UserInterface/Views/ProfileNodeDataGridNode.js:
+ (WebInspector.ProfileNodeDataGridNode):
+ Use cached data instead of creating row data at construction time.
+ (WebInspector.ProfileNodeDataGridNode.prototype.get data):
+ Add name cell to row data.
+ (WebInspector.ProfileNodeDataGridNode.prototype.createCellContent):
+ Create name cell.
+ (WebInspector.ProfileNodeDataGridNode.prototype._iconClassNameForProfileNode):
+ (WebInspector.ProfileNodeDataGridNode.prototype._titleForProfileNode):
+ Copied from ProfileNodeTreeElement.
+
+ * UserInterface/Views/RenderingFrameTimelineDataGridNode.js:
+ (WebInspector.RenderingFrameTimelineDataGridNode):
+ (WebInspector.RenderingFrameTimelineDataGridNode.prototype.get data):
+ Add name cell to row data.
+ (WebInspector.RenderingFrameTimelineDataGridNode.prototype.createCellContent):
+ Create name cell.
+
+ * UserInterface/Views/RenderingFrameTimelineView.js:
+ (WebInspector.RenderingFrameTimelineView):
+ Setup name column.
+
+ * UserInterface/Views/ResourceTimelineDataGridNode.js:
+ (WebInspector.ResourceTimelineDataGridNode):
+ Renamed "graphOnly" to "includesGraph", since resource rows in the overview
+ now show the name column in addition to the graph column. Resource events
+ LoadingDidFinish and LoadingDidFail now need to be handled for both types
+ of resource rows.
+
+ (WebInspector.ResourceTimelineDataGridNode.prototype.get data):
+ (WebInspector.ResourceTimelineDataGridNode.prototype.createCellContent):
+ Update resource status element and create name cell content.
+ (WebInspector.ResourceTimelineDataGridNode.prototype._createNameCellDocumentFragment):
+ Create DOM fragment with titles. Based on code in TimelineRecordTreeElement.
+ (WebInspector.ResourceTimelineDataGridNode.prototype._dataGridNodeGoToArrowClicked):
+ Show resource when goto arrow is clicked.
+ (WebInspector.ResourceTimelineDataGridNode.prototype._updateStatus):
+ Update name cell's text color and progress spinner.
+
+ * UserInterface/Views/ResourceTreeElement.css:
+ (.item.resource.failed):
+ (.item.resource.failed .subtitle):
+ Use --error-text-color CSS variable.
+
+ * UserInterface/Views/ScriptTimelineDataGridNode.js:
+ (WebInspector.ScriptTimelineDataGridNode):
+ (WebInspector.ScriptTimelineDataGridNode.prototype.createCellContent):
+ (WebInspector.ScriptTimelineDataGridNode.prototype._createNameCellDocumentFragment):
+ Create DOM fragment with titles. Based on code in TimelineRecordTreeElement.
+
+ * UserInterface/Views/ScriptTimelineView.js:
+ (WebInspector.ScriptTimelineView):
+ Setup name column.
+
+ * UserInterface/Views/SourceCodeTimelineTimelineDataGridNode.js:
+ (WebInspector.SourceCodeTimelineTimelineDataGridNode.prototype.createCellContent):
+ Added now that this node type is no longer "graph only".
+ (WebInspector.SourceCodeTimelineTimelineDataGridNode.prototype._createNameCellContent):
+ Create DOM fragment with titles. Based on code in TimelineRecordTreeElement.
+
+ * UserInterface/Views/TimelineDataGridNode.js:
+ (WebInspector.TimelineDataGridNode):
+ Renamed `graphOnly` to `includesGraph`.
+ (WebInspector.TimelineDataGridNode.prototype.createCellContent):
+ Removed icon element creation. This is now handled by the DataGrid.
+ (WebInspector.TimelineDataGridNode.prototype.refresh):
+ Refresh of all node cells after updating the graph.
+ (WebInspector.TimelineDataGridNode.prototype.createGoToArrowButton):
+ (WebInspector.TimelineDataGridNode.prototype.createGoToArrowButton.buttonClicked):
+ Relocated from DataGrid, as it's only used by TimelineDataGridNodes.
+
+ * UserInterface/Views/TimelineView.css:
+ (.timeline-view > .data-grid .indeterminate-progress-spinner):
+ Styles for grid cell progress spinners.
+
+ * UserInterface/Views/Variables.css:
+ (:root):
+ Added --error-text-color variable to remove duplication.
+
+2016-03-02 Matt Baker <mattbaker@apple.com>
+
</ins><span class="cx"> Web Inspector: Timelines UI redesign: relocate recording controls to TimelineTabContentView's content browser
</span><span class="cx"> https://bugs.webkit.org/show_bug.cgi?id=153532
</span><span class="cx"> <rdar://problem/24361611>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDataGridcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css (197486 => 197487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css 2016-03-03 03:30:30 UTC (rev 197486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css 2016-03-03 03:45:50 UTC (rev 197487)
</span><span class="lines">@@ -264,7 +264,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .data-grid td.error {
</span><del>- color: hsl(0, 86%, 47%);
</del><ins>+ color: var(--error-text-color);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .data-grid tr.selected td.error {
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDataGridjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js (197486 => 197487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js 2016-03-03 03:30:30 UTC (rev 197486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js 2016-03-03 03:45:50 UTC (rev 197487)
</span><span class="lines">@@ -1397,8 +1397,7 @@
</span><span class="cx"> SortChanged: "datagrid-sort-changed",
</span><span class="cx"> SelectedNodeChanged: "datagrid-selected-node-changed",
</span><span class="cx"> ExpandedNode: "datagrid-expanded-node",
</span><del>- CollapsedNode: "datagrid-collapsed-node",
- GoToArrowClicked: "datagrid-go-to-arrow-clicked"
</del><ins>+ CollapsedNode: "datagrid-collapsed-node"
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> WebInspector.DataGrid.ResizeMethod = {
</span><span class="lines">@@ -1508,26 +1507,6 @@
</span><span class="cx"> this._element.appendChild(this.createCell(columnIdentifier));
</span><span class="cx"> }
</span><span class="cx">
</span><del>- createGoToArrowButton(cellElement)
- {
- function buttonClicked(event)
- {
- if (this.hidden || !this.revealed)
- return;
-
- event.stopPropagation();
-
- let columnIdentifier = cellElement.__columnIdentifier;
- this.dataGrid.dispatchEventToListeners(WebInspector.DataGrid.Event.GoToArrowClicked, {dataGridNode: this, columnIdentifier});
- }
-
- let button = WebInspector.createGoToArrowButton();
- button.addEventListener("click", buttonClicked.bind(this));
-
- let contentElement = cellElement.firstChild;
- contentElement.appendChild(button);
- }
-
</del><span class="cx"> refreshIfNeeded()
</span><span class="cx"> {
</span><span class="cx"> if (!this._needsRefresh)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsLayoutTimelineDataGridNodejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineDataGridNode.js (197486 => 197487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineDataGridNode.js 2016-03-03 03:30:30 UTC (rev 197486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineDataGridNode.js 2016-03-03 03:45:50 UTC (rev 197487)
</span><span class="lines">@@ -49,7 +49,7 @@
</span><span class="cx"> {
</span><span class="cx"> if (!this._cachedData) {
</span><span class="cx"> this._cachedData = {
</span><del>- eventType: this._record.eventType,
</del><ins>+ name: WebInspector.LayoutTimelineRecord.displayNameForEventType(this._record.eventType),
</ins><span class="cx"> width: this._record.width,
</span><span class="cx"> height: this._record.height,
</span><span class="cx"> area: this._record.width * this._record.height,
</span><span class="lines">@@ -67,8 +67,9 @@
</span><span class="cx"> var value = this.data[columnIdentifier];
</span><span class="cx">
</span><span class="cx"> switch (columnIdentifier) {
</span><del>- case "eventType":
- return WebInspector.LayoutTimelineRecord.displayNameForEventType(value);
</del><ins>+ case "name":
+ cell.classList.add(WebInspector.TimelineTabContentView.iconClassNameForRecord(this._record));
+ return value;
</ins><span class="cx">
</span><span class="cx"> case "width":
</span><span class="cx"> case "height":
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsLayoutTimelineViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.css (197486 => 197487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.css 2016-03-03 03:30:30 UTC (rev 197486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.css 2016-03-03 03:45:50 UTC (rev 197487)
</span><span class="lines">@@ -31,10 +31,6 @@
</span><span class="cx"> bottom: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.timeline-view.layout > .data-grid .eventType-column {
- border-right: none;
-}
-
</del><span class="cx"> .sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.layout .item .subtitle {
</span><span class="cx"> display: none;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsLayoutTimelineViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js (197486 => 197487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js 2016-03-03 03:30:30 UTC (rev 197486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js 2016-03-03 03:45:50 UTC (rev 197487)
</span><span class="lines">@@ -33,10 +33,10 @@
</span><span class="cx">
</span><span class="cx"> this.navigationSidebarTreeOutline.element.classList.add("layout");
</span><span class="cx">
</span><del>- var columns = {eventType: {}, location: {}, width: {}, height: {}, startTime: {}, totalTime: {}};
</del><ins>+ let columns = {name: {}, location: {}, width: {}, height: {}, startTime: {}, totalTime: {}};
</ins><span class="cx">
</span><del>- columns.eventType.title = WebInspector.UIString("Type");
- columns.eventType.width = "15%";
</del><ins>+ columns.name.title = WebInspector.UIString("Type");
+ columns.name.width = "15%";
</ins><span class="cx">
</span><span class="cx"> var typeToLabelMap = new Map;
</span><span class="cx"> for (var key in WebInspector.LayoutTimelineRecord.EventType) {
</span><span class="lines">@@ -44,10 +44,12 @@
</span><span class="cx"> typeToLabelMap.set(value, WebInspector.LayoutTimelineRecord.displayNameForEventType(value));
</span><span class="cx"> }
</span><span class="cx">
</span><del>- columns.eventType.scopeBar = WebInspector.TimelineDataGrid.createColumnScopeBar("layout", typeToLabelMap);
- columns.eventType.hidden = true;
- this._scopeBar = columns.eventType.scopeBar;
</del><ins>+ columns.name.scopeBar = WebInspector.TimelineDataGrid.createColumnScopeBar("layout", typeToLabelMap);
+ columns.name.disclosure = true;
+ columns.name.icon = true;
</ins><span class="cx">
</span><ins>+ this._scopeBar = columns.name.scopeBar;
+
</ins><span class="cx"> columns.location.title = WebInspector.UIString("Initiator");
</span><span class="cx"> columns.location.width = "25%";
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNetworkTimelineViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.css (197486 => 197487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.css 2016-03-03 03:30:30 UTC (rev 197486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.css 2016-03-03 03:45:50 UTC (rev 197487)
</span><span class="lines">@@ -31,6 +31,10 @@
</span><span class="cx"> bottom: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.timeline-view.network > .data-grid .name-column .subtitle {
+ display: none;
+}
+
</ins><span class="cx"> .sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.network .item .subtitle {
</span><span class="cx"> display: none;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNetworkTimelineViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js (197486 => 197487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js 2016-03-03 03:30:30 UTC (rev 197486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js 2016-03-03 03:45:50 UTC (rev 197487)
</span><span class="lines">@@ -34,8 +34,12 @@
</span><span class="cx"> this.navigationSidebarTreeOutline.disclosureButtons = false;
</span><span class="cx"> this.navigationSidebarTreeOutline.element.classList.add("network");
</span><span class="cx">
</span><del>- var columns = {domain: {}, type: {}, method: {}, scheme: {}, statusCode: {}, cached: {}, size: {}, transferSize: {}, requestSent: {}, latency: {}, duration: {}};
</del><ins>+ let columns = {name: {}, domain: {}, type: {}, method: {}, scheme: {}, statusCode: {}, cached: {}, size: {}, transferSize: {}, requestSent: {}, latency: {}, duration: {}};
</ins><span class="cx">
</span><ins>+ columns.name.title = WebInspector.UIString("Name");
+ columns.name.icon = true;
+ columns.name.width = "10%";
+
</ins><span class="cx"> columns.domain.title = WebInspector.UIString("Domain");
</span><span class="cx"> columns.domain.width = "10%";
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsOverviewTimelineViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.css (197486 => 197487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.css 2016-03-03 03:30:30 UTC (rev 197486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.css 2016-03-03 03:45:50 UTC (rev 197487)
</span><span class="lines">@@ -23,32 +23,33 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-.timeline-view.overview > .timeline-ruler {
</del><ins>+.timeline-view.overview > .data-grid th.graph-column > .timeline-ruler {
</ins><span class="cx"> position: absolute;
</span><span class="cx"> top: 0;
</span><del>- left: 0;
- right: 0;
</del><span class="cx"> bottom: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.timeline-view.overview > .timeline-ruler > .header {
- border-top: 1px solid var(--border-color);
- height: 23px;
</del><ins>+.timeline-view.overview > .data-grid th.graph-column > .timeline-ruler > .header {
+ border: none;
+ height: 22px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.timeline-view.overview > .timeline-ruler > .event-markers {
- top: 23px;
- border-top: 1px solid var(--border-color);
</del><ins>+.timeline-view.overview > .data-grid th.graph-column > .timeline-ruler > .event-markers {
+ top: 22px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .timeline-view.overview > .data-grid {
</span><span class="cx"> position: absolute;
</span><del>- top: 23px;
</del><ins>+ top: 0;
</ins><span class="cx"> left: 0;
</span><span class="cx"> right: 0;
</span><span class="cx"> bottom: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.timeline-view.overview > .data-grid th {
+ border-top: solid 1px var(--border-color);
+}
+
</ins><span class="cx"> .timeline-view.overview > .data-grid td.graph-column {
</span><span class="cx"> padding: 2px 0;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsOverviewTimelineViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.js (197486 => 197487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.js 2016-03-03 03:30:30 UTC (rev 197486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.js 2016-03-03 03:45:50 UTC (rev 197487)
</span><span class="lines">@@ -31,18 +31,24 @@
</span><span class="cx">
</span><span class="cx"> this._recording = recording;
</span><span class="cx">
</span><del>- var columns = {"graph": {width: "100%"}};
</del><ins>+ let columns = {name: {}, graph: {}};
</ins><span class="cx">
</span><ins>+ columns.name.title = WebInspector.UIString("Name");
+ columns.name.width = "20%";
+ columns.name.icon = true;
+ columns.name.disclosure = true;
+
+ this._timelineRuler = new WebInspector.TimelineRuler;
+ this._timelineRuler.allowsClippedLabels = true;
+
+ columns.graph.width = "80%";
+ columns.graph.headerView = this._timelineRuler;
+
</ins><span class="cx"> this._dataGrid = new WebInspector.DataGrid(columns);
</span><span class="cx"> this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
</span><del>- this._dataGrid.element.classList.add("no-header");
</del><span class="cx">
</span><span class="cx"> this._treeOutlineDataGridSynchronizer = new WebInspector.TreeOutlineDataGridSynchronizer(this.navigationSidebarTreeOutline, this._dataGrid);
</span><span class="cx">
</span><del>- this._timelineRuler = new WebInspector.TimelineRuler;
- this._timelineRuler.allowsClippedLabels = true;
- this.addSubview(this._timelineRuler);
-
</del><span class="cx"> this._currentTimeMarker = new WebInspector.TimelineMarker(0, WebInspector.TimelineMarker.Type.CurrentTime);
</span><span class="cx"> this._timelineRuler.addMarker(this._currentTimeMarker);
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsProfileNodeDataGridNodejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ProfileNodeDataGridNode.js (197486 => 197487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ProfileNodeDataGridNode.js 2016-03-03 03:30:30 UTC (rev 197486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ProfileNodeDataGridNode.js 2016-03-03 03:45:50 UTC (rev 197487)
</span><span class="lines">@@ -36,8 +36,7 @@
</span><span class="cx"> this._rangeStartTime = rangeStartTime || 0;
</span><span class="cx"> this._rangeEndTime = typeof rangeEndTime === "number" ? rangeEndTime : Infinity;
</span><span class="cx">
</span><del>- this._data = this._profileNode.computeCallInfoForTimeRange(this._rangeStartTime, this._rangeEndTime);
- this._data.location = this._profileNode.sourceCodeLocation;
</del><ins>+ this._cachedData = null;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="lines">@@ -69,7 +68,13 @@
</span><span class="cx">
</span><span class="cx"> get data()
</span><span class="cx"> {
</span><del>- return this._data;
</del><ins>+ if (!this._cachedData) {
+ this._cachedData = this._profileNode.computeCallInfoForTimeRange(this._rangeStartTime, this._rangeEndTime);
+ this._cachedData.name = this._titleForProfileNode();
+ this._cachedData.location = this._profileNode.sourceCodeLocation;
+ }
+
+ return this._cachedData;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> updateRangeTimes(startTime, endTime)
</span><span class="lines">@@ -108,6 +113,10 @@
</span><span class="cx"> var value = this.data[columnIdentifier];
</span><span class="cx">
</span><span class="cx"> switch (columnIdentifier) {
</span><ins>+ case "name":
+ cell.classList.add(this._iconClassNameForProfileNode());
+ return value;
+
</ins><span class="cx"> case "startTime":
</span><span class="cx"> return isNaN(value) ? emDash : Number.secondsToString(value - this._baseStartTime, true);
</span><span class="cx">
</span><span class="lines">@@ -119,4 +128,50 @@
</span><span class="cx">
</span><span class="cx"> return super.createCellContent(columnIdentifier, cell);
</span><span class="cx"> }
</span><ins>+
+ // Private
+
+ _iconClassNameForProfileNode()
+ {
+ let className;
+ switch (this._profileNode.type) {
+ case WebInspector.ProfileNode.Type.Function:
+ className = WebInspector.CallFrameView.FunctionIconStyleClassName;
+ if (!this._profileNode.sourceCodeLocation)
+ className = WebInspector.CallFrameView.NativeIconStyleClassName;
+ break;
+ case WebInspector.ProfileNode.Type.Program:
+ className = WebInspector.TimelineRecordTreeElement.EvaluatedRecordIconStyleClass;
+ break;
+ }
+
+ console.assert(className);
+
+ // This is more than likely an event listener function with an "on" prefix and it is
+ // as long or longer than the shortest event listener name -- "oncut".
+ if (this._profileNode.functionName && this._profileNode.functionName.startsWith("on") && this._profileNode.functionName.length >= 5)
+ className = WebInspector.CallFrameView.EventListenerIconStyleClassName;
+
+ return className;
+ }
+
+ _titleForProfileNode()
+ {
+ let title = this._profileNode.functionName;
+ if (!name) {
+ switch (this._profileNode.type) {
+ case WebInspector.ProfileNode.Type.Function:
+ title = WebInspector.UIString("(anonymous function)");
+ break;
+ case WebInspector.ProfileNode.Type.Program:
+ title = WebInspector.UIString("(program)");
+ break;
+ default:
+ title = WebInspector.UIString("(anonymous function)");
+ console.error("Unknown ProfileNode type: " + this._profileNode.type);
+ }
+ }
+
+ return title;
+ }
</ins><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineDataGridNodejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineDataGridNode.js (197486 => 197487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineDataGridNode.js 2016-03-03 03:30:30 UTC (rev 197486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineDataGridNode.js 2016-03-03 03:45:50 UTC (rev 197487)
</span><span class="lines">@@ -48,11 +48,13 @@
</span><span class="cx"> get data()
</span><span class="cx"> {
</span><span class="cx"> if (!this._cachedData) {
</span><del>- var scriptTime = this._record.durationForTask(WebInspector.RenderingFrameTimelineRecord.TaskType.Script);
- var layoutTime = this._record.durationForTask(WebInspector.RenderingFrameTimelineRecord.TaskType.Layout);
- var paintTime = this._record.durationForTask(WebInspector.RenderingFrameTimelineRecord.TaskType.Paint);
- var otherTime = this._record.durationForTask(WebInspector.RenderingFrameTimelineRecord.TaskType.Other);
</del><ins>+ let name = WebInspector.TimelineTabContentView.displayNameForRecord(this._record);
+ let scriptTime = this._record.durationForTask(WebInspector.RenderingFrameTimelineRecord.TaskType.Script);
+ let layoutTime = this._record.durationForTask(WebInspector.RenderingFrameTimelineRecord.TaskType.Layout);
+ let paintTime = this._record.durationForTask(WebInspector.RenderingFrameTimelineRecord.TaskType.Paint);
+ let otherTime = this._record.durationForTask(WebInspector.RenderingFrameTimelineRecord.TaskType.Other);
</ins><span class="cx"> this._cachedData = {
</span><ins>+ name,
</ins><span class="cx"> startTime: this._record.startTime,
</span><span class="cx"> totalTime: this._record.duration,
</span><span class="cx"> scriptTime,
</span><span class="lines">@@ -70,6 +72,10 @@
</span><span class="cx"> var value = this.data[columnIdentifier];
</span><span class="cx">
</span><span class="cx"> switch (columnIdentifier) {
</span><ins>+ case "name":
+ cell.classList.add(WebInspector.TimelineTabContentView.iconClassNameForRecord(this._record));
+ return value;
+
</ins><span class="cx"> case "startTime":
</span><span class="cx"> return isNaN(value) ? emDash : Number.secondsToString(value - this._baseStartTime, true);
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js (197486 => 197487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js 2016-03-03 03:30:30 UTC (rev 197486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js 2016-03-03 03:45:50 UTC (rev 197487)
</span><span class="lines">@@ -42,8 +42,13 @@
</span><span class="cx"> this._scopeBar = new WebInspector.ScopeBar("rendering-frame-scope-bar", scopeBarItems, scopeBarItems[0], true);
</span><span class="cx"> this._scopeBar.addEventListener(WebInspector.ScopeBar.Event.SelectionChanged, this._scopeBarSelectionDidChange, this);
</span><span class="cx">
</span><del>- let columns = {totalTime: {}, scriptTime: {}, layoutTime: {}, paintTime: {}, otherTime: {}, startTime: {}, location: {}};
</del><ins>+ let columns = {name: {}, totalTime: {}, scriptTime: {}, layoutTime: {}, paintTime: {}, otherTime: {}, startTime: {}, location: {}};
</ins><span class="cx">
</span><ins>+ columns.name.title = WebInspector.UIString("Name");
+ columns.name.width = "20%";
+ columns.name.icon = true;
+ columns.name.disclosure = true;
+
</ins><span class="cx"> columns.totalTime.title = WebInspector.UIString("Total Time");
</span><span class="cx"> columns.totalTime.width = "15%";
</span><span class="cx"> columns.totalTime.aligned = "right";
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsResourceTimelineDataGridNodejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimelineDataGridNode.js (197486 => 197487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimelineDataGridNode.js 2016-03-03 03:30:30 UTC (rev 197486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimelineDataGridNode.js 2016-03-03 03:45:50 UTC (rev 197487)
</span><span class="lines">@@ -25,20 +25,21 @@
</span><span class="cx">
</span><span class="cx"> WebInspector.ResourceTimelineDataGridNode = class ResourceTimelineDataGridNode extends WebInspector.TimelineDataGridNode
</span><span class="cx"> {
</span><del>- constructor(resourceTimelineRecord, graphOnly, graphDataSource)
</del><ins>+ constructor(resourceTimelineRecord, includesGraph, graphDataSource)
</ins><span class="cx"> {
</span><del>- super(graphOnly, graphDataSource);
</del><ins>+ super(includesGraph, graphDataSource);
</ins><span class="cx">
</span><span class="cx"> this._resource = resourceTimelineRecord.resource;
</span><span class="cx"> this._record = resourceTimelineRecord;
</span><span class="cx">
</span><del>- this._record.addEventListener(WebInspector.TimelineRecord.Event.Updated, graphOnly ? this._timelineRecordUpdated : this._needsRefresh, this);
</del><ins>+ this._resource.addEventListener(WebInspector.Resource.Event.LoadingDidFinish, this._needsRefresh, this);
+ this._resource.addEventListener(WebInspector.Resource.Event.LoadingDidFail, this._needsRefresh, this);
+ this._resource.addEventListener(WebInspector.Resource.Event.URLDidChange, this._needsRefresh, this);
</ins><span class="cx">
</span><del>- if (!graphOnly) {
- this._resource.addEventListener(WebInspector.Resource.Event.URLDidChange, this._needsRefresh, this);
</del><ins>+ if (includesGraph)
+ this._record.addEventListener(WebInspector.TimelineRecord.Event.Updated, this._timelineRecordUpdated, this);
+ else {
</ins><span class="cx"> this._resource.addEventListener(WebInspector.Resource.Event.TypeDidChange, this._needsRefresh, this);
</span><del>- this._resource.addEventListener(WebInspector.Resource.Event.LoadingDidFinish, this._needsRefresh, this);
- this._resource.addEventListener(WebInspector.Resource.Event.LoadingDidFail, this._needsRefresh, this);
</del><span class="cx"> this._resource.addEventListener(WebInspector.Resource.Event.SizeDidChange, this._needsRefresh, this);
</span><span class="cx"> this._resource.addEventListener(WebInspector.Resource.Event.TransferSizeDidChange, this._needsRefresh, this);
</span><span class="cx"> }
</span><span class="lines">@@ -64,7 +65,7 @@
</span><span class="cx"> var resource = this._resource;
</span><span class="cx"> var data = {};
</span><span class="cx">
</span><del>- if (!this._graphOnly) {
</del><ins>+ if (!this._includesGraph) {
</ins><span class="cx"> var zeroTime = this.graphDataSource ? this.graphDataSource.zeroTime : 0;
</span><span class="cx">
</span><span class="cx"> data.domain = WebInspector.displayNameForHost(resource.urlComponents.host);
</span><span class="lines">@@ -96,6 +97,12 @@
</span><span class="cx"> var value = this.data[columnIdentifier];
</span><span class="cx">
</span><span class="cx"> switch (columnIdentifier) {
</span><ins>+ case "name":
+ cell.classList.add(WebInspector.ResourceTreeElement.ResourceIconStyleClassName, resource.type);
+ cell.title = resource.displayURL;
+ this._updateStatus(cell);
+ return this._createNameCellDocumentFragment();
+
</ins><span class="cx"> case "type":
</span><span class="cx"> return WebInspector.Resource.displayNameForType(value);
</span><span class="cx">
</span><span class="lines">@@ -136,6 +143,37 @@
</span><span class="cx">
</span><span class="cx"> // Private
</span><span class="cx">
</span><ins>+ _createNameCellDocumentFragment()
+ {
+ let fragment = document.createDocumentFragment();
+ let mainTitle = WebInspector.TimelineTabContentView.displayNameForRecord(this._record);
+ fragment.append(mainTitle);
+
+ // Show the host as the subtitle if it is different from the main resource or if this is the main frame's main resource.
+ let frame = this._resource.parentFrame;
+ let isMainResource = this._resource.isMainResource();
+ let parentResourceHost;
+ if (frame && isMainResource) {
+ // When the resource is a main resource, get the host from the current frame's parent frame instead of the current frame.
+ parentResourceHost = frame.parentFrame ? frame.parentFrame.mainResource.urlComponents.host : null;
+ } else if (frame) {
+ // When the resource is a normal sub-resource, get the host from the current frame's main resource.
+ parentResourceHost = frame.mainResource.urlComponents.host;
+ }
+
+ if (parentResourceHost !== this._resource.urlComponents.host || frame.isMainFrame() && isMainResource) {
+ let subtitle = WebInspector.displayNameForHost(this._resource.urlComponents.host);
+ if (mainTitle !== subtitle) {
+ let subtitleElement = document.createElement("span");
+ subtitleElement.classList.add("subtitle");
+ subtitleElement.textContent = subtitle;
+ fragment.append(subtitleElement);
+ }
+ }
+
+ return fragment;
+ }
+
</ins><span class="cx"> _needsRefresh()
</span><span class="cx"> {
</span><span class="cx"> if (this.dataGrid instanceof WebInspector.TimelineDataGrid) {
</span><span class="lines">@@ -154,4 +192,33 @@
</span><span class="cx"> if (this.isRecordVisible(this._record))
</span><span class="cx"> this.needsGraphRefresh();
</span><span class="cx"> }
</span><ins>+
+ _dataGridNodeGoToArrowClicked()
+ {
+ WebInspector.showSourceCode(this._resource);
+ }
+
+ _updateStatus(cell)
+ {
+ if (this._resource.failed)
+ cell.classList.add("error");
+ else {
+ cell.classList.remove("error");
+
+ if (this._resource.finished)
+ this.createGoToArrowButton(cell, this._dataGridNodeGoToArrowClicked.bind(this));
+ }
+
+ if (this._spinner)
+ this._spinner.element.remove();
+
+ if (this._resource.finished || this._resource.failed)
+ return;
+
+ if (!this._spinner)
+ this._spinner = new WebInspector.IndeterminateProgressSpinner;
+
+ let contentElement = cell.firstChild;
+ contentElement.appendChild(this._spinner.element);
+ }
</ins><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsResourceTreeElementcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.css (197486 => 197487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.css 2016-03-03 03:30:30 UTC (rev 197486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.css 2016-03-03 03:45:50 UTC (rev 197487)
</span><span class="lines">@@ -24,9 +24,10 @@
</span><span class="cx"> */
</span><span class="cx">
</span><span class="cx"> .item.resource.failed {
</span><del>- color: hsl(0, 86%, 47%) !important;
</del><ins>+ color: var(--error-text-color) !important;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .item.resource.failed .subtitle {
</span><del>- color: hsla(0, 86%, 47%, 0.7) !important;
</del><ins>+ color: var(--error-text-color) !important;
+ opacity: 0.7;
</ins><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsScriptTimelineDataGridNodejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineDataGridNode.js (197486 => 197487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineDataGridNode.js 2016-03-03 03:30:30 UTC (rev 197486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineDataGridNode.js 2016-03-03 03:45:50 UTC (rev 197487)
</span><span class="lines">@@ -124,8 +124,9 @@
</span><span class="cx"> var value = this.data[columnIdentifier];
</span><span class="cx">
</span><span class="cx"> switch (columnIdentifier) {
</span><del>- case "eventType":
- return WebInspector.ScriptTimelineRecord.EventType.displayName(value, this._record.details);
</del><ins>+ case "name":
+ cell.classList.add(WebInspector.TimelineTabContentView.iconClassNameForRecord(this._record));
+ return this._createNameCellDocumentFragment();
</ins><span class="cx">
</span><span class="cx"> case "startTime":
</span><span class="cx"> return isNaN(value) ? emDash : Number.secondsToString(value - this._baseStartTime, true);
</span><span class="lines">@@ -141,4 +142,27 @@
</span><span class="cx">
</span><span class="cx"> return super.createCellContent(columnIdentifier, cell);
</span><span class="cx"> }
</span><ins>+
+ // Private
+
+ _createNameCellDocumentFragment(cellElement)
+ {
+ let fragment = document.createDocumentFragment();
+ let mainTitle = WebInspector.TimelineTabContentView.displayNameForRecord(this._record);
+ fragment.append(mainTitle);
+
+ if (this._record.eventType === WebInspector.ScriptTimelineRecord.EventType.TimerInstalled) {
+ let subtitleElement = document.createElement("span");
+ subtitleElement.classList.add("subtitle");
+ fragment.append(subtitleElement);
+
+ let timeoutString = Number.secondsToString(this._record.details.timeout / 1000);
+ if (this._record.details.repeating)
+ subtitleElement.textContent = WebInspector.UIString("%s interval").format(timeoutString);
+ else
+ subtitleElement.textContent = WebInspector.UIString("%s delay").format(timeoutString);
+ }
+
+ return fragment;
+ }
</ins><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsScriptTimelineViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.js (197486 => 197487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.js 2016-03-03 03:30:30 UTC (rev 197486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.js 2016-03-03 03:45:50 UTC (rev 197487)
</span><span class="lines">@@ -33,9 +33,15 @@
</span><span class="cx">
</span><span class="cx"> this.navigationSidebarTreeOutline.element.classList.add("script");
</span><span class="cx">
</span><del>- var columns = {location: {}, callCount: {}, startTime: {}, totalTime: {}, selfTime: {}, averageTime: {}};
</del><ins>+ let columns = {name: {}, location: {}, callCount: {}, startTime: {}, totalTime: {}, selfTime: {}, averageTime: {}};
</ins><span class="cx">
</span><ins>+ columns.name.title = WebInspector.UIString("Name");
+ columns.name.width = "10%";
+ columns.name.icon = true;
+ columns.name.disclosure = true;
+
</ins><span class="cx"> columns.location.title = WebInspector.UIString("Location");
</span><ins>+ columns.location.icon = true;
</ins><span class="cx"> columns.location.width = "15%";
</span><span class="cx">
</span><span class="cx"> let isSamplingProfiler = !!window.ScriptProfilerAgent;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSourceCodeTimelineTimelineDataGridNodejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTimelineTimelineDataGridNode.js (197486 => 197487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTimelineTimelineDataGridNode.js 2016-03-03 03:30:30 UTC (rev 197486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTimelineTimelineDataGridNode.js 2016-03-03 03:45:50 UTC (rev 197487)
</span><span class="lines">@@ -50,8 +50,44 @@
</span><span class="cx"> return {graph: this._sourceCodeTimeline.startTime};
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ createCellContent(columnIdentifier, cell)
+ {
+ if (columnIdentifier === "name" && this.records.length) {
+ cell.classList.add(WebInspector.TimelineTabContentView.iconClassNameForRecord(this.records[0]));
+ return this._createNameCellContent(cell);
+ }
+
+ return super.createCellContent(columnIdentifier, cell);
+ }
+
</ins><span class="cx"> // Private
</span><span class="cx">
</span><ins>+ _createNameCellContent(cellElement)
+ {
+ if (!this.records.length)
+ return null;
+
+ let fragment = document.createDocumentFragment();
+ let mainTitle = WebInspector.TimelineTabContentView.displayNameForRecord(this.records[0]);
+ fragment.append(mainTitle);
+
+ let sourceCodeLocation = this._sourceCodeTimeline.sourceCodeLocation;
+ if (sourceCodeLocation) {
+ let subtitleElement = document.createElement("span");
+ subtitleElement.classList.add("subtitle");
+ sourceCodeLocation.populateLiveDisplayLocationString(subtitleElement, "textContent", null, WebInspector.SourceCodeLocation.NameStyle.None, WebInspector.UIString("line "));
+
+ let goToArrowButtonLink = WebInspector.createSourceCodeLocationLink(sourceCodeLocation, false, true);
+ fragment.append(goToArrowButtonLink, subtitleElement);
+
+ // Give the whole cell a tooltip and keep it up to date.
+ sourceCodeLocation.populateLiveDisplayLocationTooltip(cellElement, mainTitle + "\n");
+ } else
+ cellElement.title = mainTitle;
+
+ return fragment;
+ }
+
</ins><span class="cx"> _timelineRecordAdded(event)
</span><span class="cx"> {
</span><span class="cx"> if (this.isRecordVisible(event.data.record))
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineDataGridNodejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGridNode.js (197486 => 197487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGridNode.js 2016-03-03 03:30:30 UTC (rev 197486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGridNode.js 2016-03-03 03:45:50 UTC (rev 197487)
</span><span class="lines">@@ -25,13 +25,13 @@
</span><span class="cx">
</span><span class="cx"> WebInspector.TimelineDataGridNode = class TimelineDataGridNode extends WebInspector.DataGridNode
</span><span class="cx"> {
</span><del>- constructor(graphOnly, graphDataSource, hasChildren)
</del><ins>+ constructor(includesGraph, graphDataSource, hasChildren)
</ins><span class="cx"> {
</span><span class="cx"> super({}, hasChildren);
</span><span class="cx">
</span><span class="cx"> this.copyable = false;
</span><span class="cx">
</span><del>- this._graphOnly = graphOnly || false;
</del><ins>+ this._includesGraph = includesGraph || false;
</ins><span class="cx"> this._graphDataSource = graphDataSource || null;
</span><span class="cx">
</span><span class="cx"> if (graphDataSource) {
</span><span class="lines">@@ -124,10 +124,6 @@
</span><span class="cx"> var goToArrowButtonLink = WebInspector.createSourceCodeLocationLink(value, false, true);
</span><span class="cx"> fragment.appendChild(goToArrowButtonLink);
</span><span class="cx">
</span><del>- var icon = document.createElement("div");
- icon.className = "icon";
- fragment.appendChild(icon);
-
</del><span class="cx"> var titleElement = document.createElement("span");
</span><span class="cx"> value.populateLiveDisplayLocationString(titleElement, "textContent");
</span><span class="cx"> fragment.appendChild(titleElement);
</span><span class="lines">@@ -156,10 +152,6 @@
</span><span class="cx"> var goToArrowButtonLink = WebInspector.createSourceCodeLocationLink(callFrame.sourceCodeLocation, false, true);
</span><span class="cx"> fragment.appendChild(goToArrowButtonLink);
</span><span class="cx">
</span><del>- var icon = document.createElement("div");
- icon.classList.add("icon");
- fragment.appendChild(icon);
-
</del><span class="cx"> if (isAnonymousFunction) {
</span><span class="cx"> // For anonymous functions we show the resource or script icon and name.
</span><span class="cx"> if (callFrame.sourceCodeLocation.sourceCode instanceof WebInspector.Resource) {
</span><span class="lines">@@ -207,10 +199,8 @@
</span><span class="cx">
</span><span class="cx"> refresh()
</span><span class="cx"> {
</span><del>- if (this._graphDataSource && this._graphOnly) {
</del><ins>+ if (this._graphDataSource && this._includesGraph)
</ins><span class="cx"> this.needsGraphRefresh();
</span><del>- return;
- }
</del><span class="cx">
</span><span class="cx"> super.refresh();
</span><span class="cx"> }
</span><span class="lines">@@ -320,6 +310,25 @@
</span><span class="cx">
</span><span class="cx"> // Protected
</span><span class="cx">
</span><ins>+ createGoToArrowButton(cellElement, callback)
+ {
+ function buttonClicked(event)
+ {
+ if (this.hidden || !this.revealed)
+ return;
+
+ event.stopPropagation();
+
+ callback(this, cellElement.__columnIdentifier);
+ }
+
+ let button = WebInspector.createGoToArrowButton();
+ button.addEventListener("click", buttonClicked.bind(this));
+
+ let contentElement = cellElement.firstChild;
+ contentElement.appendChild(button);
+ }
+
</ins><span class="cx"> isRecordVisible(record)
</span><span class="cx"> {
</span><span class="cx"> if (!this._graphDataSource)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.css (197486 => 197487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.css 2016-03-03 03:30:30 UTC (rev 197486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.css 2016-03-03 03:45:50 UTC (rev 197487)
</span><span class="lines">@@ -31,6 +31,11 @@
</span><span class="cx"> bottom: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.timeline-view > .data-grid .indeterminate-progress-spinner {
+ float: right;
+ margin-left: 2px;
+}
+
</ins><span class="cx"> .panel.navigation.timeline > .content > .tree-outline {
</span><span class="cx"> min-height: 100%;
</span><span class="cx"> background-image: none;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVariablescss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css (197486 => 197487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2016-03-03 03:30:30 UTC (rev 197486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2016-03-03 03:45:50 UTC (rev 197487)
</span><span class="lines">@@ -49,6 +49,8 @@
</span><span class="cx"> --console-secondary-text-color: hsla(0, 0%, 0%, 0.33);
</span><span class="cx"> --console-prompt-min-height: 30px;
</span><span class="cx">
</span><ins>+ --error-text-color: hsl(0, 86%, 47%);
+
</ins><span class="cx"> --syntax-highlight-number-color: hsl(248, 100%, 40%);
</span><span class="cx"> --syntax-highlight-boolean-color: hsl(309, 85%, 35%);
</span><span class="cx"> --syntax-highlight-string-color: hsl(1, 79%, 42%);
</span></span></pre>
</div>
</div>
</body>
</html>