Bug 384906 - [CSS] Allow styling of table headers in SWT
Summary: [CSS] Allow styling of table headers in SWT
Status: VERIFIED FIXED
Alias: None
Product: Platform
Classification: Eclipse Project
Component: SWT (show other bugs)
Version: 4.0   Edit
Hardware: PC All
: P3 normal with 2 votes (vote)
Target Milestone: 4.7 M6   Edit
Assignee: Conrad Groth CLA
QA Contact: Niraj Modi CLA
URL:
Whiteboard:
Keywords: api, feep, noteworthy
: 430999 (view as bug list)
Depends on: 63038 513405
Blocks: 481227 497562 509648 510728 514337
  Show dependency tree
 
Reported: 2012-07-12 05:10 EDT by Lars Vogel CLA
Modified: 2017-03-29 12:01 EDT (History)
24 users (show)

See Also:


Attachments
table headings have different colors (86.88 KB, image/png)
2015-04-13 14:53 EDT, Leo Ufimtsev CLA
no flags Details
strange effects while custom header drawing on windows 10 (4.71 KB, image/png)
2016-04-17 05:19 EDT, Conrad Groth CLA
no flags Details
Table headers and lines color can not be changed. (60.51 KB, image/png)
2016-10-01 17:53 EDT, Patrik Suzzi CLA
no flags Details
Effect of non styleable elements in Dark theme. (63.83 KB, image/png)
2016-10-01 17:54 EDT, Patrik Suzzi CLA
no flags Details
Image: testing the proposed change (86.43 KB, image/png)
2016-12-21 07:05 EST, Patrik Suzzi CLA
no flags Details
Win7: Issue_with_TableHeader (38.80 KB, image/png)
2017-01-10 06:26 EST, Niraj Modi CLA
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Lars Vogel CLA 2012-07-12 05:10:32 EDT
SWT table headers should support styling via CSS.

Here is some info about that from the e4 mailing list from Silenio Quarti:

Quote:
-------------
I believe the table header has 'owner draw' support on the platforms we support (win32, cocoa and GTK). SWT would have to expose API for this. I suppose the API would be similar to the  custom draw API for TableItem/TreeItem (i.e. SWT.PaintItem/SWT.EraseItem/SWT.MesuareItem events).  SWT would also have to expose the table header as a control with items: probably Header and HeaderItem. 

Here are links to the related documentation: 

http://msdn.microsoft.com/en-us/library/windows/desktop/bb775300(v=vs.85).aspx 
https://developer.apple.com/library/mac/#documentation/Cocoa/Reference/ApplicationKit/Classes/NSTableHeaderView_Class/Reference/Reference.html 
http://developer.gnome.org/gtk/stable/GtkTreeViewColumn.html 
--------------
Comment 1 Lars Vogel CLA 2014-03-24 07:53:55 EDT
*** Bug 430999 has been marked as a duplicate of this bug. ***
Comment 2 Lars Vogel CLA 2014-07-01 08:47:16 EDT
For reference Fabio posted a snippets how to solve this outside of SWT http://liclipse.blogspot.de/2014/06/liclipse-10-released-julia-now-supported.html

