Flyingfox broken in Firefox 89

[FuLygon]

Describe the bug Look like new design update in Firefox 89 broke Flyingfox's color, windows control and extension icon

Screenshots

Firefox Version: Nightly 89.0a1

[tungmin97]

Everything looks fine on my end, you do have to edit this line to blend the window controls in tho

toolbox#navigator-toolbox { border-bottom: solid var(--dividers) var(--sidebar-shadow-color) !important; background-color: var(--toolbar-bgcolor) !important; }

[FuLygon]

Everything looks fine on my end, you do have to edit this line to blend the window controls in tho

toolbox#navigator-toolbox { border-bottom: solid var(--dividers) var(--sidebar-shadow-color) !important; background-color: var(--toolbar-bgcolor) !important; }

will try that, but from what i see from your screenshot, isn't the color between the url bar and outside it not sync up ? i use default flyingfox color which is blue but this only applied to url bar, color outside the url bar is gray and context menu also gray, also have you check extension like uBO, iirc the extension icon color is also broken, and the number of ads uBO blocked is in darker text color which really hard to see as well, animation and other thing work normally tho, just the color is bit out of sync

[tungmin97]

It actually synced, context menu and all that, but I don't use tree tab and hide pretty much everything else. For the addon badge change the color value in "extension-icon.css"

.webextension-browser-action > .toolbarbutton-badge-stack > .toolbarbutton-badge { background-color: var(--lwt-toolbarbutton-icon-fill-attention) !important; color: var(--light-base) !important; }

[FuLygon]

It actually synced, context menu and all that, but I don't use tree tab and hide pretty much everything else. For the addon badge change the color value in "extension-icon.css"

.webextension-browser-action > .toolbarbutton-badge-stack > .toolbarbutton-badge { background-color: var(--lwt-toolbarbutton-icon-fill-attention) !important; color: var(--light-base) !important; }

it not sync up for me tho i will mark it in the attached image, one is blue and one is grey

This should be clear when entering incognito mode tho, i will attached another picture below, hope i can explain with this picture since my english might be hard to read lol

[tungmin97]

Iirc it has been that way for quite a while now lol. Anyway, changing that shouldn't be too hard, navbar.css is the place, try editing toolbox#navigator-toolbox and #nav-bar background-color value.

[FuLygon]

Iirc it has been that way for quite a while now lol. Anyway, changing that shouldn't be too hard, navbar.css is the place, try editing toolbox#navigator-toolbox and #nav-bar background-color value.

i noticed it since i updated to firefox 89 and it pretty annoying lol since flyingfox is normal for me on my other linux device with firefox stable

[tungmin97]

That explains things, since the stable release still hasn't caught up on the proton stuff.

[akshat46]

Definitely broken in 89. I am working on it but its going a little slow since I am busy with some other stuff. Here's a tentative list of things that should be fixed:

• [x] ~~window-control background~~
• [ ] urlbar/urlbar-expanded
  • [ ] icon colors
  • [ ] url hover color
• [ ] popups
  • [ ] background
  • [ ] chevron icon
• [ ] Tabline
  • [ ] background
  • [ ] close icon color, shape
  • [ ] container tab's line
• [ ] navbar
  • [ ] background
  • [ ] icon sizes

Feel free to mention any missing stuff in this thread.

[jotopo]

It actually synced, context menu and all that, but I don't use tree tab and hide pretty much everything else. For the addon badge change the color value in "extension-icon.css" .webextension-browser-action > .toolbarbutton-badge-stack > .toolbarbutton-badge { background-color: var(--lwt-toolbarbutton-icon-fill-attention) !important; color: var(--light-base) !important; } [...]

it not sync up for me tho i will mark it in the attached image, one is blue and one is grey

This should be clear when entering incognito mode tho, i will attached another picture below, hope i can explain with this picture since my english might be hard to read lol

