1158094 - [Settings]The text "Join Hidden Network" is truncated in Settings.

Status: VERIFIED FIXED

(Firefox OS Graveyard :: Gaia::Settings, defect)

Description

[Sue]

Attachment: Join_hidden_network.png

[1.Description]:
[Settings][Flame v2.2]The text "Join Hidden Network" is truncated in Manage Networks view.
See attachment:Join_hidden_network.png

[2.Testing Steps]: 
Precondition:Set system as Portuguese Brazil
1. Open the Settings app and select 'Wi-Fi' 
2. Scroll to the bottom and select 'Manage Networks' 
3. Tap "Join Hidden Network"

[3.Expected Result]: 
3. There is no truncation. Nothing overlaps. The UI should not appear broken in any way.

[4.Actual Result]: 
3. The text "Join Hidden Network" is truncated.

[5.Reproduction build]: 
Device: Flame 2.2 user (affected)
Build ID               20150423002502
Gaia Revision          b838d0e7c163e66660dcb6e387d8339944a7a30e
Gaia Date              2015-04-23 02:32:46
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g37_v2_2/rev/8dce56574f28
Gecko Version          37.0
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150423.035211
Firmware Date          Thu Apr 23 03:52:22 EDT 2015
Bootloader             L1TC000118D0

Device: Flame 2.1 user (unaffected)
Build ID               20150423001201
Gaia Revision          bbe983b4e8bebfec26b3726b79568a22d667223c
Gaia Date              2015-04-09 13:52:48
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g34_v2_1/rev/6a68a038146a
Gecko Version          34.0
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150423.035520
Firmware Date          Thu Apr 23 03:55:31 EDT 2015
Bootloader             L1TC000118D0

[6.Reproduction Frequency]: 
Always Recurrence,5/5

[7.TCID]: 
12313

Comment 1

[Delphine Lebédel [:delphine - Use needinfo]]

Regression between 2.1 and 2.2 (string is same length) on a shipping locale. Therefore blocking.

Comment 2

[howie [:howie]]

We got 3 options here:
1. Adjust padding specifically for this language (EJ will put what it looks like later)

2. Adjust to a smaller font size, this option causes a wide impact. In 2.1 it was a button here so the font size was smaller. But in 2.2 many buttons are changed to this new style, so it truncates.

3. Multiple lines

ni UX for suggestion.

Comment 3

[EJ Chen [:eragonj][:小龍哥][Contributor mode on](inactive)]

Attachment: demo.png

Echo Howie's option 1, I added more 1rem (0.5 for left and 0.5 for right) for this element and please check demo.png for the real look. If we are doing this way, I have to say that this element in all languages will be influenced by this 1rem because we can't specifically assign which style on which language.

Hope this helps !

Comment 4

[Jenny Lee]

Redirect this bug to Helen =) Thanks Helen!

Comment 5

[howie [:howie]]

put Arthur as assignee since EJ will be on leave, thanks.

Comment 6

[Sam Foster [:sfoster] (he/him)]

