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

Bug 564884

Summary: It's very hard to see which tab is the selected tab in a section that isn't active
Product: [Eclipse Project] Platform Reporter: Ed Merks <Ed.Merks>
Component: UIAssignee: Rolf Theunissen <rolf.theunissen>
Status: RESOLVED FIXED QA Contact:
Severity: normal    
Priority: P3 CC: 1520080049, aobuchow, Lars.Vogel, philippe.dul, pyvesdev, rolf.theunissen
Version: 4.17Flags: Lars.Vogel: pmc_approved+
Target Milestone: 4.17 RC2   
Hardware: PC   
OS: Windows 7   
See Also: https://bugs.eclipse.org/bugs/show_bug.cgi?id=563496
https://git.eclipse.org/r/c/platform/eclipse.platform.ui/+/166410
https://git.eclipse.org/r/c/platform/eclipse.platform.ui/+/166414
https://bugs.eclipse.org/bugs/show_bug.cgi?id=564380
https://git.eclipse.org/r/c/platform/eclipse.platform.ui/+/168032
https://git.eclipse.org/c/platform/eclipse.platform.ui.git/commit/?id=edd57c680fa2a7077f921652418737eb42d78c0e
Whiteboard:
Bug Depends on: 551462    
Bug Blocks: 563540    
Attachments:
Description Flags
How it looks for me.
none
different tab highlighter color to indicate where the cursor is
none
themes-light-draft.png
none
status-win-2020-06
none
status-win-hightlight
none
status-win-whitebg
none
status-whitebg-grayinactive-top
none
status-fbfbfb-nohigh
none
Different options
none
Different options none

Description Ed Merks CLA 2020-07-03 02:17:31 EDT
Created attachment 283490 [details]
How it looks for me.

The theme changes from the previous release have made it almost impossible for me to see which editor's contents are being displayed when the editor area itself isn't the focus.

The only indication of which view/editor tab is active is the absence of semi-light gray line on a somewhat lighter gray background.

This requires me to look for several seconds to understand which view/editor is actually being displayed.  Note too the "Console" is bold, which draws the eye while the "History" tab is really the active one.  That's slightly less bad than the editor area, but 

