1543860 - UI improvements to messenger compose

Status: RESOLVED FIXED

(Thunderbird :: Theme, enhancement)

Description

[Alessandro Castellani [:aleca]]

Attachment: message-compose-ui.png

I'd like to propose a tiny CSS update to improve a bit the UI of the messengercompose.xul window.

Attached you can find a mock-up with the proposal, and a patch for it.
The proposed UI refresh will cover these aspects:

• Softer drop shadow below toolbar: The current drop shadow is really thick and feels a bit too aggressive, creating an illusion of a drastic gap between the toolbar and the header area. A software drop shadow improves visual flows and it's more pleasing to the eye.

• Remove the noise repeated background: I don't see any advantage in having a that noise image as background as it's so subtle is almost not visible. The text styling toolbar doesn't have that texture but the difference is hardly noticeable. A clean and flat background color looks cleaner.

• Hide the spacer (Linux only): The spacer was rendered on Linux with a top border, creating a strange grey gap between the header area and the compose message area.

• Border top in compose area: This helps separate the two areas since the background color of the header is really light. It also keeps the visual consistency used in other dialogs of using 1px borders when dividing sections.

I'm attaching a patch with the small styling updates after this message. Visually tested on Linux and macOS. I don't have a Windows computer to test it there, tho.

Thoughts?

Comment 1

[Alessandro Castellani [:aleca]]

Attachment: message-compose-ui.patch

Comment 2

[Richard Marti (:Paenglab)]

Comment on attachment 9057726 [details] [diff] [review]
message-compose-ui.patch

Thanks, I was never a fan of this noise backgrounds. There are more places where a noise background is set, see https://searchfox.org/comm-central/search?q=noise.png&case=false&regexp=false&path=mail

Can you also remove the files itself and the packaging of them? osx-noise.png seems to be already missing.

Comment 3

[Alessandro Castellani [:aleca]]

Attachment: message-compose-ui.patch

Done.
I also implemented a 0.7 opacity for the toolbar when the compose window is not active as that bar was the only section to not dim.

Comment 4

[Richard Marti (:Paenglab)]

Comment on attachment 9058032 [details] [diff] [review]
message-compose-ui.patch

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

Overall it looks good. Only Linux has some changes that needs to be considered for new bugs.

::: mail/themes/linux/mail/compose/messengercompose.css
@@ +37,5 @@
>  }
>  
> +#compose-toolbox:-moz-window-inactive {
> +  opacity: 0.7;
> +}

I'm against it as this will be the only TB toolbar that changes on Linux with inactive window. FX does also not such.

@@ +279,5 @@
> +}
> +
> +#composeContentBox splitter[orient="vertical"] {
> +  opacity: 0;
> +}

Instead of this, I think, we should do similar like we have done with other splitters (https://searchfox.org/comm-central/source/mail/themes/linux/mail/mailWindow1.css#112). This because now the elements of the format toolbar look as they are too high placed with the space below them. What do you think?

We can stay with this change now but a new bug for fixing this should be filed.

@@ +282,5 @@
> +  opacity: 0;
> +}
> +
> +#composeToolbar2 {
> +  padding: 0 4px;

This will be the only toolbar with this padding at the left/right. Shouldn't this go to a new bug where you could do this for all TB toolbars?

::: mail/themes/shared/mail/messengercompose.css
@@ +194,5 @@
>    padding-left: 3px;
>  }
>  
> +#appcontent {
> +  border-top: 1px solid var(--toolbarbutton-hover-bordercolor);

Using a toolbarbutton variable for a border isn't so logic. Maybe you could use --splitter-color as this is also more the function of this border.

Comment 5

[Alessandro Castellani [:aleca]]

Attachment: message-compose-ui.patch

Thanks for the review, I updated everything accordingly.

Instead of this, I think, we should do similar like we have done with other splitters (https://searchfox.org/comm-central/source/mail/themes/linux/mail/mailWindow1.css#112). This because now the elements of the format toolbar look as they are too high placed with the space below them. What do you think?

Agree, I updated the spacer using the same styling, thanks for pointing that out.

Shouldn't this go to a new bug where you could do this for all TB toolbars?

Sure, I will open a dedicated bug with a patch to fix all the toolbars.

Using a toolbarbutton variable for a border isn't so logic

I used that variable because I wanted to use the same colour used for the border of the message subject fields: https://searchfox.org/comm-central/source/mail/themes/linux/mail/compose/messengercompose.css#164

The --splitter-color variable definitely makes more sense.

Comment 6

[Richard Marti (:Paenglab)]

Comment on attachment 9058340 [details] [diff] [review]
message-compose-ui.patch

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

Thank.

::: mail/themes/linux/mail/compose/messengercompose.css
@@ +271,4 @@
>  }
>  
>  #composeContentBox:-moz-window-inactive {
> +  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1) inset;

Sorry that I missed this on the last review. Please use 0 instead of 0px.

Comment 7

[Alessandro Castellani [:aleca]]

Attachment: message-compose-ui.patch

No problem, updated.
Ready for check-in?

Comment 8

[Richard Marti (:Paenglab)]

Yes, you can set "checkin-needed".

Comment 9

[Jorg K (CEST = GMT+2)]

https://hg.mozilla.org/comm-central/rev/d6abc17e8bc5829da3e0837b52ab9bb5c29deb27
UI improvements to messenger compose. r=Paenglab