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

Update the current WebInspector.TimelineView when time range changes.

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

Reviewed by Joseph Pecoraro.

* UserInterface/TimelineContentView.js:
(WebInspector.TimelineContentView.prototype._showTimelineView):
(WebInspector.TimelineContentView.prototype._update):
(WebInspector.TimelineContentView.prototype._startUpdatingCurrentTime):
(WebInspector.TimelineContentView.prototype._stopUpdatingCurrentTime):
(WebInspector.TimelineContentView.prototype._recordingStarted):
(WebInspector.TimelineContentView.prototype._recordingStopped):
(WebInspector.TimelineContentView.prototype._recordingReset):
(WebInspector.TimelineContentView.prototype._timeRangeSelectionChanged):
* UserInterface/TimelineOverview.js:
(WebInspector.TimelineOverview):
(WebInspector.TimelineOverview.prototype.updateLayout):
(WebInspector.TimelineOverview.prototype.updateLayoutIfNeeded):
(WebInspector.TimelineOverview.prototype._updateElementWidth):
(WebInspector.TimelineOverview.prototype._handleWheelEvent):
(WebInspector.TimelineOverview.prototype._timeRangeSelectionChanged):
* UserInterface/TimelineRuler.js:
(WebInspector.TimelineRuler.prototype.updateLayoutIfNeeded):
* UserInterface/TimelineView.js:
(WebInspector.TimelineView):
(WebInspector.TimelineView.prototype.get zeroTime):
(WebInspector.TimelineView.prototype.set zeroTime):
(WebInspector.TimelineView.prototype.get startTime):
(WebInspector.TimelineView.prototype.set startTime):
(WebInspector.TimelineView.prototype.get endTime):
(WebInspector.TimelineView.prototype.set endTime):
(WebInspector.TimelineView.prototype.get currentTime):
(WebInspector.TimelineView.prototype.set currentTime.checkIfLayoutIsNeeded):
(WebInspector.TimelineView.prototype.set currentTime):
(WebInspector.TimelineView.prototype.updateLayout):
(WebInspector.TimelineView.prototype.updateLayoutIfNeeded):
(WebInspector.TimelineView.prototype.needsLayout):

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@162411 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent ff048e0d
2014-01-08 Timothy Hatcher <timothy@apple.com>
Update the current WebInspector.TimelineView when time range changes.
https://bugs.webkit.org/show_bug.cgi?id=126667
Reviewed by Joseph Pecoraro.
* UserInterface/TimelineContentView.js:
(WebInspector.TimelineContentView.prototype._showTimelineView):
(WebInspector.TimelineContentView.prototype._update):
(WebInspector.TimelineContentView.prototype._startUpdatingCurrentTime):
(WebInspector.TimelineContentView.prototype._stopUpdatingCurrentTime):
(WebInspector.TimelineContentView.prototype._recordingStarted):
(WebInspector.TimelineContentView.prototype._recordingStopped):
(WebInspector.TimelineContentView.prototype._recordingReset):
(WebInspector.TimelineContentView.prototype._timeRangeSelectionChanged):
* UserInterface/TimelineOverview.js:
(WebInspector.TimelineOverview):
(WebInspector.TimelineOverview.prototype.updateLayout):
(WebInspector.TimelineOverview.prototype.updateLayoutIfNeeded):
(WebInspector.TimelineOverview.prototype._updateElementWidth):
(WebInspector.TimelineOverview.prototype._handleWheelEvent):
(WebInspector.TimelineOverview.prototype._timeRangeSelectionChanged):
* UserInterface/TimelineRuler.js:
(WebInspector.TimelineRuler.prototype.updateLayoutIfNeeded):
* UserInterface/TimelineView.js:
(WebInspector.TimelineView):
(WebInspector.TimelineView.prototype.get zeroTime):
(WebInspector.TimelineView.prototype.set zeroTime):
(WebInspector.TimelineView.prototype.get startTime):
(WebInspector.TimelineView.prototype.set startTime):
(WebInspector.TimelineView.prototype.get endTime):
(WebInspector.TimelineView.prototype.set endTime):
(WebInspector.TimelineView.prototype.get currentTime):
(WebInspector.TimelineView.prototype.set currentTime.checkIfLayoutIsNeeded):
(WebInspector.TimelineView.prototype.set currentTime):
(WebInspector.TimelineView.prototype.updateLayout):
(WebInspector.TimelineView.prototype.updateLayoutIfNeeded):
(WebInspector.TimelineView.prototype.needsLayout):
2013-12-19 Timothy Hatcher <timothy@apple.com>
Implement time range selection for TimelineOverview and TimelineRuler.
......
......@@ -35,8 +35,12 @@ WebInspector.OverviewTimelineView = function()
this._treeOutlineDataGridSynchronizer = new WebInspector.TreeOutlineDataGridSynchronizer(this._contentTreeOutline, this._dataGrid);
this._timelineRuler = new WebInspector.TimelineRuler;
this._timelineRuler.allowsClippedLabels = true;
this.element.appendChild(this._timelineRuler.element);
this._currentTimeMarker = new WebInspector.TimelineMarker(0, WebInspector.TimelineMarker.Type.CurrentTime);
this._timelineRuler.addMarker(this._currentTimeMarker);
this.element.classList.add(WebInspector.OverviewTimelineView.StyleClassName);
this.element.appendChild(this._dataGrid.element);
......@@ -73,6 +77,13 @@ WebInspector.OverviewTimelineView.prototype = {
updateLayout: function()
{
WebInspector.TimelineView.prototype.updateLayout.call(this);
this._timelineRuler.zeroTime = this.zeroTime;
this._timelineRuler.startTime = this.startTime;
this._timelineRuler.endTime = this.endTime;
this._currentTimeMarker.time = this.currentTime;
this._timelineRuler.updateLayout();
},
......
......@@ -30,6 +30,7 @@ WebInspector.TimelineContentView = function(recording)
this.element.classList.add(WebInspector.TimelineContentView.StyleClassName);
this._timelineOverview = new WebInspector.TimelineOverview;
this._timelineOverview.addEventListener(WebInspector.TimelineOverview.Event.TimeRangeSelectionChanged, this._timeRangeSelectionChanged, this);
this.element.appendChild(this._timelineOverview.element);
this._currentTimeMarker = new WebInspector.TimelineMarker(0, WebInspector.TimelineMarker.Type.CurrentTime);
......@@ -175,7 +176,14 @@ WebInspector.TimelineContentView.prototype = {
if (this._currentTimelineView) {
this._viewContainer.appendChild(this._currentTimelineView.element);
this._currentTimelineView.zeroTime = this._timelineOverview.startTime;
this._currentTimelineView.startTime = this._timelineOverview.selectionStartTime;
this._currentTimelineView.endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
this._currentTimelineView.currentTime = this._currentTimeMarker.time;
this._currentTimelineView.shown();
this._currentTimelineView.updateLayout();
}
this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
......@@ -190,8 +198,6 @@ WebInspector.TimelineContentView.prototype = {
currentTime += timespanSinceLastUpdate;
this._currentTimeMarker.time = currentTime;
if (this._startTimeNeedsReset && !isNaN(startTime)) {
var selectionOffset = this._timelineOverview.selectionStartTime - this._timelineOverview.startTime;
this._timelineOverview.startTime = startTime;
......@@ -201,8 +207,12 @@ WebInspector.TimelineContentView.prototype = {
this._timelineOverview.endTime = Math.max(endTime, currentTime);
this._currentTimeMarker.time = currentTime;
this._currentTimelineView.currentTime = currentTime;
// Force a layout now since we are already in an animation frame and don't need to delay it until the next.
this._timelineOverview.updateLayout();
this._timelineOverview.updateLayoutIfNeeded();
this._currentTimelineView.updateLayoutIfNeeded();
this._timelineOverview.revealMarker(this._currentTimeMarker);
......@@ -217,7 +227,7 @@ WebInspector.TimelineContentView.prototype = {
requestAnimationFrame(this._updateCallback);
},
_recordingStarted: function(event)
_startUpdatingCurrentTime: function()
{
console.assert(!this._updating);
if (this._updating)
......@@ -231,12 +241,22 @@ WebInspector.TimelineContentView.prototype = {
requestAnimationFrame(this._updateCallback);
},
_recordingStopped: function(event)
_stopUpdatingCurrentTime: function()
{
console.assert(this._updating);
this._updating = false;
},
_recordingStarted: function(event)
{
this._startUpdatingCurrentTime();
},
_recordingStopped: function(event)
{
this._stopUpdatingCurrentTime();
},
_recordingReset: function(event)
{
this._startTimeNeedsReset = true;
......@@ -246,5 +266,12 @@ WebInspector.TimelineContentView.prototype = {
for (var identifier in this._discreteTimelineViewMap)
this._discreteTimelineViewMap[identifier].reset();
},
_timeRangeSelectionChanged: function(event)
{
this._currentTimelineView.zeroTime = this._timelineOverview.startTime;
this._currentTimelineView.startTime = this._timelineOverview.selectionStartTime;
this._currentTimelineView.endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
}
};
......@@ -39,13 +39,14 @@ WebInspector.TimelineOverview = function()
this._timelineRuler = new WebInspector.TimelineRuler;
this._timelineRuler.allowsClippedLabels = true;
this._timelineRuler.allowsTimeRangeSelection = true;
this._timelineRuler.addEventListener(WebInspector.TimelineRuler.Event.TimeRangeSelectionChanged, this._timeRangeSelectionChanged, this);
this._scrollContainer.appendChild(this._timelineRuler.element);
this._endTime = 0;
this.startTime = 0;
this.secondsPerPixel = 0.0025;
this.selectionDuration = 5;
this.selectionDuration = 3;
};
WebInspector.TimelineOverview.StyleClassName = "timeline-overview";
......@@ -53,6 +54,10 @@ WebInspector.TimelineOverview.ScrollContainerStyleClassName = "scroll-container"
WebInspector.TimelineOverview.MinimumSecondsPerPixel = 0.001;
WebInspector.TimelineOverview.ScrollDeltaDenominator = 500;
WebInspector.TimelineOverview.Event = {
TimeRangeSelectionChanged: "timeline-overview-time-range-selection-changed"
};
WebInspector.TimelineOverview.prototype = {
constructor: WebInspector.TimelineOverview,
__proto__: WebInspector.Object.prototype,
......@@ -166,11 +171,20 @@ WebInspector.TimelineOverview.prototype = {
this._timelineRuler.updateLayout();
},
updateLayoutIfNeeded: function()
{
this._timelineRuler.updateLayoutIfNeeded();
if (!this._scheduledLayoutUpdateIdentifier)
return;
this.updateLayout();
},
// Private
_updateElementWidth: function(element, newWidth)
{
var currentWidth = parseFloat(element.style.width).toFixed(0);
var currentWidth = parseInt(element.style.width);
if (currentWidth !== newWidth)
element.style.width = newWidth + "px";
},
......@@ -198,12 +212,17 @@ WebInspector.TimelineOverview.prototype = {
this.secondsPerPixel += event.deltaY * (this._secondsPerPixel / WebInspector.TimelineOverview.ScrollDeltaDenominator) * deviceDirection;
// Force layout so we can update the scroll position synchronously.
this.updateLayout();
this.updateLayoutIfNeeded();
// Center the zoom around the mouse based on the remembered mouse position time.
this._scrollContainer.scrollLeft = Math.max(0, Math.round((mousePositionTime / this.secondsPerPixel) - mouseOffset));
event.preventDefault();
event.stopPropagation();
},
_timeRangeSelectionChanged: function(event)
{
this.dispatchEventToListeners(WebInspector.TimelineOverview.Event.TimeRangeSelectionChanged);
}
};
......@@ -410,6 +410,26 @@ WebInspector.TimelineRuler.prototype = {
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()
......
......@@ -31,6 +31,11 @@ WebInspector.TimelineView = function()
this.element = document.createElement("div");
this.element.classList.add(WebInspector.TimelineView.StyleClassName);
this._zeroTime = 0;
this._startTime = 0;
this._endTime = 5;
this._currentTime = 0;
};
WebInspector.TimelineView.StyleClassName = "timeline-view";
......@@ -52,6 +57,81 @@ WebInspector.TimelineView.prototype = {
return null;
},
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;
this.needsLayout();
},
get endTime()
{
return this._endTime;
},
set endTime(x)
{
if (this._endTime === x)
return;
this._endTime = x || 0;
this.needsLayout();
},
get currentTime()
{
return this._currentTime;
},
set currentTime(x)
{
if (this._currentTime === x)
return;
var oldCurrentTime = this._currentTime;
this._currentTime = x || 0;
function checkIfLayoutIsNeeded(currentTime)
{
// Include some wiggle room since the current time markers can be clipped off the ends a bit and still partially visible.
const wiggleTime = 0.05; // 50ms
return this._startTime - wiggleTime <= currentTime && currentTime <= this._endTime + wiggleTime;
}
if (checkIfLayoutIsNeeded.call(this, oldCurrentTime) || checkIfLayoutIsNeeded.call(this, this._currentTime))
this.needsLayout();
},
get visible()
{
return this._visible;
},
reset: function()
{
this._contentTreeOutline.removeChildren();
......@@ -59,16 +139,45 @@ WebInspector.TimelineView.prototype = {
shown: function()
{
this._visible = true;
// Implemented by sub-classes if needed.
},
hidden: function()
{
// Implemented by sub-classes if needed.
this._visible = false;
},
updateLayout: function()
{
if (this._scheduledLayoutUpdateIdentifier) {
cancelAnimationFrame(this._scheduledLayoutUpdateIdentifier);
delete this._scheduledLayoutUpdateIdentifier;
}
// Implemented by sub-classes if needed.
},
updateLayoutIfNeeded: function()
{
if (!this._scheduledLayoutUpdateIdentifier)
return;
this.updateLayout();
},
// Protected
needsLayout: function()
{
if (!this._visible)
return;
if (this._scheduledLayoutUpdateIdentifier)
return;
this._scheduledLayoutUpdateIdentifier = requestAnimationFrame(this.updateLayout.bind(this));
}
};
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