Thick border caused by the background linear gradient in the tabs toolbar on 4k monitor
Categories
(Thunderbird :: Theme, defect)
Tracking
(thunderbird_esr78 wontfix)
Tracking | Status | |
---|---|---|
thunderbird_esr78 | --- | wontfix |
People
(Reporter: aleca, Assigned: Paenglab)
References
Details
Attachments
(2 files, 3 obsolete files)
24.83 KB,
image/png
|
Details | |
7.50 KB,
patch
|
Paenglab
:
review+
|
Details | Diff | Splinter Review |
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.
Assignee | ||
Comment 1•3 years ago
|
||
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.
Reporter | ||
Comment 2•3 years ago
|
||
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.
Assignee | ||
Comment 3•3 years ago
|
||
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.
Assignee | ||
Comment 4•3 years ago
|
||
Same as before but using a box-shadow instead of the gradient.
Reporter | ||
Comment 5•3 years ago
|
||
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?
Assignee | ||
Comment 6•3 years ago
|
||
(In reply to Alessandro Castellani (:aleca) from comment #5)
Comment on attachment 9196022 [details] [diff] [review]
1685382-tabs-border-device-pixel.patchReview 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.
Assignee | ||
Comment 7•3 years ago
|
||
FX has the overlapping edge too. So using 0px now.
Pushed by alessandro@thunderbird.net:
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
Updated•3 years ago
|
Description
•