Closed Bug 1175805 Opened 9 years ago Closed 9 years ago

[Homescreen] UI icons may display as placeholder text for a split second on page load

Categories

(Firefox OS Graveyard :: Gaia::Everything.me, defect, P3)

ARM
Gonk (Firefox OS)
defect

Tracking

(blocking-b2g:2.5+, b2g-v2.2 unaffected, b2g-v2.5 verified, b2g-master verified)

VERIFIED FIXED
blocking-b2g 2.5+
Tracking Status
b2g-v2.2 --- unaffected
b2g-v2.5 --- verified
b2g-master --- verified

People

(Reporter: hcheng, Assigned: wilsonpage)

References

Details

(Keywords: regression, Whiteboard: [systemsfe])

Attachments

(1 file)

When you enter any smart collection at first time after restarting, the close button cannot be shown correctly.

* STR
1. restart phpne
2. click one smart collection

* Expected results:
The close button shows correctly.

* Actual results:
It shows the word 'close' and then shows close button.

* Link: at 25 sec
https://www.youtube.com/watch?v=_2DVRtR_s2k
*Test env:
Build ID               20150617160207
Gaia Revision          b404c41c5471c31610e64defb74ec066b411e724
Gaia Date              2015-06-17 17:01:15
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/a3f280b6f8d5
Gecko Version          41.0a1
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150617.192003
Firmware Date          Wed Jun 17 19:20:14 EDT 2015
Bootloader             L1TC000118D0
Whiteboard: [systemsfe]
QA Contact: pcheng
Unable to find a regression window for this bug. The repro rate drops too low (1 out of 7 attempts, each attempt requires a reboot of phone) in older builds it becomes impossible to get an accurate window.
QA Whiteboard: [QAnalyst-Triage?]
Flags: needinfo?(ktucker)
QA Whiteboard: [QAnalyst-Triage?] → [QAnalyst-Triage+]
Flags: needinfo?(ktucker)
Flags: needinfo?(hcheng)
Found new STR for this bug, and have seen it in multiple other sections of the phone with low repro.
* Messages
* Settings
* FTU
* 'Homescreen Settings' activity at Homescreen [new STR]

Repro Steps:
1) Update phone to 20150715-
2) Hold tap on homescreen
3) Tap 'Homescreen Settings'
4) Observe back arrow at top-left as Settings share activity comes into view

Actual:
Back arrow displays as text "Back" for half a second

Expected:
UI icons do not display as text

Repro Rate: 5/5

New STR has identical branch affected: master flame & aries [affected], 2.2 [unaffected]
------------------------------
Device: Aries 2.5
BuildID: 20150716194428
Gaia: 77bc0d940bde2a5d2d4dfadfcccc6d8d77456d36
Gecko: 8d262d1d0ae5
Gonk: 2916e2368074b5383c80bf5a0fba3fc83ba310bd
Version: 42.0a1 (2.5) 
Firmware Version: D5803_23.1.A.1.28_NCB.ftf
User Agent: Mozilla/5.0 (Mobile; rv:42.0) Gecko/42.0 Firefox/42.0

Device: Flame 2.5
BuildID: 20150715160204
Gaia: b9968cdc4a1dee49848fed6159a59c378cea062d
Gecko: 49683d4e9ebd
Gonk: a4f6f31d1fe213ac935ca8ede7d05e47324101a4
Version: 42.0a1 (2.5) 
Firmware Version: v18D
User Agent: Mozilla/5.0 (Mobile; rv:42.0) Gecko/42.0 Firefox/42.0
------------------------------
Re-attempting regression window with new information on comment 3.
QA Whiteboard: [QAnalyst-Triage+]
Summary: [SmartCollections] close button shows the word 'close' before showing 'x' button at first time → [Homescreen] UI icons may display as placeholder text for a split second on page load
b2g-inbound regression window:

