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)

enhancement

Tracking

(Not tracked)

People

(Reporter: arni2033, Unassigned)

References

(Blocks 1 open bug, )

Details

(Keywords: dupeme)

Attachments

(1 file)

Attached image 2015.10.22 18-25-34.png (deleted) —
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
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)
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)
Status: UNCONFIRMED → NEW
Ever confirmed: true
Component: Developer Tools: Inspector → Developer Tools: Animation Inspector
Severity: normal → enhancement
Blocks: 1280937
Inspector bug triage (filter on CLIMBING SHOES).
Priority: -- → P2
Product: Firefox → DevTools
Keywords: dupeme
Whiteboard: [dupeme]
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: