Render narrow scrollbar more correctly, without any side effect like #1072

content/treestyletab/treestyletab.xul

@@ -12,7 +12,8 @@
 
 <!DOCTYPE overlay SYSTEM "chrome://treestyletab/locale/treestyletab.dtd">
 <overlay id="treestyletab-overlay"
-         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+         xmlns:svg="http://www.w3.org/2000/svg">
 
 <script src="res/tabsDragUtils.js" type="application/javascript"/>
 <script src="treestyletab.js" type="application/javascript"/>
@@ -148,6 +149,18 @@
 		onpopupshown="if ('setConsumeRollupEvent' in this.popupBoxObject) this.popupBoxObject.setConsumeRollupEvent(this.popupBoxObject.ROLLUP_NO_CONSUME || PopupBoxObject.ROLLUP_NO_CONSUME);"
 		onclick="this.hidePopup();"
 		onDOMMouseScroll="this.hidePopup()"/>
+
+	<svg:svg height="0">
+		<!--
+		This is used to clip overflowed boxes. For example, scrollbar
+		elements with "-moz-appearance" sometimes become larger than
+		the parent box. This mask clips such a overflowed contents.
+		-->
+		<svg:clipPath id="treestyletab-box-clip-path"
+			clipPathUnits="objectBoundingBox">
+			<svg:path d="m0,0 V1 H1 V-1 H-1 z"/>
+		</svg:clipPath>
+	</svg:svg>
 </popupset>
 
 </overlay>

defaults/preferences/treestyletab.js

@@ -69,8 +69,6 @@ pref("extensions.treestyletab.tabbar.invertScrollbar", true);
  */
 pref("extensions.treestyletab.tabbar.narrowScrollbar", true);
 pref("extensions.treestyletab.tabbar.narrowScrollbar.width", 10);
