After an evaluation, GNOME has moved from Bugzilla to GitLab. Learn more about GitLab.
No new issues can be reported in GNOME Bugzilla anymore.
To report an issue in a GNOME project, go to GNOME GitLab.
Do not go to GNOME Gitlab for: Bluefish, Doxygen, GnuCash, GStreamer, java-gnome, LDTP, NetworkManager, Tomboy.
Bug 731463 - Styling of last column header does not apply to treeview-like custom widgets
Styling of last column header does not apply to treeview-like custom widgets
Status: RESOLVED FIXED
Product: gtk+
Classification: Platform
Component: Themes
3.13.x
Other Linux
: Normal normal
: ---
Assigned To: gtk-bugs
gtk-bugs
Depends on:
Blocks: 709619
 
 
Reported: 2014-06-10 15:28 UTC by Bertrand Lorentz
Modified: 2014-07-01 13:47 UTC
See Also:
GNOME target: ---
GNOME version: ---


Attachments
Screenshot of ListView widget with right border on last column header (44.14 KB, image/png)
2014-06-10 15:28 UTC, Bertrand Lorentz
Details
Screenshot of Evolution e-mail list header (23.57 KB, image/png)
2014-06-10 15:31 UTC, Bertrand Lorentz
Details

Description Bertrand Lorentz 2014-06-10 15:28:37 UTC
Created attachment 278209 [details]
Screenshot of ListView widget with right border on last column header

Banshee use a custom widget, named ListView, to display the track list. It is completely drawn with Cairo, and is supposed to look like a GtkTreeView.

After it being ported to GTK+ 3, I've been working on making it use the GtkStyleContext API. I've noticed that, despite my best efforts, the styling defined in Adwaita does not apply for the last column header. You can see this in the attached screenshot, which shows a right border on the last column header, circled in red. (4 pixel border added around the ListView to make that border more visible.

The C# code used to draw the last column header is equivalent to the following:
StyleContext.AddRegion ("column-header", RegionFlags.Last);
StyleContext.AddClass ("button");
StyleContext.RenderBackground (...);
StyleContext.RenderFrame (...);

The CSS for the last column header is at:
https://git.gnome.org/browse/gnome-themes-standard/tree/themes/Adwaita/gtk-3.0/gtk-widgets.css#n4254

The relevant part is :

column-header.button:last-child,
column-header:last-child .button,
[...] {
    border-right-width: 0;
}

The 2nd selector "column-header:last-child .button" applies for the regular GtkTreeView: a button widget inside a column-header region.

I guess the first selector "column-header.button:last-child" is there for custom  widgets which do not use a button widget, but it does not work.

After playing around with custom CSS, I found that the following selector works: "column-header:last-child.button"

So Adwaita has <element>.<class>:<pseudo-class>
but GTK+ matches on <element>:<pseudo-class>.<class>

I don't know which of the 2 syntax is correct CSS (maybe both ?), so feel free to re-assign this to GTK+ if needed.

This issue is also visible in Evolution, which also uses a custom treeview-like widget. I'll attach a screenshot of this.
Comment 1 Bertrand Lorentz 2014-06-10 15:31:45 UTC
Created attachment 278210 [details]
Screenshot of Evolution e-mail list header

The screenshot show the header of the ETable custom widget.

The right border in the last column header is visible, circled in red.