Just for the record, I think this is not related to bug 1010675 (I'm going down the dependencies on bug #1118864 to see which are). You can get around the truncation with -moz-padding-end: 2rem (it is normally 3rem) but as attachment #8599725 [details] shows, it is quite cramped with the label right next to the '>'.  It might be better to either see if the translation can be made smaller, or allow these labels to wrap onto 2+ lines (better option IMO.)

Comment 7

[Delphine Lebédel [:delphine - Use needinfo]]

(In reply to Sam Foster [:sfoster] from comment #6)
> Just for the record, I think this is not related to bug 1010675 (I'm going
> down the dependencies on bug #1118864 to see which are). You can get around

Thanks so much for doing this Sam! Will be super helpful :)

> the truncation with -moz-padding-end: 2rem (it is normally 3rem) but as
> attachment #8599725 [details] shows, it is quite cramped with the label
> right next to the '>'.  It might be better to either see if the translation
> can be made smaller, or allow these labels to wrap onto 2+ lines (better
> option IMO.)
Since this issue has only been noted on pt-BR, need info on localizer to see if he can help shorten the string. thanks!

Comment 8

[Marcus Saad (:msaad)]

Not much can be done, as stated above the string has the same length and cannot be altered without changing the meaning. :/

Comment 9

[Delphine Lebédel [:delphine - Use needinfo]]

This might be way off bounds but I'll just suggest this in case... Since the "join hidden network" is right under the "Hidden Network" sub-header, could we maybe just use "join" there? Or would that be confusing?

Comment 10

[Marcus Saad (:msaad)]

If were going down that hill, we'd better use "Configure", since a window with SSID, PW and such will popup. Agreed?

Comment 11

[Marcus Saad (:msaad)]

Shortened the string to "Configure network". Please let me know if more can be done.

Comment 12

[Helen Huang [:HHuang]]

From a visual perspective, I will suggest to use multiple lines if we don't shorten the string. Consider some language probably becomes longer, it's meaningless if we adjust the padding or font size which only depends on one language.

Comment 13

[GitHub Autolander Bot]

Attachment: [gaia] crh0716:1158094 > mozilla-b2g:master

Comment 14

[Arthur Chen [:arthurcc][inactive after 6/30]]

Comment on attachment 8601294 [details] [review]
[gaia] crh0716:1158094 > mozilla-b2g:master

There are always chances that the strings do not fit the available space. Given comment 12, I would suggest to relax the restriction on single line menu item. Using concise strings that fit to the space is encouraged, but if it is not possible to have such strings multi-line menu items should also be allowed.

Pavel, could you help review the patch? Thanks!

Comment 15

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Comment on attachment 8601294 [details] [review]
[gaia] crh0716:1158094 > mozilla-b2g:master

LGTM, thanks :)

Comment 16

[GitHub Autolander Bot]

Pull request has landed in master: https://github.com/mozilla-b2g/gaia/commit/d454015a2a3e3a1812e375082d90ab964c10fbe7

Comment 17

[Arthur Chen [:arthurcc][inactive after 6/30]]

Comment on attachment 8601294 [details] [review]
[gaia] crh0716:1158094 > mozilla-b2g:master

[Approval Request Comment]
[Bug caused by] (feature/regressing bug #): N/A
[User impact] if declined: Users are not going to see the full text of the function.
[Testing completed]: Testing on the device.
[Risk to taking this patch] (and alternatives if risky): Low, it only adds multi-line support.
[String changes made]: None

Comment 18

[Elie]

This issue verified successfully on flame 2.2 user:
Device: Flame 3.0 user:
Build ID               20150506160205
Gaia Revision          426fe6450ab8da92bb473fef12ccb39c6c920dd0
Gaia Date              2015-05-06 08:40:16
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/5593ac626826
Gecko Version          40.0a1
Device Name            flame
Firmware(Release)      4.4.2
Reproduce rate         0/10

Comment 19

[Elie]

This issue verified successfully on flame 3.0 user:
Device: Flame 3.0 user:
Build ID               20150506160205
Gaia Revision          426fe6450ab8da92bb473fef12ccb39c6c920dd0
Gaia Date              2015-05-06 08:40:16
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/5593ac626826
Gecko Version          40.0a1
Device Name            flame
Firmware(Release)      4.4.2
Reproduce rate         0/10

Comment 20

[Ryan VanderMeulen [:RyanVM]]

v2.2: https://github.com/mozilla-b2g/gaia/commit/1ed6b0fced5f0440a7c939622a255498b7f7448c

Comment 21

[Elie]

This issue verified successfully on flame 2.2 user:
Device: Flame2.2 user
Build ID               20150511162500
Gaia Revision          c4c1bf443f2b01c2ba918780510fd4c639a3c360
Gaia Date              2015-05-11 14:12:24
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g37_v2_2/rev/70782f19acbf
Gecko Version          37.0
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150511.195649
Firmware Date          Mon May 11 19:56:59 EDT 2015
Bootloader             L1TC000118D0
Refer to picture    Join Hidden Network_Verified successfully.png

Comment 22

[Elie]

Attachment: Join Hidden Network_Verified successfully.png

Comment 23

[Arthur Chen [:arthurcc][inactive after 6/30]]

Reverted the patch as it caused many regression regarding truncation.

master: 4a281fe6e7c75116072443a93f41d38638442f20
v2.2:   8084264c4d1e28bc33220bc7443c7425bb76dbcc

Comment 24

[Aaron Wu]

[EPM Triaging]

As discussed with Arthur, he will fix it soon accordingly (Thanks! Artuhr)

Comment 25

[GitHub Autolander Bot]

Attachment: [gaia] crh0716:1158094 > mozilla-b2g:master

Comment 26

[Arthur Chen [:arthurcc][inactive after 6/30]]

Comment on attachment 8612221 [details] [review]
[gaia] crh0716:1158094 > mozilla-b2g:master

Hi EJ,

Could you help review this patch? This time I only apply the style on menu items to avoid affecting cases where we still need ellipsis. 

Thanks!

Comment 27

[EJ Chen [:eragonj][:小龍哥][Contributor mode on](inactive)]

Comment on attachment 8612221 [details] [review]
[gaia] crh0716:1158094 > mozilla-b2g:master

Thanks Arthur, this patch looks nice to me, r+.

Comment 28

[Arthur Chen [:arthurcc][inactive after 6/30]]

Thanks, EJ!

Comment 29

[GitHub Autolander Bot]

Pull request has landed in master: https://github.com/mozilla-b2g/gaia/commit/817ae56926f2b4dcfdaa77dd3d83e8fa15bc7786

Comment 30

[Ryan VanderMeulen [:RyanVM]]

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

Comment 31

[Jayme Mercado [:JMercado] (Inactive 3/4/2016)]

This issue is verified fixed on the latest nightly 3.0 and 2.2 Flame builds.

Actual Results: The Join hidden network text wraps to a second line and does not truncate.

Environmental Variables:
Device: Flame 3.0 KK (Full Flash) (319 MB)
BuildID: 20150601010203
Gaia: e6dc0f4c583407a4a52a66ce7cb11f058302a762
Gecko: f8d21278244b
Gonk: 040bb1e9ac8a5b6dd756fdd696aa37a8868b5c67
Version: 41.0a1 (3.0) 
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:41.0) Gecko/41.0 Firefox/41.0

Environmental Variables:
Device: Flame 2.2 KK (Full Flash) (319 MB)
BuildID: 20150601002502
Gaia: b4582cc394e0919623263997c0cdb0b4751a1403
Gecko: 78d8b0a4303d
Gonk: bd9cb3af2a0354577a6903917bc826489050b40d
Version: 37.0 (2.2) 
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:37.0) Gecko/37.0 Firefox/37.0