this post was submitted on 21 Feb 2024
6 points (100.0% liked)

Firefox Customs

3 readers
9 users here now

Chat with us!

Post your unsupported Firefox customizations here!

From the makers of r/FirefoxCSS

Links

Related

Rules

  1. Posts must have flair!
  2. Posts cannot be memes/shitposts. They should be about Firefox customization with CSS.
  3. Please be civil. Bear in mind that many users come here for help and would be turned off by insults and rudeness.
  4. When posting large amount of code use a service dedicated to hosting text snippets, such as pastebin, hastebin, github gist or equivalent. Relatively short snippets can be wrapped in code-block for inline viewing.
  5. Do NOT use url-shorteners or link to compressed downloads (such as zip or rar) when sharing code.

founded 1 year ago
MODERATORS
yoasif@fedia.io
MrOtherGuy@lemmy.world
6
Active Tab - An underline reappears in Fx123.0... (fedia.io)
submitted 8 months ago* (last edited 8 months ago) by ResurgamS13@fedia.io to c/FirefoxCSS@fedia.io
13 comments fedilink hide all child comments
 

A very thin line has reappeared under the Active Tab in Firefox 123.0 when using CSS to create 'connected tabs' (i.e. no boundary between Active Tab and the Nav Bar).

This line had previously been removed in my own CSS styling by using your suggested fix in r/FirefoxCSS topic 'Connected tabs - Proton Tabs Tweaks'..."That's probably solved by simply adding .tabbrowser-tab[selected]{ position: relative; z-index: 1 }" ... however, this fix no longer works in Fx123.0... and not obvious what has changed from my efforts with the Browser Toolbox?

A hint of the problem had reappeared in Fx122... in which, when the browser window did not have focus, the Tab Bar darkened AND a thin line appeared under the active tab... until window focus was restored.

(EDIT - The reappeared Active Tab underline problem only existed if using the 'out-of-date' 25Oct23 version of MrOtherGuy's 'non_floating_sharp_tabs.css' style... the problem had already been fixed... and is NOT present in the current 24Jan24 version.)

The attached image shows the same problem also exists in your 'non_floating_sharp_tabs.css' AFAICS? The LH image is Firefox 123.0 + RH image of LibreWolf 122.0.1-2. (Both browser windows have focus. Both images of clean test profiles on Win10 with only your latest 'non_floating_sharp_tabs.css' style and the Gradient Blue theme added. The UI size has been increased by setting pref 'layout.css.devPixelsPerPx' = 2.5 to improve the image clarity o the two toolbars.)

top 13 comments
sorted by: hot top controversial new old
[–] MrOtherGuy@lemmy.world 2 points 8 months ago (2 children)

Interesting. I wonder what the difference would be - I've tried that style on Win10 with Firefox 123 with new profile and I can't reproduce this issue, not on 100% scaling or with 250% like in your example.

[–] hansman@fedia.io 1 points 8 months ago (2 children)

If it's the box-shadow causing the issue, in my testing it will only be visible in (most?) 3rd party themes, I couldn't see it in the official Fx and system(Mac) themes either.

On the other hand, that shadow should then go all across the bar, not just show under the selected tab. Unless the chosen theme or his custom css moved things around a bit.

[–] MrOtherGuy@lemmy.world 2 points 8 months ago (1 children)

Yes, this is essentially an issue about how toolbars are layered. Many themes have some background image behind the whole toolbars area (or toolbox), and then have semi-transparent background color for the main toolbar from which the image is seen through.

To make selected tab look like it is connected to the toolbar below it must use that same semi-transparent background. BUT, if there is also a line separating the toolbars (implemented as box-shadow on nav-bar), then that line needs to be covered somehow. Built-in themes, with the exception of Alpenglow, all have fully opaque toolbar background-colors so there is no issue, the opaque selected tab can just cover it and all is well.

So selected tab needs to have some opaque background, but to make it fit I've chosen to make it have bunch of background-images positioned such they are (most of the time) indistiguishable from the toolbox background image(s). In short, selected tab also uses the same background-image as the toolbox.

But starting with 122 the titlebar has opacity and will-change properties with values that cause it (as well as tabs toolbar within it) that change how all these layers are stacked on top of each other.

The end result is that box-shadow of nav-bar gets drawn over selected tab, whereas what we want is to draw the selectsd tab with all its background-images over the box-shadow. Either that, or the clipping of the opaque background-images of selected tab doesn't actually cover the whole tab and thus the box-shadow is again seen through one of the non-opaque background-images.

[–] hansman@fedia.io 1 points 8 months ago

Thanks mate, great explanation.

[–] ResurgamS13@fedia.io 1 points 8 months ago* (last edited 8 months ago) (1 children)

@hansman: Thanks for replies and CSS suggestions... will try those later today. :)

As in my reply to MrOtherGuy... none of my own CSS in use or even present in the two clean profiles used to create the 2 images... both new 'out-of-the-box profiles' of Firefox 123.0 and LibreWolf 122.0.1-2... with just MrOtherGuy's 'non_floating_sharp_tabs.css' style and NH0jNG's Gradient Blue theme (which I've used for years) added... nothing else.

Which to my logic, if not a code change in Fx123.0... that leaves the only possibility being some conflict, since Fx123.0 was released, with some aspect of the settings within the Gradient Blue theme?

[–] hansman@fedia.io 1 points 8 months ago* (last edited 8 months ago) (1 children)

Well, have you tried the code?

It might interfere with the css style, which is creating its own navbar shadow, but that might be (partially?) overriden by current Fx versions anyways. The issue has been discussed in a couple of other forums, seems like the code for that shadow has changed recently.

Again, maybe give this a shot, which has worked for some other users; to be safe put it at the bottom of your userChrome.css, shouldn't matter though:

#nav-bar:-moz-lwtheme {
   box-shadow: none !important;
}
[–] ResurgamS13@fedia.io 1 points 8 months ago* (last edited 8 months ago) (1 children)

@hansman: Yes... just tested your code posted above ( #nav-bar:-moz-lwtheme { box-shadow: none !important; } ). It works! Hurrahs and BZ! (Bravo Zulu). :D

So the reappeared underline is caused by some Tab Bar coding change in Fx123.0 Re: Active Tab shadow.

Code successfully removes the new 'Active Tab underline effect' in both my own custom CSS profile... AND with the example used in this thread... i.e. a clean profile with just MrOtherGuy's 'non_floating_sharp_tabs.css' style and NH0jNG's Gradient Blue toolbar theme added... see new image of that combination in a Fx123.0 test profile attached below... properly 'connected tabs' re-established. :)

PS. Would be interested to find and read comments where this problem mentioned elsewhere Re: your comment "The issue has been discussed in a couple of other forums, seems like the code for that shadow has changed recently."

Image. Fx123.0 test profile (non_floating_sharp_tabs.css + Gradient Blue toolbar theme) with hansman's fix:

[–] hansman@fedia.io 1 points 8 months ago

Glad it's working!

As for discussions on it, I've linked to a couple in my first reply, and there's one in a German forum.

Credit for the solution goes to this poster; the related Fx code might be this one.

[–] ResurgamS13@fedia.io 1 points 8 months ago* (last edited 8 months ago) (2 children)

@MrOtherGuy: Thanks for your reply and testing. :)

Don't understand why the underline 'artifact' won't reproduce for you? The 2 images attached are without any of my own CSS and are just "clean test profiles on Win10 with only your latest 'non_floating_sharp_tabs.css' style and the Gradient Blue theme added."

Thus, unless the 'underline' in Fx123.0 is somehow being created by some conflict with the setting(s) within the Gradient Blue theme itself... I can't see what could be causing the problem?

Will test again with new clean profiles just to be sure I can reproduce too! And then try your 'non_floating_sharp_tabs.css' style with Firefox's default themes and a random selection of other AMO toolbar themes.

(FWIW - The Gradient Blue toolbar theme is one of the older ones and IIRC from looking at its coding a couple of years ago it is written in a slightly different format to the way a toolbar theme would be created using the latest version of Firefox Color.)

[–] MrOtherGuy@lemmy.world 1 points 8 months ago

Yeah, I created a new profile in Firefox 123 and installed the Gradient Blue theme you linked. I then made Firefox to load userChrome.css by flipping the pref created userChrome.css with contents of non_floating_sharp_tabs.css and this is the result:

So, I would be interested to know what makes a difference here where on my system no line is seen below selected tab (as intended) but on your system apparently there is a line.

[–] MrOtherGuy@lemmy.world 1 points 8 months ago (1 children)

I just noticed that the link you have for non_floating_sharp_tabs.css points to a for 4months old revision of that file, not the latest.

[–] ResurgamS13@fedia.io 1 points 8 months ago* (last edited 8 months ago)

Apologies... thought I'd linked and used latest version of your non_floating_sharp_tabs.css ... seems not... my bad... not sure how that happened... sigh! :(

Notes on underlying cause/code changes. The only change made to the non_floating_sharp_tabs.css style between the 'wrong/out-of-date' 25Oct23 version incorrectly used and linked (above) and the current version is this Commit on 24Jan24: https://github.com/MrOtherGuy/firefox-csshacks/commit/a2b52b6da07f009e872aee124adf932a88c8f483.

This resulted from 'Issue #335 - non_floating_sharp_tabs line when unfocused' posted by corobin on 24Jan24... which links to 'Remove opacity changes from titlebar - fixes #331' which explains the underlying cause is the code change in Bug 1870803.

[–] hansman@fedia.io 1 points 8 months ago

It might be related to this and/or this issue.

You could try these codes and see if it helps.

#nav-bar:-moz-lwtheme {
   box-shadow: none !important;
}

:root[tabsintitlebar] #titlebar:-moz-window-inactive {
    opacity: 1 !important;
}