Some Eclipse Foundation services are deprecated, or will be soon. Please ensure you've read this important communication.

Bug 544569

Summary: CSSRenderingUtils.rotate method should not depend on pixels in hidpi
Product: [Eclipse Project] Platform Reporter: Sravan Kumar Lakkimsetti <sravankumarl>
Component: UIAssignee: Sravan Kumar Lakkimsetti <sravankumarl>
Status: VERIFIED FIXED QA Contact:
Severity: normal    
Priority: P3 CC: daniel_megert, gautier.desaintmartinlacaze, ma.becker
Version: 4.11   
Target Milestone: 4.12 M3   
Hardware: PC   
OS: All   
See Also: https://git.eclipse.org/r/141931
https://git.eclipse.org/c/platform/eclipse.platform.ui.git/commit/?id=dc1c87761283776c92e73ef411a8c7586b45e3ef
Whiteboard:
Bug Depends on:    
Bug Blocks: 489451    
Attachments:
Description Flags
Screenshot with no interpolation
none
Screenshot with interpolation high
none
Red Border problem on Linux none

Description Sravan Kumar Lakkimsetti CLA 2019-02-19 05:23:02 EST
The above method manipulates pixels for providing transparency. 
1. Set the background to red
2. Draw required images
3. Get the pixels and mark the pixels where we found red color as transparent.

In Hidpi mode to get smooth drawing we need to get high interpolation of pixels. This causes the edge pixels to have different color than red. So we end up with red borders for icons which have curves.
Comment 1 Sravan Kumar Lakkimsetti CLA 2019-02-19 05:25:26 EST
Created attachment 277615 [details]
Screenshot with no interpolation
Comment 2 Sravan Kumar Lakkimsetti CLA 2019-02-19 05:26:50 EST
Created attachment 277616 [details]
Screenshot with interpolation high
Comment 3 Sravan Kumar Lakkimsetti CLA 2019-02-27 05:16:23 EST
Created attachment 277701 [details]
Red Border problem on Linux

This problem exists on Linux as well. Screenshot attached
Comment 4 Sravan Kumar Lakkimsetti CLA 2019-03-13 01:38:27 EDT
Here is the analysis I have done 

Current implementation is to get a PNG image https://git.eclipse.org/c/platform/eclipse.platform.ui.git/tree/bundles/org.eclipse.ui.themes/images/gtkTSFrame.png rotate and stretch it to appropriate size. 
Since SWT does not handle transparency properly, platform UI identifies transparent pixels using the following logic
  create a new image with off-red (0x7d,0,0) background
  draw the TSFrame.png on top of above image after making necessary rotate and 
  stretch operations
  now identify the pixels with off red (0x7d,0,0) color and mark them as 
  transparent
In this process the image manipulation algorithms use interpolation at the edges. This causes blending of color from one color to another(In this case off white to off red at the edges). So there will one or two pixels with slightly different shade than off red at the edges. When we starting marking the pixels as transparent, we don't have a way to identify the colors at the edges. So they were not marked as transparent. This is causing red/pink borders. 
Happens on Mac and Linux. On windows the border doesn't gets drawn at all.

The approach I am taking is to draw the border using GC utilities(drawLine, drawArc) directly instead of drawing image on to another image and resize
Comment 5 Sravan Kumar Lakkimsetti CLA 2019-04-09 02:39:17 EDT
Did some more testing and found that this problem occurs only when the ImageBasedFrame requires rotation.

Working with Kalyan on this for a fix
Comment 6 Sravan Kumar Lakkimsetti CLA 2019-05-10 02:03:55 EDT
(In reply to Sravan Kumar Lakkimsetti from comment #5)
> Did some more testing and found that this problem occurs only when the
> ImageBasedFrame requires rotation.
> 
> Working with Kalyan on this for a fix

I got a working solution. Will create a gerrit patch by May 13, 2019.
Comment 7 Eclipse Genie CLA 2019-05-10 02:54:19 EDT
New Gerrit change created: https://git.eclipse.org/r/141931
Comment 8 Sravan Kumar Lakkimsetti CLA 2019-05-13 00:57:16 EDT
To mark the background as transparent the rotate method uses the following algorithm.

1. Set the background to red
2. Set transform(class used for rotation) to 90% clockwise
3. Draw required images
4. get the pixel data from resultant image.
5. compare the color of each pixel to the color used in step 1. if same mark that pixel as transparent.

With Hi Dpi and auto scaling, step 3 causes the image to be scaled up. During this process the image scales up using either rectilinear or smooth interpolation in windows and Linux. But in case of Mac there are 5 different interpolation algorithms, all of them blend the edge colors with neighboring pixels. This blending issue occurs on Windows and Linux with smooth interpolation.

The problem we have here due to blending of image edge with the background color, the red color used as background changes to slightly different shade. This causes step 5 to fail at the image edges causing a red border.

The solution here is to have load rotated image from theme when the image is required to be rotated. This way we need not mark background as transparent explicitly. 

The code changes are to add rotated images for frame-image and drag handle image and use them in the image based frame.

Tested on Windows, Linux and Mac
Comment 9 Sravan Kumar Lakkimsetti CLA 2019-05-13 02:02:48 EDT
Merged to master
Comment 11 Sravan Kumar Lakkimsetti CLA 2019-05-13 23:28:51 EDT
Verified in I20190513-1800 on Ubuntu 18.04