1036191 - [B2G][2.0][l10n][Contacts] "Facebook Friends' header string is truncated in multiple languages because of bigger button (2.0 UX visual refresh)

Status: VERIFIED FIXED

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

Description

[Jordan de Geus(JordanD)]

Attachment: facebook.png

Description:
When users are in Russian language and users elect to "sync friends" to their Facebook account, users will see the "Facebook Friends" header displays truncated.

Setup:
Settings > Language> ru - Russian
Have a Facebook account with at least one friend. 

Repro Steps:
1) Update a Flame device to BuildID: 20140702000201
2) Select Contacts> Settings> Enable "Sync Friends"
3) Sign into Facebook account
4) Observe header displays truncated

Actual:
"Facebook Friends" header string displays truncated
Expected:
Header string displays correctly without truncation. 

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

Repro frequency: 3/3
Link to failed test case: https://moztrap.mozilla.org/manage/case/12809/
See attached: Screenshots - Facebook.png

Comment 1

[Jordan de Geus(JordanD)]

Environmental Variables:
Device: Flame 1.4
Build ID: 20140702063007
Gaia: e8599c2b346addf3bf857310502e5b542ae7d0b2
Gecko: 5ff8eb391b65
Version: 30.0 (1.4)
Firmware Version: v122
User Agent: Mozilla/5.0 (Mobile; rv:30.0) Gecko/30.0 Firefox/30.0

Actual: "Facebook Friends" does not display truncated on Flame 1.4 as text is aligned left.

Comment 2

[Jordan de Geus(JordanD)]

This issue DOES NOT occur on Flame 1.4.

Comment 3

[KTucker [:KTucker][Inactive 3/4/2016]]

This seems to be a Firefox OS issue since the text is being centered in the header instead of left-justified. Can you please check this on multiple languages and move to the correct product?

Comment 4

[Jordan de Geus(JordanD)]

The header is displaying centered on multiple languages.
Checked: French, German, English, Italian, and Spanish

Comment 5

[KTucker [:KTucker][Inactive 3/4/2016]]

Please fix your title to indicate what the real issue is here.

Comment 6

[Jordan de Geus(JordanD)]

Updating title to indicate the header is center justified.

Comment 7

[KTucker [:KTucker][Inactive 3/4/2016]]

At least 6 of the languages are encountering a truncation issue because of this text alignment change. Delphine, could you please weigh in on the severity of this issue?

Comment 8

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

Note: this issue does not happen because the text is center justified, but because of the bigger button that UX created for 2.0 in their visual refresh (Bug 983812)
That said, as I don't speak those languages I can't tell if this is critical or not. It might depend on the locale. If the sense is completely lost then that's not good, but that's up to the localizers to tell. 
Jordan: please mention exactly which languages this happens on, and add the appropriate localizers so they can weigh in on this.

To say the truth, I don't really know what to make of this bug. Talked with Pike on irc and he says this looks like a conflict between UX and l10n. Apparently for some languages, even the automatic resizing of text doesn't help to make it fit - if any resizing at all occurs, which we can't really tell since the screenshot is zoomed in a lot.
Also flagging UX about this

Comment 9

[Stephany Wilkes]

This is within the app header itself. Once we have common building blocks powered by web components, fixing this issue will be much easier. We do have some automatic re-sizing in the header, which it doesn't look like is working here - BUT, if an app is not calling the common header or overriding it with its own rules, there's not much we can do there.

Comment 10

[Jordan de Geus(JordanD)]

