1743509 - Improve the HTML structure of the email protocols in the Account Setup

Status: RESOLVED FIXED

(Thunderbird :: Account Manager, enhancement)

Description

[Alessandro Castellani [:aleca]]

Following these great suggestions from Henry to simplify the HTML structure and use a more consistent and easily manageable style.

Henry:
"You could expand the idea and apply the grid display to the resultsOption-* elements with

grid-template-columns: auto auto 1fr;
gap: 3px 6px;

and

.toggle-container-with-text,
.result-details,
.result-details-row {
  display: contents;
}

and set the grid-column of the other elements appropriately (e.g. result-indent would be 2 / 4), plus remove all inline margins, and other tidying.

This would also fix the 1px misalignment of the start of .toggle-container-with-text > span and .result-indent and .result-indent: the latter two have an inline margin of 21px, but the first element starts at 22px (from the 16px width and 6px margin-inline of the <input>)."

Comment 1

[Magnus Melin [:mkmelin]]

Related: The protocol label is now on its own row. Seems we could just have e.g. [POP3] Incoming, and [SMTP] Outgoing instead.

Comment 2

[Alessandro Castellani [:aleca]]

(In reply to Magnus Melin [:mkmelin] from comment #1)

Related: The protocol label is now on its own row. Seems we could just have e.g. [POP3] Incoming, and [SMTP] Outgoing instead.

The protocol label ends up on its own row only if the hostname is long enough to force a text wrap.
I can move the protocol in the title area, but it looks a bit strange. (attachment)

Comment 3

[Alessandro Castellani [:aleca]]

Attachment: Screenshot from 2021-12-02 17-26-54.png

Not super strange, maybe a bit out of balance and unexpected.
Does the reading flow of the data make sense with protocol type and protocol title?

Comment 4

[Magnus Melin [:mkmelin]]

Comment on attachment 9253558 [details]
Screenshot from 2021-12-02 17-26-54.png

LGTM

Comment 5

[Ben Bucksch (:BenB)]

The protocol label ends up on its own row only if the hostname is long enough to force a text wrap.

Ah, that's nice, I didn't realize that. Maybe add a screenshot for that normal case?

Does the reading flow of the data make sense with protocol type and protocol title?

If we do it like this, then indeed, It should be "Incoming IMAP <hostname>".
And, to make the domain stick out more, I would not make the "Incoming" and "Username" labels bold.

Comment 6

[Alessandro Castellani [:aleca]]

If we do it like this, then indeed, It should be "Incoming IMAP <hostname>".
And, to make the domain stick out more, I would not make the "Incoming" and "Username" labels bold.

The Incoming and Outgoing text are meant to be the "header" of the printed info, keeping them bold and on their line helps with the visual separation and creating a better reading rhythm.

The hostname+domain info should be on the same line, unless the hostname is so long that triggers the natural wrapping, but that should be a very unusual edge case and it won't affect the readability or understanding of these info, for users that know what these info are.

I'll put the protocol after the title (Incoming IMAP), as it makes more sense from a reading/data POV.

Comment 7

[Alessandro Castellani [:aleca]]

Attachment: Bug 1743509 - Improve the HTML structure of the protocols in Account setup.r=mkmelin

Comment 8

[Alessandro Castellani [:aleca]]

Try run: https://treeherder.mozilla.org/jobs?repo=try-comm-central&revision=4c7dd3c18ef3ae86f99774a3dbf8d8b8e878d732

Comment 9

[Alessandro Castellani [:aleca]]

Small test failure

Comment 10

[Alessandro Castellani [:aleca]]

Try run: https://treeherder.mozilla.org/jobs?repo=try-comm-central&revision=5c851ff4ec5caea5ab085da5ad5627800f9071dc

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/2257fd744bc8
Improve the HTML structure of the protocols in Account setup.r=mkmelin