1685382 - Thick border caused by the background linear gradient in the tabs toolbar on 4k monitor

Status: RESOLVED FIXED

(Thunderbird :: Theme, defect)

Description

[Alessandro Castellani [:aleca]]

Attachment: Screenshot from 2021-01-06 10-28-09.png

The #tabs-toolbar element simulates a bottom border with a linear gradient background image starting with a grey color at 1px.

I have a 32" monitor at 3840x2160 with larger text.
With that resolution, the background gradient shows a thicker border, almost 2px.

Comment 1

[Richard Marti (:Paenglab)]

Attachment: 1685382-tabs-border-device-pixel.patch

Added the --tabs-tabbar-border-size variable and through this it was possible to remove the --tab-toolbar-overlap variable.

The --tabs-tabbar-border-size isn't really for a border but a linear-gradient but the gradient is used to imitate a border.

Comment 2

[Alessandro Castellani [:aleca]]

Comment on attachment 9195734 [details] [diff] [review]
1685382-tabs-border-device-pixel.patch

Review of attachment 9195734 [details] [diff] [review]:
-----------------------------------------------------------------

This works and looks good for HiDPI monitors at different scaling factors, good job.

Unfortunately it doesn't solve the problem for me, as I'm on a 4k monitor with no scaling but larger font.
Linux and its various apps still don't perfectly handle HiDPI, that's why a font scaling factor of 1.25 is better than actually scaling the entire display.
I doubt there's a media query that can detect the font scaling on Linux, and I think this is a bit of an edge case that should affect many users.

Comment 3

[Richard Marti (:Paenglab)]

Attachment: 1685382-tabs-border-device-pixel.patch

I tried the font scaling on Ubuntu but the bottom border is still correct. But I found that the right border of the first tabs isn't shown when it is selected and more tabs exist. Setting the width on the ::before ::after elements helped for me.

Comment 4

[Richard Marti (:Paenglab)]

Attachment: 1685382-tabs-border-device-pixel.patch

Same as before but using a box-shadow instead of the gradient.

Comment 5

[Alessandro Castellani [:aleca]]

Comment on attachment 9196022 [details] [diff] [review]
1685382-tabs-border-device-pixel.patch

Review of attachment 9196022 [details] [diff] [review]:
-----------------------------------------------------------------

Perfect! This solves the issue, great work.

::: mail/themes/shared/mail/tabmail.css
@@ +239,5 @@
>  .tabmail-tab[visuallyselected]::after,
>  .tabmail-tab[visuallyselected] + .tabmail-tab::before {
>    border-color: var(--tabs-border-color);
>    margin-top: 0;
> +  margin-bottom: var(--tabs-tabbar-border-size);

With the box shadow, these pseudo elements look good with a margin bottom of 0px.
Can you confirm?

Comment 6

[Richard Marti (:Paenglab)]

(In reply to Alessandro Castellani (:aleca) from comment #5)

Comment on attachment 9196022 [details] [diff] [review]
1685382-tabs-border-device-pixel.patch

Review of attachment 9196022 [details] [diff] [review]:

Perfect! This solves the issue, great work.

::: mail/themes/shared/mail/tabmail.css
@@ +239,5 @@

.tabmail-tab[visuallyselected]::after,
.tabmail-tab[visuallyselected] + .tabmail-tab::before {
border-color: var(--tabs-border-color);
margin-top: 0;

• margin-bottom: var(--tabs-tabbar-border-size);

With the box shadow, these pseudo elements look good with a margin bottom of
0px.
Can you confirm?

No, the borders use a partly transparent colour and the on the overlapping edge we will have a darker pixel.

Comment 7

[Richard Marti (:Paenglab)]

Attachment: 1685382-tabs-border-device-pixel.patch

FX has the overlapping edge too. So using 0px now.

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/a7ce2dd0091d
Use a box-shadow instead of gradient for the tabbar border and use device pixel. r=aleca