1644730 - [macOS] Missing Sort Arrow when using Dark Theme

Status: RESOLVED FIXED

(Thunderbird :: Theme, defect)

Description

[u664705]

Attachment: Missing Sort Icon (red background, dark theme)

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:77.0) Gecko/20100101 Firefox/77.0

Steps to reproduce:

On macOS, set the appearance to dark in system preferences or change the default theme in Thunderbird by enabling the dark theme.

Actual results:

When sorting a table by a specific column (e.g. by date), the arrow that indicates the sort direction is not visible.
I've tried changing the background color of the cell to red in order to verify, that the arrow icon does not simply have the same color. It seems to be gone. See the attached screenshots.

Expected results:

There should be an arrow ;)

Comment 1

[u664705]

Attachment: Expected Result: Arrow indicating sort direction

Added additional image

Comment 2

[u664705]

Attachment: Missing Sort Icon (dark theme)

Added additional image showing the dark theme without modification

Comment 3

[Richard Marti (:Paenglab)]

Attachment: 1644730-treecol-arrow.patch

Windows uses already SVG icons from toolkit. Only Linux and Mac need this.

Comment 4

[Alessandro Castellani [:aleca]]

Comment on attachment 9156046 [details] [diff] [review]
1644730-treecol-arrow.patch

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

The implementation is correct, but the icons are not unfortunately.

The edges of the icons are not aligned, and the curvature of the stroke is not smooth, causing a very strange but noticeable blurry misalignment (zoomed screenshot coming).
Also, we shouldn't use 2 identical vertically mirrored icons for the same thing.
Let's have 1 icon called `treecol-twisty.svg` and use `transform: rotate(180deg);` the sorting changes.

Comment 5

[Alessandro Castellani [:aleca]]

Attachment: Screenshot from 2020-06-11 16-07-36.png

The misaligned edges of the twisty icon.

Comment 6

[Alessandro Castellani [:aleca]]

I just found out that we have that kind of icon in m-c already: chrome://global/skin/icons/arrow-dropdown-12.svg

Comment 7

[Richard Marti (:Paenglab)]

Attachment: 1644730-treecol-arrow.patch

This issue isn't visible with LowRes screen. Using now arrow-dropdown-12.svg and arrow-up-12.svg for all platforms to fix the bad icon also on Windows.

Comment 8

[Alessandro Castellani [:aleca]]

Comment on attachment 9156177 [details] [diff] [review]
1644730-treecol-arrow.patch

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

Looks good, thanks.
This is a good candidate for a beta uplift.

Comment 9

[Richard Marti (:Paenglab)]

Comment on attachment 9156177 [details] [diff] [review]
1644730-treecol-arrow.patch

[Approval Request Comment]
User impact if declined: on Linux and Mac, user don't see a sort arrow with dark theme
Testing completed (on c-c, etc.): soon on c-c
Risk to taking this patch (and alternatives if risky): low

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/0ebd7b863fea
Use a SVG for the treecol sort arrows to make them themeable. r=aleca

Comment 11

[u664705]

As I am fairly new to Thunderbird development, I am curious how this bug came to be. I thought that themes would just change colors and appearance using CSS. Also, when inspecting the column using the debugger on a light theme, I was not able to identify the icon it self. I guess it is applied using CSS? However, was not able to find the specific CSS rule for this in the light theme either. If you got some spare time and don't mind explaining to a novice in Thunderbird development, I'd be grateful for an explanation ;)

Comment 12

[Richard Marti (:Paenglab)]

You haven't seen a icon because the native (OS) appearance has none. This is also why the native dark arrow isn't visible. With -moz-appearance: none; I disabled the native appearance and used then our own icon.

Comment 13

[Wayne Mery (:wsmwk)]

Comment on attachment 9156177 [details] [diff] [review]
1644730-treecol-arrow.patch

Approved for beta

Comment 14

[Geoff Lankow (:darktrojan)]

Thunderbird 78.0b2:
https://hg.mozilla.org/releases/comm-beta/rev/e64f856376c7