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 */, min-width 0.15s ease-out /* for Firefox itself */,
max-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-tabs[treestyletab-animation-enabled="true"]:not([treestyletab-mode="vertical"]):not([treestyletab-tab-inverted="true"])
.tabbrowser-tab:not([treestyletab-collapsed-done="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 */, min-width 0.15s ease-out /* for Firefox itself */,
max-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-tabs[treestyletab-animation-enabled="true"]:not([treestyletab-mode="vertical"])[treestyletab-tab-inverted="true"]
.tabbrowser-tab:not([treestyletab-collapsed-done="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 */, min-width 0.15s ease-out /* for Firefox itself */,
max-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 = '+ eval('aObserver._setEffectAllowedForDataTransfer = '+
aObserver._setEffectAllowedForDataTransfer.toSource().replace( 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( ).replace(
/\.screenX/g, '[TSTTabBrowser.treeStyleTab.screenPositionProp]' /\.screenX/g, '[TST.screenPositionProp]'
).replace( ).replace(
/\.width/g, '[TSTTabBrowser.treeStyleTab.sizeProp]' /\.width/g, '[TST.sizeProp]'
).replace( ).replace(
/(return (?:true|dt.effectAllowed = "copyMove");)/, /(return (?:true|dt.effectAllowed = "copyMove");)/,
<![CDATA[ <![CDATA[
if (!TSTTabBrowser.treeStyleTab.tabbarDNDObserver.canDropTab(arguments[0])) { if (!TST.tabbarDNDObserver.canDropTab(arguments[0])) {
return dt.effectAllowed = "none"; return dt.effectAllowed = "none";
} }
$1 $1
]]> ]]>
).replace( ).replace(
'sourceNode.parentNode == this &&', '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', collapseTarget : 'top',
collapseCSSProp : 'margin-top', collapseCSSProp : 'margin-top',
screenPositionProp : 'screenY', screenPositionProp : 'screenY',
offsetProp : 'offsetY',
translateFunction : 'translateY',
sizeProp : 'height', sizeProp : 'height',
invertedScreenPositionProp : 'screenX', invertedScreenPositionProp : 'screenX',
invertedSizeProp : 'width', invertedSizeProp : 'width',
@ -1231,6 +1233,8 @@ TreeStyleTabBrowser.prototype = {
if (pos & this.kTABBAR_VERTICAL) { if (pos & this.kTABBAR_VERTICAL) {
this.collapseTarget = 'top'; this.collapseTarget = 'top';
this.screenPositionProp = 'screenY'; this.screenPositionProp = 'screenY';
this.offsetProp = 'offsetY';
this.translateFunction = 'translateY';
this.sizeProp = 'height'; this.sizeProp = 'height';
this.invertedScreenPositionProp = 'screenX'; this.invertedScreenPositionProp = 'screenX';
this.invertedSizeProp = 'width'; this.invertedSizeProp = 'width';
@ -1319,6 +1323,8 @@ TreeStyleTabBrowser.prototype = {
else { else {
this.collapseTarget = 'left'; this.collapseTarget = 'left';
this.screenPositionProp = 'screenX'; this.screenPositionProp = 'screenX';
this.offsetProp = 'offsetX';
this.translateFunction = 'translateX';
this.sizeProp = 'width'; this.sizeProp = 'width';
this.invertedScreenPositionProp = 'screenY'; this.invertedScreenPositionProp = 'screenY';
this.invertedSizeProp = 'height'; this.invertedSizeProp = 'height';

15
modules/tabbarDNDObserver.js
View File

@ -584,6 +584,12 @@ catch(e) {
{ {
xpathResult.snapshotItem(i).removeAttribute(sv.kDROP_POSITION); 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) isDraggingAllTabs : function TabbarDND_isDraggingAllTabs(aTab, aTabs)
@ -816,6 +822,7 @@ catch(e) {
try{ try{
var sv = this.treeStyleTab; var sv = this.treeStyleTab;
var b = this.browser; var b = this.browser;
var tabbar = b.mTabContainer;
var session = sv.currentDragSession; var session = sv.currentDragSession;
if (sv.isToolbarCustomizing) if (sv.isToolbarCustomizing)
@ -857,8 +864,8 @@ try{
!info.canDrop || !info.canDrop ||
observer._setEffectAllowedForDataTransfer(aEvent) == 'none' observer._setEffectAllowedForDataTransfer(aEvent) == 'none'
) { ) {
this.clearDropPosition();
aEvent.dataTransfer.effectAllowed = "none"; aEvent.dataTransfer.effectAllowed = "none";
this.clearDropPosition();
return true; return true;
} }
@ -870,13 +877,15 @@ try{
} }
let dropPos = info.position == sv.kDROP_BEFORE ? 'before' : let dropPos = info.position == sv.kDROP_BEFORE ? 'before' :
info.position == sv.kDROP_AFTER ? 'after' : info.position == sv.kDROP_AFTER ? 'after' :
'self'; 'self';
if (indicatorTab.getAttribute(sv.kDROP_POSITION) != dropPos) { if (indicatorTab.getAttribute(sv.kDROP_POSITION) != dropPos) {
this.clearDropPosition(); this.clearDropPosition();
indicatorTab.setAttribute(sv.kDROP_POSITION, dropPos); indicatorTab.setAttribute(sv.kDROP_POSITION, dropPos);
if ('_animateTabMove' in tabbar) { // Firefox 17 and later
tabbar.setAttribute('movingtab', 'true');
tabbar._animateTabMove(aEvent);
}
} }