CSS Animation Inspector is Glitchy -- Stack Traces included

RESOLVED WORKSFORME

Status

DevTools
Animation Inspector
RESOLVED WORKSFORME
3 years ago
5 days ago

People

(Reporter: Off By None, Unassigned)

Tracking

46 Branch

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

3 years ago
User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:46.0) Gecko/20100101 Firefox/46.0
Build ID: 20160110030214

Steps to reproduce:

Inspected an element with animations on it (I was in the responsive view of desktop Firefox looking at a hamburger menu button that animated as the menu opened/closed)

I looked in the browser console and saw these errors -- some of them were shown many times I tried to reduce it down to only the unique errors, they are likely out of the order they occurred in.

I hope my console dump makes up for my lack of repro steps.

TypeError: player is null

Stack trace:

exports.AnimationsActor<.setCurrentTimes</<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/actors/animation.js:755:11
exports.AnimationsActor<.setCurrentTimes<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/actors/animation.js:754:24
actorProto/</handler@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/protocol.js:1013:19
DSC_onPacket@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/main.js:1643:15
LocalDebuggerTransport.prototype.send/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/transport/transport.js:569:11
makeInfallible/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/DevToolsUtils.js:93:14
makeInfallible/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/DevToolsUtils.js:93:14
protocol.js:907

Protocol error (unknownError): TypeError: player is null animation-panel.js:223

-----------------------------------------------------------------------------

TypeError: player is null

Stack trace:

exports.AnimationsActor<.setPlaybackRates<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/actors/animation.js:774:7
actorProto/</handler@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/protocol.js:1013:19
DSC_onPacket@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/main.js:1643:15
LocalDebuggerTransport.prototype.send/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/transport/transport.js:569:11
makeInfallible/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/DevToolsUtils.js:93:14
makeInfallible/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/DevToolsUtils.js:93:14
protocol.js:907

Protocol error (unknownError): TypeError: player is null animation-panel.js:203

-----------------------------------------------------------------------------

TypeError: player is null

Stack trace:

exports.AnimationsActor<.toggleSeveral</<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/actors/animation.js:737:28
exports.AnimationsActor<.toggleSeveral<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/actors/animation.js:736:24
actorProto/</handler@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/protocol.js:1013:19
DSC_onPacket@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/main.js:1643:15
LocalDebuggerTransport.prototype.send/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/transport/transport.js:569:11
makeInfallible/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/DevToolsUtils.js:93:14
makeInfallible/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/DevToolsUtils.js:93:14
protocol.js:907

Protocol error (unknownError): TypeError: player is null animation-panel.js:183

-----------------------------------------------------------------------------

Error writing request: show protocol.js:1329

-----------------------------------------------------------------------------

TypeError: v is null

Stack trace:

types.addActorType/type<.write@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/protocol.js:298:7
Arg<.write@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/protocol.js:450:12
Request<.write/str<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/protocol.js:619:16
Request<.write@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/protocol.js:617:15
frontProto/</proto[name]@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/protocol.js:1327:18
TargetNodeHighlighter.highlight<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/client/animationinspector/utils.js:167:11
TaskImpl_run@resource://gre/modules/Task.jsm:315:40
TaskImpl@resource://gre/modules/Task.jsm:276:3
createAsyncFunction/asyncFunction@resource://gre/modules/Task.jsm:250:14
AnimationTargetNode.prototype.onHighlightNodeClick@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/client/animationinspector/components/animation-target-node.js:243:7
EventListener.handleEvent*AnimationTargetNode.prototype.startListeners@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/client/animationinspector/components/animation-target-node.js:171:5
AnimationTargetNode.prototype.init@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/client/animationinspector/components/animation-target-node.js:163:5
AnimationsTimeline.prototype.render@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/client/animationinspector/components/animation-timeline.js:311:7
AnimationsPanel.refreshAnimationsUI<@chrome://devtools/content/animationinspector/animation-panel.js:261:5
TaskImpl_run@resource://gre/modules/Task.jsm:315:40
TaskImpl@resource://gre/modules/Task.jsm:276:3
createAsyncFunction/asyncFunction@resource://gre/modules/Task.jsm:250:14
EventEmitter_emit@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/event-emitter.js:147:11
AnimationsController.onAnimationMutations<@chrome://devtools/content/animationinspector/animation-controller.js:342:5
TaskImpl_run@resource://gre/modules/Task.jsm:315:40
Handler.prototype.process@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:933:23
this.PromiseWalker.walkerLoop@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:812:7
Promise*this.PromiseWalker.scheduleWalkerLoop@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:743:11
this.PromiseWalker.schedulePromise@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:775:7
this.PromiseWalker.completePromise@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:710:7
Front<.onPacket/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/protocol.js:1236:9
DevTools RDP*Front<.request@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/protocol.js:1178:7
frontProto/</proto[name]@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/protocol.js:1338:14
frontProto/</proto[name]@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/protocol.js:1359:16
AnimationsController.onAnimationMutations<@chrome://devtools/content/animationinspector/animation-controller.js:335:15
TaskImpl_run@resource://gre/modules/Task.jsm:315:40
Handler.prototype.process@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:933:23
this.PromiseWalker.walkerLoop@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:812:7
Promise*this.PromiseWalker.scheduleWalkerLoop@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:743:11
this.PromiseWalker.schedulePromise@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:775:7
this.PromiseWalker.completePromise@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:710:7
Front<.onPacket/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/protocol.js:1236:9
DevTools RDP*Front<.request@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/protocol.js:1178:7
frontProto/</proto[name]@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/protocol.js:1338:14
frontProto/</proto[name]@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/protocol.js:1359:16
AnimationsController.onAnimationMutations<@chrome://devtools/content/animationinspector/animation-controller.js:335:15
TaskImpl_run@resource://gre/modules/Task.jsm:315:40
Handler.prototype.process@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:933:23
this.PromiseWalker.walkerLoop@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:812:7
Promise*this.PromiseWalker.scheduleWalkerLoop@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:743:11
this.PromiseWalker.schedulePromise@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:775:7
this.PromiseWalker.completePromise@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:710:7
Front<.onPacket/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/protocol.js:1236:9
DevTools RDP*Front<.request@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/protocol.js:1178:7
frontProto/</proto[name]@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/protocol.js:1338:14
animation-target-node.js:245

