1133204 - [Privacy Panel][Transparency Control] Permission labels (in list), headers, and titles don't wrap if very long, get truncated

Status: VERIFIED FIXED

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

Description

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

B2G 2.2 20150214002504 on Flame (v188 base image)

In the Settings' Privacy Panel the Permission labels in list, as headers, and as titles don't wrap if they are very long but get truncated. E.g."Play public notification sounds". This issue is worse for translations with longer words.

Comment 1

[marta]

I had a look at the code, and we are using the standard gaia components, which should resize the text. Same bug can be observed all around the settings. I don't think this is a PC problem. 
Delphine, can you advise what to do?

Comment 2

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

Since Marta mentions this is more around Settings (Comment 1), I believe this should get a fix from someone in Settings team. Adding now. Can someone please take a look at this? thanks!

Comment 3

[Josh Cheng [:josh]]

Dear Howie,
Could you please help to find someone from Gaia:Settings can help? Thanks!

Comment 4

[howie [:howie]]

Hi EJ, can you take a look on this? thanks.

Comment 5

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

Attachment: demo.png

[Truncation problems]

If I remembered correctly, for normal "ul li" case like what you see in Settings root page, from UX perspective, they don't want strings are truncated because it would make the screen not consistent. So, if strings are longer than what we thought, we will try to think a shorter one if possible.

Basically for default behavior of "ul li", it is correct to truncate strings if it is too long because this would fit all situations (at least we won't break the UI), but sometimes, for some special cases that we really need to make it shown instead of truncated, in Settings App, we will override its original rules by ourselves directly. (Take USB for example : https://bugzilla.mozilla.org/show_bug.cgi?id=1086686 )

Because each app knows all information about what to show & what to hide, we can handle that special cases by ourselves.

[Resize problems]

And for resize problem (in header), I did check the source code and I am sure that Privacy Panel doesn't use <gaia-header> to let it handle the long string.

I attached a screenshot here to demonstrate the missing part I mentioned above.

Marta, based on my observations above, can you take this part from Privacy Panel ? Thanks.

Comment 6

[GitHub Autolander Bot]

Attachment: [gaia] EragonJ:bug-1133204 > mozilla-b2g:master

Comment 7

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

ahh, it's quicker for me to write a simple patch compared with waiting for needinfo. This patch does what I said in comment 5 without testing, but I did try on device and that looks nice.

Feel free to take it and revise it if needed. thanks.

Comment 8

[marta]

Comment on attachment 8582924 [details] [review]
[gaia] EragonJ:bug-1133204 > mozilla-b2g:master

EJ, sorry for the delay - had been stuffed with work. Thanks for fixing it!

Comment 9

[GitHub Autolander Bot]

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

Comment 10

[Ryan VanderMeulen [:RyanVM]]

Please request Gaia v2.2 approval on this patch when you get a chance.

Comment 11

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

Comment on attachment 8582924 [details] [review]
[gaia] EragonJ:bug-1133204 > mozilla-b2g:master

[Approval Request Comment]
[Bug caused by] (feature/regressing bug #): no
[User impact] if declined: users can't see truncated strings in some panels.
[Testing completed]: yes, with manual test.
[Risk to taking this patch] (and alternatives if risky): low
[String changes made]: no

In this patch, we tried to add some additional CSS rules to make sure some panels would show the whole string instead of truncating them directly. In addition to this, we also changed <header> to <gaia-header> to make sure we use the right web component that can help us resize strings based on its length.

Comment 12

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

Thanks Ryan.

Comment 13

[Ryan VanderMeulen [:RyanVM]]

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

Comment 14

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

This issue is NOT fixed on the latest Nightly Flame KK  3.0 and 2.2 builds.

Actual Results: Text correctly wraps in the privacy panel menus.

The right side appears correctly.  See above screenshot.

Environmental Variables:
Device: Flame 3.0 KK (319MB) (Full Flash)
BuildID: 20150401010204
Gaia: 03164bd160809747e6a198e0dba1b7c3ee7789f5
Gecko: 18a8ea7c2c62
Gonk: b83fc73de7b64594cd74b33e498bf08332b5d87b
Version: 40.0a1 (3.0) 
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:40.0) Gecko/40.0 Firefox/40.0

Environmental Variables:
Device: Flame 2.2 KK (319MB) (Full Flash)
BuildID: 20150401002624
Gaia: 8b3086ad3963f1707e2bee9094baccafffe161c4
Gecko: 20b67213a047
Gonk: ebad7da532429a6f5efadc00bf6ad8a41288a429
Version: 37.0 (2.2) 
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:37.0) Gecko/37.0 Firefox/37.0

Comment 15

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

Accidentally made changes to the flags unintentionally.  Reverting those now.

Comment 16

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

Please disregard comment 15 and comment 14.

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

Actual Results: Text correctly wraps in the privacy panel menus.

The right side appears correctly.  See above screenshot.

Environmental Variables:
Device: Flame 3.0 KK (319MB) (Full Flash)
BuildID: 20150401010204
Gaia: 03164bd160809747e6a198e0dba1b7c3ee7789f5
Gecko: 18a8ea7c2c62
Gonk: b83fc73de7b64594cd74b33e498bf08332b5d87b
Version: 40.0a1 (3.0) 
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:40.0) Gecko/40.0 Firefox/40.0

Environmental Variables:
Device: Flame 2.2 KK (319MB) (Full Flash)
BuildID: 20150401002624
Gaia: 8b3086ad3963f1707e2bee9094baccafffe161c4
Gecko: 20b67213a047
Gonk: ebad7da532429a6f5efadc00bf6ad8a41288a429
Version: 37.0 (2.2) 
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:37.0) Gecko/37.0 Firefox/37.0