Commit ff048e0d authored by timothy@apple.com's avatar timothy@apple.com

Implement time range selection for TimelineOverview and TimelineRuler.

https://bugs.webkit.org/show_bug.cgi?id=126035

Reviewed by Joseph Pecoraro.

* UserInterface/TimelineContentView.js:
(WebInspector.TimelineContentView.prototype._update):
(WebInspector.TimelineContentView.prototype._recordingReset):
Properly update start time and the selection start time on reset.

* UserInterface/TimelineOverview.js:
(WebInspector.TimelineOverview):
(WebInspector.TimelineOverview.prototype.get selectionStartTime):
(WebInspector.TimelineOverview.prototype.set selectionStartTime):
(WebInspector.TimelineOverview.prototype.get selectionDuration):
(WebInspector.TimelineOverview.prototype.set selectionDuration):
Added selection getters and setters.

* UserInterface/TimelineRuler.css:
(.timeline-ruler.allows-time-range-selection):
(.timeline-ruler > *):
(.timeline-ruler > .header):
(.timeline-ruler > .selection-drag):
(.timeline-ruler > .selection-drag:active):
(.timeline-ruler > .selection-handle):
(.timeline-ruler > .selection-handle.left):
(.timeline-ruler > .selection-handle.right):
(.timeline-ruler > .shaded-area):
(.timeline-ruler > .shaded-area.left):
(.timeline-ruler > .shaded-area.right):
Added styles for the selection elements and tweaked pointer-events to allow
events on elements we expect.

