1716209 - Animate the opening/closing of the Address lists

Status: RESOLVED FIXED

(Thunderbird :: Theme, task)

Description

[Richard Marti (:Paenglab)]

We can make the opening/closing of the address lists on the left more modern with animating them.

Comment 1

[Richard Marti (:Paenglab)]

Attachment: 1716209-animate-address-list.patch

What do you think about this?

I'm doing the twisty animation in another bug which ports the M-C icon de-duplication (bug 1699586). Both will have the same animation time.

Comment 2

[Alessandro Castellani [:aleca]]

Comment on attachment 9226696 [details] [diff] [review]
1716209-animate-address-list.patch

Review of attachment 9226696 [details] [diff] [review]:
-----------------------------------------------------------------

I like the goal and I think we should definitely do it, but unfortunately this is not the correct approach.
It's not recommended to animate fixed properties like `width` or `height` as animating those causes multiple reflow calls and consequential repaints and this can be very CPU heavy.

The approach for this would be to animate the `transform` properties, which use the GPU for processing, and have a mix of JS + CSS to handle everything.
Kinda like we did in the OpenPGP key wizard.

Comment 3

[Richard Marti (:Paenglab)]

The twisty animation should also be done here as there are scaling issues on aleca's PC.

Comment 4

[Alessandro Castellani [:aleca]]

I can try to find some time to work on this later this week.

Comment 5

[Richard Marti (:Paenglab)]

Attachment: Bug 1716209 - [New Address Book] Animate the Address book twisty. r=aleca

Comment 6

[Alessandro Castellani [:aleca]]

Setting this to be left open so we can land an initial improvement from Richard.
Pinging darktrojan to let him know we're slightly changing the markup of the twisty.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/c1227ffbc658
[New Address Book] Animate the Address book twisty. r=aleca

Comment 8

[Geoff Lankow (:darktrojan)]

Ooh, fancy!

Comment 9

[Alessandro Castellani [:aleca]]

Attachment: Bug 1716209 - Animate the revealing and collapsing of the addressbook tree listbox. r=darktrojan,ui-r=Paenglab

Comment 10

[Alessandro Castellani [:aleca]]

Patch created to animate the show/hide of the child container.
I ended up needing to use the height attribute to animate, as it wasn't possible to use GPU based animation.

This shouldn't be too bad as I'm removing the fixed height once the animation is completed, so we don't stumble upon issues where the container doesn't properly resize if more content is added, or the font size is changed.

For now, this animation is relegated to the addressbook CSS, but since the JS is generic for every tree listbox, we could maybe expand this solution to be CSS agnostic and work everywhere.

Comment 11

[Alessandro Castellani [:aleca]]

This is a purely visual improvement, but it might impact the CPU usage for long lists, so better not uplifting it to 91 and test it properly.

Comment 12

[Alessandro Castellani [:aleca]]

Attachment: Bug 1716209 - Animate the revealing and collapsing of the addressbook tree listbox. r=darktrojan,ui-r=Paenglab

Comment 13

[Geoff Lankow (:darktrojan)]

Let's not check this in, it breaks a test: mail/components/addrbook/test/browser/new/browser_directory_tree.js. You'll need to change this bit, in the first case check the height is 0, in the second check it isn't 0. There's no cases where open is false, so you could simplify a bit.

Comment 14

[Alessandro Castellani [:aleca]]

Try run: https://treeherder.mozilla.org/jobs?repo=try-comm-central&revision=675202e268e92bb0a259aad32d505629334c5195

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/0a89ac0edc9a
Animate the revealing and collapsing of the addressbook tree listbox. r=darktrojan,ui-r=Paenglab