1115224 - [Settings] Some headers are truncated for several locales (auto-resize doesn't work anymore)

Status: RESOLVED DUPLICATE of bug 1112131

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

Description

[Théo Chevalier]

Attachment: 2.2, French, truncation

STR:
1. Switch locale to French
2. Close the Settings App (kill it)
3. Reopen Settings
4. Go to Browsing privacy (Confidentialité navigation)

Actual:

Header is truncated as on attached screenshot

Expected:
Header is automatically resized to fit

--

This is definitely a regression, it was working fine a few weeks ago on 2.2. I didn't check, but 2.1 shouldn't be affected if the regression hasn't been uplifted there.

However, if you switch the locale *without* killing Settings, the header is resized as expected. The bug only occurs if you don't trigger an l10n update in the app (So, the most common case for end-users is affected: no language change).

Not all headers are affected in Settings, resizing is broken for only some of them.
So far:

"Browsing privacy" (French for instance)
"Application storage" (pseudo-locale Accented English)
"Device information" (Accented English or Scottish Gaelic for instance)
"Improve Firefox OS" (Accented English)

I chose locales that were more likely to get truncated, but note that a lot more locales are affected.

Tested on:
Gaia-Rev        c2da2bafd4e809317e2ca70c9bf5c11136a32818
Gecko-Rev       https://hg.mozilla.org/mozilla-central/rev/0532f2509f3f
Build-ID        20141223010202
Version         37.0a1
Device-Name     flame
FW-Release      4.4.2
FW-Incremental  39
FW-Date         Thu Oct 16 18:19:14 CST 2014
Bootloader      L1TC00011880

Comment 1

[Guillaume Marty [:gmarty]]

It appears that the privacy panel doesn't use gaia-header. Using it is very likely to fix these issues.

Comment 2

[Kevin Grandon :kgrandon]

Just FYI, "Browsing Privacy" is very different than the Privacy Panel. It's weird though because it looks like the browsing privacy page already uses gaia-header?

Privacy Panel Header: https://github.com/mozilla-b2g/gaia/blob/0f7bb156969c5c838ff90ebc88d7691fc4d94310/apps/privacy-panel/index.html#L69

Browsing Privacy: https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/elements/browsing_privacy.html#L4

Comment 3

[Théo Chevalier]

Just filed bug 1117166, not sure if it's the same root cause, but it's the same issue on unlock SIM PIN screen.

Comment 4

[Wilson Page [:wilsonpage]]

I did some debugging an have found that this is something to do with the attachedCallback now running, where it previously didn't (bug 1102502). This is causing the font-fit logic to be run more than once. There is likely a perf hit from this too.

Comment 5

[Julien Wajsberg [:julienw]]

From what I found:

* the auto resize do work (we're not always at the max font size), but we add the flush-right class to the heading, and so we end up with less room than what we calculated for.
* The fact that runFontFit runs twice should be removed by my patch in bug 1112131 but I don't think it's the reason of the issue here.

I think the root cause of the issue is my first point here, but I don't understand why it didn't happen before. Getting a regression window could help.

Comment 6

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

Bug 1094320 seems to have caused this issue.

B2g-inbound Regression Window

Last Working 
Environmental Variables:
Device: Flame 2.2
BuildID: 20141211002815
Gaia: 335e30af4c1c4eab4886889fae82879d9c99899a
Gecko: 65de6bc63a10
Version: 37.0a1 (2.2) 
Firmware Version: v188-1
User Agent: Mozilla/5.0 (Mobile; rv:37.0) Gecko/37.0 Firefox/37.0

First Broken 
Environmental Variables:
Device: Flame 2.2
BuildID: 20141211011215
Gaia: 2cb461dde5b9430ed87919e768de8c1cea503db6
Gecko: 55d34f238ace
Version: 37.0a1 (2.2) 
Firmware Version: v188-1
User Agent: Mozilla/5.0 (Mobile; rv:37.0) Gecko/37.0 Firefox/37.0

Last Working gaia / First Broken gecko - Issue does NOT occur
Gaia: 335e30af4c1c4eab4886889fae82879d9c99899a
Gecko: 55d34f238ace

First Broken gaia / Last Working gecko - Issue DOES occur
Gaia: 2cb461dde5b9430ed87919e768de8c1cea503db6
Gecko: 65de6bc63a10

Gaia Pushlog: https://github.com/mozilla-b2g/gaia/compare/335e30af4c1c4eab4886889fae82879d9c99899a...2cb461dde5b9430ed87919e768de8c1cea503db6

Comment 7

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

Julien, could you take a look at this please? Looks like the uplift for bug 1094320 caused this issue.

Comment 8

[Julien Wajsberg [:julienw]]

That was also my guess: maybe some headers are added with spaces after/before, and now that we trim, we calculate better... but end up with this issue.

But after replacing with l10n I don't think we have spaces; so I'm still not sure.

Keeping NI to look at it a little more today.

Comment 9

[Julien Wajsberg [:julienw]]

I just tried the Last Working Gaia, and I definitely see the issue with: "Application storage" or "Device Information" (pseudo-locale Accented English);

Maybe Bug 1094320 made it more apparent for some headers, but I think the issue was there before. We need to take 10px off the content width wen we do the calculation.

Comment 10

[Wilson Page [:wilsonpage]]

julien: I'm going to spend some time fine tuning the font-fit stuff. I'm working on top of your branch so that all the goodness you have added will be included.

Comment 11

[Julien Wajsberg [:julienw]]

For anyone looking here, the patch in bug 1112131 will change how the font size is calculated and how the available width is found, which should effectively fix the issue here.

Let's wait until bug 1112131 lands before checking and duping :)

Comment 12

[Théo Chevalier]

(In reply to Julien Wajsberg [:julienw] from comment #11)
> For anyone looking here, the patch in bug 1112131 will change how the font
> size is calculated and how the available width is found, which should
> effectively fix the issue here.
> 
> Let's wait until bug 1112131 lands before checking and duping :)

Everything looks good on master + French since it has landed, I guess it's safe to dupe now. Thanks :)