mozilla-b2g/gaia — pull request #6337 by jrburke (2012-11-09 23:12:23+00:00)
Title: Bug 799682 - [email] Card implementation needs to be redone to support acceleration...

Bug link: https://bugzilla.mozilla.org/show_bug.cgi?id=799682

Instead of using a wide horizontal div that holds div "cards" with navigation done by adjusting that horizontal div's scroll location, switch to a model where there is space only for two divs, and their "left" coordinate for each card is adjusted, with a CSS transition used to animate the change in "left" values.

Since the two animating card divs are the size of the screen, it should fit better into the heuristics used to allow faster rendering/scroll animation.

With this change, the card divs are no longer manually sized via a resize handler, but just CSS with percentages are used, so it may also help with https://bugzilla.mozilla.org/show_bug.cgi?id=798695, although I have not tried since I do not have a device available/set up.

Notes on this pull request:

* Not tested on an actual phone. I just used Firefox desktop with a Gaia profile. Although I turned on repaint display, and it seemed to not have a bunch of stripes for the animation.
* It currently has the #cardContainer and #cards divs, although now, just one of those outer divs is enough. I can look at removing one if this approach seems good in general.
* I considered removing hidden card divs when they were scrolled off to the right, and just holding on to the DOM nodes in the Cards JS object, to help reduce the in-document DOM size. I am not sure that would help though, so I opted to keep it simple. However, that capability could be added if there was more data that it might help. The stack of cards may not get deep enough though for it to matter.
* I was using the "test data" path, so I am not sure I exercised enough of the UI paths. Suggestions on tricky ones to try are welcome.