* UserInterface/TimelineRuler.js:
(WebInspector.TimelineRuler):
(WebInspector.TimelineRuler.prototype.get allowsTimeRangeSelection): Added.
(WebInspector.TimelineRuler.prototype.set allowsTimeRangeSelection): Added.
(WebInspector.TimelineRuler.prototype.get selectionStartTime): Added.
(WebInspector.TimelineRuler.prototype.set selectionStartTime): Added.
(WebInspector.TimelineRuler.prototype.get selectionEndTime): Added.
(WebInspector.TimelineRuler.prototype.set selectionEndTime): Added.
(WebInspector.TimelineRuler.prototype.updateLayout):
(WebInspector.TimelineRuler.prototype._needsMarkerLayout.update):
(WebInspector.TimelineRuler.prototype._needsMarkerLayout):
(WebInspector.TimelineRuler.prototype._needsSelectionLayout.update):
(WebInspector.TimelineRuler.prototype._needsSelectionLayout):
(WebInspector.TimelineRuler.prototype._recalculate):
(WebInspector.TimelineRuler.prototype._updatePositionOfElement):
(WebInspector.TimelineRuler.prototype._updateMarkers):
(WebInspector.TimelineRuler.prototype._updateSelection): Added.
(WebInspector.TimelineRuler.prototype._dispatchTimeRangeSelectionChangedEvent):
(WebInspector.TimelineRuler.prototype._timelineMarkerTimeChanged):
(WebInspector.TimelineRuler.prototype._handleMouseDown): Added.
(WebInspector.TimelineRuler.prototype._handleMouseMove): Added.
(WebInspector.TimelineRuler.prototype._handleMouseUp): Added.
(WebInspector.TimelineRuler.prototype._handleSelectionHandleMouseDown): Added.
(WebInspector.TimelineRuler.prototype._handleSelectionHandleMouseMove): Added.
(WebInspector.TimelineRuler.prototype._handleSelectionHandleMouseUp): Added.
Create selection elements and handle mouse events for drag and move.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@162410 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent ca968a0c
2013-12-19 Timothy Hatcher <timothy@apple.com>
Implement time range selection for TimelineOverview and TimelineRuler.
https://bugs.webkit.org/show_bug.cgi?id=126035
Reviewed by Joseph Pecoraro.
* UserInterface/TimelineContentView.js:
(WebInspector.TimelineContentView.prototype._update):
(WebInspector.TimelineContentView.prototype._recordingReset):
Properly update start time and the selection start time on reset.
* UserInterface/TimelineOverview.js:
(WebInspector.TimelineOverview):
(WebInspector.TimelineOverview.prototype.get selectionStartTime):
(WebInspector.TimelineOverview.prototype.set selectionStartTime):
(WebInspector.TimelineOverview.prototype.get selectionDuration):
(WebInspector.TimelineOverview.prototype.set selectionDuration):
Added selection getters and setters.
* UserInterface/TimelineRuler.css:
(.timeline-ruler.allows-time-range-selection):
(.timeline-ruler > *):
(.timeline-ruler > .header):
(.timeline-ruler > .selection-drag):
(.timeline-ruler > .selection-drag:active):
(.timeline-ruler > .selection-handle):
(.timeline-ruler > .selection-handle.left):
(.timeline-ruler > .selection-handle.right):
(.timeline-ruler > .shaded-area):
(.timeline-ruler > .shaded-area.left):
(.timeline-ruler > .shaded-area.right):
Added styles for the selection elements and tweaked pointer-events to allow
events on elements we expect.
* UserInterface/TimelineRuler.js:
(WebInspector.TimelineRuler):
(WebInspector.TimelineRuler.prototype.get allowsTimeRangeSelection): Added.
(WebInspector.TimelineRuler.prototype.set allowsTimeRangeSelection): Added.
(WebInspector.TimelineRuler.prototype.get selectionStartTime): Added.
(WebInspector.TimelineRuler.prototype.set selectionStartTime): Added.
(WebInspector.TimelineRuler.prototype.get selectionEndTime): Added.
(WebInspector.TimelineRuler.prototype.set selectionEndTime): Added.
(WebInspector.TimelineRuler.prototype.updateLayout):
(WebInspector.TimelineRuler.prototype._needsMarkerLayout.update):
(WebInspector.TimelineRuler.prototype._needsMarkerLayout):
(WebInspector.TimelineRuler.prototype._needsSelectionLayout.update):
(WebInspector.TimelineRuler.prototype._needsSelectionLayout):
(WebInspector.TimelineRuler.prototype._recalculate):
(WebInspector.TimelineRuler.prototype._updatePositionOfElement):
(WebInspector.TimelineRuler.prototype._updateMarkers):
(WebInspector.TimelineRuler.prototype._updateSelection): Added.
(WebInspector.TimelineRuler.prototype._dispatchTimeRangeSelectionChangedEvent):
(WebInspector.TimelineRuler.prototype._timelineMarkerTimeChanged):
(WebInspector.TimelineRuler.prototype._handleMouseDown): Added.
(WebInspector.TimelineRuler.prototype._handleMouseMove): Added.
(WebInspector.TimelineRuler.prototype._handleMouseUp): Added.
(WebInspector.TimelineRuler.prototype._handleSelectionHandleMouseDown): Added.
(WebInspector.TimelineRuler.prototype._handleSelectionHandleMouseMove): Added.
(WebInspector.TimelineRuler.prototype._handleSelectionHandleMouseUp): Added.
Create selection elements and handle mouse events for drag and move.
2013-12-17 Timothy Hatcher <timothy@apple.com>
Support scroll to zoom in TimelineOverview.
......
......@@ -192,7 +192,13 @@ WebInspector.TimelineContentView.prototype = {
this._currentTimeMarker.time = currentTime;
this._timelineOverview.startTime = startTime;
if (this._startTimeNeedsReset && !isNaN(startTime)) {
var selectionOffset = this._timelineOverview.selectionStartTime - this._timelineOverview.startTime;
this._timelineOverview.startTime = startTime;
this._timelineOverview.selectionStartTime = startTime + selectionOffset;
delete this._startTimeNeedsReset;
}
this._timelineOverview.endTime = Math.max(endTime, currentTime);
// Force a layout now since we are already in an animation frame and don't need to delay it until the next.
......@@ -233,6 +239,7 @@ WebInspector.TimelineContentView.prototype = {
_recordingReset: function(event)
{
this._startTimeNeedsReset = true;
this._currentTimeMarker.time = 0;
this._overviewTimelineView.reset();
......
......@@ -38,12 +38,14 @@ WebInspector.TimelineOverview = function()
this._timelineRuler = new WebInspector.TimelineRuler;
this._timelineRuler.allowsClippedLabels = true;
this._timelineRuler.allowsTimeRangeSelection = true;
this._scrollContainer.appendChild(this._timelineRuler.element);
this._endTime = 0;
this.startTime = 0;
this.secondsPerPixel = 0.0025;
this.selectionDuration = 5;
};
WebInspector.TimelineOverview.StyleClassName = "timeline-overview";
......@@ -108,6 +110,31 @@ WebInspector.TimelineOverview.prototype = {
this._needsLayout();
},
get selectionStartTime()
{
return this._timelineRuler.selectionStartTime;
},
set selectionStartTime(x)
{
x = x || 0;
var selectionDuration = this.selectionDuration;
this._timelineRuler.selectionStartTime = x;
this._timelineRuler.selectionEndTime = x + selectionDuration;
},
get selectionDuration()
{
return this._timelineRuler.selectionEndTime - this._timelineRuler.selectionStartTime;
},
set selectionDuration(x)
{
x = Math.max(WebInspector.TimelineRuler.MinimumSelectionTimeRange, x);
this._timelineRuler.selectionEndTime = this._timelineRuler.selectionStartTime + x;
},
addMarker: function(marker)
{
this._timelineRuler.addMarker(marker);
......
......@@ -28,12 +28,22 @@
pointer-events: none;
}
.timeline-ruler.allows-time-range-selection {
pointer-events: all;
}
.timeline-ruler > * {
pointer-events: none;
}
.timeline-ruler > .header {
border-bottom: 1px solid rgb(200, 200, 200);
position: absolute;
top: 0;
left: 0;
right: 0;
height: 22px;
position: relative;
}
.timeline-ruler > .header > .divider {
......@@ -115,3 +125,50 @@
.timeline-ruler > .markers > .marker.timestamp {
border-left-color: rgba(0, 110, 0, 0.5);
}
.timeline-ruler > .selection-drag {
position: absolute;
top: 0;
height: 22px;
cursor: -webkit-grab;
pointer-events: all;
}
.timeline-ruler > .selection-drag:active {
cursor: -webkit-grabbing;
}
.timeline-ruler > .selection-handle {
position: absolute;
top: 0;
width: 8px;
height: 21px;
border-radius: 5px;
background-color: rgb(164, 164, 164);
border: 1px solid white;
cursor: col-resize;
pointer-events: all;
}
.timeline-ruler > .selection-handle.left {
-webkit-transform: translateX(-4px);
}
.timeline-ruler > .selection-handle.right {
-webkit-transform: translateX(4px);
}
.timeline-ruler > .shaded-area {
position: absolute;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.1);
}
.timeline-ruler > .shaded-area.left {
left: 0;
}
.timeline-ruler > .shaded-area.right {
right: 0;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment