Bug 434201 - [Win32] Dark theme: tree must respect the foreground color for items arrows
Summary: [Win32] Dark theme: tree must respect the foreground color for items arrows
Status: RESOLVED FIXED
Alias: None
Product: Platform
Classification: Eclipse Project
Component: UI (show other bugs)
Version: 4.4   Edit
Hardware: PC Windows All
: P3 major with 5 votes (vote)
Target Milestone: 4.5 M7   Edit
Assignee: Fabio Zadrozny CLA
QA Contact:
URL:
Whiteboard:
Keywords: greatfix, noteworthy
Depends on:
Blocks: 465668 562672
  Show dependency tree
 
Reported: 2014-05-06 08:08 EDT by Fabio Zadrozny CLA
Modified: 2020-04-30 12:56 EDT (History)
9 users (show)

See Also:


Attachments
Screenshot showing tree with dark theme on windows 7. (48.51 KB, image/png)
2014-05-06 08:08 EDT, Fabio Zadrozny CLA
no flags Details
Screenshot of proposed solution (82.91 KB, image/png)
2015-04-03 04:57 EDT, Kaloyan Raev CLA
no flags Details
Screenshot of proposed solution with triangles (67.95 KB, image/png)
2015-04-04 00:50 EDT, Kaloyan Raev CLA
no flags Details
Checkbox Tree issue (14.03 KB, image/png)
2015-04-05 12:30 EDT, Kaloyan Raev CLA
no flags Details
Checkbox Tree issue - solved (13.44 KB, image/png)
2015-04-06 00:34 EDT, Kaloyan Raev CLA
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Fabio Zadrozny CLA 2014-05-06 08:08:55 EDT
Created attachment 242758 [details]
Screenshot showing tree with dark theme on windows 7.

Currently having a dark theme on windows is almost unusable as the tree doesn't use the foreground color to show its arrows.

Note: this should probably be done in SWT (i.e.: it should use the foreground color for that instead of using the system).

I'm attaching a screenshot to see how it looks.
Comment 1 Kaloyan Raev CLA 2015-04-01 09:12:35 EDT
I've setup $150 bug bounty on FreedomSponsors: https://freedomsponsors.org/issue/666/dark-theme-tree-must-respect-the-foreground-color-for-items-arrows

I hope to see this bug fixed.
Comment 2 Lars Vogel CLA 2015-04-01 09:21:07 EDT
See also the discussion in Bug 463620.
Comment 3 Fabio Zadrozny CLA 2015-04-01 10:21:01 EDT
As a note, if you use the dark theme on LiClipse: http://www.liclipse.com it already works -- it's commercial, but still less than you offered as a bounty :)

Regarding having it in Eclipse, I created a gist some time ago which could be used to integrate what I do in LiClipse in a theme in Eclipse itself: https://gist.github.com/fabioz/59b06c519f505d37fcfb -- the work in the Eclipse side should be trivial at this point: mostly add that code and some css to integrate that (and have a committer review and accept it)... 

Lars: do you think that approach could be integrated or is it missing something? (if it's not, I'll try to take a look on providing a patch to integrate it in the upcoming month).
Comment 4 Lars Vogel CLA 2015-04-01 10:25:45 EDT
(In reply to Fabio Zadrozny from comment #3)
> Lars: do you think that approach could be integrated or is it missing
> something? (if it's not, I'll try to take a look on providing a patch to
> integrate it in the upcoming month).

Sounds good as a solution as long as SWT does not provide this option. Please provide a Gerrit review for its integration into platform and I have a look. Please note that we are currently in M7 and after M7 we cannot do any feature development anymore.
Comment 5 Kaloyan Raev CLA 2015-04-01 10:31:18 EDT
(In reply to Fabio Zadrozny from comment #3)
> As a note, if you use the dark theme on LiClipse: http://www.liclipse.com it
> already works -- it's commercial, but still less than you offered as a
> bounty :)

I need this fix for Zend Studio - therefore I need it in the Eclipse Platform.

Looks like this bounty will be easy money :-). Feel free to claim it if you have the patch accepted. Just to remind the "Definition of done" I posted on FreedomSponsors:

