Web Inspector: zoom timeline frame on dblclick on the frame bar

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

Reviewed by Pavel Feldman.

       - put timeline frame bars into a container, so we can have one listener;
       - upon dblclick, find the frame, get its window coordinates and set overview selection window accordingly.

* inspector/front-end/TimelineOverviewPane.js:
(WebInspector.TimelineOverviewPane.prototype.zoomToFrame): Get frame coordinates, set overview window.
(WebInspector.TimelineVerticalOverview.prototype.update): Maintain framesPerBar as a member for reuse in getFramePosition()
(WebInspector.TimelineVerticalOverview.prototype.framePosition): Map frame to screen positions.
(WebInspector.TimelineVerticalOverview.prototype._renderBars): Factored out barNumberToScreenPosition()
(WebInspector.TimelineVerticalOverview.prototype._barNumberToScreenPosition):
(WebInspector.TimelineVerticalOverview.prototype.getWindowTimes): Drive-by style fix.
* inspector/front-end/TimelinePanel.js:
(WebInspector.TimelinePanel.prototype._updateFrames): Put frames into a containing div.
(WebInspector.TimelinePanel.prototype._onFrameDoubleClicked): Zoom to frame upon double click.
* inspector/front-end/timelinePanel.css:
(.timeline-frame-container):

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@113996 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index 199561c..12262e7 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,5 +1,28 @@
 2012-04-11  Andrey Kosyakov  <caseq@chromium.org>
 
+        Web Inspector: zoom timeline frame on dblclick on the frame bar
+        https://bugs.webkit.org/show_bug.cgi?id=83741
+
+        Reviewed by Pavel Feldman.
+
+       - put timeline frame bars into a container, so we can have one listener;
+       - upon dblclick, find the frame, get its window coordinates and set overview selection window accordingly.
+
+        * inspector/front-end/TimelineOverviewPane.js:
+        (WebInspector.TimelineOverviewPane.prototype.zoomToFrame): Get frame coordinates, set overview window.
+        (WebInspector.TimelineVerticalOverview.prototype.update): Maintain framesPerBar as a member for reuse in getFramePosition()
+        (WebInspector.TimelineVerticalOverview.prototype.framePosition): Map frame to screen positions.
+        (WebInspector.TimelineVerticalOverview.prototype._renderBars): Factored out barNumberToScreenPosition()
+        (WebInspector.TimelineVerticalOverview.prototype._barNumberToScreenPosition):
+        (WebInspector.TimelineVerticalOverview.prototype.getWindowTimes): Drive-by style fix.
+        * inspector/front-end/TimelinePanel.js:
+        (WebInspector.TimelinePanel.prototype._updateFrames): Put frames into a containing div.
+        (WebInspector.TimelinePanel.prototype._onFrameDoubleClicked): Zoom to frame upon double click.
+        * inspector/front-end/timelinePanel.css:
+        (.timeline-frame-container):
+
+2012-04-11  Andrey Kosyakov  <caseq@chromium.org>
+
         Web Inspector: show wall time frame duration on the vertical overview
         https://bugs.webkit.org/show_bug.cgi?id=83718
 

diff --git a/Source/WebCore/inspector/front-end/TimelineOverviewPane.js b/Source/WebCore/inspector/front-end/TimelineOverviewPane.js
index f5368d5..3ce1072 100644 (file)
--- a/Source/WebCore/inspector/front-end/TimelineOverviewPane.js
+++ b/Source/WebCore/inspector/front-end/TimelineOverviewPane.js
@@ -292,6 +292,18 @@ WebInspector.TimelineOverviewPane.prototype = {
         this._scheduleRefresh();
     },
 
+    /**
+     * @param {WebInspector.TimelineFrame} frame
+     */
+    zoomToFrame: function(frame)
+    {
+        var window = this._verticalOverview.framePosition(frame);
+        if (!window)
+            return;
+
+        this._overviewWindow._setWindowPosition(window.start, window.end);
+    },
+
     _onRecordAdded: function(event)
     {
         var record = event.data;
@@ -923,9 +935,9 @@ WebInspector.TimelineVerticalOverview.prototype = {
     update: function()
     {
         const minBarWidth = 4;
-        var framesPerBar = Math.max(1, this._frames.length * minBarWidth / this.element.clientWidth);
+        this._framesPerBar = Math.max(1, this._frames.length * minBarWidth / this.element.clientWidth);
         this._barTimes = [];
-        var visibleFrames = this._aggregateFrames(framesPerBar);
+        var visibleFrames = this._aggregateFrames(this._framesPerBar);
 
         const paddingTop = 4;
         var scale = (this.element.clientHeight - paddingTop) / this._normalBarLength;
@@ -941,6 +953,20 @@ WebInspector.TimelineVerticalOverview.prototype = {
         this._frames.push(frame);
     },
 
+    framePosition: function(frame)
+    {
+        var frameNumber = this._frames.indexOf(frame);
+        if (frameNumber < 0)
+            return;
+        var barNumber = Math.floor(frameNumber / this._framesPerBar);
+        var firstBar = this._framesPerBar > 1 ? barNumber : Math.max(barNumber - 1, 0);
+        var lastBar = this._framesPerBar > 1 ? barNumber : Math.min(barNumber + 1, this._barTimes.length - 1);
+        return {
+            start: Math.ceil(this._barNumberToScreenPosition(firstBar) - this._actualPadding / 2),
+            end: Math.floor(this._barNumberToScreenPosition(lastBar + 1) - this._actualPadding / 2)
+        }
+    },
+
     /**
      * @param {number} framesPerBar
      */
@@ -983,12 +1009,16 @@ WebInspector.TimelineVerticalOverview.prototype = {
         this._actualPadding = Math.min(Math.floor(this._actualOuterBarWidth / 3), maxPadding);
 
         for (var i = 0; i < frames.length; ++i) {
-            var x = this._outerPadding + this._actualOuterBarWidth * i;
             var width = this._actualOuterBarWidth - this._actualPadding;
-            this._renderBar(x, width, frames[i], scale);
+            this._renderBar(this._barNumberToScreenPosition(i), width, frames[i], scale);
         }
     },
 
+    _barNumberToScreenPosition: function(n)
+    {
+        return this._outerPadding + this._actualOuterBarWidth * n;
+    },
+
     _renderBar: function(left, width, frame, scale)
     {
         var categories = Object.keys(frame.timeByCategory);
@@ -1033,7 +1063,7 @@ WebInspector.TimelineVerticalOverview.prototype = {
 
     getWindowTimes: function(windowLeft, windowRight)
     {
-        var windowSpan = this.element.clientWidth
+        var windowSpan = this.element.clientWidth;
         var leftOffset = windowLeft * windowSpan - this._outerPadding + this._actualPadding;
         var rightOffset = windowRight * windowSpan - this._outerPadding;
         var bars = this.element.children;

diff --git a/Source/WebCore/inspector/front-end/TimelinePanel.js b/Source/WebCore/inspector/front-end/TimelinePanel.js
index 9b17282..eb2c421 100644 (file)
--- a/Source/WebCore/inspector/front-end/TimelinePanel.js
+++ b/Source/WebCore/inspector/front-end/TimelinePanel.js
@@ -354,7 +354,16 @@ WebInspector.TimelinePanel.prototype = {
     {
         var frames = this._presentationModel.frames();
         var clientWidth = this._graphRowsElement.offsetWidth;
-        var dividers = [];
+        if (this._frameContainer)
+            this._frameContainer.removeChildren();
+        else {
+            this._frameContainer = document.createElement("div");
+            this._frameContainer.addStyleClass("fill");
+            this._frameContainer.addStyleClass("timeline-frame-container");
+            this._frameContainer.addEventListener("dblclick", this._onFrameDoubleClicked.bind(this), false);
+        }
+
+        var dividers = [ this._frameContainer ];
 
         for (var i = 0; i < frames.length; ++i) {
             var frame = frames[i];
@@ -375,7 +384,7 @@ WebInspector.TimelinePanel.prototype = {
             if (width > minWidthForFrameInfo)
                 frameStrip.textContent = Number.secondsToString(frame.endTime - frame.startTime, true);
 
-            dividers.push(frameStrip);
+            this._frameContainer.appendChild(frameStrip);
 
             if (actualStart > 0) {
                 var frameMarker = WebInspector.TimelinePresentationModel.createEventDivider(WebInspector.TimelineModel.RecordType.BeginFrame);
@@ -386,6 +395,14 @@ WebInspector.TimelinePanel.prototype = {
         this._timelineGrid.addEventDividers(dividers);
     },
 
+    _onFrameDoubleClicked: function(event)
+    {
+        var frameBar = event.target.enclosingNodeOrSelfWithClass("timeline-frame-strip");
+        if (!frameBar)
+            return;
+        this._overviewPane.zoomToFrame(frameBar._frame);
+    },
+
     _timelinesOverviewModeChanged: function(event)
     {
         var shouldShowMemory = event.data === WebInspector.TimelineOverviewPane.Mode.Memory;

diff --git a/Source/WebCore/inspector/front-end/timelinePanel.css b/Source/WebCore/inspector/front-end/timelinePanel.css
index 949a810..7821929 100644 (file)
--- a/Source/WebCore/inspector/front-end/timelinePanel.css
+++ b/Source/WebCore/inspector/front-end/timelinePanel.css
@@ -667,6 +667,10 @@
     -webkit-mask-position: -192px -48px;
 }
 
+.timeline-frame-container {
+    height: 19px;
+}
+
 .timeline-frame-strip {
     position: absolute;
     height: 19px;