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

Source/WebInspectorUI/ChangeLog

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

Source/WebInspectorUI/UserInterface/OverviewTimelineView.js

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

Source/WebInspectorUI/UserInterface/TimelineContentView.js

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

Source/WebInspectorUI/UserInterface/TimelineOverview.js

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

Source/WebInspectorUI/UserInterface/TimelineRuler.js

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

Source/WebInspectorUI/UserInterface/TimelineView.js

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