-----------------------------------------------------------------------------

TypeError: player is null

Stack trace:

exports.AnimationsActor<.toggleSeveral</<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/actors/animation.js:737:28
exports.AnimationsActor<.toggleSeveral<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/actors/animation.js:736:24
actorProto/</handler@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/protocol.js:1013:19
DSC_onPacket@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/main.js:1643:15
LocalDebuggerTransport.prototype.send/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/transport/transport.js:569:11
makeInfallible/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/DevToolsUtils.js:93:14
makeInfallible/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/DevToolsUtils.js:93:14
protocol.js:907

Protocol error (unknownError): TypeError: player is null animation-panel.js:183

-----------------------------------------------------------------------------

TypeError: player is null

Stack trace:

exports.AnimationsActor<.setPlaybackRates<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/actors/animation.js:774:7
actorProto/</handler@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/protocol.js:1013:19
DSC_onPacket@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/main.js:1643:15
LocalDebuggerTransport.prototype.send/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/transport/transport.js:569:11
makeInfallible/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/DevToolsUtils.js:93:14
makeInfallible/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/DevToolsUtils.js:93:14
protocol.js:907

Protocol error (unknownError): TypeError: player is null animation-panel.js:203







Actual results:

Firefox struggled to show anything in the animation inspector, then once they were shown I was unable to play them back.


Expected results:

It should have shown the various css animations applied to that element and should have allowed me to replay the animations.
(Reporter)

Updated

3 years ago
Summary: css animation player doesnt work → CSS Animation Inspector is Glitchy -- Stack Traces included

Updated

3 years ago
Component: Untriaged → Developer Tools: CSS Rules Inspector
Component: Developer Tools: CSS Rules Inspector → Developer Tools: Animation Inspector
:pbro, maybe recent cleanups have resolved this?

Off by None, does this still happen for you?
Flags: needinfo?(pbrosset)
Flags: needinfo?(offbynone)
(Reporter)

Comment 2

2 years ago
I have only ever had this happen once.  It was super weird so I grabbed the stack traces and figured I would submit a bug.  I don't use the animation inspector very much, but I haven't seen it recently.
Flags: needinfo?(offbynone)
(In reply to J. Ryan Stinnett [:jryans] (use ni?) from comment #1)
> :pbro, maybe recent cleanups have resolved this?
Hard to know without a URL or steps to reproduce, especially if this happened to the reporter just once.
I think I've occasionally seen the "player is null" errors in the past, but never had the problems described at the end of comment 0.

These errors suggest that instances of AnimationPlayerActors have been released before the UI tried to set their currentTimes or playbackRates.
This means that, somehow, actors got released with their corresponding fronts and UI (in the timeline) still being present.

The changes being made in bug 1247243 modify the lifetime management of these actors, and I'm fairly certain these errors won't happen again after that.

Closing as WFM for now. Let's re-open or file a new one if/when we see these errors again and have steps to reproduce.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 2 years ago
Flags: needinfo?(pbrosset)
Resolution: --- → WORKSFORME

Updated

5 days ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.