No overflow menu, greyed buttons in tab bar (FF 60/61)

[ashwinvis]

I have more extensions installed, which I usually keeo in the overflow menu.

Also the new-tab and multi-container tab buttons are greyed out, barely visible in the tab bar.

[rafaelmardojai]

I couldn't reproduce this. What "modules" of the theme you have enabled? Do you have latest master theme version?

[ashwinvis]

Yes, I am using the latest master version.

I didn't have this problem with Firefox 59. Now that I updated to the stable version Firefox 60.0, I get the same problem.

I have activated the following in userChrome.css.

@import "ui/gnome-3.26-light.css"; /**/
...
@import "ui/experimental-ff-60-csd.css"; /**/

EDIT: Maybe you should also know that I am using gnome-3.28.2

[ashwinvis]

Update: I managed to get the overflow button by uncommenting @import "ui/csd-3-buttons.css";, but the tab bar buttons are still grey.

[ashwinvis]

Update2: The tab bar buttons were greyed out because I was using the Default theme. Using Light theme in Firefox fixes this.

May I suggest a bit more explicit instructions, esp. in step 6 of your README?

[lunakurame]

The instructions are correct (maybe I should rewrite step 6 tho if it's confusing). You shouldn't need to enable the light theme in Firefox (I'm assuming you mean the themes available in the burger menu → Customize), in fact we don't support any of those themes but "Default", so you can notice the tab bar's background turns whiter when you enable the light theme and completely black when you enable the dark theme, which is wrong. So this is clearly a bug, but I also can't reproduce it.

You might be one of those people who get a rare icon filter bug, in the theme variant files (ui/gnome-[version]-[light/dark].css), we've got a variable to invert icon colors (--gnome-icons-hack-filter and a few others for the tab close button), but it seems to work wrong on totally random computers, I haven't figured that out yet since it always works fine for me. If you know CSS, you can try playing with that variable, it's normally set to invert(30%), you may try setting it to none instead and see if it works (when using the Default Firefox theme, not the Light one). But if it really is that bug, then other icons also should be affected while they aren't... May I know what Linux distro and version are you using, so I can try running Firefox in the same environment?

About the overflow menu - it also works fine for me, but I noticed your screenshot looks pretty HiDPI. Are you using GNOME's window scaling? What's the number you are scaling the windows by? Does resizing the window / maximizing and restoring help?

I tested it on stock FF 60.0, 61.0a1-20180403220040, 61.0b3 @ GNOME 3.18, I don't have GNOME 3.28.2 lying around, @rafaelmardojai what GNOME version do you use?

[lunakurame]

Oh, another thing. I see you posted this:

@import "ui/gnome-3.26-light.css"; /**/
...
@import "ui/experimental-ff-60-csd.css"; /**/

I don't know what's in the ... part, but if there are any CSS selectors or @namespace, it won't work. All @imports must be at the top of the file, before any other CSS code starts. So in case you have something else there, this line probably doesn't load:

@import "ui/experimental-ff-60-csd.css"; /**/

Also you are missing the part where you pick how many window buttons you have. Unfortunately we can't detect it, so you have to also @import one of these if you are using client-side decorations (and you are):

/* Window controls: just 1 button */
/*@import "ui/csd-1-button.css"; /**/
/* Window controls: 2 buttons */
/*@import "ui/csd-2-buttons.css"; /**/
/* Window controls: 3 buttons */
/*@import "ui/csd-3-buttons.css"; /**/

You have 3 window buttons, so that would be the last line. Add it to your config file and make sure there is no other CSS code before all the @imports end. I should probably make that more clear in README.

[rafaelmardojai]

@kurogetsusai, currently i'm running GNOME 3.28.1 on Fedora 28. (FF 62 and no issues).

@ashwinvis for this theme work properly, Firefox should have default theme and normal density.

[ashwinvis]

@kurogetsusai

The instructions are correct (maybe I should rewrite step 6 tho if it's confusing). You shouldn't need to enable the light theme in Firefox (I'm assuming you mean the themes available in the burger menu → Customize), in fact we don't support any of those themes but "Default", so you can notice the tab bar's background turns whiter when you enable the light theme and completely black when you enable the dark theme, which is wrong. So this is clearly a bug, but I also can't reproduce it.

The screenshot I shown was with the "Default" theme. It is strange because it looks fine now with the "Light" theme. But since I raised the issue, I will investigate a bit more with the "Default" theme.

You might be one of those people who get a rare icon filter bug, in the theme variant files (ui/gnome-[version]-[light/dark].css), we've got a variable to invert icon colors (--gnome-icons-hack-filter and a few others for the tab close button), but it seems to work wrong on totally random computers, I haven't figured that out yet since it always works fine for me. If you know CSS, you can try playing with that variable, it's normally set to invert(30%), you may try setting it to none instead and see if it works (when using the Default Firefox theme, not the Light one). But if it really is that bug, then other icons also should be affected while they aren't... May I know what Linux distro and version are you using, so I can try running Firefox in the same environment?

I now some beginner level CSS, I can try and see if "inverting" helps. About the distro - it is ArchLinux - up to date and using Adapta shell theme, if that is relevant. It could be a bit hard to reproduce, as there are no out-of-the-box official Arch installers.

About the overflow menu - it also works fine for me, but I noticed your screenshot looks pretty HiDPI. Are you using GNOME's window scaling? What's the number you are scaling the windows by? Does resizing the window / maximizing and restoring help?

HIDPI, yes with 2x scaling. But anyways, the overflow menu was not visible because, I did not activate @import "ui/csd-3-buttons.css";. That is fine now.

I don't know what's in the ... part

Just CSS comments.

Also you are missing the part where you pick how many window buttons you have. Unfortunately we can't detect it, so you have to also @import one of these if you are using client-side decorations (and you are):

That was it :+1: Thanks though.

You have 3 window buttons, so that would be the last line. Add it to your config file and make sure there is no other CSS code before all the @imports end. I should probably make that more clear in README.

That will be helpful, indeed.

[ashwinvis]

@ashwinvis for this theme work properly, Firefox should have default theme and normal density.

@rafaelmardojai Yes, but sadly the default theme doesn't work out of the box for me. I will try to check if inverting would help. This is how it looks now with the light theme:

[ashwinvis]

OK, turns out it was because I used Adapta as the GNOME application theme, and not Adwaita. I don't know whether this theme intends to be universal (to be unaffected by OS) or just limited to Adwaita and similar themes. Feel free to close the issue at your discretion and thank you for your time. :100: Great work by the way.

[rafaelmardojai]

This theme is primarily focused to Adwaita & Adwaita-dark. But i don't discard that we can add support to other GTK themes in a future.

But in general third party GTK themes are a bad idea.

[lunakurame]

This FF theme actually loads some system icons and Firefox might use some too, so if Adapta overrides them with different ones, it might mess up the colors I guess. We don't really support themes other than Adwaita, but they should actually work nicely and I think it's possible to add support for other popular themes. All the important stuff is extracted to CSS variables, so we use the same code while also supporting 4 different theme variants. Would be nice to add more, including non-Adwaita themes, but someone would have to write them so contributors are always welcome. ;p

Maybe we can at least load our own icons so they look good even on other themes, but I'm not sure about that and I don't know if we can even use Adwaita's icons here (license).

Anyway, I assume you've found a good enough workaround since the theme looks okay for you with the Light theme enabled in Firefox' customization, I'll think about those icons and I'll update README to make it easier to understand (probably tomorrow). Thanks for reporting this issue and your help with finding out why it didn't work! :D