Code::Blocks

User forums => Using Code::Blocks => Topic started by: mimi89999 on April 06, 2020, 11:04:36 pm

Title: Code::Blocks colors
Post by: mimi89999 on April 06, 2020, 11:04:36 pm
Hello,
I noticed that C::B is mixing system colors with custom hard coded default colors. This makes C::B look strange/ugly on system themes with non standard color palettes and parts of the UI unusable and some text illegible on systems with a dark theme enabled or with an inverted color palette.

You can clearly see this issue on this screenshot: https://sourceforge.net/p/codeblocks/tickets/943/attachment/Capture%20d%E2%80%99%C3%A9cran%20du%202020-04-06%2008-56-33.png

Obviously, there are two possibilities. C::B could either try to use system color theme as much as possible or use a custom theme. I think that the first option is the way to go since C::B is already using UI elements (widgets) from the platform.

There is quite some choice of system colors: https://docs.wxwidgets.org/3.1/settings_8h.html#a44ad26cbd8d579d1b7eff7015c8bd24b
A already made a patch correcting link colors in the start page: https://sourceforge.net/p/codeblocks/tickets/943/ and investigated caption text color in pane info. `wxBLACK` is hardcoded in AUI in wxWidgets: https://github.com/wxWidgets/wxWidgets/blob/master/src/aui/dockart.cpp#L330, but I have a WIP patch for C::B. I also plan to fix toolbox border and tabs.

There is still one problem though. C::B lets users change UI colors. I don't know how it should work with hybrid system themes with a white and dark mode. Color overrides will be applied regardless of the theme. Maybe C::B should have separate color options for the theme variants?
Title: Re: Code::Blocks colors
Post by: BlueHazzard on April 06, 2020, 11:49:27 pm
Quote
A already made a patch correcting link colors in the start page:
I have not found the patch. Have you uploaded it, or are you going to fix more, before you upload it?
Title: Re: Code::Blocks colors
Post by: oBFusCATed on April 07, 2020, 12:43:55 am
About defaults: Use the colour manager and just make the defaults to be using the system colours.
About notebooks: You're using gtk3 I suppose, because in gtk2 we have a native dock art, but this doesn't look possible in gtk3. I won't bother with the default aui arts, they are plain ugly and old looking. I plan to make something 100% custom. Probably reuse the work done in CodeLite or replicate the notebook in Firefox or similar. I don't know yet.
About panel names: There is a button in the settings to auto-detect the colours after a theme change, so I'm not sure what you want to change there.
Title: Re: Code::Blocks colors
Post by: mimi89999 on April 07, 2020, 08:29:36 am
> I have not found the patch. Have you uploaded it, or are you going to fix more, before you upload it?

Sorry. I forgot the patch in the ticket.
Title: Re: Code::Blocks colors
Post by: oBFusCATed on April 07, 2020, 10:37:39 am
I'll take a look soon.
Title: Re: Code::Blocks colors
Post by: mimi89999 on April 07, 2020, 10:38:52 am
Hmmm... They have a thing called `wxAUI_DOCKART_BORDER_COLOUR`, doc says it's a border https://docs.wxwidgets.org/trunk/group__group__class__aui.html#ggab09190c5a3f9cd3628819fbe93a9caa0a3c097368a59117ad699f4201e14f5fb6, but it seems like `SHADOW` is what it really is. They made a shadow and called it border. As you can see on the attached screenshot, it's only possible to control right and bottom border color. Top and left are hardcoded to white: https://github.com/wxWidgets/wxWidgets/blob/master/src/aui/dockart.cpp#L553

