Closed Bug 1718555 Opened 3 years ago Closed 3 years ago

[macOS] Visual issues with some dropdown arrows


(Thunderbird :: Theme, defect)



(thunderbird_esr78 unaffected)

91 Branch
Tracking Status
thunderbird_esr78 --- unaffected


(Reporter: aleca, Assigned: Paenglab)


(Keywords: regression, regressionwindow-wanted)


(3 files, 1 obsolete file)

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).

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?

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?

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.

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.

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.

Attached patch 1718555-dropdown-issues.patch (obsolete) — Splinter Review

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.

Assignee: nobody → richard.marti
Attachment #9229219 - Flags: review?(alessandro)
Comment on attachment 9229219 [details] [diff] [review]

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.
Attachment #9229219 - Flags: review?(alessandro) → review+

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

Attachment #9229219 - Attachment is obsolete: true
Attachment #9229251 - Flags: review+
Target Milestone: --- → 91 Branch

Pushed by
[macOS] Fix visual issues with some dropdown arrows. r=aleca

Closed: 3 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.