<!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>[179701] 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/179701">179701</a></dd>
<dt>Author</dt> <dd>burg@cs.washington.edu</dd>
<dt>Date</dt> <dd>2015-02-05 12:12:38 -0800 (Thu, 05 Feb 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: eliminate some unnecessary layout/painting in timeline overview and ruler
https://bugs.webkit.org/show_bug.cgi?id=141293
Reviewed by Timothy Hatcher.
The timeline overview's ruler was forcing repaints of divider labels even if the labels
had not changed since the last requestAnimationFrame. Bail out early if nothing changed.
The timeline overview and its graphs were updating layout using requestAnimationFrame
even when the TimelineContentView is not visible. Fix this by propagating visibility
changes to subviews, and not updating layout when hidden.
The above change also fixes an assertion sometimes encountered when the timeline view
tries to cache an element's offset width, but cannot because it isn't visible.
* UserInterface/Views/TimelineContentView.js:
(WebInspector.TimelineContentView.prototype.shown):
(WebInspector.TimelineContentView.prototype.hidden):
* UserInterface/Views/TimelineOverview.js:
(WebInspector.TimelineOverview.prototype.get visible):
(WebInspector.TimelineOverview.prototype.shown):
(WebInspector.TimelineOverview.prototype.hidden):
(WebInspector.TimelineOverview.prototype._needsLayout):
* UserInterface/Views/TimelineOverviewGraph.js:
(WebInspector.TimelineOverviewGraph.prototype.get visible):
(WebInspector.TimelineOverviewGraph.prototype.shown):
(WebInspector.TimelineOverviewGraph.prototype.hidden):
(WebInspector.TimelineOverviewGraph.prototype.needsLayout):
* UserInterface/Views/TimelineRuler.js:
(WebInspector.TimelineRuler.prototype.updateLayout):</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewGraphjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverviewGraph.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineRulerjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (179700 => 179701)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2015-02-05 19:49:37 UTC (rev 179700)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-02-05 20:12:38 UTC (rev 179701)
</span><span class="lines">@@ -1,3 +1,36 @@
</span><ins>+2015-02-05 Brian J. Burg <burg@cs.washington.edu>
+
+ Web Inspector: eliminate some unnecessary layout/painting in timeline overview and ruler
+ https://bugs.webkit.org/show_bug.cgi?id=141293
+
+ Reviewed by Timothy Hatcher.
+
+ The timeline overview's ruler was forcing repaints of divider labels even if the labels
+ had not changed since the last requestAnimationFrame. Bail out early if nothing changed.
+
+ The timeline overview and its graphs were updating layout using requestAnimationFrame
+ even when the TimelineContentView is not visible. Fix this by propagating visibility
+ changes to subviews, and not updating layout when hidden.
+
+ The above change also fixes an assertion sometimes encountered when the timeline view
+ tries to cache an element's offset width, but cannot because it isn't visible.
+
+ * UserInterface/Views/TimelineContentView.js:
+ (WebInspector.TimelineContentView.prototype.shown):
+ (WebInspector.TimelineContentView.prototype.hidden):
+ * UserInterface/Views/TimelineOverview.js:
+ (WebInspector.TimelineOverview.prototype.get visible):
+ (WebInspector.TimelineOverview.prototype.shown):
+ (WebInspector.TimelineOverview.prototype.hidden):
+ (WebInspector.TimelineOverview.prototype._needsLayout):
+ * UserInterface/Views/TimelineOverviewGraph.js:
+ (WebInspector.TimelineOverviewGraph.prototype.get visible):
+ (WebInspector.TimelineOverviewGraph.prototype.shown):
+ (WebInspector.TimelineOverviewGraph.prototype.hidden):
+ (WebInspector.TimelineOverviewGraph.prototype.needsLayout):
+ * UserInterface/Views/TimelineRuler.js:
+ (WebInspector.TimelineRuler.prototype.updateLayout):
+
</ins><span class="cx"> 2015-02-04 Joseph Pecoraro <pecoraro@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: ES6: Improved Console Support for Symbol Objects
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineContentView.js (179700 => 179701)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineContentView.js 2015-02-05 19:49:37 UTC (rev 179700)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineContentView.js 2015-02-05 20:12:38 UTC (rev 179701)
</span><span class="lines">@@ -167,8 +167,12 @@
</span><span class="cx"> if (!this._currentTimelineView)
</span><span class="cx"> return;
</span><span class="cx">
</span><ins>+ this._timelineOverview.shown();
</ins><span class="cx"> this._currentTimelineView.shown();
</span><span class="cx"> this._clearTimelineNavigationItem.enabled = this._recording.isWritable();
</span><ins>+
+ if (!this._updating && WebInspector.timelineManager.activeRecording === this._recording && WebInspector.timelineManager.isCapturing())
+ this._startUpdatingCurrentTime();
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> hidden: function()
</span><span class="lines">@@ -176,7 +180,11 @@
</span><span class="cx"> if (!this._currentTimelineView)
</span><span class="cx"> return;
</span><span class="cx">
</span><ins>+ this._timelineOverview.hidden();
</ins><span class="cx"> this._currentTimelineView.hidden();
</span><ins>+
+ if (this._updating)
+ this._stopUpdatingCurrentTime();
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> filterDidChange: function()
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js (179700 => 179701)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js 2015-02-05 19:49:37 UTC (rev 179700)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js 2015-02-05 20:12:38 UTC (rev 179701)
</span><span class="lines">@@ -211,6 +211,29 @@
</span><span class="cx"> this._timelineRuler.selectionEndTime = this._timelineRuler.selectionStartTime + x;
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ get visible()
+ {
+ return this._visible;
+ },
+
+ shown: function()
+ {
+ this._visible = true;
+
+ for (var timelineOverviewGraph of this._timelineOverviewGraphsMap.values())
+ timelineOverviewGraph.shown();
+
+ this.updateLayout();
+ },
+
+ hidden: function()
+ {
+ this._visible = false;
+
+ for (var timelineOverviewGraph of this._timelineOverviewGraphsMap.values())
+ timelineOverviewGraph.hidden();
+ },
+
</ins><span class="cx"> addMarker: function(marker)
</span><span class="cx"> {
</span><span class="cx"> this._timelineRuler.addMarker(marker);
</span><span class="lines">@@ -298,8 +321,12 @@
</span><span class="cx">
</span><span class="cx"> _needsLayout: function()
</span><span class="cx"> {
</span><ins>+ if (!this._visible)
+ return;
+
</ins><span class="cx"> if (this._scheduledLayoutUpdateIdentifier)
</span><span class="cx"> return;
</span><ins>+
</ins><span class="cx"> this._scheduledLayoutUpdateIdentifier = requestAnimationFrame(this.updateLayout.bind(this));
</span><span class="cx"> },
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewGraphjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverviewGraph.js (179700 => 179701)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverviewGraph.js 2015-02-05 19:49:37 UTC (rev 179700)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverviewGraph.js 2015-02-05 20:12:38 UTC (rev 179701)
</span><span class="lines">@@ -139,6 +139,22 @@
</span><span class="cx"> this._timelineOverview = x;
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ get visible()
+ {
+ return this._visible;
+ },
+
+ shown: function()
+ {
+ this._visible = true;
+ this.updateLayout();
+ },
+
+ hidden: function()
+ {
+ this._visible = false;
+ },
+
</ins><span class="cx"> reset: function()
</span><span class="cx"> {
</span><span class="cx"> // Implemented by sub-classes if needed.
</span><span class="lines">@@ -165,6 +181,9 @@
</span><span class="cx">
</span><span class="cx"> needsLayout: function()
</span><span class="cx"> {
</span><ins>+ if (!this._visible)
+ return;
+
</ins><span class="cx"> if (this._scheduledLayoutUpdateIdentifier)
</span><span class="cx"> return;
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRulerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.js (179700 => 179701)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.js 2015-02-05 19:49:37 UTC (rev 179700)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.js 2015-02-05 20:12:38 UTC (rev 179701)
</span><span class="lines">@@ -348,6 +348,16 @@
</span><span class="cx"> if (!this._endTimePinned)
</span><span class="cx"> ++dividerCount;
</span><span class="cx">
</span><ins>+ var dividerData = {
+ count: dividerCount,
+ firstTime: firstDividerTime,
+ lastTime: lastDividerTime,
+ }
+
+ if (Object.shallowEqual(dividerData, this._currentDividers))
+ return;
+ this._currentDividers = dividerData;
+
</ins><span class="cx"> var markerDividers = this._markersElement.querySelectorAll("." + WebInspector.TimelineRuler.DividerElementStyleClassName);
</span><span class="cx">
</span><span class="cx"> var dividerElement = this._headerElement.firstChild;
</span></span></pre>
</div>
</div>
</body>
</html>