1398973 - Active tab is not visibly emphasized with classic theme and gtk3 or the Windows Classic theme.

Status: RESOLVED FIXED

(SeaMonkey :: Themes, defect)

Description

[Hogarth]

Attachment: my current tab bar

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:52.0) Gecko/20100101 Firefox/52.0 SeaMonkey/2.49.1
Build ID: 20170831043804

Steps to reproduce:

Open up some tabs.


Actual results:

Find it difficult to see which tab I've currently got active. This happens regardless of the background theme I have. Modern theme is good. Default theme is bad.

See the screenshot below to see what I mean.

Also no background theme appears to change any aspect of the tab bar, which is why I'm stuck with this glorious colour scheme. I must have a light background in order to read the tab text (and see it)


Expected results:

The active tab should be blatantly obvious.

Background themes should be able to adjust the tab text and colours to better match their colours.

Comment 1

[Karsten Düsterloh]

Until fixed for real, put something like this into your userChrome.css file:

/* Bug #1398973: add missing tab lwtheming with GTK3 */
.tabmail-tab:-moz-lwtheme,
.tabbrowser-tab:-moz-lwtheme
{
  -moz-appearance:none!important;
  background-color:rgba(255,255,255,0.8)!important;
}

Comment 2

[Frank-Rainer Grahl (:frg)]

Attachment: 1398973-ActiveTab.patch

Works fine for me with Windows Classic and CentOS 7.4. OS should not be affected.

It is not a100% solution: 

> .tabmail-tab[type="folder"][NewMessages="true"],
> .tabmail-tab[type="folder"][IsServer="true"] {

sets the font in mail tabs to "bold" too but not sure if we should experiment with colors here.

Comment 3

[Stefan [:stefanh]]

Comment on attachment 8937344 [details] [diff] [review]
1398973-ActiveTab.patch

As you say, bold is used for something else in mailNews, so I don't think this is a good idea (you want the solution to cover all instances). I would do something with the background instead. Or maybe the bottom border.

Comment 4

[Frank-Rainer Grahl (:frg)]

Thanks for the feedback. Unless I override moz-apperance and set it to none nothing else seems to stick. Lower opacity would work too but then then the not selected tabs would be too blurry to read the title.

Comment 5

[Stefan [:stefanh]]

Ah, yes. -moz-appearance normally overrides border/background. So, is this exclusively gtk3 or is it an issue on windows/gtk2 too?

Comment 6

[Stefan [:stefanh]]

Apart from tabbrowser tabs, how does other tabs look (mouswheel preferences, PageInfo)?

Comment 7

[Hogarth]

(In reply to Stefan [:stefanh] from comment #5)
> Ah, yes. -moz-appearance normally overrides border/background. So, is this
> exclusively gtk3 or is it an issue on windows/gtk2 too?

I've had no problems in gtk2 land. This only surfaced when SeaMonkey switched to gtk3.

Comment 8

[Frank-Rainer Grahl (:frg)]

Attachment: Capture.PNG

It is not a gtk3 only problem. At least the Windows Classic theme is also affected. Pageinfo has a dotted border around the inner textbox.

Currently -moz-appearance seems to be set to tab. If fiddling with borders or backgrounds it would probably be needed to set it to none and redo the whole styling. Need to look how the mail folder tabs look in italics.

Comment 9

[Stefan [:stefanh]]

-moz-appearance is supposed to be a way to set a native appearance of a widget. How does a native Windows / gtk3 application handle active tabs?

Comment 10

[Frank-Rainer Grahl (:frg)]

Attachment: 1398973-ActiveTab-V2.patch

A new try with a color bar. Looks nice and even a little modern :)

Comment 11

[Frank-Rainer Grahl (:frg)]

Attachment: Tab with color bar

Top to bottom:

Windows 7 Classic
Windows 7 Aero
Linux
Windows Aero without the patch.

Comment 12

[Frank-Rainer Grahl (:frg)]

The Blue is maybe a little too dark especially in XP when you use a shade of red or another color for the title bar. Open for suggestions.

Comment 13

[Stefan [:stefanh]]

Comment on attachment 8938814 [details] [diff] [review]
1398973-ActiveTab-V2.patch

See my question in comment #9. I would change the background and/or the bottom border.
__________
|________| Not selected
__________
|        | Selected (lighter background)

Comment 14

[Frank-Rainer Grahl (:frg)]

See my question in comment #9. 

As far as I see it on gtk3 there is no native styling :) All depends on the installed theme.

