From 6a30a4948a5954b5586e6466e0241eaf671b4f71 Mon Sep 17 00:00:00 2001
From: Jared Wein <jwein@mozilla.com>
Date: Wed, 24 Mar 2021 17:14:12 +0000
Subject: [PATCH] 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 |  8 ++++++--
 browser/themes/shared/tabs.inc.css  | 11 +++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/browser/base/content/tabbrowser.css b/browser/base/content/tabbrowser.css
index 39c71a65f97a..328da0c62da4 100644
--- a/browser/base/content/tabbrowser.css
+++ b/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 {
diff --git a/browser/themes/shared/tabs.inc.css b/browser/themes/shared/tabs.inc.css
index fa175ce11d2e..6baac6c219e9 100644
--- a/browser/themes/shared/tabs.inc.css
+++ b/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") {