-pref("extensions.treestyletab.tabbar.narrowScrollbar.resize.default", true);
-pref("extensions.treestyletab.tabbar.narrowScrollbar.resize.Windows", false);
 
 /**
  * On some environments (ex. GNOME3 on Linux), "narrow scrollbar" cannot get

modules/utils.js

@@ -601,15 +601,9 @@ var TreeStyleTabUtils = {
 			SSS.unregisterSheet(this.lastAgentSheetForNarrowScrollbar, SSS.AGENT_SHEET);
 
 		var size = this.getTreePref('tabbar.narrowScrollbar.width');
-		var rulesToSizeScrollbar = '';
+		var negativeMarginRules = '';
-		var rulesToSizeScrollbarContents = '';
 		{
-			let OS = Services.appinfo.OS;
-			let shouldResize = this.getTreePref('tabbar.narrowScrollbar.resize.'+OS);
-			if (shouldResize === null)
-				shouldResize = this.getTreePref('tabbar.narrowScrollbar.resize.default');
 			let scrollbarSize = 0;
-			if (!shouldResize) {
 				let scrollbox = aTabBrowser.tabContainer.mTabstrip._scrollbox;
 				let d = scrollbox.ownerDocument;
 
@@ -629,39 +623,44 @@ var TreeStyleTabUtils = {
 						}
 					}
 				}
-			}
+			if (scrollbarSize > 0) {
-			if (!shouldResize && scrollbarSize > 0) {
 				let overWidth = size - scrollbarSize;
 				let leftMargin = Math.floor(overWidth / 2);
 				let rightMargin = overWidth - leftMargin;
-				rulesToSizeScrollbar = 'margin-left: '+leftMargin+'px;' +
+				negativeMarginRules = 'margin-left: '+leftMargin+'px;' +
 										'margin-right: '+rightMargin+'px;';
 			}
-			else {
-				rulesToSizeScrollbarContents = 'max-width: '+size+'px;' +
-												'min-width: '+size+'px;';
-			}
 		}
 
 		const style = 'data:text/css,'+encodeURIComponent(
 			('@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");' +
 
-			(rulesToSizeScrollbarContents ?
-			'tabs.tabbrowser-tabs[%MODE%="vertical"][%NARROW%="true"]' +
-			'  .tabbrowser-arrowscrollbox' +
-			'  > scrollbox' +
-			'  > scrollbar[orient="vertical"],' +
-			'tabs.tabbrowser-tabs[%MODE%="vertical"][%NARROW%="true"]' +
-			'  .tabbrowser-arrowscrollbox' +
-			'  > scrollbox' +
-			'  > scrollbar[orient="vertical"] * {' + rulesToSizeScrollbarContents + '}' : '' ) +
-
 			'tabs.tabbrowser-tabs[%MODE%="vertical"][%NARROW%="true"]' +
 			'  .tabbrowser-arrowscrollbox' +
 			'  > scrollbox' +
 			'  > scrollbar[orient="vertical"] {' +
 			'  font-size: %SIZE%px;' +
-			  rulesToSizeScrollbar +
+			'  max-width: %SIZE%px;' +
+			'  min-width: %SIZE%px;' +
+			// This "clip-path" is required to clip overflowed elements.
+			// Elements with "-moz-appearance" can be larger than its given
+			// maximum size.
+			'  clip-path: url(#treestyletab-box-clip-path);' +
+			'}' +
+			'tabs.tabbrowser-tabs[%MODE%="vertical"][%NARROW%="true"]' +
+			'  .tabbrowser-arrowscrollbox' +
+			'  > scrollbox' +
+			'  > scrollbar[orient="vertical"] * {' +
+			'  font-size: %SIZE%px;' +
+			'  max-width: 100%;' +
+			'  min-width: %SIZE%px;' +
+			'}' +
+			'tabs.tabbrowser-tabs[%MODE%="vertical"][%NARROW%="true"]' +
+			'  .tabbrowser-arrowscrollbox' +
+			'  > scrollbox' +
+			'  > scrollbar[orient="vertical"] scrollbarbutton {' +
+			'  font-size: %SIZE%px;' +
+			  negativeMarginRules +
 			'}' +
 			'tabs.tabbrowser-tabs[%MODE%="vertical"][%NARROW%="true"]' +
 			'  .tabbrowser-arrowscrollbox' +

skin/classic/treestyletab/metal/base.css

@@ -40,23 +40,6 @@
 	border-width: 1px 0 0 !important;
 	padding: 0 !important;
 }
-/* these styles are required to cover narrow scrollbars. */
-.tabbrowser-tabs[treestyletab-mode="vertical"]
-  .scrollbox-innerbox {
-	background: linear-gradient(to left,
-	                            rgba(121,121,121,1) 0%,
-	                            rgba(121,121,121,1) 10%,
-	                            rgba(121,121,121,0) 11%,
-	                            rgba(121,121,121,0) 100%) !important;
-}
-.tabbrowser-tabs[treestyletab-tabbar-position="left"][treestyletab-invert-scrollbar="true"]
-  .scrollbox-innerbox {
-	background: linear-gradient(to right,
-	                            rgba(121,121,121,1) 0%,
-	                            rgba(121,121,121,1) 10%,
-	                            rgba(121,121,121,0) 11%,
-	                            rgba(121,121,121,0) 100%) !important;
-}
 
 .tabbrowser-tabs[treestyletab-mode="vertical"] {
 	appearance: none !important;
@@ -123,25 +106,6 @@ tabbrowser[treestyletab-tabbar-position="right"]
 	background: #acacac !important;
 	border-color: #797979 !important;
 }
-/* these styles are required to cover narrow scrollbars. */
-:root:-moz-window-inactive
-  .tabbrowser-tabs[treestyletab-mode="vertical"]
-  .scrollbox-innerbox {
-	background: linear-gradient(to left,
-	                            rgba(172,172,172,1) 0%,
-	                            rgba(172,172,172,1) 10%,
-	                            rgba(172,172,172,0) 11%,
-	                            rgba(172,172,172,0) 100%) !important;
-}
-:root:-moz-window-inactive
-  .tabbrowser-tabs[treestyletab-tabbar-position="left"][treestyletab-invert-scrollbar="true"]
-  .scrollbox-innerbox {
-	background: linear-gradient(to right,
-	                            rgba(172,172,172,1) 0%,
-	                            rgba(172,172,172,1) 10%,
-	                            rgba(172,172,172,0) 11%,
-	                            rgba(172,172,172,0) 100%) !important;
-}
 :root:-moz-window-inactive
   .tabbrowser-strip[treestyletab-mode="vertical"][treestyletab-style~="aero"],
 :root:-moz-window-inactive

skin/classic/treestyletab/sidebar/sidebar.css

@@ -20,53 +20,11 @@
 .tabbrowser-strip[treestyletab-mode="vertical"] {
 	background: #d4dde5 !important;
 }
