--- a/devtools/client/animationinspector/test/browser_animation_detail_displayed.js
+++ b/devtools/client/animationinspector/test/browser_animation_detail_displayed.js
@@ -72,14 +72,14 @@ add_task(async function() {
 
 /**
  * Click close button for animation-detail panel.
  *
  * @param {AnimationTimeline} AnimationTimeline component
  * @param {DOMNode} animation-detail element
  * @return {Promise} which wait for close the detail pane
  */
-function* clickCloseButtonForDetailPanel(timeline, element) {
+async function clickCloseButtonForDetailPanel(timeline, element) {
   const button = element.querySelector(".animation-detail-header button");
   const onclosed = timeline.once("animation-detail-closed");
   EventUtils.sendMouseEvent({type: "click"}, button, element.ownerDocument.defaultView);
-  return yield onclosed;
+  return await onclosed;
 }

--- a/devtools/client/animationinspector/test/browser_animation_keyframe_markers.js
+++ b/devtools/client/animationinspector/test/browser_animation_keyframe_markers.js
@@ -47,20 +47,20 @@ add_task(async function() {
       is(markers[i].dataset.offset, offsets[i],
          "Marker " + i + " for " + propertyName + " has the right offset");
       is(markers[i].dataset.value, values[i],
          "Marker " + i + " for " + propertyName + " has the right value");
     }
   }
 });
 
-function* getExpectedKeyframesData(animation) {
+async function getExpectedKeyframesData(animation) {
   // We're testing the UI state here, so it's fine to get the list of expected
   // properties from the animation actor.
-  let properties = yield animation.getProperties();
+  let properties = await animation.getProperties();
   let data = {};
 
   for (let expectedProperty of EXPECTED_PROPERTIES) {
     data[expectedProperty] = [];
     for (let {name, values} of properties) {
       if (name !== expectedProperty) {
         continue;
       }

--- a/devtools/client/animationinspector/test/browser_animation_refresh_on_added_animation.js
+++ b/devtools/client/animationinspector/test/browser_animation_refresh_on_added_animation.js
@@ -35,16 +35,16 @@ add_task(async function() {
     selector: ".ball.animated",
     attributeName: "class",
     attributeValue: "ball still"
   }, panel, inspector);
 
   assertAnimationsDisplayed(panel, 0);
 });
 
-function* changeElementAndWait(options, panel, inspector) {
+async function changeElementAndWait(options, panel, inspector) {
   let onPanelUpdated = panel.once(panel.UI_UPDATED_EVENT);
   let onInspectorUpdated = inspector.once("inspector-updated");
 
-  yield executeInContent("devtools:test:setAttribute", options);
+  await executeInContent("devtools:test:setAttribute", options);
 
-  yield promise.all([onInspectorUpdated, onPanelUpdated]);
+  await promise.all([onInspectorUpdated, onPanelUpdated]);
 }

--- a/devtools/client/animationinspector/test/browser_animation_refresh_when_active.js
+++ b/devtools/client/animationinspector/test/browser_animation_refresh_when_active.js
@@ -10,46 +10,46 @@ requestLongerTimeout(2);
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
 
   let {inspector, panel} = await openAnimationInspector();
   await testRefresh(inspector, panel);
 });
 
-function* testRefresh(inspector, panel) {
+async function testRefresh(inspector, panel) {
   info("Select a non animated node");
-  yield selectNodeAndWaitForAnimations(".still", inspector);
+  await selectNodeAndWaitForAnimations(".still", inspector);
 
   info("Switch to the rule-view panel");
   inspector.sidebar.select("ruleview");
 
   info("Select the animated node now");
-  yield selectNode(".animated", inspector);
+  await selectNode(".animated", inspector);
 
   assertAnimationsDisplayed(panel, 0,
     "The panel doesn't show the animation data while inactive");
 
   info("Switch to the animation panel");
   let onRendered = waitForAnimationTimelineRendering(panel);
   inspector.sidebar.select("animationinspector");
-  yield panel.once(panel.UI_UPDATED_EVENT);
-  yield onRendered;
+  await panel.once(panel.UI_UPDATED_EVENT);
+  await onRendered;
 
   assertAnimationsDisplayed(panel, 1,
     "The panel shows the animation data after selecting it");
 
   info("Switch again to the rule-view");
   inspector.sidebar.select("ruleview");
 
   info("Select the non animated node again");
-  yield selectNode(".still", inspector);
+  await selectNode(".still", inspector);
 
   assertAnimationsDisplayed(panel, 1,
     "The panel still shows the previous animation data since it is inactive");
 
   info("Switch to the animation panel again");
   inspector.sidebar.select("animationinspector");
-  yield panel.once(panel.UI_UPDATED_EVENT);
+  await panel.once(panel.UI_UPDATED_EVENT);
 
   assertAnimationsDisplayed(panel, 0,
     "The panel is now empty after refreshing");
 }

--- a/devtools/client/animationinspector/test/browser_animation_target_highlighter_lock.js
+++ b/devtools/client/animationinspector/test/browser_animation_target_highlighter_lock.js
@@ -30,25 +30,25 @@ add_task(async function() {
      "The highlighter icon for the first node is unselected");
 
   info("Click again to unhighlight");
   await unlockHighlighterOn(domNodePreview2);
   ok(!domNodePreview2.highlightNodeEl.classList.contains("selected"),
      "The highlighter icon for the second node is unselected");
 });
 
-function* lockHighlighterOn(domNodePreview) {
+async function lockHighlighterOn(domNodePreview) {
   let onLocked = domNodePreview.once("target-highlighter-locked");
   clickOnHighlighterIcon(domNodePreview);
-  yield onLocked;
+  await onLocked;
 }
 
-function* unlockHighlighterOn(domNodePreview) {
+async function unlockHighlighterOn(domNodePreview) {
   let onUnlocked = domNodePreview.once("target-highlighter-unlocked");
   clickOnHighlighterIcon(domNodePreview);
-  yield onUnlocked;
+  await onUnlocked;
 }
 
 function clickOnHighlighterIcon(domNodePreview) {
   let lockEl = domNodePreview.highlightNodeEl;
   EventUtils.sendMouseEvent({type: "click"}, lockEl,
                             lockEl.ownerDocument.defaultView);
 }

--- a/devtools/client/animationinspector/test/browser_animation_timeline_scrubber_movable.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_scrubber_movable.js
@@ -52,20 +52,20 @@ add_task(async function() {
   checkScrubberIsAt(scrubberEl, timeHeaderEl, 0);
 
   // Wait for promise of setCurrentTimes if setCurrentTimes is running.
   if (panel.setCurrentTimeAllPromise) {
     await panel.setCurrentTimeAllPromise;
   }
 });
 
-function* synthesizeInHeaderAndWaitForChange(timeline, x, y, type) {
+async function synthesizeInHeaderAndWaitForChange(timeline, x, y, type) {
   let onDataChanged = timeline.once("timeline-data-changed");
   EventUtils.synthesizeMouse(timeline.timeHeaderEl, x, y, {type}, timeline.win);
-  yield onDataChanged;
+  await onDataChanged;
 }
 
 function getPositionPercentage(pos, headerEl) {
   return pos * 100 / headerEl.offsetWidth;
 }
 
 function checkScrubberIsAt(scrubberEl, timeHeaderEl, pos) {
   let newPos = Math.round(parseFloat(scrubberEl.style.left));

--- a/devtools/client/animationinspector/test/browser_animation_toggle_button_toggles_animations.js
+++ b/devtools/client/animationinspector/test/browser_animation_toggle_button_toggles_animations.js
@@ -19,14 +19,14 @@ add_task(async function() {
   await panel.toggleAll();
   await checkState("paused");
 
   info("Click again the toggle button");
   await panel.toggleAll();
   await checkState("running");
 });
 
-function* checkState(state) {
+async function checkState(state) {
   for (let selector of [".animated", ".multi", ".long"]) {
-    let playState = yield getAnimationPlayerState(selector);
+    let playState = await getAnimationPlayerState(selector);
     is(playState, state, "The animation on node " + selector + " is " + state);
   }
 }

--- a/devtools/client/animationinspector/test/head.js
+++ b/devtools/client/animationinspector/test/head.js
@@ -12,18 +12,18 @@ Services.scriptloader.loadSubScript(
   this);
 
 const FRAME_SCRIPT_URL = CHROME_URL_ROOT + "doc_frame_script.js";
 const TAB_NAME = "animationinspector";
 const ANIMATION_L10N =
   new LocalizationHelper("devtools/client/locales/animationinspector.properties");
 
 // Auto clean-up when a test ends
-registerCleanupFunction(function* () {
-  yield closeAnimationInspector();
+registerCleanupFunction(async function() {
+  await closeAnimationInspector();
 
   while (gBrowser.tabs.length > 1) {
     gBrowser.removeCurrentTab();
   }
 });
 
 // Clean-up all prefs that might have been changed during a test run
 // (safer here because if the test fails, then the pref is never reverted)
@@ -60,21 +60,21 @@ addTab = function(url) {
   });
 };
 
 /**
  * Reload the current tab location.
  * @param {InspectorPanel} inspector The instance of InspectorPanel currently
  * loaded in the toolbox
  */
-function* reloadTab(inspector) {
+async function reloadTab(inspector) {
   let onNewRoot = inspector.once("new-root");
-  yield executeInContent("devtools:test:reload", {}, {}, false);
-  yield onNewRoot;
-  yield inspector.once("inspector-updated");
+  await executeInContent("devtools:test:reload", {}, {}, false);
+  await onNewRoot;
+  await inspector.once("inspector-updated");
 }
 
 /*
  * Set the inspector's current selection to a node or to the first match of the
  * given css selector and wait for the animations to be displayed
  * @param {String|NodeFront}
  *        data The node to select
  * @param {InspectorPanel} inspector
@@ -363,18 +363,18 @@ async function changeTimelinePlaybackRat
   EventUtils.synthesizeMouseAtCenter(
     win.document.querySelector("#timeline-toolbar"), {type: "mousemove"}, win);
 }
 
 /**
  * Wait for animation selecting.
  * @param {AnimationsPanel} panel
  */
-function* waitForAnimationSelecting(panel) {
-  yield panel.animationsTimelineComponent.once("animation-selected");
+async function waitForAnimationSelecting(panel) {
+  await panel.animationsTimelineComponent.once("animation-selected");
 }
 
 /**
  * Wait for rendering animation timeline.
  * @param {AnimationsPanel} panel
  */
 function waitForAnimationTimelineRendering(panel) {
   return panel.animationsTimelineComponent.once("animation-timeline-rendering-completed");
@@ -384,28 +384,28 @@ function waitForAnimationTimelineRenderi
    + * Click the timeline header to update the animation current time.
    + * @param {AnimationsPanel} panel
    + * @param {Number} x position rate on timeline header.
    + *                 This method calculates
    + *                 `position * offsetWidth + offsetLeft of timeline header`
    + *                 as the clientX of MouseEvent.
    + *                 This parameter should be from 0.0 to 1.0.
    + */
-function* clickOnTimelineHeader(panel, position) {
+async function clickOnTimelineHeader(panel, position) {
   const timeline = panel.animationsTimelineComponent;
   const onTimelineDataChanged = timeline.once("timeline-data-changed");
 
   const header = timeline.timeHeaderEl;
   const clientX = header.offsetLeft + header.offsetWidth * position;
   EventUtils.sendMouseEvent({ type: "mousedown", clientX: clientX },
                             header, header.ownerDocument.defaultView);
   info(`Click at (${ clientX }, 0) on timeline header`);
   EventUtils.sendMouseEvent({ type: "mouseup", clientX: clientX }, header,
                             header.ownerDocument.defaultView);
-  return yield onTimelineDataChanged;
+  return await onTimelineDataChanged;
 }
 
 /**
  * Prevent the toolbox common highlighter from making backend requests.
  * @param {Toolbox} toolbox
  */
 function disableHighlighter(toolbox) {
   toolbox._highlighter = {
@@ -421,17 +421,17 @@ function disableHighlighter(toolbox) {
 /**
  * Click on an animation in the timeline to select/unselect it.
  * @param {AnimationsPanel} panel The panel instance.
  * @param {Number} index The index of the animation to click on.
  * @param {Boolean} shouldAlreadySelected Set to true
  *                  if the clicked animation is already selected.
  * @return {Promise} resolves to the animation whose state has changed.
  */
-function* clickOnAnimation(panel, index, shouldAlreadySelected) {
+async function clickOnAnimation(panel, index, shouldAlreadySelected) {
   let timeline = panel.animationsTimelineComponent;
 
   // Expect a selection event.
   let onSelectionChanged = timeline.once(shouldAlreadySelected
                                          ? "animation-already-selected"
                                          : "animation-selected");
 
   info("Click on animation " + index + " in the timeline");
@@ -442,17 +442,17 @@ function* clickOnAnimation(panel, index,
   let x = timeBlockBounds.width / 2;
   let y = timeBlockBounds.height / 2;
   if (timeBlock != timeBlock.ownerDocument.elementFromPoint(x, y)) {
     // Move the mouse pointer a little since scrubber element may be at the point.
     x += timeBlockBounds.width / 4;
   }
   EventUtils.synthesizeMouse(timeBlock, x, y, {}, timeBlock.ownerDocument.defaultView);
 
-  return yield onSelectionChanged;
+  return await onSelectionChanged;
 }
 
 /**
  * Get an instance of the Keyframes component from the timeline.
  * @param {AnimationsPanel} panel The panel instance.
  * @param {String} propertyName The name of the animated property.
  * @return {Keyframes} The Keyframes component instance.
  */