1246198 - Break long values like css-transforms down to individual components in the animation-inspector's timeline

Status: NEW

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

Description

[Patrick Brosset <:pbro>]

When you click on an animation in the timeline, it expands and let's you view its keyframes and animated properties.

With bug 1231457, animated values will be displayed too.

Displaying long values such as

transform: translateX(10px) scale(2) rotate(14deg) skew(13deg);

is going to be kind of hard, especially now that the panel is narrow.

Instead of displaying the value on one line, it could make sense to break it down to individual components when possible. So the above transform would appear as:

transform
 |
 +-- translateX 10px
 |
 +-- scale 2
 |
 +-- rotate 14deg
 |
 +-- skew 13deg

A similar thing could be done to other css properties (css filter for instance).

Comment 1

[Patrick Brosset <:pbro>]

Attachment: sketch.png

Helpful sketch from Helen Holmes and Val Head.

Comment 2

[Patrick Brosset <:pbro>]

Filter on CLIMBING SHOES