Modified: trunk/Source/WebCore/ChangeLog (116929 => 116930)
--- trunk/Source/WebCore/ChangeLog 2012-05-14 08:56:40 UTC (rev 116929)
+++ trunk/Source/WebCore/ChangeLog 2012-05-14 09:46:33 UTC (rev 116930)
@@ -1,3 +1,19 @@
+2012-05-12 Pavel Feldman <[email protected]>
+
+ 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 <[email protected]>
Should have Node::inDetach() for assertion purposes.
Modified: trunk/Source/WebCore/inspector/front-end/SettingsScreen.js (116929 => 116930)
--- trunk/Source/WebCore/inspector/front-end/SettingsScreen.js 2012-05-14 08:56:40 UTC (rev 116929)
+++ trunk/Source/WebCore/inspector/front-end/SettingsScreen.js 2012-05-14 09:46:33 UTC (rev 116930)
@@ -613,7 +613,7 @@
WebInspector.SettingsController = function()
{
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} */
this._settingsScreen;
Modified: trunk/Source/WebCore/inspector/front-end/TabbedPane.js (116929 => 116930)
--- trunk/Source/WebCore/inspector/front-end/TabbedPane.js 2012-05-14 08:56:40 UTC (rev 116929)
+++ trunk/Source/WebCore/inspector/front-end/TabbedPane.js 2012-05-14 09:46:33 UTC (rev 116930)
@@ -628,8 +628,11 @@
else {
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);
+ }
}
return tabElement;
@@ -650,11 +653,18 @@
{
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);
+ },
+
_tabContextMenu: function(event)
{
function close()
@@ -677,5 +687,58 @@
contextMenu.appendItem(WebInspector.UIString("Close Others"), closeOthers.bind(this));
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);
}
}
