Header bars with separators in them show as light lines for dark variants

[aperezdc]

I've noticed this while using Fractal (a Matrix IM client). Its main window header bar has a GtkStack with two GtkHeaderBar elements and a GtkSeparator in between. The separator shows as a white/light line, which looks jarring in the dark theme variants.

Using the following CSS snippet from the GTK+ inspector seems to do the trick to fix this issue for Fractal:

window.csd stack separator.vertical {
	background-color: #282828;
}

(Probably using window.csd separator in the CSS selector is enough and more general, dunno!)

You can see the white line in the following GIF, and how the CSS snippet being applied from the inspector changes it to a dark line:

Details

• Distribution: Arch Linux (no version, rolling release)
• Desktop environment: GNOME 3.28.1
• Arc version/commit: 20180114-1
• GTK+ 3 version: 3.22.30-1
  • Murrine engine version: 0.98.2-3
  • gnome-themes-standard version: none
• Installation method: package from the “community” repository.

[NicoHood]

I am using the darker theme with global dark theme enabled. In the application "Dino" I have a similar layout, but i dont see this issue. I am also using Arch Linux with gnome. Does your issue also appear with the darker theme and global dark theme enabled?

[aperezdc]

@NicoHood: I have installed Dino (it's a neat application that I didn't know!), disabled my CSS hack in gtk.css, and ran it... but it shows correctly. There might be something that Fractal and Dino are doing differently. Here you have their headerbars running at the same time:

(I took screenshots of both application windows and then stitched them together in GIMP; Fractal's was wider and I left the close button out of the image.)

[NicoHood]

Alright. Could you please prepare a pullup request for the fix. Also make sure that you are using the color variables and no fixed color value ;)

Just to clarify: This only happens with arc, right? Not with other themes, so its no faul of the application you are using?

[NicoHood]

Any chance that you do a pullup request until next sunday? We can include it into the next release then.

[NicoHood]

@jnsh could you please have a look at this? Its the last bug to fix for the next release. Or we just skip it.

[jnsh]

Frankly, I wouldn't like to create a matrix account just that I could test this small issue, that may be already fixed upstream.

@aperezdc Could you confirm whether this issue is still present with latest fractal version? If it's still there, I can have a look.

[aperezdc]

This glitch is still happening in Fractal 3.30.0, let me know if there is something I can check on my side to help solve this.

[NicoHood]

@aperezdc Could you please try our new release from a few days ago? If not, check if your patch stil works and please prepare a PR :)

[aperezdc]

@NicoHood I can confirm that the issue is still happening with the 20181022 release. To be honest, I don't know what the proper fix would be. Looking at the differences between Dino and Fractal using the GTK+ inspector, I can see that Fractal has the following widgets in the header bar:

GtkStack
   GtkHeaderBar
   GtkSeparator
   GtkHeaderBar

while Dino has the following:

GtkPaned
   DinoUiConversationListTitlebar
   DinoUiConversationTitlebar

I have no idea how Dino's theming can be painting a separator when there is none in the widget hierarchy... but that's likely the cause of its separator being correctly dark.

Any suggestions of what to touch in the theme CSS? Or do you think this might be an issue in Fractal after all?

[jnsh]

I investigated the issue with gtk+ inspector and I think this could probably be considered an issue with Fractal.

The GtkSeparator widgets are themed correctly in Arc. I could confirm this myself with gnome-tweaks. However, it seems that Fractal also applies the titlebutton CSS class to the vertical separator in question, and I think that's messing up the background-color.

@aperezdc Would you mind testing my theory, by removing the titlebutton class from the separator in gtk inspector?

To do this, select some object, and from the drop-down menu on top-left, choose "CSS nodes". From there, find the separator widget, double-click the "Style Classes" column, and from the opening popover delete the titlebutton class by clicking the trash icon on the right.

I hope I explained that clearly enough. Here's a screenshot that might help.

If removing the titlebutton class fixes the separator color, I think this should be reported as an upstream issue to Fractal. You could also check if you can reproduce the issue with other themes, most importantly Adwaita and Adwaita-Dark.

I think it should be possible to work around the issue in the gtk theme as well, if upstream fix is out of the question for whatever reason.

[ghost]

@jnsh

I think this should be reported as an upstream issue to Fractal.

Asked on #fractal-gtk:matrix.org and this is what one of the devs said.

[jnsh]

@kakolisgay Thank you for checking with upstream. I'll work on a fix for this..

[jnsh]

This should have been already fixed with 2c45d9e, at least for Fractal 4.0. However, the styling between &:dir(ltr) and &:dir(rtl)selectors didn't get picked up in Fractal for some reason that I couldn't figure out.

The aforementioned fix was somewhat incomplete from the beginning, so I worked out a proper fix, that should be used instead of the previous one: jnsh/arc-theme@9b7e702

Note that I didn't test this with Fractal versions earlier than 4.0 (and there's been some changes to its headerbar's styling since this issue was opened), but I'm pretty sure it should fix headerbar separators in most cases.