- Create a patch in the respective open source project (Eclipse Platform, SWT, or wherever necessary)
- The patch should be accepted in the master branch of the code repository of the respective open source project
- The patch should be available at least in a nightly build of the Eclipse Platform for testing
- The solution should work out-of-the-box: switching the Eclipse IDE to the dark theme should change the color of the expand/collapse toggle to something adequate level of the gray color (e.g. #A5A5A5)
- There should be no regressions caused by the solution, e.g. negative effects on toggle on Linux and Mac OS X.
Comment 6 Fabio Zadrozny CLA 2015-04-01 11:52:05 EDT
(In reply to Lars Vogel from comment #4)
> (In reply to Fabio Zadrozny from comment #3)
> > Lars: do you think that approach could be integrated or is it missing
> > something? (if it's not, I'll try to take a look on providing a patch to
> > integrate it in the upcoming month).
> 
> Sounds good as a solution as long as SWT does not provide this option.
> Please provide a Gerrit review for its integration into platform and I have
> a look. Please note that we are currently in M7 and after M7 we cannot do
> any feature development anymore.

Ok, will keep that in mind.
Comment 7 Anna-Jayne Metcalfe CLA 2015-04-01 13:30:08 EDT
I saw this mentioned on Twitter earlier today courtesy of @kaloyanraev, and as I had to do something similar within a Visual Studio plug-in a while back (see http://www.riverblade.co.uk/blog.php?archive=2012_08_01_archive.xml#2012080202) he asked me to post something.

The trick is to adjust the luminance of the foreground colour to maintain sufficient contrast between the foreground and background, while keeping the saturation the same..

This is the function used (in C++ with Win32 types, but I imagine it will be easy enough for someone to port):

    /// \brief Adjust the given text colour to provide a reasonable contrast with the given background colour by fiddling with its luminance.
    ///
    COLORREF GetAdjustedTextColour(COLORREF const clrText, COLORREF const clrBackground)
    {
        float const fTextLuminance          = CColour(clrText).GetLuminance();
        float const fBackgroundLuminance    = CColour(clrBackground).GetLuminance();

        float const fLuminanceDiff = 0.5f;

        if (::fabs(fTextLuminance - fBackgroundLuminance) < fLuminanceDiff)
        {
            float const nNewLuminance =  (fBackgroundLuminance > 0.5f) ? (fBackgroundLuminance - fLuminanceDiff) : (fBackgroundLuminance + fLuminanceDiff);

            CColour clrAdjusted(clrText);
            clrAdjusted.SetLuminance(nNewLuminance);

            return clrAdjusted;
        }
        return clrText;
    }

The only dependency is a HSL/RGB colour class which can get/set the luminance for a given colour.

Hope that helps, at least a little.
Comment 8 Leo Ufimtsev CLA 2015-04-02 13:02:54 EDT
Windows specific by the looks?
Comment 9 Anna-Jayne Metcalfe CLA 2015-04-02 13:19:24 EDT
That example is (it's from Win32 C++ code used in a Visual Studio plug-in), but the algorithm is generic. You just need to adjust the types/ranges etc.
Comment 10 Leo Ufimtsev CLA 2015-04-02 13:37:26 EDT
(In reply to Anna-Jayne Metcalfe from comment #9)
> That example is (it's from Win32 C++ code used in a Visual Studio plug-in),
> but the algorithm is generic. You just need to adjust the types/ranges etc.

I mean the issue seems to only occur on windows..
Comment 11 Fabio Zadrozny CLA 2015-04-02 14:02:09 EDT
Ok, just pushed an initial attempt to gerrit :)

https://git.eclipse.org/r/#/c/45169/

I've applied the fix only to windows as on other platforms it's usually not really a problem (I guess it could be a problem in Linux if the native tree is used and the system has a light based theme -- but usually in this case the system itself allows changing the configuration, so, it's not such a big problem as on windows where that's not changeable).
Comment 12 Kaloyan Raev CLA 2015-04-02 14:07:20 EDT
The problem is specific for Windows. I haven't noticed any similar issue on Linux (Ubuntu) or Mac OS X.
Comment 13 Fabio Zadrozny CLA 2015-04-02 15:51:51 EDT
New review on gerrit: https://git.eclipse.org/r/#/c/45175/
Comment 14 Kaloyan Raev CLA 2015-04-03 04:57:11 EDT
Created attachment 252154 [details]
Screenshot of proposed solution

Great job, Fabio! I fetched your patched in a dev env and I can confirm that it works. See the attached screenshot.

One question. As seen on the screenshot, the toggle has the old Windows XP style. Is it possible to draw it with the triangle style used on Windows 7 and later? This would keep the native look and feel of Eclipse.

If you switch your Windows to the High Contrast theme you would see in Windows Explorer how the triangle toggle should look in a dark theme.
Comment 15 Fabio Zadrozny CLA 2015-04-03 20:13:14 EDT
Added a new version which has the option to draw as triangles:

https://git.eclipse.org/r/#/c/45287/
Comment 16 Kaloyan Raev CLA 2015-04-04 00:50:03 EDT
Created attachment 252161 [details]
Screenshot of proposed solution with triangles

Amazing! Screenshot attached.

BTW, just a Gerrit hint. If you amend your previous commit in EGit then, when you push to Gerrit, the change will appear as a new patch set in the existing Gerrit change instead of a new Gerrit change.
Comment 17 Eclipse Genie CLA 2015-04-04 09:00:06 EDT
New Gerrit change created: https://git.eclipse.org/r/45295
Comment 18 Fabio Zadrozny CLA 2015-04-04 09:09:46 EDT
Hopefully https://git.eclipse.org/r/#/c/45295/ is now final (rebased with the current master and with proper commit message, supporting a custom foreground color and with a mode to draw with triangles or a square with +/-). 

In a previous review Andrey Loskutov noted that it needs PMC approval to be included, how can that be attained?
Comment 19 Kaloyan Raev CLA 2015-04-05 12:30:15 EDT
Created attachment 252165 [details]
Checkbox Tree issue

I did a little bit more testing and found an issue with checkbox trees (see the attachement). The overlay toggle is drawn over the checkbox instead over the native toggle. I guess some calculations need to be adjusted in the case of checkbox tree.
Comment 20 Fabio Zadrozny CLA 2015-04-05 19:41:03 EDT
Just updated https://git.eclipse.org/r/#/c/45295/ to fix the issue in a tree with the check style.
Comment 21 Kaloyan Raev CLA 2015-04-06 00:34:07 EDT
Created attachment 252170 [details]
Checkbox Tree issue - solved

Thank you! Looks good now.
Comment 22 Niraj Modi CLA 2015-04-06 05:10:09 EDT
(In reply to Eclipse Genie from comment #17)
> New Gerrit change created: https://git.eclipse.org/r/45295

Bug was reported on SWT but got a fix in UI code.. assigning to Platform-UI
Comment 23 Lars Vogel CLA 2015-04-07 05:43:21 EDT
FYI - The CSS engine is not API, so PMC approval is not required for this change. 

I currently do not have a windows system to test the change but Kaloyans screenshot looks great. I wait a bit if Brian has more feedback for https://git.eclipse.org/r/#/c/45295/ but IMHO this can and should be merged for M7.
Comment 25 Brian de Alwis CLA 2015-04-07 13:59:46 EDT
Tweaked and committed.  Thanks Fabio.  As an aside, I tested on OS X and it seems the erase doesn't remove the platform's tree arrows.
Comment 26 Lars Vogel CLA 2015-04-28 06:51:13 EDT
I think this change added a undesired message to the command line. Created Bug 465668 for that.