Last Working
Device: Flame
BuildID: 20150615060342
Gaia: 7dda863fb006fd3cb77c8e92aec739b2f829115b
Gecko: a52e8b0ac3d5
Gonk: a4f6f31d1fe213ac935ca8ede7d05e47324101a4
Version: 41.0a1 (2.5 Master) 
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:41.0) Gecko/41.0 Firefox/41.0

First Broken
Device: Flame
BuildID: 20150615064342
Gaia: 7a068be308f6b6429b2af79bac89a982e6c18d49
Gecko: 1117e929e06c
Gonk: a4f6f31d1fe213ac935ca8ede7d05e47324101a4
Version: 41.0a1 (2.5 Master) 
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:41.0) Gecko/41.0 Firefox/41.0

Last Working Gaia First Broken Gecko - no repro
Gaia: 7dda863fb006fd3cb77c8e92aec739b2f829115b
Gecko: 1117e929e06c

Last Working Gecko First Broken Gaia - repro
Gaia: 7a068be308f6b6429b2af79bac89a982e6c18d49
Gecko: a52e8b0ac3d5

Gaia pushlog:
https://github.com/mozilla-b2g/gaia/compare/7dda863fb006fd3cb77c8e92aec739b2f829115b...7a068be308f6b6429b2af79bac89a982e6c18d49

Caused by changes made in Bug 1162040.
Blocks: 1162040
QA Whiteboard: [QAnalyst-Triage?]
Flags: needinfo?(ktucker)
Yura, can you take a look at this please? This might have been caused by the landing for bug 1162040.
QA Whiteboard: [QAnalyst-Triage?] → [QAnalyst-Triage+]
Flags: needinfo?(ktucker) → needinfo?(yzenevich)
Flags: needinfo?(hcheng)
I'm not sure if it is indeed caused by bug 1162040, it looks like the action attribute is displayed as text for a brief moment and might be an issue with the gaia-component. ni?ing Wilson here.
Flags: needinfo?(yzenevich) → needinfo?(wilsonpage)
I think I have somewhat diagnosed the problem.

If we look at a the commit log for gaia-icons, we can see that whenever :gmarty (Linux) builds gaia-icons.ttf the output file is ~36kb. Whenever I (or anyone else using Mac) build gaia-icons.ttf, the output file is ~57kb.

The following steps fix the issue:

1. Replace shared/elements/gaia-icons/fonts/gaia-icons.ttf with any build from :gmarty [1].
2. make reset-gaia

Gmarty can you make a build from gaia-icons/master, replace shared/elements/gaia-icons/fonts/gaia-icons.ttf and clarify that you cannot reproduce the steps in comment 3?

[1] https://github.com/gaia-components/gaia-icons/commits/master/fonts
Flags: needinfo?(wilsonpage) → needinfo?(gmarty)
I've done a new built of the font under Linux [1], flashed Gaia with it and saw that the flickering effect is gone with the new font.

I guess we only need to update the gaia-icons dependency now, document the bug on the gaia-icons repo and make sure we compile it under Linux or a VM running Linux.

[1] https://github.com/gaia-components/gaia-icons/commit/fd80435e01df19477842e985ed51d20c306c2af5
Flags: needinfo?(gmarty)
Assignee: nobody → wilsonpage
Status: NEW → ASSIGNED
It doesn't really matter where the font is generated (although it could be a good idea to understand why we have a difference); however what we need to take care is to have the exact same icon font file installed in the app and in Gonk (in /system/fonts/hidden).

That's the trick we use so that we don't need to actually load the ttf file in the app, and thus avoid the flashing issue.

That also means we should not have the issue when we fullflash as the images should always have the right ttf file. But we may have the issue when shallow flashing.

Hope this helps.
[Blocking Requested - why for this release]:

