Bug 1695140 - Allow the selected tabs text to extend into the start side of the close buttons padding when its not hovered to show more text. r=Gijs

Differential Revision: https://phabricator.services.mozilla.com/D108498

browser/base/content/tabbrowser.css

@@ -62,6 +62,10 @@
 }
 } /*** END !proton ***/
 
+.tabbrowser-tab {
+  --tab-label-mask-size: 2em;
+}
+
 .tab-label {
   white-space: nowrap;
 }
@@ -77,13 +81,13 @@
 .tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
 .tab-label-container[textoverflow]:not([labeldirection], [pinned]):-moz-locale-dir(ltr) {
   direction: ltr;
-  mask-image: linear-gradient(to left, transparent, black 2em);
+  mask-image: linear-gradient(to left, transparent, black var(--tab-label-mask-size));
 }
 
 .tab-label-container[textoverflow][labeldirection=rtl]:not([pinned]),
 .tab-label-container[textoverflow]:not([labeldirection], [pinned]):-moz-locale-dir(rtl) {
   direction: rtl;
-  mask-image: linear-gradient(to right, transparent, black 2em);
+  mask-image: linear-gradient(to right, transparent, black var(--tab-label-mask-size));
 }
 
 tabpanels {

browser/themes/shared/tabs.inc.css

@@ -513,6 +513,17 @@
   padding: 5px;
   border-radius: var(--tab-border-radius);
 }
+
+/* The following rulesets allow showing more of the tab title */
+.tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-close-button {
+  padding-inline-start: 0;
+  width: 19px;
+}
+
+.tabbrowser-tab[visuallyselected=true]:hover,
+#tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected=true]):hover {
+  --tab-label-mask-size: 1em;
+}
 } /*** END proton ***/
 
 @supports not -moz-bool-pref("browser.proton.tabs.enabled") {