1669063 - Message preview pane is cut off on the right because message header toolbar doesn't scale (and is no longer customizable). Implement toolbar overflow/scalability.

Status: VERIFIED FIXED

(Thunderbird :: Message Reader UI, defect, P2)

Description

[Luetzow1813]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0

Steps to reproduce:

Looking different e-mails in the preview window.

Actual results:

Hello everybody,

with Thunderbird 78 there is no right-clickable
customize function in the preview window, as you can see in
Thunderbird 68. So you can also get there from Extensions (=
Add-ons) such as "Allow HTML Temp" or "Display
Mail User Agent" added buttons not hide or remove.

This has the consequence that the preview window simply opens on
the right is cut off, which has or have different consequences
can:

a) The last switch on the right outer position will may be cut off
or disappear into the non visible area.
b) The date/time display of the e-mail is cut off or may disappear
completely into the non-visible area.
c) Mailtext is displayed, provided that the visible area of the
preview window, also cut off on the right.

The complete readability of an e-mail itself and the Header data
is only possible if the e-mail is sent by double-clicking will
open in a separate window.

In the German forum Thunderbird Mail DE you can find the
following Thread:
https://www.thunderbird-mail.de/forum/thread/85413-thunderbird-78-
vorschaufenster-wird-teilweise-rechts-abgeschnitten/

Sorry for my English. Translated from German with DeepL

Expected results:

If it is all well, then it should be none "cut off" on the right side.

Comment 1

[Wayne Mery (:wsmwk)]

Thomas, the forum post has screen shots

Comment 2

[Thomas D. (:thomas8)]

Attachment: Screenshot 1: Non-customizable and non-scaling Message header toolbar causes horizontal overflow of entire message preview area

This is essentially caused by the nonsensical removal of message header toolbar customization, but in spite of that, it's also a bug in it's own right, namely that when users reduce the width of the TB window and hence the width of msg preview also gets reduced, the toolbar doesn't scale. When the entire toolbar with all text+icon buttons cannot fit, it should scale (i.e. not cause the entire layout to break) and either

• Allow the labels to truncate, and/or switch to icons-only when there's not enough horizontal space for text+icons
• show a [>>] disclosure button at the right end to access the off-screen buttons, or
• expand to two rows

Comment 3

[Thomas D. (:thomas8)]

Bug 1535265 (esp. the removal of message header toolbar customization) is a total UX desaster, and it's much worse for localizations like German where the button labels are much longer than in English. So we can neither remove unneeded buttons nor remove toolbar labels and just show icons-only, which was possible before and an excellent solution for reduced window with. Showing two windows side-by-side on a 22 inch screen already makes the Thunderbird message preview UI to fail. So sad.

Bug 1556261 requests to re-implement message header toolbar customization, 8 duplicates as of today and counting...

(In reply to Jim Porter (:squib) from Bug 1535265 Comment 29)

Is there a reason the message header toolbar in particular was rendered non-customizable in this patch? It's probably the single most important toolbar to customize, since it has all the buttons for operating on a single message, and is in a much more space-constrained environment than, say, the main toolbar. This is especially important for non-English locales, where the button text is often longer than English. Previously, you could switch to "icons only" or remove some buttons you don't need, but with this patch, there appears to be nothing you can do. Even in English, it causes problems for the Vertical 3-pane layout unless you make the message pane pretty wide.

