Bug 563079 - Bad rendering of trim bars
Summary: Bad rendering of trim bars
Status: RESOLVED FIXED
Alias: None
Product: Platform
Classification: Eclipse Project
Component: UI (show other bugs)
Version: 4.16   Edit
Hardware: All Windows 10
: P3 normal (vote)
Target Milestone: 4.16 M3   Edit
Assignee: Pierre-Yves Bigourdan CLA
QA Contact:
URL:
Whiteboard:
Keywords:
Depends on: 551462
Blocks: 560385
  Show dependency tree
 
Reported: 2020-05-12 04:25 EDT by Gayan Perera CLA
Modified: 2020-06-03 07:27 EDT (History)
4 users (show)

See Also:


Attachments
TrimBar (9.66 KB, image/png)
2020-05-12 04:25 EDT, Gayan Perera CLA
no flags Details
Revised trimbars (124.93 KB, image/png)
2020-05-12 15:52 EDT, Pierre-Yves Bigourdan CLA
no flags Details
New icons in macOS light theme (134.19 KB, image/png)
2020-05-16 03:42 EDT, Matthias Becker CLA
no flags Details
New icons in macOS dark theme (150.58 KB, image/png)
2020-05-16 03:43 EDT, Matthias Becker CLA
no flags Details
Screenshot Linux Dark (47.40 KB, image/png)
2020-05-16 05:02 EDT, Lars Vogel CLA
no flags Details
Light Linux (46.97 KB, image/png)
2020-05-16 05:04 EDT, Lars Vogel CLA
no flags Details
Dark windows (6.18 KB, image/png)
2020-05-16 05:09 EDT, Lars Vogel CLA
no flags Details
Light windows (25.52 KB, image/png)
2020-05-16 05:09 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 Gayan Perera CLA 2020-05-12 04:25:43 EDT
Created attachment 282789 [details]
TrimBar

Please see the screenshot, there can be seen a odd border like space in different color in the trim bars.
Comment 1 Lars Vogel CLA 2020-05-12 04:31:26 EDT
Pierre-Yves and Philippe, some blue has survived. Can you please have a look?
Comment 2 Eclipse Genie CLA 2020-05-12 15:49:59 EDT
New Gerrit change created: https://git.eclipse.org/r/162909
Comment 3 Pierre-Yves Bigourdan CLA 2020-05-12 15:52:25 EDT
Created attachment 282810 [details]
Revised trimbars

