Changeset 116930 in webkit

Timestamp:

May 14, 2012 2:46:33 AM (12 years ago)

Author:

pfeldman@chromium.org

Message:

Web Inspector: implement tabs reordering via drag'n'drop.
​https://bugs.webkit.org/show_bug.cgi?id=86294

Reviewed by Yury Semikhatsky.

• inspector/front-end/TabbedPane.js:

(WebInspector.TabbedPaneTab.prototype._createTabElement):
(WebInspector.TabbedPaneTab.prototype._tabClicked):
(WebInspector.TabbedPaneTab.prototype._tabMouseDown):
(WebInspector.TabbedPaneTab.prototype._tabContextMenu):
(WebInspector.TabbedPaneTab.prototype._tabMouseMove):
(WebInspector.TabbedPaneTab.prototype._tabDragging):
(WebInspector.TabbedPaneTab.prototype._endTabDragging):

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/front-end/SettingsScreen.js (modified) (1 diff)
• inspector/front-end/TabbedPane.js (modified) (3 diffs)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2012-05-12  Pavel Feldman  <pfeldman@chromium.org>
+
+        Web Inspector: implement tabs reordering via drag'n'drop.
+        https://bugs.webkit.org/show_bug.cgi?id=86294
+
+        Reviewed by Yury Semikhatsky.
+
+        * inspector/front-end/TabbedPane.js:
+        (WebInspector.TabbedPaneTab.prototype._createTabElement):
+        (WebInspector.TabbedPaneTab.prototype._tabClicked):
+        (WebInspector.TabbedPaneTab.prototype._tabMouseDown):
+        (WebInspector.TabbedPaneTab.prototype._tabContextMenu):
+        (WebInspector.TabbedPaneTab.prototype._tabMouseMove):
+        (WebInspector.TabbedPaneTab.prototype._tabDragging):
+        (WebInspector.TabbedPaneTab.prototype._endTabDragging):
+
 2012-05-14  MORITA Hajime  <morrita@google.com>
 

trunk/Source/WebCore/inspector/front-end/SettingsScreen.js

@@ -614 +614 @@
 {
     this._statusBarButton = new WebInspector.StatusBarButton(WebInspector.UIString("Settings"), "settings-status-bar-item");;
-    this._statusBarButton.addEventListener("click", this._buttonClicked.bind(this), false);
+    this._statusBarButton.addEventListener("click", this._buttonClicked, this);
 
     /** @type {?WebInspector.SettingsScreen} */

trunk/Source/WebCore/inspector/front-end/TabbedPane.js

@@ -629 +629 @@
             this._tabElement = tabElement;
             tabElement.addEventListener("click", this._tabClicked.bind(this), false);
-            if (this._closeable)
+            if (this._closeable) {
                 tabElement.addEventListener("contextmenu", this._tabContextMenu.bind(this), false);
+                tabElement.addEventListener("mousedown", this._tabMouseDown.bind(this), false);
+                tabElement.addEventListener("mousemove", this._tabMouseMove.bind(this), false);
+            }
         }
         
@@ -651 +654 @@
         if (this._closeable && (event.button === 1 || event.target.hasStyleClass("tabbed-pane-header-tab-close-button")))
             this._tabbedPane.closeTab(this.id, true);
-        else
-            this._tabbedPane.selectTab(this.id, true);
-        this._tabbedPane.focus();
+    },
+
+    /**
+     * @param {Event} event
+     */
+    _tabMouseDown: function(event)
+    {
+        if (event.target.hasStyleClass("tabbed-pane-header-tab-close-button") || event.button === 1)
+            return;
+        this._tabbedPane.selectTab(this.id, true);
     },
 
@@ -678 +688 @@
         contextMenu.appendItem(WebInspector.UIString("Close All"), closeAll.bind(this));
         contextMenu.show(event);
+    },
+
+    _tabMouseMove: function(event)
+    {
+        if (event.which !== 1)
+            return;
+        this._tabbedPane.selectTab(this.id, true);
+        WebInspector.elementDragStart(this._tabElement, this._tabDragging.bind(this), this._endTabDragging.bind(this), event, "pointer");
+        this._dragStartX = event.pageX;
+    },
+
+    /**
+     * @param {Event} event
+     */
+    _tabDragging: function(event)
+    {
+        var tabElements = this._tabbedPane._tabsElement.childNodes;
+        for (var i = 0; i < tabElements.length; ++i) {
+            var tabElement = tabElements[i];
+            if (tabElement === this._tabElement)
+                continue;
+            var offset = tabElement.totalOffsetLeft();
+            if (event.offsetX < offset || event.offsetX > offset + tabElement.clientWidth)
+                continue;
+  
+            if (tabElement.offsetLeft > this._tabElement.offsetLeft)
+                tabElement = tabElement.nextSibling;
+            var oldOffsetLeft = this._tabElement.offsetLeft;
+            this._tabElement.parentElement.insertBefore(this._tabElement, tabElement);
+            this._dragStartX += this._tabElement.offsetLeft - oldOffsetLeft;
+        }
+
+        if (!this._tabElement.previousSibling && event.pageX - this._dragStartX < 0) {
+            this._tabElement.style.setProperty("left", "0px");
+            return;
+        }
+        if (!this._tabElement.nextSibling && event.pageX - this._dragStartX > 0) {
+            this._tabElement.style.setProperty("left", "0px");
+            return;
+        }
+
+        this._tabElement.style.setProperty("position", "relative");
+        this._tabElement.style.setProperty("left", (event.pageX - this._dragStartX) + "px");
+    },
+
+    /**
+     * @param {Event} event
+     */
+    _endTabDragging: function(event)
+    {
+        this._tabElement.style.removeProperty("position");
+        this._tabElement.style.removeProperty("left");
+        WebInspector.elementDragEnd(event);
     }
 }