From c0ab92a24af75cc859083a6aa06736780587123b Mon Sep 17 00:00:00 2001 From: Piro / YUKI Hiroshi Date: Thu, 30 Aug 2012 05:28:03 +0900 Subject: [PATCH] Partially support live preview of tab dragging, introduced by https://bugzilla.mozilla.org/show_bug.cgi?id=783282 (Not supported yet: dragging on a tab to attach) --- content/treestyletab/treestyletab.css | 59 +++++++++++++++++++++++++++ content/treestyletab/windowHelper.js | 34 ++++++++++++--- modules/browser.js | 6 +++ modules/tabbarDNDObserver.js | 15 +++++-- 4 files changed, 106 insertions(+), 8 deletions(-) diff --git a/content/treestyletab/treestyletab.css b/content/treestyletab/treestyletab.css index 65fbbcb1..0432bab7 100644 --- a/content/treestyletab/treestyletab.css +++ b/content/treestyletab/treestyletab.css @@ -389,6 +389,27 @@ toolbar.treestyletab-tabbar-toolbar-ready:not([nowindowdrag="true"]), min-width 0.15s ease-out /* for Firefox itself */, max-width 0.15s ease-out /* for Firefox itself */; } +.tabbrowser-tabs[movingtab][treestyletab-animation-enabled="true"][treestyletab-mode="vertical"] + .tabbrowser-tab:not([treestyletab-collapsed-done="true"]) { + -moz-transition: margin-left 0.2s ease-out, + margin-right 0.2s ease-out, + margin-top 0.15s ease-out, + opacity 0.15s ease-out, + min-height 0.15s ease-out, + max-height 0.15s ease-out, + min-width 0.15s ease-out /* for Firefox itself */, + max-width 0.15s ease-out /* for Firefox itself */, + transform 0.2s ease-out /* for Firefox itself */; + transition: margin-left 0.2s ease-out, + margin-right 0.2s ease-out, + margin-top 0.15s ease-out, + opacity 0.15s ease-out, + min-height 0.15s ease-out, + max-height 0.15s ease-out, + min-width 0.15s ease-out /* for Firefox itself */, + max-width 0.15s ease-out /* for Firefox itself */, + transform 0.2s ease-out /* for Firefox itself */; +} .tabbrowser-tabs[treestyletab-animation-enabled="true"]:not([treestyletab-mode="vertical"]):not([treestyletab-tab-inverted="true"]) .tabbrowser-tab:not([treestyletab-collapsed-done="true"]) { @@ -407,6 +428,25 @@ toolbar.treestyletab-tabbar-toolbar-ready:not([nowindowdrag="true"]), min-width 0.15s ease-out /* for Firefox itself */, max-width 0.15s ease-out /* for Firefox itself */; } +.tabbrowser-tabs[movingtab][treestyletab-animation-enabled="true"]:not([treestyletab-mode="vertical"]):not([treestyletab-tab-inverted="true"]) + .tabbrowser-tab:not([treestyletab-collapsed-done="true"]) { + -moz-transition: margin-left 0.15s ease-out, + opacity 0.15s ease-out, + margin-top 0.2s ease-out, + min-height 0.15s ease-out, + max-height 0.15s ease-out, + min-width 0.15s ease-out /* for Firefox itself */, + max-width 0.15s ease-out /* for Firefox itself */, + transform 0.2s ease-out /* for Firefox itself */; + transition: margin-left 0.15s ease-out, + opacity 0.15s ease-out, + margin-top 0.2s ease-out, + min-height 0.15s ease-out, + max-height 0.15s ease-out, + min-width 0.15s ease-out /* for Firefox itself */, + max-width 0.15s ease-out /* for Firefox itself */, + transform 0.2s ease-out /* for Firefox itself */; +} .tabbrowser-tabs[treestyletab-animation-enabled="true"]:not([treestyletab-mode="vertical"])[treestyletab-tab-inverted="true"] .tabbrowser-tab:not([treestyletab-collapsed-done="true"]) { @@ -425,6 +465,25 @@ toolbar.treestyletab-tabbar-toolbar-ready:not([nowindowdrag="true"]), min-width 0.15s ease-out /* for Firefox itself */, max-width 0.15s ease-out /* for Firefox itself */; } +.tabbrowser-tabs[movingtab][treestyletab-animation-enabled="true"]:not([treestyletab-mode="vertical"])[treestyletab-tab-inverted="true"] + .tabbrowser-tab:not([treestyletab-collapsed-done="true"]) { + -moz-transition: margin-left 0.15s ease-out, + opacity 0.15s ease-out, + margin-bottom 0.2s ease-out, + min-height 0.15s ease-out, + max-height 0.15s ease-out, + min-width 0.15s ease-out /* for Firefox itself */, + max-width 0.15s ease-out /* for Firefox itself */, + transform 0.2s ease-out /* for Firefox itself */; + transition: margin-left 0.15s ease-out, + opacity 0.15s ease-out, + margin-bottom 0.2s ease-out, + min-height 0.15s ease-out, + max-height 0.15s ease-out, + min-width 0.15s ease-out /* for Firefox itself */, + max-width 0.15s ease-out /* for Firefox itself */, + transform 0.2s ease-out /* for Firefox itself */; +} diff --git a/content/treestyletab/windowHelper.js b/content/treestyletab/windowHelper.js index 1f19d4f5..e6281358 100644 --- a/content/treestyletab/windowHelper.js +++ b/content/treestyletab/windowHelper.js @@ -96,22 +96,46 @@ var TreeStyleTabWindowHelper = { eval('aObserver._setEffectAllowedForDataTransfer = '+ aObserver._setEffectAllowedForDataTransfer.toSource().replace( '{', - '{ var TSTTabBrowser = this instanceof Ci.nsIDOMElement ? (this.tabbrowser || this) : gBrowser ;' + '{ var TSTTabBrowser = this instanceof Ci.nsIDOMElement ? (this.tabbrowser || this) : gBrowser ; var TST = TSTTabBrowser.treeStyleTab;' ).replace( - /\.screenX/g, '[TSTTabBrowser.treeStyleTab.screenPositionProp]' + /\.screenX/g, '[TST.screenPositionProp]' ).replace( - /\.width/g, '[TSTTabBrowser.treeStyleTab.sizeProp]' + /\.width/g, '[TST.sizeProp]' ).replace( /(return (?:true|dt.effectAllowed = "copyMove");)/, ).replace( 'sourceNode.parentNode == this &&', - '$& TSTTabBrowser.treeStyleTab.getTabFromEvent(event) == sourceNode &&' + '$& TST.getTabFromEvent(event) == sourceNode &&' + ) + ); + } + + if ('_animateTabMove' in aObserver) { // Firefox 17 and later + eval('aObserver._animateTabMove = '+ + aObserver._animateTabMove.toSource().replace( + '{', + '{ var TSTTabBrowser = this instanceof Ci.nsIDOMElement ? (this.tabbrowser || this) : gBrowser ; var TST = TSTTabBrowser.treeStyleTab;' + ).replace( + /\.screenX/g, '[TST.screenPositionProp]' + ).replace( + // the object doesn't have "screenY", so we have to calculate it from its offset. + /draggedTab\._dragData\[TST\.screenPositionProp\]/g, + '(draggedTab._dragData[TST.offsetProp] + window[TST.screenPositionProp])' + ).replace( + /\.width/g, '[TST.sizeProp]' + ).replace( + /(['"])translateX\(/g, '$1$1 + TST.translateFunction + $1(' + ).replace( + /tabWidth \/ 2/, 'tabWidth \/ 3' + ).replace( + /(if \(screenX > tabCenter)(\))/, + '$1 + (tabWidth / 3)$2' ) ); } diff --git a/modules/browser.js b/modules/browser.js index b7cc3573..6bb31080 100644 --- a/modules/browser.js +++ b/modules/browser.js @@ -88,6 +88,8 @@ TreeStyleTabBrowser.prototype = { collapseTarget : 'top', collapseCSSProp : 'margin-top', screenPositionProp : 'screenY', + offsetProp : 'offsetY', + translateFunction : 'translateY', sizeProp : 'height', invertedScreenPositionProp : 'screenX', invertedSizeProp : 'width', @@ -1231,6 +1233,8 @@ TreeStyleTabBrowser.prototype = { if (pos & this.kTABBAR_VERTICAL) { this.collapseTarget = 'top'; this.screenPositionProp = 'screenY'; + this.offsetProp = 'offsetY'; + this.translateFunction = 'translateY'; this.sizeProp = 'height'; this.invertedScreenPositionProp = 'screenX'; this.invertedSizeProp = 'width'; @@ -1319,6 +1323,8 @@ TreeStyleTabBrowser.prototype = { else { this.collapseTarget = 'left'; this.screenPositionProp = 'screenX'; + this.offsetProp = 'offsetX'; + this.translateFunction = 'translateX'; this.sizeProp = 'width'; this.invertedScreenPositionProp = 'screenY'; this.invertedSizeProp = 'height'; diff --git a/modules/tabbarDNDObserver.js b/modules/tabbarDNDObserver.js index 21e66b77..4c7d57ac 100644 --- a/modules/tabbarDNDObserver.js +++ b/modules/tabbarDNDObserver.js @@ -584,6 +584,12 @@ catch(e) { { xpathResult.snapshotItem(i).removeAttribute(sv.kDROP_POSITION); } + + // clear drop position preview on Firefox 17 and later + this.tabbrowser.visibleTabs.forEach(function(aTab) { + aTab.style.transform = ''; + }); + this.browser.mTabContainer.removeAttribute('movingtab') }, isDraggingAllTabs : function TabbarDND_isDraggingAllTabs(aTab, aTabs) @@ -816,6 +822,7 @@ catch(e) { try{ var sv = this.treeStyleTab; var b = this.browser; + var tabbar = b.mTabContainer; var session = sv.currentDragSession; if (sv.isToolbarCustomizing) @@ -857,8 +864,8 @@ try{ !info.canDrop || observer._setEffectAllowedForDataTransfer(aEvent) == 'none' ) { - this.clearDropPosition(); aEvent.dataTransfer.effectAllowed = "none"; + this.clearDropPosition(); return true; } @@ -870,13 +877,15 @@ try{ } let dropPos = info.position == sv.kDROP_BEFORE ? 'before' : - - info.position == sv.kDROP_AFTER ? 'after' : 'self'; if (indicatorTab.getAttribute(sv.kDROP_POSITION) != dropPos) { this.clearDropPosition(); indicatorTab.setAttribute(sv.kDROP_POSITION, dropPos); + if ('_animateTabMove' in tabbar) { // Firefox 17 and later + tabbar.setAttribute('movingtab', 'true'); + tabbar._animateTabMove(aEvent); + } }