Materia-theme: Overlaid headerbar in titlebar is transparent

[johnfactotum]

Questioner Info

• Materia version: 20200320-1
• GTK3 version: 1:3.24.18-1, but gtk-launch says 3.24.17
• Distribution (and version): Arch Linux
• Desktop environment (and version): GNOME
• Related application (and version): Foliate 2.1.1

Description

Foliate implements an auto-hiding headerbar like this:

GtkFrame <-- this is the title widget, with class ".titlebar"
└── GtkEventBox
    └── GtkOverlay
        ├── GtkLabel <-- the label shown when the headerbar is hidden
        └── GtkRevealer
            └── GtkHeaderBar <-- This is the actual headerbar

This works fine for Adwaita and, for example, Arc, but when using Materia, the headerbar is transparent, which leads to the icons being invisible on a white background (see: https://github.com/johnfactotum/foliate/issues/316).

Adding .titlebar to the headerbar doesn't help, because .titlebar .titlebar is also transparent. And removing the parent .titlebar leads to sharp window corners.

My question is:

• Is there a way for the application to show a non-transparent overlaid headerbar?
• Or should it be fixed on the theme side? If so, would it require any changes on the application's part?
• Or should one simply disable auto-hiding headerbar when using Materia?

[nana-4]

Thanks for filing the issue, @johnfactotum :)

In Materia, headerbar is used for sizing, and .titlebar is used for other stylistic adjustments, e.g. coloring and drop-shadow. This idea has been taken from https://wiki.gnome.org/Hackfests/GTK2019/Agenda. Quote:

Adwaita: move the header bar background from the headerbar node to the .titlebar class.

Please note that this idea is not yet implemented in Adwaita, but I early adopted it in Materia. This change allowed our SCSS code to be simplified and allowed our headerbar drop-shadows to be rendered properly in some apps.

I didn't know this causes the problem in Foliate. I honestly still don't know the best answer/workaround to this. I need further investigation. But I believe the last question is not the way we should go :) Maybe I should revert that change, or remove the .titlebar .titlebar styling in the theme.

[johnfactotum]

Thanks for the info! For now I think I've found a way: simply add .titlebar to the headerbar, remove .titlebar from the titlebar widget, then add back border-radius with values from gtk_style_context_get_property (). See https://github.com/johnfactotum/foliate/commit/0edfa0269c4b3be4744c2aeb930630f59cd3390c.

This fixes the issue, not only with Materia, but also with elementaryOS's theme, and possibly others. Not sure if there's any drawback to this approach, but it seems to be working pretty well.

[nana-4]

Wow, that's great! Thanks for the fix!

I'm not sure if our that styling is causing problems like this in other applications, but this issue seems to have been solved on the Foliate side, so I'm going to close this for now.

Feel free to reopen this if you find any issues :)