Bug 573365 - [DarkTheme] Text Compare 'Edition' color as Black doesn't work well.
Summary: [DarkTheme] Text Compare 'Edition' color as Black doesn't work well.
Status: RESOLVED FIXED
Alias: None
Product: Platform
Classification: Eclipse Project
Component: UI (show other bugs)
Version: 4.20   Edit
Hardware: PC All
: P3 normal (vote)
Target Milestone: 4.22 M2   Edit
Assignee: Lars Vogel CLA
QA Contact:
URL:
Whiteboard:
Keywords:
: 575925 (view as bug list)
Depends on:
Blocks: 575807
  Show dependency tree
 
Reported: 2021-05-05 03:30 EDT by Niraj Modi CLA
Modified: 2021-10-01 09:59 EDT (History)
4 users (show)

See Also:


Attachments
DarkTheme: Text_Compare Edition color as Black (98.38 KB, image/png)
2021-05-05 03:31 EDT, Niraj Modi CLA
no flags Details
Screenshot (137.22 KB, image/png)
2021-10-01 07:42 EDT, Lars Vogel CLA
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Niraj Modi CLA 2021-05-05 03:30:53 EDT
'Edition' in Text compare view is shown in Black which doesn't look good in Dark Theme.

'Edition' color as Black works for Lighttheme.

Suggest we should make the 'Edition' color theme specific and instead it should be White for DarkTheme.
Comment 1 Niraj Modi CLA 2021-05-05 03:31:44 EDT
Created attachment 286318 [details]
DarkTheme: Text_Compare Edition color as Black