@oBFusCATed Why do you want to do something 100% custom? Do you think that it won't be possible to fix AUI upstream?
Title: Re: Code::Blocks colors
Post by: mimi89999 on April 07, 2020, 10:41:13 am
I think that the best temporary fix for this will be to default border size to `0`. It looks very nice without that border.
Title: Re: Code::Blocks colors
Post by: oBFusCATed on April 07, 2020, 07:31:07 pm
1. Keep in mind that we ship on 3 OSes and there are million different gtk2 themes.
2. We don't use wxAuiToolbar so looking at the auidemo is not 100% representative.
3. In gtk2 we had our own dock art for notebooks which had been upstreamed and it is available in wxgtk. It uses native gtk apis for drawing notebook elements, so the look is native to the them. With gtk3 there is no api to do the same. So we have to do something which suits the look of C::B. I doubt it makes sense to upstream it. We could try, but it would be yet another tabart.
Title: Re: Code::Blocks colors
Post by: mimi89999 on April 07, 2020, 08:30:32 pm
2. C::B is affected by the same issue. Where is that code in C::B then?
Title: Re: Code::Blocks colors
Post by: mimi89999 on April 07, 2020, 11:35:58 pm
3. Now GTK4 is in development. This API could be proposed as it might be useful to other apps and IDEs.
GTK is not the only backend. I saw C:B on Windows and it's equally ugly. Since those platforms are supported, it must be drawn anyway and OS X also has a dark theme.
Title: Re: Code::Blocks colors
Post by: oBFusCATed on April 07, 2020, 11:59:49 pm
3. Now GTK4 is in development. This API could be proposed as it might be useful to other apps and IDEs.
You can try. :)
Title: Re: Code::Blocks colors
Post by: mimi89999 on April 08, 2020, 11:26:19 pm
What's actually missing in GTK3? It has a notebook with tabs. It's used by many apps. Notably Epiphany, Gedit, Terminal and Gajim.
Title: Re: Code::Blocks colors
Post by: oBFusCATed on April 09, 2020, 12:04:03 am
APIs to make this work: https://github.com/obfuscated/codeblocks_sf/blob/master/src/src/notebookstyles.cpp#L485
If you find one let me know and I'll spend some time implementing this for gtk3.
Title: Re: Code::Blocks colors
Post by: mimi89999 on April 09, 2020, 09:29:52 am
I'm not sure which part you are referring to exactly, but if it's tab styling, that's possible in GTK3 with CSS. Please see these resources:
https://developer.gnome.org/gtk3/stable/theming.html
https://thegnomejournal.wordpress.com/2011/03/15/styling-gtk-with-css/
https://developer.gnome.org/gtk3/stable/gtk-migrating-GtkStyleContext-checklist.html
https://www.preining.info/blog/2020/03/de-uglify-gtk3-tabs-of-terminals/

I was able to style tabs as you can see on the screenshot.
Title: Re: Code::Blocks colors
Post by: oBFusCATed on April 09, 2020, 10:00:02 am
The task is to use the tab styling of the gtk 3 theme, not draw random stuff on tabs.
If you want to see how it works - build yourself a wx with gtk2 and test different themes with the aui demo.
If we want to draws something we won't use css for sure :) We don't need it.
Title: Re: Code::Blocks colors
Post by: mimi89999 on April 09, 2020, 02:30:30 pm
Sorry, but I don't quite understand what you need to do if it isn't styling. It is possible to put a label and a close button in a tab. Instead of putting a label inside the tab, a 2 element horizontal box needs to be put wit a label in the left part and a button in the right part.

I don't understand why that border width is needed.
Title: Re: Code::Blocks colors
Post by: mimi89999 on April 09, 2020, 03:08:54 pm
Maybe https://developer.gnome.org/gtk3/stable/GtkStyleContext.html#gtk-style-context-get-border or https://developer.gnome.org/gtk3/stable/GtkStyleContext.html#gtk-style-context-get-margin coud be used to get that width.
Title: Re: Code::Blocks colors
Post by: mimi89999 on April 09, 2020, 03:16:14 pm
There is also this bug on Mozilla's Bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=877605
Title: Re: Code::Blocks colors
Post by: oBFusCATed on April 09, 2020, 04:15:43 pm
Sorry, but I don't quite understand what you need to do if it isn't styling. It is possible to put a label and a close button in a tab. Instead of putting a label inside the tab, a 2 element horizontal box needs to be put wit a label in the left part and a button in the right part.
GTK2 contains API which says something like gtk_draw_notebook_button(...) gtk_draw_notebook_label(...) gtk_draw_notebook_border(...). All these take the notebook style from the theme and make it possible to create custom notebook which looks like the gtk_notebook control.

