From 172df772d368137c8da291df2ce3d0e86910ab58 Mon Sep 17 00:00:00 2001
From: YUKI Hiroshi <shimoda@clear-code.com>
Date: Thu, 18 Feb 2016 12:59:29 +0900
Subject: [PATCH] Render narrow scrollbar more correctly, without any side
 effect like #1072

---
 content/treestyletab/treestyletab.xul         | 15 +++++-
 defaults/preferences/treestyletab.js          |  2 -
 modules/utils.js                              | 49 +++++++++----------
 skin/classic/treestyletab/metal/base.css      | 36 --------------
 skin/classic/treestyletab/sidebar/sidebar.css | 42 ----------------
 skin/classic/treestyletab/square/base.css     | 17 -------
 skin/classic/treestyletab/square/vertigo.css  | 18 -------
 7 files changed, 38 insertions(+), 141 deletions(-)

diff --git a/content/treestyletab/treestyletab.xul b/content/treestyletab/treestyletab.xul
index 6065ef6b..db04de7d 100644
--- a/content/treestyletab/treestyletab.xul
+++ b/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>
diff --git a/defaults/preferences/treestyletab.js b/defaults/preferences/treestyletab.js
index 018f3791..fbd38228 100644
--- a/defaults/preferences/treestyletab.js
+++ b/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
diff --git a/modules/utils.js b/modules/utils.js
index 4b84a770..8f6c3413 100644
--- a/modules/utils.js
+++ b/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 rulesToSizeScrollbarContents = '';
+		var negativeMarginRules = '';
 		{
-			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 (!shouldResize && scrollbarSize > 0) {
+			if (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' +
diff --git a/skin/classic/treestyletab/metal/base.css b/skin/classic/treestyletab/metal/base.css
index 5977ab51..d259246f 100644
--- a/skin/classic/treestyletab/metal/base.css
+++ b/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
diff --git a/skin/classic/treestyletab/sidebar/sidebar.css b/skin/classic/treestyletab/sidebar/sidebar.css
index 4ef8ba64..0dbaae59 100644
--- a/skin/classic/treestyletab/sidebar/sidebar.css
+++ b/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 {
diff --git a/skin/classic/treestyletab/square/base.css b/skin/classic/treestyletab/square/base.css
index 3d1487d6..6d1adb22 100644
--- a/skin/classic/treestyletab/square/base.css
+++ b/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"],
diff --git a/skin/classic/treestyletab/square/vertigo.css b/skin/classic/treestyletab/square/vertigo.css
index 2d8ecb95..68bd86bf 100644
--- a/skin/classic/treestyletab/square/vertigo.css
+++ b/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]),