Feature Request: Show eligible elements

[TimChinye]

When no element is selected / when the element that's selected doesn't have animation-timeline, then it shows the following error message:

I believe it'd be more useful to users if instead of stating the issue, it helps you solve the issue (ideally both). To accomplish this, you could replace that view with something similar to this - the 'Layout' tab:

A list containing all the elements with the animation-timeline property. So, you'd click on the shortcut links, and it'd select the element, and then of course, now you've selected a valid element for the Chrome Extension to get to work, so the error is fixed.

- It doesn't have to be a list, it could be for instance a grid with a "preview image" of the element's containing box.
- You could make it such that when you hover the shortcut, it highlights the elements on the website (which is what the 'Layout' tab already does).
- You could make this view accessible while using the tool on a select element, so you can easily switch to another.
- You could show the full path to the element, instead of what the 'Layout' tab does.

[bramus]

There are some limitations to what DevTools extensions can do so some things – such as selecting a new node in the element tree – are not possible. There also would need to be some extra polling to re-query the available animations at a certain interval to make sure the list is up-to-date. Think of scroll-driven animations that get attached based on a style or media query.

But all-in-all a great suggestion.

[ADTC]

I would actually suggest an option to show showing ALL elements with animation-timeline on the inspector so you can see each one animating respectively as you scroll down.

This is way more useful to detect bugs and problems of two or more animations relative to each other. Although yes, a dropdown to pick one of the eligible elements could also be great to have (instead of the Animation dropdown which I didn't think is that useful).

The dropdown could have an All elements option which could be the default.