<!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>[185875] 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/185875">185875</a></dd>
<dt>Author</dt> <dd>mattbaker@apple.com</dd>
<dt>Date</dt> <dd>2015-06-23 09:26:08 -0700 (Tue, 23 Jun 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Layout & Rendering timeline should show paint and layout records in separate rows
https://bugs.webkit.org/show_bug.cgi?id=146119
Reviewed by Timothy Hatcher.
This patch makes the original Layout & Rendering timeline visually consistent with the Rendering Frames
timeline, which uses green to distinguish Paint from Layout. In order to support having record bars with
different colors in the same overview graph, the timeline has been split into two rows.
* UserInterface/Views/LayoutTimelineOverviewGraph.css:
(.timeline-overview-graph.layout > .graph-row):
(.timeline-overview-graph.layout > .graph-row > .timeline-record-bar):
(.timeline-overview-graph.layout > .graph-row > .timeline-record-bar > .segment):
New row styles.
* UserInterface/Views/LayoutTimelineOverviewGraph.js:
(WebInspector.LayoutTimelineOverviewGraph.prototype.reset.createRecordRow):
(WebInspector.LayoutTimelineOverviewGraph.prototype.reset):
(WebInspector.LayoutTimelineOverviewGraph.prototype.updateLayout):
(WebInspector.LayoutTimelineOverviewGraph.prototype._updateRowLayout.createBar):
(WebInspector.LayoutTimelineOverviewGraph.prototype._updateRowLayout):
(WebInspector.LayoutTimelineOverviewGraph.prototype._layoutTimelineRecordAdded):
(WebInspector.LayoutTimelineOverviewGraph): Deleted.
Added bookkeeping objects for timeline row elements and their associated records.
* UserInterface/Views/TimelineRecordBar.css:
(.timeline-record-bar.timeline-record-type-layout.layout-timeline-record-paint > .segment):
New style for layout record event types.
* UserInterface/Views/TimelineRecordBar.js:
(WebInspector.TimelineRecordBar.prototype.set records):
Add style class for eventType, if present.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsLayoutTimelineOverviewGraphcss">trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineOverviewGraph.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsLayoutTimelineOverviewGraphjs">trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineOverviewGraph.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordBarcss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordBarjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (185874 => 185875)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2015-06-23 14:18:11 UTC (rev 185874)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-06-23 16:26:08 UTC (rev 185875)
</span><span class="lines">@@ -1,3 +1,38 @@
</span><ins>+2015-06-23 Matt Baker <mattbaker@apple.com>
+
+ Web Inspector: Layout & Rendering timeline should show paint and layout records in separate rows
+ https://bugs.webkit.org/show_bug.cgi?id=146119
+
+ Reviewed by Timothy Hatcher.
+
+ This patch makes the original Layout & Rendering timeline visually consistent with the Rendering Frames
+ timeline, which uses green to distinguish Paint from Layout. In order to support having record bars with
+ different colors in the same overview graph, the timeline has been split into two rows.
+
+ * UserInterface/Views/LayoutTimelineOverviewGraph.css:
+ (.timeline-overview-graph.layout > .graph-row):
+ (.timeline-overview-graph.layout > .graph-row > .timeline-record-bar):
+ (.timeline-overview-graph.layout > .graph-row > .timeline-record-bar > .segment):
+ New row styles.
+
+ * UserInterface/Views/LayoutTimelineOverviewGraph.js:
+ (WebInspector.LayoutTimelineOverviewGraph.prototype.reset.createRecordRow):
+ (WebInspector.LayoutTimelineOverviewGraph.prototype.reset):
+ (WebInspector.LayoutTimelineOverviewGraph.prototype.updateLayout):
+ (WebInspector.LayoutTimelineOverviewGraph.prototype._updateRowLayout.createBar):
+ (WebInspector.LayoutTimelineOverviewGraph.prototype._updateRowLayout):
+ (WebInspector.LayoutTimelineOverviewGraph.prototype._layoutTimelineRecordAdded):
+ (WebInspector.LayoutTimelineOverviewGraph): Deleted.
+ Added bookkeeping objects for timeline row elements and their associated records.
+
+ * UserInterface/Views/TimelineRecordBar.css:
+ (.timeline-record-bar.timeline-record-type-layout.layout-timeline-record-paint > .segment):
+ New style for layout record event types.
+
+ * UserInterface/Views/TimelineRecordBar.js:
+ (WebInspector.TimelineRecordBar.prototype.set records):
+ Add style class for eventType, if present.
+
</ins><span class="cx"> 2015-06-22 Devin Rousso <drousso@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: gaps between sections of the styles sidebar rules tab confusing, should say "Media: all"
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsLayoutTimelineOverviewGraphcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineOverviewGraph.css (185874 => 185875)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineOverviewGraph.css 2015-06-23 14:18:11 UTC (rev 185874)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineOverviewGraph.css 2015-06-23 16:26:08 UTC (rev 185875)
</span><span class="lines">@@ -23,11 +23,15 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-.timeline-overview-graph.layout > .timeline-record-bar {
- margin-top: 8px;
- height: 20px;
</del><ins>+.timeline-overview-graph.layout > .graph-row {
+ height: 16px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.timeline-overview-graph.layout > .timeline-record-bar > .segment {
</del><ins>+.timeline-overview-graph.layout > .graph-row > .timeline-record-bar {
+ height: 12px;
+ margin-top: 4px;
+}
+
+.timeline-overview-graph.layout > .graph-row > .timeline-record-bar > .segment {
</ins><span class="cx"> border-radius: 2px;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsLayoutTimelineOverviewGraphjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineOverviewGraph.js (185874 => 185875)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineOverviewGraph.js 2015-06-23 14:18:11 UTC (rev 185874)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineOverviewGraph.js 2015-06-23 16:26:08 UTC (rev 185875)
</span><span class="lines">@@ -32,8 +32,6 @@
</span><span class="cx"> this._layoutTimeline = timeline;
</span><span class="cx"> this._layoutTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._layoutTimelineRecordAdded, this);
</span><span class="cx">
</span><del>- this._timelineRecordBars = [];
-
</del><span class="cx"> this.reset();
</span><span class="cx"> };
</span><span class="cx">
</span><span class="lines">@@ -47,47 +45,71 @@
</span><span class="cx"> {
</span><span class="cx"> WebInspector.TimelineOverviewGraph.prototype.reset.call(this);
</span><span class="cx">
</span><del>- this._timelineRecordBarMap = new Map;
</del><ins>+ function createRecordRow()
+ {
+ var element = document.createElement("div");
+ element.className = "graph-row";
+ this.element.appendChild(element);
+ return {element, recordBars: [], records: []};
+ }
</ins><span class="cx">
</span><span class="cx"> this.element.removeChildren();
</span><ins>+
+ this._timelineRecordBarMap = new Map;
+ this._timelineLayoutRecordRow = createRecordRow.call(this);
+ this._timelinePaintRecordRow = createRecordRow.call(this);
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> updateLayout: function()
</span><span class="cx"> {
</span><span class="cx"> WebInspector.TimelineOverviewGraph.prototype.updateLayout.call(this);
</span><span class="cx">
</span><ins>+ this._updateRowLayout(this._timelinePaintRecordRow);
+ this._updateRowLayout(this._timelineLayoutRecordRow);
+ },
+
+ // Private
+
+ _updateRowLayout: function(row)
+ {
</ins><span class="cx"> var secondsPerPixel = this.timelineOverview.secondsPerPixel;
</span><del>-
</del><span class="cx"> var recordBarIndex = 0;
</span><span class="cx">
</span><span class="cx"> function createBar(records, renderMode)
</span><span class="cx"> {
</span><del>- var timelineRecordBar = this._timelineRecordBars[recordBarIndex];
</del><ins>+ var timelineRecordBar = row.recordBars[recordBarIndex];
</ins><span class="cx"> if (!timelineRecordBar)
</span><del>- timelineRecordBar = this._timelineRecordBars[recordBarIndex] = new WebInspector.TimelineRecordBar(records, renderMode);
</del><ins>+ timelineRecordBar = row.recordBars[recordBarIndex] = new WebInspector.TimelineRecordBar(records, renderMode);
</ins><span class="cx"> else {
</span><span class="cx"> timelineRecordBar.renderMode = renderMode;
</span><span class="cx"> timelineRecordBar.records = records;
</span><span class="cx"> }
</span><ins>+
</ins><span class="cx"> timelineRecordBar.refresh(this);
</span><span class="cx"> if (!timelineRecordBar.element.parentNode)
</span><del>- this.element.appendChild(timelineRecordBar.element);
</del><ins>+ row.element.appendChild(timelineRecordBar.element);
</ins><span class="cx"> ++recordBarIndex;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- WebInspector.TimelineRecordBar.createCombinedBars(this._layoutTimeline.records, secondsPerPixel, this, createBar.bind(this));
</del><ins>+ WebInspector.TimelineRecordBar.createCombinedBars(row.records, secondsPerPixel, this, createBar.bind(this));
</ins><span class="cx">
</span><span class="cx"> // Remove the remaining unused TimelineRecordBars.
</span><del>- for (; recordBarIndex < this._timelineRecordBars.length; ++recordBarIndex) {
- this._timelineRecordBars[recordBarIndex].records = null;
- this._timelineRecordBars[recordBarIndex].element.remove();
</del><ins>+ for (; recordBarIndex < row.recordBars.length; ++recordBarIndex) {
+ row.recordBars[recordBarIndex].records = null;
+ row.recordBars[recordBarIndex].element.remove();
</ins><span class="cx"> }
</span><span class="cx"> },
</span><span class="cx">
</span><del>- // Private
-
</del><span class="cx"> _layoutTimelineRecordAdded: function(event)
</span><span class="cx"> {
</span><ins>+ var layoutTimelineRecord = event.data.record;
+ console.assert(layoutTimelineRecord instanceof WebInspector.LayoutTimelineRecord);
+
+ if (layoutTimelineRecord.eventType === WebInspector.LayoutTimelineRecord.EventType.Paint)
+ this._timelinePaintRecordRow.records.push(layoutTimelineRecord);
+ else
+ this._timelineLayoutRecordRow.records.push(layoutTimelineRecord);
+
</ins><span class="cx"> this.needsLayout();
</span><span class="cx"> }
</span><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordBarcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.css (185874 => 185875)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.css 2015-06-23 14:18:11 UTC (rev 185874)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.css 2015-06-23 16:26:08 UTC (rev 185875)
</span><span class="lines">@@ -87,6 +87,11 @@
</span><span class="cx"> border-color: rgb(212, 108, 108);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.timeline-record-bar.timeline-record-type-layout.layout-timeline-record-paint > .segment {
+ background-color: rgb(176, 204, 105);
+ border-color: rgb(152, 188, 77);
+}
+
</ins><span class="cx"> .timeline-record-bar.timeline-record-type-script > .segment {
</span><span class="cx"> background-color: rgb(190, 148, 233);
</span><span class="cx"> border-color: rgb(153, 113, 185);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordBarjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.js (185874 => 185875)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.js 2015-06-23 14:18:11 UTC (rev 185874)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.js 2015-06-23 16:26:08 UTC (rev 185875)
</span><span class="lines">@@ -205,8 +205,11 @@
</span><span class="cx">
</span><span class="cx"> set records(records)
</span><span class="cx"> {
</span><del>- if (this._records && this._records.length)
</del><ins>+ if (this._records && this._records.length) {
</ins><span class="cx"> this._element.classList.remove(this._records[0].type);
</span><ins>+ if (this._records[0].eventType)
+ this._element.classList.remove(this._records[0].eventType);
+ }
</ins><span class="cx">
</span><span class="cx"> records = records || [];
</span><span class="cx">
</span><span class="lines">@@ -216,8 +219,13 @@
</span><span class="cx"> this._records = records;
</span><span class="cx">
</span><span class="cx"> // Assume all records are the same type.
</span><del>- if (this._records.length)
</del><ins>+ if (this._records.length) {
</ins><span class="cx"> this._element.classList.add(this._records[0].type);
</span><ins>+ // Although all records may not have the same event type, the first record is
+ // sufficient to determine the correct style for the record bar.
+ if (this._records[0].eventType)
+ this._element.classList.add(this._records[0].eventType);
+ }
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> refresh: function(graphDataSource)
</span></span></pre>
</div>
</div>
</body>
</html>