I can understand removing some of the other toolbars (though I don't like it, since part of the reason for those being customizable was for easy extension hooks), but not the message header toolbar. Since Thunderbird still has one customizable toolbar - the main one - it's not like we can totally get rid of the <toolbar> element anyway. The additional cost/pain of keeping 2 <toolbar>s around seems pretty minimal compared to keeping 1 around.

+1

Comment 4

[Luetzow1813]

Hello everybody,

thank you for stating that it is indeed a bug.

For additional information. Thunderbird starts with my window maximized and I only work in this mode.

The described bug can be fixed, as already stated, if necessary by reducing the width of the folder bar (reduced to the left) and thus indirectly enlarging the preview window in individual cases.

But this is of course not a permanent solution, because the user usually does not want to constantly adjust the program window itself or parts of it.

Translated with DeepL.

Comment 6

[Magnus Melin [:mkmelin]]

Aleca, here is the bug we discussed earlier. I think buttons should auto-adjust to use icons only if they can't all fit, like for the quick filter toolbar icons.

Comment 7

[Magnus Melin [:mkmelin]]

(Or one of the bugs, I think I saw at least one more.)

Comment 8

[Alessandro Castellani [:aleca]]

The message header area needs a lot of love and some serious rethinking to improve readability, usability, and keyboard accessibility.
Do you think it's worth opening a meta bug to keep track of everything related to this area?

I have a mock-up to improve the whole area and offer the required flexibility to users without the necessity of making this a customizable toolbar.

I think buttons should auto-adjust to use icons only if they can't all fit, like for the quick filter toolbar icons.

I'll implement this.

Comment 10

[Thomas D. (:thomas8)]

(In reply to Alessandro Castellani [:aleca] from comment #8)

I think buttons should auto-adjust to use icons only if they can't all fit, like for the quick filter toolbar icons.
I'll implement this.

Any bandaid-fix would be well worth doing (e.g. "reduce-to-icons" when toolbar exceeds available width, or anything from comment 2).
Alex, would you perhaps have the time to try something here?

It's really pretty annoying because the former message header toolbar is the only thing which does not scale and breaks the entire msg preview, more so for languages with longer labels (any language other than English), and also for enterprise contexts where addons are used to add extra buttons for server archiving etc., e.g. as seen in Bug 1709530 Comment 0, attachment 9220284 [details].

Comment 11

[Alessandro Castellani [:aleca]]

I'll try to find some capacity for this week.

Comment 12

[Alessandro Castellani [:aleca]]

Attachment: bug1669063-responsive-message-header.diff

This is a WIP patch that doesn't work very well.
The main problem is that the CE header fields are populated a bit later and the full width size needed to check if the header is shrinking below that threshold is not correctly updated when the message becomes first visible.

Magnus, do you know if we have an observer that fires up when the message header is fully loaded with all data?

Another problem is the entire structure of this header, which is a bit complicated with many indented containers, most likely leftovers from de-xbl.
We should consider rebuilding this whole structure with pure HTML, CSS grid, and flexbox, which would make things easier to manage.

What do you think we should do here?

EDIT: Please ignore typos and crappy code in the patch. This is just a proof of concept.

Comment 13

[Magnus Melin [:mkmelin]]

Comment on attachment 9222897 [details] [diff] [review]
bug1669063-responsive-message-header.diff

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

There is probably room for improvement in this area as it's had 2-3 technology renewals in the last years to many things could now be overhauled. But it's a complicated piece of UI so wouldn't act on it right at the moment.
I don't know of any observer.

::: mail/themes/shared/mail/messageHeader.css
@@ +88,5 @@
>  }
>  
> +#msgHeaderView[shrink="true"] .msgHeaderView-button .toolbarbutton-text {
> +  display: none;
> +}

Haven't tried, but possibly using https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries you could at least make sure that it uses icons when the width is clearly not going to work (parent width less then what, 500px?)

Comment 14

[Alessandro Castellani [:aleca]]

Haven't tried, but possibly using https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries you could at least make sure that it uses icons when the width is clearly not going to work (parent width less then what, 500px?)

If I'm not wrong, container media queries are not supported anywhere other than on Chrome canary, but disabled behind a flag pref.

Comment 15

[Alessandro Castellani [:aleca]]

Attachment: Bug 1669063 - Make the message header toolbar responsive. r=mkmelin

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/9bd7b7700df2
Make the message header toolbar responsive. r=mkmelin

Comment 17

[Thomas D. (:thomas8)]

Awesome, thanks Alex for fixing this painpoint following my comment 2 and comment 10, and Magnus for the review!

Comment 18

[Luetzow1813]

Attachment: Screenshot_20210925_140508.png

Comment 19

[Luetzow1813]

Hello together,

the problem still exists in the German Thunderbird-Version 91.1.0 (Mozilla/5.0 (X11; Linux x86_64; rv:91.0) Gecko/20100101 Thunderbird/91.1.1).
I have uploaded a screenshot.

"Date" cut on the right side, "openPGP"-information cut on the right side, the button "Anhänge" (german) cut on the right (End "]" of the button).

Greetings
Luetzow1813

Comment 20

[Luetzow1813]

The button (in german) on the right has the following complete text: "Anhänge abtrennen" (from the Add-on: AttachmentExtractor Continued).

Comment 22

[Thomas D. (:thomas8)]

Attachment: Screenshot: TB 91.1.2 DE with dynamically iconized header toolbar buttons

(In reply to Luetzow1813 from comment #19 / comment #20)

the problem still exists in the German Thunderbird-Version 91.1.0 (Mozilla/5.0 (X11; Linux x86_64; rv:91.0) Gecko/20100101 Thunderbird/91.1.1)...
The button (in german) on the right has the following complete text: "Anhänge abtrennen" (from the Add-on: AttachmentExtractor Continued).

Hi Luetzow1813, this bug has been resolved VERIFIED FIXED, so it's unlikely to still fail. Even if it did, we would have to deal with that in a new bug. I've tested this on German version of TB 91.1.2 and the header buttons adjust dynamically as they should (see screenshot). In your case, once again, it's most likely to be caused by add-ons. Please run ≡ > Help > Troubleshoot Mode… before filing bugs against Thunderbird - if the bug does not occur without add-ons, it's most likely a bug caused by add-ons. Add-on bugs must be reported to add-on authors. Thanks!

Comment 23

[Marco Castelluccio [:marco]]

Yeah, this is happening again now. Probably a new regression. I will file a new bug.

Comment 24

[Marco Castelluccio [:marco]]

Sorry I didn't realize I'm still on Thunderbird 78. I could swear I updated and saw this bug fixed, but I guess my memory doesn't serve me well.

Comment 25

[Richard Marti (:Paenglab)]

Luetzow1813, what is weird, is that the button text is still shown. With the fix in this bug the text should be hidden when there isn't enough space. Do you use an extension that changes the message header buttons or do you use a userChrome.css customization?

Maybe it's also one of your extensions that places a button on the message header.