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

When new tab is opened in the background, it should be notified by an animation effect.

Browse Source
This commit is contained in:
Piro / SHIMODA Hiroshi 2012-01-29 19:54:02 +09:00
parent 8a3c17d0be
commit ed46793caa
5 changed files with 70 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
content/treestyletab/treestyletab.css
View File

@ -203,7 +203,7 @@ tabs.tabbrowser-tabs[treestyletab-tabbar-position="left"][treestyletab-invert-sc
/* hide horizontal tab bar UI for vertical tab bar */
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-arrowscrollbox > .scrollbutton-up,
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-arrowscrollbox > .scrollbutton-down,
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-arrowscrollbox > .scrollbutton-down:not([treestyletab-notifybgtab-phase]),
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabs-closebutton-box,
.tabbrowser-tabs[treestyletab-mode="vertical"] .tab-drop-indicator-bar {
visibility: collapse !important;

3
content/treestyletab/windowHelper.js
View File

@ -603,6 +603,9 @@ var TreeStyleTabWindowHelper = {
).replace(
'!selected ||',
'$& treeStyleTab.scrollToNewTabMode == 1 && '
).replace(
/(\}\)?)$/,
'treeStyleTab.notifyBackgroundTab(); $1'
)
);
}

35
modules/browser.js
View File

@ -267,7 +267,7 @@ TreeStyleTabBrowser.prototype = {
return (box.getAttribute('orient') || this.window.getComputedStyle(box, '').getPropertyValue('-moz-box-orient')) == 'vertical';
},
isFloating : true, // for backward compatibility (but this should be removed)
isFloating : true, // for backward compatibility (but this should be removed)
get ownerToolbar()
{
@ -335,7 +335,7 @@ TreeStyleTabBrowser.prototype = {
return null;
return this.getTabFromCoordinate(aEvent[this.screenPositionProp]);
},
getTabFromCoordinate : function TSTBrowser_getTabFromCoordinate(aCoordinate)
getTabFromCoordinate : function TSTBrowser_getTabFromCoordinate(aCoordinate)
{
var tab = null;
this.getTabsArray(this.mTabBrowser).some(function(aTab) {
@ -3394,7 +3394,7 @@ TreeStyleTabBrowser.prototype = {
return closeSetId;
},
_fixMissingAttributesFromSessionData : function TSTBrowser_fixMissingAttributesFromSessionData(aTab)
_fixMissingAttributesFromSessionData : function TSTBrowser_fixMissingAttributesFromSessionData(aTab)
{
/**
* By some reasons (ex. persistTabAttribute()), actual state of
@ -5754,6 +5754,35 @@ TreeStyleTabBrowser.prototype = {
}
},
notifyBackgroundTab : function TSTBrowser_notifyBackgroundTab()
{
var animateElement = this.mTabBrowser.mTabContainer._animateElement;
var attrName = this.kBG_NOTIFY_PHASE;
if (!animateElement)
return;
if (this.lastNotifyBackgroundTabAnimation)
this.lastNotifyBackgroundTabAnimation.cancel();
if (!animateElement.hasAttribute(attrName))
animateElement.setAttribute(attrName, 'ready');
var self = this;
this.lastNotifyBackgroundTabAnimation = this.Deferred
.next(function() {
animateElement.setAttribute(attrName, 'notifying');
})
.wait(0.15)
.next(function() {
animateElement.setAttribute(attrName, 'finish');
})
.wait(1)
.next(function() {
animateElement.removeAttribute(attrName);
self.lastNotifyBackgroundTabAnimation = null;
});
},
restoreTree : function TSTBrowser_restoreTree()
{
if (!this.needRestoreTree || this.useTMPSessionAPI)

1
modules/utils.js
View File

@ -127,6 +127,7 @@ var TreeStyleTabUtils = {
kINVERT_SCROLLBAR : 'treestyletab-invert-scrollbar',
kNARROW_SCROLLBAR : 'treestyletab-narrow-scrollbar',
kFAVICONIZED : 'treestyletab-faviconized',
kBG_NOTIFY_PHASE : 'treestyletab-notifybgtab-phase',
kTAB_INVERTED : 'treestyletab-tab-inverted',
kTAB_CONTENTS_INVERTED : 'treestyletab-tab-contents-inverted',

33
skin/classic/treestyletab/ui.css
View File

@ -366,3 +366,36 @@ tabbrowser[treestyletab-tabbar-position="bottom"]
.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]):not(.treestyletab-faviconized):hover {
background-image: none;
}
/* notification of newly opened tabs in background */
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-arrowscrollbox
> .scrollbutton-down[treestyletab-notifybgtab-phase] {
background: -moz-linear-gradient(-90deg, rgba(255,255,255,0), Highlight);
border: 0 none;
height: 2em;
margin-top: -2em;
visibility: visible;
opacity: 0;
pointer-events: none;
-moz-box-shadow: none;
box-shadow: none;
-moz-transition: 1s opacity ease-out;
transition: 1s opacity ease-out;
-moz-user-focus: ignore;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-arrowscrollbox
> .scrollbutton-down[treestyletab-notifybgtab-phase="notifying"] {
opacity: 1;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-arrowscrollbox
> .scrollbutton-down > * {
display: none;
}