1823181 - UI elements inside OpenPGP dialogs are inconsistently wrapped, truncated, and some dialogs not resizable

Status: ASSIGNED

(Thunderbird :: Account Manager, defect)

Description

[Yogesh]

Steps to reproduce:

There are two ways to add OpenPGP keys to an account. Try both in the Account Settings: I'm going to call the flows A, B, and C

Flow - A

1. Click on End-To-End Encryption in the left pane
2. Click on the Add Key... (button)
3. Select Import an existing OpenPGP Key radio button and click Continue button
4. Click on Select File to Import... button
5. Select OpenPGP file through the file browser and click continue button and
6. Enter the password to import

Flow - B

1. Click on End-To-End Encryption in the left pane
2. Click on OpenPGP Key Manager button
3. Click on the File menu → Import Secret Key(s) from file
4. Click on the Select File to Import button
5. Select a file through the file browser and click continue button and
6. Enter the Password to import

Observe the way the dialog boxes display text and key information including buttons.

Flow - C

0. When you already have a key imported...
1. Click on Add Key... button
2. Select Create a new OpenPGP Key radio button and press Continue button

Observe how the entire next modal suddenly becomes tall with a lot of whitespace below disproportionate to the content inside.

Actual results:

1. The dialog boxes wrap text badly : sometimes wrapping badly, sometimes not wrapping at all
2. Buttons are truncated
3. Windows / modals are sometimes sized badly and resize works breadth-wise but not height-wise
4. Previous modals influence the size of subsequent modals. (For example when going through the flows A and B above when keys are already present)

Expected results:

Modals should be sized correctly with consistent design between different options including text flow and button positions.

Comment 1

[Yogesh]

Attachment: create_key_tall.png

Comment 2

[Yogesh]

Attachment: two_options_to_add_keys.png

Comment 3

[Yogesh]

Attachment: long_for_no_reason.png

Comment 4

[Yogesh]

Attachment: resizing_does_not_help.png

Comment 5

[Yogesh]

Attachment: truncated_button.png

Comment 6

[Yogesh]

Attachment: truncated_info_and_badly_wrapped_text.png

Comment 7

[Yogesh]

Attachment: more_examples.png

Comment 8

[Yogesh]

Attachment: more_examples2.png

Comment 9

[Magnus Melin [:mkmelin]]

Probably flexbox emulation affected them. (xref bug 1821304)

Comment 10

[Yogesh]

Attachment: Buttons are inconsistent too

I also observed in the key edit workflow that the button styles were inconsistent also - as seen in the screenshot.

Comment 11

[Thomas D. (:thomas8)]

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

Probably flexbox emulation affected them. (xref bug 1821304)

Probably. Let's hook it up there for inspection.

Comment 12

[blakami]

I have performed additional testing and can confirm that the reported bug can be reproduced in my environment. Indeed the modals are not adjusting to the size while navigating between menus.

I am using Ubuntu 23.04 and Thunderbird 115, but it also happens in the Daily version 121.

Comment 13

[blakami]

Attachment: Bug 1823181 - Dialog boxes fit to content. r=mkmelin

Created new functions to help determine the size of the dialog boxes for the key wizard. This was useful so the dialog boxes resize to their minimum height and properly fit the content. Made changes to the tests (added new tests to see if these changes were correct). Additionally, there are small additions to the xhtml and css files (IDs and styles).