Open
Bug 1221546
Opened 9 years ago
Updated 2 years ago
Animations aren't easily visible in the timeline if they're short (need pan/zoom)
Categories
(DevTools :: Inspector: Animations, enhancement, P2)
DevTools
Inspector: Animations
Tracking
(Not tracked)
NEW
People
(Reporter: arni2033, Unassigned)
References
(Blocks 1 open bug, )
Details
(Keywords: dupeme)
Attachments
(1 file)
|
19.25 KB,
image/png
|
Details |
2015.10.22 18-25-34.png
STR: (Win7_64, Nightly 45, 32bit, ID 20151102030241, new profile)
1. Open url
> https://www.mozilla.org/en-US/firefox/nightly/firstrun/
2. Open devtools -> Inspector, open "Animations" tab in sidebar
3. Hover over the "Start testing" button on the page, then move mouse back to devtools.
4. Wait 10 seconds
5. Hover over the "Start localizing" button on the page, then move mouse back to devtools.
Result:
Transition "blocks" in timeline are very thin, so I can't see the property name.
The same applies to animations names
Expectations:
Animations names and transition properties should be fully visible because there's enough space
* In Step 2 you should select <body> element:
> 2. Open devtools -> Inspector, _click <body> to select it_, open "Animations" tab in sidebar
|
||
Comment 2•9 years ago
|
||
I'd like to mark this as a duplicate of bug 1210363, do you agree?
The idea is that the tool shows animations and transitions as timelines in a common graph, and therefore, their widths need to reflect their durations at the current time scale, so we can't really make them bigger. What I think we should do (and that's bug 1210363) is find heuristics to empty the panel. For instance if we're adding a new animation and the last added one was a "long" time ago, then we should first empty the graph. Or if the animation we're adding isn't "related" to the previous ones, we should empty the graph.
Fwiw, chrome devtools does this and I think it helps. This panel was developed specifically for UI state transitions, things that happen quickly when you move from one state of the UI to another (for instance when you hover the "start testing" button on that page). Once a new UI transition starts, the panel should be emptied first.
The other solution is to implement pan/zoom in the graph, like in the performance tool.
Flags: needinfo?(arni2033)
You can mark it as a dupe, but I still can reproce it if in Step 4 I wait 3s (3.5s total) [1]. Also, I have a testcase [2] of infinite 8s spinner animation and a transition of another element.
I believe animation inspector was designed to only display last animation for each element. If that's correct, then there'll always be enough place to display animation name / transition property.
Bug 1210363 doesn't guarantee that all properties will be visible even with normal sidebar width
> screenshot [1] https://dl.dropboxusercontent.com/s/gcugty7da121pgo/screenshot%20%5B1%5D%20-%20%28bug%201221546%29%20text%20labels%20aren%27t%20fully%20visible.png?dl=0
> screenshot [2] https://dl.dropboxusercontent.com/s/9t7e1pqr2w8a1f9/screenshot%20%5B2%5D%20-%20%28bug%201221546%29%20text%20labels%20aren%27t%20fully%20visible.png?dl=0
Flags: needinfo?(arni2033)
|
|
||
Comment 4•9 years ago
|
||
You're right, I think bug 1210363 is necessary, but it's not all that's needed for this bug. I mentioned pan/zoom in comment 2 and I've since then worked a little bit on this. We definitely need it for cases like this.
Note that the animation and property names not being fully visible isn't the only problem, the lightning bolt or delay area can also suffer from this, as well as the iteration count sections.
In the near future (with bug 1228005), we'll also display keyframes, and they will also be unusable in cases like this.
My idea for this is pretty standard if you know other animation tooling:
- a slider to zoom in and out
- a scrollbar to pan through the graph in case it is zoomed in
At the minimum zoom level, all animations should be fully visible in the viewport and the scrollbar disabled.
As soon as you start zooming in, then the scrollbar allows to move sideways to reveal animations out of the viewport.
Summary: Property names aren't visible in animation inspector if the timeline is long enough (in seconds) → Animations aren't easily visible in the timeline if they're short (need pan/zoom)
|
|
||
Updated•9 years ago
|
Status: UNCONFIRMED → NEW
Ever confirmed: true
|
|
||
Updated•9 years ago
|
Component: Developer Tools: Inspector → Developer Tools: Animation Inspector
|
|
||
Updated•9 years ago
|
Severity: normal → enhancement
|
||
Updated•6 years ago
|
Product: Firefox → DevTools
|
|
||
Updated•2 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•