On Windows the current styling is imho native which results in gray and gray in the Classic theme. Plain white and gradient grays in Aero.

> I would change the background and/or the bottom border.

I don't want to mess with background or text colors outside of the borders because I fear that will result in unreadable text or alien colors depending on the theme. I actually like the lower border in the active tab but this could be removed and current behaviour be restored. Lets wait for IanN and decide.

Comment 15

[Frank-Rainer Grahl (:frg)]

Attachment: Capture.PNG

Variation with Royal Blue and bottom border removed.

filter: brightness could also be used but would light up the whole box including the icon and text.

Comment 16

[Ian Neal]

Comment on attachment 8938814 [details] [diff] [review]
1398973-ActiveTab-V2.patch

>+++ b/suite/themes/classic/navigator/tabbrowser.css
>@@ -46,19 +46,27 @@ tabpanels {
>   list-style-image: url("chrome://communicator/skin/icons/connecting.png");
> }
> 
> .tabbrowser-tab[progress] {
>   list-style-image: url("chrome://global/skin/icons/loading.png");
> }
This diff is on top of another patch, so had to manually apply the changes.

> 
> .tabbrowser-tab[selected="true"] {
>+  margin-bottom: 1px;
>   margin-bottom: 0px;
Why both of these?

>   padding-top: 2px; /* compensates the top margin of background tabs */
>   padding-bottom: 3px; /* compensates the bottom margin of background tabs */
>+  background-color: -moz-dialog;
>+  -moz-border-top-colors: unset;
>+  -moz-border-right-colors: unset;
>+  color: -moz-dialogtext;
>+  border: 1px solid Gray;
>+  border-top: 2px solid DarkBlue;
>+  -moz-appearance: none;
> }
r=me for those addressed / fixed.

Comment 17

[Frank-Rainer Grahl (:frg)]

Attachment: 1398973-ActiveTab-V3.patch

[Approval Request Comment]
Regression caused by (bug #): --
User impact if declined: active tab not immediatly visible with some Linux and Windows themes.
Testing completed (on m-c, etc.): c-r c-esr52
Risk to taking this patch (and alternatives if risky): none minor fix.
String changes made by this patch: --

NITS addressed. Bottom border removed and switched to lighter blue as agreed on IRC. r+ from IanN retained.

Comment 18

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/23a721e864ac
Show active tab with a color stripe to make it more visible. r=IanN

Comment 19

[Ian Neal]

Comment on attachment 8941135 [details] [diff] [review]
1398973-ActiveTab-V3.patch

a=me for c-b/c-esr

Comment 20

[Frank-Rainer Grahl (:frg)]

https://hg.mozilla.org/releases/comm-beta/rev/7fa11f6744e885b4de4277cad0943d2550e3c345
https://hg.mozilla.org/releases/comm-esr52/rev/1616d2e37b86697fd4935afcadf42d4e627a4324

Comment 21

[John A.]

There is no mention of an about:config preference to override this change. If you prefer the former appearance you can restore it by adding the following to your userChrome.css file...

/* Undo patch for bug 1398973 - blue line on active tab */
.tabbrowser-tab[selected="true"] {
  -moz-appearance: tab !important;
}

Comment 22

[Frank-Rainer Grahl (:frg)]

Target 2.53.1
https://gitlab.com/seamonkey-project/seamonkey-2.53-comm/-/commit/2cbdb430f2658940721df7ab9a2780e21f3e20dd