Modified: trunk/Source/WebInspectorUI/ChangeLog (188327 => 188328)
--- 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)
@@ -1,3 +1,32 @@
+2015-08-11 Matt Baker <[email protected]>
+
+ 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):
+
+
2015-08-11 Devin Rousso <[email protected]>
Web Inspector: Disabling attribute styles should not be possible
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css (188327 => 188328)
--- 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)
@@ -57,12 +57,12 @@
-webkit-transform: translateX(0px);
}
-.timeline-overview.frames > .timeline-ruler > .selection-handle.right {
+.timeline-overview.frames > .timeline-ruler:not(.both-handles-clamped) > .selection-handle.right {
-webkit-transform: translateX(5px);
}
.timeline-overview.frames > .timeline-ruler > .markers,
-.timeline-overview.frames > .timeline-ruler > .shaded-area.right {
+.timeline-overview.frames > .timeline-ruler:not(.both-handles-clamped) > .shaded-area.right {
-webkit-transform: translateX(1px);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css (188327 => 188328)
--- 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)
@@ -169,6 +169,14 @@
background-color: white;
}
+.timeline-ruler.both-handles-clamped > .selection-handle {
+ z-index: 14;
+}
+
+.timeline-ruler > .selection-handle.clamped.hidden {
+ display: none;
+}
+
.timeline-ruler > .selection-handle.left {
-webkit-transform: translateX(-4px);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.js (188327 => 188328)
--- 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)
@@ -587,27 +587,31 @@
if (!this._allowsTimeRangeSelection)
return;
- let startTimeClamped = this._selectionStartTime < this._startTime;
- let endTimeClamped = this._selectionEndTime > this._endTime;
+ let startTimeClamped = this._selectionStartTime < this._startTime || this._selectionStartTime > this._endTime;
+ let endTimeClamped = this._selectionEndTime < this._startTime || this._selectionEndTime > this._endTime;
+ this.element.classList.toggle("both-handles-clamped", startTimeClamped && endTimeClamped);
+
let formattedStartTimeText = this._formatDividerLabelText(this._selectionStartTime);
let formattedEndTimeText = this._formatDividerLabelText(this._selectionEndTime);
- let newLeftPosition = Math.max(0, (this._selectionStartTime - this._startTime) / duration);
+ let newLeftPosition = clamp(0, (this._selectionStartTime - this._startTime) / duration, 1);
this._updatePositionOfElement(this._leftShadedAreaElement, newLeftPosition, visibleWidth, "width");
this._updatePositionOfElement(this._leftSelectionHandleElement, newLeftPosition, visibleWidth, "left");
this._updatePositionOfElement(this._selectionDragElement, newLeftPosition, visibleWidth, "left");
this._leftSelectionHandleElement.classList.toggle("clamped", startTimeClamped);
- this._leftSelectionHandleElement.title = startTimeClamped && this._selectionEndTime < this._startTime ? formattedEndTimeText : formattedStartTimeText;
+ this._leftSelectionHandleElement.classList.toggle("hidden", startTimeClamped && endTimeClamped && this._selectionStartTime < this._startTime);
+ this._leftSelectionHandleElement.title = formattedStartTimeText;
- let newRightPosition = 1 - Math.min((this._selectionEndTime - this._startTime) / duration, 1);
+ let newRightPosition = 1 - clamp(0, (this._selectionEndTime - this._startTime) / duration, 1);
this._updatePositionOfElement(this._rightShadedAreaElement, newRightPosition, visibleWidth, "width");
this._updatePositionOfElement(this._rightSelectionHandleElement, newRightPosition, visibleWidth, "right");
this._updatePositionOfElement(this._selectionDragElement, newRightPosition, visibleWidth, "right");
this._rightSelectionHandleElement.classList.toggle("clamped", endTimeClamped);
- this._rightSelectionHandleElement.title = endTimeClamped && this._selectionStartTime > this._endTime ? formattedStartTimeText : formattedEndTimeText;
+ this._rightSelectionHandleElement.classList.toggle("hidden", startTimeClamped && endTimeClamped && this._selectionEndTime > this._endTime);
+ this._rightSelectionHandleElement.title = formattedEndTimeText;
if (!this._selectionDragElement.parentNode) {
this._element.appendChild(this._selectionDragElement);
