1601748 - Improve the UI of the mail-address-pill custom element

Status: RESOLVED FIXED

(Thunderbird :: Message Compose Window, enhancement)

Description

[Alessandro Castellani [:aleca]]

Bug 440377 introduced the new mail-address-pill Custom Element, which drastically changes User Interface of the entire recipients header area.

Let's use this bug to track the improvements and changes necessary to refine and polish this new implementation.

Todo:

• Improve the distinction between :hover and selected status.
• Improve the colour palette for the warning and error status.
• Don't highlight red the input field if an address is not in the address book.
• Iterate on the design for the Cc, Bcc, Reply-to labels to find a better location.
• Reduce the "noise" of the area when multiple pills and recipients are used.

Comment 1

[Alessandro Castellani [:aleca]]

Attachment: compose-ui.png

Some UI iterations to improve the recipients area.

• Moving the extra recipients label inline the "From" field solve many issues related to accessibility and spacing, and keeps the ability to drop pills or addresses on top of those labels.
• Removing the delete icon from each pill reduces the overall noise of the area.

Comment 2

[Thomas D. (:thomas8)]

Comment on attachment 9117401 [details]
compose-ui.png

This looks good to me. :-)
- Saving vertical space in compose header: absolutely wanted. I'll readily accept the trade-off of going a bit far to the right in exchange for permanently recovering significant vertical space, which makes sense for today's wide screens.
- Reduced noise by removing per-recipient delete buttons: what a relief! I'd think it's still ok for mouse users...
- Square pills: less noisy and more serious; I like the "selected text" connotation, too... perfect for inter-pill insertion points, bug 1603051 ;-)
- Please test this UI with attachment pane open in other languages, whose recipient type strings might be considerably longer than the English abbreviations. E. g., German has "Kopie (CC)" [sic] for CC and "Blindkopie (BCC)" and "Antwort an". Let's hope it still works because that from header has plenty horizontal surplus space.
- Reply-to? Average user will never use that, so it becomes permanent clutter. Can we hide that behind those >> arrows? (which will still require only two clicks to get any extra header, same click-count as in current release). Hiding Reply-to also mitigates the l10n horizontal space risk for smaller screens (previous point).

Comment 3

[Thomas D. (:thomas8)]

Comment on attachment 9117401 [details]

• Moving the extra recipients label inline the "From" field solve many issues related to accessibility

Trying to elaborate on that (please add anything which might be missing):

• For the simple case, To-only, conveniently only one tab to reach subject (addressing bug 1603863; after bug 1602372).
• Any recipient types which you do not use will be less of a burden for your tab focus ring (after bug 1602372) - cool!
• For natural left-right, top-down tab stop order, I guess other recipient types are now slightly less intuitive to access with Shift+Tabs from To-field. Interestingly, even in current release, it's Shift+Tab to get to CC/BCC, so not worse than before :-))

Comment 4

[Richard Marti (:Paenglab)]

Comment on attachment 9117401 [details]
compose-ui.png

Yeah, let's try this. How do you think should it work, when a user with dnd wants to add a contact to one of the fields that ar in the overflow arrow? Moving the contact over the overflow arrow and it opens the list automatically and he can drop it then over the desired entry?

I like the squared pill more than the rounded one. It fits better into the text box.

Comment 5

[Magnus Melin [:mkmelin]]

Comment on attachment 9117401 [details]
compose-ui.png

Yeah I like it too. Maybe the pills should be a bit less square. 
I don't think dragging people to a certain field that is not already clicked open is a super important use case.

Comment 6

[Alessandro Castellani [:aleca]]

Attachment: 1601748-compose-ui.patch

Here's the patch for the updated compose UI.
Richard, can you take a look at how it behaves in dark mode, especially on Windows?
Cheers.

Comment 7

[Magnus Melin [:mkmelin]]

Comment on attachment 9118942 [details] [diff] [review]
1601748-compose-ui.patch

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

Looks alright. One thing I notice (related or not): if you have a newsgroup selected it should not have To showing at all. Newsgroup should show, and maybe Follow-up too, since that's kind of standard for news.

::: mail/components/compose/content/addressingWidgetOverlay.js
@@ +739,5 @@
> +  if (
> +    !recipientsPanel.querySelectorAll('label:not([collapsed="true"])').length
> +  ) {
> +    recipientsLabel.collapsed = true;
> +  }

this is needlessly verbose

document.getElementById("extraRecipientsLabel").collapsed =
document.getElementById("extraRecipientsPanel").querySelectorAll('label:not([collapsed="true"])').length > 0

::: mail/locales/en-US/chrome/messenger/messengercompose/messengercompose.dtd
@@ +249,5 @@
>  <!-- Headers -->
>  <!--LOCALIZATION NOTE headersSpaces.style is for aligning  the From:, To: and
>      Subject: rows. It should be larger than the largest Header label  -->
>  <!ENTITY headersSpace2.style "width: 8em;">
> +<!ENTITY extraRecipients.tooltip "More recipients">

Maybe "Other types of addressing fields"

Comment 8

[Richard Marti (:Paenglab)]

Comment on attachment 9118942 [details] [diff] [review]
1601748-compose-ui.patch

Looks good, thanks. I'd only change small things like using already existing variables for the colours to make the elements consistent with other elements.

Maybe we should look into making the address-extra-recipients and overflow button looking the same when hovering/focusing. But this can be done in a new bug.

Comment 9

[Richard Marti (:Paenglab)]

Attachment: 1601748-compose-ui.patch

Your patch with my small changes to make the hover colours consistent and better visible on dark themes.

Comment 10

[Richard Marti (:Paenglab)]

Attachment: 1601748-compose-ui-CSS.diff

This is the diff of my changes.

Comment 11

[Alessandro Castellani [:aleca]]

Comment on attachment 9119141 [details] [diff] [review]
1601748-compose-ui.patch

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

Perfect, thanks for these updates.
I'll upload a new patch with these changes and the fixes requested by Magnus.

Comment 12

[Alessandro Castellani [:aleca]]

Attachment: 1601748-compose-ui.patch

Patch updated and try-run launched: https://treeherder.mozilla.org/#/jobs?repo=try-comm-central&revision=44057629d627312e1456fcf42bce27eb4dea059c

if you have a newsgroup selected it should not have To showing at all. Newsgroup should show, and maybe Follow-up too, since that's kind of standard for news.

I opened bug 1607526 to tackle that issue.

Comment 13

[Alessandro Castellani [:aleca]]

Uh, some tests are failing. I'll take care of those.

Comment 14

[Alessandro Castellani [:aleca]]

Attachment: 1601748-compose-ui.patch

Tests fixed: https://treeherder.mozilla.org/#/jobs?repo=try-comm-central&revision=e49c7c3a77c769280d5c0453d154831cbf079c0c

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/c21622941d4b
Improve the UI of the messenger compose recipient area. r=mkmelin, ui-r=paenglab

Comment 16

[Alessandro Castellani [:aleca]]

If I'm not wrong, this should go in 73.0 as it's needed by what landed in bug 440377

Comment 17

[Geoff Lankow (:darktrojan)]

Request approval then. I can't unilaterally land things on beta.

Comment 18

[Alessandro Castellani [:aleca]]

Comment on attachment 9119289 [details] [diff] [review]
1601748-compose-ui.patch

Magnus, can you confirm this should land on 73?

Comment 20

[Geoff Lankow (:darktrojan)]

73 beta 1:
https://hg.mozilla.org/releases/comm-beta/rev/560911f4360eb9798dfd75f9138037c4b2373757