Any better? :)
Comment 4 Gayan Perera CLA 2020-05-12 15:53:51 EDT
Looking good.
Comment 5 Lars Vogel CLA 2020-05-12 16:01:52 EDT
Looks way better. Do we have these images also in eclipse.platform.ui.images as svg? In this case they also need update
Comment 6 Pierre-Yves Bigourdan CLA 2020-05-12 16:05:04 EDT
(In reply to Lars Vogel from comment #5)
> Looks way better. Do we have these images also in eclipse.platform.ui.images
> as svg? In this case they also need update

Not sure, I modified the PNGs directly. I've got the Platform UI project checked out using Oomph, but I cannot see any eclipse.platform.ui.images project inside, and searching for resources names *.svg returns nothing. Am I being thick?
Comment 7 Lars Vogel CLA 2020-05-12 16:05:57 EDT
(In reply to Pierre-Yves B. from comment #6)
> (In reply to Lars Vogel from comment #5)
> > Looks way better. Do we have these images also in eclipse.platform.ui.images
> > as svg? In this case they also need update
> 
> Not sure, I modified the PNGs directly. I've got the Platform UI project
> checked out using Oomph, but I cannot see any eclipse.platform.ui.images
> project inside, and searching for resources names *.svg returns nothing. Am
> I being thick?

Sorry, quotes wrong from memory, see https://git.eclipse.org/r/#/admin/projects/platform/eclipse.platform.images for the correct clone URI
Comment 8 Pierre-Yves Bigourdan CLA 2020-05-12 16:21:38 EDT
(In reply to Lars Vogel from comment #7)
> Sorry, quotes wrong from memory, see
> https://git.eclipse.org/r/#/admin/projects/platform/eclipse.platform.images
> for the correct clone URI

Thanks - will have a look. Though some other time, I've done enough Eclipse stuff for tonight, switching off for now. :)
Comment 9 Matthias Becker CLA 2020-05-13 02:59:26 EDT
(In reply to Eclipse Genie from comment #2)
> New Gerrit change created: https://git.eclipse.org/r/162909

why don't we have @2x versions of the PNGs?
Comment 10 Pierre-Yves Bigourdan CLA 2020-05-13 14:01:22 EDT
(In reply to Lars Vogel from comment #5)
> Looks way better. Do we have these images also in eclipse.platform.ui.images
> as svg? In this case they also need update

I've had a look and don't think we have any SVG versions for these. There's actually no org.eclipse.ui.themes subfolder at all in the eclipse.platform.images project.

(In reply to Matthias Becker from comment #9)
> (In reply to Eclipse Genie from comment #2)
> > New Gerrit change created: https://git.eclipse.org/r/162909
> 
> why don't we have @2x versions of the PNGs?

No clue, I didn't even know that was a thing! Are they used for higher resolutions or something?
Comment 11 Matthias Becker CLA 2020-05-14 01:10:53 EDT
(In reply to Pierre-Yves B. from comment #10)
> (In reply to Lars Vogel from comment #5)
> > Looks way better. Do we have these images also in eclipse.platform.ui.images
> > as svg? In this case they also need update
> 
> I've had a look and don't think we have any SVG versions for these. There's
> actually no org.eclipse.ui.themes subfolder at all in the
> eclipse.platform.images project.
> 
> (In reply to Matthias Becker from comment #9)
> > (In reply to Eclipse Genie from comment #2)
> > > New Gerrit change created: https://git.eclipse.org/r/162909
> > 
> > why don't we have @2x versions of the PNGs?
> 
> No clue, I didn't even know that was a thing! Are they used for higher
> resolutions or something?

Yes. On high resolution displays SWT automatically takes file with the doubles resolution. If this is not available the low resolution version scalled up (which makes them blurry).

Can you tell me, where in the code these icons are used?
Comment 12 Pierre-Yves Bigourdan CLA 2020-05-14 03:02:06 EDT
(In reply to Matthias Becker from comment #11)
> Can you tell me, where in the code these icons are used?

If you're referring to the images I've modified in the patch, I think they're used by org.eclipse.e4.ui.widgets.ImageBasedFrame.
Comment 13 Lars Vogel CLA 2020-05-15 05:09:51 EDT
Pierre-Yves, can you rebase your patch? 

Matthias, could you help with providing svg and 2x versions of the icons?
Comment 14 Matthias Becker CLA 2020-05-15 06:31:36 EDT
(In reply to Lars Vogel from comment #13)
> Pierre-Yves, can you rebase your patch? 
> 
> Matthias, could you help with providing svg and 2x versions of the icons?

I am currently working on it.
Comment 15 Pierre-Yves Bigourdan CLA 2020-05-15 09:36:32 EDT
(In reply to Lars Vogel from comment #13)
> Pierre-Yves, can you rebase your patch? 

Done.
Comment 16 Lars Vogel CLA 2020-05-15 10:08:12 EDT
(In reply to Matthias Becker from comment #14)

> I am currently working on it.

Thanks. To reproduce the time pressure, I plan to release  Pierre-Yves Gerrit and we can use your update to replace the replaced png files later. I hope that is fine.
Comment 17 Matthias Becker CLA 2020-05-16 03:37:14 EDT
(In reply to Lars Vogel from comment #16)
> (In reply to Matthias Becker from comment #14)
> 
> > I am currently working on it.
> 
> Thanks. To reproduce the time pressure, I plan to release  Pierre-Yves
> Gerrit and we can use your update to replace the replaced png files later. I
> hope that is fine.

sure.
Comment 18 Eclipse Genie CLA 2020-05-16 03:37:34 EDT
New Gerrit change created: https://git.eclipse.org/r/163125
Comment 19 Eclipse Genie CLA 2020-05-16 03:40:08 EDT
New Gerrit change created: https://git.eclipse.org/r/163127
Comment 20 Matthias Becker CLA 2020-05-16 03:42:47 EDT
Created attachment 282879 [details]
New icons in macOS light theme

This is how the new icons look in macOS light theme.
I adapted the dots of the drag handle to be more visible. Only in the macOS light theme they have been very small. Even in the macOS dark theme they have been same as in other themes. So I changed them to unify this
Comment 21 Matthias Becker CLA 2020-05-16 03:43:16 EDT
Created attachment 282880 [details]
New icons in macOS dark theme
Comment 22 Matthias Becker CLA 2020-05-16 03:48:40 EDT
I created SVGs for all the icons in o.e.ui.themes/icons and created high resolution icons. This makes the rendering much look better (especially on the rounded corners) on high res displays (see my screenshots).

The old icons all had a coloured background that matched the background of the OSes widget. As PNGs support transparency, I removed this background. Via this the native widget looks through and we don't need to changes these images again once the native widgets background changes again.

Note: After that all the handle images (*Handle*.png”)  are identical except of the one used in all dark themes and in e4-light and e4-classic (dragHandle*.png). So this could be cleaned up in a separate commit.
Also the *frame*.png icons are very similar only the stroke color is slightly different. I don't know if this is by intention of if we can unify this in addition.


I tested this change on macOS in light and dark theme. They should also be tested on windows and linux will all the themes that are available there. Especially check if the transparency works as expected.
Comment 23 Lars Vogel CLA 2020-05-16 05:02:45 EDT
Created attachment 282885 [details]
Screenshot Linux Dark
Comment 24 Lars Vogel CLA 2020-05-16 05:04:08 EDT
Created attachment 282886 [details]
Light Linux
Comment 25 Lars Vogel CLA 2020-05-16 05:05:16 EDT
(In reply to Matthias Becker from comment #22)

> Note: After that all the handle images (*Handle*.png”)  are identical except
> of the one used in all dark themes and in e4-light and e4-classic
> (dragHandle*.png). So this could be cleaned up in a separate commit.
> Also the *frame*.png icons are very similar only the stroke color is
> slightly different. I don't know if this is by intention of if we can unify
> this in addition.

 +1 for unification of the icons, please open a new bug for that. Also IMHO it would be nice if the element could loose its rounded corners.
Comment 26 Gayan Perera CLA 2020-05-16 05:07:30 EDT
+1 for loosing rounded corners :)
Comment 27 Lars Vogel CLA 2020-05-16 05:07:45 EDT
Note: Need to restart the runtime Eclipse after a theme switch, otherwise the icons look bad (not related to this patch).
Comment 28 Lars Vogel CLA 2020-05-16 05:09:12 EDT
Created attachment 282887 [details]
Dark windows
Comment 29 Lars Vogel CLA 2020-05-16 05:09:35 EDT
Created attachment 282888 [details]
Light windows
Comment 30 Lars Vogel CLA 2020-05-16 05:10:06 EDT
Change looks good on Linux & Windows. Thanks, Matthias. Please merge (after fixing the merge markers in the commit)
Comment 31 Pierre-Yves Bigourdan CLA 2020-05-16 05:28:57 EDT
The dots are not all of equal size, some of them end up being stretched when rendered. This was a problem before any of these patches though.
Comment 32 Matthias Becker CLA 2020-05-16 08:51:52 EDT
(In reply to Pierre-Yves B. from comment #31)
> The dots are not all of equal size, some of them end up being stretched when
> rendered. This was a problem before any of these patches though.

Which once get streched?
Comment 33 Pierre-Yves Bigourdan CLA 2020-05-16 09:27:39 EDT
(In reply to Matthias Becker from comment #32)
> (In reply to Pierre-Yves B. from comment #31)
> > The dots are not all of equal size, some of them end up being stretched when
> > rendered. This was a problem before any of these patches though.
> 
> Which once get streched?

I'm specifically talking about the handles (the images with the four dots). For example, on Lars's screenshot for the light theme:
* for vertical handles, numbering dots from 1 to 4 from top to bottom, dot 1 is three pixels high, dot 2, 3 and 4 are two pixels high. Dots 1, 2 and 3 are separated by two pixels, dots 3 and 4 are separated by three pixels.
* for horizontal handles, numbering dots from 1 to 4 from left to right, dots 1 and 4 are three pixels wide, dots 1 and 3 are two pixels wide. Dots 1, 2 and 3, 4 are separated by two pixels, dots 2 and 2 are separated by three pixels. The white shades of dots 1 and 3 are two pixels wide, the shades of dots 2 and 4 are four pixels wide.

There are similar problems on your macOS screenshot, though not as severe.

On the Linux screenshot, the dots which initially have a square shape in the version controlled image have become rectangles.
Comment 34 Matthias Becker CLA 2020-05-18 02:23:29 EDT
(In reply to Pierre-Yves B. from comment #33)
> I'm specifically talking about the handles (the images with the four dots).
> For example, on Lars's screenshot for the light theme:
> * for vertical handles, numbering dots from 1 to 4 from top to bottom, dot 1
> is three pixels high, dot 2, 3 and 4 are two pixels high. Dots 1, 2 and 3
> are separated by two pixels, dots 3 and 4 are separated by three pixels.
> * for horizontal handles, numbering dots from 1 to 4 from left to right,
> dots 1 and 4 are three pixels wide, dots 1 and 3 are two pixels wide. Dots
> 1, 2 and 3, 4 are separated by two pixels, dots 2 and 2 are separated by
> three pixels. The white shades of dots 1 and 3 are two pixels wide, the
> shades of dots 2 and 4 are four pixels wide.
> 
> There are similar problems on your macOS screenshot, though not as severe.
> 
> On the Linux screenshot, the dots which initially have a square shape in the
> version controlled image have become rectangles.

I just checked again. I see what you mean on the screenshot. But maybe this is an artefact of the screenshot. I just looked at my macOS screenshots and don't see the issue here. I also compared e.g. the old and the new version gtkHandle.png files. They both have 5x20 pixels and the dots are 2x2 pixels in both versions.

Do you see this issue also in the running eclipse instance?
Comment 35 Pierre-Yves Bigourdan CLA 2020-05-18 03:22:25 EDT
(In reply to Matthias Becker from comment #34)
> Do you see this issue also in the running eclipse instance?

On my Windows machine, yes, I can definitely see these issues in the running Eclipse, patch or without patch. Less noticeable on my macOS, but it doesn't seem perfect either (though only tested the non patch version, without the higher scale images).
Comment 36 Matthias Becker CLA 2020-05-18 03:24:30 EDT
(In reply to Pierre-Yves B. from comment #35)
> On my Windows machine, yes, I can definitely see these issues in the running
> Eclipse, patch or without patch. 

So you are saying that this issue already existed before my patch?
Comment 37 Pierre-Yves Bigourdan CLA 2020-05-18 03:29:47 EDT
(In reply to Matthias Becker from comment #36)
> (In reply to Pierre-Yves B. from comment #35)
> > On my Windows machine, yes, I can definitely see these issues in the running
> > Eclipse, patch or without patch. 
> 
> So you are saying that this issue already existed before my patch?

Yes, I also said so here:

(In reply to Pierre-Yves B. from comment #31)
> This was a problem before any of these patches though.
Comment 38 Matthias Becker CLA 2020-05-18 03:31:09 EDT
(In reply to Pierre-Yves B. from comment #37)
> (In reply to Matthias Becker from comment #36)
> > (In reply to Pierre-Yves B. from comment #35)
> > > On my Windows machine, yes, I can definitely see these issues in the running
> > > Eclipse, patch or without patch. 
> > 
> > So you are saying that this issue already existed before my patch?
> 
> Yes, I also said so here:
> 
> (In reply to Pierre-Yves B. from comment #31)
> > This was a problem before any of these patches though.

Oh. I missed this. So should we merge this change? What do you think?
Comment 39 Pierre-Yves Bigourdan CLA 2020-05-18 03:35:06 EDT
(In reply to Matthias Becker from comment #38)
> (In reply to Pierre-Yves B. from comment #37)
> > (In reply to Matthias Becker from comment #36)
> > > (In reply to Pierre-Yves B. from comment #35)
> > > > On my Windows machine, yes, I can definitely see these issues in the running
> > > > Eclipse, patch or without patch. 
> > > 
> > > So you are saying that this issue already existed before my patch?
> > 
> > Yes, I also said so here:
> > 
> > (In reply to Pierre-Yves B. from comment #31)
> > > This was a problem before any of these patches though.
> 
> Oh. I missed this. So should we merge this change? What do you think?

Yes, I think we should merge current patches. :)
Comment 40 Lars Vogel CLA 2020-05-18 03:54:06 EDT
+1 for merge, no new issues are introduced AFAICS
Comment 43 Pierre-Yves Bigourdan CLA 2020-05-30 12:04:29 EDT
I don't think any of the images specified in the CSS files are being used, at least on Windows.

For example, values such as "handle-image:  url(./dragHandle.png);" are specified, but how could that work given that the images themselves are in different sub-folders?

If you put breakpoints in org.eclipse.e4.ui.internal.workbench.swt.CSSRenderingUtils, you'll notice that none of the values specified in CSS are resolved successfully. The class falls back to default images, for examples dragHandle.png in org.eclipse.e4.ui.workbench.swt.

This may explain Bug 563497 and why adding the @2x did not seem to improve scaling issues.
Comment 44 Matthias Becker CLA 2020-06-03 07:27:36 EDT
(In reply to Pierre-Yves B. from comment #43)
> I don't think any of the images specified in the CSS files are being used,
> at least on Windows.
> 
> For example, values such as "handle-image:  url(./dragHandle.png);" are
> specified, but how could that work given that the images themselves are in
> different sub-folders?
> 
> If you put breakpoints in
> org.eclipse.e4.ui.internal.workbench.swt.CSSRenderingUtils, you'll notice
> that none of the values specified in CSS are resolved successfully. The
> class falls back to default images, for examples dragHandle.png in
> org.eclipse.e4.ui.workbench.swt.
> 
> This may explain Bug 563497 and why adding the @2x did not seem to improve
> scaling issues.

I don't see this on macOS

url(./winTSFrame.png) from the CSS is translated to 

file:/......./org.eclipse.ui.themes/images/./macHandle.png

that is translated to 
...org.eclipse.ui.themes/images/macHandle.png

which is absolutely correct.