<!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>[210046] 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/210046">210046</a></dd>
<dt>Author</dt> <dd>mattbaker@apple.com</dd>
<dt>Date</dt> <dd>2016-12-20 16:15:53 -0800 (Tue, 20 Dec 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Window resize causes TimelineOverview graph elements to be repositioned
https://bugs.webkit.org/show_bug.cgi?id=160207
<rdar://problem/27553228>
Reviewed by Brian Burg.
TimelineRuler does not always update its divider positions when the start
time changes while the end time remains the same. The check that determines
whether the first or last divider positions have changed before doing a
layout uses the ruler end time instead of calculating the last divider's
position, and would falsely determine no change was needed.
* UserInterface/Views/TimelineRuler.js:
(WebInspector.TimelineRuler.prototype.set startTime):
(WebInspector.TimelineRuler.prototype.set secondsPerPixel):
Clear cached divider data on zoom or scroll, forcing dividers to be recalculated.
(WebInspector.TimelineRuler.prototype.layout):
Calculate accurate divider count and last divider time.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</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 (210045 => 210046)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2016-12-20 23:53:48 UTC (rev 210045)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-12-21 00:15:53 UTC (rev 210046)
</span><span class="lines">@@ -1,3 +1,24 @@
</span><ins>+2016-12-20 Matt Baker <mattbaker@apple.com>
+
+ Web Inspector: Window resize causes TimelineOverview graph elements to be repositioned
+ https://bugs.webkit.org/show_bug.cgi?id=160207
+ <rdar://problem/27553228>
+
+ Reviewed by Brian Burg.
+
+ TimelineRuler does not always update its divider positions when the start
+ time changes while the end time remains the same. The check that determines
+ whether the first or last divider positions have changed before doing a
+ layout uses the ruler end time instead of calculating the last divider's
+ position, and would falsely determine no change was needed.
+
+ * UserInterface/Views/TimelineRuler.js:
+ (WebInspector.TimelineRuler.prototype.set startTime):
+ (WebInspector.TimelineRuler.prototype.set secondsPerPixel):
+ Clear cached divider data on zoom or scroll, forcing dividers to be recalculated.
+ (WebInspector.TimelineRuler.prototype.layout):
+ Calculate accurate divider count and last divider time.
+
</ins><span class="cx"> 2016-12-20 Wenson Hsieh <wenson_hsieh@apple.com>
</span><span class="cx">
</span><span class="cx"> Update keyword completions in the inspector for the new scroll snapping CSS properties
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRulerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.js (210045 => 210046)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.js 2016-12-20 23:53:48 UTC (rev 210045)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.js 2016-12-21 00:15:53 UTC (rev 210046)
</span><span class="lines">@@ -218,6 +218,8 @@
</span><span class="cx"> if (!isNaN(this._duration))
</span><span class="cx"> this._endTime = this._startTime + this._duration;
</span><span class="cx">
</span><ins>+ this._currentDividers = null;
+
</ins><span class="cx"> this.needsLayout();
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -264,6 +266,7 @@
</span><span class="cx">
</span><span class="cx"> this._secondsPerPixel = x;
</span><span class="cx"> this._endTimePinned = false;
</span><ins>+ this._currentDividers = null;
</ins><span class="cx"> this._currentSliceTime = 0;
</span><span class="cx">
</span><span class="cx"> this.needsLayout();
</span><span class="lines">@@ -444,12 +447,12 @@
</span><span class="cx"> sliceTime = this._currentSliceTime;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ // Calculate the divider count now based on the final slice time.
+ dividerCount = Math.floor(visibleWidth * this.secondsPerPixel / sliceTime);
+
</ins><span class="cx"> let firstDividerTime = (Math.ceil((this._startTime - this._zeroTime) / sliceTime) * sliceTime) + this._zeroTime;
</span><del>- let lastDividerTime = this._endTime;
</del><ins>+ let lastDividerTime = firstDividerTime + sliceTime * dividerCount;
</ins><span class="cx">
</span><del>- // Calculate the divider count now based on the final slice time.
- dividerCount = Math.ceil((lastDividerTime - firstDividerTime) / sliceTime);
-
</del><span class="cx"> // Make an extra divider in case the last one is partially visible.
</span><span class="cx"> if (!this._endTimePinned)
</span><span class="cx"> ++dividerCount;
</span></span></pre>
</div>
</div>
</body>
</html>