Web Inspector: zoom on vertical mousewheel in Timeline overview

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

Reviewed by Pavel Feldman.

- added support for zooming around mouse cursor upon mousewheel event;
- handle mousewheel event by _onMouseWheel, not scrollWindow, so we only zoom on events internal to overview.

* inspector/front-end/TimelineOverviewPane.js:
(WebInspector.TimelineOverviewWindow):
(WebInspector.TimelineOverviewWindow.prototype._endWindowSelectorDragging):
(WebInspector.TimelineOverviewWindow.prototype._onMouseWheel):
(WebInspector.TimelineOverviewWindow.prototype._zoom):

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

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index 7f68d6c..b1d5f05 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,19 @@
+2012-04-06  Andrey Kosyakov  <caseq@chromium.org>
+
+        Web Inspector: zoom on vertical mousewheel in Timeline overview
+        https://bugs.webkit.org/show_bug.cgi?id=83379
+
+        Reviewed by Pavel Feldman.
+
+        - added support for zooming around mouse cursor upon mousewheel event;
+        - handle mousewheel event by _onMouseWheel, not scrollWindow, so we only zoom on events internal to overview.
+
+        * inspector/front-end/TimelineOverviewPane.js:
+        (WebInspector.TimelineOverviewWindow):
+        (WebInspector.TimelineOverviewWindow.prototype._endWindowSelectorDragging):
+        (WebInspector.TimelineOverviewWindow.prototype._onMouseWheel):
+        (WebInspector.TimelineOverviewWindow.prototype._zoom):
+
 2012-04-09  Bill Budge  <bbudge@chromium.org>
 
         Cross-origin preflight request should not include credentials.

diff --git a/Source/WebCore/inspector/front-end/TimelineOverviewPane.js b/Source/WebCore/inspector/front-end/TimelineOverviewPane.js
index 8c6ab44..972e51a 100644 (file)
--- a/Source/WebCore/inspector/front-end/TimelineOverviewPane.js
+++ b/Source/WebCore/inspector/front-end/TimelineOverviewPane.js
@@ -397,7 +397,7 @@ WebInspector.TimelineOverviewWindow = function(parentElement)
     this.windowRight = 1.0;
 
     this._parentElement.addEventListener("mousedown", this._dragWindow.bind(this), true);
-    this._parentElement.addEventListener("mousewheel", this.scrollWindow.bind(this), true);
+    this._parentElement.addEventListener("mousewheel", this._onMouseWheel.bind(this), true);
     this._parentElement.addEventListener("dblclick", this._resizeWindowMaximum.bind(this), true);
 
     this._overviewWindowElement = document.createElement("div");
@@ -487,7 +487,7 @@ WebInspector.TimelineOverviewWindow.prototype = {
         WebInspector.elementDragEnd(event);
         var window = this._overviewWindowSelector._close(event.pageX - this._parentElement.offsetLeft);
         delete this._overviewWindowSelector;
-        if (window.end === window.start) { // Click, not drag.\
+        if (window.end === window.start) { // Click, not drag.
             var middle = window.end;
             window.start = Math.max(0, middle - WebInspector.TimelineOverviewPane.MinSelectableSize / 2);
             window.end = Math.min(this._parentElement.clientWidth, middle + WebInspector.TimelineOverviewPane.MinSelectableSize / 2);
@@ -570,6 +570,34 @@ WebInspector.TimelineOverviewWindow.prototype = {
         WebInspector.elementDragEnd(event);
     },
 
+    _onMouseWheel: function(event)
+    {
+        const zoomFactor = 1.1;
+        const mouseWheelZoomSpeed = 1 / 120;
+
+        if (typeof event.wheelDeltaY === "number" && event.wheelDeltaY !== 0) {
+            var referencePoint = event.pageX - this._parentElement.offsetLeft;
+            this._zoom(Math.pow(zoomFactor, -event.wheelDeltaY * mouseWheelZoomSpeed), referencePoint);
+        }
+        this.scrollWindow(event);
+    },
+
+    /**
+     * @param {number} factor
+     * @param {number} referencePoint
+     */
+    _zoom: function(factor, referencePoint)
+    {
+        var left = this._leftResizeElement.offsetLeft + WebInspector.TimelineOverviewPane.ResizerOffset;
+        var right = this._rightResizeElement.offsetLeft + WebInspector.TimelineOverviewPane.ResizerOffset;
+
+        if (factor < 1 && factor * (right - left) < WebInspector.TimelineOverviewPane.MinSelectableSize)
+            return;
+        left = Math.max(0, referencePoint + (left - referencePoint) * factor);
+        right = Math.min(this._parentElement.clientWidth, referencePoint + (right - referencePoint) * factor);
+        this._setWindowPosition(left, right);
+    },
+
     scrollWindow: function(event)
     {
         if (typeof event.wheelDeltaX === "number" && event.wheelDeltaX !== 0) {