Flyingfox broken in Firefox 89 #60

FuLygon · 2021-03-28T11:06:58Z

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 · 2021-04-10T12:21:12Z

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 · 2021-04-10T13:21:21Z

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 · 2021-04-10T14:14:54Z

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 · 2021-04-10T15:35:00Z

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 · 2021-04-10T16:20:10Z

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 · 2021-04-10T16:28:55Z

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 · 2021-04-10T16:33:55Z

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

akshat46 · 2021-04-13T04:12:01Z

jotopo · 2021-04-26T10:36:34Z

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 · 2021-06-03T18:22:10Z

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

puyoxyz · 2021-06-04T05:46:59Z

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 · 2021-06-04T05:56:19Z

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 · 2021-06-05T22:19:54Z

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 · 2021-06-20T01:19:47Z

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

gibsonjareds · 2021-07-05T14:23:28Z

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 · 2021-08-11T06:08:00Z

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 · 2021-08-15T20:10:13Z

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

proudmuslim-dev · 2021-08-24T20:25:38Z

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

ribosomerocker · 2021-08-31T04:53:59Z

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 · 2021-10-07T00:48:52Z

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

nodgear · 2021-10-21T23:28:33Z

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.

fix background color according to akshat46#60 (comment)

MariusAlbrecht · 2022-01-27T23:03:33Z

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

akshat46 added firefox css Related to firefox CSS bug Something isn't working labels Mar 28, 2021

akshat46 mentioned this issue Apr 13, 2021

Aesthetic Problems #65

Closed

akshat46 pinned this issue Apr 13, 2021

harryg02 added a commit to harryg02/FlyingFox that referenced this issue Nov 13, 2021

Update variables.css

5ee7102

fix background color according to akshat46#60 (comment)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Flyingfox broken in Firefox 89 #60

Flyingfox broken in Firefox 89 #60

FuLygon commented Mar 28, 2021 •

edited

tungmin97 commented Apr 10, 2021

FuLygon commented Apr 10, 2021 •

edited

tungmin97 commented Apr 10, 2021

FuLygon commented Apr 10, 2021

tungmin97 commented Apr 10, 2021

FuLygon commented Apr 10, 2021

tungmin97 commented Apr 10, 2021

akshat46 commented Apr 13, 2021

jotopo commented Apr 26, 2021 •

edited

sheeepdev commented Jun 3, 2021

puyoxyz commented Jun 4, 2021 •

edited

puyoxyz commented Jun 4, 2021 •

edited

Paralusion commented Jun 5, 2021

axonasif commented Jun 20, 2021

gibsonjareds commented Jul 5, 2021

yangchuansheng commented Aug 11, 2021

hrqmonteiro commented Aug 15, 2021 •

edited

proudmuslim-dev commented Aug 24, 2021 •

edited

ribosomerocker commented Aug 31, 2021

hrqmonteiro commented Oct 7, 2021

nodgear commented Oct 21, 2021

MariusAlbrecht commented Jan 27, 2022

Flyingfox broken in Firefox 89 #60

Flyingfox broken in Firefox 89 #60

Comments

FuLygon commented Mar 28, 2021 • edited

tungmin97 commented Apr 10, 2021

FuLygon commented Apr 10, 2021 • edited

tungmin97 commented Apr 10, 2021

FuLygon commented Apr 10, 2021

tungmin97 commented Apr 10, 2021

FuLygon commented Apr 10, 2021

tungmin97 commented Apr 10, 2021

akshat46 commented Apr 13, 2021

jotopo commented Apr 26, 2021 • edited

sheeepdev commented Jun 3, 2021

puyoxyz commented Jun 4, 2021 • edited

puyoxyz commented Jun 4, 2021 • edited

Paralusion commented Jun 5, 2021

axonasif commented Jun 20, 2021

gibsonjareds commented Jul 5, 2021

yangchuansheng commented Aug 11, 2021

hrqmonteiro commented Aug 15, 2021 • edited

proudmuslim-dev commented Aug 24, 2021 • edited

ribosomerocker commented Aug 31, 2021

hrqmonteiro commented Oct 7, 2021

nodgear commented Oct 21, 2021

MariusAlbrecht commented Jan 27, 2022

FuLygon commented Mar 28, 2021 •

edited

FuLygon commented Apr 10, 2021 •

edited

jotopo commented Apr 26, 2021 •

edited

puyoxyz commented Jun 4, 2021 •

edited

puyoxyz commented Jun 4, 2021 •

edited

hrqmonteiro commented Aug 15, 2021 •

edited

proudmuslim-dev commented Aug 24, 2021 •

edited