From 89dd425fd22a6cbbbbef2d2b47e2a4bc9fc14fc3 Mon Sep 17 00:00:00 2001 From: Basilisk-Dev Date: Tue, 21 Feb 2023 17:26:36 -0500 Subject: [PATCH] [Basilisk] Fade out tab label on overflow instead of ellipsis This is a port of Mozilla bug 658467. See also MoonchildProductions/Pale-Moon#1908 See also https://forum.palemoon.org/viewtopic.php?f=5&t=29423 --- .../basilisk/base/content/tabbrowser.css | 22 +++++++++--- .../basilisk/base/content/tabbrowser.xml | 36 ++++++++++--------- application/basilisk/themes/osx/browser.css | 5 +-- .../basilisk/themes/shared/tabs.inc.css | 2 +- 4 files changed, 40 insertions(+), 25 deletions(-) diff --git a/application/basilisk/base/content/tabbrowser.css b/application/basilisk/base/content/tabbrowser.css index 9085304f6c..2d9b7dd903 100644 --- a/application/basilisk/base/content/tabbrowser.css +++ b/application/basilisk/base/content/tabbrowser.css @@ -39,12 +39,24 @@ display: -moz-box; } -.tab-label[pinned] { +.tab-label { + white-space: nowrap; +} + +.tab-label-container { + overflow: hidden; +} + +.tab-label-container[pinned] { width: 0; - margin-left: 0 !important; - margin-right: 0 !important; - padding-left: 0 !important; - padding-right: 0 !important; +} + +.tab-label-container[textoverflow]:not([pinned]) { + mask-image: linear-gradient(to left, transparent, black 1em); +} + +.tab-label-container[textoverflow]:not([pinned]):-moz-locale-dir(rtl) { + mask-image: linear-gradient(to right, transparent, black 1em); } .tab-stack { diff --git a/application/basilisk/base/content/tabbrowser.xml b/application/basilisk/base/content/tabbrowser.xml index fec7c9ecca..bce2c06d8f 100644 --- a/application/basilisk/base/content/tabbrowser.xml +++ b/application/basilisk/base/content/tabbrowser.xml @@ -1397,8 +1397,7 @@ @@ -1408,7 +1407,6 @@ - + + + .toolbarbutton-menu-dropmarker { .tab-label { margin-top: 1px; margin-bottom: 0; + -moz-box-flex: 1; text-align: center; } @@ -2503,7 +2504,7 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker { opacity: 0.9999; } -.tab-label:not([selected="true"]) { +.tab-label-container:not([selected="true"]) { opacity: .7; } @@ -2529,7 +2530,7 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker { border-width: 0 11px; } -.tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-label:not([pinned]), +.tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-label-container:not([pinned]), .tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-icon-image[pinned], .tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-throbber[pinned] { box-shadow: @focusRingShadow@; diff --git a/application/basilisk/themes/shared/tabs.inc.css b/application/basilisk/themes/shared/tabs.inc.css index c505416e46..a69e9f4d58 100644 --- a/application/basilisk/themes/shared/tabs.inc.css +++ b/application/basilisk/themes/shared/tabs.inc.css @@ -192,7 +192,7 @@ } .tab-close-button { - margin-inline-start: 4px; + margin-inline-start: 2px; margin-inline-end: -2px; padding: 0; }