[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
This commit is contained in:
Basilisk-Dev 2023-02-21 17:26:36 -05:00 committed by roytam1
commit 89dd425fd2
4 changed files with 40 additions and 25 deletions

View file

@ -39,12 +39,24 @@
display: -moz-box; display: -moz-box;
} }
.tab-label[pinned] { .tab-label {
white-space: nowrap;
}
.tab-label-container {
overflow: hidden;
}
.tab-label-container[pinned] {
width: 0; width: 0;
margin-left: 0 !important; }
margin-right: 0 !important;
padding-left: 0 !important; .tab-label-container[textoverflow]:not([pinned]) {
padding-right: 0 !important; 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 { .tab-stack {

View file

@ -1397,8 +1397,7 @@
<body> <body>
<![CDATA[ <![CDATA[
aTab.label = this.mStringBundle.getString("tabs.connecting"); aTab.label = this.mStringBundle.getString("tabs.connecting");
aTab.crop = "end"; this._tabAttrModified(aTab, ["label"]);
this._tabAttrModified(aTab, ["label", "crop"]);
]]> ]]>
</body> </body>
</method> </method>
@ -1408,7 +1407,6 @@
<body> <body>
<![CDATA[ <![CDATA[
var browser = this.getBrowserForTab(aTab); var browser = this.getBrowserForTab(aTab);
var crop = "end";
var title = browser.contentTitle; var title = browser.contentTitle;
if (!title) { if (!title) {
@ -1430,9 +1428,6 @@
.getService(Components.interfaces.nsITextToSubURI); .getService(Components.interfaces.nsITextToSubURI);
title = textToSubURI.unEscapeNonAsciiURI(characterSet, title); title = textToSubURI.unEscapeNonAsciiURI(characterSet, title);
} catch (ex) { /* Do nothing. */ } } catch (ex) { /* Do nothing. */ }
crop = "center";
} else if (aTab.hasAttribute("customizemode")) { } else if (aTab.hasAttribute("customizemode")) {
let brandBundle = document.getElementById("bundle_brand"); let brandBundle = document.getElementById("bundle_brand");
let brandShortName = brandBundle.getString("brandShortName"); let brandShortName = brandBundle.getString("brandShortName");
@ -1442,13 +1437,11 @@
title = this.mStringBundle.getString("tabs.emptyTabTitle"); title = this.mStringBundle.getString("tabs.emptyTabTitle");
} }
if (aTab.label == title && if (aTab.label == title)
aTab.crop == crop)
return false; return false;
aTab.label = title; aTab.label = title;
aTab.crop = crop; this._tabAttrModified(aTab, ["label"]);
this._tabAttrModified(aTab, ["label", "crop"]);
if (aTab.selected) if (aTab.selected)
this.updateTitlebar(); this.updateTitlebar();
@ -2128,7 +2121,6 @@
t.setAttribute("label", aURI); t.setAttribute("label", aURI);
} }
t.setAttribute("crop", "end");
t.setAttribute("onerror", "this.removeAttribute('image');"); t.setAttribute("onerror", "this.removeAttribute('image');");
if (aSkipBackgroundNotify) { if (aSkipBackgroundNotify) {
@ -5123,6 +5115,9 @@
<handlers> <handlers>
<handler event="underflow" phase="capturing"><![CDATA[ <handler event="underflow" phase="capturing"><![CDATA[
if (event.target != this)
return;
if (event.detail == 0) if (event.detail == 0)
return; // Ignore vertical events return; // Ignore vertical events
@ -5138,6 +5133,9 @@
tabs._positionPinnedTabs(); tabs._positionPinnedTabs();
]]></handler> ]]></handler>
<handler event="overflow"><![CDATA[ <handler event="overflow"><![CDATA[
if (event.target != this)
return;
if (event.detail == 0) if (event.detail == 0)
return; // Ignore vertical events return; // Ignore vertical events
@ -5191,7 +5189,6 @@
var tab = this.firstChild; var tab = this.firstChild;
tab.label = this.tabbrowser.mStringBundle.getString("tabs.emptyTabTitle"); tab.label = this.tabbrowser.mStringBundle.getString("tabs.emptyTabTitle");
tab.setAttribute("crop", "end");
tab.setAttribute("onerror", "this.removeAttribute('image');"); tab.setAttribute("onerror", "this.removeAttribute('image');");
window.addEventListener("resize", this, false); window.addEventListener("resize", this, false);
@ -6434,10 +6431,15 @@
anonid="overlay-icon" anonid="overlay-icon"
class="tab-icon-overlay" class="tab-icon-overlay"
role="presentation"/> role="presentation"/>
<xul:label flex="1" <xul:hbox class="tab-label-container"
xbl:inherits="value=label,crop,accesskey,fadein,pinned,selected=visuallyselected,attention" xbl:inherits="pinned,selected=visuallyselected"
class="tab-text tab-label" onoverflow="this.setAttribute('textoverflow', 'true');"
role="presentation"/> onunderflow="this.removeAttribute('textoverflow');"
flex="1">
<xul:label class="tab-text tab-label"
xbl:inherits="xbl:text=label,accesskey,fadein,pinned,selected=visuallyselected,attention"
role="presentation"/>
</xul:hbox>
<xul:image xbl:inherits="soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected" <xul:image xbl:inherits="soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected"
anonid="soundplaying-icon" anonid="soundplaying-icon"
class="tab-icon-sound" class="tab-icon-sound"
@ -6785,7 +6787,7 @@
<parameter name="aTab"/> <parameter name="aTab"/>
<body><![CDATA[ <body><![CDATA[
aMenuitem.setAttribute("label", aTab.label); aMenuitem.setAttribute("label", aTab.label);
aMenuitem.setAttribute("crop", aTab.getAttribute("crop")); aMenuitem.setAttribute("crop", "end");
if (aTab.hasAttribute("busy")) { if (aTab.hasAttribute("busy")) {
aMenuitem.setAttribute("busy", aTab.getAttribute("busy")); aMenuitem.setAttribute("busy", aTab.getAttribute("busy"));

View file

@ -2404,6 +2404,7 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
.tab-label { .tab-label {
margin-top: 1px; margin-top: 1px;
margin-bottom: 0; margin-bottom: 0;
-moz-box-flex: 1;
text-align: center; text-align: center;
} }
@ -2503,7 +2504,7 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
opacity: 0.9999; opacity: 0.9999;
} }
.tab-label:not([selected="true"]) { .tab-label-container:not([selected="true"]) {
opacity: .7; opacity: .7;
} }
@ -2529,7 +2530,7 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
border-width: 0 11px; 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-icon-image[pinned],
.tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-throbber[pinned] { .tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-throbber[pinned] {
box-shadow: @focusRingShadow@; box-shadow: @focusRingShadow@;

View file

@ -192,7 +192,7 @@
} }
.tab-close-button { .tab-close-button {
margin-inline-start: 4px; margin-inline-start: 2px;
margin-inline-end: -2px; margin-inline-end: -2px;
padding: 0; padding: 0;
} }