1229688 - Polish the way delays are represented in the animation-inspector panel

Status: RESOLVED WONTFIX

(DevTools :: Inspector: Animations, defect, P3)

Description

[Patrick Brosset <:pbro>]

Attachment: delay.png

This is about finding a nice way to represent animation-delays in the animation-inspector.
For reference, here's what delays are: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay

From bug 1228005 comment 10:

>>> Another question the current designs leave me with is what this
>>> partially-shaded part is: http://cl.ly/image/0z020X0k2V2W What does that
>>> mean for the animation?

>> That's how we've been representing animation delays. If you hover over an
>> animation, you should get a tooltip that contains data about the duration
>> and delay. Maybe we can find a better way to represent this (although that
>> would be done in another bug).

> Ohhhhh, all right. Yeah, might just need a state on hover just to explain
> what it is. Doing that in a separate bug makes sense to me unless it's
> super easy.

So, we do have a tooltip that appears already on hover of an animation (see attached screenshot).

Helen: what would you advise we do to make delays more self-explanatory?

Maybe we just need another visual way to display the delay area.

Comment 1

[Helen V. Holmes (:helenvholmes) (:✨)]

I think this is as simple as adding the same sort of :alt tag hover thing we use elsewhere in the devtools (like over debugger icons, what you're using on hover for the animations) with something like, "Animation delay". I wasn't thinking of adding anything complicated, just a label.

Comment 2

[Patrick Brosset <:pbro>]

Triaging (filter on CLIMBING SHOES).

Comment 3

[Patrick Brosset <:pbro>]

Let's mark this one as wontfix. Delays are now represented totally differently since bug 1210795.
(see https://hacks.mozilla.org/2016/11/visualize-animations-easing-in-devtools/)