Hello!
I use Firefox on Arch Linux, with Openbox as my window manager. I’ve been experiencing several issues since the release of Firefox 143.0.3, which I didn’t have with the previous minor version 143.0.2. However, I haven’t made any changes to my Firefox theme for several months; nor have I modified my GTK-4 theme.
First of all, in my custom CSS file (userChrome.css), I defined a section for light themes and a section for dark themes, like this:
@media (prefers-color-scheme: light) {
... (some CSS tags are here)...
}
@media (prefers-color-scheme: dark) {
... (some CSS tags are here)...
}
My full CSS is available here.
But now, only the light theme is applied. My Firefox theme is the “Systeme theme - auto”; I haven’t changed it. I can force the display of dark theme CSS tags by changing the theme in the Firefox settings and selecting the Dark theme, but why has this changed? My GTK-4 theme is still a dark theme, so why does the default theme only apply light theme tags?
On the other hand, the code in my userChrome.css file that relates to the address bar no longer works. This code is as follows:
#urlbar[breakout][breakout-extend] {
margin-left: 0 !important;
width: var(--urlbar-width) !important;
margin-top: calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2) !important;
}
.urlbarView-row { padding: 2px 1px !important; }
#urlbar-background { animation: none !important; }
.urlbar-input-container {
padding: 1px !important;
height: var(--urlbar-height) !important;
}
#identity-icon { margin-block: var(--urlbar-icon-padding); }
.urlbarView > .search-one-offs:not([hidden]) { padding-block: 0 !important; }
#urlbar-background, #searchbar, .findbar-textbox { box-shadow: none !important; }
.urlbar-input::placeholder, .searchbar-textbox::placeholder, .findbar-textbox::placeholder { color: color-mix(in srgb, currentColor 70%, transparent) !important; }
#urlbar[open] > #urlbar-background { border-color: Highlight !important; }
#urlbar-results {
max-height: 239px;
overflow-y: auto;
scrollbar-color: color-mix(in srgb, currentColor 26%, transparent) transparent;
scrollbar-width: thin;
padding: 0 !important;
margin: 4px 0 5px 0;
}
.urlbarView-row-inner { padding-block: 1px !important; }
.urlbarView-no-wrap { position: relative; }
#urlbar[searchmode] > .urlbarView { display: none !important; }
.urlbarView-row-inner { flex-wrap: wrap !important; }
.urlbarView-no-wrap {
max-width: 100% !important;
flex-basis: 100%;
}
.urlbarView-row[has-url]:not([type="switchtab"]) .urlbarView-title-separator { display: none; }
.urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url:-moz-locale-dir(ltr) { margin-left: var(--urlbarView-second-line-indent); }
.urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url:-moz-locale-dir(rtl) { margin-right: var(--urlbarView-second-line-indent); }
How can I fix it?
Many thanks in advance for your help!
Thanks for the tip. It works!
May I ask how you keep up to date with these kinds of new features? Do you review the new features page when a new version of Firefox is released? Is there an easy way to find out about these changes in advance?
In any case, you have (once again) been a great help; thank you very much, and have a nice day!
Some of it is stuff that I have found out about when folks have reported that this or that style is broken after some update (which might be update in pre-release versions). I also occasionally scan through changes in nightlies - via this page and it’s not super uncommon that some change rings sounds like something that could affect one of my styles - so then I’ll usually check it out more thoroughly. And of course it can happen that one of the styles I’m using (which isn’t very many tbh) changes behavior after nightly updates.
Might sound like a lot, but it really isn’t too much effort. Responding to changes is usually quite simple, its way more work trying to figure out how to reproduce some problem that someone else if having but which only occurs under specific conditions.
OK, thank you for the tips!
I understand that there will be other changes to certain elements, including the address bar, in future versions of Firefox: to which selectors should I add
:where(#urlbar) >to ensure that my code is compatible with future versions?Thank you very much for your help!
Sorry, but I don’t quite understand what you mean. You don’t know what kind of changes are going to happen in the future - and neither do I, so we can’t future-proof any rules too much. The selector
:where(#urlbar) >only means that the selector coming after it must also match the element that is a child of urlbar even if the selector would also match something else in the document. I suppose it would be somewhat relevant currrently, since similar class names are also used in the searchbar popup now or soon (depending on what Firefox version you are using) and you might only want to affect things inside urlbar but not inside searchbar.Indeed, my message wasn’t very clear. While trying to keep my
userChrome.cssfile up to date, I found this first commit and this second commit in your repository; I deduced that certain elements needed to be updated… but I was wondering which ones. I thought this was due to upcoming changes in Firefox, but I was probably mistaken…Sorry, I couldn’t reply earlier. Yeah, so indeed searchbar is getting an update where it would use same kind of structure that urlbar is using - not sure in what version it will land in release Firefox though. The point of those extra
:where(#urlbar)selectors in those commits is that some of the rules in the affected sites should only apply to things which are inside urlbar.If you don’t have a separate searchbar enabled then you don’t necessarily do anything. Also, if you do use separate searchbar you might actually want to apply some of the rules also to it as well to have it styled consistently to urlbar. It all depends on what you want do achieve, really.
deleted by creator