Firefox 107 userchrome behavior change --tab-lines
Prior to the last update, Firefox was auto resizing my tab background area (I don't know the technical name of this, but its the menu area behind the tabs) to fit more tabs as I opened them, up to a certain number of open tabs. Now the tab background area remains at its full size from the start even if I have only 1 tab open. I prefer the old behavior and I'm not sure what userchrome setting I need to adjust in order to get back to it. The line that is causing the issue is as follows
- main-window {
/*--tab-min-height: unset !important; */ --tab-min-height: 38px; --tabs-lines: 8; /* THIS LINE CAUSES THE PROBLEM */ --tab_min_width_mlt: 186px; --tab_max_width_mlt: 186px; --tab-min-height_mlt: 38px;
}
I can reduce it to a lower number but when I do that I am stuck with the tab scrolling behavior that I don't want. Perhaps there is a setting to auto resize the tab area that I'm unaware of. I would appreciate any assistance. Thanks.
Chosen solution
I was eventually able to get this resolved. For some reason a min-height setting was causing the issue
- tabbrowser-tabs {
min-height: unset !important; padding-inline-start: 0px !important
}
changed to..
- tabbrowser-tabs {
height: var(--tab-min-height); padding-inline-start: 0px !important
}
After the change the old behavior is back. Not sure why this was the fix but it seems to work.
Read this answer in context 👍 2All Replies (5)
Hi, this is a CSS variable:
--tabs-lines: 8;
Where in the code is that variable used? It might appear like this, or as part of calculation:
some-property: var (--tabs-lines);
Actually before going too far down the rabbit hole, do you recall where you got your code? There's a good chance the author is aware of the issue and has updated it already. Maybe one of these:
https://github.com/Aris-t2/CustomCSSforFx/blob/master/fx91-100/css/tabs/tabs_multiple_lines.css (updated in June)
https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/multi-row_tabs.css (updated in October)
@-moz-document url(chrome://browser/content/browser.xhtml) {
#scrollbutton-up ~ spacer,
#scrollbutton-up,
#scrollbutton-down {
display: var(--scrollbutton-display-model,initial);
}
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
overflow-y: auto;
max-height: calc(var(--tab-min-height_mlt) * var(--tabs-lines)); /* Seems to be getting used here only */
scrollbar-color: currentColor transparent;
scrollbar-width: thin;
}
}
I have been updating Firefox pretty much every time there's a new release so it was likely in the last update or two where the change happened. Or possibly its due to a Windows change somewhere I suppose. I'm not sure if this userChrome.css is loaded once when Firefox is opened or if its referenced every time there is a new tab. If its every time there's a new tab then maybe I could just change the max-height at different tab thresholds to mimic the old behavior. Also I did try both of the github userChrome settings you provided and both had the same issue.
Thank you again for your help.
As far as I can tell, max-height appears to be behaving like min-height. Setting min-height seems to override the max-height. Maybe Firefox has decided to make them both mean the same thing?
Chosen Solution
I was eventually able to get this resolved. For some reason a min-height setting was causing the issue
- tabbrowser-tabs {
min-height: unset !important; padding-inline-start: 0px !important
}
changed to..
- tabbrowser-tabs {
height: var(--tab-min-height); padding-inline-start: 0px !important
}
After the change the old behavior is back. Not sure why this was the fix but it seems to work.
For future reference, the userChrome.css file is only read at startup.