Bug 1488379 - guard for errors; r=daisuke

Depends on D7986

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

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

devtools/client/inspector/animation/animation.js

@@ -325,7 +325,12 @@ class AnimationInspector {
     // sice the scrubber position is related the currentTime.
     // Also, don't update the state of removed animations since React components
     // may refer to the same instance still.
-    animations = await this.updateAnimations(animations);
+    try {
+      animations = await this.updateAnimations(animations);
+    } catch (_) {
+      console.error(`Updating Animations failed`);
+      return;
+    }
 
     this.updateState(animations.concat(addedAnimations));
   }

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

@@ -10,9 +10,11 @@ add_task(async function() {
   const { inspector } = await openAnimationInspector();
 
   info("Check state of the animation inspector after fast mutations");
+  const animationsFinished = waitForAnimations(inspector);
   await startFastMutations(tab);
   ok(inspector.panelWin.document.getElementById("animation-container"),
     "Animation inspector should be live");
+  await animationsFinished;
 });
 
 async function startFastMutations(tab) {
@@ -20,3 +22,11 @@ async function startFastMutations(tab) {
     await content.wrappedJSObject.startFastMutations();
   });
 }
+
+function waitForAnimations(inspector) {
+  // wait at least once
+  let count = 1;
+  // queue any further waits
+  inspector.animationinspector.animationsFront.on("mutations", () => count++);
+  return waitForDispatch(inspector, "UPDATE_ANIMATIONS", () => count);
+}

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

@@ -554,6 +554,51 @@ const waitForRendering = async function(animationInspector) {
   ]);
 };
 
+// Wait until an action of `type` is dispatched. If it's part of an
+// async operation, wait until the `status` field is "done" or "error"
+function _afterDispatchDone(store, type) {
+  return new Promise(resolve => {
+    store.dispatch({
+      // Normally we would use `services.WAIT_UNTIL`, but use the
+      // internal name here so tests aren't forced to always pass it
+      // in
+      type: "@@service/waitUntil",
+      predicate: action => {
+        if (action.type === type) {
+          return true;
+        }
+        return false;
+      },
+      run: (dispatch, getState, action) => {
+        resolve(action);
+      }
+    });
+  });
+}
+
+/**
+ * Wait for a specific action type to be dispatch.
+ * If an async action, will wait for it to be done.
+ * This is a custom waitForDispatch, and rather than having a number to wait on
+ * the function has a callback, that returns a number. This allows us to wait for
+ * an unknown number of dispatches.
+ *
+ * @memberof mochitest/waits
+ * @param {Object} inspector
+ * @param {String} type
+ * @param {Function} repeat
+ * @return {Promise}
+ * @static
+ */
+async function waitForDispatch(inspector, type, repeat) {
+  let count = 0;
+
+  while (count < repeat()) {
+    await _afterDispatchDone(inspector.store, type);
+    count++;
+  }
+}
+
 /**
  * Wait for rendering of animation keyframes.
  *