Bug 1450526 - Part 1: Make pseudo element to be available in new animatoin inspector. r?pbro draft
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Wed, 04 Apr 2018 01:07:47 +0900
changeset 776709 2f8deb59c0430dd3f16ee32693519009d098b0c3
parent 776544 57b242c243caa484362480748eba82f4716a6def
child 776710 a83e8f932ff1fdc383bc61cfac525a54fe28a9d6
push id104964
push userbmo:dakatsuka@mozilla.com
push dateTue, 03 Apr 2018 16:22:15 +0000
reviewerspbro
bugs1450526
milestone61.0a1
Bug 1450526 - Part 1: Make pseudo element to be available in new animatoin inspector. r?pbro MozReview-Commit-ID: WqKCFqCUPZ
devtools/client/inspector/animation/animation.js
devtools/client/inspector/animation/test/head.js
devtools/server/actors/inspector/css-logic.js
--- 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
  *