diff options
Diffstat (limited to 'Source/WebInspectorUI/UserInterface/TimelineRuler.js')
| -rw-r--r-- | Source/WebInspectorUI/UserInterface/TimelineRuler.js | 753 |
1 files changed, 0 insertions, 753 deletions
diff --git a/Source/WebInspectorUI/UserInterface/TimelineRuler.js b/Source/WebInspectorUI/UserInterface/TimelineRuler.js deleted file mode 100644 index 2fa6d85c1..000000000 --- a/Source/WebInspectorUI/UserInterface/TimelineRuler.js +++ /dev/null @@ -1,753 +0,0 @@ -/* - * Copyright (C) 2013 Apple Inc. All rights reserved. - * - * Redistribution and use in source and binary forms, with or without - * modification, are permitted provided that the following conditions - * are met: - * 1. Redistributions of source code must retain the above copyright - * notice, this list of conditions and the following disclaimer. - * 2. Redistributions in binary form must reproduce the above copyright - * notice, this list of conditions and the following disclaimer in the - * documentation and/or other materials provided with the distribution. - * - * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS'' - * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, - * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR - * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS - * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR - * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF - * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS - * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN - * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) - * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF - * THE POSSIBILITY OF SUCH DAMAGE. - */ - -WebInspector.TimelineRuler = function() -{ - WebInspector.Object.call(this); - - this._element = document.createElement("div"); - this._element.className = WebInspector.TimelineRuler.StyleClassName; - - this._headerElement = document.createElement("div"); - this._headerElement.className = WebInspector.TimelineRuler.HeaderElementStyleClassName; - this._element.appendChild(this._headerElement); - - this._markersElement = document.createElement("div"); - this._markersElement.className = WebInspector.TimelineRuler.MarkersElementStyleClassName; - this._element.appendChild(this._markersElement); - - this._zeroTime = 0; - this._startTime = 0; - this._endTime = 0; - this._duration = NaN; - this._secondsPerPixel = 0; - this._selectionStartTime = 0; - this._selectionEndTime = Infinity; - this._endTimePinned = false; - this._allowsClippedLabels = false; - this._allowsTimeRangeSelection = false; - - this._markerElementMap = new Map; -} - -WebInspector.TimelineRuler.MinimumLeftDividerSpacing = 48; -WebInspector.TimelineRuler.MinimumDividerSpacing = 64; - -WebInspector.TimelineRuler.StyleClassName = "timeline-ruler"; -WebInspector.TimelineRuler.AllowsTimeRangeSelectionStyleClassName = "allows-time-range-selection"; -WebInspector.TimelineRuler.HeaderElementStyleClassName = "header"; -WebInspector.TimelineRuler.DividerElementStyleClassName = "divider"; -WebInspector.TimelineRuler.DividerLabelElementStyleClassName = "label"; - -WebInspector.TimelineRuler.MarkersElementStyleClassName = "markers"; -WebInspector.TimelineRuler.BaseMarkerElementStyleClassName = "marker"; -WebInspector.TimelineRuler.ShadedAreaElementStyleClassName = "shaded-area"; -WebInspector.TimelineRuler.SelectionDragElementStyleClassName = "selection-drag"; -WebInspector.TimelineRuler.SelectionHandleElementStyleClassName = "selection-handle"; -WebInspector.TimelineRuler.LeftSelectionElementStyleClassName = "left"; -WebInspector.TimelineRuler.RightSelectionElementStyleClassName = "right"; -WebInspector.TimelineRuler.MinimumSelectionTimeRange = 0.01; - -WebInspector.TimelineRuler.Event = { - TimeRangeSelectionChanged: "time-ruler-time-range-selection-changed" -}; - -WebInspector.TimelineRuler.prototype = { - constructor: WebInspector.TimelineRuler, - - // Public - - get element() - { - return this._element; - }, - - get allowsClippedLabels() - { - return this._allowsClippedLabels - }, - - set allowsClippedLabels(x) - { - if (this._allowsClippedLabels === x) - return; - - this._allowsClippedLabels = x || false; - - this._needsLayout(); - }, - - get allowsTimeRangeSelection() - { - return this._allowsTimeRangeSelection; - }, - - set allowsTimeRangeSelection(x) - { - if (this._allowsTimeRangeSelection === x) - return; - - this._allowsTimeRangeSelection = x || false; - - if (x) { - this._mouseDownEventListener = this._handleMouseDown.bind(this); - this._element.addEventListener("mousedown", this._mouseDownEventListener); - - this._leftShadedAreaElement = document.createElement("div"); - this._leftShadedAreaElement.classList.add(WebInspector.TimelineRuler.ShadedAreaElementStyleClassName); - this._leftShadedAreaElement.classList.add(WebInspector.TimelineRuler.LeftSelectionElementStyleClassName); - - this._rightShadedAreaElement = document.createElement("div"); - this._rightShadedAreaElement.classList.add(WebInspector.TimelineRuler.ShadedAreaElementStyleClassName); - this._rightShadedAreaElement.classList.add(WebInspector.TimelineRuler.RightSelectionElementStyleClassName); - - this._leftSelectionHandleElement = document.createElement("div"); - this._leftSelectionHandleElement.classList.add(WebInspector.TimelineRuler.SelectionHandleElementStyleClassName); - this._leftSelectionHandleElement.classList.add(WebInspector.TimelineRuler.LeftSelectionElementStyleClassName); - this._leftSelectionHandleElement.addEventListener("mousedown", this._handleSelectionHandleMouseDown.bind(this)); - - this._rightSelectionHandleElement = document.createElement("div"); - this._rightSelectionHandleElement.classList.add(WebInspector.TimelineRuler.SelectionHandleElementStyleClassName); - this._rightSelectionHandleElement.classList.add(WebInspector.TimelineRuler.RightSelectionElementStyleClassName); - this._rightSelectionHandleElement.addEventListener("mousedown", this._handleSelectionHandleMouseDown.bind(this)); - - this._selectionDragElement = document.createElement("div"); - this._selectionDragElement.classList.add(WebInspector.TimelineRuler.SelectionDragElementStyleClassName); - - this._needsSelectionLayout(); - } else { - this._element.removeEventListener("mousedown", this._mouseDownEventListener); - delete this._mouseDownEventListener; - - this._leftShadedAreaElement.remove(); - this._rightShadedAreaElement.remove(); - this._leftSelectionHandleElement.remove(); - this._rightSelectionHandleElement.remove(); - this._selectionDragElement.remove(); - - delete this._leftShadedAreaElement; - delete this._rightShadedAreaElement; - delete this._leftSelectionHandleElement; - delete this._rightSelectionHandleElement; - delete this._selectionDragElement; - } - }, - - get zeroTime() - { - return this._zeroTime; - }, - - set zeroTime(x) - { - if (this._zeroTime === x) - return; - - this._zeroTime = x || 0; - - this._needsLayout(); - }, - - get startTime() - { - return this._startTime; - }, - - set startTime(x) - { - if (this._startTime === x) - return; - - this._startTime = x || 0; - - if (!isNaN(this._duration)) - this._endTime = this._startTime + this._duration; - - this._needsLayout(); - }, - - get duration() - { - if (!isNaN(this._duration)) - return this._duration; - return this.endTime - this.startTime; - }, - - set duration(x) - { - if (this._duration === x) - return; - - this._duration = x || NaN; - - if (!isNaN(this._duration)) { - this._endTime = this._startTime + this._duration; - this._endTimePinned = true; - } else - this._endTimePinned = false; - - this._needsLayout(); - }, - - get endTime() - { - if (!this._endTimePinned && this._scheduledLayoutUpdateIdentifier) - this._recalculate(); - return this._endTime; - }, - - set endTime(x) - { - if (this._endTime === x) - return; - - this._endTime = x || 0; - this._endTimePinned = true; - - this._needsLayout(); - }, - - get secondsPerPixel() - { - if (this._scheduledLayoutUpdateIdentifier) - this._recalculate(); - return this._secondsPerPixel; - }, - - set secondsPerPixel(x) - { - if (this._secondsPerPixel === x) - return; - - this._secondsPerPixel = x || 0; - this._endTimePinned = false; - this._currentSliceTime = 0; - - this._needsLayout(); - }, - - get selectionStartTime() - { - return this._selectionStartTime; - }, - - set selectionStartTime(x) - { - if (this._selectionStartTime === x) - return; - - this._selectionStartTime = x || 0; - this._timeRangeSelectionChanged = true; - - this._needsSelectionLayout(); - }, - - get selectionEndTime() - { - return this._selectionEndTime; - }, - - set selectionEndTime(x) - { - if (this._selectionEndTime === x) - return; - - this._selectionEndTime = x || 0; - this._timeRangeSelectionChanged = true; - - this._needsSelectionLayout(); - }, - - addMarker: function(marker) - { - console.assert(marker instanceof WebInspector.TimelineMarker); - - if (this._markerElementMap.has(marker)) - return; - - marker.addEventListener(WebInspector.TimelineMarker.Event.TimeChanged, this._timelineMarkerTimeChanged, this); - - var markerElement = document.createElement("div"); - markerElement.classList.add(WebInspector.TimelineRuler.BaseMarkerElementStyleClassName); - markerElement.classList.add(marker.type); - - this._markerElementMap.set(marker, markerElement); - - this._needsMarkerLayout(); - }, - - elementForMarker: function(marker) - { - return this._markerElementMap.get(marker) || null; - }, - - updateLayout: function() - { - if (this._scheduledLayoutUpdateIdentifier) { - cancelAnimationFrame(this._scheduledLayoutUpdateIdentifier); - delete this._scheduledLayoutUpdateIdentifier; - } - - var visibleWidth = this._recalculate(); - if (visibleWidth <= 0) - return; - - var duration = this.duration; - - var pixelsPerSecond = visibleWidth / duration; - - // Calculate a divider count based on the maximum allowed divider density. - var dividerCount = Math.round(visibleWidth / WebInspector.TimelineRuler.MinimumDividerSpacing); - - if (this._endTimePinned || !this._currentSliceTime) { - // Calculate the slice time based on the rough divider count and the time span. - var sliceTime = duration / dividerCount; - - // Snap the slice time to a nearest number (e.g. 0.1, 0.2, 0.5, 1, 2, 5, 10, 20, 50, etc.) - sliceTime = Math.pow(10, Math.ceil(Math.log(sliceTime) / Math.LN10)); - if (sliceTime * pixelsPerSecond >= 5 * WebInspector.TimelineRuler.MinimumDividerSpacing) - sliceTime = sliceTime / 5; - if (sliceTime * pixelsPerSecond >= 2 * WebInspector.TimelineRuler.MinimumDividerSpacing) - sliceTime = sliceTime / 2; - - this._currentSliceTime = sliceTime; - } else { - // Reuse the last slice time since the time duration does not scale to fit when the end time isn't pinned. - var sliceTime = this._currentSliceTime; - } - - var firstDividerTime = (Math.ceil((this._startTime - this._zeroTime) / sliceTime) * sliceTime) + this._zeroTime; - var lastDividerTime = this._endTime; - - // Calculate the divider count now based on the final slice time. - dividerCount = Math.ceil((lastDividerTime - firstDividerTime) / sliceTime); - - // Make an extra divider in case the last one is partially visible. - if (!this._endTimePinned) - ++dividerCount; - - var markerDividers = this._markersElement.querySelectorAll("." + WebInspector.TimelineRuler.DividerElementStyleClassName); - - var dividerElement = this._headerElement.firstChild; - - for (var i = 0; i <= dividerCount; ++i) { - if (!dividerElement) { - dividerElement = document.createElement("div"); - dividerElement.className = WebInspector.TimelineRuler.DividerElementStyleClassName; - this._headerElement.appendChild(dividerElement); - - var labelElement = document.createElement("div"); - labelElement.className = WebInspector.TimelineRuler.DividerLabelElementStyleClassName; - dividerElement._labelElement = labelElement; - dividerElement.appendChild(labelElement); - } - - var markerDividerElement = markerDividers[i]; - if (!markerDividerElement) { - markerDividerElement = document.createElement("div"); - markerDividerElement.className = WebInspector.TimelineRuler.DividerElementStyleClassName; - this._markersElement.appendChild(markerDividerElement); - } - - var dividerTime = firstDividerTime + (sliceTime * i); - - var newLeftPosition = (dividerTime - this._startTime) / duration; - - if (!this._allowsClippedLabels) { - // Don't allow dividers under 0% where they will be completely hidden. - if (newLeftPosition < 0) - continue; - - // When over 100% it is time to stop making/updating dividers. - if (newLeftPosition > 1) - break; - - // Don't allow the left-most divider spacing to be so tight it clips. - if ((newLeftPosition * visibleWidth) < WebInspector.TimelineRuler.MinimumLeftDividerSpacing) - continue; - } - - this._updatePositionOfElement(dividerElement, newLeftPosition, visibleWidth); - this._updatePositionOfElement(markerDividerElement, newLeftPosition, visibleWidth); - - dividerElement._labelElement.textContent = isNaN(dividerTime) ? "" : Number.secondsToString(dividerTime - this._zeroTime, true); - dividerElement = dividerElement.nextSibling; - } - - // Remove extra dividers. - while (dividerElement) { - var nextDividerElement = dividerElement.nextSibling; - dividerElement.remove(); - dividerElement = nextDividerElement; - } - - for (; i < markerDividers.length; ++i) - markerDividers[i].remove(); - - this._updateMarkers(visibleWidth, duration); - this._updateSelection(visibleWidth, duration); - }, - - updateLayoutIfNeeded: function() - { - // If there is a main layout scheduled we can just update layout and return, since that - // will update markers and the selection at the same time. - if (this._scheduledLayoutUpdateIdentifier) { - this.updateLayout(); - return; - } - - var visibleWidth = this._element.clientWidth; - if (visibleWidth <= 0) - return; - - if (this._scheduledMarkerLayoutUpdateIdentifier) - this._updateMarkers(visibleWidth, this.duration); - - if (this._scheduledSelectionLayoutUpdateIdentifier) - this._updateSelection(visibleWidth, this.duration); - }, - - // Private - - _needsLayout: function() - { - if (this._scheduledLayoutUpdateIdentifier) - return; - - if (this._scheduledMarkerLayoutUpdateIdentifier) { - cancelAnimationFrame(this._scheduledMarkerLayoutUpdateIdentifier); - delete this._scheduledMarkerLayoutUpdateIdentifier; - } - - if (this._scheduledSelectionLayoutUpdateIdentifier) { - cancelAnimationFrame(this._scheduledSelectionLayoutUpdateIdentifier); - delete this._scheduledSelectionLayoutUpdateIdentifier; - } - - this._scheduledLayoutUpdateIdentifier = requestAnimationFrame(this.updateLayout.bind(this)); - }, - - _needsMarkerLayout: function() - { - // If layout is scheduled, abort since markers will be updated when layout happens. - if (this._scheduledLayoutUpdateIdentifier) - return; - - if (this._scheduledMarkerLayoutUpdateIdentifier) - return; - - function update() - { - delete this._scheduledMarkerLayoutUpdateIdentifier; - - var visibleWidth = this._element.clientWidth; - if (visibleWidth <= 0) - return; - - this._updateMarkers(visibleWidth, this.duration); - } - - this._scheduledMarkerLayoutUpdateIdentifier = requestAnimationFrame(update.bind(this)); - }, - - _needsSelectionLayout: function() - { - if (!this._allowsTimeRangeSelection) - return; - - // If layout is scheduled, abort since the selection will be updated when layout happens. - if (this._scheduledLayoutUpdateIdentifier) - return; - - if (this._scheduledSelectionLayoutUpdateIdentifier) - return; - - function update() - { - delete this._scheduledSelectionLayoutUpdateIdentifier; - - var visibleWidth = this._element.clientWidth; - if (visibleWidth <= 0) - return; - - this._updateSelection(visibleWidth, this.duration); - } - - this._scheduledSelectionLayoutUpdateIdentifier = requestAnimationFrame(update.bind(this)); - }, - - _recalculate: function() - { - var visibleWidth = this._element.clientWidth; - if (visibleWidth <= 0) - return 0; - - if (this._endTimePinned) - var duration = this._endTime - this._startTime; - else - var duration = visibleWidth * this._secondsPerPixel; - - this._secondsPerPixel = duration / visibleWidth; - - if (!this._endTimePinned) - this._endTime = this._startTime + (visibleWidth * this._secondsPerPixel); - - return visibleWidth; - }, - - _updatePositionOfElement: function(element, newPosition, visibleWidth, property) - { - property = property || "left"; - - newPosition *= this._endTimePinned ? 100 : visibleWidth; - newPosition = newPosition.toFixed(2); - - var currentPosition = parseFloat(element.style[property]).toFixed(2); - if (currentPosition !== newPosition) - element.style[property] = newPosition + (this._endTimePinned ? "%" : "px"); - }, - - _updateMarkers: function(visibleWidth, duration) - { - if (this._scheduledMarkerLayoutUpdateIdentifier) { - cancelAnimationFrame(this._scheduledMarkerLayoutUpdateIdentifier); - delete this._scheduledMarkerLayoutUpdateIdentifier; - } - - this._markerElementMap.forEach(function(markerElement, marker) { - var newLeftPosition = (marker.time - this._startTime) / duration; - - this._updatePositionOfElement(markerElement, newLeftPosition, visibleWidth); - - if (!markerElement.parentNode) - this._markersElement.appendChild(markerElement); - }, this); - }, - - _updateSelection: function(visibleWidth, duration) - { - if (this._scheduledSelectionLayoutUpdateIdentifier) { - cancelAnimationFrame(this._scheduledSelectionLayoutUpdateIdentifier); - delete this._scheduledSelectionLayoutUpdateIdentifier; - } - - this._element.classList.toggle(WebInspector.TimelineRuler.AllowsTimeRangeSelectionStyleClassName, this._allowsTimeRangeSelection); - - if (!this._allowsTimeRangeSelection) - return; - - var newLeftPosition = Math.max(0, (this._selectionStartTime - this._startTime) / duration); - this._updatePositionOfElement(this._leftShadedAreaElement, newLeftPosition, visibleWidth, "width"); - this._updatePositionOfElement(this._leftSelectionHandleElement, newLeftPosition, visibleWidth, "left"); - this._updatePositionOfElement(this._selectionDragElement, newLeftPosition, visibleWidth, "left"); - - var newRightPosition = 1 - Math.min((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"); - - if (!this._selectionDragElement.parentNode) { - this._element.appendChild(this._selectionDragElement); - this._element.appendChild(this._leftShadedAreaElement); - this._element.appendChild(this._leftSelectionHandleElement); - this._element.appendChild(this._rightShadedAreaElement); - this._element.appendChild(this._rightSelectionHandleElement); - } - - if (this._timeRangeSelectionChanged) - this._dispatchTimeRangeSelectionChangedEvent(); - }, - - _dispatchTimeRangeSelectionChangedEvent: function() - { - delete this._timeRangeSelectionChanged; - - if (this._suppressTimeRangeSelectionChangedEvent) - return; - - this.dispatchEventToListeners(WebInspector.TimelineRuler.Event.TimeRangeSelectionChanged); - }, - - _timelineMarkerTimeChanged: function() - { - this._needsMarkerLayout(); - }, - - _handleMouseDown: function(event) - { - // Only handle left mouse clicks. - if (event.button !== 0 || event.ctrlKey) - return; - - this._selectionIsMove = event.target === this._selectionDragElement; - this._suppressTimeRangeSelectionChangedEvent = !this._selectionIsMove; - - if (this._selectionIsMove) - this._lastMousePosition = event.pageX; - else - this._mouseDownPosition = event.pageX - this._element.totalOffsetLeft; - - this._mouseMoveEventListener = this._handleMouseMove.bind(this); - this._mouseUpEventListener = this._handleMouseUp.bind(this); - - // Register these listeners on the document so we can track the mouse if it leaves the ruler. - document.addEventListener("mousemove", this._mouseMoveEventListener); - document.addEventListener("mouseup", this._mouseUpEventListener); - - event.preventDefault(); - event.stopPropagation(); - }, - - _handleMouseMove: function(event) - { - console.assert(event.button === 0); - - if (this._selectionIsMove) { - var currentMousePosition = event.pageX; - - var offsetTime = (currentMousePosition - this._lastMousePosition) * this.secondsPerPixel; - var selectionDuration = this.selectionEndTime - this.selectionStartTime; - - this.selectionStartTime = Math.max(this.startTime, Math.min(this.selectionStartTime + offsetTime, this.endTime - selectionDuration)); - this.selectionEndTime = this.selectionStartTime + selectionDuration; - - this._lastMousePosition = currentMousePosition; - } else { - var currentMousePosition = event.pageX - this._element.totalOffsetLeft; - - this.selectionStartTime = Math.max(this.startTime, this.startTime + (Math.min(currentMousePosition, this._mouseDownPosition) * this.secondsPerPixel)); - this.selectionEndTime = Math.min(this.startTime + (Math.max(currentMousePosition, this._mouseDownPosition) * this.secondsPerPixel), this.endTime); - } - - this._updateSelection(this._element.clientWidth, this.duration); - - event.preventDefault(); - event.stopPropagation(); - }, - - _handleMouseUp: function(event) - { - console.assert(event.button === 0); - - if (!this._selectionIsMove && this.selectionEndTime - this.selectionStartTime < WebInspector.TimelineRuler.MinimumSelectionTimeRange) { - // The section is smaller than allowed, grow in the direction of the drag to meet the minumum. - var currentMousePosition = event.pageX - this._element.totalOffsetLeft; - if (currentMousePosition > this._mouseDownPosition) { - this.selectionEndTime = Math.min(this.selectionStartTime + WebInspector.TimelineRuler.MinimumSelectionTimeRange, this.endTime); - this.selectionStartTime = this.selectionEndTime - WebInspector.TimelineRuler.MinimumSelectionTimeRange; - } else { - this.selectionStartTime = Math.max(this.startTime, this.selectionEndTime - WebInspector.TimelineRuler.MinimumSelectionTimeRange); - this.selectionEndTime = this.selectionStartTime + WebInspector.TimelineRuler.MinimumSelectionTimeRange - } - } - - delete this._suppressTimeRangeSelectionChangedEvent; - - this._dispatchTimeRangeSelectionChangedEvent(); - - document.removeEventListener("mousemove", this._mouseMoveEventListener); - document.removeEventListener("mouseup", this._mouseUpEventListener); - - delete this._mouseMovedEventListener; - delete this._mouseUpEventListener; - delete this._mouseDownPosition; - delete this._lastMousePosition; - delete this._selectionIsMove; - - event.preventDefault(); - event.stopPropagation(); - }, - - _handleSelectionHandleMouseDown: function(event) - { - // Only handle left mouse clicks. - if (event.button !== 0 || event.ctrlKey) - return; - - this._dragHandleIsStartTime = event.target === this._leftSelectionHandleElement; - this._mouseDownPosition = event.pageX - this._element.totalOffsetLeft; - - this._selectionHandleMouseMoveEventListener = this._handleSelectionHandleMouseMove.bind(this); - this._selectionHandleMouseUpEventListener = this._handleSelectionHandleMouseUp.bind(this); - - // Register these listeners on the document so we can track the mouse if it leaves the ruler. - document.addEventListener("mousemove", this._selectionHandleMouseMoveEventListener); - document.addEventListener("mouseup", this._selectionHandleMouseUpEventListener); - - event.preventDefault(); - event.stopPropagation(); - }, - - _handleSelectionHandleMouseMove: function(event) - { - console.assert(event.button === 0); - - var currentMousePosition = event.pageX - this._element.totalOffsetLeft; - var currentTime = this.startTime + (currentMousePosition * this.secondsPerPixel); - - if (event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) { - // Resize the selection on both sides when the Option keys is held down. - if (this._dragHandleIsStartTime) { - var timeDifference = currentTime - this.selectionStartTime; - this.selectionStartTime = Math.max(this.startTime, Math.min(currentTime, this.selectionEndTime - WebInspector.TimelineRuler.MinimumSelectionTimeRange)); - this.selectionEndTime = Math.min(Math.max(this.selectionStartTime + WebInspector.TimelineRuler.MinimumSelectionTimeRange, this.selectionEndTime - timeDifference), this.endTime); - } else { - var timeDifference = currentTime - this.selectionEndTime; - this.selectionEndTime = Math.min(Math.max(this.selectionStartTime + WebInspector.TimelineRuler.MinimumSelectionTimeRange, currentTime), this.endTime); - this.selectionStartTime = Math.max(this.startTime, Math.min(this.selectionStartTime - timeDifference, this.selectionEndTime - WebInspector.TimelineRuler.MinimumSelectionTimeRange)); - } - } else { - // Resize the selection on side being dragged. - if (this._dragHandleIsStartTime) - this.selectionStartTime = Math.max(this.startTime, Math.min(currentTime, this.selectionEndTime - WebInspector.TimelineRuler.MinimumSelectionTimeRange)); - else - this.selectionEndTime = Math.min(Math.max(this.selectionStartTime + WebInspector.TimelineRuler.MinimumSelectionTimeRange, currentTime), this.endTime); - } - - this._updateSelection(this._element.clientWidth, this.duration); - - event.preventDefault(); - event.stopPropagation(); - }, - - _handleSelectionHandleMouseUp: function(event) - { - console.assert(event.button === 0); - - document.removeEventListener("mousemove", this._selectionHandleMouseMoveEventListener); - document.removeEventListener("mouseup", this._selectionHandleMouseUpEventListener); - - delete this._selectionHandleMouseMoveEventListener; - delete this._selectionHandleMouseUpEventListener; - delete this._dragHandleIsStartTime; - delete this._mouseDownPosition; - - event.preventDefault(); - event.stopPropagation(); - } -} - -WebInspector.TimelineRuler.prototype.__proto__ = WebInspector.Object.prototype; |