Bug 1554809: Change the event which decides whether need to wait for …

…rendering detail pane, and wait for rendering detail pane at point needs. r=pbro

Differential Revision: https://phabricator.services.mozilla.com/D33774

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/animation/test/browser_animation_css-transition-with-playstate-idle.js

@@ -33,10 +33,11 @@ add_task(async function() {
 
   info("Toggle the visible class to start the animation");
   await toggleVisibleClass(tab);
+  info("Wait for all renderings");
+  await waitForRendering(animationInspector);
 
   info("Wait until the scrubber is displayed");
   await waitUntil(() => panel.querySelector(".current-time-scrubber"));
-
   const scrubberEl = panel.querySelector(".current-time-scrubber");
 
   info("Wait until animations are paused");
@@ -47,6 +48,8 @@ add_task(async function() {
 
   info("Toggle the visible class to start the animation");
   await toggleVisibleClass(tab);
+  info("Wait for all renderings");
+  await waitForRendering(animationInspector);
 
   info("scrubberX after: " + scrubberEl.getBoundingClientRect().x);
 
@@ -59,9 +62,6 @@ add_task(async function() {
   // Query the scrubber element again to check that the UI is still rendered.
   ok(!!panel.querySelector(".current-time-scrubber"),
     "The scrubber element is still rendered in the animation inspector panel");
-
-  info("Wait for the keyframes graph to be updated before ending the test.");
-  await waitForAnimationDetail(animationInspector);
 });
 
 /**

devtools/client/inspector/animation/test/head.js

@@ -402,9 +402,9 @@ const mouseOutOnTargetNode = function(animationInspector, panel, index) {
  */
 const selectAnimationInspector = async function(inspector) {
   await inspector.toolbox.selectTool("inspector");
-  const onUpdated = inspector.once("inspector-updated");
+  const onDispatched = waitForDispatch(inspector, "UPDATE_ANIMATIONS");
   inspector.sidebar.select("animationinspector");
-  await onUpdated;
+  await onDispatched;
   await waitForRendering(inspector.getPanel("animationinspector"));
 };
 
@@ -425,9 +425,8 @@ const selectAnimationInspector = async function(inspector) {
 const selectNodeAndWaitForAnimations = async function(data, inspector, reason = "test") {
   // We want to make sure the rest of the test waits for the animations to
   // be properly displayed (wait for all target DOM nodes to be previewed).
-  const onUpdated = inspector.once("inspector-updated");
-  await selectNode(data, inspector, reason);
-  await onUpdated;
+  selectNode(data, inspector, reason);
+  await waitForDispatch(inspector, "UPDATE_ANIMATIONS");
   await waitForRendering(inspector.getPanel("animationinspector"));
 };
 
@@ -588,7 +587,7 @@ function _afterDispatchDone(store, type) {
  * @return {Promise}
  * @static
  */
-async function waitForDispatch(inspector, type, repeat) {
+async function waitForDispatch(inspector, type, repeat = () => 1) {
   let count = 0;
 
   while (count < repeat()) {