Performance inprovements for chat drawer

[dimaursu]

I switched the animation from a jQuery based one, to a pure CSS implementation.
The state of the drawer(open-closed) is kept in a checkbox.

The new animation uses transform: translate3D() - this moves the drawer in a separate render layer, and the performance improvements are at least 3x, in Firefox benchmarks. On my Thinkpad X201, in the jQuery implementation the FPS would drop to about 5, now it's at about 15 FPS, and the animation is much smoother (it's visible with the naked eye).

Some visual tradeoffs were made - I got rid of the box-shadow, and the drawer doesn't push the content (which triggers layout recalculations and repaints).

For now I didn't use any vendor-specific prefixes, those will be added later, maybe through AutoPrefixer (https://github.com/postcss/autoprefixer)

[Flaburgan]

Thank you for this improvement! If you want to check the performance of the mobile version, I think the drawer animation can also be improved (see https://github.com/diaspora/diaspora/blob/develop/app/assets/stylesheets/mobile/header.css.scss#L172) even if I use a CSS translate here too, the animation is not really smooth.

[dimaursu]

Attaching the mobile browser through a remote debugger would help diagnose the problem.
Also, why use the star (*) selector? It's slow, even though I don't think that's the problem here. Translating just the container would do just fine, and would promote the entire container in it's own layer. Right now I guess all elements get their own layer, which is a waste of memory (~2MB / layer).
Box-shadows are also a performance killer on mobile phones, and using "opacity" outperforms a transparent background - it's also performed on the GPU.

I will test the mobile version today - if I will come up with good results, I will do a pull-request :)

[Flaburgan]

@dimaursu you can also open issues about it, I'd like to learn how to improve CSS performance :)

[zauberstuhl]

@dimaursu thank you very much for your contribution. Could you do me a favor and remove the changes made in doc and build directory? You probably executed grunt. I decided to do that before we release something. Otherwise we would have on every PR huge changes which are unnecessary.

Cheers, Lukas

[dimaursu]

@zauberstuhl done :) Btw, that should be written in the README, the stuff about doc and build directories ;)

[svbergerem]

With this PR the classes chat-roster-shown and chat-roster-hidden are no longer added to body > .container (I implemented that in #42) Because of that some parts of the diaspora* page are again hidden by the roster.