diff --git a/content/treestyletab/treestyletab.css b/content/treestyletab/treestyletab.css index 0ef437dd..132e6e8d 100644 --- a/content/treestyletab/treestyletab.css +++ b/content/treestyletab/treestyletab.css @@ -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; diff --git a/content/treestyletab/windowHelper.js b/content/treestyletab/windowHelper.js index 8850d80d..202c76d1 100644 --- a/content/treestyletab/windowHelper.js +++ b/content/treestyletab/windowHelper.js @@ -603,6 +603,9 @@ var TreeStyleTabWindowHelper = { ).replace( '!selected ||', '$& treeStyleTab.scrollToNewTabMode == 1 && ' + ).replace( + /(\}\)?)$/, + 'treeStyleTab.notifyBackgroundTab(); $1' ) ); } diff --git a/modules/browser.js b/modules/browser.js index c521a923..c9cf6dde 100644 --- a/modules/browser.js +++ b/modules/browser.js @@ -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) diff --git a/modules/utils.js b/modules/utils.js index bad11414..b374623e 100644 --- a/modules/utils.js +++ b/modules/utils.js @@ -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', diff --git a/skin/classic/treestyletab/ui.css b/skin/classic/treestyletab/ui.css index cbd5e0a4..abd2781e 100644 --- a/skin/classic/treestyletab/ui.css +++ b/skin/classic/treestyletab/ui.css @@ -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; +} +