(In reply to Delphine Lebédel [:delphine - please need info] from comment #8)
> Jordan: please mention exactly which languages this happens on, and add the
> appropriate localizers so they can weigh in on this.

The following languages are being affected:
Bulgarian, Danish, German, Greek, Spanish, French, Magyar, Lithuanian, Melayu, Norwegian, punjabi, Romanian, Russian, Slovenian, Albanian, Serbian -Cyrillic, Serbian Latin, Swedish, Tamil, and Vietnamese

There are a few languages I could not tell what they were, they are as follow:  
Two below Tamil
One below Turkish
Two above Melayu
One above Hrvatski

I also had some issues finding some of the localizers for the following languages: Bahasa Indonesia, Melayu, Albanian 

Environmental Variables:
Device: Flame 2.0
Build ID: 20140721000201
Gaia: 8cb1a949f2e9650bb2c5598e78a6f24a58bbaf97
Gecko: 4bd4b0ae7bbe
Version: 32.0a2 (2.0)
Firmware Version: v122
User Agent: Mozilla/5.0 (Mobile; rv:32.0) Gecko/32.0 Firefox/32.0

Comment 11

[Théo Chevalier]

Already tried in French yesterday on Flame, I don't see any truncation. Jordan, can you confirm you are seeing the same thing as on the screenshot I'll attach in a few seconds, please?

Comment 12

[Théo Chevalier]

Attachment: Screenshot Facebook French (Flame 2.1)

Comment 13

[Jordan de Geus(JordanD)]

PLEASE IGNORE COMMENT 10.

The following languages are being affected:
Bengali, Czech, Welsh, Danish, German, Pulaar-Fulfulde, Dutch, Irish, Scottish Gaelic, Galician, Kannada, Hindi, Malayalam, Norwegian, Dutch, Catalan, Bosnian, Songhoy, Albanian, Swahili, Swedish, Tamil, Thai, Telugu

I also had some issues finding some of the localizers for the following languages: Welsh, Irish, Scottish Gaelic, Galician, Kannada, Malayalam, Norwegian, Bosnian, Songhoy, Albanian, Tamil, Thai, Telugu

Environmental Variables:
Device: Flame 2.0
Build ID: 20140721000201
Gaia: 8cb1a949f2e9650bb2c5598e78a6f24a58bbaf97
Gecko: 4bd4b0ae7bbe
Version: 32.0a2 (2.0)
Firmware Version: v122
User Agent: Mozilla/5.0 (Mobile; rv:32.0) Gecko/32.0 Firefox/32.0

Comment 14

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

Oh wow, I initially understood that much less locales were affected. This bug is going to get way too confusing if everyone starts giving input here. 
I'll post a message on dev.l10n newsgroup to get input about this particular case. If there are multiple locales where it's critical to fix this issue, I'll probably just make this bug a meta bug and link to the appropriate locale bugs.

Comment 15

[Mohomodou Houssouba]

With regard to Songhay (Soŋay), I am the primary respondent, if you have questions or requests.

Comment 16

[Francesco Lodolo [:flod]]

I'm not sure why we're CCing tons of localizers instead of developers.

:gmarty
You fixed the header issue in bug 908300, any idea why it's not working here?

Comment 17

[Francesco Lodolo [:flod]]

Actually, :mhenretty is the original author of the patch. I'll leave both the NI open, just in case.

Comment 18

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

(In reply to Francesco Lodolo [:flod] from comment #16)
> I'm not sure why we're CCing tons of localizers instead of developers.
> 
We shouldn't. Initially there were supposed to be very few locales concerned, which was why I wanted input from them on how severe the situation was in their locale.
Given that so many are actually affected, thanks for ni the right people

Comment 19

[Michael Henretty [:mikehenrty][:mhenretty]]

Upon initial investigation, we are indeed including the script that performs the resizing on the FB import screen. So I'm not sure why it's not working. I'll take a deeper look tomorrow.

Comment 20

[Michael Henretty [:mikehenrty][:mhenretty]]

Attachment: Gaia PR, include font utils in import page

It turns out we didn't include the font utils in the appropriate import.html page.

Comment 21

[Guillaume Marty [:gmarty]]

Comment on attachment 8462670 [details] [review]
Gaia PR, include font utils in import page

Looks good to me!

Comment 22

[Francesco Lodolo [:flod]]

We need this on 2.0 as well, hope that setting the flag request on the bug is enough at this point.

[Blocking Requested - why for this release]: multiple locales display a truncated header (regression from 1.4), while we should automatically resize the text to fit as we already do in other contexts.

Comment 23

[Francisco Jordano [:arcturus] [:francisco]]

I think after we get the 2.0+ we will need to ask for the uplift approval. Step by step ;)

Comment 24

[Michael Henretty [:mikehenrty][:mhenretty]]

master: https://github.com/mozilla-b2g/gaia/commit/be5fc7f8d2bb6f6ad61294a6e2219827b9930901

Comment 25

[Michael Henretty [:mikehenrty][:mhenretty]]

v2.0: https://github.com/mozilla-b2g/gaia/commit/51d338ec7e32b168ab8cd2b86d9d11a63fefbec3

Comment 26

[Théo Chevalier]

Verified fixed on Flame 2.0 with multiple locales from c#13.

Most of the locales are fixed with the font resize. Note that some are still affected (like Tamil)  because even resized, the translation is still too long.
But those cases should be handled by localizers, there is not much we can do here.

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 27

[Shine(Leave from Mozilla)]

Attachment: Screenshot

Dear Mike,
This bug has been verified to fail on Flame 2.1.
The following languages are still affected:
Български, Català, Cestia, Pulaar-fulfulde, Italiana, Melayu, Kannada(ಕನ್ನಡ), Khmer(ខ្មែរ)
See attachment: Screenshot.zip

Flame 2.1 build:
Gaia-Rev        dbaf3e31c9ba9c3436e074381744f2971e15c7bf
Gecko-Rev       https://hg.mozilla.org/releases/mozilla-b2g34_v2_1/rev/ebce587d2194
Build-ID        20141203001205
Version         34.0

Comment 28

[Mike Lien[:mlien]]

Verified again with v2.1, comment 27's truncation is due to update page's "Update" translation is too long.
The original import page from comment 0 is fine

Gaia-Rev        38e17b0219cbc50a4ad6f51101898f89e513a552
Gecko-Rev       https://hg.mozilla.org/releases/mozilla-b2g34_v2_1/rev/8b92c4b8f59a
Build-ID        20141205001201
Version         34.0
Device-Name     flame
FW-Release      4.4.2
FW-Incremental  eng.cltbld.20141126.193631
FW-Date         Wed Nov 26 19:36:42 EST 2014
Bootloader      L1TC10011880