1206913 - The side menu transition is not smooth in Notes

Status: RESOLVED WONTFIX

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

Description

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

The user will notice that when transitioning from one option to another in the side menu that the transition is not smooth. 

Repro Steps:
1) Update a Aries to 20150921152621
2) Open Notes. 
3) Tap on the "drawer" icon in the top left corner of the screen to open the side menu.
4) Tap on any of the available options.
5) Tap on the "drawer" icon again and select another option. 
6) Repeat steps 3-6 and observe the transitions.

Actual:
When transitioning to different options in the side menu the transitions are not smooth.

Expected:
The transitions from the side menu to the different options are smooth.

Environmental Variables:
Device: Aries 2.5
Build ID: 20150921152621
Gaia: 2d370fa35c1a0ee2a637e3772c0843586a5f96c9
Gecko: 039a8490891595736b16a3ccb17f025f4dcf13eb
Gonk: 2916e2368074b5383c80bf5a0fba3fc83ba310bd
Version: 44.0a1 (2.5)
Firmware Version: D5803_23.1.A.1.28_NCB.ftf
User Agent: Mozilla/5.0 (Mobile; rv:44.0) Gecko/44.0 Firefox/44.0

Repro frequency: 5/5 100%
See attached: video clip, logcat

Comment 1

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

This also occurs on the Flame 2.5 

The transitions from the side menu to the different options are not smooth.r

Device: Flame 2.5 (Full Flash)(KK)(319mb)
BuildID: 20150921073455
Gaia: 2d370fa35c1a0ee2a637e3772c0843586a5f96c9
Gecko: 039a8490891595736b16a3ccb17f025f4dcf13eb
Gonk: c4779d6da0f85894b1f78f0351b43f2949e8decd
Version: 44.0a1 (2.5) 
Firmware Version: v18D
User Agent: Mozilla/5.0 (Mobile; rv:44.0) Gecko/44.0 Firefox/44.0

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

This does not occur on Flame 2.2

The transitions are smooth when going from the side menu to the different options.

Device: Flame 2.2 (Full Flash)(KK)(319mb)
Build ID: 20150921063024
Gaia: 5dd95cfb9f1d6501ce0e34414596ef3dd9c2f583
Gecko: e27bb4f9a353
Gonk: bd9cb3af2a0354577a6903917bc826489050b40d
Version: 37.0 (2.2)
Firmware Version: v18D
User Agent: Mozilla/5.0 (Mobile; rv:37.0) Gecko/37.0 Firefox/37.0

Comment 2

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

Attachment: NotesTransitionsLogs

Comment 3

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

Please see this video:  https://youtu.be/8xT9rPw7F_Q

Minor issue, not requesting blocking status.  Let's get a window anyway though.

Comment 4

[John Thomas [:Johnt]]

Mozilla Inbound Regression Window

Last Working
Environmental Variables:
Device: Flame 2.2
BuildID: 20150104211243
Gaia: c2bf20d23851d5fda9f8f0ef0267db5f49152376
Gecko: b9f40d0310d5
Version: 37.0a1 (2.2)
Firmware Version: v18D
User Agent: Mozilla/5.0 (Mobile; rv:37.0) Gecko/37.0 Firefox/37.0

First Broken
Environmental Variables:
Device: Flame 2.2
BuildID: 20150105033543
Gaia: 4ceeff19086b2a2955f044ad923dcfa63a293de3
Gecko: b9ba4d717f8a
Version: 37.0a1 (2.2) 
Firmware Version: v18D
User Agent: Mozilla/5.0 (Mobile; rv:37.0) Gecko/37.0 Firefox/37.0

Last Working gaia / First Broken gecko - This issue DOES occur with broken Gecko
Gaia: c2bf20d23851d5fda9f8f0ef0267db5f49152376
Gecko: b9ba4d717f8a

Last Working gecko / First Broken gaia - This issue does NOT occur with broken Gaia
Gecko: b9f40d0310d5
Gaia: 4ceeff19086b2a2955f044ad923dcfa63a293de3

Mozilla Inbound Pushlog: 
http://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=b9f40d0310d5&tochange=b9ba4d717f8a

This issue is caused by Bug 927349

Comment 5

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

Brian this issue seems to have been caused by the changes for bug 927349.  Can you please take a look?

Comment 6

[Brian Birtles (:birtles, Feb 26~ parental leave)]

It appears that what happens is that for the case of selecting a notebook we don't actually transition the next card into place. Rather it appears in-place immediately and we simply transition the left notebook pane. (I think the transition on the z-index of the left notebook pane's z-index explains why you only get half of the animation.)

If you slow down the transitions, you should see this happen, but only when you change notebooks.

The reason appears to be that we call startLoading here:

  https://github.com/mozilla-b2g/notes/blob/master/js/common.js#L1377

which temporarily makes the card display:none:

  https://github.com/mozilla-b2g/notes/blob/master/style/common.css#L851

We revert that later when we call finishedLoading, so it's only temporary.

Later, we update the z-index and transform and expect a transition to fire:

  https://github.com/mozilla-b2g/notes/blob/master/js/Cards.js#L63

However, I believe what will happen is we will process the change to display, z-index, and transform simultaneously and won't trigger a transition.

Indeed, if you step through this in a debugger you won't see the bug because we'll do paints along the way.

My guess is that before bug 927349 you simply wouldn't see enough of the transition to notice.

I *think* you should be able to fix this by forcing a style flush in finishNotesLoading (e.g. getComputedStyle(document.body).display). Also, simply removing https://github.com/mozilla-b2g/notes/blob/master/style/common.css#L851 works for me, but I'm guessing it's there for a reason.

Also, for future Gaia-related bugs, please provide pointers to the related source code if possible.

Comment 7

[BMO Automation]

Firefox OS is not being worked on