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

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;

content/treestyletab/windowHelper.js

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

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)

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',

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;
+}
+