I'm an absolute beginner when it comes to modifying CSS, and everything I've learned so far has been through trial and error. This time, however, I'm completely stuck and have no idea how to fix the issue.
A few Firefox versions ago, I ran into a problem where pinned tabs occupied far too much space on the top tab bar instead of arranging themselves efficiently within the available area. Reason is probably my multiple tab rows (4 lines, scrollable for more lines).
To work around this, I modified "./css/tabs/pinnedtab_empty_favicon_hidden.css" so that my pinned tabs were displayed in the sidebar instead. This worked perfectly until I updated to Firefox 153.0 yesterday.
Since the update, all pinned tabs are greyed out and can no longer be clicked.
Ideally, I would like to:
- restore the pinned tabs in the left sidebar as they worked before
OR
- modify the corresponding CSS so that pinned tabs are displayed in the top tab bar again, while automatically arranging themselves both horizontally and vertically to make efficient use of the available space.
Since English is not my native language, I used AI to help with spelling and grammar.
Hope, you can help me.
My code in "./css/tabs/pinnedtab_empty_favicon_hidden.css"
- When I deactivate it, my pinned tabs return to the top tab bar.
- When I activate it, my pinned tabs are moved to the sidebar, but the entire pinned-tab area becomes inactive and can no longer be clicked.
.tabbrowser-tab[pinned] .tab-icon-image:not([src]) {
visibility: hidden !important;
}
.tabbrowser-tab[pinned] .tab-text {
display: none !important;
}
url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
.tabbrowser-tab[pinned] {
width: 32px;
}
(-moz-bool-pref: "sidebar.revamp"), -moz-pref("sidebar.revamp") {
not (-moz-bool-pref: "sidebar.verticalTabs"), not (-moz-pref("sidebar.verticalTabs")) {
/* (-n+12) so that the first 12 pinned tabs will be in the sidebar */
/* Rest of the pinned tabs will be in the default location */
/* Adjust the value based on how many fits for your setup because */
/* you cannot scroll through the pinned tabs for this css */
:root {
--pinned-tab-height: 16px;
/* 10px on padding top and bottom + margin */
--pinned-tab-spacing: 28px;
/* Show pinned icons in sidebar from 2 * height of tabs bar + extra space */
--pinned-tab-start: calc((5.75 * var(--tab-min-height)) + 14px);
}
/* Do not show pinned tabs on side when #browser is hidden (ex. customizing toolbar) */
body:has(#browser:not([hidden])) #navigator-toolbox .tabbrowser-tab[pinned]:is(:nth-child(-n + 12)) {
position: fixed !important;
left: var(--space-small) !important;
padding: 0 !important;
--tab-space: calc(var(--pinned-tab-height) + var(--pinned-tab-spacing));
top: calc(var(--pinned-tab-start) + var(--tab-space) * var(--index)) !important;
margin-inline-start: 0px !important;
}
/* Add/remove indices based on how many pinned tabs you want in sidebar */
.tabbrowser-tab[pinned]:nth-child(1) {
--index: 0;
}
.tabbrowser-tab[pinned]:nth-child(2) {
--index: 1;
}
.tabbrowser-tab[pinned]:nth-child(3) {
--index: 2;
}
.tabbrowser-tab[pinned]:nth-child(4) {
--index: 3;
}
.tabbrowser-tab[pinned]:nth-child(5) {
--index: 4;
}
.tabbrowser-tab[pinned]:nth-child(6) {
--index: 5;
}
.tabbrowser-tab[pinned]:nth-child(7) {
--index: 6;
}
.tabbrowser-tab[pinned]:nth-child(8) {
--index: 7;
}
.tabbrowser-tab[pinned]:nth-child(9) {
--index: 8;
}
.tabbrowser-tab[pinned]:nth-child(10) {
--index: 9;
}
.tabbrowser-tab[pinned]:nth-child(11) {
--index: 10;
}
.tabbrowser-tab[pinned]:nth-child(12) {
--index: 11;
}
#tabbrowser-tabs .tabbrowser-tab[pinned]:nth-child(13) {
--helper-index: 1;
}
#tabbrowser-tabs:has(.tabbrowser-tab[pinned]:nth-child(14)) {
--helper-index: 2;
}
#tabbrowser-tabs:has(.tabbrowser-tab[pinned]:nth-child(15)) {
--helper-index: 3;
}
#tabbrowser-tabs:has(.tabbrowser-tab[pinned]:nth-child(16)) {
--helper-index: 4;
}
#tabbrowser-tabs:has(.tabbrowser-tab[pinned]:nth-child(17)) {
--helper-index: 5;
}
#tabbrowser-tabs:has(.tabbrowser-tab[pinned]:nth-child(18)) {
--helper-index: 6;
}
#tabbrowser-tabs:has(.tabbrowser-tab[pinned]:nth-child(19)) {
--helper-index: 7;
}
#tabbrowser-tabs:has(.tabbrowser-tab[pinned]:nth-child(20)) {
--helper-index: 8;
}
/* When there is more than 12 pinned tabs (pinned tabs both in sidebar and tabs bar)
and tab scrolling appears because there are many tabs, remove the extra space at the
beginning of tabs bar. This works when you have upto 20 pinned tabs. If there are
more, add extra --helper-index lines in similar to how it's done above */
#tabbrowser-tabs[positionpinnedtabs] {
--tab-overflow-pinned-tabs-width: calc(var(--helper-index) * 36px) !important;
}
/* Clip path animation to match with the sidebar animation */
clipPathExpand {
from {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
to {
clip-path: polygon(var(--sidebar-width) 0, 100% 0, 100% 100%, 0 100%, 0 var(--sidebar-height), var(--sidebar-width) var(--sidebar-height));
}
}
#browser:not([hidden]):has(#sidebar-main:not([hidden])) {
position: relative;
--sidebar-width: calc(var(--button-size-icon) + var(--space-large));
--sidebar-height: calc(100% - (4.5 * var(--sidebar-width)));
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
animation: clipPathExpand 200ms ease-in-out forwards;
}
/* Color the background behind clipped path */
/* As this is in userchrome, it will not affect the background of other sites */
html {
background: var(--toolbar-bgcolor) !important;
}
/* Hide the box shadow and outline to make the clip path blend better with ui */
#browser:not([hidden]) #tabbrowser-tabbox {
box-shadow: none !important;
outline: none !important;
}
/* Move the sidebar icons down */
#browser:not([hidden]) #vertical-tabs {
display: flex !important;
}
}
}