-/* these styles are required to cover narrow scrollbars. */
-.tabbrowser-tabs[treestyletab-mode="vertical"]
-  .scrollbox-innerbox {
-	background: linear-gradient(to left,
-	                            rgba(212,221,229,1) 0%,
-	                            rgba(212,221,229,1) 10%,
-	                            rgba(212,221,229,0) 11%,
-	                            rgba(212,221,229,0) 100%) !important;
-}
-.tabbrowser-tabs[treestyletab-tabbar-position="left"][treestyletab-invert-scrollbar="true"]
-  .scrollbox-innerbox {
-	background: linear-gradient(to right,
-	                            rgba(212,221,229,1) 0%,
-	                            rgba(212,221,229,1) 10%,
-	                            rgba(212,221,229,0) 11%,
-	                            rgba(212,221,229,0) 100%) !important;
-}
-.tabbrowser-tabs[treestyletab-mode="vertical"]
-  .scrollbox-innerbox {
-	background: linear-gradient(to left,
-	                            rgba(212,221,229,1) 0%,
-	                            rgba(212,221,229,1) 10%,
-	                            rgba(212,221,229,0) 11%,
-	                            rgba(212,221,229,0) 100%) !important;
-}
-.tabbrowser-tabs[treestyletab-tabbar-position="left"][treestyletab-invert-scrollbar="true"]
-  .scrollbox-innerbox {
-	background: linear-gradient(to right,
-	                            rgba(212,221,229,1) 0%,
-	                            rgba(212,221,229,1) 10%,
-	                            rgba(212,221,229,0) 11%,
-	                            rgba(212,221,229,0) 100%) !important;
-}
 
 #main-window:-moz-window-inactive
   .tabbrowser-strip:not([treestyletab-style~="aero"])[treestyletab-mode="vertical"] {
 	background: #e8e8e8 !important;
 }
-#main-window:-moz-window-inactive
-  .tabbrowser-tabs:not([treestyletab-style~="aero"])[treestyletab-mode="vertical"]
-  .scrollbox-innerbox {
-	background: linear-gradient(to right,
-	                            rgba(232,232,232,1) 0%,
-	                            rgba(232,232,232,1) 10%,
-	                            rgba(232,232,232,0) 11%,
-	                            rgba(232,232,232,0) 100%) !important;
-}
 /* autohide */
 .treestyletab-tabbar-toolbar[treestyletab-tabbar-autohide][treestyletab-mode="vertical"]
   #treestyletab-tabbar-resizer-box {

skin/classic/treestyletab/square/base.css

@@ -17,23 +17,6 @@
 	-moz-appearance: none;
 	background: darkgray !important;
 }
-/* these styles are required to cover narrow scrollbars. */
-.tabbrowser-tabs[treestyletab-style~="border"][treestyletab-mode="vertical"]
-  .scrollbox-innerbox {
-	background: linear-gradient(to left,
-	                            rgba(169,169,169,1) 0%,
-	                            rgba(169,169,169,1) 10%,
-	                            rgba(169,169,169,0) 11%,
-	                            rgba(169,169,169,0) 100%) !important;
-}
-.tabbrowser-tabs[treestyletab-style~="border"][treestyletab-tabbar-position="left"][treestyletab-invert-scrollbar="true"]
-  .scrollbox-innerbox {
-	background: linear-gradient(to right,
-	                            rgba(169,169,169,1) 0%,
-	                            rgba(169,169,169,1) 10%,
-	                            rgba(169,169,169,0) 11%,
-	                            rgba(169,169,169,0) 100%) !important;
-}
 
 .tabbrowser-strip[treestyletab-mode="vertical"],
 .treestyletab-tabbar-toolbar[treestyletab-mode="vertical"],

skin/classic/treestyletab/square/vertigo.css

@@ -1,23 +1,5 @@
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-/* these styles are required to cover narrow scrollbars. */
-.tabbrowser-tabs[treestyletab-mode="vertical"]
-  .scrollbox-innerbox {
-	background: linear-gradient(to left,
-	                            -moz-dialog 0%,
-	                            -moz-dialog 10%,
-	                            transparent 11%,
-	                            transparent 100%) !important;
-}
-.tabbrowser-tabs[treestyletab-tabbar-position="left"][treestyletab-invert-scrollbar="true"]
-  .scrollbox-innerbox {
-	background: linear-gradient(to right,
-	                            -moz-dialog 0%,
-	                            -moz-dialog 10%,
-	                            transparent 11%,
-	                            transparent 100%) !important;
-}
-
 .tabbrowser-tabs:not([treestyletab-tabbar-position="top"]),
 .tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
   .tabbrowser-tab:not([pinned]),