1718555 - [macOS] Visual issues with some dropdown arrows

Status: RESOLVED FIXED

(Thunderbird :: Theme, defect)

Description

[Alessandro Castellani [:aleca]]

Attachment: Screen Shot 2021-06-28 at 10.58.03 AM.png

I noticed a couple of issues with the dropdown arrows in some areas of the UI in macOS.

• Double arrow in the tree header bar when a column is used for ascending or descending order.
• Misaligned arrow for the attachment pane in the message pane (in the compose the arrow is properly aligned).

Comment 1

[Alessandro Castellani [:aleca]]

Attachment: Screen Shot 2021-06-28 at 10.57.04 AM.png

Comment 2

[Richard Marti (:Paenglab)]

The native sort arrow can't be hidden. When we use a theme that sets the tree colours it's okay with our arrow. So we can either hide our arrow when the tree is not themed or switch to always themed treeheader. What should we do?

Comment 3

[Alessandro Castellani [:aleca]]

Uh, wow, that's super annoying.
I guess the issue comes from the -moz-appearance: treeheadercell; attribute.
Is there any chance of removing that and styling the header cell with CSS to get the same visual result?
Does the treeheadercell attribute also applies something extra that we can't have with regular CSS?

Comment 4

[Richard Marti (:Paenglab)]

We do this already with themes applied. We could do this also without themes. Try the light theme. I could do the same but use a lighter border to match better with the native appearance.

Comment 5

[alta88]

The arrow is painted in the cocoa widget code. Yes, it was very annoying to implement a secondary sort column indicator on osx in MessagePreview; if I recall the <image> css list-style-image had to be unset.

Comment 6

[Alessandro Castellani [:aleca]]

I could do the same but use a lighter border to match better with the native appearance.

I guess we could do this exclusively for macOS.

Comment 7

[Richard Marti (:Paenglab)]

Attachment: 1718555-dropdown-issues.patch

This fixes the attachment twisty by turning only the icon instead of the whole button.

The treecol is now on Mac always drawn by CSS.

Additionally for the light themes I reduced the treecol border transparency to look better.

Comment 8

[Alessandro Castellani [:aleca]]

Comment on attachment 9229219 [details] [diff] [review]
1718555-dropdown-issues.patch

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

This looks good.
With this new style the borders are not indented anymore like we get with cocoa style, but I don't think it's a big deal.

::: mail/themes/shared/mail/messageHeader.css
@@ +187,4 @@
>      transition: transform 200ms ease;
>    }
>  }
>  

Since the #attachmentToggle is a very unique button, we should set a display: none to the .button-text as we're sure we won't ever use it.
That will remove the extra blank space which makes the dropdown arrow look non centered.

Comment 9

[Richard Marti (:Paenglab)]

Attachment: 1718555-dropdown-issues.patch

Added the display: none to the .button-text.

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/8a90435ecfbc
[macOS] Fix visual issues with some dropdown arrows. r=aleca