Height reduction of highlight

[mvm-sap]

Reduced the thickness of the blue line (highlight) for selected tabs.
For the full details of the change including screenshots see issue: #2114

See the highlight for the selected Properties tab

[iloveeclipse]

As usually, screenshot before/after would be nice.

[github-actions]

Test Results

 1 814 files  + 1   1 814 suites  +1   1h 30m 5s ⏱️ + 1m 16s
 7 683 tests ± 0   7 454 ✅  -  1  228 💤 ± 0  1 ❌ +1 
24 083 runs  +45  23 336 ✅ +34  746 💤 +10  1 ❌ +1 

For more details on these failures, see this check.

Results for commit 78a2b7a. ± Comparison against base commit e30a52d.

♻️ This comment has been updated with latest results.

[HeikoKlare]

This change even makes sense without the overall theme changes, doesn't it? So would it be possible to remove the theme change commit from this PR and make it only consist of the hight reduction? We can probably can faster agree on that and merge than on the overall theme changes.

[laeubi]

And can we please add the relevant screenshots here? Its really hard to guess/follow what will exactly be affected here.

Also as far as I can see this will affect all user of CTab and is not only a styling change.

[HeikoKlare]

Just tried it out. To get a first impression, find some screenshots below. Looks better in my opinion. The old marker was pretty bold and made the overall header not look layouted correctly (the text looked as if it should be placed more to the top when the marker popped up). Only thing I see is a slight vertical misplacement of the marker (there is 1 pixel white line in the tab header below the marker line). This is better visible when using 200% monitor scaling.

Before 100%:

After 100%:

Before 200%:

After 200%:

[thomasritter]

@HeikoKlare Fully agree with you. We always wanted to do this separately. Regarding the misalignment. Did not notice this before. Looks like we have to push it down by one pixel. What do you think?

[HeikoKlare]

I think the cause for the misalignment is the combination with this magic number used for the vertical placement. Changing it to 1 seems to solve the issue.

I propose to put the highlight thickness into a separate variable and use it here for the offset calculation as well as for the line thickness. That improves modifiability and comprehensibility (like always when facing magic numbers 🙂 ).

[HeikoKlare]

Thank you for the update! To me, this looks good now. @mvm-sap could you please squash the commits to a single one.

I propose to merge this soon to receive feedback of early adopters that do not take notice of and investigate each PR. Thus, if no one objects, I will merge until end of today.

Here is how it looks now, also incorporating the new theme that has just been merged. I see even more value in this change with the new themes, as now every view/editor stack shows a highlight at the selected tab, which makes the existing highlights look even more bulky.

Before:

After:

[thomasritter]

Looks good to me as well. Yes, once we start using the theme we noticed that the underline is too thick. Looking forward to see how it feels with the smaller one.

[HeikoKlare]

Thank you for updating the PR! Looks good now. I've just tested again. Once the builds are done, let's merge it, so it might still be part of M2.

[vogella]

Mac failure seems unrelated

[HeikoKlare]

Mac failure seems unrelated

@vogella fyi: this kind of failure is documented here: eclipse-pde/eclipse.pde#1310
The problem is that these kinds of failures abort a build, thus you will not know whether the build would have also failed for other reasons later on. I don't see a problem w.r.t. this PR, but just wanted to share information about this kind of failure, so in case there are PRs with changes that have a chance to fail OS-specifically, it might make sense to rerun such builds.

[thomasritter]

I played around with the newest iBuild, yesterday. For me this is a change which needs time to get used to. So, I do not want to give an opinion on it, yet. However, while I personally prefer minimalist designs. I am currently not sure if this is pushing it too far to the minimalist side. In the end, form should follow functions and not the other way around.

@HannesWell already posted some thoughts that the new tab design makes them less visible (#2114 (comment)). The new tab design is the standard in modern UIs and modern means more minimalist, more focus on whitespacing. But his comment motivated me to look at existing designs for tabs, again. Here a collection of examples which might be helpful for you.

Eclipse new light theme before this change (Line-weight: thick, Font-weight: light)

Eclipse new light theme with this change (Line-weight: thin, Font-weight: light)

Intellij light theme (Line-weight: thick, Font-weight: light)

VS Code light theme (Line-weight: thin, Font-weight: medium -> not selected tabs are grey)

Microsoft Teams (Line-weight: thick, Font-weight: thick)

Microsoft Outlook (Line-weight: thick, Font-weight: thick)

Some thoughts
The current tab design is definitely the right direction. Following this direction more tweaks are possible:

1. Keep the old thicker line thickness but round off the edges. Intellij und Microsoft Office products use that trick. The line is thicker but feels a little bit lighter. Here a quick mock up.

2. The new light theme removed a lot of visual clutter including a lot of vertical and horizontal lines. For the view tabs section it might be better to add the line back. It helps separating the view tab section from the view content section. Have a look at the Intellij screenshot to see how this looks like. With the additional line the thin blue line feels a lot stronger. I also mocked an Eclipse version below.

What are your thoughts?

[BeckerWdf]

Some thoughts The current tab design is definitely the right direction. Following this direction more tweaks are possible:

1. Keep the old thicker line thickness but round off the edges. Intellij und Microsoft Office products use that trick. The line is thicker but feels a little bit lighter.

2. The new light theme removed a lot of visual clutter including a lot of vertical and horizontal lines. For the view tabs section it might be better to add the line back. It helps separating the view tab section from the view content section. Have a look at the Intellij screenshot to see how this looks like. With the additional line the thin blue line feels a lot stronger.
   What are your thoughts?

I personally have the feeling that proposal 2 is a good one. It not only makes the "blue" line feeling thicker but also helps in separating the view tabs from the view content.

[HannesWell]

2. The new light theme removed a lot of visual clutter including a lot of vertical and horizontal lines. For the view tabs section it might be better to add the line back. It helps separating the view tab section from the view content section. Have a look at the Intellij screenshot to see how this looks like. With the additional line the thin blue line feels a lot stronger.
   What are your thoughts?

I personally have the feeling that proposal 2 is a good one. It not only makes the "blue" line feeling thicker but also helps in separating the view tabs from the view content.

Agree with that. I would also prefer a visual horizontal separation better, especially for inactive tabs.