1124081 - Warning about configuring email without SSL has not enough space for localization

Status: VERIFIED FIXED

(Firefox OS Graveyard :: Gaia::E-Mail, defect)

Description

[Francesco Lodolo [:flod]]

Attachment: screenshot.png

When designing UI you should always leave at least a +30% space for localization.
See the attachment to check how it currently looks when localized. Those two buttons are basically not localizable, unless you decide to use a ton of .

My first suggestion would be to drop the "Learn more" button and change it to a link as part of the main text, and leave only one "I accept" button.

Comment 1

[Andrew Sutherland [:asuth] (he/him)]

Ugh, yeah, sorry about this.  We got caught up with the security/privacy risk stuff and the l10n issues really were not sufficiently considered.

From a user-guidance perspective (and because using an unencrypted/unauthenticated connection is such a mind-bogglingly horrible idea), we really want to guide the user towards "learn more" than we want than "I accept".

With that in mind, it seems like the two most viable options would be:

1) Make the buttons wrap to multiple lines; one potential issue with this is that perhaps there is a localization where a word would be required that is wider than the button itself?

2) Use full-width buttons, one above the other.  There's the potential for an overflow situation where we can't fit the long-form text and both of the buttons at the same time, so we'd have to decide whether to scroll just the long-form text or the whole card, including the buttons.  In the event the buttons are part of the scrolling region, I think we'd want to put the "learn more" button above the "I understand" button so that if you can only see the one button, it's the learn more.  (We might also want to make it very obvious that scrolling is possible by forcing the scrollbar or what not.)

Needinfo-ing UX and :flod for other better suggestions given that the link is probably too subtle for our goals.

Comment 2

[Francesco Lodolo [:flod]]

(In reply to Andrew Sutherland [:asuth] from comment #1)
> 1) Make the buttons wrap to multiple lines; one potential issue with this is
> that perhaps there is a localization where a word would be required that is
> wider than the button itself?

Quite possible. I'm thinking about German for example, but Gaelic is usually a good candidate for really long words. SMS uses full-width buttons, for example when selecting messages/threads, but the main text is usually very short.

> 2) Use full-width buttons, one above the other.  There's the potential for
> an overflow situation where we can't fit the long-form text and both of the
> buttons at the same time, so we'd have to decide whether to scroll just the
> long-form text or the whole card, including the buttons.  

Even with the current layout I expect some locales to need scrolling for the main text. Can we recover some space by using a smaller font, and maybe drop the separator between the paragraphs? It's also kind of strange for the title to be smaller than the text.

Comment 3

[James Burke [:jrburke]]

Attachment: GitHub pull request

Right, this was just missed. That dialog is using the /shared/style/confirm shared styles, and I assumed the buttons were more dynamic than they really are. The choice of header size and line separators are also from those shared styles.

This pull request overrides some of those shared styles to stack the buttons vertically so they can have the full width for each button. 

I would prefer to not do other shared style overrides, as the more that is done, the more it is likely to work incorrectly as the shared styles change.

I will wait for r+ and getting positive needinfo feedback from :flod and Juwei before landing. 

See the GitHub pull request for an image capture of how it looks with the changes.

Comment 4

[Francesco Lodolo [:flod]]

Buttons work great, but the text doesn't scroll for me.
Unfortunately with the current font-size, it's going to be truncated for a lot of locales.

Comment 5

[James Burke [:jrburke]]

:flod, do you mean the text does not scroll for en-US default text or when you tested longer text? I tried manually inserting longer text in the WebIDE in the en-US one, and it the text section was scrollable for me. However, the default en-US text is short enough that it does not need to scroll.

Comment 6

[Francesco Lodolo [:flod]]

