Last Comment Bug 636014 - [autoconfig] Align labels and textfields on the existing account wizard
: [autoconfig] Align labels and textfields on the existing account wizard
Status: RESOLVED FIXED
:
Product: Thunderbird
Classification: Client Software
Component: Account Manager (show other bugs)
: Trunk
: x86 Linux
: -- normal (vote)
: Thunderbird 13.0
Assigned To: Mark Banner (:standard8, afk until Dec)
:
:
Mentors:
: 680754 (view as bug list)
Depends on: 549045
Blocks:
  Show dependency treegraph
 
Reported: 2011-02-22 15:11 PST by Ben Bucksch (:BenB)
Modified: 2012-02-14 12:08 PST (History)
8 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
fixed
fixed


Attachments
WIP (10.09 KB, patch)
2011-11-22 07:58 PST, Mark Banner (:standard8, afk until Dec)
no flags Details | Diff | Splinter Review
The fix (10.75 KB, patch)
2011-11-24 03:45 PST, Mark Banner (:standard8, afk until Dec)
bwinton: review+
bwinton: ui‑review-
Details | Diff | Splinter Review
New Fix (10.73 KB, patch)
2012-01-23 11:07 PST, Richard Marti (:Paenglab)
bugs: ui‑review+
ben.bucksch: feedback+
standard8: approval‑comm‑aurora+
standard8: approval‑comm‑beta+
Details | Diff | Splinter Review
Comparison (21.89 KB, image/png)
2012-01-23 11:11 PST, Richard Marti (:Paenglab)
no flags Details

Description Ben Bucksch (:BenB) 2011-02-22 15:11:29 PST
The name/email/password fields in the Account Creation wizard have labels with a class="autoconfigLabel" which just sets a certain width in em. If any of the labels is longer, the textfields are misaligned. You can see tat in TB 3.1 in French, it looks really awful. The bug is assuming that the labels are smaller than so-and-so em.

Similarly, in the Result display (after we found a working config automatically), the "Incoming"/"Outgoing"/"Username" labels are not base-aligned. Maybe because the labels have a smaller font. <hbox align="baseline"> doesn't fix it. Also, they should use a <grid>, too, for the same reason as above.
Comment 1 Ben Bucksch (:BenB) 2011-08-21 16:07:33 PDT
https://bugzilla.mozilla.org/attachment.cgi?id=554712
Comment 2 Ben Bucksch (:BenB) 2011-08-21 16:07:35 PDT
*** Bug 680754 has been marked as a duplicate of this bug. ***
Comment 3 Mark Banner (:standard8, afk until Dec) 2011-11-22 07:58:04 PST
Created attachment 576165 [details] [diff] [review]
WIP

Work in progress fix. This does:

- use grids for the problem areas to account for different length of strings.
- currently uses sizeToContent to fix the problem where the error text goes off the window.

This doesn't yet fix the vertical alignment of the results when something is found in ispdb.
Comment 4 Mark Banner (:standard8, afk until Dec) 2011-11-24 03:45:24 PST
Created attachment 576713 [details] [diff] [review]
The fix

For the vertical mis-alignment, I've been able to fix it by changing the descriptions to a textbox, but making that textbox disabled and look the same as a label. This is also good from the a11y point of view as it means we can link the labels to the text.

I'm a bit concerned about overrunning the window width, but I'm failure sure we're not going to hit really long configs. If we do, then we might have to reconsider it, but generally this should look a lot better than it does now for the majority of cases.

For the sizeToContent issue, I had a look at doing it a slightly different way, but that didn't work unfortunately, so for now, this is the best I can do, but I'll file a follow-up bug if you want.
Comment 5 Blake Winton (:bwinton) (:☕️) 2011-12-02 11:31:31 PST
Comment on attachment 576713 [details] [diff] [review]
The fix

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

On Windows: Hit tab, type "jdfkls@fjdls.fdjskl", hit tab, hit shift-tab, type "fjdkls", hit shift-tab, type "fjdsklfdjskl", hit tab a bunch, and watch the fields change width.
  Because of this, I'm going to have to give this a ui-r-.

But the code seems good, so it gets an r=me.  :)

Thanks,
Blake.
Comment 6 Mark Banner (:standard8, afk until Dec) 2011-12-07 02:30:30 PST
Andreas/Richard, would you be able to look at comment 5 for me? I can't reproduce that on Mac.
Comment 7 Richard Marti (:Paenglab) 2011-12-07 13:12:19 PST
I can confirm this behavior on Win7. This is because the password textbox is using italic text for the placeholder and switches to normal when the textbox is active. When you set #password {width: 165px;} the box width is stable.
I think the width is dynamically calculated based on the font and italic is wider than normal.

PS: The same happens with the Gloda searchbox.
Comment 8 Ludovic Hirlimann [:Usul] 2012-01-23 03:02:05 PST
Richard any quick fixes coming to your mind ?
Comment 9 Richard Marti (:Paenglab) 2012-01-23 03:57:59 PST
The only quick fix would be to use non-italic text. If this is okay I can write a patch for this.

Blake, what do you mean?
Comment 10 Blake Winton (:bwinton) (:☕️) 2012-01-23 10:14:01 PST
Can you whip up a patch with non-italic text, and we can see how that looks?

Thanks,
Blake.
Comment 11 Richard Marti (:Paenglab) 2012-01-23 11:07:32 PST
Created attachment 590791 [details] [diff] [review]
New Fix

This patch is based on Mark's patch with this changes in mail/themes/qute/mail/accountCreation.css:

I added

@namespace html url("http://www.w3.org/1999/xhtml");

and

textbox.padded html|*.textbox-input:-moz-placeholder {
  font-style: normal;
}

Because of this I'm asking only for ui-r.
Comment 12 Richard Marti (:Paenglab) 2012-01-23 11:11:10 PST
Created attachment 590792 [details]
Comparison

On the left with Mark's patch added and on the right with my additional fix.
Comment 13 Andreas Nilsson (:andreasn) 2012-02-02 13:49:09 PST
Comment on attachment 590791 [details] [diff] [review]
New Fix

Stealing this ui-review from bwinton
Comment 14 Andreas Nilsson (:andreasn) 2012-02-02 13:53:46 PST
Comment on attachment 590791 [details] [diff] [review]
New Fix

Works great!
Labels can become really long and widgets do no longer resize. Also tested in RTL.
Comment 15 Ben Bucksch (:BenB) 2012-02-02 16:32:01 PST
Comment on attachment 590791 [details] [diff] [review]
New Fix

I didn't do a detailed review, but this looks like the right approach, it's using <grid>, and we should have done that all along.
Thanks!
Comment 16 Jim Porter (:squib) 2012-02-02 17:05:57 PST
Perhaps we should file a Toolkit bug on the resizing widgets? That seems wrong in general...
Comment 17 Mark Banner (:standard8, afk until Dec) 2012-02-13 06:28:37 PST
Checked in: http://hg.mozilla.org/comm-central/rev/8d6d172e7a91
Comment 18 Mark Banner (:standard8, afk until Dec) 2012-02-14 12:08:15 PST
Checked into branches:

http://hg.mozilla.org/releases/comm-aurora/rev/e265914697e8
http://hg.mozilla.org/releases/comm-beta/rev/6fa3d8b42ade

Note You need to log in before you can comment on or make changes to this bug.