Web Inspector: Allow user to change dock side by dragging toolbar
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 4 Feb 2013 14:43:25 +0000 (14:43 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 4 Feb 2013 14:43:25 +0000 (14:43 +0000)
https://bugs.webkit.org/show_bug.cgi?id=108073

Dragging toolbar to the right/bottom will change the dock side accordingly
instead of changing the inspector window height (if dock to right is available).

Patch by Dmitry Gozman <dgozman@chromium.org> on 2013-02-04
Reviewed by Pavel Feldman.

No new tests, because of pure inspector UI change.

* inspector/front-end/DockController.js:
(WebInspector.DockController.prototype.dockSide):
* inspector/front-end/Toolbar.js:
(WebInspector.Toolbar):
(WebInspector.Toolbar.prototype._isDockedToBottom):
(WebInspector.Toolbar.prototype._isUndocked):
(WebInspector.Toolbar.prototype._toolbarDragStart):
(WebInspector.Toolbar.prototype._toolbarDragEnd):
(WebInspector.Toolbar.prototype._toolbarDrag):
(WebInspector.Toolbar.prototype._toolbarDragMoveWindow):
(WebInspector.Toolbar.prototype._toolbarDragChangeDocking):
(WebInspector.Toolbar.prototype._toolbarDragChangeHeight):
* inspector/front-end/UIUtils.js:
(WebInspector._elementDragStart):
(WebInspector._elementDragMove):
(WebInspector._cancelDragEvents):
(WebInspector._elementDragEnd):

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

Source/WebCore/ChangeLog
Source/WebCore/inspector/front-end/DockController.js
Source/WebCore/inspector/front-end/Toolbar.js
Source/WebCore/inspector/front-end/UIUtils.js

index 2cf8ce236df77f7176a64aea0ba3269f5b34f816..1b746ce8ff9643829e3fba0a4925475cf9ca5879 100644 (file)
@@ -1,3 +1,33 @@
+2013-02-04  Dmitry Gozman  <dgozman@chromium.org>
+
+        Web Inspector: Allow user to change dock side by dragging toolbar
+        https://bugs.webkit.org/show_bug.cgi?id=108073
+
+        Dragging toolbar to the right/bottom will change the dock side accordingly
+        instead of changing the inspector window height (if dock to right is available).
+
+        Reviewed by Pavel Feldman.
+
+        No new tests, because of pure inspector UI change.
+
+        * inspector/front-end/DockController.js:
+        (WebInspector.DockController.prototype.dockSide):
+        * inspector/front-end/Toolbar.js:
+        (WebInspector.Toolbar):
+        (WebInspector.Toolbar.prototype._isDockedToBottom):
+        (WebInspector.Toolbar.prototype._isUndocked):
+        (WebInspector.Toolbar.prototype._toolbarDragStart):
+        (WebInspector.Toolbar.prototype._toolbarDragEnd):
+        (WebInspector.Toolbar.prototype._toolbarDrag):
+        (WebInspector.Toolbar.prototype._toolbarDragMoveWindow):
+        (WebInspector.Toolbar.prototype._toolbarDragChangeDocking):
+        (WebInspector.Toolbar.prototype._toolbarDragChangeHeight):
+        * inspector/front-end/UIUtils.js:
+        (WebInspector._elementDragStart):
+        (WebInspector._elementDragMove):
+        (WebInspector._cancelDragEvents):
+        (WebInspector._elementDragEnd):
+
 2013-02-04  Andrey Kosyakov  <caseq@chromium.org>
 
         Web Inspector: sync list of console API methods to that used by auto-complete
index 460e5b52915cffd40bb59aa4bde640789941f166..fef32c84025ce1704059810e9f2d8eee9d3b5619 100644 (file)
@@ -59,6 +59,14 @@ WebInspector.DockController.prototype = {
         return this._dockToggleButton.element;
     },
 
+    /**
+     * @return {string}
+     */
+    dockSide: function()
+    {
+        return this._dockSide;
+    },
+
     /**
      * @param {string} dockSide
      */
@@ -78,14 +86,6 @@ WebInspector.DockController.prototype = {
         this._updateUI();
     },
 
-    /**
-     * @return {boolean}
-     */
-    isDockedToBottom: function()
-    {
-        return this._dockSide == WebInspector.DockController.State.DockedToBottom;
-    },
-
     /**
      * @param {boolean} unavailable
      */
index d92ab85ea454e02fab487df2e8ea820c27404bd6..10fee330d217786e1e0c02952c9ec569bd652b2a 100644 (file)
@@ -42,6 +42,8 @@ WebInspector.Toolbar = function()
 
     document.getElementById("close-button-left").addEventListener("click", this._onClose, true);
     document.getElementById("close-button-right").addEventListener("click", this._onClose, true);
+
+    this._isWindowMoveSupported = WebInspector.isMac() && !Preferences.showDockToRight;
 }
 
 WebInspector.Toolbar.prototype = {
@@ -101,7 +103,15 @@ WebInspector.Toolbar.prototype = {
      */
     _isDockedToBottom: function()
     {
-        return !!WebInspector.dockController && WebInspector.dockController.isDockedToBottom();
+        return !!WebInspector.dockController && WebInspector.dockController.dockSide() == WebInspector.DockController.State.DockedToBottom;
+    },
+
+    /**
+     * @return {boolean}
+     */
+    _isUndocked: function()
+    {
+        return !!WebInspector.dockController && WebInspector.dockController.dockSide() == WebInspector.DockController.State.Undocked;
     },
 
     /**
@@ -109,7 +119,7 @@ WebInspector.Toolbar.prototype = {
      */
     _toolbarDragStart: function(event)
     {
-        if ((!this._isDockedToBottom() && WebInspector.platformFlavor() !== WebInspector.PlatformFlavor.MacLeopard && WebInspector.platformFlavor() !== WebInspector.PlatformFlavor.MacSnowLeopard) || WebInspector.port() == "qt")
+        if (this._isUndocked() && !this._isWindowMoveSupported)
             return false;
 
         var target = event.target;
@@ -119,9 +129,11 @@ WebInspector.Toolbar.prototype = {
         if (target !== this.element && !target.hasStyleClass("toolbar-item"))
             return false;
 
-        this.element.lastScreenX = event.screenX;
-        this.element.lastScreenY = event.screenY;
+        this._lastScreenX = event.screenX;
+        this._lastScreenY = event.screenY;
         this._lastHeightDuringDrag = window.innerHeight;
+        this._startDistanceToRight = window.innerWidth - event.clientX;
+        this._startDinstanceToBottom = window.innerHeight - event.clientY;
         return true;
     },
 
@@ -130,31 +142,59 @@ WebInspector.Toolbar.prototype = {
         // We may not get the drag event at the end.
         // Apply last changes manually.
         this._toolbarDrag(event);
-        delete this.element.lastScreenX;
-        delete this.element.lastScreenY;
+        delete this._lastScreenX;
+        delete this._lastScreenY;
         delete this._lastHeightDuringDrag;
+        delete this._startDistanceToRight;
+        delete this._startDinstanceToBottom;
     },
 
     _toolbarDrag: function(event)
     {
-        if (this._isDockedToBottom()) {
-            var height = this._lastHeightDuringDrag - (event.screenY - this.element.lastScreenY);
-            this._lastHeightDuringDrag = height;
+        event.preventDefault();
 
-            InspectorFrontendHost.setAttachedWindowHeight(height);
-        } else {
-            var x = event.screenX - this.element.lastScreenX;
-            var y = event.screenY - this.element.lastScreenY;
+        if (this._isUndocked())
+            return this._toolbarDragMoveWindow(event);
 
-            // We cannot call window.moveBy here because it restricts the movement
-            // of the window at the edges.
-            InspectorFrontendHost.moveWindowBy(x, y);
-        }
+        if (Preferences.showDockToRight)
+            return this._toolbarDragChangeDocking(event);
 
-        this.element.lastScreenX = event.screenX;
-        this.element.lastScreenY = event.screenY;
+        return this._toolbarDragChangeHeight(event);
+    },
 
-        event.preventDefault();
+    _toolbarDragMoveWindow: function(event)
+    {
+        var x = event.screenX - this._lastScreenX;
+        var y = event.screenY - this._lastScreenY;
+        this._lastScreenX = event.screenX;
+        this._lastScreenY = event.screenY;
+        InspectorFrontendHost.moveWindowBy(x, y);
+    },
+
+    _toolbarDragChangeDocking: function(event)
+    {
+        if (this._isDockedToBottom()) {
+            var distanceToRight = window.innerWidth - event.clientX;
+            if (distanceToRight < this._startDistanceToRight * 2 / 3) {
+                InspectorFrontendHost.requestSetDockSide(WebInspector.DockController.State.DockedToRight);
+                return true;
+            }
+        } else {
+            var distanceToBottom = window.innerHeight - event.clientY;
+            if (distanceToBottom < this._startDinstanceToBottom * 2 / 3) {
+                InspectorFrontendHost.requestSetDockSide(WebInspector.DockController.State.DockedToBottom);
+                return true;
+            }
+        }
+    },
+
+    _toolbarDragChangeHeight: function(event)
+    {
+        // Change the inspector window height for dock-to-bottom only mode.
+        var height = this._lastHeightDuringDrag - (event.screenY - this._lastScreenY);
+        this._lastHeightDuringDrag = height;
+        this._lastScreenY = event.screenY;
+        InspectorFrontendHost.setAttachedWindowHeight(height);
     },
 
     _onClose: function()
index 0054d442b17387f26d9fa710122e91531db783be..29a8a1a8e7dd32322dd1daa69d96914127ccff9c 100644 (file)
@@ -71,7 +71,7 @@ WebInspector._elementDragStart = function(elementDragStart, elementDrag, element
     WebInspector._elementEndDraggingEventListener = elementDragEnd;
     WebInspector._mouseOutWhileDraggingTargetDocument = targetDocument;
 
-    targetDocument.addEventListener("mousemove", WebInspector._elementDraggingEventListener, true);
+    targetDocument.addEventListener("mousemove", WebInspector._elementDragMove, true);
     targetDocument.addEventListener("mouseup", WebInspector._elementDragEnd, true);
     targetDocument.addEventListener("mouseout", WebInspector._mouseOutWhileDragging, true);
 
@@ -94,10 +94,16 @@ WebInspector._unregisterMouseOutWhileDragging = function()
     delete WebInspector._mouseOutWhileDraggingTargetDocument;
 }
 
-WebInspector._elementDragEnd = function(event)
+WebInspector._elementDragMove = function(event)
+{
+    if (WebInspector._elementDraggingEventListener(event))
+        WebInspector._cancelDragEvents(event);
+}
+
+WebInspector._cancelDragEvents = function(event)
 {
     var targetDocument = event.target.ownerDocument;
-    targetDocument.removeEventListener("mousemove", WebInspector._elementDraggingEventListener, true);
+    targetDocument.removeEventListener("mousemove", WebInspector._elementDragMove, true);
     targetDocument.removeEventListener("mouseup", WebInspector._elementDragEnd, true);
     WebInspector._unregisterMouseOutWhileDragging();
 
@@ -106,11 +112,16 @@ WebInspector._elementDragEnd = function(event)
     if (WebInspector._elementDraggingGlassPane)
         WebInspector._elementDraggingGlassPane.dispose();
 
-    var elementDragEnd = WebInspector._elementEndDraggingEventListener;
-
     delete WebInspector._elementDraggingGlassPane;
     delete WebInspector._elementDraggingEventListener;
     delete WebInspector._elementEndDraggingEventListener;
+}
+
+WebInspector._elementDragEnd = function(event)
+{
+    var elementDragEnd = WebInspector._elementEndDraggingEventListener;
+
+    WebInspector._cancelDragEvents(event);
 
     event.preventDefault();
     if (elementDragEnd)