977268 - [B2G][l10n][Multiple languages] 'Show Password' text is displayed on multiple lines in Join Hidden Network

Status: VERIFIED FIXED

(Firefox OS Graveyard :: Gaia::First Time Experience, defect)

Description

[Peter Bylenga [:PBylenga]]

Attachment: ShowPassword_LineBreaks.png

Description:
"Show Password" text string on the Join Hidden Network screen (FTE) has line breaks instead of spaces for multiple locales.  Locales unaffected use spaces as expected.

Affected:
German
Greek
Bulgarian
Catalan
Spanish
French
Hungarian
Dutch
Russian
Serbian Cyrillic

Unaffected:
Slovak
Turkish
Bengali
Czech
English
Croatian
Italian
Polish
Portuguese (Brazil)
Romanian
Serbian Latin

Repro Steps:
1) Update a Buri to BuildID: 20140226004002
2) Launch FTE through Developer Options
3) Select an affected language (ie. Greek) on first screen
4) On Wifi setup select Join Hidden Network and observe "Show Password" string.

Actual:
"Show Password" string uses line breaks instead of spaces.

Expected:
"Show Password" string uses spaces.

v1.3 Environmental Variables:
Device: Buri v1.3 MOZ
BuildID: 20140226004002
Gaia: da50b2b62ed96993cf4df22e3d69c435b28506bd
Gecko: 3c39d1e487d9
Version: 28.0
Firmware Version: v1.2-device.cfg


Notes:

Repro frequency: 5/5, 100%
See attached: screenshot

Comment 1

[Peter Bylenga [:PBylenga]]

This issue reproduces on v1.2

v1.2 Environmental Variables:
Device: Buri v1.2 MOZ
BuildID: 20140220004002
Gaia: 539a25e1887b902b8b25038c547048e691bd97f6
Gecko: 2ea6a65eea23
Version: 26.0
Firmware Version: v1.2-device.cfg

Comment 2

[Stephany Wilkes]

I cannot determine why a line break was used instead of a space, in the string (if in fact that's the source of the problem). Patryk, do you know if this is a visual design issue or something in the string itself?

Comment 3

[Patryk Adamczyk [:patryk] UX]

From our perspective, this is not intentional, might be a coding issue instead.

Comment 4

[Francesco Lodolo [:flod] (OOO July 12–20)]

Translations, no sign of line breaks
http://transvision.mozfr.org/string/?entity=apps/communications/ftu/ftu.properties:showPassword&repo=gaia_1_3

My feeling is that the width for that checkbox label is smaller than the available space.

Comment 5

[Francesco Lodolo [:flod] (OOO July 12–20)]

https://github.com/mozilla-b2g/gaia/blob/master/apps/communications/ftu/css/style.css#L531

#hidden-wifi-authentication label p {
  width: 12rem;
  bottom: 0.4rem;
  left: 3rem;
}

Fixing it to 24rem seems to fit even Greek on a single line, which is the longest one.

Comment 6

[Francesco Lodolo [:flod] (OOO July 12–20)]

Attachment: Pull request on Github

This lets the label use all the horizontal space available. It definitely works, not sure if that's the way this problem is supposed to be fixed.

Comment 7

[Francesco Lodolo [:flod] (OOO July 12–20)]

Attachment: Screenshot on Keon

Keon running Italian build with the fix, label for "Show Password" replaced with the Greek one.

Comment 9

[Etienne Segonzac (:etienne)]

Comment on attachment 8383814 [details] [review]
Pull request on Github

Redirecting to an FTU peer :)

Comment 10

[Borja Salguero [:borjasalguero]]

Comment on attachment 8383814 [details] [review]
Pull request on Github

Hi Francesco! I've added a small comment to the patch. Feedback+ by now and let's try a responsive solution! Let me know and I'll take a look to the final patch. Thanks!

Comment 11

[Francesco Lodolo [:flod] (OOO July 12–20)]

Thanks, you're absolutely right: using a dynamic width instead of a fixed one is definitely better. 
I've updated the PR and tested it locally, it works fine.

Not sure if you want me to set again the r?, also note that I'll need someone to check-in the patch when ready.

Comment 12

[Borja Salguero [:borjasalguero]]

Comment on attachment 8383814 [details] [review]
Pull request on Github

R+ from my side. This patch is only CSS and is safe to land. We need to ensure that the text is shown properly in every language.

Comment 13

[Borja Salguero [:borjasalguero]]

Asking for 1.4? due to it's a surgical patch which let us to display this text properly in every language.

Comment 14

[Ryan VanderMeulen [:RyanVM]]

Master: 4b9f58e5d79d3ff73e7515970a768cd1e5494885

Comment 15

[Francesco Lodolo [:flod] (OOO July 12–20)]

Verified on Keon with build 20140307, setting phone to el.