New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 715047 link

Starred by 1 user

Issue metadata

Status: Archived
Owner:
Last visit 29 days ago
Closed: Dec 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux
Pri: 2
Type: Bug


Participants' hotlists:
Hotlist-1


Sign in to add a comment

Make it easier to inspect custom keyframe-animations

Reported by tonyspe...@gmail.com, Apr 25 2017

Issue description

UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.81 Safari/537.36

Steps to reproduce the problem:
1. Open Dev-Tools and select an element which has the property 'animation-name' set - e. g.: animation-name: movelok;

What is the expected behavior?
Click on a element which has 'animation-name' set. In the example mentioned above movelok. The expected behavior would be to click on this name and 'jump' to its definition .

What went wrong?
There is no easy way using Dev-Tools to tell where a custom keyframe animation (animation-name) was defined.

Did this work before? No 

Chrome version: 58.0.3029.81  Channel: stable
OS Version: 
Flash Version:
 
chrome-dev-tools--css-animation.png
33.1 KB View Download
Labels: Needs-Triage-M58
Labels: Needs-Bisect
 tonyspegel@ Could you please provide us any sample URL which has the property animation-name: movelok to triage the issue from test team end.

Thanks,
Labels: Needs-Feedback
Here you go:
https://codepen.io/TonySpegel/full/wdoRvQ/

although the value set for 'animation-name' doesn't really matter and the codepen is rather small -> the issue in larger CSS files is that one can't tell in an easy way how 'movelok' was defined. A 'link' to the keyframe would be nice.
Project Member

Comment 5 by sheriffbot@chromium.org, Apr 26 2017

Cc: kavvaru@chromium.org
Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "kavvaru@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Cc: pfeldman@chromium.org
Labels: -Needs-Bisect Needs-Feedback
Tested the issue on windows 7 using chrome version 58.0.3029.81 with the below steps

1. Opened URL https://codepen.io/TonySpegel/full/wdoRvQ/
2.Inspect the Animation image
3.Clicked on animation - name in styles section
4. Clicked on link associated with the movelok
5.Redirected to corresponding file.

Could you please find the attached screen cast and confirm if anything missed here.

Thanks,
715047.mp4
1.1 MB View Download
The issue is that you can't tell where 'movelok' was defined (imagine a way bigger css file than in this codepen) or how 'movelok' works, in your Screencast it links to .box, what I've meant is that their should be a link to 
line 15 which would be:
@keyframes movelok {
  from { background-color: red; }
  to   { background-color: yellow; }

In this case it's pretty easy to spot because the CSS is short.
Project Member

Comment 8 by sheriffbot@chromium.org, Apr 27 2017

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "kavvaru@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Owner: lushnikov@chromium.org
Status: Assigned (was: Unconfirmed)
Status: Archived (was: Assigned)
We don't have plans to work on this in the upcoming year. If you think this feature is important and should be implemented, please re-file with justification.

Thanks.

Sign in to add a comment