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

subterfugue · 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

FunkyWonder · 2024-06-04T20:23:59Z

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.

@akshat46 I wouldn't mind trying to debug all the code and making it work again. I was just wondering if you are still active to accept pull requests and maybe answer some questions about the code.

akshat46 · 2024-06-08T02:57:56Z

Sorry for being MIA everyone. My life looks very different than when I started this project and I am also just kinda over it since I achieved most things I wanted to with this right around news of 89 and its UI overhaul came out. Maintenance of this project requires motivation that I unfortunately do not have. I will be archiving this repository,

Looks like this fork is the most up-to-date and has fixed a lot of the issues mentioned here.
https://github.com/Astromations/FlyingFox

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

Loading

tungmin97 commented Apr 10, 2021

FuLygon commented Apr 10, 2021 •

edited

Loading

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

Loading

sheeepdev commented Jun 3, 2021

puyoxyz commented Jun 4, 2021 •

edited

Loading

puyoxyz commented Jun 4, 2021 •

edited

Loading

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

Loading

proudmuslim-dev commented Aug 24, 2021 •

edited

Loading

subterfugue commented Aug 31, 2021

hrqmonteiro commented Oct 7, 2021

nodgear commented Oct 21, 2021

MariusAlbrecht commented Jan 27, 2022

FunkyWonder commented Jun 4, 2024

akshat46 commented Jun 8, 2024

Flyingfox broken in Firefox 89 #60

Flyingfox broken in Firefox 89 #60

Comments

FuLygon commented Mar 28, 2021 • edited Loading

tungmin97 commented Apr 10, 2021

FuLygon commented Apr 10, 2021 • edited Loading

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 Loading

sheeepdev commented Jun 3, 2021

puyoxyz commented Jun 4, 2021 • edited Loading

puyoxyz commented Jun 4, 2021 • edited Loading

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 Loading

proudmuslim-dev commented Aug 24, 2021 • edited Loading

subterfugue commented Aug 31, 2021

hrqmonteiro commented Oct 7, 2021

nodgear commented Oct 21, 2021

MariusAlbrecht commented Jan 27, 2022

FunkyWonder commented Jun 4, 2024

akshat46 commented Jun 8, 2024

FuLygon commented Mar 28, 2021 •

edited

Loading

FuLygon commented Apr 10, 2021 •

edited

Loading

jotopo commented Apr 26, 2021 •

edited

Loading

puyoxyz commented Jun 4, 2021 •

edited

Loading

puyoxyz commented Jun 4, 2021 •

edited

Loading

hrqmonteiro commented Aug 15, 2021 •

edited

Loading

proudmuslim-dev commented Aug 24, 2021 •

edited

Loading