non_floating_sharp_tabs.css: opacity changes remain

[Dupond]

Hello!

On Firefox 122 (under Arch Linux), despite a2b52b6, the titlebar becomes slightly lighter when the Firefox window loses focus.

Would you have any idea to prevent that? Thank you for all your amazing css!

[MrOtherGuy]

What exactly do you mean by "titlebar"? If you mean the actual native titlebar then you OS is drawing that and there's nothing we can do to change it.

If on the other hand native titlebar is disabled and you mean simply the "area behind tabs and/or menubar" then yes, it can have different background-color when window is not focused. This can be defined in your theme and we do not want to change that. But you can of course change it for yourself by adding something like this:

#navigator-toolbox{ background-color: ActiveCaption !important }
#navigator-toolbox:-moz-lwtheme{ background-color: var(--lwt-accent-color) !important }

That should force the "active window background-color" per your theme to be used whether the window is active or not.

[Dupond]

If on the other hand native titlebar is disabled and you mean simply the "area behind tabs and/or menubar"

Yes, that's what I meant; I thought it was obvious since your commit is called "Remove opacity changes from titlebar".

This can be defined in your theme and we do not want to change that.

Oh, sorry, I thought that was part of the opacity changes you were trying to avoid. I'm closing this issue, then.

By the way, may I ask what's the :-moz-lwtheme part for?

Thanks for your answer and have a nice day!

[MrOtherGuy]

Right, in the patch you pointed out we only wanted change the properties that cause stacking context changes, notably opacity and will-change, and unfortunately that means that window (in)activeness is not indicated as well as before, so, we don't want to remove opacity changes, but it's the lesser evil in this and other similar styles. Thus, we want to preserve all other window inactiveness indicators we can.

In the example snippet the line with :-moz-lwtheme will override the line above it only when you are using non-default Firefox theme, since the default theme uses ActiveCaption as the value for toolbox background-color while non-default themes use var(--lwt-accent-color).

[Dupond]

OK, thank you for the explanation! I was wondering in which cases will-change: unset and transition: none were useful for #titlebar, as I was under the impression that opacity: 1 was sufficient.

Also, do you know how to change the background color of the selected tab and the toolbar at the same time? If I try to add :root { --toolbar-bgcolor: rgba(255,255,255,.4) !important; } at the beginning of non_floating_sharp_tabs.css, in order to get a slightly darker color, then the border separating the selected tab from the toolbar reappears at the bottom of the tab... Of course, :root { --toolbar-bgcolor: #F1F1F1 !important; } works, but I don't want to declare the color absolutely (otherwise it breaks the theme used in private windows, for example), I just want to darken the existing color a bit... This seems weird to me, since your code seems to try to avoid this border from reappearing (for example: /* Selected tab needs to be relative so it gets drawn over nav-bar top "border" */)... To be sure it was not related to something else, I've removed all my own CSS code; I've just kept the code from non_floating_sharp_tabs.css and added :root { --toolbar-bgcolor: rgba(255,255,255,.4) !important; } at the beginning.

[MrOtherGuy]

That's a bit complicated. If your theme has image background AND non-opaque toolbar color, then the selected tab bottom border gets hidden by the TAB background-images, one of which is almost certainly opaque - in such case your patch should "just work", at least with most themes.

But if your theme just has solid colors, then the selected tab doesn't have a opaque background-image either in case you set --toolbar-bgcolor to non-opaque color, and so the border will show through the tab. In this case you would need to make the selected tab have one opaque background-image. One way would be to add this:

#TabsToolbar{
  --lwt-header-image: linear-gradient(var(--lwt-accent-color),var(--lwt-accent-color));
}

But if you use the default theme then this won't do, since this ruleset only applies when :-moz-lwtheme matches and it's going to break if you try to apply it to default theme.

[Dupond]

Yes, I use the default theme ("System theme - auto"), and it doesn't seem to work. Well, if it's impossible, or too complicated, then never mind! I don't know why it's been chosen to lighten everything since Firefox 122 (the zoom indicator, the border of the menus, the background colors, etc... everything is lighter than before, and sometimes the colors are very close to white!)

In any case, thank you so much for having taken the time to reply, and have a nice day!

[Dupond]

If anyone reads this one day, I just wanted to add that I seem to have found a solution for my background problem: :root:not(:-moz-lwtheme) { --toolbar-non-lwt-bgcolor: light-dark(#f1f1f1, rgb(43, 42, 51)) !important; } darkens the background, and the border doesn't show through the tab.