Bug 538740 - Add square tab implementation to CTabRendering
Summary: Add square tab implementation to CTabRendering
Status: RESOLVED FIXED
Alias: None
Product: Platform
Classification: Eclipse Project
Component: UI (show other bugs)
Version: 4.8   Edit
Hardware: PC Linux
: P3 enhancement (vote)
Target Milestone: 4.16 M3   Edit
Assignee: Mike Marchand CLA
QA Contact:
URL:
Whiteboard:
Keywords: helpwanted, noteworthy, ui
: 491032 (view as bug list)
Depends on: 562183 563345
Blocks: 560385 562221 563423
  Show dependency tree
 
Reported: 2018-09-06 10:53 EDT by Lars Vogel CLA
Modified: 2020-08-19 09:05 EDT (History)
11 users (show)

See Also:


Attachments
Screenshot (13.16 KB, image/png)
2018-09-06 10:53 EDT, Lars Vogel CLA
no flags Details
Native Tabs on Linux (62.01 KB, image/png)
2018-09-06 11:03 EDT, Lars Vogel CLA
no flags Details
Native Tabs on Linux - LIght theme (56.10 KB, image/png)
2018-09-06 11:08 EDT, Lars Vogel CLA
no flags Details
Current dark styling (55.68 KB, image/png)
2018-09-06 11:15 EDT, Lars Vogel CLA
no flags Details
Current light styling under Linux (56.02 KB, image/png)
2018-09-06 11:15 EDT, Lars Vogel CLA
no flags Details
Current rendering (107.98 KB, image/png)
2018-09-07 06:52 EDT, Matthias Becker CLA
no flags Details
rendering with lars change (90.64 KB, image/png)
2018-09-07 06:53 EDT, Matthias Becker CLA
no flags Details
google chrome currently on macOS (26.50 KB, image/png)
2018-09-07 06:56 EDT, Matthias Becker CLA
no flags Details
Screenshot (454.29 KB, image/png)
2019-06-20 16:31 EDT, Lars Vogel CLA
no flags Details
Square Tabs (46.29 KB, image/png)
2020-04-14 17:48 EDT, Mike Marchand CLA
no flags Details
Jagged corners (2.50 KB, image/png)
2020-04-15 04:11 EDT, Lars Vogel CLA
no flags Details
Linux no theming (61.40 KB, image/png)
2020-04-16 06:31 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 Lars Vogel CLA 2018-09-06 10:53:11 EDT
Created attachment 275723 [details]
Screenshot

IIRC Eclipse 4.2 was released around 2012 and introduced "rounded tabs" styling for CTabFolder.

In a recent developer discussion, the topic came up. It was stated that the rounded tabs of Eclipse look "old", "outdated" or "ridiculous", as it was phrased. 

Looking at the most used application on my desktop the Browser and at several popular Android apps, I must agree, the current styling in Eclipse does not look modern. Modern application seem to avoid rounded tabs. See attachment for Chrome and Firefox.

I suggest we switch back to use default tabs from the OS. This way the tabs of Eclipse will be in sync with the OS.
Comment 1 Lars Vogel CLA 2018-09-06 11:03:59 EDT
Created attachment 275725 [details]
Native Tabs on Linux
Comment 2 Lars Vogel CLA 2018-09-06 11:08:07 EDT
Created attachment 275726 [details]
Native Tabs on Linux - LIght theme
Comment 3 Eclipse Genie CLA 2018-09-06 11:09:36 EDT
New Gerrit change created: https://git.eclipse.org/r/128851
Comment 4 Lars Vogel CLA 2018-09-06 11:09:50 EDT
Matthias, what do you think of the change? Can you upload screenshots about the difference under Mac?
Comment 5 Lars Vogel CLA 2018-09-06 11:14:40 EDT
To give my opinion, I don't link the native tabs a lot. An alternative experiment would be to adjust the CTabRendering implementation to draw flat tabs.
Comment 6 Lars Vogel CLA 2018-09-06 11:15:31 EDT
Created attachment 275727 [details]
Current dark styling
Comment 7 Lars Vogel CLA 2018-09-06 11:15:58 EDT
Created attachment 275728 [details]
Current light styling under Linux
Comment 8 Matthias Becker CLA 2018-09-07 06:52:40 EDT
Created attachment 275740 [details]
Current rendering
Comment 9 Matthias Becker CLA 2018-09-07 06:53:04 EDT
Created attachment 275741 [details]
rendering with lars change
Comment 10 Matthias Becker CLA 2018-09-07 06:56:51 EDT
Created attachment 275742 [details]
google chrome currently on macOS

I would not say that "modern" applications avoid curved corners.
Just look how the current version of chrome does draw tabs
Comment 11 Lars Vogel CLA 2018-10-25 11:21:46 EDT
FYI - Several people on the EclipseCon complained about the default tabs in Eclipse. We should try to provide them without drawing artifacts (the corners are currently pixelated).
Comment 12 Lars Vogel CLA 2019-06-20 16:31:53 EDT
Created attachment 279032 [details]
Screenshot

Screenshot compares Code tab style with Eclipse. Code looks way better IMHO.
Comment 13 Lars Vogel CLA 2020-04-14 10:46:55 EDT
Mike indicated via email that he is interest to contribute this. 

Mike, as discussed would be great to have this in CTabFolderRenderer and allow to set via CSS property.
Comment 14 Eclipse Genie CLA 2020-04-14 17:42:14 EDT
New Gerrit change created: https://git.eclipse.org/r/160948
Comment 15 Mike Marchand CLA 2020-04-14 17:48:44 EDT
Created attachment 282443 [details]
Square Tabs
Comment 16 Eclipse Genie CLA 2020-04-14 17:55:38 EDT
New Gerrit change created: https://git.eclipse.org/r/160949
Comment 17 Matthias Becker CLA 2020-04-15 01:29:39 EDT
(In reply to Eclipse Genie from comment #16)
> New Gerrit change created: https://git.eclipse.org/r/160949

shouldn't his be an amend to https://git.eclipse.org/r/160948?
Comment 18 Lars Vogel CLA 2020-04-15 04:11:43 EDT
Created attachment 282447 [details]
Jagged corners
Comment 19 Lars Vogel CLA 2020-04-15 04:14:09 EDT
What is the general feeling about moving to square tabs? 

The "rounded" corners are not really round, especially on low resolutions they look bad, see screenshot.

Other successful newcomers use square corners.

IMHO our round corners look outdated.
Comment 20 Mickael Istria CLA 2020-04-15 04:20:31 EDT
(In reply to Lars Vogel from comment #19)
> What is the general feeling about moving to square tabs? 

As long as it doesn't affect usability (ie color palette, close icon, styled label, context menu), I personally don't care.
I think the CTab should try to inherit as much as possible from the OS native tabs. So if all supported OS native tabs are all square in the OS, then let's just mimic it be default.
Comment 21 Mike Marchand CLA 2020-04-15 17:35:39 EDT
I have updated the patch for this enhancement.  I have removed the concept of a property for corner shape and we are just using corner radius 0 to indicate to CTabRendering that the tabs should be square.

Marking this as depending on Bug 562183 since it will not look correct until the trim computation is no longer using cornerSize.
Comment 22 Lakshmi P Shanmugam CLA 2020-04-16 02:15:55 EDT
Have you tried using the CTabFolder.setSimple(true) to get the simple, not-rounded tabs? 
This can already be enabled in Eclipse to see how it looks by disabling theming - General > Appearance > uncheck 'Enable theming'.
Comment 23 Mickael Istria CLA 2020-04-16 02:49:15 EDT
(In reply to Lakshmi Shanmugam from comment #22)
> Have you tried using the CTabFolder.setSimple(true) to get the simple,
> not-rounded tabs? 
> This can already be enabled in Eclipse to see how it looks by disabling
> theming - General > Appearance > uncheck 'Enable theming'.

The issue with disabled theme IMO is that we miss the various tab colors that help to easily identify which tabFoder/tab is active and has focus.
Comment 24 Lakshmi P Shanmugam CLA 2020-04-16 02:58:03 EDT
(In reply to Mickael Istria from comment #23)
> (In reply to Lakshmi Shanmugam from comment #22)
> > Have you tried using the CTabFolder.setSimple(true) to get the simple,
> > not-rounded tabs? 
> > This can already be enabled in Eclipse to see how it looks by disabling
> > theming - General > Appearance > uncheck 'Enable theming'.
> 
> The issue with disabled theme IMO is that we miss the various tab colors
> that help to easily identify which tabFoder/tab is active and has focus.

We won't be able to select dark theme or other themes too if theming is disabled.
I was suggesting to disable the theming only to see how the simple tabs look in Eclipse. If the tabs looks good, CTabFolder.setSimple() can be enabled to get the look, may be even via CSS.
Comment 25 Lars Vogel CLA 2020-04-16 06:31:29 EDT
Created attachment 282467 [details]
Linux no theming

Screenshot of Linux with theming turned of, so square tabs looks more natural.
Comment 26 Mike Marchand CLA 2020-04-16 08:21:12 EDT
Lars, I should point out that those simple tabs aren't square.
Comment 27 Lars Vogel CLA 2020-04-16 08:24:47 EDT
(In reply to Mike Marchand from comment #26)
> Lars, I should point out that those simple tabs aren't square.

Less round :-)
Comment 29 Eclipse Genie CLA 2020-04-16 10:05:40 EDT
New Gerrit change created: https://git.eclipse.org/r/161076
Comment 30 Lars Vogel CLA 2020-04-16 10:11:21 EDT
I adjusted this bug to provide the implementation of square tabs. How we use them will be handled via Bug 562221. 

I can image that we have users which loves our round tabs and that we have users which would love square tabs.
Comment 31 Lars Vogel CLA 2020-04-16 10:13:51 EDT
Thanks, Mike for this nice new option. Could you provide an N&N for this new option? See https://git.eclipse.org/r/#/c/160926/ for an example.
Comment 32 Eclipse Genie CLA 2020-04-16 21:16:16 EDT
New Gerrit change created: https://git.eclipse.org/r/161111
Comment 33 Mike Marchand CLA 2020-04-16 21:17:31 EDT
Added a new and noteworthy snippet with some screenshots of light and dark themes.
Comment 34 Lars Vogel CLA 2020-04-17 04:57:56 EDT
*** Bug 491032 has been marked as a duplicate of this bug. ***
Comment 35 Mike Marchand CLA 2020-04-17 10:51:24 EDT
Lars, I don't think that was the correct bug to mark as a duplicate to this one.
Comment 37 Niraj Modi CLA 2020-05-21 06:15:50 EDT
This bug fix caused regression in Eclipse bug 563423.
Comment 38 Andrey Loskutov CLA 2020-05-26 08:13:32 EDT
(In reply to Niraj Modi from comment #37)
> This bug fix caused regression in Eclipse bug 563423.

And another regression in bug 563575. Please check if that could be fixed for RC1.
Comment 39 Andrey Loskutov CLA 2020-05-26 08:42:12 EDT
Note also bug 563585.