to fix this, in variables.css change :root[style*="--lwt-accent-color:rgb(12, 12, 13);"] { to :root[style*="--lwt-accent-color:rgb(28, 27, 34);"] {

they changed the accent colour from rgb(12, 12, 13) to rgb(28, 27, 34) :)

[sheeepdev]

I think today the 89.0 update is officialy released on the stable version of firefox.

[puyoxyz]

Hi, got 89 today. The redesign apparently can be disabled with browser.proton.enabled in about:config but it does not completely revert it.

Edit:

• The back button doesn't get highlighted when you hover over it
• The colors of the top bar are wrong (URL bar color is right, the rest are wrong)

[puyoxyz]

I was able to get it back to the previous look (with some issues, but those have to be fixed by flyingfox ofcourse) by doing the following:

• Disabling browser.proton.enabled in about:config
• Making a Firefox Color theme to match my flyingfox colors

If anyone wants a theme that matches the default flyingfox colors, here's the one I made: https://color.firefox.com/?theme=XQAAAAL7AAAAAAAAAABBKYhm849SCia2CaaEGccwS-xMDPr15o6IPrg4NnLy5y5PGDukvAxjnCA7-_EgyoWzQ2_pEbf-IUy1s7GcUi9qyZvRERj_Xm2cmbSAZQNDTfm-h-WX2k-6V2YhxZanQbJgUaup7TYYuleBD7OTBWWUxMOrDdZnYnnhRwXSKzN1RmWrgqblX2t3AFuA_JbcfprOU-H_xCFYAA

You can make your own with your own colors in a few minutes if you customized them

Maybe the flyingfox website could be made to generate a firefox color theme for you with your colors that you have selected for flyingfox if this is really the only way to change the colors (but I doubt it is)

[Paralusion]

I was able to get it back to the previous look (with some issues, but those have to be fixed by flyingfox ofcourse) by doing the following:

* Disabling `browser.proton.enabled` in `about:config`

* Making a Firefox Color theme to match my flyingfox colors

If anyone wants a theme that matches the default flyingfox colors, here's the one I made: https://color.firefox.com/?theme=XQAAAAL7AAAAAAAAAABBKYhm849SCia2CaaEGccwS-xMDPr15o6IPrg4NnLy5y5PGDukvAxjnCA7-_EgyoWzQ2_pEbf-IUy1s7GcUi9qyZvRERj_Xm2cmbSAZQNDTfm-h-WX2k-6V2YhxZanQbJgUaup7TYYuleBD7OTBWWUxMOrDdZnYnnhRwXSKzN1RmWrgqblX2t3AFuA_JbcfprOU-H_xCFYAA

You can make your own with your own colors in a few minutes if you customized them

Maybe the flyingfox website could be made to generate a firefox color theme for you with your colors that you have selected for flyingfox if this is really the only way to change the colors (but I doubt it is)

this works but still gives a few issues like the icons on the nav bar still being black on dark theme

[axonasif]

So I just did a full distro upgrade and seems like I'm in trouble as well :sweat_smile:

[gibsonjareds]

It looks like to me the problem is the selector which finds whether you are operating in lightmode/dark mode.

I use dark mode, so if I change (line 89 in the original) this line in the variables.css file:

:root[style*="--lwt-accent-color:rgb(12,12,13);"]{

to instead just say:

:root{ it works exactly as expected. Also of note, I disabled all the proton stuff in the about:config menu, so that could likely be it. I tried reading the new --lwt-accent-color on my install and putting it in the variables.css but it still didn't pick it up for some reason.

[yangchuansheng]

Everything looks fine on my end, you do have to edit this line to blend the window controls in tho

toolbox#navigator-toolbox { border-bottom: solid var(--dividers) var(--sidebar-shadow-color) !important; background-color: var(--toolbar-bgcolor) !important; }

It does not work in Firefox 91

[hrqmonteiro]

This is literally unusable anymore. Proton f*cked things up apparently. Will this be fixed or should we move on forever?

[proudmuslim-dev]

This is literally unusable anymore. Proton f*cked things up apparently. Will this be fixed or should we move on forever?

This. I haven't updated past Firefox 88 and have just been waiting to see whether this will get fixed now

[subterfugue]

Yeah, I agree. This just doesn't work properly whatsoever on new firefox, and this has been a thing for a few months. Everything from the TST tab to the colors of the theme are all messed up. I hope this gets fixed ASAP.

[hrqmonteiro]

OP wont even try to fix this? There will be no new commits fixing it? Might as well archive the repo, so.

[nodgear]

OP wont even try to fix this? There will be no new commits fixing it? Might as well archive the repo, so.

Why don't you push a commit fixing it, @hrqmonteiro ? You're not the one who decides if the author should archive it or not, stop being a choosing beggar.

[MariusAlbrecht]

OP wont even try to fix this? There will be no new commits fixing it? Might as well archive the repo, so.

why so rude? As someone else said either do a pr with a fix yourself or respect the author not having the time to keep up with fun-projects