I couldn't find any such APIs in gtk 3 (after 1-2 hour search on the internet).
I can draw tabs in my style, I don't need any gtk APIs to do it, I can do it with wxWidgets' API. But this would mean that the style of the notebook won't match of the gtk3 notebook in native gtk apps.

Is it clear now?

p.s. Thanks for the mozilla links. They might be useful.
Title: Re: Code::Blocks colors
Post by: mimi89999 on April 09, 2020, 08:05:16 pm
I'm not sure if it's what you need, but I made a tab with a close button. It's very ugly because I didn't set the size, but it shouldn't be an issue. Wrote it in Python3 to be faster.
Title: Re: Code::Blocks colors
Post by: oBFusCATed on April 09, 2020, 09:19:11 pm
(https://imgflip.com/s/meme/Pony-Shrugs.jpg)
Title: Re: Code::Blocks colors
Post by: mimi89999 on April 09, 2020, 09:20:40 pm
Yea. Probably I won't understand the issue unless I actually try to implement this.
Title: Re: Code::Blocks colors
Post by: mimi89999 on April 10, 2020, 12:00:39 pm
OK. I started porting this thing to GTK3 and for the time being, I did not have any issues. Here is the WIP patch:
Title: Re: Code::Blocks colors
Post by: mimi89999 on April 10, 2020, 01:37:17 pm
OK. I finally understood the issue. I also searched through the doc, but couldn't find anything. Finally, I want to #gtk and `ebassi` pointed me https://gitlab.gnome.org/GNOME/gtk/-/blob/gtk-3-24/demos/gtk-demo/foreigndrawing.c#L448-495 .
Title: Re: Code::Blocks colors
Post by: oBFusCATed on April 10, 2020, 07:02:10 pm
Perseverance is key :) This might be useful, some day. Where is this #gtk channel (I suppose it is IRC)? Last time I've tried on the their IRC channel, there was no response...
Title: Re: Code::Blocks colors
Post by: mimi89999 on April 10, 2020, 08:41:00 pm
#gtk on irc.gnome.org.

What does this mean for the `tabartgtk` implementation? Are there still any APIs missing? Will you port it? I wrote some code. Active tab doesn't have the blue bottom border, but at least I got the background correct. Tabs in GTK notebook do don't have borders nor a different background. There is a tab background change on hover and that's it. I think that some styling needs to be made in GTK notebook in C::B because without it, it will look really alien.
Title: Re: Code::Blocks colors
Post by: oBFusCATed on April 11, 2020, 12:03:34 am
Some day it will happen. Current plans involve improving threadsearch, after that the debugger...
Title: Re: Code::Blocks colors
Post by: Suryavarman on April 19, 2020, 07:51:04 pm

You can clearly see this issue on this screenshot: https://sourceforge.net/p/codeblocks/tickets/943/attachment/Capture%20d%E2%80%99%C3%A9cran%20du%202020-04-06%2008-56-33.png


I have the same problem with a fresh install of Mageia7 and C::B 17 and C::B 20.
Title: Re: Code::Blocks colors
Post by: Piotr Grochowski on April 30, 2020, 08:06:25 pm
Hello,
I noticed that C::B is mixing system colors with custom hard coded default colors. This makes C::B look strange/ugly on system themes with non standard color palettes and parts of the UI unusable and some text illegible on systems with a dark theme enabled or with an inverted color palette.

You can clearly see this issue on this screenshot: https://sourceforge.net/p/codeblocks/tickets/943/attachment/Capture%20d%E2%80%99%C3%A9cran%20du%202020-04-06%2008-56-33.png

https://i.imgur.com/HUQ8WdR.png
Can reproduce on Microsoft Windows but I wouldn't say it's unusable. In Microsoft Windows, there is so much software that incorrectly adapts to custom themes that I don't find this particular software surprising.