stonewareslord/treestyletab
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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)

Browse Source
This commit is contained in:
Piro / YUKI Hiroshi 2012-08-30 05:28:03 +09:00
parent 5a08ebf666
commit c0ab92a24a
4 changed files with 106 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
content/treestyletab/treestyletab.css
View File

@ -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 */;
}

34
content/treestyletab/windowHelper.js
View File

@ -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");)/,
<![CDATA[
if (!TSTTabBrowser.treeStyleTab.tabbarDNDObserver.canDropTab(arguments[0])) {
if (!TST.tabbarDNDObserver.canDropTab(arguments[0])) {
return dt.effectAllowed = "none";
}
$1
]]>
).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'
)
);
}

6
modules/browser.js
View File

@ -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';

15
modules/tabbarDNDObserver.js
View File

@ -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);
}
}