Tabs below navigation toolbar are broken in Firefox 89

[buh6173]

Upon updating to Firefox 89, I found to my horror that the custom CSS provided here for tabs on bottom has completely broken; now the tabs all appear at the very bottom of the screen, and become invisible. I've gotten things to work by disabling the css, but this is only a temporary solution.

Attached is how it looks with the tabs CSS disable; will need to reenable it to show how it's being buggy.

[buh6173]

If I comment out @import "./css/tabs/tabs_below_navigation_toolbar_fx72.css"; in userChrome.css, I get the first image (tabs way up top, ugly but functional). If I leave fx72 uncommented, I get this. Notice at the very bottom you'll see a single tab for what I'm currently on.

[Aris-t2]

You have to use the latest version of this projects files and of course the correct version of that feature:

tabs_below_navigation_toolbar_fx89.css

[buh6173]

I downloaded the latest version and attempted to implement my previous settings. However, while some updates went through, others did not.

Attached my userChrome (as txt instead of CSS since github won't accept CSS).

userChrome.txt

[Aris-t2]

I saw many of additional */ inside your code, you do not need those. Also, your modified file did not work for meat at all.

Try a clean setup of this project full package and only enable/disable options by adding/removing /* before @import....

[buh6173]

The issue has been mostly fixed; however, the tab design isn't how it was before. Text shouldn't be bolded, italicized or colored.

/* COLOR VARIABLES FOR DEFAULT BROWSER THEME ONLY - MAIN UI - [only use one at a time] **/ / [!] set own colors for tabs & toolbars inside 'color_variables.css' or use available presets / /* [!] 'about:config > ui.systemUsesDarkTheme > 0' might be required in some cases **/ /* [!] enabled 'menubar_color.css' and 'statusbar_color.css' might be required in some cases **/ @import "./config/color_variables.css"; // / <- default 'grey' colors / /* @import "./config/color_variables_aero.css"; // / <- 'AeroBlue' colors (Win 7 Aero) / /* @import "./config/color_variables_classic-grey.css"; /*/ / <- 'classic grey' colors (Win Classic) / / @import "./config/color_variables_fx3.css"; // / <- 'Firefox 3-like' blueish colors / /* @import "./config/color_variables_transparent.css"; // / <- (semi-)'transparent' colors / /* @import "./config/color_variables_aeroglass.css"; /*/ / <- 'AeroGlass' colors / Win10+Glass8 fix can be found in 'toolbars' area / / @import "./config/color_variables_deved.css"; // / <- based on 'Developer Edition' colors / /* @import "./config/color_variables_noia4_grey.css"; // / <- based on 'Noia 4 themes' grey colors / /* @import "./config/color_variables_noia4_lightgrey.css"; /*/ / <- based on 'Noia 4 themes' lightgrey colors / / @import "./config/color_variables_noia4_dark.css"; // / <- based on 'Noia 4 themes' dark colors /

This color variables code is what I'm currently using, and it's the same as what I was using prior, so I don't understand what's causing the appearance change.

[buh6173]

userChrome (old).txt userChrome (new).txt

I've attached txt versions of my old, previously working userChrome and what I currently am running on 89; can you help me get it looking as close to my previous version as possible?

[Aris-t2]

"Classic squared tabs" are mostly the same. "Default tabs" are what they are. This project does not restore default pre-Proton tabs offered by Firefox 57+.

custom_tab_text_settings.css can be modified. There is no "how it should be", only an example. ;-)

[buh6173]

Can you specify what settings I would need to alter to get it looking how it did pre-89?

[Aris-t2]

userChrome (new).txt >>>>

[buh6173]

That's closer, but the active tab shouldn't be blue.

[Aris-t2]

Disable custom_tab_text_settings.css file in userChrome.css.

[buh6173]

Okay cool, that fixed the color issue.

If you can examine my older setup, you should see that my tabs weren't as dark as they are now; is there something else I need to toggle? Also the top right buttons currently have an emboss effect when I hover over them, which shouldn't be happening. Is it also possible to remove refresh/bookmark from the location bar?

[shiftF12ATwebDOTde]

Hello

sorry for also writing here with a similar, but slightly different problem. could you help me out please to get my old design back again? of course i was shocked when again after a long a joyful time the firefox designers suddenly decided over "my" head to change MY design which i do not want to be changed and which with your help and several hours of work worked so nicely over a long time.

i would like to add my userchrome.css here

i would like to have that design again. classic design, that is: menu url line multirow bookmarks tabs

window

and of course i dont want any of the new design changes. or the minimum necessary no floating tabs on the very bottom of the page etc

here is my user chrome.css

userChrome - copy.txt

[Aris-t2]

@buh6173

You can change tab colors inside color_variables.css, if you like.

@shiftF12ATwebDOTde

Default setup of the full 3.2.7 release > only enable these two:

• tabs_below_navigation_toolbar_fx65_v2.css
• bookmarks_toolbar_multiple_lines_fx74.css

