1035430 - [B2G][l10n][2.0][Notification Bar] Tamil: The string "{{appName}}: {{name}}" appears truncated

Status: VERIFIED FIXED

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

Description

[Roland Kunkel [:RolandK]]

Attachment: screenshot

Description:
When the user swipes from the top of the screen to the bottom to bring up the notifications pull-down, while in another language it is expected the string "{{appName}}: {{name}}" appears without truncation.

Setup Steps:
1) Settings > Language > ta-Tamil

Repro Steps:
1) Update a Flame device to BuildID: 20140707000200
2) Settings > Keyboard
3) Selected keyboards > Add more keyboards
4) Messaging App > create a new message
5) Swipe from the top of the screen to the bottom to bring up the notifications pull-down

Actual:
Observe the string "{{appName}}: {{name}}" appears truncated

Expected:
Translated strings do not appear truncated

Environmental Variables:
Device: Flame 2.0
BuildID: 20140707000200
Gaia: ef67af27dff3130d41a9139d6ae7ed640c34d922
Gecko: f53099796238
Version: 32.0a2
Firmware Version: v122
2.0 - Mozilla/5.0 (Mobile; rv:32.0) Gecko/32.0 Firefox/32.0

Repro frequency: 100%
Link to failed test case https://moztrap.mozilla.org/manage/case/12568/
See attached: screenshot

Comment 1

[Roland Kunkel [:RolandK]]

This issue does not occur in the latest 1.4 branch

Environmental Variables:
Device: Flame 1.4
BuildID: 20140707000200
Gaia: 5c9e1e4131d3ac8915ed88b72bb66dc7d97be6a0
Gecko: 2d0c15450488
Version: 30.0 (1.4) 
Firmware Version: v122
User Agent: Mozilla/5.0 (Mobile; rv:30.0) Gecko/30.0 Firefox/30.0

Tamil was introduced in 2.0.

Comment 2

[Théo Chevalier]

The user shouldn't be able to scroll horizontally like on the screenshot, the text in the notification should be truncated instead.

Also "xx minutes ago" in blue shouldn't overlap with the notification, Firefox OS is supposed to truncate. It may be related to the Tamil font.

Asking blocking-b2g2.0

Comment 3

[Guillaume Marty [:gmarty]]

I will work on it tomorrow

Comment 4

[Guillaume Marty [:gmarty]]

Also, the 'Clear all' message wraps. Not sure how to fix it though as expanding its container may have an impact on other locales. Can we request a shorter translation?

Comment 5

[Guillaume Marty [:gmarty]]

Attachment: Github PR

This bug fixes the following things:
* Keyboard IME notification: text is now truncated and ellipsed
* 'Clear all': button doesn't wrap anymore (fits in 1 line in Tamil)
* 'xx minutes ago': 
  * Time indicator: set max-width + increased of 1 rem
  * Message: Fixed width
  -> There is an overlap in many languages. This solution is a quick fix but is not ideal.

Alive, can you have a look?

With that, we still need shorter strings in Tamil for:
* Clear all
* xx minutes ago

Comment 6

[(inactive after 6/18) Alive Kuo [:alive]]

Unfortunately I don't have tamil language.
Could you append some screenshot of your fix
for english and for tamil?

Comment 7

[Guillaume Marty [:gmarty]]

Attachment: screenshot in Tamil

Comment 8

[Guillaume Marty [:gmarty]]

Attachment: Screenshot in English

Comment 9

[Guillaume Marty [:gmarty]]

Alive: there you go. See screenshot above.

Comment 10

[(inactive after 6/18) Alive Kuo [:alive]]

Comment on attachment 8453077 [details] [review]
Github PR

css change only, r=me, thank you!

Comment 11

[Théo Chevalier]

Comment on attachment 8453077 [details] [review]
Github PR

I know this is tricky to get the layout right in this area, but now even English is truncated, see https://bug1035430.bugzilla.mozilla.org/attachment.cgi?id=8453755
We can't change the allowed space at this point.

Also, why is Tamil truncated on this screenshot ahead of English? (There is space left that is unused)

Comment 12

[Guillaume Marty [:gmarty]]

I'm not familiar with Tamil, but truncation only happens between 2 characters and character width in Tamil are much larger than in English. This issue is very likely to happen in Chinese or Japanese where characters are square shaped (i.e. width === height).

Comment 13

[Guillaume Marty [:gmarty]]

Comment on attachment 8453077 [details] [review]
Github PR

I reworked the notification message to use flexbox. It doesn't change much in Tamil, but in English, the text message adapts to get longer when the timestamp text is shorter than the max-width.

There is a JavaScript change in this update, so Alive can you please review it?

Comment 14

[Guillaume Marty [:gmarty]]

Attachment: Screenshot in English

Here's a screenshot that demonstrates the new layout in flexbox. The English text is not truncated anymore.

Comment 15

[Théo Chevalier]

Comment on attachment 8453077 [details] [review]
Github PR

Hi Guillaume,

Thanks for taking care of it! I flashed my Flame with your patch and played with it a bit with different locales, and so far it looks great. No more overlaps, and most locales have even more room for the notification text, which is really, really helpful here. Thanks! f+

About Tamil truncation, yeah you're right, that explains the subtle difference with English.

Comment 16

[(inactive after 6/18) Alive Kuo [:alive]]

Comment on attachment 8453077 [details] [review]
Github PR

thank you for your patience.

Comment 17

[Guillaume Marty [:gmarty]]

Landed as of https://github.com/mozilla-b2g/gaia/commit/0754b52c7d279203c031b3ec61c778b2bdc61283

Comment 18

[Guillaume Marty [:gmarty]]

Landed in v2.0 branch in
https://github.com/mozilla-b2g/gaia/commit/785a6722d469ec6b8f9ce743b86ce9fc123bb478

Comment 19

[Kevin Grandon :kgrandon]

Guillaume - it appears that this is causing integration tests to fail, see:  https://tbpl.mozilla.org/?rev=2ce2565091f0f3d00719e71407c46ae5e8ea4400&tree=Gaia-Try

Can we either quickly fix this or back it out? Thanks!

Comment 20

[Théo Chevalier]

Verified fixed on Flame 2.0 with Tamil

Gaia      5ba22d458fdb63bd72c59de53c701d0efe35c1e2
Gecko     https://hg.mozilla.org/releases/mozilla-b2g32_v2_0/rev/6fbc60a80c6d
BuildID   20140806000200
Version   32.0
ro.build.version.incremental=110
ro.build.date=Fri Jun 27 15:57:58 CST 2014
B1TC00011230

Comment 21

[Shine(Leave from Mozilla)]

Attachment: Screenshot

This issue has been verified successfully on Flame 2.1.
See attachment: Verify_Screenshot.png
Reproducing rate: 0/3

Flame2.1 build:
Gaia-Rev        38e17b0219cbc50a4ad6f51101898f89e513a552
Gecko-Rev       https://hg.mozilla.org/releases/mozilla-b2g34_v2_1/rev/8b92c4b8f59a
Build-ID        20141205001201
Version         34.0