<!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>[188328] 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/188328">188328</a></dd>
<dt>Author</dt> <dd>mattbaker@apple.com</dd>
<dt>Date</dt> <dd>2015-08-11 22:54:14 -0700 (Tue, 11 Aug 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Dragging a timeline ruler handle when both handles clamped is broken
https://bugs.webkit.org/show_bug.cgi?id=147912
Reviewed by Timothy Hatcher.
When clamped handles overlap, the handle nearest in time to the ruler's edge should be visible and
clickable, and the other should be hidden. This change ensures that clicking and dragging a ruler
handle to modify a selection outside the visible area works correctly.
* UserInterface/Views/TimelineOverview.css:
(.timeline-overview.frames > .timeline-ruler:not(.both-handles-clamped) > .selection-handle.right):
Style adjustment for rendering frames, which offsets the right handle by 5px instead of 4px.
(.timeline-overview.frames > .timeline-ruler:not(.both-handles-clamped) > .shaded-area.right):
Style adjustment for rendering frames, which offsets the right shaded area by 1px.
(.timeline-overview.frames > .timeline-ruler > .selection-handle.right): Deleted.
(.timeline-overview.frames > .timeline-ruler > .shaded-area.right): Deleted.
* UserInterface/Views/TimelineRuler.css:
(.timeline-ruler.both-handles-clamped > .selection-handle):
Updated handle style when both are clamped.
(.timeline-ruler > .selection-handle.clamped.hidden):
Hide the clamped handle that is beneath the other clamped handle.
* UserInterface/Views/TimelineRuler.js:
(WebInspector.TimelineRuler.prototype._updateSelection):</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewcss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineRulercss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css</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 (188327 => 188328)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2015-08-12 05:49:09 UTC (rev 188327)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-08-12 05:54:14 UTC (rev 188328)
</span><span class="lines">@@ -1,3 +1,32 @@
</span><ins>+2015-08-11 Matt Baker <mattbaker@apple.com>
+
+ Web Inspector: Dragging a timeline ruler handle when both handles clamped is broken
+ https://bugs.webkit.org/show_bug.cgi?id=147912
+
+ Reviewed by Timothy Hatcher.
+
+ When clamped handles overlap, the handle nearest in time to the ruler's edge should be visible and
+ clickable, and the other should be hidden. This change ensures that clicking and dragging a ruler
+ handle to modify a selection outside the visible area works correctly.
+
+ * UserInterface/Views/TimelineOverview.css:
+ (.timeline-overview.frames > .timeline-ruler:not(.both-handles-clamped) > .selection-handle.right):
+ Style adjustment for rendering frames, which offsets the right handle by 5px instead of 4px.
+ (.timeline-overview.frames > .timeline-ruler:not(.both-handles-clamped) > .shaded-area.right):
+ Style adjustment for rendering frames, which offsets the right shaded area by 1px.
+ (.timeline-overview.frames > .timeline-ruler > .selection-handle.right): Deleted.
+ (.timeline-overview.frames > .timeline-ruler > .shaded-area.right): Deleted.
+
+ * UserInterface/Views/TimelineRuler.css:
+ (.timeline-ruler.both-handles-clamped > .selection-handle):
+ Updated handle style when both are clamped.
+ (.timeline-ruler > .selection-handle.clamped.hidden):
+ Hide the clamped handle that is beneath the other clamped handle.
+
+ * UserInterface/Views/TimelineRuler.js:
+ (WebInspector.TimelineRuler.prototype._updateSelection):
+
+
</ins><span class="cx"> 2015-08-11 Devin Rousso <drousso@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: Disabling attribute styles should not be possible
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css (188327 => 188328)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css 2015-08-12 05:49:09 UTC (rev 188327)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css 2015-08-12 05:54:14 UTC (rev 188328)
</span><span class="lines">@@ -57,12 +57,12 @@
</span><span class="cx"> -webkit-transform: translateX(0px);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.timeline-overview.frames > .timeline-ruler > .selection-handle.right {
</del><ins>+.timeline-overview.frames > .timeline-ruler:not(.both-handles-clamped) > .selection-handle.right {
</ins><span class="cx"> -webkit-transform: translateX(5px);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .timeline-overview.frames > .timeline-ruler > .markers,
</span><del>-.timeline-overview.frames > .timeline-ruler > .shaded-area.right {
</del><ins>+.timeline-overview.frames > .timeline-ruler:not(.both-handles-clamped) > .shaded-area.right {
</ins><span class="cx"> -webkit-transform: translateX(1px);
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRulercss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css (188327 => 188328)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css 2015-08-12 05:49:09 UTC (rev 188327)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css 2015-08-12 05:54:14 UTC (rev 188328)
</span><span class="lines">@@ -169,6 +169,14 @@
</span><span class="cx"> background-color: white;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.timeline-ruler.both-handles-clamped > .selection-handle {
+ z-index: 14;
+}
+
+.timeline-ruler > .selection-handle.clamped.hidden {
+ display: none;
+}
+
</ins><span class="cx"> .timeline-ruler > .selection-handle.left {
</span><span class="cx"> -webkit-transform: translateX(-4px);
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRulerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.js (188327 => 188328)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.js 2015-08-12 05:49:09 UTC (rev 188327)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.js 2015-08-12 05:54:14 UTC (rev 188328)
</span><span class="lines">@@ -587,27 +587,31 @@
</span><span class="cx"> if (!this._allowsTimeRangeSelection)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- let startTimeClamped = this._selectionStartTime < this._startTime;
- let endTimeClamped = this._selectionEndTime > this._endTime;
</del><ins>+ let startTimeClamped = this._selectionStartTime < this._startTime || this._selectionStartTime > this._endTime;
+ let endTimeClamped = this._selectionEndTime < this._startTime || this._selectionEndTime > this._endTime;
</ins><span class="cx">
</span><ins>+ this.element.classList.toggle("both-handles-clamped", startTimeClamped && endTimeClamped);
+
</ins><span class="cx"> let formattedStartTimeText = this._formatDividerLabelText(this._selectionStartTime);
</span><span class="cx"> let formattedEndTimeText = this._formatDividerLabelText(this._selectionEndTime);
</span><span class="cx">
</span><del>- let newLeftPosition = Math.max(0, (this._selectionStartTime - this._startTime) / duration);
</del><ins>+ let newLeftPosition = clamp(0, (this._selectionStartTime - this._startTime) / duration, 1);
</ins><span class="cx"> this._updatePositionOfElement(this._leftShadedAreaElement, newLeftPosition, visibleWidth, "width");
</span><span class="cx"> this._updatePositionOfElement(this._leftSelectionHandleElement, newLeftPosition, visibleWidth, "left");
</span><span class="cx"> this._updatePositionOfElement(this._selectionDragElement, newLeftPosition, visibleWidth, "left");
</span><span class="cx">
</span><span class="cx"> this._leftSelectionHandleElement.classList.toggle("clamped", startTimeClamped);
</span><del>- this._leftSelectionHandleElement.title = startTimeClamped && this._selectionEndTime < this._startTime ? formattedEndTimeText : formattedStartTimeText;
</del><ins>+ this._leftSelectionHandleElement.classList.toggle("hidden", startTimeClamped && endTimeClamped && this._selectionStartTime < this._startTime);
+ this._leftSelectionHandleElement.title = formattedStartTimeText;
</ins><span class="cx">
</span><del>- let newRightPosition = 1 - Math.min((this._selectionEndTime - this._startTime) / duration, 1);
</del><ins>+ let newRightPosition = 1 - clamp(0, (this._selectionEndTime - this._startTime) / duration, 1);
</ins><span class="cx"> this._updatePositionOfElement(this._rightShadedAreaElement, newRightPosition, visibleWidth, "width");
</span><span class="cx"> this._updatePositionOfElement(this._rightSelectionHandleElement, newRightPosition, visibleWidth, "right");
</span><span class="cx"> this._updatePositionOfElement(this._selectionDragElement, newRightPosition, visibleWidth, "right");
</span><span class="cx">
</span><span class="cx"> this._rightSelectionHandleElement.classList.toggle("clamped", endTimeClamped);
</span><del>- this._rightSelectionHandleElement.title = endTimeClamped && this._selectionStartTime > this._endTime ? formattedStartTimeText : formattedEndTimeText;
</del><ins>+ this._rightSelectionHandleElement.classList.toggle("hidden", startTimeClamped && endTimeClamped && this._selectionEndTime > this._endTime);
+ this._rightSelectionHandleElement.title = formattedEndTimeText;
</ins><span class="cx">
</span><span class="cx"> if (!this._selectionDragElement.parentNode) {
</span><span class="cx"> this._element.appendChild(this._selectionDragElement);
</span></span></pre>
</div>
</div>
</body>
</html>