1151081 - [Window Management] Drop Down List menu transitions improperly with overlap when opening.

Status: VERIFIED FIXED

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

Description

[Martin Shuman [:Marty]]

Attachment: logcat-list-transition.txt

Description:
When opening large Drop Down list menus, such as Language, or City in the Settings app, the list will load in awkwardly, with the list appearing to take longer to load that the border UI around the list, creating a brief box-like appearance.  Additionally, depending on where the list is scrolled to when it is opened, the list will initially load in overlapping the header.

Repro Steps:
1) Update a Flame to 20150403010203
2) Open the Settings app
3) Navigate to 'Date & Time'
4) Open the City drop down menu
5) Scroll down the list, close, and then re-open the City drop down menu

Actual:
The menu opens improperly, with the list overlapping the header, and a different elements loading in at different times.

Expected:
The menu opens properly, without overlap.

Environmental Variables:
Device: Flame 3.0 (319MB)(Full Flash)
Build ID: 20150403010203
Gaia: 7969b367a7da62877c3a24a26d3cb5fda89d766c
Gecko: 70a113676b21
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

Repro frequency: 8/8
See attached: Logcat, Video (Url)

Comment 1

[Martin Shuman [:Marty]]

This issue DOES occur on Flame 2.2
The menu will load in slowly and overlap the header, although the effect is not as noticeable as it is in the 3.0 branch.

Environmental Variables:
Device: Flame 2.2 (319MB)(Full Flash)
Build ID: 20150403002503
Gaia: 022eeb91197ba4a9adfd67bd6db5aa03cc69eb31
Gecko: 77fdc6fbcae9
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

---------------------------------------

This issue does NOT occur on Flame 2.1
The menu opens properly, without overlap.

Environmental Variables:
Device: Flame 2.1 (319MB)(Full Flash)
Build ID: 20150403001204
Gaia: 4e7d880defb83c25b49462479c02b3e64d21f421
Gecko: e76f5e7a264d
Gonk: b83fc73de7b64594cd74b33e498bf08332b5d87b
Version: 34.0 (2.1)
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:34.0) Gecko/34.0 Firefox/34.0

Comment 2

[Peter Bylenga [:PBylenga]]

Regression of a core feature.

Requesting a window.

Comment 3

[Yeojin Chung [:YeojinC]]

Mozilla-inbound Regression Window:

Last Working Environmental Variables:
Device: Flame 3.0
BuildID: 20150201170935
Gaia: 740c7c2330d08eb9298597e0455f53d4619bbc1a
Gecko: 231a8c61b49f
Version: 38.0a1 (3.0) 
Firmware Version: v18D
User Agent: Mozilla/5.0 (Mobile; rv:38.0) Gecko/38.0 Firefox/38.0

First Broken Environmental Variables:
Device: Flame 3.0
BuildID: 20150201174135
Gaia: 740c7c2330d08eb9298597e0455f53d4619bbc1a
Gecko: bcefc7d8d885
Version: 38.0a1 (3.0) 
Firmware Version: v18D
User Agent: Mozilla/5.0 (Mobile; rv:38.0) Gecko/38.0 Firefox/38.0

Last Working Gaia First Broken Gecko: Issue DOES reproduce 
Gaia: 740c7c2330d08eb9298597e0455f53d4619bbc1a
Gecko: bcefc7d8d885

First Broken Gaia Last Working Gecko: Issue does NOT reproduce
Gaia: 740c7c2330d08eb9298597e0455f53d4619bbc1a
Gecko: 231a8c61b49f

http://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=231a8c61b49f&tochange=bcefc7d8d885

Caused by bug 950934

Comment 4

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

Kartikaya or Botond, can you take a look at this please? Looks like the work done for bug 950934 might be the culprit here.

Comment 5

[Bobby Chien]

Peter, could you help investigate this?

Comment 6

[Kartikaya Gupta (email:[e-mail])]

