New trackers animation

[marcosholgado]

Task/Issue URL: https://app.asana.com/0/1125189844152671/1175120780820332
Tech Design URL:
CC:

Description:
This PR changes the trackers animation and fixes the privacy grade logos so they have the correct size. The new animation now has the privacy grade pulsating in a loading state and then the trackers logos slide in from the left, they get crossed and finally slide back in to the left. Once the animation finishes we show the privacy grade.

Steps to test this PR:
More than 3 trackers

1. Open cnn.com
2. There should be a fourth logo that looks stacked behind the last logo to the right.

Less than 3 trackers

1. Go to marcosholgado.com
2. Only one logo should be shown (Google).

3 trackers

1. Go to dictionary.com
2. Three logos should be shown without the "more trackers" logo.

Unknown logo

1. Go to dictionary.com
2. The third logo shown should be a P letter for PubMatic.

Cancelling the animation

1. Interacting with the search bar at any point while the animation is running should cancel the animation.

Cancelling the animation 2

1. Go to cnn.com
2. Click on the search bar while the pulse animation is happening but before the website is loaded.
3. Wait until the website loads.
4. Change the focus back to the site, for example, by dismissing the keyboard.
5. Notice how the privacy grade shows as expected (B).

Privacy grade hides when the animation begins

1. Once the animation begins the privacy grade should be converted into a black circle.

Privacy grade shows after the animation finishes or when is cancelled

1. Once the animation finishes the privacy grade should be shown as usual (A, B, C, etc).
2. Cancelling the animation at any point (by interacting with the search bar) should eventually show the correct privacy grade (A, B, C, etc)

---

Internal references:

Software Engineering Expectations
Technical Design Template

[cmonfortep]

Still reviewing but I noticed somethin while testing (API 26):

1. Visit any website cnn.com
2. Tracker animation appears
3. Go to privacy dashboard
4. Disable privacy protection
5. Go back to browser
6. Animations will not run (👍 ) but privacy grade stays in the "pulsating state" (?)

[marcosholgado]

@cmonfortep good catch with that bug! It should be now fixed :)

[cmonfortep]

I'm astonished by this cool animation and all the UI work you did. I'm leaving some comments more related to how to represent the ViewState and the logic inside the fragment.

Happy to take it offline on Monday and jump into a zoom call 👍

[cmonfortep]

This is looking great, I only have two comments for me to understand better some of the logic.

[cmonfortep]

🚀 LGTM, tested on usual apis (21, 23, 26, 29) and it's working as expected 🎉