I don't understand why it's not a blocker yet. Of course we need to fix this if this happens on full flash as well, like Pi Wei is saying in dupe bug 1209448.
blocking-b2g: --- → 2.5?
blocking-b2g: 2.5? → 2.5+
I can reproduce this. I can confirm that `system/fonts/hidden/gaia-icons.ttf` is identical to `shared/elements/gaia-icons/fonts/gaia-icons.ttf` so we shoudl be getting the preloaded gain.

The new gaia-icons.ttf is only 0.4kb larger than the previously working file.

Asking gmarty to do a build and see if that magically resolves the issue.
Flags: needinfo?(gmarty)
A build from gmarty appears to magically fix this issue, I have no idea why! I stamped a new version (v0.10.5) [1] including his built files and getting autra to land in it his gaia-icons bug 1209961.

We must get to the bottom of this. Perhaps we can get :jfkthame to take a look at the two files [2][3] and see what would be causing the flash of text -> icon on page load.

[1] https://github.com/gaia-components/gaia-icons/releases/tag/v0.10.5
[2] https://github.com/gaia-components/gaia-icons/blob/v0.10.4/fonts/gaia-icons.ttf (bad)
[3] https://github.com/gaia-components/gaia-icons/blob/v0.10.5/fonts/gaia-icons.ttf (good)
Depends on: 1209961
Flags: needinfo?(jfkthame)
(In reply to Wilson Page [:wilsonpage] from comment #15)
> A build from gmarty appears to magically fix this issue, I have no idea why!
> I stamped a new version (v0.10.5) [1] including his built files and getting
> autra to land in it his gaia-icons bug 1209961.
> 
> We must get to the bottom of this. Perhaps we can get :jfkthame to take a
> look at the two files [2][3] and see what would be causing the flash of text
> -> icon on page load.
> 
> [1] https://github.com/gaia-components/gaia-icons/releases/tag/v0.10.5
> [2]
> https://github.com/gaia-components/gaia-icons/blob/v0.10.4/fonts/gaia-icons.
> ttf (bad)
> [3]
> https://github.com/gaia-components/gaia-icons/blob/v0.10.5/fonts/gaia-icons.
> ttf (good)

Although those two .ttf files are functionally identical as fonts, they're not binary-identical; they were generated about a week apart, judging by their internal date-created/modified fields. For the "preloaded font" scheme to work -- which is what avoids having to wait for the app to load its own copy of the font -- the file you're including in gaia-components must be an EXACT (binary-identical) match for the file that's in /system/fonts/hidden.

So when one of those is updated, the other needs to be updated as well, and you need to make sure to use the SAME font file, not two .ttfs that were generated separately -- even if generated from the same fontforge source.

And as I think you know, you'll generally see this issue if you shallow-flash a new version of the gaia stuff, without getting the /system/fonts/hidden file updated at the same time. But that's a temporary issue during development; full flashing should fix it, as long as the font versions truly match.
Flags: needinfo?(jfkthame)
I thought that when building a full image we were taking the icon font from gaia ? So the issue should never happen with fullflash setup (unless an app has a local copy of the font, but that's another issue) ?
Flags: needinfo?(gmarty)
(In reply to Jonathan Kew (:jfkthame) from comment #16)
> (In reply to Wilson Page [:wilsonpage] from comment #15)
> > A build from gmarty appears to magically fix this issue, I have no idea why!
> > I stamped a new version (v0.10.5) [1] including his built files and getting
> > autra to land in it his gaia-icons bug 1209961.
> > 
> > We must get to the bottom of this. Perhaps we can get :jfkthame to take a
> > look at the two files [2][3] and see what would be causing the flash of text
> > -> icon on page load.
> > 
> > [1] https://github.com/gaia-components/gaia-icons/releases/tag/v0.10.5
> > [2]
> > https://github.com/gaia-components/gaia-icons/blob/v0.10.4/fonts/gaia-icons.
> > ttf (bad)
> > [3]
> > https://github.com/gaia-components/gaia-icons/blob/v0.10.5/fonts/gaia-icons.
> > ttf (good)
> 
> Although those two .ttf files are functionally identical as fonts, they're
> not binary-identical; they were generated about a week apart, judging by
> their internal date-created/modified fields. For the "preloaded font" scheme
> to work -- which is what avoids having to wait for the app to load its own
> copy of the font -- the file you're including in gaia-components must be an
> EXACT (binary-identical) match for the file that's in /system/fonts/hidden.

I don't think I explained this well enough. I am aware the two fonts are not identical. When the first font is used in Gaia and then full-flashed we get FOUC (as though preloading failed). But when the other font [2] is used it's fine.

I wanted to know what the difference was between these two font files that caused this.
Flags: needinfo?(jfkthame)
(In reply to Wilson Page [:wilsonpage] from comment #18)
> (In reply to Jonathan Kew (:jfkthame) from comment #16)
> > (In reply to Wilson Page [:wilsonpage] from comment #15)
> > > A build from gmarty appears to magically fix this issue, I have no idea why!
> > > I stamped a new version (v0.10.5) [1] including his built files and getting
> > > autra to land in it his gaia-icons bug 1209961.
> > > 
> > > We must get to the bottom of this. Perhaps we can get :jfkthame to take a
> > > look at the two files [2][3] and see what would be causing the flash of text
> > > -> icon on page load.
> > > 
> > > [1] https://github.com/gaia-components/gaia-icons/releases/tag/v0.10.5
> > > [2]
> > > https://github.com/gaia-components/gaia-icons/blob/v0.10.4/fonts/gaia-icons.
> > > ttf (bad)
> > > [3]
> > > https://github.com/gaia-components/gaia-icons/blob/v0.10.5/fonts/gaia-icons.
> > > ttf (good)
> > 
> > Although those two .ttf files are functionally identical as fonts, they're
> > not binary-identical; they were generated about a week apart, judging by
> > their internal date-created/modified fields. For the "preloaded font" scheme
> > to work -- which is what avoids having to wait for the app to load its own
> > copy of the font -- the file you're including in gaia-components must be an
> > EXACT (binary-identical) match for the file that's in /system/fonts/hidden.
> 
> I don't think I explained this well enough. I am aware the two fonts are not
> identical. When the first font is used in Gaia and then full-flashed we get
> FOUC (as though preloading failed). But when the other font [2] is used it's
> fine.
> 
> I wanted to know what the difference was between these two font files that
> caused this.

There's no difference that would cause this, AFAICS; the only differences between those files are in their internal timestamps.

Therefore, I'm still inclined to believe that in the case where you see the FOUC issue, there's a mismatch between the font that's preloaded (in /system/fonts/hidden/) and the font that's referenced from the CSS. (Where? Does the app possibly have its own copy, as hinted in comment 17, in addition to the shared one in gaia-icons?)

ISTM that the only way this would arise is if there are mismatched copies somewhere, and/or some part of the whole system isn't getting rebuild/reflashed/reloaded properly after the font change. Sorry, it's hard to be more precise without hands-on digging into a failing system to see what's actually present at runtime.


Another thing that's puzzling me now... looking in https://github.com/gaia-components/gaia-icons, I see there's a gaia-icons-embedded.css file that includes the font in base64 data-URI form. I thought we'd replaced that with a mechanism based on the file name/size/CRC, landed in bug 1036394. Why aren't we using that here?
Flags: needinfo?(jfkthame)
(In reply to Jonathan Kew (:jfkthame) from comment #19)
> Another thing that's puzzling me now... looking in
> https://github.com/gaia-components/gaia-icons, I see there's a
> gaia-icons-embedded.css file that includes the font in base64 data-URI form.
> I thought we'd replaced that with a mechanism based on the file
> name/size/CRC, landed in bug 1036394. Why aren't we using that here?

gaia-icons-embedded.css isn't used in Gaia directly. It's simply an alternative option for users who may want to use the icon-font in their own project, but want to reduce http requests and FOUC when they don't have the luxury of the various fast-paths we have in Gaia.
Ah, thanks - I won't worry about that then. :)
Priority: -- → P3
Fixed by the update the gaia-icons v0.10.5 in bug 1209961.
Status: ASSIGNED → RESOLVED
Closed: 9 years ago
Resolution: --- → FIXED
This bug has been verified fixed.

- The original STR no longer applies (We no longer have smart collections)
- Comment 3 STR can be done with legacy Home screen, which I have checked and it's no longer happening (found an issue where the back arrow button doesn't work, writing that up)
- Duplicated bug 1199730 has been verified as no longer occurring
- Duplicated bug 1209448 has been verified as no longer occurring

Device: Aries 2.6 Master
BuildID: 20151112122058
Gaia: 27bc9412ca607648bc398b25bb1ae25653b2b278
Gecko: 3cc3b1968524248450c465c4ea2ee5596ffa65f2
Gonk: a19052e4389c3ae2d8fc3e7a74a475401baacc56
Version: 45.0a1 (2.6) 
Firmware Version: D5803_23.1.A.1.28_NCB.ftf
User Agent: Mozilla/5.0 (Mobile; rv:45.0) Gecko/45.0 Firefox/45.0

Device: Flame 2.6 Master
BuildID: 20151112030244
Gaia: 27bc9412ca607648bc398b25bb1ae25653b2b278
Gecko: 3cc3b1968524248450c465c4ea2ee5596ffa65f2
Gonk: 205ac4204bbbb2098a8046444acba551ba5dc75a
Version: 45.0a1 (2.6) 
Firmware Version: v18Dv4
User Agent: Mozilla/5.0 (Mobile; rv:45.0) Gecko/45.0 Firefox/45.0
Status: RESOLVED → VERIFIED
QA Whiteboard: [QAnalyst-Triage+] → [QAnalyst-Triage?]
Flags: needinfo?(jmercado)
QA Whiteboard: [QAnalyst-Triage?] → [QAnalyst-Triage+]
Flags: needinfo?(jmercado)
Let's get this checked on 2.5 as well.
Flags: needinfo?(pcheng)
Keywords: verifyme
This bug has been verified as "pass" on the latest build of Aries KK v2.5 and Flame KK v2.5 by the STR in comment 3.(We no longer have smart collections)
And duplicated bug 1199730 and 1209448 also have been verified as no longer occurring.
Actual results: UI icons do not display as text.
See attachment: Verified_FlameKK_v2.5.3GP
Reproduce rate: 0/10

Device: Aries KK 2.5 (Pass)
Build ID               20151110094357
Gaia Revision          07baf613699fa6225359c7f04825c5caeb71d424
Gaia Date              2015-11-09 21:32:50
Gecko Revision         http://hg.mozilla.org/releases/mozilla-b2g44_v2_5/rev/e14287b00a514a15418dfaa89287030c588ad19d
Gecko Version          44.0a2
Device Name            aries
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.worker.20151110.090331
Firmware Date          Tue Nov 10 09:03:39 UTC 2015
Bootloader             s1


Device: Flame KK 2.5 512mb(Pass)
Build ID               20151109004552
Gaia Revision          cf646c52bb947af28329b0a100df91d1b1f2a907
Gaia Date              2015-11-09 02:55:50
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g44_v2_5/rev/4eafef5b80f8985c94c4a067f130d37513e1a581
Gecko Version          44.0a2
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20151109.041411
Firmware Date          Mon Nov  9 04:14:26 EST 2015
Firmware Version        V18D V4
Bootloader             L1TC000118D0
QA Whiteboard: [QAnalyst-Triage+] → [QAnalyst-Triage+][MGSEI-Triage+]
Flags: needinfo?(pcheng)
I noticed that this bug has come back again. I'll file a new bug later.
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: