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

Source/WebInspectorUI/ChangeLog

+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.

Source/WebInspectorUI/UserInterface/TimelineContentView.js

@@ -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();

Source/WebInspectorUI/UserInterface/TimelineOverview.js

@@ -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);

Source/WebInspectorUI/UserInterface/TimelineRuler.css

@@ -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;
+}