Sharing a screen grab of showing the problem.
Comment 2 Niraj Modi CLA 2021-05-05 03:34:10 EDT
Is it possible to move this Text compare 'Edition' color to theme specific CSS ?
Comment 3 Lars Vogel CLA 2021-05-05 04:35:58 EDT
(In reply to Niraj Modi from comment #2)
> Is it possible to move this Text compare 'Edition' color to theme specific
> CSS ?

You moved to the dark theme? Nice, if that is true. Can you find the preference key and your suggested color and post it here? 

https://www.vogella.com/tutorials/EclipsePlatformDevelopment/article.html#preference-spy-for-tracing-preference-changes

I can guide you to adjust the CSS afterwards or do the change if you prefer.
Comment 4 Niraj Modi CLA 2021-05-05 07:48:45 EDT
(In reply to Lars Vogel from comment #3)
> (In reply to Niraj Modi from comment #2)
> > Is it possible to move this Text compare 'Edition' color to theme specific
> > CSS ?
> 
> You moved to the dark theme? Nice, if that is true. Can you find the
> preference key and your suggested color and post it here? 
> 
> https://www.vogella.com/tutorials/EclipsePlatformDevelopment/article.
> html#preference-spy-for-tracing-preference-changes
> 
> I can guide you to adjust the CSS afterwards or do the change if you prefer.

Thanks Lars, I occasionally work on Dark Themes.

Tried the suggested plugin, I find 'EDITION_COLOR' is the preference and I see it's color value is hard-coded in below file/line:
https://git.eclipse.org/c/platform/eclipse.platform.team.git/tree/bundles/org.eclipse.compare/compare/org/eclipse/compare/contentmergeviewer/TextMergeViewer.java#n1816
Comment 5 Rolf Theunissen CLA 2021-09-12 14:15:47 EDT
*** Bug 575925 has been marked as a duplicate of this bug. ***
Comment 6 Lorenzo Bettini CLA 2021-09-15 03:50:45 EDT
Now and then I experiment with the dark theme and always switch back to the light one because of problems like this... however, I was wondering why such problems have gone undetected by active dark theme users... is it a problem related to the underlying OS, or a specific Linux GTK theme?
Comment 7 Lars Vogel CLA 2021-09-15 04:19:35 EDT
(In reply to Lorenzo Bettini from comment #6)
> I was wondering why such
> problems have gone undetected by active dark theme users

I don't think they go unnoticed, we have lots of bug reported for the dark theme. We need more people working on fixing the issues. Would be great to see more fixes from you in this area.
Comment 8 Thomas Wolf CLA 2021-10-01 03:20:06 EDT
The hard-coded black pointed out by Niraj is just a default color taken if nothing else is defined in the preferences.

This is a CSS problem: the dark theme styles are incomplete.

org.eclipse.ui.themes/css/dark/e4_dark-preferencestyle.css only defines INCOMING_COLOR, OUTGOING_COLOR, RESOLVED_COLOR.

It should also have overrides for EDITION_COLOR and possibly also for the other colors defined by org.eclipse.compare. (CONFLICTING_COLOR, ADDITION_COLOR, DELETION_COLOR).

I don't have time to fiddle around with these; but if someone comes up with corrected and hopefully complete color definitions for this, I'll be happy to try it out and review.
Comment 9 Lars Vogel CLA 2021-10-01 04:09:34 EDT
To see the preference keys, we can use the preference spy, I now migrate it to PDE so that it easier to find and use.
Comment 10 Thomas Wolf CLA 2021-10-01 06:48:53 EDT
I've given the keys that need to be added in comment 8. (CONFLICTING_COLOR _is_ defined already, though.)

TL;DR: just adding colors for these keys would fix this bug. To get a really good-looking compare editor in dark mode, much more work would be needed.

However: TextMergeViewer uses these colors as is only for the outline block drawn around the change, and the connecting line between the sides. For highlighting text, it alpha-blends these colors against the background, which gives very dark colors with a dark background, resulting in insufficient contrast. For instance I find the dark green or dark red used as background for added/deleted text way too dark; it hardly sticks out from the normal near-black background. Probably TextMergeViewer.ColorPalette should use some other algorithm if the background is dark (which could be detected by background.getHSB()[2] < 0.5).

TextMergeViewer also does not use the dark mode current line highlight at least on OS X; see bug 565967. (And the dark mode current line highlight is barely different from the normal dark background; hardly visible for me. Dark blue as selection highlight is also rather bad against a dark background.)
Comment 11 Lars Vogel CLA 2021-10-01 07:41:05 EDT
(In reply to Thomas Wolf from comment #8)
> The hard-coded black pointed out by Niraj is just a default color taken if
> nothing else is defined in the preferences.

Thanks, Thomas for the help.

> This is a CSS problem: the dark theme styles are incomplete.
> 
> org.eclipse.ui.themes/css/dark/e4_dark-preferencestyle.css only defines
> INCOMING_COLOR, OUTGOING_COLOR, RESOLVED_COLOR.
> 
> It should also have overrides for EDITION_COLOR and possibly also for the

Green? 'EDITION_COLOR=108,210,17'


> other colors defined by org.eclipse.compare. (CONFLICTING_COLOR,
> ADDITION_COLOR, DELETION_COLOR).

These are currently red so I think they are ok.


> I don't have time to fiddle around with these; but if someone comes up with
> corrected and hopefully complete color definitions for this, I'll be happy
> to try it out and review.

Ok, I think green looks okisch, so lets start with this.
Comment 12 Lars Vogel CLA 2021-10-01 07:42:19 EDT
Created attachment 287246 [details]
Screenshot
Comment 13 Eclipse Genie CLA 2021-10-01 07:43:22 EDT
New Gerrit change created: https://git.eclipse.org/r/c/platform/eclipse.platform.ui/+/186041
Comment 14 Thomas Wolf CLA 2021-10-01 07:53:37 EDT
(In reply to Lars Vogel from comment #12)
> Created attachment 287246 [details]
> Screenshot

I think this shows the ADDITION_COLOR. You'd need something edited on both sides to see the EDITION_COLOR. Start with setting it to 255,0,0, so you know when you see it :-) Then change it until it is the color you actually want.

The default setup for light mode is in org.eclipse.compare/plugin.xml.

INCOMING BLUE
OUTGOING BLACK
CONFLICTING RED
RESOLVED GREEN
DELETION RED
EDITION BLACK
ADDITION DARK_GREEN

Might be a good idea to keep these relations also in dark mode. So EDITION == whatever OUTGOING is in dark mode? (238,238,238)
Comment 15 Lars Vogel CLA 2021-10-01 08:00:08 EDT
(In reply to Thomas Wolf from comment #14)

> INCOMING BLUE
> OUTGOING BLACK
> CONFLICTING RED
> RESOLVED GREEN
> DELETION RED
> EDITION BLACK
> ADDITION DARK_GREEN
> 
> Might be a good idea to keep these relations also in dark mode. So EDITION
> == whatever OUTGOING is in dark mode? (238,238,238)

Also fine for me (I don't have any preference, except that it should not be dark and that it should help our users).

Updated the Gerrit. Thanks, again. Feel free to update the color, I will soon be on vacation for 1-2 weeks.
Comment 17 Lars Vogel CLA 2021-10-01 09:59:30 EDT
Thanks, Niraj and Lorenzo for reporting and Thomas for the solution which I executed on his behalf.