(In reply to James Burke [:jrburke] from comment #5)
> :flod, do you mean the text does not scroll for en-US default text or when
> you tested longer text? I tried manually inserting longer text in the WebIDE
> in the en-US one, and it the text section was scrollable for me. However,
> the default en-US text is short enough that it does not need to scroll.

I loaded a fake long text in my localization, and then flashed it to the phone. The text is simply cut, no scrolling available.

Comment 7

[James Burke [:jrburke]]

:flod, I am having trouble reproducing what you are seeing. This is what I did:

* git pull latest from gaia master.
* Save https://github.com/mozilla-b2g/gaia/pull/27576.patch as sslcss.patch in my gaia directory
* from my gaia directory: git apply sslcss.patch
* Added the following to email/locales/email.fr.properties:

---

# LOCALIZATION NOTE(tng-plain-socket-warning-title): When the user selects an
# PLAIN socket connection type for the email connections in manual config, a
# dialog is shown with this title.
tng-plain-socket-warning-title=Are you sure?

# LOCALIZATION NOTE(tng-plain-socket-warning-message): On the PLAIN socket
# connection warning dialog, explains the hazards of using that option.
tng-plain-socket-warning-message=Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt ex eget ipsum malesuada vehicula. Maecenas metus turpis, dapibus eu ante in, eleifend elementum odio. Morbi vitae nunc velit. Nullam sit amet sodales magna. Duis mattis, augue nec sodales blandit, lacus ipsum facilisis nunc, vitae sollicitudin dui leo non justo. Pellentesque posuere enim nisi, sit amet ullamcorper purus consectetur id. Praesent dapibus sed velit quis efficitur. Cras quis volutpat neque, id finibus enim. Vivamus eu lectus id erat feugiat tincidunt in at mauris. Aenean felis risus, posuere eu tristique ac, scelerisque nec elit. Quisque id tortor nisl. Quisque sit amet velit lorem. Other people may be able to see your passwords and emails or control your account.

# LOCALIZATION NOTE(tng-plain-socket-warning-message-options): On the PLAIN
# socket connection warning dialog, lets the user know there are better, free
# options for more secure email.
tng-plain-socket-warning-message-options=Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt ex eget ipsum malesuada vehicula. Maecenas metus turpis, dapibus eu ante in, eleifend elementum odio. Morbi vitae nunc velit. Nullam sit amet sodales magna. Duis mattis, augue nec sodales blandit, lacus ipsum facilisis nunc, vitae sollicitudin dui leo non justo. Pellentesque posuere enim nisi, sit amet ullamcorper purus consectetur id. Praesent dapibus sed velit quis efficitur. Cras quis volutpat neque, id finibus enim. Vivamus eu lectus id erat feugiat tincidunt in at mauris. Aenean felis risus, posuere eu tristique ac, scelerisque nec elit. Quisque id tortor nisl. Quisque sit amet velit lorem. There are multiple, free email providers that offer more secure, encrypted connections.

# LOCALIZATION NOTE(tng-plain-socket-learn-more): The button in the PLAIN
# socket connection warning dialog that explains more about the risks and about
# alternative email providers that have better connection options.
tng-plain-socket-learn-more=Learn more

---

Then did an install-gaia APP=email onto a flame device running latest master b2g as of yesterday, then switched the language to French.

When I navigate to the the confirm dialog off the manual email configuration page, then I am able to scroll the text. The scrollbar does not show up persistently (which is I believe the platform default), but I am able to scroll the text with my thumb, and the scroll bar shows up once I start scrolling.

If I missed a step or did the test incorrectly, please let me know.

Comment 8

[Francesco Lodolo [:flod]]

Even easier: this time I tried changing the strings directly in apps/email/locales/email.en-US.properties with your Lorem Ipsum example, then 'make install-gaia APP=email'. I see the lorem ipsum text, but there's no way to scroll.

Comment 9

[Francesco Lodolo [:flod]]

Oh wow, it's a Gecko issue. I didn't realize I had still 37.0a1, flashed from pvt and retried, now I have scrolling with this patch applied. Sorry for the unnecessary confusion.

Comment 10

[James Burke [:jrburke]]

I believe Juwei is busy at the moment, and given previous UX guidance on dialogs, I believe this is the correct way to lay out the buttons, so merging. Juwei, if you feel this was incorrect, feel free to let me know and I can open a new bug to do changes. In the meantime, I wanted to be sure we got something usuable for people doing localization.

Merged in master:
https://github.com/mozilla-b2g/gaia/commit/a43061172eaeba261eedee13a312697f61f7074c

from pull request:
https://github.com/mozilla-b2g/gaia/pull/27576

Comment 11

[James Burke [:jrburke]]

Comment on attachment 8552629 [details] [review]
GitHub pull request

[Approval Request Comment]
[Bug caused by] (feature/regressing bug #):
Bug 1046799. This is a follow up to that code change to be better for localization. As Bug 1046799 is on v2.2, this one should be too.

[User impact] if declined:
Localization will be difficult if the buttons are side by side.

[Testing completed]:
Tested on device, with different lengths of text.

[Risk to taking this patch] (and alternatives if risky):
Very low, just some CSS tweaks.

[String changes made]:
none

Comment 12

[Ryan VanderMeulen [:RyanVM]]

v2.2: https://github.com/mozilla-b2g/gaia/commit/7d8aae6be588d74104a99c6c6f96c23bc6360e7c

Comment 13

[Shally Li（leave from Mozilla）]

This bug has been verified as "pass" on the latest build of Flame v2.2&2.5&master and Aries KK v2.5&master.

STR：
1. Change system language to Italiano.
2. Launch Email.
3. Input email address and name, then tap "Manual setup".
4. Tap "SSL" and select "Unencrypted(insecure)".

Actual results: The long text on "Learn more" and "I understand" button has enough space for localization. 
See attachment: verified_Flame_v2.2&2.5&master.png
Reproduce rate: 0/10


----------------------------------------------------------------------------------
Device: Flame master_512mb eng (Pass)
Build ID               20151210150222
Gaia Revision          7e962276913bd4da7ce5fa7540767107ce322c78
Gaia Date              2015-12-09 21:27:39
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/412e4d7ce98ca4dbc37de133d0f26d7e1a59946f
Gecko Version          45.0a1
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20151210.183953
Firmware Date          Thu Dec 10 18:40:06 EST 2015
Firmware Version       v18D v4
Bootloader             L1TC000118D0

Device: Aries KK master eng (Pass)
Build ID               20151210120926
Gaia Revision          7e962276913bd4da7ce5fa7540767107ce322c78
Gaia Date              2015-12-09 21:27:39
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/412e4d7ce98ca4dbc37de133d0f26d7e1a59946f
Gecko Version          45.0a1
Device Name            aries
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.worker.20151210.112747
Firmware Date          Thu Dec 10 11:27:55 UTC 2015
Bootloader             s1

Device: Flame 2.5_512mb user (Pass)
Build ID               20151211000407
Gaia Revision          2eb55a6193b711b4acb5944be3ba8fea138506c8
Gaia Date              2015-12-10 21:18:06
Gecko Revision         http://hg.mozilla.org/releases/mozilla-b2g44_v2_5/rev/d0aa054f0eeae855ff0b4d7ef6c984ab96fd1944
Gecko Version          44.0a2
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.worker.20151210.231805
Firmware Date          Thu Dec 10 23:18:14 UTC 2015
Firmware Version       v18D v4
Bootloader             L1TC000118D0

Device: Aries KK 2.5 dogfood (Pass)
Build ID               20151211001044
Gaia Revision          2eb55a6193b711b4acb5944be3ba8fea138506c8
Gaia Date              2015-12-10 21:18:06
Gecko Revision         http://hg.mozilla.org/releases/mozilla-b2g44_v2_5/rev/d0aa054f0eeae855ff0b4d7ef6c984ab96fd1944
Gecko Version          44.0a2
Device Name            aries
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.worker.20151210.232018
Firmware Date          Thu Dec 10 23:20:26 UTC 2015
Bootloader             s1

Device: Flame 2.2_512mb eng (Pass) 
Build ID               20151210032501
Gaia Revision          885647d92208fb67574ced44004ab2f29d23cb45
Gaia Date              2015-10-07 13:05:24
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g37_v2_2/rev/4381c4b69b9c
Gecko Version          37.0
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20151210.072346
Firmware Date          Thu Dec 10 07:23:57 EST 2015
Firmware Version       v18D v4
Bootloader             L1TC000118D0

Comment 14

[Shally Li（leave from Mozilla）]

Attachment: verified_Flame_v2.2&2.5&master.png