bramus
commented
2 weeks ago 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.
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-timelineproperty. 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.