Bug 1450526 - Part 1: Make pseudo element to be available in new animatoin inspector. r?pbro
MozReview-Commit-ID: WqKCFqCUPZ
--- a/devtools/client/inspector/animation/animation.js
+++ b/devtools/client/inspector/animation/animation.js
@@ -95,16 +95,17 @@ class AnimationInspector {
toggleElementPicker,
} = this;
const target = this.inspector.target;
this.animationsFront = new AnimationsFront(target.client, target.form);
this.animationsCurrentTimeListeners = [];
this.isCurrentTimeSet = false;
+ this.currentWalker = null;
const provider = createElement(Provider,
{
id: "newanimationinspector",
key: "newanimationinspector",
store: this.inspector.store
},
App(
@@ -163,16 +164,17 @@ class AnimationInspector {
if (this.simulatedAnimationForKeyframesProgressBar) {
this.simulatedAnimationForKeyframesProgressBar.cancel();
this.simulatedAnimationForKeyframesProgressBar = null;
}
this.stopAnimationsCurrentTimeTimer();
+ this.currentWalker = null;
this.inspector = null;
this.win = null;
}
get state() {
return this.inspector.store.getState().animations;
}
@@ -525,16 +527,21 @@ class AnimationInspector {
toggleElementPicker() {
this.inspector.toolbox.highlighterUtils.togglePicker();
}
async update() {
const done = this.inspector.updating("newanimationinspector");
+ if (this.currentWalker !== this.inspector.walker) {
+ await this.animationsFront.setWalkerActor(this.inspector.walker);
+ this.currentWalker = this.inspector.walker;
+ }
+
const selection = this.inspector.selection;
const nextAnimations =
selection.isConnected() && selection.isElementNode()
? await this.animationsFront.getAnimationPlayersForNode(selection.nodeFront)
: [];
const currentAnimations = this.state.animations;
if (!currentAnimations || !isAllAnimationEqual(currentAnimations, nextAnimations)) {
--- a/devtools/client/inspector/animation/test/head.js
+++ b/devtools/client/inspector/animation/test/head.js
@@ -462,16 +462,24 @@ const waitForAnimationDetail = async fun
/**
* Wait for all AnimationTarget components to be fully loaded
* (fetched their related actor and rendered).
*
* @param {AnimationInspector} animationInspector
*/
const waitForAllAnimationTargets = async function(animationInspector) {
+ const panel =
+ animationInspector.inspector.panelWin.document.getElementById("animation-container");
+
+ if (panel.querySelectorAll(".animation-target .objectBox").length ===
+ animationInspector.state.animations.length) {
+ return Promise.resolve();
+ }
+
for (let i = 0; i < animationInspector.state.animations.length; i++) {
await animationInspector.once("animation-target-rendered");
}
};
/**
* Wait for all SummaryGraph components to be fully loaded
*
--- a/devtools/server/actors/inspector/css-logic.js
+++ b/devtools/server/actors/inspector/css-logic.js
@@ -672,16 +672,21 @@ CssLogic.getComputedStyle = function(nod
if (!node ||
Cu.isDeadWrapper(node) ||
node.nodeType !== nodeConstants.ELEMENT_NODE ||
!node.ownerGlobal) {
return null;
}
let {bindingElement, pseudo} = CssLogic.getBindingElementAndPseudo(node);
+
+ if (!bindingElement) {
+ return null;
+ }
+
return node.ownerGlobal.getComputedStyle(bindingElement, pseudo);
};
/**
* Get a source for a stylesheet, taking into account embedded stylesheets
* for which we need to use document.defaultView.location.href rather than
* sheet.href
*