[shiftF12ATwebDOTde]

Hello Aris many thanks for your fast answer i have no idea how to do :) would it be possible to change the file i uploaded and upload changed again? so i could download?

[Aris-t2]

Sorry, I can not check custom CSS files against this projects code. It might or might not work, but you are save, if you follow the instructions on the main page to setup this projects files.

You can also add all of your code to a my_userChrome.css file, which gets imported automatically.

[buh6173]

@Aris-t2 , have you tried loading my original css into pre-89? The color_variables.css was the same as it is now, yet the colors appeared different.

[shiftF12ATwebDOTde]

Default setup of the full 3.2.7 release > only enable these two:

tabs_below_navigation_toolbar_fx65_v2.css
bookmarks_toolbar_multiple_lines_fx74.css

where do i find these files? can you send me links? then i download and paste them into a new userchrome.css and test it

many thanks looking forward to get this thing fixed

[shiftF12ATwebDOTde]

good morning i worked myself through the userchrome css you provide https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css

i found the two lines

tabs_below_navigation_toolbar_fx65_v2.css bookmarks_toolbar_multiple_lines_fx74.css

i enabled these two and only these two

the tabs went up again, so far so good the tabs are now not below bookmarks but above url line

i would love to have them below url line url line= navigation toolbar?

then perhaps do i have to change some settings in about:config?

thx for help

[shiftF12ATwebDOTde]

also the multirow toolbar does not work when enabled.

just to make sure...: i have put the text of https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css

into my userChrome.css

in the appdata....\firefox profiles....\userChrome\ location

i delete the */ where i want to enable a line

i leave all the rest

i restart firefox in verison 89 the tabs are above url line no multirow bookmarks no tabs below bookmarks

[shiftF12ATwebDOTde]

thanks for your good work i worked again all through for a "non-informatic" guy its hard, but you have explained all very well

everyone can find it with a little time

it all works

what would be good, for dummies... would be a hint that you dont need only the userchrom.css file but the complete file / folder structure (which you offer for download)

[buh6173]

Can you please create your own issue? I created this request for help on my css file and you've basically hijacked my ticket.

[buh6173]

@Aris-t2 , any help here?

[Aris-t2]

@buh6173 Do you still have you old custom_tab_color_settings.css and custom_tab_text_settings.css files?

There is also an error in your old file userChrome (old).txt, line 465, the */ has to be removed.

This is what I get in Fx88 using your old file:

And this I get after using your userChrome (new).txt file in Fx89 and also enabling custom_tab_color_settings.css like in your old setup.

[buh6173]

So I think in my userchrome file I might've accidentally automatically tried to comment/uncomment some things, which resulted in the blue text. While the tabs shouldn't be orange, that fade is correct.

I'm also having this issue when I attempt to drag tabs (the other tabs suddenly drop down a few pixels and hide beneath an invisible line), which is incredibly distracting.

I have my old settings for those; attaching them. Try plugging them in, that might fix it. I'd roll back and do it myself, but apparently Firefox flips if you try to run pre-89 with the same profile, and all my stuff got bugged up. Thankfully I saved a backup, but it's definitely a pain. custom_tab_color_settings (old).txt custom_tab_text_settings (old).txt

[Aris-t2]

Default config + tabs not on top: I see many differences between both versions, but tab colors are the same.

[Fx88] [Fx89]

Your custom_tab_text_settings (old).txt works as expected. You disabled most code in it and that is fine. There is a white tab text shadow visible on non-active tabs with custom_tab_text_settings (old).txt.

[Fx88 + custom_tab_text_settings (old).txt] [Fx89 + custom_tab_text_settings (old).txt]

The issue with tab dragging was fixed in 3.2.4 or 3.2.5 unless you have some non-default buttons on tabs toolbar. As Speravir found out here, there are buttons, that might cause this. https://github.com/Aris-t2/CustomCSSforFx/issues/368#issuecomment-863628697 https://github.com/Aris-t2/CustomCSSforFx/issues/368#issuecomment-864324801

You can not use you current browser profile with an older version of the browser. This change happened somewhere in Firefox 60s.

[buh6173]

I figured out the dragging issue. There was a "new tab" button at the rightmost that I never even used, removing that took care of the issue.

I'm a little confused regarding the colors; what do I need to change to get it back to how I had it before?

Also, can you figure out what's going on here? These buttons shouldn't have this ugly emboss when hovering over them.

[Aris-t2]

I'm a little confused regarding the colors; what do I need to change to get it back to how I had it before?

I can't tell you that. I have no idea.

Also, can you figure out what's going on here? These buttons shouldn't have this ugly emboss when hovering over them.

You enabled buttons_on_navbar_windows_classic_theme_appearance.css. Disable it to remove the appearance shown on your image.

[Aris-t2]

The initial issue is fixed now, right?

[buh6173]

The remaining issue is the color issue, which still needs to be resolved.

[Aris-t2]

Sorry, I don't know how to fix the mentioned color issue.