Taking out the line at [1] fixes this. I think 0.5s for this animation is too long anyway (didn't somebody say on dev-gaia that they should be capped at 200ms?). I'm not really sure why bug 950934 regressed this but perhaps the transition wasn't actually taking effect before?

[1] https://github.com/mozilla-b2g/gaia/blob/b570198ace4bcb53f1d4ea5884894bcffa936c8d/apps/system/style/value_selector/value_selector.css#L8

Comment 7

[Peter Chang[:pchang]]

Clear ni based on comment 6.

Comment 8

[Gregor Wagner [:gwagner]]

Chris, can you take a look here?

Comment 9

[howie [:howie]]

Hi Chris, do you have findings here? Thanks!

Comment 10

[Chris Lord [:cwiiis]]

Will take a look.

Comment 11

[Chris Lord [:cwiiis]]

This looks very much like a gfx bug to me, but I'm looking into it - we may well be able to work around it all the same.

Comment 12

[Chris Lord [:cwiiis]]

Can confirm this seems to be a gfx bug, I suppose related to elements with a displayport (so possibly low-precision tiles/progressive rendering related? Will check if turning those off fixes it), and that we can work around it by just hiding overflow during the transition.

Patch and further testing incoming.

Comment 13

[Chris Lord [:cwiiis]]

Can confirm that disabling progressive paint fixes this. Disabling low-precision tiles on its own (and leaving progressive paint enabled) also appears to fix this. I expect this is another manifestation of bug 1083119.

In the short term, let's work around this (as it's easy and more performant anyway).

Comment 14

[GitHub Autolander Bot]

Attachment: [gaia] Cwiiis:bug1151081-buggy-value-selector-transition > mozilla-b2g:master

Comment 15

[Chris Lord [:cwiiis]]

Comment on attachment 8596564 [details] [review]
[gaia] Cwiiis:bug1151081-buggy-value-selector-transition > mozilla-b2g:master

This works around the gfx issue and also fixes that the transition wasn't playing the first time the dialog was triggered.

Comment 16

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

Comment on attachment 8596564 [details] [review]
[gaia] Cwiiis:bug1151081-buggy-value-selector-transition > mozilla-b2g:master

One another raf trick from Chris.

Comment 17

[Chris Lord [:cwiiis]]

Heh :) I'm not keen on these nested rafs, though they do the job - I think in v3, we should move towards using css animations for these kinds of things instead of transitions...

Comment 18

[GitHub Autolander Bot]

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

Comment 19

[Chris Lord [:cwiiis]]

Comment on attachment 8596564 [details] [review]
[gaia] Cwiiis:bug1151081-buggy-value-selector-transition > mozilla-b2g:master

[Approval Request Comment]
[Bug caused by] (feature/regressing bug #):
[User impact] if declined: Really awful/buggy-looking transition whenever you open a scrollable value-selector in the Settings app.
[Testing completed]: Manual testing completed
[Risk to taking this patch] (and alternatives if risky): Low risk
[String changes made]: None

Comment 20

[Ryan VanderMeulen [:RyanVM]]

v2.2: https://github.com/mozilla-b2g/gaia/commit/7c2719a145eabcf6f81c1c5ff85f805fcbd653ef

Comment 21

[Yeojin Chung [:YeojinC]]

This issue is verified fixed on Flame Master and 2.2.

Result: No visual issues are found while opening the dropdown menu any more.

Environmental Variables:
Device: Flame 3.0 (KK, 319mb, full flash)
Build ID: 20150501010203
Gaia: 759a1f935a6a81c32ad66e39a6353b334dfa4f91
Gecko: 7723b15ea695
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)
Build ID: 20150501002503
Gaia: 209bf4d6fcb16ea6834b8bd86976c012e5914fe6
Gecko: 79e7065ceefa
Gonk: a9f3f8fb8b0844724de32426b7bcc4e6dc4fa2ed
Version: 37.0 (2.2)
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:37.0) Gecko/37.0 Firefox/37.0