It's just too subtle.  It was much better before when the "background" tabs were somewhat grayed out.
Comment 1 Lars Vogel CLA 2020-07-03 03:38:32 EDT
Could you suggest a different color? Or do you like the change proposed in Bug 563496?
Comment 2 Lars Vogel CLA 2020-07-03 03:39:00 EDT
(In reply to Lars Vogel from comment #1)
> Could you suggest a different color? Or do you like the change proposed in
> Bug 563496?

Sorry, I mean Bug 564380.
Comment 3 Ed Merks CLA 2020-07-03 04:02:08 EDT
I think in that image the blue is a little too intense, but I could live with that.  But note that that bug is about making the tab of the area with focus more identifiable and visible.  The concern of this bug is that the selected tab of the area that does *not* have focus is really hard to see.  In image on the other bug I see the background tabs are slightly grayed out again and it looks like the font is slightly bigger for the top tab.  Such things address the concerns of this bug.
Comment 4 Lars Vogel CLA 2020-07-03 05:45:00 EDT
Philippe / Pierre-Yves WDYT?
Comment 5 Rolf Theunissen CLA 2020-07-03 07:46:08 EDT
Keep in mind that the screenshot shown in the other bug is on Linux. It might be that the tabs without focus do show better on Linux then on Windows already.

There should be 3 distinct colors for the tabs:
- The selected active one
- The selected inactive ones
- The others

It seems that on Windows only 2 are distinct.
Comment 6 Pierre-Yves Bigourdan CLA 2020-07-03 12:52:44 EDT
(In reply to Ed Merks from comment #0)
> The only indication of which view/editor tab is active is the absence of
> semi-light gray line on a somewhat lighter gray background.

Actually, there is a second indicator: the selected tab has the close button, whereas others don't. ;)


(In reply to Ed Merks from comment #3)
> I think in that image the blue is a little too intense, but I could live
> with that.  But note that that bug is about making the tab of the area with
> focus more identifiable and visible.  The concern of this bug is that the
> selected tab of the area that does *not* have focus is really hard to see. 
> In image on the other bug I see the background tabs are slightly grayed out

Yes, you're right. In the updated dark theme, only the selected AND active tab has the highlighter. 

I see two main solutions here:
* we could enable the selection highlighter on all selected tabs, whether they are in the active part or not. We could then play on the colour nuances of the highlighter: the selected and active tab has a lighter colour, so we could make the highlighter of the active tab lighter as well. All other selected but non active tabs are darker, we could make their highlighters darker as well.
* we could switch back to having three distinct colours as mentioned by Rolf. This is basically going back to my original patch from Bug 551462, I had precisely used stronger colour nuances "to make the difference between the active and inactive parts more obvious".
Comment 7 Rolf Theunissen CLA 2020-07-05 06:51:24 EDT
(In reply to Pierre-Yves B. from comment #6)

> * we could switch back to having three distinct colours as mentioned by
> Rolf. This is basically going back to my original patch from Bug 551462, I
> had precisely used stronger colour nuances "to make the difference between
> the active and inactive parts more obvious".

I think it was a good idea to make the inactive unselected tabs light, otherwise indeed they are too obvious. See https://git.eclipse.org/r/c/www.eclipse.org/eclipse/news/+/162654/1/4.16/images/new-light-theme.PNG

However, they got the same color as the inactive selected tabs now. As you also can see in the Linux screenshots it is a good idea to give those tabs a slightly lighter color such that they stick out. I don't expect that this color highlight will disappear on Linux when the highligher will be enabled, or does it?
Comment 8 Gao Hao CLA 2020-07-05 09:53:01 EDT
Created attachment 283512 [details]
different tab highlighter color to indicate where the cursor is

Sorry for not knowing what `selected inactive` and `selected active` mean.
I describe it by using `where the cursor is`.

When the view/editor is selected and the cursor is in this view/editor, the view/editor tab highlighter's color could be blue.

When the view/editor is selected but the cursor is not in the view, the view/editor tab highlighter's color could be gray.

When the view/editor is not selected, there is no highlighter in the tab.
Comment 9 Philippe Dul CLA 2020-07-06 05:57:52 EDT
Created attachment 283519 [details]
themes-light-draft.png

Yes i agree, the screenshot of Ed reveals that is hard to distingish active tabs on inactive group of tabs.

Goal of original patch of colors was to be consistent for the background of the tabbar on inactive group of tabs, (the darker gray on the screenshot https://git.eclipse.org/r/c/www.eclipse.org/eclipse/news/+/162654/1/4.16/images/new-light-theme.PNG) but it has this sideback effect on active tabs of inactive group of tabs.

For me a solution may be something like top of themes-light-draft.png
- Have an highlighter colored for the current active tab 
- Have an highlighter less-colored (or gray) for the active tab on inactive group of tabs
- and maybe keep white the active tab even if the group of tabs is not active. (botton of themes-light-draft.png)
Comment 10 Ed Merks CLA 2020-07-13 05:50:42 EDT
I hope one of the fixes will be applied.
Comment 11 Rolf Theunissen CLA 2020-07-13 06:11:48 EDT
(In reply to Ed Merks from comment #10)
> I hope one of the fixes will be applied.

Me too, it seemed a minor issue, but can be a pretty annoying issue when working with the IDE. I would almost switch for the dark layout for this one (hadn't it even more annoying issues with highlighting). This should be fixed for the next cycle.

In general, there should be focus to get *all* themes in sync. Similar solutions should be chosen for all OSes and light/dark. Now the experience on Windows is worse then on Linux. And on Windows, the dark theme behaves different than the light them (take a look at unselected tabs when a stack becomes the active one).
Comment 12 Ed Merks CLA 2020-07-13 06:14:35 EDT
Yes, I noticed that dark theme was more clear with the tab "brightness".  It seemed strange the the designs are straying from each other...
Comment 13 Eclipse Genie CLA 2020-07-16 15:00:58 EDT
New Gerrit change created: https://git.eclipse.org/r/c/platform/eclipse.platform.ui/+/166410
Comment 14 Philippe Dul CLA 2020-07-16 15:02:34 EDT
Created attachment 283622 [details]
status-win-2020-06
Comment 15 Philippe Dul CLA 2020-07-16 15:03:00 EDT
Created attachment 283623 [details]
status-win-hightlight
Comment 16 Philippe Dul CLA 2020-07-16 15:03:35 EDT
Created attachment 283624 [details]
status-win-whitebg
Comment 17 Philippe Dul CLA 2020-07-16 15:08:25 EDT
I submitted a draft patch after Lars one enabling the highlighter on light theme for windows theme,
to set the white tab color on selected inactive parts.

https://git.eclipse.org/r/c/platform/eclipse.platform.ui/+/166410

Current status
https://bugs.eclipse.org/bugs/attachment.cgi?id=283622
Highlight color status
https://bugs.eclipse.org/bugs/attachment.cgi?id=283623
With white colored tabs
https://bugs.eclipse.org/bugs/attachment.cgi?id=283624

WDYT?
Comment 18 Philippe Dul CLA 2020-07-16 15:10:05 EDT
Created attachment 283625 [details]
status-whitebg-grayinactive-top

With some tests, I tend to like the highlighter on top of it, with a gray inactive tab.

see status-whitebg-grayinactive-top
Comment 19 Rolf Theunissen CLA 2020-07-16 15:20:45 EDT
(In reply to Philippe Dul from comment #18)
> Created attachment 283625 [details]
> status-whitebg-grayinactive-top
> 
> With some tests, I tend to like the highlighter on top of it, with a gray
> inactive tab.
> 
> see status-whitebg-grayinactive-top

I agree with you that this does look the best of the given propositions. I was wondering if a slightly lighter color for the inactive tab (like #FBFBFB) would be better. (I was about to just push that change to have a temporary workaround)
Also keep a look at what happens to the background color of wrapped toolbars.
Comment 20 Eclipse Genie CLA 2020-07-16 15:23:28 EDT
New Gerrit change created: https://git.eclipse.org/r/c/platform/eclipse.platform.ui/+/166414
Comment 21 Philippe Dul CLA 2020-07-16 15:25:02 EDT
Yes, this is just drafts to test and think what is best
Comment 22 Philippe Dul CLA 2020-07-16 15:32:52 EDT
Created attachment 283626 [details]
status-fbfbfb-nohigh

with FBFBFB no highlight
Comment 23 Rolf Theunissen CLA 2020-07-16 15:42:09 EDT
With respect to the blue highlight color, it seems very bright. Is it the blue from menu highlight (if that isn't native), the blue from the selection in a tree, or the blue from the hover in a tree, or the one in the background of a selected toolbar item (e.g. toggle whitespace characters)? And which one would be most appropriate.
Comment 24 Philippe Dul CLA 2020-07-16 15:50:48 EDT
Blue, or the Eclipse Orange color idk.

Another option would be to add System Accent color and let the default theme consistent with user accent color.

https://bugs.eclipse.org/bugs/show_bug.cgi?id=563282
Comment 25 Ed Merks CLA 2020-07-17 02:08:42 EDT
Keeping the top tab lighter is good.  I also find the highlight awfully bright.  I never noticed that Firefox/Thunderbird do this with their tabs because on these the top highlight is right under/on the window's title area so its bright color blends in with the title area and seems less screamingly bright.  A gradient would maybe help make it less bright...
Comment 26 Gao Hao CLA 2020-08-06 12:56:15 EDT
(In reply to Philippe Dul from comment #18)
Hi, I like your gerrit change.
Could you tell me how to keep the opened editor tab bright(which means the editor tab background color is #FFFFFF) even if the cursor leave the editor and click another view?
Comment 27 Gao Hao CLA 2020-08-06 13:03:00 EDT
(In reply to Gao Hao from comment #26)
Many ways to make the opened Java editor tab prominent:

1. tab highlighter + background color of tab
2. tab highlighter + foreground color of tab name(file name in tab)
3. tab highlighter + bold font tab name(file name in tab)
Comment 28 Rolf Theunissen CLA 2020-08-06 14:53:16 EDT
(In reply to Gao Hao from comment #27)
> (In reply to Gao Hao from comment #26)
> Many ways to make the opened Java editor tab prominent:
> 
> 1. tab highlighter + background color of tab
> 2. tab highlighter + foreground color of tab name(file name in tab)
> 3. tab highlighter + bold font tab name(file name in tab)

A constructive discussion is going on in Bug 564380.
Comment 29 Philippe Dul CLA 2020-08-07 02:59:18 EDT
(In reply to Gao Hao from comment #26)
> (In reply to Philippe Dul from comment #18)
> Hi, I like your gerrit change.
> Could you tell me how to keep the opened editor tab bright(which means the
> editor tab background color is #FFFFFF) even if the cursor leave the editor
> and click another view?

Hi, 

It's this one: https://git.eclipse.org/r/c/platform/eclipse.platform.ui/+/166410/1/bundles/org.eclipse.ui.themes/css/e4_default_win.css#60

On Eclipse (as an normal user), you can set it by Windows > Preferences > General > Apparance > Color > View and Editors
Inactive part background begin and Inactive part background end
Comment 30 Eclipse Genie CLA 2020-08-20 16:14:23 EDT
New Gerrit change created: https://git.eclipse.org/r/c/platform/eclipse.platform.ui/+/168032
Comment 31 Rolf Theunissen CLA 2020-08-20 16:21:40 EDT
(In reply to Eclipse Genie from comment #30)
> New Gerrit change created:
> https://git.eclipse.org/r/c/platform/eclipse.platform.ui/+/168032

My try to get the distinction a somewhat better, though doesn't really look as very clean. Using a full dark color for active unselected tabs is ugly, cause of wrapped toolbars having the same color.

Probably best to revert https://git.eclipse.org/r/c/platform/eclipse.platform.ui/+/162858/
Comment 32 Rolf Theunissen CLA 2020-08-20 16:23:42 EDT
(In reply to Rolf Theunissen from comment #31)
> (In reply to Eclipse Genie from comment #30)
> > New Gerrit change created:
> > https://git.eclipse.org/r/c/platform/eclipse.platform.ui/+/168032
> 
> My try to get the distinction a somewhat better, though doesn't really look
> as very clean. Using a full dark color for active unselected tabs is ugly,
> cause of wrapped toolbars having the same color.
> 
> Probably best to revert
> https://git.eclipse.org/r/c/platform/eclipse.platform.ui/+/162858/

B.T.W. the screenshot in the N&N entry for 2020-06 for the updated windows theme was taken before the last mentioned gerrit was merged (so that screenshot is not consistent with the current state)
Comment 33 Rolf Theunissen CLA 2020-08-21 03:01:05 EDT
Created attachment 283925 [details]
Different options

Please select an option, we really should have a quick fix here.
Comment 34 Philippe Dul CLA 2020-08-21 03:10:11 EDT
(In reply to Rolf Theunissen from comment #31)
> (In reply to Eclipse Genie from comment #30)
> > New Gerrit change created:
> > https://git.eclipse.org/r/c/platform/eclipse.platform.ui/+/168032
> 
> My try to get the distinction a somewhat better, though doesn't really look
> as very clean. Using a full dark color for active unselected tabs is ugly,
> cause of wrapped toolbars having the same color.
> 
> Probably best to revert
> https://git.eclipse.org/r/c/platform/eclipse.platform.ui/+/162858/

Reverting this make eclipse inconsistents with other tools in Windows 10 platform. (see https://bugs.eclipse.org/bugs/show_bug.cgi?id=551462#c39)

Using something like https://git.eclipse.org/r/c/platform/eclipse.platform.ui/+/166410, with FFFFFF or FBFBFB like attached GIF: status-fbfbfb-nohigh (https://bugs.eclipse.org/bugs/attachment.cgi?id=283626) seems more consistent IMO
Comment 35 Rolf Theunissen CLA 2020-08-21 03:14:23 EDT
Created attachment 283926 [details]
Different options
Comment 36 Rolf Theunissen CLA 2020-08-21 03:24:20 EDT
(In reply to Philippe Dul from comment #34)
> Reverting this make eclipse inconsistents with other tools in Windows 10
> platform. (see https://bugs.eclipse.org/bugs/show_bug.cgi?id=551462#c39)
> 
> Using something like
> https://git.eclipse.org/r/c/platform/eclipse.platform.ui/+/166410, with
> FFFFFF or FBFBFB like attached GIF: status-fbfbfb-nohigh
> (https://bugs.eclipse.org/bugs/attachment.cgi?id=283626) seems more
> consistent IMO

Having FFFFFF highlight makes it difficult to see which tab is actually active, and which one is in an non-active stack. Even with FBFBFB that is hard to see.
(And the new draw background feature should used, to get the toolbar background color correct, like in my current gerrit)

From a esthetics/consistency point I agree with you. However, for daily practice, it is really helpful/needed that the active selection and inactive selection stands out clearly. Also the active and inactive should have a clear distinction.
Comment 37 Rolf Theunissen CLA 2020-08-21 03:28:04 EDT
I just took a look at the Manifest editor. There the active selection is made with a round tab, the others are square. That stands out quite well, don't know if something like that is possible or desired.
Comment 38 Philippe Dul CLA 2020-08-21 03:33:32 EDT
(In reply to Rolf Theunissen from comment #36)
> (In reply to Philippe Dul from comment #34)
> > Reverting this make eclipse inconsistents with other tools in Windows 10
> > platform. (see https://bugs.eclipse.org/bugs/show_bug.cgi?id=551462#c39)
> > 
> > Using something like
> > https://git.eclipse.org/r/c/platform/eclipse.platform.ui/+/166410, with
> > FFFFFF or FBFBFB like attached GIF: status-fbfbfb-nohigh
> > (https://bugs.eclipse.org/bugs/attachment.cgi?id=283626) seems more
> > consistent IMO
> 
> Having FFFFFF highlight makes it difficult to see which tab is actually
> active, and which one is in an non-active stack. Even with FBFBFB that is
> hard to see.
> (And the new draw background feature should used, to get the toolbar
> background color correct, like in my current gerrit)
> 
> From a esthetics/consistency point I agree with you. However, for daily
> practice, it is really helpful/needed that the active selection and inactive
> selection stands out clearly. Also the active and inactive should have a
> clear distinction.

(In reply to Rolf Theunissen from comment #36)
> (In reply to Philippe Dul from comment #34)
> > Reverting this make eclipse inconsistents with other tools in Windows 10
> > platform. (see https://bugs.eclipse.org/bugs/show_bug.cgi?id=551462#c39)
> > 
> > Using something like
> > https://git.eclipse.org/r/c/platform/eclipse.platform.ui/+/166410, with
> > FFFFFF or FBFBFB like attached GIF: status-fbfbfb-nohigh
> > (https://bugs.eclipse.org/bugs/attachment.cgi?id=283626) seems more
> > consistent IMO
> 
> Having FFFFFF highlight makes it difficult to see which tab is actually
> active, and which one is in an non-active stack. Even with FBFBFB that is
> hard to see.
> (And the new draw background feature should used, to get the toolbar
> background color correct, like in my current gerrit)
> 
> From a esthetics/consistency point I agree with you. However, for daily
> practice, it is really helpful/needed that the active selection and inactive
> selection stands out clearly. Also the active and inactive should have a
> clear distinction.

Yes agree both with you for esthetics/consistency and daily-practice.

Hmm indeed, (with Bug 565951 ?), the previous screenshot status-fbfbfb-nohigh is no longer valid, the toolbar looks gray like the 'gerrit' screenshot ins't it.

'old-lighter' or 'gerrit' looks both good IMO
Comment 39 Lars Vogel CLA 2020-08-21 04:48:10 EDT
(In reply to Philippe Dul from comment #38)
> (In reply to Rolf Theunissen from comment #36)
> 
> 'old-lighter' or 'gerrit' looks both good IMO

Rolf, which one is your favorite?
Comment 40 Rolf Theunissen CLA 2020-08-21 05:21:17 EDT
(In reply to Lars Vogel from comment #39)
> (In reply to Philippe Dul from comment #38)
> > (In reply to Rolf Theunissen from comment #36)
> > 
> > 'old-lighter' or 'gerrit' looks both good IMO
> 
> Rolf, which one is your favorite?

After some more testing, I do like the 'old-ligher' best. I have updated the Gerrit too (in fact it is even slightly lighter to better match e.g. Powerpoint background dark #E6E6E6, although that is not a gradient)
Comment 41 Lars Vogel CLA 2020-08-21 05:31:19 EDT
(In reply to Rolf Theunissen from comment #40)
> (In reply to Lars Vogel from comment #39)
> > (In reply to Philippe Dul from comment #38)
> > > (In reply to Rolf Theunissen from comment #36)
> > > 
> > > 'old-lighter' or 'gerrit' looks both good IMO
> > 
> > Rolf, which one is your favorite?
> 
> After some more testing, I do like the 'old-ligher' best. I have updated the
> Gerrit too (in fact it is even slightly lighter to better match e.g.
> Powerpoint background dark #E6E6E6, although that is not a gradient)

As Philippe and you (Rolf) like old-lighter, lets go with this one. I personally don't have a strong opinion here.
Comment 42 Rolf Theunissen CLA 2020-08-27 04:12:37 EDT
Can somebody review please review the change, that is the only change that it will make 4.17 (if not already missed the window). According the the rules the change does need a positive review of an additional committer.
Comment 44 Ed Merks CLA 2020-08-27 06:19:21 EDT
Thanks Rolf!