Daniel (Rolka) is that an options for us in case SWT does not support it?
Comment 3 Lars Vogel CLA 2015-04-08 02:49:41 EDT
(In reply to Lars Vogel from comment #2)
> For reference Fabio posted a snippets how to solve this outside of SWT
> http://liclipse.blogspot.de/2014/06/liclipse-10-released-julia-now-supported.
> html

This snippet is not related to this bug, sorry.
Comment 4 Leo Ufimtsev CLA 2015-04-09 14:43:15 EDT
So if I understand correctly, the thought being that we should have a method to change the color of the foreground and background of the header of a table independent of the foreground and background of the body of the table, is this correct?
Comment 5 Lars Vogel CLA 2015-04-09 14:46:04 EDT
(In reply to Leo Ufimtsev from comment #4)
> So if I understand correctly, the thought being that we should have a method
> to change the color of the foreground and background of the header of a
> table independent of the foreground and background of the body of the table,
> is this correct?

+1
Comment 6 Leo Ufimtsev CLA 2015-04-13 14:53:04 EDT
Created attachment 252353 [details]
table headings have different colors

For SWT/GTK:
Table headers are actually nested GtkButtons. Technically speaking, this should be possible in SWT/Gtk as the pre-conditions are met:
 - We have access to GtkButton handles in SWT:TableColumn:buttonHandle
 - Buttons can be styled with css like "* {background:red}"

I've attached a screenshot with multi-colored table headings.

In terms of actual implementation, one could supply an api like:
TableColumn:setColumnColor(..)

This would be specific to a column. 

Or one could do something more global that would iterate over all columns:
Table.java:setAllColumnColors(..)
Comment 7 Lars Vogel CLA 2015-04-13 14:54:20 EDT
(In reply to Leo Ufimtsev from comment #6)
> Created attachment 252353 [details]
> table headings have different colors
> 
> For SWT/GTK:
> Table headers are actually nested GtkButtons. Technically speaking, this
> should be possible in SWT/Gtk as the pre-conditions are met:
>  - We have access to GtkButton handles in SWT:TableColumn:buttonHandle
>  - Buttons can be styled with css like "* {background:red}"
> 
> I've attached a screenshot with multi-colored table headings.
> 
> In terms of actual implementation, one could supply an api like:
> TableColumn:setColumnColor(..)
> 
> This would be specific to a column. 
> 
> Or one could do something more global that would iterate over all columns:
> Table.java:setAllColumnColors(..)

Cool. Can we have that as SWT API?
Comment 8 Eclipse Genie CLA 2016-04-17 05:15:53 EDT
New Gerrit change created: https://git.eclipse.org/r/70822
Comment 9 Conrad Groth CLA 2016-04-17 05:19:43 EDT
Created attachment 261012 [details]
strange effects while custom header drawing on windows 10
Comment 10 Conrad Groth CLA 2016-04-17 05:22:26 EDT
I investigated the table header problem on windows and encountered some strange effects:

The table header is a separate control (see https://msdn.microsoft.com/en-us/library/windows/desktop/bb775239%28v=vs.85%29.aspx ), that supports custom and owner draw. One custom draw message (CDDS_PREPAINT, see https://msdn.microsoft.com/en-us/library/windows/desktop/bb775300%28v=vs.85%29.aspx ) is always sent. Depending on the return value we can get further messages for the different draw stages. All these messages contain a device context (DC) and a rectangle (RECT). If I draw a filled rectangle on that DC with the size given in RECT, I don't see it. I did that in the PREPAINT and in the POSTPAINT stage, no difference. I analyzed the messages given to the windowProc method, but I didn't find a hint, that another drawing happens in the area of the table header.
And it's getting worse: I drawed a filled rectangle, but reduced the given RECT by 2 pixels inbounds. The result is a black, not filled rectangle (see attachment https://bugs.eclipse.org/bugs/attachment.cgi?id=261012 ). Is that maybe a windows bug? I only tested it on windows 10.

The other possibility is owner draw, which has the drawback, that only the existing header items can be customized, but not the empty space at the right end of the header (see attachment https://bugs.eclipse.org/bugs/attachment.cgi?id=261012 ).

See the gerrit change for my custom and owner drawing.
Comment 11 Conrad Groth CLA 2016-04-24 10:22:22 EDT
I tried to draw text on the DC inside the custom draw callbacks. Same result: nothing to see.
Comment 12 Patrik Suzzi CLA 2016-10-01 17:13:52 EDT
This bug is about having a CSS to set the table header. 

First, we should resolve Bug 63038 - TableColumn color & font in the header, which is a 2004 bug, with 30 votes, inactive since 2014. 

Visually speaking, this bug and Bug 63038, are in the major blockers to solve Bug 497562.
Comment 13 Patrik Suzzi CLA 2016-10-01 17:53:57 EDT
Created attachment 264526 [details]
Table headers and lines color can not be changed.
Comment 14 Patrik Suzzi CLA 2016-10-01 17:54:50 EDT
Created attachment 264527 [details]
Effect of non styleable elements in Dark theme.
Comment 15 Patrik Suzzi CLA 2016-12-21 07:05:36 EST
Created attachment 266008 [details]
Image: testing the proposed change

With the proposed change, I'm able to use the SWT org.eclipse.swt.examples.controlexample.ControlExample.java and change the colors of table headers. 

This is fundamental for improving theming in Windows, and other systems. 
In window, in particular, Table headers are one of the biggest problems for switching to dark theme. 

Please, review the change proposed by Conrad!
Comment 16 Lars Vogel CLA 2016-12-22 09:51:05 EST
With the help of Eric, Alex and Leo from the Red Hat team I have a prototype available to support table header styling also for Linux. I will create another bug for this as this can be discussed by the SWT GTK team while this implementation needs to be reviewed by the SWT Windows team.
Comment 17 Niraj Modi CLA 2017-01-10 06:26:02 EST
Created attachment 266208 [details]
Win7: Issue_with_TableHeader

I tested the latest gerrit patch, here are my observations:
1. Again we see the gradient coloring effect missing(which is seen with default colors on Win7)

2. Mouse related events are not working compared to native:
- Mouse hover doesn't highlight the table column.
- Also there is no user feedback on Mouse click event.
- Also one side effect: The space between headers is mouse select-able, highlighted in the attachment.

3. Sort Indicator is touching the header text, highlighted in the attachment.
Comment 18 Conrad Groth CLA 2017-01-14 18:05:13 EST
(In reply to Niraj Modi from comment #17)
> Created attachment 266208 [details]
> Win7: Issue_with_TableHeader
> 
> I tested the latest gerrit patch, here are my observations:
> 1. Again we see the gradient coloring effect missing(which is seen with
> default colors on Win7)
> 
Since Windows 8 the default theme has no Color gradient any more. If one wants to have custom colors together with a gradient, we should file a separate bug for that.

> 2. Mouse related events are not working compared to native:
> - Mouse hover doesn't highlight the table column.
Unfortunately there are no HOT events for a table header (see https://social.msdn.microsoft.com/Forums/vstudio/en-US/59c4dc3f-b915-4412-be2d-1149039cd38c/drawitem-on-owner-drawn-header-control-not-called-with-style-hdshottrack?forum=vcgeneral). Seems to be a bug in Windows.

> - Also there is no user feedback on Mouse click event.
This works now.

> - Also one side effect: The space between headers is mouse select-able,
> highlighted in the attachment.
>
This is fixed. The drag-detection was wrong.
 
> 3. Sort Indicator is touching the header text, highlighted in the attachment.
I fixed that my making the sort indicator a little bit smaller and also moved it a bit up.
Comment 19 Niraj Modi CLA 2017-01-18 03:28:37 EST
Tried latest patch on Win7, much better for mouse events now, still one scenario missing:
With sort indicator 'on', selected column header is not highlighted.

Also, let us know your thoughts on https://bugs.eclipse.org/bugs/show_bug.cgi?id=63038#c26
Comment 20 Niraj Modi CLA 2017-01-20 02:32:51 EST
Patch needs detailed testing/verification on MAC and GTK Platforms as well.
Moving to M6.
Comment 21 Lakshmi P Shanmugam CLA 2017-01-20 05:39:23 EST
(In reply to Niraj Modi from comment #20)
> Patch needs detailed testing/verification on MAC and GTK Platforms as well.
> Moving to M6.

The patch doesn't work on Mac. Looking at the code, it has the API stubs, but doesn't have the implementation for Mac & GTK.
Comment 22 Conrad Groth CLA 2017-01-28 11:47:32 EST
(In reply to Niraj Modi from comment #19)
> Tried latest patch on Win7, much better for mouse events now, still one
> scenario missing:
> With sort indicator 'on', selected column header is not highlighted.
> 
> Also, let us know your thoughts on
> https://bugs.eclipse.org/bugs/show_bug.cgi?id=63038#c26

I fixed that issue. If my patch gets merged, I will provide a similar (hopefully same) solution for the Tree control.
Comment 23 Niraj Modi CLA 2017-01-31 04:27:19 EST
(In reply to Conrad Groth from comment #22)
> (In reply to Niraj Modi from comment #19)
> > Tried latest patch on Win7, much better for mouse events now, still one
> > scenario missing:
> > With sort indicator 'on', selected column header is not highlighted.
> > 
> > Also, let us know your thoughts on
> > https://bugs.eclipse.org/bugs/show_bug.cgi?id=63038#c26
> 
> I fixed that issue. If my patch gets merged, I will provide a similar
> (hopefully same) solution for the Tree control.

Sure you can work on that in parallel, Thanks!

Verified the latest patch, found one more scenario which needs attention:
When we change Table background/foreground it also changes the Header's background/foreground. This might come as a surprise for existing customers who have changed the table background/foreground only.
Expected behavior: Table header background/foreground should only change when client calls the newly added API.
Comment 24 Niraj Modi CLA 2017-01-31 04:42:15 EST
(In reply to Leo Ufimtsev from comment #6)
> Created attachment 252353 [details]
> table headings have different colors
> 
> For SWT/GTK:
> Table headers are actually nested GtkButtons. Technically speaking, this
> should be possible in SWT/Gtk as the pre-conditions are met:
>  - We have access to GtkButton handles in SWT:TableColumn:buttonHandle
>  - Buttons can be styled with css like "* {background:red}"
> 
> I've attached a screenshot with multi-colored table headings.
> 
> In terms of actual implementation, one could supply an api like:
> TableColumn:setColumnColor(..)
> 
> This would be specific to a column. 
> 
> Or one could do something more global that would iterate over all columns:
> Table.java:setAllColumnColors(..)

For SWT point of view for any new APIs, we like to have this support on maximum possible platforms.
Since GTK is feasible, any plans of having this Table header styling support ?
Comment 25 Lakshmi P Shanmugam CLA 2017-01-31 07:03:23 EST
(In reply to Niraj Modi from comment #24)

> 
> For SWT point of view for any new APIs, we like to have this support on
> maximum possible platforms.
> Since GTK is feasible, any plans of having this Table header styling support
> ?

To add to Niraj's comment, ideally in this case we should try to provide the API implementation for all 3 supported platforms (Win, GTK, Cocoa) as it is feasible on all of them. To be released to 4.7, the SWT API should be implemented atleast on 2 platforms. Currently the patch works only for Windows and has stubs for Mac & GTK (as pointed out in comment #21).

Also, as mentioned in https://bugs.eclipse.org/bugs/show_bug.cgi?id=63038#c26 we should implement the APIs for Tree as well on the same platforms.
Comment 26 Conrad Groth CLA 2017-01-31 16:23:33 EST
(In reply to Niraj Modi from comment #23)
> Verified the latest patch, found one more scenario which needs attention:
> When we change Table background/foreground it also changes the Header's
> background/foreground. This might come as a surprise for existing customers
> who have changed the table background/foreground only.
> Expected behavior: Table header background/foreground should only change
> when client calls the newly added API.

I changed that. Now the header is only colored, if the new API is used.

I also fixed following issues:
- header was not redrawn, when setLinesVisible was used to switch grid on/off
- last vertical header line was not drawn, when setLinesVisible was on.
- header image was not vertically aligned center, but top
- space between header image and header text is now the same as for the native header
- When the sort column was clicked, it was not highlighted.
Comment 27 Lars Vogel CLA 2017-02-09 08:28:40 EST
(In reply to Lakshmi Shanmugam from comment #25)
>  To be released to 4.7, the SWT API should be
> implemented atleast on 2 platforms.

GTK implementation is good to go, Alex did already +2 the code change. See Bug 509648.
Comment 28 Lars Vogel CLA 2017-02-14 16:56:31 EST
Niraj, could you give Conrads Windows implementation another review? The GTK implementation has received +2 from Alex and in platform UI we have high demand for styling table headers in the dark theme and for RCP implementations.

Once this change is in we could extend our CSS handlers and the related css.
Comment 29 Niraj Modi CLA 2017-02-16 00:30:16 EST
(In reply to Lars Vogel from comment #28)
> Niraj, could you give Conrads Windows implementation another review? The GTK
> implementation has received +2 from Alex and in platform UI we have high
> demand for styling table headers in the dark theme and for RCP
> implementations.
> 
> Once this change is in we could extend our CSS handlers and the related css.

Yes, will take a look into this shortly.
Comment 30 Conrad Groth CLA 2017-02-18 08:25:04 EST
@Niraj: I just realized, that Alexander Kurtakov, reverted a lot of my changes from patch set 15 and 16 with his patch set 17. I don't know, why he did that. I wrote him a mail. If I don't get an answer until February 21st, I will restore my patch set 16.
Comment 31 Conrad Groth CLA 2017-02-18 08:34:16 EST
comment to myself: Windows returns the default system header background/foreground. Cocoa and gtk return the table foreground/background also as header foreground/background, if it wasn't overriden.
Comment 32 Conrad Groth CLA 2017-02-19 13:50:00 EST
(In reply to Conrad Groth from comment #30)
> @Niraj: I just realized, that Alexander Kurtakov, reverted a lot of my
> changes from patch set 15 and 16 with his patch set 17. I don't know, why he
> did that. I wrote him a mail. If I don't get an answer until February 21st,
> I will restore my patch set 16.

I restored my patch set 16 and rebased it.
Comment 33 Lars Vogel CLA 2017-02-23 15:16:41 EST
(In reply to Niraj Modi from comment #29)
> Yes, will take a look into this shortly.

Any update on the review? Would be really nice to have stylable headers for our dark theme and RCP customers.
Comment 35 Niraj Modi CLA 2017-02-24 05:55:07 EST
(In reply to Eclipse Genie from comment #34)
> Gerrit change https://git.eclipse.org/r/70822 was merged to [master].
> Commit:
> http://git.eclipse.org/c/platform/eclipse.platform.swt.git/commit/
> ?id=d2034277b3c3ab9670f89a215e782d65948d9ccb

Fixed the JavaDoc of Table.setHeaderBackGround() method to make a mention about GTK3 as well via below git:
http://git.eclipse.org/c/platform/eclipse.platform.swt.git/commit/?id=9160f1d9aed3055aa756a8305f483e6886f1d2f1

Note: To avoid further gerrit failures until next IBuild I commented out the call to the new API from the examples code. To be UN-commented after next IBuild.
Comment 36 Niraj Modi CLA 2017-02-26 22:44:58 EST
(In reply to Niraj Modi from comment #35)
> Note: To avoid further gerrit failures until next IBuild I commented out the
> call to the new API from the examples code. To be UN-commented after next
> IBuild.
UN-commented the new API calls from the ControlExample via below git:
http://git.eclipse.org/c/platform/eclipse.platform.swt.git/commit/?id=13cb2225f4e70cc8df8d05f9a02501dc1f3e99f6

Thanks Conrad for your work on Table header APIs, resolving this bug now.
Comment 37 Niraj Modi CLA 2017-03-08 08:07:43 EST
Verified the fix in I-Build: I20170307-2000 @Win7

Hi Lars/Conrad,
We will need the N&N contents for the new APIs in Table along with a screenshot highlighting the feature.
Comment 38 Eclipse Genie CLA 2017-03-08 17:11:16 EST
New Gerrit change created: https://git.eclipse.org/r/92660
Comment 40 Lars Vogel CLA 2017-03-08 17:16:00 EST
(In reply to Niraj Modi from comment #37)
> Hi Lars/Conrad,
> We will need the N&N contents for the new APIs in Table along with a
> screenshot highlighting the feature.

I added a mini-entry to the N&N. Please feel free to extend it.

Thanks again Conrad for this awesome contribution and Niraj for the code review and testing.
Comment 41 Till Brychcy CLA 2017-03-29 09:36:04 EDT
The N&N says this is implemented for Windows & Linux only.

Is this wrong, or is there a follow-up bug for Mac?
Comment 42 Lars Vogel CLA 2017-03-29 09:41:16 EDT
(In reply to Till Brychcy from comment #41)
> Is this wrong, or is there a follow-up bug for Mac?

AFAIK we have not yet a follow-up bug for Mac. Please open one.
Comment 43 Till Brychcy CLA 2017-03-29 12:01:31 EDT
(In reply to Lars Vogel from comment #42)
> (In reply to Till Brychcy from comment #41)
> > Is this wrong, or is there a follow-up bug for Mac?
> 
> AFAIK we have not yet a follow-up bug for Mac. Please open one.

Done, Bug 514424