Merge inbound to mozilla-central. a=merge
authorGurzau Raul <rgurzau@mozilla.com>
Sat, 24 Mar 2018 00:00:40 +0200
changeset 409719 d7b0d0e7228da9d690df6f105b865db973789c34
parent 409688 15b7991887bc8021ba21108c3d31f461fab47a7f (current diff)
parent 409718 d09816697ea8b6d972a88bf12f4330704518850e (diff)
child 409720 9773d649efae51fe32e7689d56cbe0263a428e34
child 409748 bef38a89598627d9e57a59f5820b5cc027c4e6f8
child 409767 8f963aeb1f00f5a2cb8f51e0442c005907e1da23
push id33697
push userrgurzau@mozilla.com
push dateFri, 23 Mar 2018 22:01:33 +0000
treeherdermozilla-central@d7b0d0e7228d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmerge
milestone61.0a1
first release with
nightly linux32
d7b0d0e7228d / 61.0a1 / 20180323221725 / files
nightly linux64
d7b0d0e7228d / 61.0a1 / 20180323221725 / files
nightly mac
d7b0d0e7228d / 61.0a1 / 20180323221725 / files
nightly win32
d7b0d0e7228d / 61.0a1 / 20180323221725 / files
nightly win64
d7b0d0e7228d / 61.0a1 / 20180323221725 / files
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
releases
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Merge inbound to mozilla-central. a=merge
browser/base/content/test/tabs/browser.ini
devtools/client/inspector/markup/markup.js
dom/xslt/tests/mochitest/test_exslt_regex.html
dom/xslt/txIFunctionEvaluationContext.idl
dom/xslt/txINodeSet.idl
dom/xslt/txIXPathObject.idl
dom/xslt/xpath/txNodeSetAdaptor.cpp
dom/xslt/xpath/txNodeSetAdaptor.h
dom/xslt/xpath/txXPCOMExtensionFunction.cpp
dom/xslt/xpath/txXPathObjectAdaptor.h
hal/fallback/FallbackTime.cpp
--- a/browser/base/content/test/tabs/browser.ini
+++ b/browser/base/content/test/tabs/browser.ini
@@ -23,16 +23,17 @@ skip-if = !e10s # Test only relevant for
 skip-if = !e10s # Pref and test only relevant for e10s.
 [browser_newwindow_tabstrip_overflow.js]
 [browser_opened_file_tab_navigated_to_web.js]
 [browser_overflowScroll.js]
 [browser_pinnedTabs.js]
 [browser_pinnedTabs_closeByKeyboard.js]
 [browser_positional_attributes.js]
 [browser_preloadedBrowser_zoom.js]
+skip-if = !debug && (os == 'win' && (os_version == '6.1')) # Bug 1397098
 [browser_reload_deleted_file.js]
 skip-if = (debug && os == 'mac') || (debug && os == 'linux' && bits == 64) #Bug 1421183, disabled on Linux/OSX for leaked windows
 [browser_tabswitch_updatecommands.js]
 [browser_viewsource_of_data_URI_in_file_process.js]
 [browser_visibleTabs_bookmarkAllTabs.js]
 [browser_visibleTabs_contextMenu.js]
 [browser_open_newtab_start_observer_notification.js]
 [browser_bug_1387976_restore_lazy_tab_browser_muted_state.js]
--- a/devtools/client/inspector/boxmodel/box-model.js
+++ b/devtools/client/inspector/boxmodel/box-model.js
@@ -1,15 +1,14 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
-const { Task } = require("devtools/shared/task");
 const { getCssProperties } = require("devtools/shared/fronts/css-properties");
 
 const { InplaceEditor } = require("devtools/client/shared/inplace-editor");
 
 const {
   updateGeometryEditorEnabled,
   updateLayout,
   updateOffsetParent,
@@ -120,50 +119,50 @@ BoxModel.prototype = {
    *         Optional string describing the reason why the boxmodel is updated.
    */
   updateBoxModel(reason) {
     this._updateReasons = this._updateReasons || [];
     if (reason) {
       this._updateReasons.push(reason);
     }
 
-    let lastRequest = Task.spawn((function* () {
+    let lastRequest = ((async function() {
       if (!this.inspector ||
           !this.isPanelVisible() ||
           !this.inspector.selection.isConnected() ||
           !this.inspector.selection.isElementNode()) {
         return null;
       }
 
       let node = this.inspector.selection.nodeFront;
 
-      let layout = yield this.inspector.pageStyle.getLayout(node, {
+      let layout = await this.inspector.pageStyle.getLayout(node, {
         autoMargins: true,
       });
 
-      let styleEntries = yield this.inspector.pageStyle.getApplied(node, {
+      let styleEntries = await this.inspector.pageStyle.getApplied(node, {
         // We don't need styles applied to pseudo elements of the current node.
         skipPseudo: true
       });
       this.elementRules = styleEntries.map(e => e.rule);
 
       // Update the layout properties with whether or not the element's position is
       // editable with the geometry editor.
-      let isPositionEditable = yield this.inspector.pageStyle.isPositionEditable(node);
+      let isPositionEditable = await this.inspector.pageStyle.isPositionEditable(node);
 
       layout = Object.assign({}, layout, {
         isPositionEditable,
       });
 
       const actorCanGetOffSetParent =
-        yield this.inspector.target.actorHasMethod("domwalker", "getOffsetParent");
+        await this.inspector.target.actorHasMethod("domwalker", "getOffsetParent");
 
       if (actorCanGetOffSetParent) {
         // Update the redux store with the latest offset parent DOM node
-        let offsetParent = yield this.inspector.walker.getOffsetParent(node);
+        let offsetParent = await this.inspector.walker.getOffsetParent(node);
         this.store.dispatch(updateOffsetParent(offsetParent));
       }
 
       // Update the redux store with the latest layout properties and update the box
       // model view.
       this.store.dispatch(updateLayout(layout));
 
       // If a subsequent request has been made, wait for that one instead.
@@ -172,17 +171,17 @@ BoxModel.prototype = {
       }
 
       this.inspector.emit("boxmodel-view-updated", this._updateReasons);
 
       this._lastRequest = null;
       this._updateReasons = [];
 
       return null;
-    }).bind(this)).catch(console.error);
+    }).bind(this))().catch(console.error);
 
     this._lastRequest = lastRequest;
   },
 
   /**
    * Hides the box-model highlighter on the currently selected element.
    */
   onHideBoxModelHighlighter() {
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel.js
@@ -145,48 +145,48 @@ var res2 = [
     value: 10
   },
   {
     selector: ".boxmodel-border.boxmodel-right > span",
     value: 10
   },
 ];
 
-add_task(function* () {
+add_task(async function() {
   let style = "div { position: absolute; top: 42px; left: 42px; " +
               "height: 100.111px; width: 100px; border: 10px solid black; " +
               "padding: 20px; margin: 30px auto;}";
   let html = "<style>" + style + "</style><div></div>";
 
-  yield addTab("data:text/html," + encodeURIComponent(html));
-  let {inspector, boxmodel, testActor} = yield openLayoutView();
-  yield selectNode("div", inspector);
+  await addTab("data:text/html," + encodeURIComponent(html));
+  let {inspector, boxmodel, testActor} = await openLayoutView();
+  await selectNode("div", inspector);
 
-  yield testInitialValues(inspector, boxmodel);
-  yield testChangingValues(inspector, boxmodel, testActor);
+  await testInitialValues(inspector, boxmodel);
+  await testChangingValues(inspector, boxmodel, testActor);
 });
 
-function* testInitialValues(inspector, boxmodel) {
+function testInitialValues(inspector, boxmodel) {
   info("Test that the initial values of the box model are correct");
   let doc = boxmodel.document;
 
   for (let i = 0; i < res1.length; i++) {
     let elt = doc.querySelector(res1[i].selector);
     is(elt.textContent, res1[i].value,
        res1[i].selector + " has the right value.");
   }
 }
 
-function* testChangingValues(inspector, boxmodel, testActor) {
+async function testChangingValues(inspector, boxmodel, testActor) {
   info("Test that changing the document updates the box model");
   let doc = boxmodel.document;
 
   let onUpdated = waitForUpdate(inspector);
-  yield testActor.setAttribute("div", "style",
+  await testActor.setAttribute("div", "style",
                                "height:150px;padding-right:50px;top:50px");
-  yield onUpdated;
+  await onUpdated;
 
   for (let i = 0; i < res2.length; i++) {
     let elt = doc.querySelector(res2[i].selector);
     is(elt.textContent, res2[i].value,
        res2[i].selector + " has the right value after style update.");
   }
 }
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_edit-position-visible-position-change.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_edit-position-visible-position-change.js
@@ -11,34 +11,34 @@ const TEST_URI = `
   <div id="mydiv" style="background:tomato;
     position:absolute;
     top:10px;
     left:10px;
     width:100px;
     height:100px">
 `;
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let {inspector, boxmodel} = yield openLayoutView();
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, boxmodel} = await openLayoutView();
 
-  yield selectNode("#mydiv", inspector);
+  await selectNode("#mydiv", inspector);
   let editPositionButton = boxmodel.document.querySelector(".layout-geometry-editor");
 
   ok(isNodeVisible(editPositionButton), "Edit Position button is visible initially");
 
   let positionLeftTextbox = boxmodel.document.querySelector(
       ".boxmodel-editable[title=position-left]"
   );
   ok(isNodeVisible(positionLeftTextbox), "Position-left edit box exists");
 
   info("Change the value of position-left and submit");
   let onUpdate = waitForUpdate(inspector);
   EventUtils.synthesizeMouseAtCenter(positionLeftTextbox, {},
     boxmodel.document.defaultView);
   EventUtils.synthesizeKey("8", {}, boxmodel.document.defaultView);
   EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
 
-  yield onUpdate;
+  await onUpdate;
   editPositionButton = boxmodel.document.querySelector(".layout-geometry-editor");
   ok(isNodeVisible(editPositionButton),
     "Edit Position button is still visible after layout change");
 });
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel.js
@@ -12,187 +12,187 @@ const TEST_URI = "<style>" +
   "#div1 { margin-top: 5px }" +
   "#div2 { border-bottom: 1em solid black; }" +
   "#div3 { padding: 2em; }" +
   "#div4 { margin: 1px; }" +
   "</style>" +
   "<div id='div1'></div><div id='div2'></div>" +
   "<div id='div3'></div><div id='div4'></div>";
 
-add_task(function* () {
+add_task(async function() {
   // Make sure the toolbox is tall enough to have empty space below the
   // boxmodel-container.
-  yield pushPref("devtools.toolbox.footer.height", 500);
+  await pushPref("devtools.toolbox.footer.height", 500);
 
-  yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
-  let {inspector, boxmodel, testActor} = yield openLayoutView();
+  await addTab("data:text/html," + encodeURIComponent(TEST_URI));
+  let {inspector, boxmodel, testActor} = await openLayoutView();
 
-  yield testEditingMargins(inspector, boxmodel, testActor);
-  yield testKeyBindings(inspector, boxmodel, testActor);
-  yield testEscapeToUndo(inspector, boxmodel, testActor);
-  yield testDeletingValue(inspector, boxmodel, testActor);
-  yield testRefocusingOnClick(inspector, boxmodel, testActor);
+  await testEditingMargins(inspector, boxmodel, testActor);
+  await testKeyBindings(inspector, boxmodel, testActor);
+  await testEscapeToUndo(inspector, boxmodel, testActor);
+  await testDeletingValue(inspector, boxmodel, testActor);
+  await testRefocusingOnClick(inspector, boxmodel, testActor);
 });
 
-function* testEditingMargins(inspector, boxmodel, testActor) {
+async function testEditingMargins(inspector, boxmodel, testActor) {
   info("Test that editing margin dynamically updates the document, pressing " +
        "escape cancels the changes");
 
-  is((yield getStyle(testActor, "#div1", "margin-top")), "",
+  is((await getStyle(testActor, "#div1", "margin-top")), "",
      "Should be no margin-top on the element.");
-  yield selectNode("#div1", inspector);
+  await selectNode("#div1", inspector);
 
   let span = boxmodel.document.querySelector(".boxmodel-margin.boxmodel-top > span");
   is(span.textContent, 5, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
   let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "5px", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("3", {}, boxmodel.document.defaultView);
-  yield waitForUpdate(inspector);
+  await waitForUpdate(inspector);
 
-  is((yield getStyle(testActor, "#div1", "margin-top")), "3px",
+  is((await getStyle(testActor, "#div1", "margin-top")), "3px",
      "Should have updated the margin.");
 
   EventUtils.synthesizeKey("VK_ESCAPE", {}, boxmodel.document.defaultView);
-  yield waitForUpdate(inspector);
+  await waitForUpdate(inspector);
 
-  is((yield getStyle(testActor, "#div1", "margin-top")), "",
+  is((await getStyle(testActor, "#div1", "margin-top")), "",
      "Should be no margin-top on the element.");
   is(span.textContent, 5, "Should have the right value in the box model.");
 }
 
-function* testKeyBindings(inspector, boxmodel, testActor) {
+async function testKeyBindings(inspector, boxmodel, testActor) {
   info("Test that arrow keys work correctly and pressing enter commits the " +
        "changes");
 
-  is((yield getStyle(testActor, "#div1", "margin-left")), "",
+  is((await getStyle(testActor, "#div1", "margin-left")), "",
      "Should be no margin-top on the element.");
-  yield selectNode("#div1", inspector);
+  await selectNode("#div1", inspector);
 
   let span = boxmodel.document.querySelector(".boxmodel-margin.boxmodel-left > span");
   is(span.textContent, 10, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
   let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "10px", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("VK_UP", {}, boxmodel.document.defaultView);
-  yield waitForUpdate(inspector);
+  await waitForUpdate(inspector);
 
   is(editor.value, "11px", "Should have the right value in the editor.");
-  is((yield getStyle(testActor, "#div1", "margin-left")), "11px",
+  is((await getStyle(testActor, "#div1", "margin-left")), "11px",
      "Should have updated the margin.");
 
   EventUtils.synthesizeKey("VK_DOWN", {}, boxmodel.document.defaultView);
-  yield waitForUpdate(inspector);
+  await waitForUpdate(inspector);
 
   is(editor.value, "10px", "Should have the right value in the editor.");
-  is((yield getStyle(testActor, "#div1", "margin-left")), "10px",
+  is((await getStyle(testActor, "#div1", "margin-left")), "10px",
      "Should have updated the margin.");
 
   EventUtils.synthesizeKey("VK_UP", { shiftKey: true }, boxmodel.document.defaultView);
-  yield waitForUpdate(inspector);
+  await waitForUpdate(inspector);
 
   is(editor.value, "20px", "Should have the right value in the editor.");
-  is((yield getStyle(testActor, "#div1", "margin-left")), "20px",
+  is((await getStyle(testActor, "#div1", "margin-left")), "20px",
      "Should have updated the margin.");
   EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
 
-  is((yield getStyle(testActor, "#div1", "margin-left")), "20px",
+  is((await getStyle(testActor, "#div1", "margin-left")), "20px",
      "Should be the right margin-top on the element.");
   is(span.textContent, 20, "Should have the right value in the box model.");
 }
 
-function* testEscapeToUndo(inspector, boxmodel, testActor) {
+async function testEscapeToUndo(inspector, boxmodel, testActor) {
   info("Test that deleting the value removes the property but escape undoes " +
        "that");
 
-  is((yield getStyle(testActor, "#div1", "margin-left")), "20px",
+  is((await getStyle(testActor, "#div1", "margin-left")), "20px",
      "Should be the right margin-top on the element.");
-  yield selectNode("#div1", inspector);
+  await selectNode("#div1", inspector);
 
   let span = boxmodel.document.querySelector(".boxmodel-margin.boxmodel-left > span");
   is(span.textContent, 20, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
   let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "20px", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("VK_DELETE", {}, boxmodel.document.defaultView);
-  yield waitForUpdate(inspector);
+  await waitForUpdate(inspector);
 
   is(editor.value, "", "Should have the right value in the editor.");
-  is((yield getStyle(testActor, "#div1", "margin-left")), "",
+  is((await getStyle(testActor, "#div1", "margin-left")), "",
      "Should have updated the margin.");
 
   EventUtils.synthesizeKey("VK_ESCAPE", {}, boxmodel.document.defaultView);
-  yield waitForUpdate(inspector);
+  await waitForUpdate(inspector);
 
-  is((yield getStyle(testActor, "#div1", "margin-left")), "20px",
+  is((await getStyle(testActor, "#div1", "margin-left")), "20px",
      "Should be the right margin-top on the element.");
   is(span.textContent, 20, "Should have the right value in the box model.");
 }
 
-function* testDeletingValue(inspector, boxmodel, testActor) {
+async function testDeletingValue(inspector, boxmodel, testActor) {
   info("Test that deleting the value removes the property");
 
-  yield setStyle(testActor, "#div1", "marginRight", "15px");
-  yield waitForUpdate(inspector);
+  await setStyle(testActor, "#div1", "marginRight", "15px");
+  await waitForUpdate(inspector);
 
-  yield selectNode("#div1", inspector);
+  await selectNode("#div1", inspector);
 
   let span = boxmodel.document.querySelector(".boxmodel-margin.boxmodel-right > span");
   is(span.textContent, 15, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
   let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "15px", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("VK_DELETE", {}, boxmodel.document.defaultView);
-  yield waitForUpdate(inspector);
+  await waitForUpdate(inspector);
 
   is(editor.value, "", "Should have the right value in the editor.");
-  is((yield getStyle(testActor, "#div1", "margin-right")), "",
+  is((await getStyle(testActor, "#div1", "margin-right")), "",
      "Should have updated the margin.");
 
   EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
 
-  is((yield getStyle(testActor, "#div1", "margin-right")), "",
+  is((await getStyle(testActor, "#div1", "margin-right")), "",
      "Should be the right margin-top on the element.");
   is(span.textContent, 10, "Should have the right value in the box model.");
 }
 
-function* testRefocusingOnClick(inspector, boxmodel, testActor) {
+async function testRefocusingOnClick(inspector, boxmodel, testActor) {
   info("Test that clicking in the editor input does not remove focus");
 
-  yield selectNode("#div4", inspector);
+  await selectNode("#div4", inspector);
 
   let span = boxmodel.document.querySelector(".boxmodel-margin.boxmodel-top > span");
   is(span.textContent, 1, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
   let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
 
   info("Click in the already opened editor input");
   EventUtils.synthesizeMouseAtCenter(editor, {}, boxmodel.document.defaultView);
   is(editor, boxmodel.document.activeElement,
     "Inplace editor input should still have focus.");
 
   info("Check the input can still be used as expected");
   EventUtils.synthesizeKey("VK_UP", {}, boxmodel.document.defaultView);
-  yield waitForUpdate(inspector);
+  await waitForUpdate(inspector);
 
   is(editor.value, "2px", "Should have the right value in the editor.");
-  is((yield getStyle(testActor, "#div4", "margin-top")), "2px",
+  is((await getStyle(testActor, "#div4", "margin-top")), "2px",
      "Should have updated the margin.");
   EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
 
-  is((yield getStyle(testActor, "#div4", "margin-top")), "2px",
+  is((await getStyle(testActor, "#div4", "margin-top")), "2px",
      "Should be the right margin-top on the element.");
   is(span.textContent, 2, "Should have the right value in the box model.");
 }
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_allproperties.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_allproperties.js
@@ -9,138 +9,138 @@
 const TEST_URI = "<style>" +
   "div { margin: 10px; padding: 3px }" +
   "#div1 { margin-top: 5px }" +
   "#div2 { border-bottom: 1em solid black; }" +
   "#div3 { padding: 2em; }" +
   "</style>" +
   "<div id='div1'></div><div id='div2'></div><div id='div3'></div>";
 
-add_task(function* () {
-  yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
-  let {inspector, boxmodel, testActor} = yield openLayoutView();
+add_task(async function() {
+  await addTab("data:text/html," + encodeURIComponent(TEST_URI));
+  let {inspector, boxmodel, testActor} = await openLayoutView();
 
-  yield testEditing(inspector, boxmodel, testActor);
-  yield testEditingAndCanceling(inspector, boxmodel, testActor);
-  yield testDeleting(inspector, boxmodel, testActor);
-  yield testDeletingAndCanceling(inspector, boxmodel, testActor);
+  await testEditing(inspector, boxmodel, testActor);
+  await testEditingAndCanceling(inspector, boxmodel, testActor);
+  await testDeleting(inspector, boxmodel, testActor);
+  await testDeletingAndCanceling(inspector, boxmodel, testActor);
 });
 
-function* testEditing(inspector, boxmodel, testActor) {
+async function testEditing(inspector, boxmodel, testActor) {
   info("When all properties are set on the node editing one should work");
 
-  yield setStyle(testActor, "#div1", "padding", "5px");
-  yield waitForUpdate(inspector);
+  await setStyle(testActor, "#div1", "padding", "5px");
+  await waitForUpdate(inspector);
 
-  yield selectNode("#div1", inspector);
+  await selectNode("#div1", inspector);
 
   let span = boxmodel.document.querySelector(".boxmodel-padding.boxmodel-bottom > span");
   is(span.textContent, 5, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
   let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "5px", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("7", {}, boxmodel.document.defaultView);
-  yield waitForUpdate(inspector);
+  await waitForUpdate(inspector);
 
   is(editor.value, "7", "Should have the right value in the editor.");
-  is((yield getStyle(testActor, "#div1", "padding-bottom")), "7px",
+  is((await getStyle(testActor, "#div1", "padding-bottom")), "7px",
      "Should have updated the padding");
 
   EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
 
-  is((yield getStyle(testActor, "#div1", "padding-bottom")), "7px",
+  is((await getStyle(testActor, "#div1", "padding-bottom")), "7px",
      "Should be the right padding.");
   is(span.textContent, 7, "Should have the right value in the box model.");
 }
 
-function* testEditingAndCanceling(inspector, boxmodel, testActor) {
+async function testEditingAndCanceling(inspector, boxmodel, testActor) {
   info("When all properties are set on the node editing one and then " +
        "cancelling with ESCAPE should work");
 
-  yield setStyle(testActor, "#div1", "padding", "5px");
-  yield waitForUpdate(inspector);
+  await setStyle(testActor, "#div1", "padding", "5px");
+  await waitForUpdate(inspector);
 
-  yield selectNode("#div1", inspector);
+  await selectNode("#div1", inspector);
 
   let span = boxmodel.document.querySelector(".boxmodel-padding.boxmodel-left > span");
   is(span.textContent, 5, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
   let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "5px", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("8", {}, boxmodel.document.defaultView);
-  yield waitForUpdate(inspector);
+  await waitForUpdate(inspector);
 
   is(editor.value, "8", "Should have the right value in the editor.");
-  is((yield getStyle(testActor, "#div1", "padding-left")), "8px",
+  is((await getStyle(testActor, "#div1", "padding-left")), "8px",
      "Should have updated the padding");
 
   EventUtils.synthesizeKey("VK_ESCAPE", {}, boxmodel.document.defaultView);
-  yield waitForUpdate(inspector);
+  await waitForUpdate(inspector);
 
-  is((yield getStyle(testActor, "#div1", "padding-left")), "5px",
+  is((await getStyle(testActor, "#div1", "padding-left")), "5px",
      "Should be the right padding.");
   is(span.textContent, 5, "Should have the right value in the box model.");
 }
 
-function* testDeleting(inspector, boxmodel, testActor) {
+async function testDeleting(inspector, boxmodel, testActor) {
   info("When all properties are set on the node deleting one should work");
 
-  yield selectNode("#div1", inspector);
+  await selectNode("#div1", inspector);
 
   let span = boxmodel.document.querySelector(".boxmodel-padding.boxmodel-left > span");
   is(span.textContent, 5, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
   let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "5px", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("VK_DELETE", {}, boxmodel.document.defaultView);
-  yield waitForUpdate(inspector);
+  await waitForUpdate(inspector);
 
   is(editor.value, "", "Should have the right value in the editor.");
-  is((yield getStyle(testActor, "#div1", "padding-left")), "",
+  is((await getStyle(testActor, "#div1", "padding-left")), "",
      "Should have updated the padding");
 
   EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
 
-  is((yield getStyle(testActor, "#div1", "padding-left")), "",
+  is((await getStyle(testActor, "#div1", "padding-left")), "",
      "Should be the right padding.");
   is(span.textContent, 3, "Should have the right value in the box model.");
 }
 
-function* testDeletingAndCanceling(inspector, boxmodel, testActor) {
+async function testDeletingAndCanceling(inspector, boxmodel, testActor) {
   info("When all properties are set on the node deleting one then cancelling " +
        "should work");
 
-  yield setStyle(testActor, "#div1", "padding", "5px");
-  yield waitForUpdate(inspector);
+  await setStyle(testActor, "#div1", "padding", "5px");
+  await waitForUpdate(inspector);
 
-  yield selectNode("#div1", inspector);
+  await selectNode("#div1", inspector);
 
   let span = boxmodel.document.querySelector(".boxmodel-padding.boxmodel-left > span");
   is(span.textContent, 5, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
   let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "5px", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("VK_DELETE", {}, boxmodel.document.defaultView);
-  yield waitForUpdate(inspector);
+  await waitForUpdate(inspector);
 
   is(editor.value, "", "Should have the right value in the editor.");
-  is((yield getStyle(testActor, "#div1", "padding-left")), "",
+  is((await getStyle(testActor, "#div1", "padding-left")), "",
      "Should have updated the padding");
 
   EventUtils.synthesizeKey("VK_ESCAPE", {}, boxmodel.document.defaultView);
-  yield waitForUpdate(inspector);
+  await waitForUpdate(inspector);
 
-  is((yield getStyle(testActor, "#div1", "padding-left")), "5px",
+  is((await getStyle(testActor, "#div1", "padding-left")), "5px",
      "Should be the right padding.");
   is(span.textContent, 5, "Should have the right value in the box model.");
 }
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_bluronclick.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_bluronclick.js
@@ -10,50 +10,50 @@ const TEST_URI =
   `<style>
     #div1 {
       margin: 10px;
       padding: 3px;
     }
   </style>
   <div id="div1"></div>`;
 
-add_task(function* () {
+add_task(async function() {
   // Make sure the toolbox is tall enough to have empty space below the
   // boxmodel-container.
-  yield pushPref("devtools.toolbox.footer.height", 500);
+  await pushPref("devtools.toolbox.footer.height", 500);
 
-  yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
-  let {inspector, boxmodel} = yield openLayoutView();
+  await addTab("data:text/html," + encodeURIComponent(TEST_URI));
+  let {inspector, boxmodel} = await openLayoutView();
 
-  yield selectNode("#div1", inspector);
-  yield testClickingOutsideEditor(boxmodel);
-  yield testClickingBelowContainer(boxmodel);
+  await selectNode("#div1", inspector);
+  await testClickingOutsideEditor(boxmodel);
+  await testClickingBelowContainer(boxmodel);
 });
 
-function* testClickingOutsideEditor(boxmodel) {
+async function testClickingOutsideEditor(boxmodel) {
   info("Test that clicking outside the editor blurs it");
   let span = boxmodel.document.querySelector(".boxmodel-margin.boxmodel-top > span");
   is(span.textContent, 10, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
   let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
 
   info("Click next to the opened editor input.");
   let onBlur = once(editor, "blur");
   let rect = editor.getBoundingClientRect();
   EventUtils.synthesizeMouse(editor, rect.width + 10, rect.height / 2, {},
     boxmodel.document.defaultView);
-  yield onBlur;
+  await onBlur;
 
   is(boxmodel.document.querySelector(".styleinspector-propertyeditor"), null,
     "Inplace editor has been removed.");
 }
 
-function* testClickingBelowContainer(boxmodel) {
+async function testClickingBelowContainer(boxmodel) {
   info("Test that clicking below the box-model container blurs it");
   let span = boxmodel.document.querySelector(".boxmodel-margin.boxmodel-top > span");
   is(span.textContent, 10, "Should have the right value in the box model.");
 
   info("Test that clicking below the boxmodel-container blurs the opened editor");
   EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
   let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
@@ -62,13 +62,13 @@ function* testClickingBelowContainer(box
   let container = boxmodel.document.querySelector(".boxmodel-container");
   // Using getBoxQuads here because getBoundingClientRect (and therefore synthesizeMouse)
   // use an erroneous height of ~50px for the boxmodel-container.
   let bounds = container.getBoxQuads({relativeTo: boxmodel.document})[0].bounds;
   EventUtils.synthesizeMouseAtPoint(
     bounds.left + 10,
     bounds.top + bounds.height + 10,
     {}, boxmodel.document.defaultView);
-  yield onBlur;
+  await onBlur;
 
   is(boxmodel.document.querySelector(".styleinspector-propertyeditor"), null,
     "Inplace editor has been removed.");
 }
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_border.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_border.js
@@ -9,44 +9,44 @@
 const TEST_URI = "<style>" +
   "div { margin: 10px; padding: 3px }" +
   "#div1 { margin-top: 5px }" +
   "#div2 { border-bottom: 1em solid black; }" +
   "#div3 { padding: 2em; }" +
   "</style>" +
   "<div id='div1'></div><div id='div2'></div><div id='div3'></div>";
 
-add_task(function* () {
-  yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
-  let {inspector, boxmodel, testActor} = yield openLayoutView();
+add_task(async function() {
+  await addTab("data:text/html," + encodeURIComponent(TEST_URI));
+  let {inspector, boxmodel, testActor} = await openLayoutView();
 
-  is((yield getStyle(testActor, "#div1", "border-top-width")), "",
+  is((await getStyle(testActor, "#div1", "border-top-width")), "",
      "Should have the right border");
-  is((yield getStyle(testActor, "#div1", "border-top-style")), "",
+  is((await getStyle(testActor, "#div1", "border-top-style")), "",
      "Should have the right border");
-  yield selectNode("#div1", inspector);
+  await selectNode("#div1", inspector);
 
   let span = boxmodel.document.querySelector(".boxmodel-border.boxmodel-top > span");
   is(span.textContent, 0, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
   let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "0", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("1", {}, boxmodel.document.defaultView);
-  yield waitForUpdate(inspector);
+  await waitForUpdate(inspector);
 
   is(editor.value, "1", "Should have the right value in the editor.");
-  is((yield getStyle(testActor, "#div1", "border-top-width")), "1px",
+  is((await getStyle(testActor, "#div1", "border-top-width")), "1px",
      "Should have the right border");
-  is((yield getStyle(testActor, "#div1", "border-top-style")), "solid",
+  is((await getStyle(testActor, "#div1", "border-top-style")), "solid",
      "Should have the right border");
 
   EventUtils.synthesizeKey("VK_ESCAPE", {}, boxmodel.document.defaultView);
-  yield waitForUpdate(inspector);
+  await waitForUpdate(inspector);
 
-  is((yield getStyle(testActor, "#div1", "border-top-width")), "",
+  is((await getStyle(testActor, "#div1", "border-top-width")), "",
      "Should be the right padding.");
-  is((yield getStyle(testActor, "#div1", "border-top-style")), "",
+  is((await getStyle(testActor, "#div1", "border-top-style")), "",
      "Should have the right border");
   is(span.textContent, 0, "Should have the right value in the box model.");
 });
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_pseudo.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_pseudo.js
@@ -15,44 +15,44 @@ const TEST_URI =
       padding-top: 5px;
       width: 5px;
     }
   </style>
   <div style='width:200px;'>
     <div class=test></div>
   </div>`;
 
-add_task(function* () {
-  yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
-  let {inspector, boxmodel, testActor} = yield openLayoutView();
+add_task(async function() {
+  await addTab("data:text/html," + encodeURIComponent(TEST_URI));
+  let {inspector, boxmodel, testActor} = await openLayoutView();
 
-  yield selectNode(".test", inspector);
+  await selectNode(".test", inspector);
 
   // No margin-top defined.
   info("Test that margins are not impacted by a pseudo element");
-  is((yield getStyle(testActor, ".test", "margin-top")), "", "margin-top is correct");
-  yield checkValueInBoxModel(".boxmodel-margin.boxmodel-top", "0", boxmodel.document);
+  is((await getStyle(testActor, ".test", "margin-top")), "", "margin-top is correct");
+  await checkValueInBoxModel(".boxmodel-margin.boxmodel-top", "0", boxmodel.document);
 
   // No padding-top defined.
   info("Test that paddings are not impacted by a pseudo element");
-  is((yield getStyle(testActor, ".test", "padding-top")), "", "padding-top is correct");
-  yield checkValueInBoxModel(".boxmodel-padding.boxmodel-top", "0", boxmodel.document);
+  is((await getStyle(testActor, ".test", "padding-top")), "", "padding-top is correct");
+  await checkValueInBoxModel(".boxmodel-padding.boxmodel-top", "0", boxmodel.document);
 
   // Width should be driven by the parent div.
   info("Test that dimensions are not impacted by a pseudo element");
-  is((yield getStyle(testActor, ".test", "width")), "", "width is correct");
-  yield checkValueInBoxModel(".boxmodel-content.boxmodel-width", "200",
+  is((await getStyle(testActor, ".test", "width")), "", "width is correct");
+  await checkValueInBoxModel(".boxmodel-content.boxmodel-width", "200",
     boxmodel.document);
 });
 
-function* checkValueInBoxModel(selector, expectedValue, doc) {
+async function checkValueInBoxModel(selector, expectedValue, doc) {
   let span = doc.querySelector(selector + " > span");
   is(span.textContent, expectedValue, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, doc.defaultView);
   let editor = doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, expectedValue, "Should have the right value in the editor.");
 
   let onBlur = once(editor, "blur");
   EventUtils.synthesizeKey("VK_RETURN", {}, doc.defaultView);
-  yield onBlur;
+  await onBlur;
 }
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_stylerules.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_stylerules.js
@@ -10,104 +10,104 @@
 const TEST_URI = "<style>" +
   "div { margin: 10px; padding: 3px }" +
   "#div1 { margin-top: 5px }" +
   "#div2 { border-bottom: 1em solid black; }" +
   "#div3 { padding: 2em; }" +
   "</style>" +
   "<div id='div1'></div><div id='div2'></div><div id='div3'></div>";
 
-add_task(function* () {
-  yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
-  let {inspector, boxmodel, testActor} = yield openLayoutView();
+add_task(async function() {
+  await addTab("data:text/html," + encodeURIComponent(TEST_URI));
+  let {inspector, boxmodel, testActor} = await openLayoutView();
 
-  yield testUnits(inspector, boxmodel, testActor);
-  yield testValueComesFromStyleRule(inspector, boxmodel, testActor);
-  yield testShorthandsAreParsed(inspector, boxmodel, testActor);
+  await testUnits(inspector, boxmodel, testActor);
+  await testValueComesFromStyleRule(inspector, boxmodel, testActor);
+  await testShorthandsAreParsed(inspector, boxmodel, testActor);
 });
 
-function* testUnits(inspector, boxmodel, testActor) {
+async function testUnits(inspector, boxmodel, testActor) {
   info("Test that entering units works");
 
-  is((yield getStyle(testActor, "#div1", "padding-top")), "",
+  is((await getStyle(testActor, "#div1", "padding-top")), "",
      "Should have the right padding");
-  yield selectNode("#div1", inspector);
+  await selectNode("#div1", inspector);
 
   let span = boxmodel.document.querySelector(".boxmodel-padding.boxmodel-top > span");
   is(span.textContent, 3, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
   let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "3px", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("1", {}, boxmodel.document.defaultView);
-  yield waitForUpdate(inspector);
+  await waitForUpdate(inspector);
   EventUtils.synthesizeKey("e", {}, boxmodel.document.defaultView);
-  yield waitForUpdate(inspector);
+  await waitForUpdate(inspector);
 
-  is((yield getStyle(testActor, "#div1", "padding-top")), "",
+  is((await getStyle(testActor, "#div1", "padding-top")), "",
      "An invalid value is handled cleanly");
 
   EventUtils.synthesizeKey("m", {}, boxmodel.document.defaultView);
-  yield waitForUpdate(inspector);
+  await waitForUpdate(inspector);
 
   is(editor.value, "1em", "Should have the right value in the editor.");
-  is((yield getStyle(testActor, "#div1", "padding-top")),
+  is((await getStyle(testActor, "#div1", "padding-top")),
      "1em", "Should have updated the padding.");
 
   EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
 
-  is((yield getStyle(testActor, "#div1", "padding-top")), "1em",
+  is((await getStyle(testActor, "#div1", "padding-top")), "1em",
      "Should be the right padding.");
   is(span.textContent, 16, "Should have the right value in the box model.");
 }
 
-function* testValueComesFromStyleRule(inspector, boxmodel, testActor) {
+async function testValueComesFromStyleRule(inspector, boxmodel, testActor) {
   info("Test that we pick up the value from a higher style rule");
 
-  is((yield getStyle(testActor, "#div2", "border-bottom-width")), "",
+  is((await getStyle(testActor, "#div2", "border-bottom-width")), "",
      "Should have the right border-bottom-width");
-  yield selectNode("#div2", inspector);
+  await selectNode("#div2", inspector);
 
   let span = boxmodel.document.querySelector(".boxmodel-border.boxmodel-bottom > span");
   is(span.textContent, 16, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
   let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "1em", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("0", {}, boxmodel.document.defaultView);
-  yield waitForUpdate(inspector);
+  await waitForUpdate(inspector);
 
   is(editor.value, "0", "Should have the right value in the editor.");
-  is((yield getStyle(testActor, "#div2", "border-bottom-width")), "0px",
+  is((await getStyle(testActor, "#div2", "border-bottom-width")), "0px",
      "Should have updated the border.");
 
   EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
 
-  is((yield getStyle(testActor, "#div2", "border-bottom-width")), "0px",
+  is((await getStyle(testActor, "#div2", "border-bottom-width")), "0px",
      "Should be the right border-bottom-width.");
   is(span.textContent, 0, "Should have the right value in the box model.");
 }
 
-function* testShorthandsAreParsed(inspector, boxmodel, testActor) {
+async function testShorthandsAreParsed(inspector, boxmodel, testActor) {
   info("Test that shorthand properties are parsed correctly");
 
-  is((yield getStyle(testActor, "#div3", "padding-right")), "",
+  is((await getStyle(testActor, "#div3", "padding-right")), "",
      "Should have the right padding");
-  yield selectNode("#div3", inspector);
+  await selectNode("#div3", inspector);
 
   let span = boxmodel.document.querySelector(".boxmodel-padding.boxmodel-right > span");
   is(span.textContent, 32, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
   let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "2em", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
 
-  is((yield getStyle(testActor, "#div3", "padding-right")), "",
+  is((await getStyle(testActor, "#div3", "padding-right")), "",
      "Should be the right padding.");
   is(span.textContent, 32, "Should have the right value in the box model.");
 }
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_layout-accordion-state.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_layout-accordion-state.js
@@ -13,29 +13,29 @@ const TEST_URI = `
       padding: 3px;
     }
   </style>
   <div id="div1"></div>
 `;
 
 const BOXMODEL_OPENED_PREF = "devtools.layout.boxmodel.opened";
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let { inspector, boxmodel, toolbox } = yield openLayoutView();
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let { inspector, boxmodel, toolbox } = await openLayoutView();
   let { document: doc } = boxmodel;
 
-  yield testAccordionStateAfterClickingHeader(doc);
-  yield testAccordionStateAfterSwitchingSidebars(inspector, doc);
-  yield testAccordionStateAfterReopeningLayoutView(toolbox);
+  await testAccordionStateAfterClickingHeader(doc);
+  await testAccordionStateAfterSwitchingSidebars(inspector, doc);
+  await testAccordionStateAfterReopeningLayoutView(toolbox);
 
   Services.prefs.clearUserPref(BOXMODEL_OPENED_PREF);
 });
 
-function* testAccordionStateAfterClickingHeader(doc) {
+function testAccordionStateAfterClickingHeader(doc) {
   let header = doc.querySelector("#layout-container .box-model-pane ._header");
   let bContent = doc.querySelector("#layout-container .box-model-pane ._content");
 
   info("Checking initial state of the box model panel.");
   is(bContent.style.display, "block", "The box model panel content is 'display: block'.");
   ok(Services.prefs.getBoolPref(BOXMODEL_OPENED_PREF),
     `${BOXMODEL_OPENED_PREF} is pref on by default.`);
 
@@ -43,42 +43,42 @@ function* testAccordionStateAfterClickin
   header.click();
 
   info("Checking the new state of the box model panel.");
   is(bContent.style.display, "none", "The box model panel content is 'display: none'.");
   ok(!Services.prefs.getBoolPref(BOXMODEL_OPENED_PREF),
     `${BOXMODEL_OPENED_PREF} is pref off.`);
 }
 
-function* testAccordionStateAfterSwitchingSidebars(inspector, doc) {
+function testAccordionStateAfterSwitchingSidebars(inspector, doc) {
   info("Checking the box model accordion state is persistent after switching sidebars.");
 
   let bContent = doc.querySelector("#layout-container .box-model-pane ._content");
 
   info("Selecting the computed view.");
   inspector.sidebar.select("computedview");
 
   info("Selecting the layout view.");
   inspector.sidebar.select("layoutview");
 
   info("Checking the state of the box model panel.");
   is(bContent.style.display, "none", "The box model panel content is 'display: none'.");
   ok(!Services.prefs.getBoolPref(BOXMODEL_OPENED_PREF),
     `${BOXMODEL_OPENED_PREF} is pref off.`);
 }
 
-function* testAccordionStateAfterReopeningLayoutView(toolbox) {
+async function testAccordionStateAfterReopeningLayoutView(toolbox) {
   info("Checking the box model accordion state is persistent after closing and "
   + "re-opening the layout view.");
 
   info("Closing the toolbox.");
-  yield toolbox.destroy();
+  await toolbox.destroy();
 
   info("Re-opening the layout view.");
-  let { boxmodel } = yield openLayoutView();
+  let { boxmodel } = await openLayoutView();
   let { document: doc } = boxmodel;
   let bContent = doc.querySelector("#layout-container .box-model-pane ._content");
 
   info("Checking the state of the box model panel.");
   ok(!bContent, "The box model panel content is not rendered.");
   ok(!Services.prefs.getBoolPref(BOXMODEL_OPENED_PREF),
     `${BOXMODEL_OPENED_PREF} is pref off.`);
 }
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_navigation.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_navigation.js
@@ -10,39 +10,39 @@
 const TEST_URI = `
   <style>
   div { position: absolute; top: 42px; left: 42px;
   height: 100.111px; width: 100px; border: 10px solid black;
   padding: 20px; margin: 30px auto;}
   </style><div></div>
 `;
 
-add_task(function* () {
-  yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
-  let {inspector, boxmodel} = yield openLayoutView();
-  yield selectNode("div", inspector);
+add_task(async function() {
+  await addTab("data:text/html," + encodeURIComponent(TEST_URI));
+  let {inspector, boxmodel} = await openLayoutView();
+  await selectNode("div", inspector);
 
-  yield testInitialFocus(inspector, boxmodel);
-  yield testChangingLevels(inspector, boxmodel);
-  yield testTabbingWrapAround(inspector, boxmodel);
-  yield testChangingLevelsByClicking(inspector, boxmodel);
+  await testInitialFocus(inspector, boxmodel);
+  await testChangingLevels(inspector, boxmodel);
+  await testTabbingWrapAround(inspector, boxmodel);
+  await testChangingLevelsByClicking(inspector, boxmodel);
 });
 
-function* testInitialFocus(inspector, boxmodel) {
+function testInitialFocus(inspector, boxmodel) {
   info("Test that the focus is(on margin layout.");
   let doc = boxmodel.document;
   let container = doc.querySelector(".boxmodel-container");
   container.focus();
   EventUtils.synthesizeKey("KEY_Enter");
 
   is(container.getAttribute("activedescendant"), "boxmodel-main devtools-monospace",
     "Should be set to the position layout.");
 }
 
-function* testChangingLevels(inspector, boxmodel) {
+function testChangingLevels(inspector, boxmodel) {
   info("Test that using arrow keys updates level.");
   let doc = boxmodel.document;
   let container = doc.querySelector(".boxmodel-container");
   container.focus();
   EventUtils.synthesizeKey("KEY_Enter");
   EventUtils.synthesizeKey("KEY_Escape");
 
   EventUtils.synthesizeKey("KEY_ArrowDown");
@@ -73,17 +73,17 @@ function* testChangingLevels(inspector, 
   is(container.getAttribute("activedescendant"), "boxmodel-margins",
     "Should be set to the margin layout.");
 
   EventUtils.synthesizeKey("KEY_ArrowUp");
   is(container.getAttribute("activedescendant"), "boxmodel-main devtools-monospace",
     "Should be set to the position layout.");
 }
 
-function* testTabbingWrapAround(inspector, boxmodel) {
+function testTabbingWrapAround(inspector, boxmodel) {
   info("Test that using arrow keys updates level.");
   let doc = boxmodel.document;
   let container = doc.querySelector(".boxmodel-container");
   container.focus();
   EventUtils.synthesizeKey("KEY_Enter");
 
   let editLevel = container.getAttribute("activedescendant").split(" ")[0];
   let dataLevel = doc.querySelector(`.${editLevel}`).getAttribute("data-box");
@@ -95,17 +95,17 @@ function* testTabbingWrapAround(inspecto
   EventUtils.synthesizeKey("KEY_Tab");
   is(editBoxes[0], doc.activeElement, "Top edit box should have focus.");
 
   editBoxes[0].focus();
   EventUtils.synthesizeKey("KEY_Tab", {shiftKey: true});
   is(editBoxes[3], doc.activeElement, "Left edit box should have focus.");
 }
 
-function* testChangingLevelsByClicking(inspector, boxmodel) {
+function testChangingLevelsByClicking(inspector, boxmodel) {
   info("Test that clicking on levels updates level.");
   let doc = boxmodel.document;
   let container = doc.querySelector(".boxmodel-container");
   container.focus();
 
   let marginLayout = doc.querySelector(".boxmodel-margins");
   let borderLayout = doc.querySelector(".boxmodel-borders");
   let paddingLayout = doc.querySelector(".boxmodel-paddings");
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_offsetparent.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_offsetparent.js
@@ -50,46 +50,46 @@ const updates = [
 
 const res2 = [
   {
     selector: "#absolute_child",
     offsetParentValue: null
   },
 ];
 
-add_task(function* () {
-  yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
-  let { inspector, boxmodel, testActor } = yield openLayoutView();
+add_task(async function() {
+  await addTab("data:text/html," + encodeURIComponent(TEST_URI));
+  let { inspector, boxmodel, testActor } = await openLayoutView();
 
-  yield testInitialValues(inspector, boxmodel);
-  yield testChangingValues(inspector, boxmodel, testActor);
+  await testInitialValues(inspector, boxmodel);
+  await testChangingValues(inspector, boxmodel, testActor);
 });
 
-function* testInitialValues(inspector, boxmodel) {
+async function testInitialValues(inspector, boxmodel) {
   info("Test that the initial values of the box model offset parent are correct");
   let viewdoc = boxmodel.document;
 
   for (let { selector, offsetParentValue } of res1) {
-    yield selectNode(selector, inspector);
+    await selectNode(selector, inspector);
 
     let elt = viewdoc.querySelector(OFFSET_PARENT_SELECTOR);
     is(elt && elt.textContent, offsetParentValue, selector + " has the right value.");
   }
 }
 
-function* testChangingValues(inspector, boxmodel, testActor) {
+async function testChangingValues(inspector, boxmodel, testActor) {
   info("Test that changing the document updates the box model");
   let viewdoc = boxmodel.document;
 
   for (let { selector, update } of updates) {
     let onUpdated = waitForUpdate(inspector);
-    yield testActor.setAttribute(selector, "style", update);
-    yield onUpdated;
+    await testActor.setAttribute(selector, "style", update);
+    await onUpdated;
   }
 
   for (let { selector, offsetParentValue } of res2) {
-    yield selectNode(selector, inspector);
+    await selectNode(selector, inspector);
 
     let elt = viewdoc.querySelector(OFFSET_PARENT_SELECTOR);
     is(elt && elt.textContent, offsetParentValue,
       selector + " has the right value after style update.");
   }
 }
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_positions.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_positions.js
@@ -37,28 +37,28 @@ const res1 = [
     value: "auto"
   },
   {
     selector: ".boxmodel-position.boxmodel-left > span",
     value: 0
   },
 ];
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let {inspector, boxmodel} = yield openLayoutView();
-  let node = yield getNodeFront("div", inspector);
-  let children = yield inspector.markup.walker.children(node);
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, boxmodel} = await openLayoutView();
+  let node = await getNodeFront("div", inspector);
+  let children = await inspector.markup.walker.children(node);
   let beforeElement = children.nodes[0];
 
-  yield selectNode(beforeElement, inspector);
-  yield testPositionValues(inspector, boxmodel);
+  await selectNode(beforeElement, inspector);
+  await testPositionValues(inspector, boxmodel);
 });
 
-function* testPositionValues(inspector, boxmodel) {
+function testPositionValues(inspector, boxmodel) {
   info("Test that the position values of the box model are correct");
   let doc = boxmodel.document;
 
   for (let i = 0; i < res1.length; i++) {
     let elt = doc.querySelector(res1[i].selector);
     is(elt.textContent, res1[i].value,
        res1[i].selector + " has the right value.");
   }
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_properties.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_properties.js
@@ -74,44 +74,44 @@ const res2 = [
     value: "static"
   },
   {
     property: "z-index",
     value: 5
   },
 ];
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let { inspector, boxmodel, testActor } = yield openLayoutView();
-  yield selectNode("div", inspector);
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let { inspector, boxmodel, testActor } = await openLayoutView();
+  await selectNode("div", inspector);
 
-  yield testInitialValues(inspector, boxmodel);
-  yield testChangingValues(inspector, boxmodel, testActor);
+  await testInitialValues(inspector, boxmodel);
+  await testChangingValues(inspector, boxmodel, testActor);
 });
 
-function* testInitialValues(inspector, boxmodel) {
+function testInitialValues(inspector, boxmodel) {
   info("Test that the initial values of the box model are correct");
   let doc = boxmodel.document;
 
   for (let { property, value } of res1) {
     let elt = doc.querySelector(getPropertySelector(property));
     is(elt.textContent, value, property + " has the right value.");
   }
 }
 
-function* testChangingValues(inspector, boxmodel, testActor) {
+async function testChangingValues(inspector, boxmodel, testActor) {
   info("Test that changing the document updates the box model");
   let doc = boxmodel.document;
 
   let onUpdated = waitForUpdate(inspector);
-  yield testActor.setAttribute("div", "style",
+  await testActor.setAttribute("div", "style",
                                "box-sizing:content-box;float:right;" +
                                "line-height:10px;position:static;z-index:5;");
-  yield onUpdated;
+  await onUpdated;
 
   for (let { property, value } of res2) {
     let elt = doc.querySelector(getPropertySelector(property));
     is(elt.textContent, value, property + " has the right value after style update.");
   }
 }
 
 function getPropertySelector(propertyName) {
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_pseudo-element.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_pseudo-element.js
@@ -92,28 +92,28 @@ const res1 = [
     value: 0
   },
   {
     selector: ".boxmodel-border.boxmodel-right > span",
     value: 0
   },
 ];
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let {inspector, boxmodel} = yield openLayoutView();
-  let node = yield getNodeFront("div", inspector);
-  let children = yield inspector.markup.walker.children(node);
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, boxmodel} = await openLayoutView();
+  let node = await getNodeFront("div", inspector);
+  let children = await inspector.markup.walker.children(node);
   let beforeElement = children.nodes[0];
 
-  yield selectNode(beforeElement, inspector);
-  yield testInitialValues(inspector, boxmodel);
+  await selectNode(beforeElement, inspector);
+  await testInitialValues(inspector, boxmodel);
 });
 
-function* testInitialValues(inspector, boxmodel) {
+function testInitialValues(inspector, boxmodel) {
   info("Test that the initial values of the box model are correct");
   let doc = boxmodel.document;
 
   for (let i = 0; i < res1.length; i++) {
     let elt = doc.querySelector(res1[i].selector);
     is(elt.textContent, res1[i].value,
        res1[i].selector + " has the right value.");
   }
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_rotate-labels-on-sides.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_rotate-labels-on-sides.js
@@ -25,20 +25,20 @@ const TEST_URI = encodeURIComponent([
   "<style>",
   "div { border:10px solid black; padding: 20px 20px 20px 2000000px; " +
   "margin: 30px auto; }",
   "</style>",
   "<div></div>"
 ].join(""));
 const LONG_TEXT_ROTATE_LIMIT = 3;
 
-add_task(function* () {
-  yield addTab("data:text/html," + TEST_URI);
-  let {inspector, boxmodel} = yield openLayoutView();
-  yield selectNode("div", inspector);
+add_task(async function() {
+  await addTab("data:text/html," + TEST_URI);
+  let {inspector, boxmodel} = await openLayoutView();
+  await selectNode("div", inspector);
 
   for (let i = 0; i < res1.length; i++) {
     let elt = boxmodel.document.querySelector(res1[i].selector);
     let isLong = elt.textContent.length > LONG_TEXT_ROTATE_LIMIT;
     let classList = elt.parentNode.classList;
     let canBeRotated = classList.contains("boxmodel-left") ||
                        classList.contains("boxmodel-right");
     let isRotated = classList.contains("boxmodel-rotate");
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_sync.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_sync.js
@@ -3,42 +3,42 @@
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test editing box model syncs with the rule view.
 
 const TEST_URI = "<p>hello</p>";
 
-add_task(function* () {
-  yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
-  let {inspector, boxmodel} = yield openLayoutView();
+add_task(async function() {
+  await addTab("data:text/html," + encodeURIComponent(TEST_URI));
+  let {inspector, boxmodel} = await openLayoutView();
 
   info("When a property is edited, it should sync in the rule view");
 
-  yield selectNode("p", inspector);
+  await selectNode("p", inspector);
 
   info("Modify padding-bottom in box model view");
   let span = boxmodel.document.querySelector(".boxmodel-padding.boxmodel-bottom > span");
   EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
   let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
 
   EventUtils.synthesizeKey("7", {}, boxmodel.document.defaultView);
-  yield waitForUpdate(inspector);
+  await waitForUpdate(inspector);
   is(editor.value, "7", "Should have the right value in the editor.");
   EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
 
   let onRuleViewRefreshed = once(inspector, "rule-view-refreshed");
   let onRuleViewSelected = once(inspector.sidebar, "ruleview-selected");
   info("Select the rule view and check that the property was synced there");
   let ruleView = selectRuleView(inspector);
 
   info("Wait for the rule view to be selected");
-  yield onRuleViewSelected;
+  await onRuleViewSelected;
 
   info("Wait for the rule view to be refreshed");
-  yield onRuleViewRefreshed;
+  await onRuleViewRefreshed;
   ok(true, "The rule view was refreshed");
 
   let ruleEditor = getRuleViewRuleEditor(ruleView, 0);
   let textProp = ruleEditor.rule.textProps[0];
   is(textProp.value, "7px", "The property has the right value");
 });
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_tooltips.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_tooltips.js
@@ -65,19 +65,19 @@ const VALUES_TEST_DATA = [{
     styleSheetLocation: "inline:3"
   }, {
     name: "padding-left",
     ruleSelector: "html, body, #div3",
     styleSheetLocation: "inline:3"
   }]
 }];
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let {inspector, boxmodel} = yield openLayoutView();
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, boxmodel} = await openLayoutView();
 
   info("Checking the regions tooltips");
 
   ok(boxmodel.document.querySelector(".boxmodel-margins").hasAttribute("title"),
     "The margin region has a tooltip");
   is(boxmodel.document.querySelector(".boxmodel-margins").getAttribute("title"), "margin",
     "The margin region has the correct tooltip content");
 
@@ -93,17 +93,17 @@ add_task(function* () {
 
   ok(boxmodel.document.querySelector(".boxmodel-content").hasAttribute("title"),
     "The content region has a tooltip");
   is(boxmodel.document.querySelector(".boxmodel-content").getAttribute("title"),
     "content", "The content region has the correct tooltip content");
 
   for (let {selector, values} of VALUES_TEST_DATA) {
     info("Selecting " + selector + " and checking the values tooltips");
-    yield selectNode(selector, inspector);
+    await selectNode(selector, inspector);
 
     info("Iterate over all values");
     for (let key in boxmodel.map) {
       if (key === "position") {
         continue;
       }
 
       let name = boxmodel.map[key].property;
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_update-after-navigation.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_update-after-navigation.js
@@ -5,88 +5,88 @@
 "use strict";
 
 // Test that the box model view continues to work after a page navigation and that
 // it also works after going back
 
 const IFRAME1 = URL_ROOT + "doc_boxmodel_iframe1.html";
 const IFRAME2 = URL_ROOT + "doc_boxmodel_iframe2.html";
 
-add_task(function* () {
-  yield addTab(IFRAME1);
-  let {inspector, boxmodel, testActor} = yield openLayoutView();
+add_task(async function() {
+  await addTab(IFRAME1);
+  let {inspector, boxmodel, testActor} = await openLayoutView();
 
-  yield testFirstPage(inspector, boxmodel, testActor);
+  await testFirstPage(inspector, boxmodel, testActor);
 
   info("Navigate to the second page");
   let onMarkupLoaded = waitForMarkupLoaded(inspector);
-  yield testActor.eval(`location.href="${IFRAME2}"`);
-  yield onMarkupLoaded;
+  await testActor.eval(`location.href="${IFRAME2}"`);
+  await onMarkupLoaded;
 
-  yield testSecondPage(inspector, boxmodel, testActor);
+  await testSecondPage(inspector, boxmodel, testActor);
 
   info("Go back to the first page");
   onMarkupLoaded = waitForMarkupLoaded(inspector);
-  yield testActor.eval("history.back();");
-  yield onMarkupLoaded;
+  await testActor.eval("history.back();");
+  await onMarkupLoaded;
 
-  yield testBackToFirstPage(inspector, boxmodel, testActor);
+  await testBackToFirstPage(inspector, boxmodel, testActor);
 });
 
-function* testFirstPage(inspector, boxmodel, testActor) {
+async function testFirstPage(inspector, boxmodel, testActor) {
   info("Test that the box model view works on the first page");
 
-  yield selectNode("p", inspector);
+  await selectNode("p", inspector);
 
   info("Checking that the box model view shows the right value");
   let paddingElt = boxmodel.document.querySelector(
     ".boxmodel-padding.boxmodel-top > span");
   is(paddingElt.textContent, "50");
 
   info("Listening for box model view changes and modifying the padding");
   let onUpdated = waitForUpdate(inspector);
-  yield setStyle(testActor, "p", "padding", "20px");
-  yield onUpdated;
+  await setStyle(testActor, "p", "padding", "20px");
+  await onUpdated;
   ok(true, "Box model view got updated");
 
   info("Checking that the box model view shows the right value after update");
   is(paddingElt.textContent, "20");
 }
 
-function* testSecondPage(inspector, boxmodel, testActor) {
+async function testSecondPage(inspector, boxmodel, testActor) {
   info("Test that the box model view works on the second page");
 
-  yield selectNode("p", inspector);
+  await selectNode("p", inspector);
 
   info("Checking that the box model view shows the right value");
   let sizeElt = boxmodel.document.querySelector(".boxmodel-size > span");
   is(sizeElt.textContent, "100" + "\u00D7" + "100");
 
   info("Listening for box model view changes and modifying the size");
   let onUpdated = waitForUpdate(inspector);
-  yield setStyle(testActor, "p", "width", "200px");
-  yield onUpdated;
+  await setStyle(testActor, "p", "width", "200px");
+  await onUpdated;
   ok(true, "Box model view got updated");
 
   info("Checking that the box model view shows the right value after update");
   is(sizeElt.textContent, "200" + "\u00D7" + "100");
 }
 
-function* testBackToFirstPage(inspector, boxmodel, testActor) {
+async function testBackToFirstPage(inspector, boxmodel, testActor) {
   info("Test that the box model view works on the first page after going back");
 
-  yield selectNode("p", inspector);
+  await selectNode("p", inspector);
 
   info("Checking that the box model view shows the right value, which is the" +
     "modified value from step one because of the bfcache");
   let paddingElt = boxmodel.document.querySelector(
     ".boxmodel-padding.boxmodel-top > span");
   is(paddingElt.textContent, "20");
 
   info("Listening for box model view changes and modifying the padding");
   let onUpdated = waitForUpdate(inspector);
-  yield setStyle(testActor, "p", "padding", "100px");
-  yield onUpdated;
+  await setStyle(testActor, "p", "padding", "100px");
+  await onUpdated;
   ok(true, "Box model view got updated");
 
   info("Checking that the box model view shows the right value after update");
   is(paddingElt.textContent, "100");
 }
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_update-after-reload.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_update-after-reload.js
@@ -1,41 +1,41 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that the box model view continues to work after the page is reloaded
 
-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_boxmodel_iframe1.html");
-  let {inspector, boxmodel, testActor} = yield openLayoutView();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_boxmodel_iframe1.html");
+  let {inspector, boxmodel, testActor} = await openLayoutView();
 
   info("Test that the box model view works on the first page");
-  yield assertBoxModelView(inspector, boxmodel, testActor);
+  await assertBoxModelView(inspector, boxmodel, testActor);
 
   info("Reload the page");
   let onMarkupLoaded = waitForMarkupLoaded(inspector);
-  yield testActor.reload();
-  yield onMarkupLoaded;
+  await testActor.reload();
+  await onMarkupLoaded;
 
   info("Test that the box model view works on the reloaded page");
-  yield assertBoxModelView(inspector, boxmodel, testActor);
+  await assertBoxModelView(inspector, boxmodel, testActor);
 });
 
-function* assertBoxModelView(inspector, boxmodel, testActor) {
-  yield selectNode("p", inspector);
+async function assertBoxModelView(inspector, boxmodel, testActor) {
+  await selectNode("p", inspector);
 
   info("Checking that the box model view shows the right value");
   let paddingElt = boxmodel.document.querySelector(
     ".boxmodel-padding.boxmodel-top > span");
   is(paddingElt.textContent, "50");
 
   info("Listening for box model view changes and modifying the padding");
   let onUpdated = waitForUpdate(inspector);
-  yield setStyle(testActor, "p", "padding", "20px");
-  yield onUpdated;
+  await setStyle(testActor, "p", "padding", "20px");
+  await onUpdated;
   ok(true, "Box model view got updated");
 
   info("Checking that the box model view shows the right value after update");
   is(paddingElt.textContent, "20");
 }
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_update-in-iframes.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_update-in-iframes.js
@@ -2,101 +2,101 @@
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that the box model view for elements within iframes also updates when they
 // change
 
-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_boxmodel_iframe1.html");
-  let {inspector, boxmodel, testActor} = yield openLayoutView();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_boxmodel_iframe1.html");
+  let {inspector, boxmodel, testActor} = await openLayoutView();
 
-  yield testResizingInIframe(inspector, boxmodel, testActor);
-  yield testReflowsAfterIframeDeletion(inspector, boxmodel, testActor);
+  await testResizingInIframe(inspector, boxmodel, testActor);
+  await testReflowsAfterIframeDeletion(inspector, boxmodel, testActor);
 });
 
-function* testResizingInIframe(inspector, boxmodel, testActor) {
+async function testResizingInIframe(inspector, boxmodel, testActor) {
   info("Test that resizing an element in an iframe updates its box model");
 
   info("Selecting the nested test node");
-  yield selectNodeInIframe2("div", inspector);
+  await selectNodeInIframe2("div", inspector);
 
   info("Checking that the box model view shows the right value");
   let sizeElt = boxmodel.document.querySelector(".boxmodel-size > span");
   is(sizeElt.textContent, "400\u00D7200");
 
   info("Listening for box model view changes and modifying its size");
   let onUpdated = waitForUpdate(inspector);
-  yield setStyleInIframe2(testActor, "div", "width", "200px");
-  yield onUpdated;
+  await setStyleInIframe2(testActor, "div", "width", "200px");
+  await onUpdated;
   ok(true, "Box model view got updated");
 
   info("Checking that the box model view shows the right value after update");
   is(sizeElt.textContent, "200\u00D7200");
 }
 
-function* testReflowsAfterIframeDeletion(inspector, boxmodel, testActor) {
+async function testReflowsAfterIframeDeletion(inspector, boxmodel, testActor) {
   info("Test reflows are still sent to the box model view after deleting an " +
        "iframe");
 
   info("Deleting the iframe2");
   let onInspectorUpdated = inspector.once("inspector-updated");
-  yield removeIframe2(testActor);
-  yield onInspectorUpdated;
+  await removeIframe2(testActor);
+  await onInspectorUpdated;
 
   info("Selecting the test node in iframe1");
-  yield selectNodeInIframe1("p", inspector);
+  await selectNodeInIframe1("p", inspector);
 
   info("Checking that the box model view shows the right value");
   let sizeElt = boxmodel.document.querySelector(".boxmodel-size > span");
   is(sizeElt.textContent, "100\u00D7100");
 
   info("Listening for box model view changes and modifying its size");
   let onUpdated = waitForUpdate(inspector);
-  yield setStyleInIframe1(testActor, "p", "width", "200px");
-  yield onUpdated;
+  await setStyleInIframe1(testActor, "p", "width", "200px");
+  await onUpdated;
   ok(true, "Box model view got updated");
 
   info("Checking that the box model view shows the right value after update");
   is(sizeElt.textContent, "200\u00D7100");
 }
 
-function* selectNodeInIframe1(selector, inspector) {
-  let iframe1 = yield getNodeFront("iframe", inspector);
-  let node = yield getNodeFrontInFrame(selector, iframe1, inspector);
-  yield selectNode(node, inspector);
+async function selectNodeInIframe1(selector, inspector) {
+  let iframe1 = await getNodeFront("iframe", inspector);
+  let node = await getNodeFrontInFrame(selector, iframe1, inspector);
+  await selectNode(node, inspector);
 }
 
-function* selectNodeInIframe2(selector, inspector) {
-  let iframe1 = yield getNodeFront("iframe", inspector);
-  let iframe2 = yield getNodeFrontInFrame("iframe", iframe1, inspector);
-  let node = yield getNodeFrontInFrame(selector, iframe2, inspector);
-  yield selectNode(node, inspector);
+async function selectNodeInIframe2(selector, inspector) {
+  let iframe1 = await getNodeFront("iframe", inspector);
+  let iframe2 = await getNodeFrontInFrame("iframe", iframe1, inspector);
+  let node = await getNodeFrontInFrame(selector, iframe2, inspector);
+  await selectNode(node, inspector);
 }
 
-function* setStyleInIframe1(testActor, selector, propertyName, value) {
-  yield testActor.eval(`
+async function setStyleInIframe1(testActor, selector, propertyName, value) {
+  await testActor.eval(`
     content.document.querySelector("iframe")
            .contentDocument.querySelector("${selector}")
            .style.${propertyName} = "${value}";
   `);
 }
 
-function* setStyleInIframe2(testActor, selector, propertyName, value) {
-  yield testActor.eval(`
+async function setStyleInIframe2(testActor, selector, propertyName, value) {
+  await testActor.eval(`
     content.document.querySelector("iframe")
            .contentDocument
            .querySelector("iframe")
            .contentDocument.querySelector("${selector}")
            .style.${propertyName} = "${value}";
   `);
 }
 
-function* removeIframe2(testActor) {
-  yield testActor.eval(`
+async function removeIframe2(testActor) {
+  await testActor.eval(`
     content.document.querySelector("iframe")
            .contentDocument
            .querySelector("iframe")
            .remove();
   `);
 }
--- a/devtools/client/inspector/boxmodel/test/head.js
+++ b/devtools/client/inspector/boxmodel/test/head.js
@@ -22,23 +22,23 @@ registerCleanupFunction(() => {
  *
  * @param  {String|NodeFront} selectorOrNodeFront
  *         The selector for the node to be set, or the nodeFront.
  * @param  {InspectorPanel} inspector
  *         The instance of InspectorPanel currently loaded in the toolbox.
  * @return {Promise} a promise that resolves when the inspector is updated with the new
  *         node.
  */
-function* selectAndHighlightNode(selectorOrNodeFront, inspector) {
+async function selectAndHighlightNode(selectorOrNodeFront, inspector) {
   info("Highlighting and selecting the node " + selectorOrNodeFront);
 
-  let nodeFront = yield getNodeFront(selectorOrNodeFront, inspector);
+  let nodeFront = await getNodeFront(selectorOrNodeFront, inspector);
   let updated = inspector.toolbox.once("highlighter-ready");
   inspector.selection.setNodeFront(nodeFront, "test-highlight");
-  yield updated;
+  await updated;
 }
 
 /**
  * Is the given node visible in the page (rendered in the frame tree).
  * @param {DOMNode}
  * @return {Boolean}
  */
 function isNodeVisible(node) {
@@ -95,13 +95,13 @@ function setStyle(testActor, selector, p
 }
 
 /**
  * The box model doesn't participate in the inspector's update mechanism, so simply
  * calling the default selectNode isn't enough to guarantee that the box model view has
  * finished updating. We also need to wait for the "boxmodel-view-updated" event.
  */
 var _selectNode = selectNode;
-selectNode = function* (node, inspector, reason) {
+selectNode = async function(node, inspector, reason) {
   let onUpdate = waitForUpdate(inspector, true);
-  yield _selectNode(node, inspector, reason);
-  yield onUpdate;
+  await _selectNode(node, inspector, reason);
+  await onUpdate;
 };
--- a/devtools/client/inspector/boxmodel/utils/editing-session.js
+++ b/devtools/client/inspector/boxmodel/utils/editing-session.js
@@ -1,15 +1,14 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
-const { Task } = require("devtools/shared/task");
 const { getCssProperties } = require("devtools/shared/fronts/css-properties");
 
 /**
  * An instance of EditingSession tracks changes that have been made during the
  * modification of box model values. All of these changes can be reverted by
  * calling revert.
  *
  * @param  {InspectorPanel} inspector
@@ -102,17 +101,17 @@ EditingSession.prototype = {
    * Sets a number of properties on the node.
    *
    * @param  {Array} properties
    *         An array of properties, each is an object with name and
    *         value properties. If the value is "" then the property
    *         is removed.
    * @return {Promise} Resolves when the modifications are complete.
    */
-  setProperties: Task.async(function* (properties) {
+  async setProperties(properties) {
     for (let property of properties) {
       // Get a RuleModificationList or RuleRewriter helper object from the
       // StyleRuleActor to make changes to CSS properties.
       // Note that RuleRewriter doesn't support modifying several properties at
       // once, so we do this in a sequence here.
       let modifications = this._rules[0].startModifyingProperties(
         this._cssProperties);
 
@@ -130,26 +129,26 @@ EditingSession.prototype = {
       }
 
       if (property.value == "") {
         modifications.removeProperty(index, property.name);
       } else {
         modifications.setProperty(index, property.name, property.value, "");
       }
 
-      yield modifications.apply();
+      await modifications.apply();
     }
-  }),
+  },
 
   /**
    * Reverts all of the property changes made by this instance.
    *
    * @return {Promise} Resolves when all properties have been reverted.
    */
-  revert: Task.async(function* () {
+  async revert() {
     // Revert each property that we modified previously, one by one. See
     // setProperties for information about why.
     for (let [property, value] of this._modifications) {
       let modifications = this._rules[0].startModifyingProperties(
         this._cssProperties);
 
       // Find the index of the property to be reverted.
       let index = this.getPropertyIndex(property);
@@ -165,19 +164,19 @@ EditingSession.prototype = {
         // If the property doesn't exist anymore, no need to remove it. It had
         // not been added after all.
         if (index === -1) {
           continue;
         }
         modifications.removeProperty(index, property);
       }
 
-      yield modifications.apply();
+      await modifications.apply();
     }
-  }),
+  },
 
   destroy: function() {
     this._doc = null;
     this._rules = null;
     this._modifications.clear();
   }
 };
 
--- a/devtools/client/inspector/computed/test/browser_computed_browser-styles.js
+++ b/devtools/client/inspector/computed/test/browser_computed_browser-styles.js
@@ -10,33 +10,33 @@ const TEST_URI = `
   <style type="text/css">
     .matches {
       color: #F00;
     }
   </style>
   <span id="matches" class="matches">Some styled text</span>
 `;
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let {inspector, view} = yield openComputedView();
-  yield selectNode("#matches", inspector);
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = await openComputedView();
+  await selectNode("#matches", inspector);
 
   info("Checking the default styles");
   is(isPropertyVisible("color", view), true,
     "span #matches color property is visible");
   is(isPropertyVisible("background-color", view), false,
     "span #matches background-color property is hidden");
 
   info("Toggling the browser styles");
   let doc = view.styleDocument;
   let checkbox = doc.querySelector(".includebrowserstyles");
   let onRefreshed = inspector.once("computed-view-refreshed");
   checkbox.click();
-  yield onRefreshed;
+  await onRefreshed;
 
   info("Checking the browser styles");
   is(isPropertyVisible("color", view), true,
     "span color property is visible");
   is(isPropertyVisible("background-color", view), true,
     "span background-color property is visible");
 });
 
--- a/devtools/client/inspector/computed/test/browser_computed_getNodeInfo.js
+++ b/devtools/client/inspector/computed/test/browser_computed_getNodeInfo.js
@@ -45,134 +45,134 @@ const TEST_URI = `
 // - desc {String} will be logged for information
 // - getHoveredNode {Generator Function} received the computed-view instance as
 //   argument and must return the node to be tested
 // - assertNodeInfo {Function} should check the validity of the nodeInfo
 //   argument it receives
 const TEST_DATA = [
   {
     desc: "Testing a null node",
-    getHoveredNode: function* () {
+    getHoveredNode: function() {
       return null;
     },
     assertNodeInfo: function(nodeInfo) {
       is(nodeInfo, null);
     }
   },
   {
     desc: "Testing a useless node",
-    getHoveredNode: function* (view) {
+    getHoveredNode: function(view) {
       return view.element;
     },
     assertNodeInfo: function(nodeInfo) {
       is(nodeInfo, null);
     }
   },
   {
     desc: "Testing a property name",
-    getHoveredNode: function* (view) {
+    getHoveredNode: function(view) {
       return getComputedViewProperty(view, "color").nameSpan;
     },
     assertNodeInfo: function(nodeInfo) {
       is(nodeInfo.type, VIEW_NODE_PROPERTY_TYPE);
       ok("property" in nodeInfo.value);
       ok("value" in nodeInfo.value);
       is(nodeInfo.value.property, "color");
       is(nodeInfo.value.value, "rgb(255, 0, 0)");
     }
   },
   {
     desc: "Testing a property value",
-    getHoveredNode: function* (view) {
+    getHoveredNode: function(view) {
       return getComputedViewProperty(view, "color").valueSpan;
     },
     assertNodeInfo: function(nodeInfo) {
       is(nodeInfo.type, VIEW_NODE_VALUE_TYPE);
       ok("property" in nodeInfo.value);
       ok("value" in nodeInfo.value);
       is(nodeInfo.value.property, "color");
       is(nodeInfo.value.value, "rgb(255, 0, 0)");
     }
   },
   {
     desc: "Testing an image url",
-    getHoveredNode: function* (view) {
+    getHoveredNode: function(view) {
       let {valueSpan} = getComputedViewProperty(view, "background-image");
       return valueSpan.querySelector(".theme-link");
     },
     assertNodeInfo: function(nodeInfo) {
       is(nodeInfo.type, VIEW_NODE_IMAGE_URL_TYPE);
       ok("property" in nodeInfo.value);
       ok("value" in nodeInfo.value);
       is(nodeInfo.value.property, "background-image");
       is(nodeInfo.value.value,
          "url(\"chrome://global/skin/icons/warning-64.png\")");
       is(nodeInfo.value.url, "chrome://global/skin/icons/warning-64.png");
     }
   },
   {
     desc: "Testing a matched rule selector (bestmatch)",
-    getHoveredNode: function* (view) {
-      let el = yield getComputedViewMatchedRules(view, "background-color");
+    getHoveredNode: async function(view) {
+      let el = await getComputedViewMatchedRules(view, "background-color");
       return el.querySelector(".bestmatch");
     },
     assertNodeInfo: function(nodeInfo) {
       is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
       is(nodeInfo.value, "div div");
     }
   },
   {
     desc: "Testing a matched rule selector (matched)",
-    getHoveredNode: function* (view) {
-      let el = yield getComputedViewMatchedRules(view, "background-color");
+    getHoveredNode: async function(view) {
+      let el = await getComputedViewMatchedRules(view, "background-color");
       return el.querySelector(".matched");
     },
     assertNodeInfo: function(nodeInfo) {
       is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
       is(nodeInfo.value, "div");
     }
   },
   {
     desc: "Testing a matched rule selector (parentmatch)",
-    getHoveredNode: function* (view) {
-      let el = yield getComputedViewMatchedRules(view, "color");
+    getHoveredNode: async function(view) {
+      let el = await getComputedViewMatchedRules(view, "color");
       return el.querySelector(".parentmatch");
     },
     assertNodeInfo: function(nodeInfo) {
       is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
       is(nodeInfo.value, "body");
     }
   },
   {
     desc: "Testing a matched rule value",
-    getHoveredNode: function* (view) {
-      let el = yield getComputedViewMatchedRules(view, "color");
+    getHoveredNode: async function(view) {
+      let el = await getComputedViewMatchedRules(view, "color");
       return el.querySelector(".computed-other-property-value");
     },
     assertNodeInfo: function(nodeInfo) {
       is(nodeInfo.type, VIEW_NODE_VALUE_TYPE);
       is(nodeInfo.value.property, "color");
       is(nodeInfo.value.value, "red");
     }
   },
   {
     desc: "Testing a matched rule stylesheet link",
-    getHoveredNode: function* (view) {
-      let el = yield getComputedViewMatchedRules(view, "color");
+    getHoveredNode: async function(view) {
+      let el = await getComputedViewMatchedRules(view, "color");
       return el.querySelector(".rule-link .theme-link");
     },
     assertNodeInfo: function(nodeInfo) {
       is(nodeInfo, null);
     }
   }
 ];
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let {inspector, view} = yield openComputedView();
-  yield selectNode("#testElement", inspector);
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = await openComputedView();
+  await selectNode("#testElement", inspector);
 
   for (let {desc, getHoveredNode, assertNodeInfo} of TEST_DATA) {
     info(desc);
-    let nodeInfo = view.getNodeInfo(yield getHoveredNode(view));
+    let nodeInfo = view.getNodeInfo(await getHoveredNode(view));
     assertNodeInfo(nodeInfo);
   }
 });
--- a/devtools/client/inspector/computed/test/browser_computed_keybindings_01.js
+++ b/devtools/client/inspector/computed/test/browser_computed_keybindings_01.js
@@ -10,66 +10,66 @@ const TEST_URI = `
   <style type="text/css">
     .matches {
       color: #F00;
     }
   </style>
   <span class="matches">Some styled text</span>
 `;
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let {inspector, view} = yield openComputedView();
-  yield selectNode(".matches", inspector);
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = await openComputedView();
+  await selectNode(".matches", inspector);
 
   let propView = getFirstVisiblePropertyView(view);
   let rulesTable = propView.matchedSelectorsContainer;
   let matchedExpander = propView.element;
 
   info("Focusing the property");
   matchedExpander.scrollIntoView();
   let onMatchedExpanderFocus = once(matchedExpander, "focus", true);
   EventUtils.synthesizeMouseAtCenter(matchedExpander, {}, view.styleWindow);
-  yield onMatchedExpanderFocus;
+  await onMatchedExpanderFocus;
 
-  yield checkToggleKeyBinding(view.styleWindow, "VK_SPACE", rulesTable,
+  await checkToggleKeyBinding(view.styleWindow, "VK_SPACE", rulesTable,
                               inspector);
-  yield checkToggleKeyBinding(view.styleWindow, "VK_RETURN", rulesTable,
+  await checkToggleKeyBinding(view.styleWindow, "VK_RETURN", rulesTable,
                               inspector);
-  yield checkHelpLinkKeybinding(view);
+  await checkHelpLinkKeybinding(view);
 });
 
 function getFirstVisiblePropertyView(view) {
   let propView = null;
   view.propertyViews.some(p => {
     if (p.visible) {
       propView = p;
       return true;
     }
     return false;
   });
 
   return propView;
 }
 
-function* checkToggleKeyBinding(win, key, rulesTable, inspector) {
+async function checkToggleKeyBinding(win, key, rulesTable, inspector) {
   info("Pressing " + key + " key a couple of times to check that the " +
     "property gets expanded/collapsed");
 
   let onExpand = inspector.once("computed-view-property-expanded");
   let onCollapse = inspector.once("computed-view-property-collapsed");
 
   info("Expanding the property");
   EventUtils.synthesizeKey(key, {}, win);
-  yield onExpand;
+  await onExpand;
   isnot(rulesTable.innerHTML, "", "The property has been expanded");
 
   info("Collapsing the property");
   EventUtils.synthesizeKey(key, {}, win);
-  yield onCollapse;
+  await onCollapse;
   is(rulesTable.innerHTML, "", "The property has been collapsed");
 }
 
 function checkHelpLinkKeybinding(view) {
   info("Check that MDN link is opened on \"F1\"");
   let propView = getFirstVisiblePropertyView(view);
   return new Promise(resolve => {
     propView.mdnLinkClick = function(event) {
--- a/devtools/client/inspector/computed/test/browser_computed_keybindings_02.js
+++ b/devtools/client/inspector/computed/test/browser_computed_keybindings_02.js
@@ -27,40 +27,40 @@ const TEST_URI = `
     you should go do something else instead. Maybe read a book. Or better
     yet, write some test-cases for another bit of code.
     <span style="font-style: italic">some text</span></p>
     <p id="closing">more text</p>
     <p>even more text</p>
   </div>
 `;
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let {inspector, view} = yield openComputedView();
-  yield selectNode("span", inspector);
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = await openComputedView();
+  await selectNode("span", inspector);
 
   info("Selecting the first computed style in the list");
   let firstStyle = view.styleDocument.querySelector(".computed-property-view");
   ok(firstStyle, "First computed style found in panel");
   firstStyle.focus();
 
   info("Tab to select the 2nd style and press return");
   let onExpanded = inspector.once("computed-view-property-expanded");
   EventUtils.synthesizeKey("KEY_Tab");
   EventUtils.synthesizeKey("KEY_Enter");
-  yield onExpanded;
+  await onExpanded;
 
   info("Verify the 2nd style has been expanded");
   let secondStyleSelectors = view.styleDocument.querySelectorAll(
     ".computed-property-content .matchedselectors")[1];
   ok(secondStyleSelectors.childNodes.length > 0, "Matched selectors expanded");
 
   info("Tab back up and test the same thing, with space");
   onExpanded = inspector.once("computed-view-property-expanded");
   EventUtils.synthesizeKey("KEY_Tab", {shiftKey: true});
   EventUtils.synthesizeKey(" ");
-  yield onExpanded;
+  await onExpanded;
 
   info("Verify the 1st style has been expanded too");
   let firstStyleSelectors = view.styleDocument.querySelectorAll(
     ".computed-property-content .matchedselectors")[0];
   ok(firstStyleSelectors.childNodes.length > 0, "Matched selectors expanded");
 });
--- a/devtools/client/inspector/computed/test/browser_computed_matched-selectors-toggle.js
+++ b/devtools/client/inspector/computed/test/browser_computed_matched-selectors-toggle.js
@@ -10,95 +10,95 @@
 const TEST_URI = `
   <style type="text/css"> ,
     html { color: #000000; font-size: 15pt; }
     h1 { color: red; }
   </style>
   <h1>Some header text</h1>
 `;
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let {inspector, view} = yield openComputedView();
-  yield selectNode("h1", inspector);
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = await openComputedView();
+  await selectNode("h1", inspector);
 
-  yield testExpandOnTwistyClick(view, inspector);
-  yield testCollapseOnTwistyClick(view, inspector);
-  yield testExpandOnDblClick(view, inspector);
-  yield testCollapseOnDblClick(view, inspector);
+  await testExpandOnTwistyClick(view, inspector);
+  await testCollapseOnTwistyClick(view, inspector);
+  await testExpandOnDblClick(view, inspector);
+  await testCollapseOnDblClick(view, inspector);
 });
 
-function* testExpandOnTwistyClick({styleDocument, styleWindow}, inspector) {
+async function testExpandOnTwistyClick({styleDocument, styleWindow}, inspector) {
   info("Testing that a property expands on twisty click");
 
   info("Getting twisty element");
   let twisty = styleDocument.querySelector(".computed-expandable");
   ok(twisty, "Twisty found");
 
   let onExpand = inspector.once("computed-view-property-expanded");
   info("Clicking on the twisty element");
   twisty.click();
 
-  yield onExpand;
+  await onExpand;
 
   // Expanded means the matchedselectors div is not empty
   let div = styleDocument.querySelector(".computed-property-content .matchedselectors");
   ok(div.childNodes.length > 0,
     "Matched selectors are expanded on twisty click");
 }
 
-function* testCollapseOnTwistyClick({styleDocument, styleWindow}, inspector) {
+async function testCollapseOnTwistyClick({styleDocument, styleWindow}, inspector) {
   info("Testing that a property collapses on twisty click");
 
   info("Getting twisty element");
   let twisty = styleDocument.querySelector(".computed-expandable");
   ok(twisty, "Twisty found");
 
   let onCollapse = inspector.once("computed-view-property-collapsed");
   info("Clicking on the twisty element");
   twisty.click();
 
-  yield onCollapse;
+  await onCollapse;
 
   // Collapsed means the matchedselectors div is empty
   let div = styleDocument.querySelector(".computed-property-content .matchedselectors");
   ok(div.childNodes.length === 0,
     "Matched selectors are collapsed on twisty click");
 }
 
-function* testExpandOnDblClick({styleDocument, styleWindow}, inspector) {
+async function testExpandOnDblClick({styleDocument, styleWindow}, inspector) {
   info("Testing that a property expands on container dbl-click");
 
   info("Getting computed property container");
   let container = styleDocument.querySelector(".computed-property-view");
   ok(container, "Container found");
 
   container.scrollIntoView();
 
   let onExpand = inspector.once("computed-view-property-expanded");
   info("Dbl-clicking on the container");
   EventUtils.synthesizeMouseAtCenter(container, {clickCount: 2}, styleWindow);
 
-  yield onExpand;
+  await onExpand;
 
   // Expanded means the matchedselectors div is not empty
   let div = styleDocument.querySelector(".computed-property-content .matchedselectors");
   ok(div.childNodes.length > 0, "Matched selectors are expanded on dblclick");
 }
 
-function* testCollapseOnDblClick({styleDocument, styleWindow}, inspector) {
+async function testCollapseOnDblClick({styleDocument, styleWindow}, inspector) {
   info("Testing that a property collapses on container dbl-click");
 
   info("Getting computed property container");
   let container = styleDocument.querySelector(".computed-property-view");
   ok(container, "Container found");
 
   let onCollapse = inspector.once("computed-view-property-collapsed");
   info("Dbl-clicking on the container");
   EventUtils.synthesizeMouseAtCenter(container, {clickCount: 2}, styleWindow);
 
-  yield onCollapse;
+  await onCollapse;
 
   // Collapsed means the matchedselectors div is empty
   let div = styleDocument.querySelector(".computed-property-content .matchedselectors");
   ok(div.childNodes.length === 0,
     "Matched selectors are collapsed on dblclick");
 }
--- a/devtools/client/inspector/computed/test/browser_computed_matched-selectors_01.js
+++ b/devtools/client/inspector/computed/test/browser_computed_matched-selectors_01.js
@@ -5,36 +5,36 @@
 "use strict";
 
 // Checking selector counts, matched rules and titles in the computed-view.
 
 const {PropertyView} =
       require("devtools/client/inspector/computed/computed");
 const TEST_URI = URL_ROOT + "doc_matched_selectors.html";
 
-add_task(function* () {
-  yield addTab(TEST_URI);
-  let {inspector, view} = yield openComputedView();
+add_task(async function() {
+  await addTab(TEST_URI);
+  let {inspector, view} = await openComputedView();
 
-  yield selectNode("#test", inspector);
-  yield testMatchedSelectors(view, inspector);
+  await selectNode("#test", inspector);
+  await testMatchedSelectors(view, inspector);
 });
 
-function* testMatchedSelectors(view, inspector) {
+async function testMatchedSelectors(view, inspector) {
   info("checking selector counts, matched rules and titles");
 
-  let nodeFront = yield getNodeFront("#test", inspector);
+  let nodeFront = await getNodeFront("#test", inspector);
   is(nodeFront, view._viewedElement,
     "style inspector node matches the selected node");
 
   let propertyView = new PropertyView(view, "color");
   propertyView.buildMain();
   propertyView.buildSelectorContainer();
   propertyView.matchedExpanded = true;
 
-  yield propertyView.refreshMatchedSelectors();
+  await propertyView.refreshMatchedSelectors();
 
   let numMatchedSelectors = propertyView.matchedSelectors.length;
   is(numMatchedSelectors, 6,
     "CssLogic returns the correct number of matched selectors for div");
   is(propertyView.hasMatchedSelectors, true,
     "hasMatchedSelectors returns true");
 }
--- a/devtools/client/inspector/computed/test/browser_computed_matched-selectors_02.js
+++ b/devtools/client/inspector/computed/test/browser_computed_matched-selectors_02.js
@@ -1,29 +1,29 @@
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Tests for matched selector texts in the computed view.
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8,<div style='color:blue;'></div>");
-  let {inspector, view} = yield openComputedView();
-  yield selectNode("div", inspector);
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8,<div style='color:blue;'></div>");
+  let {inspector, view} = await openComputedView();
+  await selectNode("div", inspector);
 
   info("Checking the color property view");
   let propertyView = getPropertyView(view, "color");
   ok(propertyView, "found PropertyView for color");
   is(propertyView.hasMatchedSelectors, true, "hasMatchedSelectors is true");
 
   info("Expanding the matched selectors");
   propertyView.matchedExpanded = true;
-  yield propertyView.refreshMatchedSelectors();
+  await propertyView.refreshMatchedSelectors();
 
   let span = propertyView.matchedSelectorsContainer
     .querySelector("span.rule-text");
   ok(span, "Found the first table row");
 
   let selector = propertyView.matchedSelectorViews[0];
   ok(selector, "Found the first matched selector view");
 });
--- a/devtools/client/inspector/computed/test/browser_computed_media-queries.js
+++ b/devtools/client/inspector/computed/test/browser_computed_media-queries.js
@@ -6,21 +6,21 @@
 
 // Tests that we correctly display appropriate media query titles in the
 // property view.
 
 const TEST_URI = URL_ROOT + "doc_media_queries.html";
 
 var {PropertyView} = require("devtools/client/inspector/computed/computed");
 
-add_task(function* () {
-  yield addTab(TEST_URI);
-  let {inspector, view} = yield openComputedView();
-  yield selectNode("div", inspector);
-  yield checkPropertyView(view);
+add_task(async function() {
+  await addTab(TEST_URI);
+  let {inspector, view} = await openComputedView();
+  await selectNode("div", inspector);
+  await checkPropertyView(view);
 });
 
 function checkPropertyView(view) {
   let propertyView = new PropertyView(view, "width");
   propertyView.buildMain();
   propertyView.buildSelectorContainer();
   propertyView.matchedExpanded = true;
 
--- a/devtools/client/inspector/computed/test/browser_computed_no-results-placeholder.js
+++ b/devtools/client/inspector/computed/test/browser_computed_no-results-placeholder.js
@@ -10,59 +10,59 @@ const TEST_URI = `
   <style type="text/css">
     .matches {
       color: #F00;
     }
   </style>
   <span id="matches" class="matches">Some styled text</span>
 `;
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let {inspector, view} = yield openComputedView();
-  yield selectNode("#matches", inspector);
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = await openComputedView();
+  await selectNode("#matches", inspector);
 
-  yield enterInvalidFilter(inspector, view);
+  await enterInvalidFilter(inspector, view);
   checkNoResultsPlaceholderShown(view);
 
-  yield clearFilterText(inspector, view);
+  await clearFilterText(inspector, view);
   checkNoResultsPlaceholderHidden(view);
 });
 
-function* enterInvalidFilter(inspector, computedView) {
+async function enterInvalidFilter(inspector, computedView) {
   let searchbar = computedView.searchField;
   let searchTerm = "xxxxx";
 
   info("setting filter text to \"" + searchTerm + "\"");
 
   let onRefreshed = inspector.once("computed-view-refreshed");
   searchbar.focus();
   synthesizeKeys(searchTerm, computedView.styleWindow);
-  yield onRefreshed;
+  await onRefreshed;
 }
 
 function checkNoResultsPlaceholderShown(computedView) {
   info("Checking that the no results placeholder is shown");
 
   let placeholder = computedView.noResults;
   let win = computedView.styleWindow;
   let display = win.getComputedStyle(placeholder).display;
   is(display, "block", "placeholder is visible");
 }
 
-function* clearFilterText(inspector, computedView) {
+async function clearFilterText(inspector, computedView) {
   info("Clearing the filter text");
 
   let searchbar = computedView.searchField;
 
   let onRefreshed = inspector.once("computed-view-refreshed");
   searchbar.focus();
   searchbar.value = "";
   EventUtils.synthesizeKey("c", {}, computedView.styleWindow);
-  yield onRefreshed;
+  await onRefreshed;
 }
 
 function checkNoResultsPlaceholderHidden(computedView) {
   info("Checking that the no results placeholder is hidden");
 
   let placeholder = computedView.noResults;
   let win = computedView.styleWindow;
   let display = win.getComputedStyle(placeholder).display;
--- a/devtools/client/inspector/computed/test/browser_computed_original-source-link.js
+++ b/devtools/client/inspector/computed/test/browser_computed_original-source-link.js
@@ -7,61 +7,61 @@
 // Tests that the computed view shows the original source link when source maps
 // are enabled.
 
 const TESTCASE_URI = URL_ROOT_SSL + "doc_sourcemaps.html";
 const PREF = "devtools.source-map.client-service.enabled";
 const SCSS_LOC = "doc_sourcemaps.scss:4";
 const CSS_LOC = "doc_sourcemaps.css:1";
 
-add_task(function* () {
+add_task(async function() {
   info("Turning the pref " + PREF + " on");
   Services.prefs.setBoolPref(PREF, true);
 
-  yield addTab(TESTCASE_URI);
-  let {toolbox, inspector, view} = yield openComputedView();
+  await addTab(TESTCASE_URI);
+  let {toolbox, inspector, view} = await openComputedView();
   let onLinksUpdated = inspector.once("computed-view-sourcelinks-updated");
-  yield selectNode("div", inspector);
+  await selectNode("div", inspector);
 
   info("Expanding the first property");
-  yield expandComputedViewPropertyByIndex(view, 0);
+  await expandComputedViewPropertyByIndex(view, 0);
 
   info("Verifying the link text");
-  yield onLinksUpdated;
+  await onLinksUpdated;
   verifyLinkText(view, SCSS_LOC);
 
   info("Toggling the pref");
   onLinksUpdated = inspector.once("computed-view-sourcelinks-updated");
   Services.prefs.setBoolPref(PREF, false);
-  yield onLinksUpdated;
+  await onLinksUpdated;
 
   info("Verifying that the link text has changed after the pref change");
-  yield verifyLinkText(view, CSS_LOC);
+  await verifyLinkText(view, CSS_LOC);
 
   info("Toggling the pref again");
   onLinksUpdated = inspector.once("computed-view-sourcelinks-updated");
   Services.prefs.setBoolPref(PREF, true);
-  yield onLinksUpdated;
+  await onLinksUpdated;
 
   info("Testing that clicking on the link works");
-  yield testClickingLink(toolbox, view);
+  await testClickingLink(toolbox, view);
 
   info("Turning the pref " + PREF + " off");
   Services.prefs.clearUserPref(PREF);
 });
 
-function* testClickingLink(toolbox, view) {
+async function testClickingLink(toolbox, view) {
   let onEditor = waitForStyleEditor(toolbox, "doc_sourcemaps.scss");
 
   info("Clicking the computedview stylesheet link");
   let link = getComputedViewLinkByIndex(view, 0);
   link.scrollIntoView();
   link.click();
 
-  let editor = yield onEditor;
+  let editor = await onEditor;
 
   let {line} = editor.sourceEditor.getCursor();
   is(line, 3, "cursor is at correct line number in original source");
 }
 
 function verifyLinkText(view, text) {
   let link = getComputedViewLinkByIndex(view, 0);
   is(link.textContent, text,
--- a/devtools/client/inspector/computed/test/browser_computed_pseudo-element_01.js
+++ b/devtools/client/inspector/computed/test/browser_computed_pseudo-element_01.js
@@ -3,37 +3,37 @@
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Tests that pseudoelements are displayed correctly in the rule view.
 
 const TEST_URI = URL_ROOT + "doc_pseudoelement.html";
 
-add_task(function* () {
-  yield addTab(TEST_URI);
-  let {inspector, view} = yield openComputedView();
-  yield testTopLeft(inspector, view);
+add_task(async function() {
+  await addTab(TEST_URI);
+  let {inspector, view} = await openComputedView();
+  await testTopLeft(inspector, view);
 });
 
-function* testTopLeft(inspector, view) {
-  let node = yield getNodeFront("#topleft", inspector.markup);
-  yield selectNode(node, inspector);
+async function testTopLeft(inspector, view) {
+  let node = await getNodeFront("#topleft", inspector.markup);
+  await selectNode(node, inspector);
   let float = getComputedViewPropertyValue(view, "float");
   is(float, "left", "The computed view shows the correct float");
 
-  let children = yield inspector.markup.walker.children(node);
+  let children = await inspector.markup.walker.children(node);
   is(children.nodes.length, 3, "Element has correct number of children");
 
   let beforeElement = children.nodes[0];
-  yield selectNode(beforeElement, inspector);
+  await selectNode(beforeElement, inspector);
   let top = getComputedViewPropertyValue(view, "top");
   is(top, "0px", "The computed view shows the correct top");
   let left = getComputedViewPropertyValue(view, "left");
   is(left, "0px", "The computed view shows the correct left");
 
   let afterElement = children.nodes[children.nodes.length - 1];
-  yield selectNode(afterElement, inspector);
+  await selectNode(afterElement, inspector);
   top = getComputedViewPropertyValue(view, "top");
   is(top, "96px", "The computed view shows the correct top");
   left = getComputedViewPropertyValue(view, "left");
   is(left, "96px", "The computed view shows the correct left");
 }
--- a/devtools/client/inspector/computed/test/browser_computed_refresh-on-style-change_01.js
+++ b/devtools/client/inspector/computed/test/browser_computed_refresh-on-style-change_01.js
@@ -4,27 +4,27 @@
 
 "use strict";
 
 // Tests that the computed view refreshes when the current node has its style
 // changed.
 
 const TEST_URI = "<div id='testdiv' style='font-size:10px;'>Test div!</div>";
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let {inspector, view, testActor} = yield openComputedView();
-  yield selectNode("#testdiv", inspector);
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view, testActor} = await openComputedView();
+  await selectNode("#testdiv", inspector);
 
   let fontSize = getComputedViewPropertyValue(view, "font-size");
   is(fontSize, "10px", "The computed view shows the right font-size");
 
   info("Changing the node's style and waiting for the update");
   let onUpdated = inspector.once("computed-view-refreshed");
-  yield testActor.setAttribute("#testdiv", "style",
+  await testActor.setAttribute("#testdiv", "style",
                                "font-size: 15px; color: red;");
-  yield onUpdated;
+  await onUpdated;
 
   fontSize = getComputedViewPropertyValue(view, "font-size");
   is(fontSize, "15px", "The computed view shows the updated font-size");
   let color = getComputedViewPropertyValue(view, "color");
   is(color, "rgb(255, 0, 0)", "The computed view also shows the color now");
 });
--- a/devtools/client/inspector/computed/test/browser_computed_search-filter.js
+++ b/devtools/client/inspector/computed/test/browser_computed_search-filter.js
@@ -10,33 +10,33 @@ const TEST_URI = `
   <style type="text/css">
     .matches {
       color: #F00;
     }
   </style>
   <span id="matches" class="matches">Some styled text</span>
 `;
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let {inspector, view} = yield openComputedView();
-  yield selectNode("#matches", inspector);
-  yield testToggleDefaultStyles(inspector, view);
-  yield testAddTextInFilter(inspector, view);
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = await openComputedView();
+  await selectNode("#matches", inspector);
+  await testToggleDefaultStyles(inspector, view);
+  await testAddTextInFilter(inspector, view);
 });
 
-function* testToggleDefaultStyles(inspector, computedView) {
+async function testToggleDefaultStyles(inspector, computedView) {
   info("checking \"Browser styles\" checkbox");
   let checkbox = computedView.includeBrowserStylesCheckbox;
   let onRefreshed = inspector.once("computed-view-refreshed");
   checkbox.click();
-  yield onRefreshed;
+  await onRefreshed;
 }
 
-function* testAddTextInFilter(inspector, computedView) {
+async function testAddTextInFilter(inspector, computedView) {
   info("setting filter text to \"color\"");
   let searchField = computedView.searchField;
   let onRefreshed = inspector.once("computed-view-refreshed");
   let win = computedView.styleWindow;
 
   // First check to make sure that accel + F doesn't focus search if the
   // container isn't focused
   inspector.panelWin.focus();
@@ -44,17 +44,17 @@ function* testAddTextInFilter(inspector,
   isnot(inspector.panelDoc.activeElement, searchField,
         "Search field isn't focused");
 
   computedView.element.focus();
   EventUtils.synthesizeKey("f", { accelKey: true });
   is(inspector.panelDoc.activeElement, searchField, "Search field is focused");
 
   synthesizeKeys("color", win);
-  yield onRefreshed;
+  await onRefreshed;
 
   info("check that the correct properties are visible");
 
   let propertyViews = computedView.propertyViews;
   propertyViews.forEach(propView => {
     let name = propView.name;
     is(propView.visible, name.indexOf("color") > -1,
       "span " + name + " property visibility check");
--- a/devtools/client/inspector/computed/test/browser_computed_search-filter_clear.js
+++ b/devtools/client/inspector/computed/test/browser_computed_search-filter_clear.js
@@ -12,55 +12,55 @@ const TEST_URI = `
       color: #F00;
       background-color: #00F;
       border-color: #0F0;
     }
   </style>
   <span id="matches" class="matches">Some styled text</span>
 `;
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let {inspector, view} = yield openComputedView();
-  yield selectNode("#matches", inspector);
-  yield testAddTextInFilter(inspector, view);
-  yield testClearSearchFilter(inspector, view);
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = await openComputedView();
+  await selectNode("#matches", inspector);
+  await testAddTextInFilter(inspector, view);
+  await testClearSearchFilter(inspector, view);
 });
 
-function* testAddTextInFilter(inspector, computedView) {
+async function testAddTextInFilter(inspector, computedView) {
   info("Setting filter text to \"background-color\"");
 
   let win = computedView.styleWindow;
   let propertyViews = computedView.propertyViews;
   let searchField = computedView.searchField;
 
   searchField.focus();
   synthesizeKeys("background-color", win);
-  yield inspector.once("computed-view-refreshed");
+  await inspector.once("computed-view-refreshed");
 
   info("Check that the correct properties are visible");
 
   propertyViews.forEach((propView) => {
     let name = propView.name;
     is(propView.visible, name.indexOf("background-color") > -1,
       "span " + name + " property visibility check");
   });
 }
 
-function* testClearSearchFilter(inspector, computedView) {
+async function testClearSearchFilter(inspector, computedView) {
   info("Clearing the search filter");
 
   let win = computedView.styleWindow;
   let propertyViews = computedView.propertyViews;
   let searchField = computedView.searchField;
   let searchClearButton = computedView.searchClearButton;
   let onRefreshed = inspector.once("computed-view-refreshed");
 
   EventUtils.synthesizeMouseAtCenter(searchClearButton, {}, win);
-  yield onRefreshed;
+  await onRefreshed;
 
   info("Check that the correct properties are visible");
 
   ok(!searchField.value, "Search filter is cleared");
   propertyViews.forEach((propView) => {
     is(propView.visible, propView.hasMatchedSelectors,
       "span " + propView.name + " property visibility check");
   });
--- a/devtools/client/inspector/computed/test/browser_computed_search-filter_context-menu.js
+++ b/devtools/client/inspector/computed/test/browser_computed_search-filter_context-menu.js
@@ -5,20 +5,20 @@
 "use strict";
 
 // Tests computed view search filter context menu works properly.
 
 const TEST_INPUT = "h1";
 
 const TEST_URI = "<h1>test filter context menu</h1>";
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let {toolbox, inspector, view} = yield openComputedView();
-  yield selectNode("h1", inspector);
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {toolbox, inspector, view} = await openComputedView();
+  await selectNode("h1", inspector);
 
   let win = view.styleWindow;
   let searchField = view.searchField;
   let searchContextMenu = toolbox.textBoxContextMenuPopup;
   ok(searchContextMenu,
     "The search filter context menu is loaded in the computed view");
 
   let cmdUndo = searchContextMenu.querySelector("[command=cmd_undo]");
@@ -29,52 +29,52 @@ add_task(function* () {
   let cmdPaste = searchContextMenu.querySelector("[command=cmd_paste]");
 
   info("Opening context menu");
 
   emptyClipboard();
 
   let onFocus = once(searchField, "focus");
   searchField.focus();
-  yield onFocus;
+  await onFocus;
 
   let onContextMenuPopup = once(searchContextMenu, "popupshowing");
   EventUtils.synthesizeMouse(searchField, 2, 2,
     {type: "contextmenu", button: 2}, win);
-  yield onContextMenuPopup;
+  await onContextMenuPopup;
 
   is(cmdUndo.getAttribute("disabled"), "true", "cmdUndo is disabled");
   is(cmdDelete.getAttribute("disabled"), "true", "cmdDelete is disabled");
   is(cmdSelectAll.getAttribute("disabled"), "true", "cmdSelectAll is disabled");
 
   // Cut/Copy/Paste items are enabled in context menu even if there is no
   // selection. See also Bug 1303033, and 1317322
   is(cmdCut.getAttribute("disabled"), "", "cmdCut is enabled");
   is(cmdCopy.getAttribute("disabled"), "", "cmdCopy is enabled");
   is(cmdPaste.getAttribute("disabled"), "", "cmdPaste is enabled");
 
   info("Closing context menu");
   let onContextMenuHidden = once(searchContextMenu, "popuphidden");
   searchContextMenu.hidePopup();
-  yield onContextMenuHidden;
+  await onContextMenuHidden;
 
   info("Copy text in search field using the context menu");
   searchField.setUserInput(TEST_INPUT);
   searchField.select();
   EventUtils.synthesizeMouse(searchField, 2, 2,
     {type: "contextmenu", button: 2}, win);
-  yield onContextMenuPopup;
-  yield waitForClipboardPromise(() => cmdCopy.click(), TEST_INPUT);
+  await onContextMenuPopup;
+  await waitForClipboardPromise(() => cmdCopy.click(), TEST_INPUT);
   searchContextMenu.hidePopup();
-  yield onContextMenuHidden;
+  await onContextMenuHidden;
 
   info("Reopen context menu and check command properties");
   EventUtils.synthesizeMouse(searchField, 2, 2,
     {type: "contextmenu", button: 2}, win);
-  yield onContextMenuPopup;
+  await onContextMenuPopup;
 
   is(cmdUndo.getAttribute("disabled"), "", "cmdUndo is enabled");
   is(cmdDelete.getAttribute("disabled"), "", "cmdDelete is enabled");
   is(cmdSelectAll.getAttribute("disabled"), "", "cmdSelectAll is enabled");
   is(cmdCut.getAttribute("disabled"), "", "cmdCut is enabled");
   is(cmdCopy.getAttribute("disabled"), "", "cmdCopy is enabled");
   is(cmdPaste.getAttribute("disabled"), "", "cmdPaste is enabled");
 });
--- a/devtools/client/inspector/computed/test/browser_computed_search-filter_escape-keypress.js
+++ b/devtools/client/inspector/computed/test/browser_computed_search-filter_escape-keypress.js
@@ -14,60 +14,60 @@ const TEST_URI = `
   <style type="text/css">
     .matches {
       color: #F00;
     }
   </style>
   <span id="matches" class="matches">Some styled text</span>
 `;
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let {inspector, view} = yield openComputedView();
-  yield selectNode("#matches", inspector);
-  yield testAddTextInFilter(inspector, view);
-  yield testEscapeKeypress(inspector, view);
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = await openComputedView();
+  await selectNode("#matches", inspector);
+  await testAddTextInFilter(inspector, view);
+  await testEscapeKeypress(inspector, view);
 });
 
-function* testAddTextInFilter(inspector, computedView) {
+async function testAddTextInFilter(inspector, computedView) {
   info("Setting filter text to \"background-color\"");
 
   let win = computedView.styleWindow;
   let propertyViews = computedView.propertyViews;
   let searchField = computedView.searchField;
   let checkbox = computedView.includeBrowserStylesCheckbox;
 
   info("Include browser styles");
   checkbox.click();
-  yield inspector.once("computed-view-refreshed");
+  await inspector.once("computed-view-refreshed");
 
   searchField.focus();
   synthesizeKeys("background-color", win);
-  yield inspector.once("computed-view-refreshed");
+  await inspector.once("computed-view-refreshed");
 
   info("Check that the correct properties are visible");
 
   propertyViews.forEach((propView) => {
     let name = propView.name;
     is(propView.visible, name.indexOf("background-color") > -1,
       "span " + name + " property visibility check");
   });
 }
 
-function* testEscapeKeypress(inspector, computedView) {
+async function testEscapeKeypress(inspector, computedView) {
   info("Pressing the escape key on search filter");
 
   let win = computedView.styleWindow;
   let propertyViews = computedView.propertyViews;
   let searchField = computedView.searchField;
   let onRefreshed = inspector.once("computed-view-refreshed");
 
   searchField.focus();
   EventUtils.synthesizeKey("VK_ESCAPE", {}, win);
-  yield onRefreshed;
+  await onRefreshed;
 
   info("Check that the correct properties are visible");
 
   ok(!searchField.value, "Search filter is cleared");
   propertyViews.forEach((propView) => {
     let name = propView.name;
     is(propView.visible, true,
       "span " + name + " property is visible");
--- a/devtools/client/inspector/computed/test/browser_computed_search-filter_noproperties.js
+++ b/devtools/client/inspector/computed/test/browser_computed_search-filter_noproperties.js
@@ -16,46 +16,46 @@ const TEST_URI = `
     }
   </style>
   <div>
     <!-- comment node -->
     <span id="matches" class="matches">Some styled text</span>
   </div>
 `;
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let {inspector, view} = yield openComputedView();
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = await openComputedView();
   let propertyViews = view.propertyViews;
 
   info("Select the #matches node");
-  let matchesNode = yield getNodeFront("#matches", inspector);
+  let matchesNode = await getNodeFront("#matches", inspector);
   let onRefresh = inspector.once("computed-view-refreshed");
-  yield selectNode(matchesNode, inspector);
-  yield onRefresh;
+  await selectNode(matchesNode, inspector);
+  await onRefresh;
 
   ok(propertyViews.filter(p => p.visible).length > 0, "CSS properties are displayed");
   ok(view.noResults.hasAttribute("hidden"), "no-results message is hidden");
 
   info("Select a comment node");
-  let commentNode = yield inspector.walker.previousSibling(matchesNode);
-  yield selectNode(commentNode, inspector);
+  let commentNode = await inspector.walker.previousSibling(matchesNode);
+  await selectNode(commentNode, inspector);
 
   is(propertyViews.filter(p => p.visible).length, 0, "No properties displayed");
   ok(!view.noResults.hasAttribute("hidden"), "no-results message is displayed");
 
   info("Select the #matches node again");
   onRefresh = inspector.once("computed-view-refreshed");
-  yield selectNode(matchesNode, inspector);
-  yield onRefresh;
+  await selectNode(matchesNode, inspector);
+  await onRefresh;
 
   ok(propertyViews.filter(p => p.visible).length > 0, "CSS properties are displayed");
   ok(view.noResults.hasAttribute("hidden"), "no-results message is hidden");
 
   info("Filter by 'will-not-match' and check the no-results message is displayed");
   let searchField = view.searchField;
   searchField.focus();
   synthesizeKeys("will-not-match", view.styleWindow);
-  yield inspector.once("computed-view-refreshed");
+  await inspector.once("computed-view-refreshed");
 
   is(propertyViews.filter(p => p.visible).length, 0, "No properties displayed");
   ok(!view.noResults.hasAttribute("hidden"), "no-results message is displayed");
 });
--- a/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles-01.js
+++ b/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles-01.js
@@ -27,36 +27,36 @@ const TEST_URI = `
     you should go do something else instead. Maybe read a book. Or better
     yet, write some test-cases for another bit of code.
     <span style="font-style: italic">some text</span></p>
     <p id="closing">more text</p>
     <p>even more text</p>
   </div>
 `;
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let {inspector, view} = yield openComputedView();
-  yield selectNode("span", inspector);
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = await openComputedView();
+  await selectNode("span", inspector);
 
-  yield testCopySome(view);
-  yield testCopyAll(view);
+  await testCopySome(view);
+  await testCopyAll(view);
 });
 
-function* testCopySome(view) {
+async function testCopySome(view) {
   let expectedPattern = "font-family: helvetica, sans-serif;[\\r\\n]+" +
                         "font-size: 16px;[\\r\\n]+" +
                         "font-variant-caps: small-caps;[\\r\\n]*";
 
-  yield copySomeTextAndCheckClipboard(view, {
+  await copySomeTextAndCheckClipboard(view, {
     start: {prop: 1, offset: 0},
     end: {prop: 3, offset: 2}
   }, expectedPattern);
 }
 
-function* testCopyAll(view) {
+async function testCopyAll(view) {
   let expectedPattern = "color: rgb\\(255, 255, 0\\);[\\r\\n]+" +
                         "font-family: helvetica, sans-serif;[\\r\\n]+" +
                         "font-size: 16px;[\\r\\n]+" +
                         "font-variant-caps: small-caps;[\\r\\n]*";
 
-  yield copyAllAndCheckClipboard(view, expectedPattern);
+  await copyAllAndCheckClipboard(view, expectedPattern);
 }
--- a/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles-02.js
+++ b/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles-02.js
@@ -3,34 +3,34 @@
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Tests that properties can be selected and copied from the computed view.
 
 const TEST_URI = `<div style="text-align:left;width:25px;">Hello world</div>`;
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let {inspector, view} = yield openComputedView();
-  yield selectNode("div", inspector);
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = await openComputedView();
+  await selectNode("div", inspector);
 
   let expectedPattern = "text-align: left;[\\r\\n]+" +
                         "width: 25px;[\\r\\n]*";
-  yield copyAllAndCheckClipboard(view, expectedPattern);
+  await copyAllAndCheckClipboard(view, expectedPattern);
 
   info("Testing expand then select all copy");
 
   expectedPattern = "text-align: left;[\\r\\n]+" +
                     "element[\\r\\n]+" +
                     "this.style[\\r\\n]+" +
                     "left[\\r\\n]+" +
                     "width: 25px;[\\r\\n]+" +
                     "element[\\r\\n]+" +
                     "this.style[\\r\\n]+" +
                     "25px[\\r\\n]*";
 
   info("Expanding computed view properties");
-  yield expandComputedViewPropertyByIndex(view, 0);
-  yield expandComputedViewPropertyByIndex(view, 1);
+  await expandComputedViewPropertyByIndex(view, 0);
+  await expandComputedViewPropertyByIndex(view, 1);
 
-  yield copyAllAndCheckClipboard(view, expectedPattern);
+  await copyAllAndCheckClipboard(view, expectedPattern);
 });
--- a/devtools/client/inspector/computed/test/browser_computed_style-editor-link.js
+++ b/devtools/client/inspector/computed/test/browser_computed_style-editor-link.js
@@ -36,100 +36,100 @@ const DOCUMENT_URL = "data:text/html;cha
    yet, write some test-cases for another bit of code.
    <span style="font-style: italic">some text</span></p>
    <p id="closing">more text</p>
    <p>even more text</p>
    </div>
    </body>
    </html>`);
 
-add_task(function* () {
-  yield addTab(DOCUMENT_URL);
-  let {toolbox, inspector, view, testActor} = yield openComputedView();
-  yield selectNode("span", inspector);
+add_task(async function() {
+  await addTab(DOCUMENT_URL);
+  let {toolbox, inspector, view, testActor} = await openComputedView();
+  await selectNode("span", inspector);
 
-  yield testInlineStyle(view);
-  yield testFirstInlineStyleSheet(view, toolbox, testActor);
-  yield testSecondInlineStyleSheet(view, toolbox, testActor);
-  yield testExternalStyleSheet(view, toolbox, testActor);
+  await testInlineStyle(view);
+  await testFirstInlineStyleSheet(view, toolbox, testActor);
+  await testSecondInlineStyleSheet(view, toolbox, testActor);
+  await testExternalStyleSheet(view, toolbox, testActor);
 });
 
-function* testInlineStyle(view) {
+async function testInlineStyle(view) {
   info("Testing inline style");
 
-  yield expandComputedViewPropertyByIndex(view, 0);
+  await expandComputedViewPropertyByIndex(view, 0);
 
   let onTab = waitForTab();
   info("Clicking on the first rule-link in the computed-view");
   clickLinkByIndex(view, 0);
 
-  let tab = yield onTab;
+  let tab = await onTab;
 
   let tabURI = tab.linkedBrowser.documentURI.spec;
   ok(tabURI.startsWith("view-source:"), "View source tab is open");
   info("Closing tab");
   gBrowser.removeTab(tab);
 }
 
-function* testFirstInlineStyleSheet(view, toolbox, testActor) {
+async function testFirstInlineStyleSheet(view, toolbox, testActor) {
   info("Testing inline stylesheet");
 
   info("Listening for toolbox switch to the styleeditor");
   let onSwitch = waitForStyleEditor(toolbox);
 
   info("Clicking an inline stylesheet");
   clickLinkByIndex(view, 2);
-  let editor = yield onSwitch;
+  let editor = await onSwitch;
 
   ok(true, "Switched to the style-editor panel in the toolbox");
 
-  yield validateStyleEditorSheet(editor, 0, testActor);
+  await validateStyleEditorSheet(editor, 0, testActor);
 }
 
-function* testSecondInlineStyleSheet(view, toolbox, testActor) {
+async function testSecondInlineStyleSheet(view, toolbox, testActor) {
   info("Testing second inline stylesheet");
 
   info("Waiting for the stylesheet editor to be selected");
   let panel = toolbox.getCurrentPanel();
   let onSelected = panel.UI.once("editor-selected");
 
   info("Switching back to the inspector panel in the toolbox");
-  yield toolbox.selectTool("inspector");
+  await toolbox.selectTool("inspector");
 
   info("Clicking on second inline stylesheet link");
   clickLinkByIndex(view, 4);
-  let editor = yield onSelected;
+  let editor = await onSelected;
 
   is(toolbox.currentToolId, "styleeditor",
     "The style editor is selected again");
-  yield validateStyleEditorSheet(editor, 1, testActor);
+  await validateStyleEditorSheet(editor, 1, testActor);
 }
 
-function* testExternalStyleSheet(view, toolbox, testActor) {
+async function testExternalStyleSheet(view, toolbox, testActor) {
   info("Testing external stylesheet");
 
   info("Waiting for the stylesheet editor to be selected");
   let panel = toolbox.getCurrentPanel();
   let onSelected = panel.UI.once("editor-selected");
 
   info("Switching back to the inspector panel in the toolbox");
-  yield toolbox.selectTool("inspector");
+  await toolbox.selectTool("inspector");
 
   info("Clicking on an external stylesheet link");
   clickLinkByIndex(view, 1);
-  let editor = yield onSelected;
+  let editor = await onSelected;
 
   is(toolbox.currentToolId, "styleeditor",
     "The style editor is selected again");
-  yield validateStyleEditorSheet(editor, 2, testActor);
+  await validateStyleEditorSheet(editor, 2, testActor);
 }
 
-function* validateStyleEditorSheet(editor, expectedSheetIndex, testActor) {
+async function validateStyleEditorSheet(editor, expectedSheetIndex, testActor) {
   info("Validating style editor stylesheet");
-  let expectedHref = yield testActor.eval(`
+  let expectedHref = await testActor.eval(`
     document.styleSheets[${expectedSheetIndex}].href;
   `);
   is(editor.styleSheet.href, expectedHref,
     "loaded stylesheet matches document stylesheet");
 }
 
 function clickLinkByIndex(view, index) {
   let link = getComputedViewLinkByIndex(view, index);
--- a/devtools/client/inspector/computed/test/head.js
+++ b/devtools/client/inspector/computed/test/head.js
@@ -77,37 +77,37 @@ function getComputedViewPropertyView(vie
  *
  * @param {CssComputedView} view
  *        The instance of the computed view panel
  * @param {String} name
  *        The name of the property to retrieve
  * @return {Promise} A promise that resolves to the property matched rules
  * container
  */
-var getComputedViewMatchedRules = Task.async(function* (view, name) {
+var getComputedViewMatchedRules = async function(view, name) {
   let expander;
   let propertyContent;
   for (let property of view.styleDocument.querySelectorAll(".computed-property-view")) {
     let nameSpan = property.querySelector(".computed-property-name");
     if (nameSpan.firstChild.textContent === name) {
       expander = property.querySelector(".computed-expandable");
       propertyContent = property.nextSibling;
       break;
     }
   }
 
   if (!expander.hasAttribute("open")) {
     // Need to expand the property
     let onExpand = view.inspector.once("computed-view-property-expanded");
     expander.click();
-    yield onExpand;
+    await onExpand;
   }
 
   return propertyContent;
-});
+};
 
 /**
  * Get the text value of the property corresponding to a given name in the
  * computed-view
  *
  * @param {CssComputedView} view
  *        The instance of the computed view panel
  * @param {String} name
@@ -170,24 +170,24 @@ function selectAllText(view) {
 /**
  * Select all the text, copy it, and check the content in the clipboard.
  *
  * @param {CssComputedView} view
  *        The instance of the computed view panel
  * @param {String} expectedPattern
  *        A regular expression used to check the content of the clipboard
  */
-function* copyAllAndCheckClipboard(view, expectedPattern) {
+async function copyAllAndCheckClipboard(view, expectedPattern) {
   selectAllText(view);
   let contentDoc = view.styleDocument;
   let prop = contentDoc.querySelector(".computed-property-view");
 
   try {
     info("Trigger a copy event and wait for the clipboard content");
-    yield waitForClipboardPromise(() => fireCopyEvent(prop),
+    await waitForClipboardPromise(() => fireCopyEvent(prop),
                                   () => checkClipboard(expectedPattern));
   } catch (e) {
     failClipboardCheck(expectedPattern);
   }
 }
 
 /**
  * Select some text, copy it, and check the content in the clipboard.
@@ -196,31 +196,31 @@ function* copyAllAndCheckClipboard(view,
  *        The instance of the computed view panel
  * @param {Object} positions
  *        The start and end positions of the text to be selected. This must be an object
  *        like this:
  *        { start: {prop: 1, offset: 0}, end: {prop: 3, offset: 5} }
  * @param {String} expectedPattern
  *        A regular expression used to check the content of the clipboard
  */
-function* copySomeTextAndCheckClipboard(view, positions, expectedPattern) {
+async function copySomeTextAndCheckClipboard(view, positions, expectedPattern) {
   info("Testing selection copy");
 
   let contentDocument = view.styleDocument;
   let props = contentDocument.querySelectorAll(".computed-property-view");
 
   info("Create the text selection range");
   let range = contentDocument.createRange();
   range.setStart(props[positions.start.prop], positions.start.offset);
   range.setEnd(props[positions.end.prop], positions.end.offset);
   contentDocument.defaultView.getSelection().addRange(range);
 
   try {
     info("Trigger a copy event and wait for the clipboard content");
-    yield waitForClipboardPromise(() => fireCopyEvent(props[0]),
+    await waitForClipboardPromise(() => fireCopyEvent(props[0]),
                                   () => checkClipboard(expectedPattern));
   } catch (e) {
     failClipboardCheck(expectedPattern);
   }
 }
 
 function checkClipboard(expectedPattern) {
   let actual = SpecialPowers.getClipboardData("text/unicode");
--- a/devtools/client/inspector/fonts/test/browser_fontinspector.js
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector.js
@@ -23,31 +23,31 @@ const FONTS = [{
   cssName: "bar"
 }, {
   name: "Ostrich Sans Medium",
   remote: true,
   url: URL_ROOT + "ostrich-regular.ttf",
   cssName: "barnormal"
 }];
 
-add_task(function* () {
-  let { inspector, view } = yield openFontInspectorForURL(TEST_URI);
+add_task(async function() {
+  let { inspector, view } = await openFontInspectorForURL(TEST_URI);
   ok(!!view, "Font inspector document is alive.");
 
   let viewDoc = view.document;
 
-  yield testBodyFonts(inspector, viewDoc);
-  yield testDivFonts(inspector, viewDoc);
+  await testBodyFonts(inspector, viewDoc);
+  await testDivFonts(inspector, viewDoc);
 });
 
 function isRemote(fontLi) {
   return fontLi.querySelector(".font-origin").classList.contains("remote");
 }
 
-function* testBodyFonts(inspector, viewDoc) {
+function testBodyFonts(inspector, viewDoc) {
   let lis = getUsedFontsEls(viewDoc);
   is(lis.length, 5, "Found 5 fonts");
 
   for (let i = 0; i < FONTS.length; i++) {
     let li = lis[i];
     let font = FONTS[i];
 
     is(getName(li), font.name, `font ${i} right font name`);
@@ -65,17 +65,17 @@ function* testBodyFonts(inspector, viewD
 
   // On Linux test machines, the Arial font doesn't exist.
   // The fallback is "Liberation Sans"
   ok((localFontName == "Arial") || (localFontName == "Liberation Sans"),
      "local font right font name");
   ok(!isRemote(lis[4]), "local font is local");
 }
 
-function* testDivFonts(inspector, viewDoc) {
+async function testDivFonts(inspector, viewDoc) {
   let updated = inspector.once("fontinspector-updated");
-  yield selectNode("div", inspector);
-  yield updated;
+  await selectNode("div", inspector);
+  await updated;
 
   let lis = getUsedFontsEls(viewDoc);
   is(lis.length, 1, "Found 1 font on DIV");
   is(getName(lis[0]), "Ostrich Sans Medium", "The DIV font has the right name");
 }
--- a/devtools/client/inspector/fonts/test/browser_fontinspector_edit-previews.js
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_edit-previews.js
@@ -4,33 +4,33 @@
 "use strict";
 
 // Test that previews change when the preview text changes. It doesn't check the
 // exact preview images because they are drawn on a canvas causing them to vary
 // between systems, platforms and software versions.
 
 const TEST_URI = URL_ROOT + "browser_fontinspector.html";
 
-add_task(function* () {
-  let {view} = yield openFontInspectorForURL(TEST_URI);
+add_task(async function() {
+  let {view} = await openFontInspectorForURL(TEST_URI);
   let viewDoc = view.document;
 
   let previews = viewDoc.querySelectorAll("#font-container .font-preview");
   let initialPreviews = [...previews].map(p => p.src);
 
   info("Typing 'Abc' to check that the reference previews are correct.");
-  yield updatePreviewText(view, "Abc");
+  await updatePreviewText(view, "Abc");
   checkPreviewImages(viewDoc, initialPreviews, true);
 
   info("Typing something else to the preview box.");
-  yield updatePreviewText(view, "The quick brown");
+  await updatePreviewText(view, "The quick brown");
   checkPreviewImages(viewDoc, initialPreviews, false);
 
   info("Blanking the input to restore default previews.");
-  yield updatePreviewText(view, "");
+  await updatePreviewText(view, "");
   checkPreviewImages(viewDoc, initialPreviews, true);
 });
 
 /**
  * Compares the previous preview image URIs to the current URIs.
  *
  * @param {Document} viewDoc
  *        The FontInspector document.
--- a/devtools/client/inspector/fonts/test/browser_fontinspector_expand-css-code.js
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_expand-css-code.js
@@ -3,18 +3,18 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that the font-face css rule code is collapsed by default, and can be expanded.
 
 const TEST_URI = URL_ROOT + "browser_fontinspector.html";
 
-add_task(function* () {
-  let { view } = yield openFontInspectorForURL(TEST_URI);
+add_task(async function() {
+  let { view } = await openFontInspectorForURL(TEST_URI);
   let viewDoc = view.document;
 
   info("Checking that the css font-face rule is collapsed by default");
   let fontEl = getUsedFontsEls(viewDoc)[0];
   let codeEl = fontEl.querySelector(".font-css-code");
   is(codeEl.textContent, "@font-face {}", "The font-face rule is collapsed");
 
   info("Expanding the rule by clicking on the expander icon");
@@ -22,17 +22,17 @@ add_task(function* () {
     return codeEl.textContent === `@font-face {
   font-family: "bar";
   src: url("bad/font/name.ttf"), url("ostrich-regular.ttf") format("truetype");
 }`;
   }, "Waiting for the font-face rule");
 
   let expander = fontEl.querySelector(".font-css-code .theme-twisty");
   expander.click();
-  yield onExpanded;
+  await onExpanded;
 
   ok(true, "Font-face rule is now expanded");
 
   info("Expanding another rule by clicking on the [...] icon instead");
   fontEl = getUsedFontsEls(viewDoc)[1];
   codeEl = fontEl.querySelector(".font-css-code");
 
   onExpanded = BrowserTestUtils.waitForCondition(() => {
@@ -40,12 +40,12 @@ add_task(function* () {
   font-family: "bar";
   font-weight: bold;
   src: url("ostrich-black.ttf");
 }`;
   }, "Waiting for the font-face rule");
 
   expander = fontEl.querySelector(".font-css-code .font-css-code-expander");
   expander.click();
-  yield onExpanded;
+  await onExpanded;
 
   ok(true, "Font-face rule is now expanded too");
 });
--- a/devtools/client/inspector/fonts/test/browser_fontinspector_other-fonts.js
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_other-fonts.js
@@ -5,35 +5,35 @@
 
 // Check that the font inspector has a section for "other fonts" and that section contains
 // the fonts *not* used in the currently selected element.
 // Check that it's collapsed by default, but can be expanded. That it does not contain
 // the fonts listed in the previous section.
 
 const TEST_URI = URL_ROOT + "browser_fontinspector.html";
 
-add_task(function* () {
-  const { inspector, view } = yield openFontInspectorForURL(TEST_URI);
+add_task(async function() {
+  const { inspector, view } = await openFontInspectorForURL(TEST_URI);
   const viewDoc = view.document;
 
   let otherFontsAccordion = viewDoc.querySelector("#font-container .accordion");
   ok(otherFontsAccordion, "There's an accordion in the panel");
   is(otherFontsAccordion.textContent, "Other fonts in page", "It has the right title");
 
-  yield expandOtherFontsAccordion(viewDoc);
+  await expandOtherFontsAccordion(viewDoc);
   let otherFontsEls = getOtherFontsEls(viewDoc);
 
   is(otherFontsEls.length, 1, "There is one font listed in the other fonts section");
   // On Linux Times New Roman does not exist, Liberation Serif is used instead
   let name = getName(otherFontsEls[0]);
   ok(name === "Times New Roman" || name === "Liberation Serif",
      "The other font listed is the right one");
 
   info("Checking that fonts of the current element aren't listed");
-  yield selectNode(".bold-text", inspector);
-  yield expandOtherFontsAccordion(viewDoc);
+  await selectNode(".bold-text", inspector);
+  await expandOtherFontsAccordion(viewDoc);
   otherFontsEls = getOtherFontsEls(viewDoc);
 
   for (let otherFontEl of otherFontsEls) {
     ok(![...getUsedFontsEls(viewDoc)].some(el => getName(el) === getName(otherFontEl)),
        "Other font isn't listed in the main fonts section");
   }
 });
--- a/devtools/client/inspector/fonts/test/browser_fontinspector_text-node.js
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_text-node.js
@@ -3,20 +3,20 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that the font-inspector also display fonts when a text node is selected.
 
 const TEST_URI = URL_ROOT + "browser_fontinspector.html";
 
-add_task(function* () {
-  let { inspector, view } = yield openFontInspectorForURL(TEST_URI);
+add_task(async function() {
+  let { inspector, view } = await openFontInspectorForURL(TEST_URI);
   let viewDoc = view.document;
 
   info("Selecting the first text-node first-child of <body>");
-  let bodyNode = yield getNodeFront("body", inspector);
-  let { nodes } = yield inspector.walker.children(bodyNode);
-  yield selectNode(nodes[0], inspector);
+  let bodyNode = await getNodeFront("body", inspector);
+  let { nodes } = await inspector.walker.children(bodyNode);
+  await selectNode(nodes[0], inspector);
 
   let lis = getUsedFontsEls(viewDoc);
   is(lis.length, 1, "Font inspector shows 1 font");
 });
--- a/devtools/client/inspector/fonts/test/browser_fontinspector_theme-change.js
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_theme-change.js
@@ -12,44 +12,44 @@ const { getTheme, setTheme } = require("
 const TEST_URI = URL_ROOT + "browser_fontinspector.html";
 const originalTheme = getTheme();
 
 registerCleanupFunction(() => {
   info(`Restoring theme to '${originalTheme}.`);
   setTheme(originalTheme);
 });
 
-add_task(function* () {
-  let { inspector, view } = yield openFontInspectorForURL(TEST_URI);
+add_task(async function() {
+  let { inspector, view } = await openFontInspectorForURL(TEST_URI);
   let { document: doc } = view;
 
-  yield selectNode(".normal-text", inspector);
+  await selectNode(".normal-text", inspector);
 
   // Store the original preview URI for later comparison.
   let originalURI = doc.querySelector("#font-container .font-preview").src;
   let newTheme = originalTheme === "light" ? "dark" : "light";
 
   info(`Original theme was '${originalTheme}'.`);
 
-  yield setThemeAndWaitForUpdate(newTheme, inspector);
+  await setThemeAndWaitForUpdate(newTheme, inspector);
   isnot(doc.querySelector("#font-container .font-preview").src, originalURI,
     "The preview image changed with the theme.");
 
-  yield setThemeAndWaitForUpdate(originalTheme, inspector);
+  await setThemeAndWaitForUpdate(originalTheme, inspector);
   is(doc.querySelector("#font-container .font-preview").src, originalURI,
     "The preview image is correct after the original theme was restored.");
 });
 
 /**
  * Sets the current theme and waits for fontinspector-updated event.
  *
  * @param {String} theme - the new theme
  * @param {Object} inspector - the inspector panel
  */
-function* setThemeAndWaitForUpdate(theme, inspector) {
+async function setThemeAndWaitForUpdate(theme, inspector) {
   let onUpdated = inspector.once("fontinspector-updated");
 
   info(`Setting theme to '${theme}'.`);
   setTheme(theme);
 
   info("Waiting for font-inspector to update.");
-  yield onUpdated;
+  await onUpdated;
 }
--- a/devtools/client/inspector/fonts/test/head.js
+++ b/devtools/client/inspector/fonts/test/head.js
@@ -18,76 +18,76 @@ registerCleanupFunction(() => {
 
 /**
  * The font-inspector doesn't participate in the inspector's update mechanism
  * (i.e. it doesn't call inspector.updating() when updating), so simply calling
  * the default selectNode isn't enough to guaranty that the panel has finished
  * updating. We also need to wait for the fontinspector-updated event.
  */
 var _selectNode = selectNode;
-selectNode = function* (node, inspector, reason) {
+selectNode = async function(node, inspector, reason) {
   let onUpdated = inspector.once("fontinspector-updated");
-  yield _selectNode(node, inspector, reason);
-  yield onUpdated;
+  await _selectNode(node, inspector, reason);
+  await onUpdated;
 };
 
 /**
  * Adds a new tab with the given URL, opens the inspector and selects the
  * font-inspector tab.
  * @return {Promise} resolves to a {toolbox, inspector, view} object
  */
-var openFontInspectorForURL = Task.async(function* (url) {
-  yield addTab(url);
-  let {toolbox, inspector} = yield openInspector();
+var openFontInspectorForURL = async function(url) {
+  await addTab(url);
+  let {toolbox, inspector} = await openInspector();
 
   // Call selectNode again here to force a fontinspector update since we don't
   // know if the fontinspector-updated event has been sent while the inspector
   // was being opened or not.
-  yield selectNode("body", inspector);
+  await selectNode("body", inspector);
 
   return {
     toolbox,
     inspector,
     view: inspector.fontinspector
   };
-});
+};
 
 /**
  * Focus one of the preview inputs, clear it, type new text into it and wait for the
  * preview images to be updated.
  *
  * @param {FontInspector} view - The FontInspector instance.
  * @param {String} text - The text to preview.
  */
-function* updatePreviewText(view, text) {
+async function updatePreviewText(view, text) {
   info(`Changing the preview text to '${text}'`);
 
   let doc = view.document;
   let previewImg = doc.querySelector("#sidebar-panel-fontinspector .font-preview");
 
   info("Clicking the font preview element to turn it to edit mode");
   let onClick = once(doc, "click");
   previewImg.click();
-  yield onClick;
+  await onClick;
 
   let input = previewImg.parentNode.querySelector("input");
   is(doc.activeElement, input, "The input was focused.");
 
   info("Blanking the input field.");
   while (input.value.length) {
     let update = view.inspector.once("fontinspector-updated");
     EventUtils.sendKey("BACK_SPACE", doc.defaultView);
-    yield update;
+    await update;
   }
 
   if (text) {
     info("Typing the specified text to the input field.");
     let update = waitForNEvents(view.inspector, "fontinspector-updated", text.length);
     EventUtils.sendString(text, doc.defaultView);
-    yield update;
+    await update;
   }
 
   is(input.value, text, "The input now contains the correct text.");
 }
 
 /**
  * Get all of the <li> elements for the fonts used on the currently selected element.
  *
--- a/devtools/client/inspector/grids/test/browser_grids_accordion-state.js
+++ b/devtools/client/inspector/grids/test/browser_grids_accordion-state.js
@@ -15,70 +15,70 @@ const TEST_URI = `
   <div id="grid">
     <div id="cell1">cell1</div>
     <div id="cell2">cell2</div>
   </div>
 `;
 
 const GRID_OPENED_PREF = "devtools.layout.grid.opened";
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let { inspector, gridInspector, toolbox } = yield openLayoutView();
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let { inspector, gridInspector, toolbox } = await openLayoutView();
   let { document: doc } = gridInspector;
 
-  yield testAccordionStateAfterClickingHeader(doc);
-  yield testAccordionStateAfterSwitchingSidebars(inspector, doc);
-  yield testAccordionStateAfterReopeningLayoutView(toolbox);
+  await testAccordionStateAfterClickingHeader(doc);
+  await testAccordionStateAfterSwitchingSidebars(inspector, doc);
+  await testAccordionStateAfterReopeningLayoutView(toolbox);
 
   Services.prefs.clearUserPref(GRID_OPENED_PREF);
 });
 
-function* testAccordionStateAfterClickingHeader(doc) {
+function testAccordionStateAfterClickingHeader(doc) {
   let header = doc.querySelector(".grid-pane ._header");
   let gContent = doc.querySelector(".grid-pane ._content");
 
   info("Checking initial state of the grid panel.");
   is(gContent.style.display, "block", "The grid panel content is 'display: block'.");
   ok(Services.prefs.getBoolPref(GRID_OPENED_PREF),
     `${GRID_OPENED_PREF} is pref on by default.`);
 
   info("Clicking the grid header to hide the grid panel.");
   header.click();
 
   info("Checking the new state of the grid panel.");
   is(gContent.style.display, "none", "The grid panel content is 'display: none'.");
   ok(!Services.prefs.getBoolPref(GRID_OPENED_PREF), `${GRID_OPENED_PREF} is pref off.`);
 }
 
-function* testAccordionStateAfterSwitchingSidebars(inspector, doc) {
+function testAccordionStateAfterSwitchingSidebars(inspector, doc) {
   info("Checking the grid accordion state is persistent after switching sidebars.");
 
   let gContent = doc.querySelector(".grid-pane ._content");
 
   info("Selecting the computed view.");
   inspector.sidebar.select("computedview");
 
   info("Selecting the layout view.");
   inspector.sidebar.select("layoutview");
 
   info("Checking the state of the grid panel.");
   is(gContent.style.display, "none", "The grid panel content is 'display: none'.");
   ok(!Services.prefs.getBoolPref(GRID_OPENED_PREF), `${GRID_OPENED_PREF} is pref off.`);
 }
 
-function* testAccordionStateAfterReopeningLayoutView(toolbox) {
+async function testAccordionStateAfterReopeningLayoutView(toolbox) {
   info("Checking the grid accordion state is persistent after closing and re-opening the "
   + "layout view.");
 
   info("Closing the toolbox.");
-  yield toolbox.destroy();
+  await toolbox.destroy();
 
   info("Re-opening the layout view.");
-  let { gridInspector } = yield openLayoutView();
+  let { gridInspector } = await openLayoutView();
   let { document: doc } = gridInspector;
   let gContent = doc.querySelector(".grid-pane ._content");
 
   info("Checking the state of the grid panel.");
   ok(!gContent, "The grid panel content is not rendered.");
   ok(!Services.prefs.getBoolPref(GRID_OPENED_PREF),
     `${GRID_OPENED_PREF} is pref off.`);
 }
--- a/devtools/client/inspector/grids/test/browser_grids_color-in-rules-grid-toggle.js
+++ b/devtools/client/inspector/grids/test/browser_grids_color-in-rules-grid-toggle.js
@@ -13,54 +13,54 @@ const TEST_URI = `
     }
   </style>
   <div id="grid">
     <div id="cell1">cell1</div>
     <div id="cell2">cell2</div>
   </div>
 `;
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let { inspector, gridInspector } = yield openLayoutView();
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let { inspector, gridInspector } = await openLayoutView();
   let { document: doc } = gridInspector;
   let { store } = inspector;
   let cPicker = gridInspector.getSwatchColorPickerTooltip();
   let spectrum = cPicker.spectrum;
   let swatch = doc.querySelector(".grid-color-swatch");
 
   info("Scrolling into view of the #grid color swatch.");
   swatch.scrollIntoView();
 
   info("Opening the color picker by clicking on the #grid color swatch.");
   let onColorPickerReady = cPicker.once("ready");
   swatch.click();
-  yield onColorPickerReady;
+  await onColorPickerReady;
 
-  yield simulateColorPickerChange(cPicker, [0, 255, 0, .5]);
+  await simulateColorPickerChange(cPicker, [0, 255, 0, .5]);
 
   is(swatch.style.backgroundColor, "rgba(0, 255, 0, 0.5)",
     "The color swatch's background was updated.");
 
   info("Pressing RETURN to commit the color change.");
   let onGridColorUpdate = waitUntilState(store, state =>
     state.grids[0].color === "#00FF0080");
   let onColorPickerHidden = cPicker.tooltip.once("hidden");
   focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
-  yield onColorPickerHidden;
-  yield onGridColorUpdate;
+  await onColorPickerHidden;
+  await onGridColorUpdate;
 
   is(swatch.style.backgroundColor, "rgba(0, 255, 0, 0.5)",
     "The color swatch's background was kept after RETURN.");
 
   info("Selecting the rule view.");
   let ruleView = selectRuleView(inspector);
   let highlighters = ruleView.highlighters;
 
-  yield selectNode("#grid", inspector);
+  await selectNode("#grid", inspector);
 
   let container = getRuleViewProperty(ruleView, "#grid", "display").valueSpan;
   let gridToggle = container.querySelector(".ruleview-grid");
 
   info("Toggling ON the CSS grid highlighter from the rule-view.");
   let onHighlighterShown = highlighters.once("grid-highlighter-shown",
     (nodeFront, options) => {
       info("Checking the grid highlighter display settings.");
@@ -73,10 +73,10 @@ add_task(function* () {
 
       is(color, "#00FF0080", "CSS grid highlighter color is correct.");
       ok(!showGridAreasOverlay, "Show grid areas overlay option is off.");
       ok(!showGridLineNumbers, "Show grid line numbers option is off.");
       ok(!showInfiniteLines, "Show infinite lines option is off.");
     }
   );
   gridToggle.click();
-  yield onHighlighterShown;
+  await onHighlighterShown;
 });
--- a/devtools/client/inspector/grids/test/browser_grids_display-setting-extend-grid-lines.js
+++ b/devtools/client/inspector/grids/test/browser_grids_display-setting-extend-grid-lines.js
@@ -15,37 +15,37 @@ const TEST_URI = `
   <div id="grid">
     <div id="cell1">cell1</div>
     <div id="cell2">cell2</div>
   </div>
 `;
 
 const SHOW_INFINITE_LINES_PREF = "devtools.gridinspector.showInfiniteLines";
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let { inspector, gridInspector } = yield openLayoutView();
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let { inspector, gridInspector } = await openLayoutView();
   let { document: doc } = gridInspector;
   let { store } = inspector;
 
-  yield selectNode("#grid", inspector);
+  await selectNode("#grid", inspector);
   let checkbox = doc.getElementById("grid-setting-extend-grid-lines");
 
   ok(!Services.prefs.getBoolPref(SHOW_INFINITE_LINES_PREF),
     "'Extend grid lines infinitely' is pref off by default.");
 
   info("Toggling ON the 'Extend grid lines infinitely' setting.");
   let onCheckboxChange = waitUntilState(store, state =>
     state.highlighterSettings.showInfiniteLines);
   checkbox.click();
-  yield onCheckboxChange;
+  await onCheckboxChange;
 
   info("Toggling OFF the 'Extend grid lines infinitely' setting.");
   onCheckboxChange = waitUntilState(store, state =>
     !state.highlighterSettings.showInfiniteLines);
   checkbox.click();
-  yield onCheckboxChange;
+  await onCheckboxChange;
 
   ok(!Services.prefs.getBoolPref(SHOW_INFINITE_LINES_PREF),
     "'Extend grid lines infinitely' is pref off.");
 
   Services.prefs.clearUserPref(SHOW_INFINITE_LINES_PREF);
 });
--- a/devtools/client/inspector/grids/test/browser_grids_display-setting-show-grid-areas.js
+++ b/devtools/client/inspector/grids/test/browser_grids_display-setting-show-grid-areas.js
@@ -15,37 +15,37 @@ const TEST_URI = `
   <div id="grid">
     <div id="cell1">cell1</div>
     <div id="cell2">cell2</div>
   </div>
 `;
 
 const SHOW_GRID_AREAS_PREF = "devtools.gridinspector.showGridAreas";
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let { inspector, gridInspector } = yield openLayoutView();
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let { inspector, gridInspector } = await openLayoutView();
   let { document: doc } = gridInspector;
   let { store } = inspector;
 
-  yield selectNode("#grid", inspector);
+  await selectNode("#grid", inspector);
   let checkbox = doc.getElementById("grid-setting-show-grid-areas");
 
   ok(!Services.prefs.getBoolPref(SHOW_GRID_AREAS_PREF),
     "'Display grid areas' is pref off by default.");
 
   info("Toggling ON the 'Display grid areas' setting.");
   let onCheckboxChange = waitUntilState(store, state =>
     state.highlighterSettings.showGridAreasOverlay);
   checkbox.click();
-  yield onCheckboxChange;
+  await onCheckboxChange;
 
   info("Toggling OFF the 'Display grid areas' setting.");
   onCheckboxChange = waitUntilState(store, state =>
     !state.highlighterSettings.showGridAreasOverlay);
   checkbox.click();
-  yield onCheckboxChange;
+  await onCheckboxChange;
 
   ok(!Services.prefs.getBoolPref(SHOW_GRID_AREAS_PREF),
     "'Display grid areas' is pref off.");
 
   Services.prefs.clearUserPref(SHOW_GRID_AREAS_PREF);
 });
--- a/devtools/client/inspector/grids/test/browser_grids_display-setting-show-grid-line-numbers.js
+++ b/devtools/client/inspector/grids/test/browser_grids_display-setting-show-grid-line-numbers.js
@@ -15,41 +15,41 @@ const TEST_URI = `
   <div id="grid">
     <div id="cell1">cell1</div>
     <div id="cell2">cell2</div>
   </div>
 `;
 
 const SHOW_GRID_LINE_NUMBERS = "devtools.gridinspector.showGridLineNumbers";
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let { inspector, gridInspector } = yield openLayoutView();
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let { inspector, gridInspector } = await openLayoutView();
   let { document: doc } = gridInspector;
   let { store } = inspector;
 
-  yield selectNode("#grid", inspector);
+  await selectNode("#grid", inspector);
   let checkbox = doc.getElementById("grid-setting-show-grid-line-numbers");
 
   info("Checking the initial state of the CSS grid highlighter setting.");
   ok(!Services.prefs.getBoolPref(SHOW_GRID_LINE_NUMBERS),
     "'Display numbers on lines' is pref off by default.");
 
   info("Toggling ON the 'Display numbers on lines' setting.");
   let onCheckboxChange = waitUntilState(store, state =>
     state.highlighterSettings.showGridLineNumbers);
   checkbox.click();
-  yield onCheckboxChange;
+  await onCheckboxChange;
 
   ok(Services.prefs.getBoolPref(SHOW_GRID_LINE_NUMBERS),
     "'Display numbers on lines' is pref on.");
 
   info("Toggling OFF the 'Display numbers on lines' setting.");
   onCheckboxChange = waitUntilState(store, state =>
     !state.highlighterSettings.showGridLineNumbers);
   checkbox.click();
-  yield onCheckboxChange;
+  await onCheckboxChange;
 
   ok(!Services.prefs.getBoolPref(SHOW_GRID_LINE_NUMBERS),
     "'Display numbers on lines' is pref off.");
 
   Services.prefs.clearUserPref(SHOW_GRID_LINE_NUMBERS);
 });
--- a/devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-ESC.js
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-ESC.js
@@ -13,19 +13,19 @@ const TEST_URI = `
     }
   </style>
   <div id="grid">
     <div id="cell1">cell1</div>
     <div id="cell2">cell2</div>
   </div>
 `;
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let { inspector, gridInspector } = yield openLayoutView();
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let { inspector, gridInspector } = await openLayoutView();
   let { document: doc } = gridInspector;
   let { store } = inspector;
   let cPicker = gridInspector.getSwatchColorPickerTooltip();
   let spectrum = cPicker.spectrum;
   let swatch = doc.querySelector(".grid-color-swatch");
 
   info("Checking the initial state of the Grid Inspector.");
   is(swatch.style.backgroundColor, "rgb(148, 0, 255)",
@@ -33,26 +33,26 @@ add_task(function* () {
   is(store.getState().grids[0].color, "#9400FF", "The grid color state is correct.");
 
   info("Scrolling into view of the #grid color swatch.");
   swatch.scrollIntoView();
 
   info("Opening the color picker by clicking on the #grid color swatch.");
   let onColorPickerReady = cPicker.once("ready");
   swatch.click();
-  yield onColorPickerReady;
+  await onColorPickerReady;
 
-  yield simulateColorPickerChange(cPicker, [0, 255, 0, .5]);
+  await simulateColorPickerChange(cPicker, [0, 255, 0, .5]);
 
   is(swatch.style.backgroundColor, "rgba(0, 255, 0, 0.5)",
     "The color swatch's background was updated.");
 
   info("Pressing ESCAPE to close the tooltip.");
   let onGridColorUpdate = waitUntilState(store, state =>
     state.grids[0].color === "#9400FF");
   let onColorPickerHidden = cPicker.tooltip.once("hidden");
   focusAndSendKey(spectrum.element.ownerDocument.defaultView, "ESCAPE");
-  yield onColorPickerHidden;
-  yield onGridColorUpdate;
+  await onColorPickerHidden;
+  await onGridColorUpdate;
 
   is(swatch.style.backgroundColor, "rgb(148, 0, 255)",
     "The color swatch's background was reverted after ESCAPE.");
 });
--- a/devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-RETURN.js
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-RETURN.js
@@ -13,19 +13,19 @@ const TEST_URI = `
     }
   </style>
   <div id="grid">
     <div id="cell1">cell1</div>
     <div id="cell2">cell2</div>
   </div>
 `;
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let { inspector, gridInspector } = yield openLayoutView();
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let { inspector, gridInspector } = await openLayoutView();
   let { document: doc } = gridInspector;
   let { store } = inspector;
   let cPicker = gridInspector.getSwatchColorPickerTooltip();
   let spectrum = cPicker.spectrum;
   let swatch = doc.querySelector(".grid-color-swatch");
 
   info("Checking the initial state of the Grid Inspector.");
   is(swatch.style.backgroundColor, "rgb(148, 0, 255)",
@@ -33,26 +33,26 @@ add_task(function* () {
   is(store.getState().grids[0].color, "#9400FF", "The grid color state is correct.");
 
   info("Scrolling into view of the #grid color swatch.");
   swatch.scrollIntoView();
 
   info("Opening the color picker by clicking on the #grid color swatch.");
   let onColorPickerReady = cPicker.once("ready");
   swatch.click();
-  yield onColorPickerReady;
+  await onColorPickerReady;
 
-  yield simulateColorPickerChange(cPicker, [0, 255, 0, .5]);
+  await simulateColorPickerChange(cPicker, [0, 255, 0, .5]);
 
   is(swatch.style.backgroundColor, "rgba(0, 255, 0, 0.5)",
     "The color swatch's background was updated.");
 
   info("Pressing RETURN to commit the color change.");
   let onGridColorUpdate = waitUntilState(store, state =>
     state.grids[0].color === "#00FF0080");
   let onColorPickerHidden = cPicker.tooltip.once("hidden");
   focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
-  yield onColorPickerHidden;
-  yield onGridColorUpdate;
+  await onColorPickerHidden;
+  await onGridColorUpdate;
 
   is(swatch.style.backgroundColor, "rgba(0, 255, 0, 0.5)",
     "The color swatch's background was kept after RETURN.");
 });
--- a/devtools/client/inspector/grids/test/browser_grids_grid-list-element-rep.js
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-element-rep.js
@@ -13,37 +13,37 @@ const TEST_URI = `
     }
   </style>
   <div id="grid">
     <div id="cell1">cell1</div>
     <div id="cell2">cell2</div>
   </div>
 `;
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let { inspector, gridInspector, toolbox } = yield openLayoutView();
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let { inspector, gridInspector, toolbox } = await openLayoutView();
   let { document: doc } = gridInspector;
   let { store } = inspector;
 
   let gridList = doc.querySelector("#grid-list");
   let elementRep = gridList.children[0].querySelector(".open-inspector");
   info("Scrolling into the view the #grid element node rep.");
   elementRep.scrollIntoView();
 
   info("Listen to node-highlight event and mouse over the widget");
   let onHighlight = toolbox.once("node-highlight");
   EventUtils.synthesizeMouse(elementRep, 10, 5, {type: "mouseover"}, doc.defaultView);
-  let nodeFront = yield onHighlight;
+  let nodeFront = await onHighlight;
 
   ok(nodeFront, "nodeFront was returned from highlighting the node.");
   is(nodeFront.tagName, "DIV", "The highlighted node has the correct tagName.");
   is(nodeFront.attributes[0].name, "id",
     "The highlighted node has the correct attributes.");
   is(nodeFront.attributes[0].value, "grid", "The highlighted node has the correct id.");
 
   let onSelection = inspector.selection.once("new-node-front");
   EventUtils.sendMouseEvent({type: "click"}, elementRep, doc.defaultView);
-  yield onSelection;
+  await onSelection;
 
   is(inspector.selection.nodeFront, store.getState().grids[0].nodeFront,
     "The selected node is the one stored on the grid item's state.");
 });
--- a/devtools/client/inspector/grids/test/browser_grids_grid-list-no-grids.js
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-no-grids.js
@@ -10,23 +10,23 @@ const TEST_URI = `
   <style type='text/css'>
   </style>
   <div id="grid">
     <div id="cell1">cell1</div>
     <div id="cell2">cell2</div>
   </div>
 `;
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let { inspector, gridInspector } = yield openLayoutView();
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let { inspector, gridInspector } = await openLayoutView();
   let { document: doc } = gridInspector;
   let { highlighters } = inspector;
 
-  yield selectNode("#grid", inspector);
+  await selectNode("#grid", inspector);
   let noGridList = doc.querySelector(".grid-pane .devtools-sidepanel-no-result");
   let gridList = doc.getElementById("grid-list");
 
   info("Checking the initial state of the Grid Inspector.");
   ok(noGridList, "The message no grid containers is displayed.");
   ok(!gridList, "No grid containers are listed.");
   ok(!highlighters.highlighters[HIGHLIGHTER_TYPE],
     "No CSS grid highlighter exists in the highlighters overlay.");
--- a/devtools/client/inspector/grids/test/browser_grids_grid-list-on-iframe-reloaded.js
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-on-iframe-reloaded.js
@@ -4,56 +4,56 @@
 "use strict";
 
 // Tests that the list of grids does refresh when an iframe containing a grid is removed
 // and re-created.
 // See bug 1378306 where this happened with jsfiddle.
 
 const TEST_URI = URL_ROOT + "doc_iframe_reloaded.html";
 
-add_task(function* () {
-  yield addTab(TEST_URI);
+add_task(async function() {
+  await addTab(TEST_URI);
 
-  const { inspector, gridInspector, testActor } = yield openLayoutView();
+  const { inspector, gridInspector, testActor } = await openLayoutView();
   const { document: doc } = gridInspector;
   const { store, highlighters } = inspector;
   const gridList = doc.querySelector("#grid-list");
 
   info("Clicking on the first checkbox to highlight the grid");
-  yield enableTheFirstGrid(doc, inspector);
+  await enableTheFirstGrid(doc, inspector);
 
   is(gridList.childNodes.length, 1, "There's one grid in the list");
   let checkbox = gridList.querySelector("input");
   ok(checkbox.checked, "The checkbox is checked");
   ok(highlighters.gridHighlighterShown, "There's a highlighter shown");
 
   info("Reload the iframe in content and expect the grid list to update");
   const oldGrid = store.getState().grids[0];
   const onNewListUnchecked = waitUntilState(store, state =>
     state.grids.length == 1 &&
     state.grids[0].actorID !== oldGrid.actorID &&
     !state.grids[0].highlighted);
   const onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
   testActor.eval("window.wrappedJSObject.reloadIFrame();");
-  yield onNewListUnchecked;
-  yield onHighlighterHidden;
+  await onNewListUnchecked;
+  await onHighlighterHidden;
 
   is(gridList.childNodes.length, 1, "There's still one grid in the list");
 
   info("Highlight the first grid again to make sure this still works");
-  yield enableTheFirstGrid(doc, inspector);
+  await enableTheFirstGrid(doc, inspector);
 
   is(gridList.childNodes.length, 1, "There's again one grid in the list");
   ok(highlighters.gridHighlighterShown, "There's a highlighter shown");
 });
 
-function* enableTheFirstGrid(doc, { highlighters, store }) {
+async function enableTheFirstGrid(doc, { highlighters, store }) {
   const checkbox = doc.querySelector("#grid-list input");
 
   const onHighlighterShown = highlighters.once("grid-highlighter-shown");
   const onCheckboxChange = waitUntilState(store, state =>
     state.grids.length == 1 && state.grids[0].highlighted);
 
   checkbox.click();
 
-  yield onHighlighterShown;
-  yield onCheckboxChange;
+  await onHighlighterShown;
+  await onCheckboxChange;
 }
--- a/devtools/client/inspector/grids/test/browser_grids_grid-list-on-mutation-element-added.js
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-on-mutation-element-added.js
@@ -16,78 +16,78 @@ const TEST_URI = `
     <div class="cell2">cell2</div>
   </div>
   <div id="grid2">
     <div class="cell1">cell1</div>
     <div class="cell2">cell2</div>
   </div>
 `;
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let { inspector, gridInspector, testActor } = yield openLayoutView();
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let { inspector, gridInspector, testActor } = await openLayoutView();
   let { document: doc } = gridInspector;
   let { highlighters, store } = inspector;
 
-  yield selectNode("#grid", inspector);
+  await selectNode("#grid", inspector);
   let gridList = doc.getElementById("grid-list");
   let checkbox1 = gridList.children[0].querySelector("input");
 
   info("Checking the initial state of the Grid Inspector.");
   is(gridList.childNodes.length, 1, "One grid container is listed.");
   ok(!highlighters.highlighters[HIGHLIGHTER_TYPE],
     "No CSS grid highlighter exists in the highlighters overlay.");
   ok(!highlighters.gridHighlighterShown, "No CSS grid highlighter is shown.");
 
   info("Toggling ON the CSS grid highlighter from the layout panel.");
   let onHighlighterShown = highlighters.once("grid-highlighter-shown");
   checkbox1.click();
-  yield onHighlighterShown;
+  await onHighlighterShown;
 
   info("Checking the CSS grid highlighter is created.");
   ok(highlighters.highlighters[HIGHLIGHTER_TYPE],
     "CSS grid highlighter is created in the highlighters overlay.");
   ok(highlighters.gridHighlighterShown, "CSS grid highlighter is shown.");
 
   info("Adding the #grid2 container in the content page.");
   let onGridListUpdate = waitUntilState(store, state =>
     state.grids.length == 2 &&
     state.grids[0].highlighted &&
     !state.grids[1].highlighted);
   testActor.eval(`
     document.getElementById("grid2").classList.add("grid");
   `);
-  yield onGridListUpdate;
+  await onGridListUpdate;
 
   info("Checking the new Grid Inspector state.");
   is(gridList.childNodes.length, 2, "Two grid containers are listed.");
   ok(highlighters.highlighters[HIGHLIGHTER_TYPE],
     "CSS grid highlighter is created in the highlighters overlay.");
   ok(highlighters.gridHighlighterShown, "CSS grid highlighter is shown.");
 
   let checkbox2 = gridList.children[1].querySelector("input");
 
   info("Toggling ON the CSS grid highlighter for #grid2.");
   onHighlighterShown = highlighters.once("grid-highlighter-shown");
   let onCheckboxChange = waitUntilState(store, state =>
     state.grids.length == 2 &&
     !state.grids[0].highlighted &&
     state.grids[1].highlighted);
   checkbox2.click();
-  yield onHighlighterShown;
-  yield onCheckboxChange;
+  await onHighlighterShown;
+  await onCheckboxChange;
 
   info("Checking the CSS grid highlighter is still shown.");
   ok(highlighters.gridHighlighterShown, "CSS grid highlighter is shown.");
 
   info("Toggling OFF the CSS grid highlighter from the layout panel.");
   let onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
   onCheckboxChange = waitUntilState(store, state =>
     state.grids.length == 2 &&
     !state.grids[0].highlighted &&
     !state.grids[1].highlighted);
   checkbox2.click();
-  yield onHighlighterHidden;
-  yield onCheckboxChange;
+  await onHighlighterHidden;
+  await onCheckboxChange;
 
   info("Checking the CSS grid highlighter is not shown.");
   ok(!highlighters.gridHighlighterShown, "No CSS grid highlighter is shown.");
 });
--- a/devtools/client/inspector/grids/test/browser_grids_grid-list-on-mutation-element-removed.js
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-on-mutation-element-removed.js
@@ -13,51 +13,51 @@ const TEST_URI = `
     }
   </style>
   <div id="grid">
     <div id="cell1">cell1</div>
     <div id="cell2">cell2</div>
   </div>
 `;
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let { inspector, gridInspector, testActor } = yield openLayoutView();
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let { inspector, gridInspector, testActor } = await openLayoutView();
   let { document: doc } = gridInspector;
   let { highlighters, store } = inspector;
 
-  yield selectNode("#grid", inspector);
+  await selectNode("#grid", inspector);
   let gridList = doc.getElementById("grid-list");
   let checkbox = gridList.children[0].querySelector("input");
 
   info("Checking the initial state of the Grid Inspector.");
   is(gridList.childNodes.length, 1, "One grid container is listed.");
   ok(!highlighters.highlighters[HIGHLIGHTER_TYPE],
     "No CSS grid highlighter exists in the highlighters overlay.");
   ok(!highlighters.gridHighlighterShown, "No CSS grid highlighter is shown.");
 
   info("Toggling ON the CSS grid highlighter from the layout panel.");
   let onHighlighterShown = highlighters.once("grid-highlighter-shown");
   let onCheckboxChange = waitUntilState(store, state =>
     state.grids.length == 1 && state.grids[0].highlighted);
   checkbox.click();
-  yield onHighlighterShown;
-  yield onCheckboxChange;
+  await onHighlighterShown;
+  await onCheckboxChange;
 
   info("Checking the CSS grid highlighter is created.");
   ok(highlighters.highlighters[HIGHLIGHTER_TYPE],
     "CSS grid highlighter is created in the highlighters overlay.");
   ok(highlighters.gridHighlighterShown, "CSS grid highlighter is shown.");
 
   info("Removing the #grid container in the content page.");
   let onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
   onCheckboxChange = waitUntilState(store, state => state.grids.length == 0);
   testActor.eval(`
     document.getElementById("grid").remove();
   `);
-  yield onHighlighterHidden;
-  yield onCheckboxChange;
+  await onHighlighterHidden;
+  await onCheckboxChange;
 
   info("Checking the CSS grid highlighter is not shown.");
   ok(!highlighters.gridHighlighterShown, "No CSS grid highlighter is shown.");
   let noGridList = doc.querySelector(".grid-pane .devtools-sidepanel-no-result");
   ok(noGridList, "The message no grid containers is displayed.");
 });
--- a/devtools/client/inspector/grids/test/browser_grids_grid-list-toggle-multiple-grids.js
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-toggle-multiple-grids.js
@@ -17,23 +17,23 @@ const TEST_URI = `
     <div class="cell2">cell2</div>
   </div>
   <div id="grid2" class="grid">
     <div class="cell1">cell1</div>
     <div class="cell2">cell2</div>
   </div>
 `;
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let { inspector, gridInspector } = yield openLayoutView();
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let { inspector, gridInspector } = await openLayoutView();
   let { document: doc } = gridInspector;
   let { highlighters, store } = inspector;
 
-  yield selectNode("#grid1", inspector);
+  await selectNode("#grid1", inspector);
   let gridList = doc.getElementById("grid-list");
   let checkbox1 = gridList.children[0].querySelector("input");
   let checkbox2 = gridList.children[1].querySelector("input");
 
   info("Checking the initial state of the Grid Inspector.");
   is(gridList.childNodes.length, 2, "2 grid containers are listed.");
   ok(!checkbox1.checked, `Grid item ${checkbox1.value} is unchecked in the grid list.`);
   ok(!checkbox2.checked, `Grid item ${checkbox2.value} is unchecked in the grid list.`);
@@ -43,42 +43,42 @@ add_task(function* () {
 
   info("Toggling ON the CSS grid highlighter for #grid1.");
   let onHighlighterShown = highlighters.once("grid-highlighter-shown");
   let onCheckboxChange = waitUntilState(store, state =>
     state.grids.length == 2 &&
     state.grids[0].highlighted &&
     !state.grids[1].highlighted);
   checkbox1.click();
-  yield onHighlighterShown;
-  yield onCheckboxChange;
+  await onHighlighterShown;
+  await onCheckboxChange;
 
   info("Checking the CSS grid highlighter is created.");
   ok(highlighters.highlighters[HIGHLIGHTER_TYPE],
     "CSS grid highlighter is created in the highlighters overlay.");
   ok(highlighters.gridHighlighterShown, "CSS grid highlighter is shown.");
 
   info("Toggling ON the CSS grid highlighter for #grid2.");
   onHighlighterShown = highlighters.once("grid-highlighter-shown");
   onCheckboxChange = waitUntilState(store, state =>
     state.grids.length == 2 &&
     !state.grids[0].highlighted &&
     state.grids[1].highlighted);
   checkbox2.click();
-  yield onHighlighterShown;
-  yield onCheckboxChange;
+  await onHighlighterShown;
+  await onCheckboxChange;
 
   info("Checking the CSS grid highlighter is still shown.");
   ok(highlighters.gridHighlighterShown, "CSS grid highlighter is shown.");
 
   info("Toggling OFF the CSS grid highlighter from the layout panel.");
   let onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
   onCheckboxChange = waitUntilState(store, state =>
     state.grids.length == 2 &&
     !state.grids[0].highlighted &&
     !state.grids[1].highlighted);
   checkbox2.click();
-  yield onHighlighterHidden;
-  yield onCheckboxChange;
+  await onHighlighterHidden;
+  await onCheckboxChange;
 
   info("Checking the CSS grid highlighter is not shown.");
   ok(!highlighters.gridHighlighterShown, "No CSS grid highlighter is shown.");
 });
--- a/devtools/client/inspector/grids/test/browser_grids_grid-list-toggle-single-grid.js
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-toggle-single-grid.js
@@ -12,51 +12,51 @@ const TEST_URI = `
     }
   </style>
   <div id="grid">
     <div id="cell1">cell1</div>
     <div id="cell2">cell2</div>
   </div>
 `;
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let { gridInspector, inspector } = yield openLayoutView();
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let { gridInspector, inspector } = await openLayoutView();
   let { document: doc } = gridInspector;
   let { highlighters, store } = inspector;
 
-  yield selectNode("#grid", inspector);
+  await selectNode("#grid", inspector);
   let gridList = doc.getElementById("grid-list");
   let checkbox = gridList.children[0].querySelector("input");
 
   info("Checking the initial state of the Grid Inspector.");
   is(gridList.childNodes.length, 1, "One grid container is listed.");
   ok(!checkbox.checked, `Grid item ${checkbox.value} is unchecked in the grid list.`);
   ok(!highlighters.highlighters[HIGHLIGHTER_TYPE],
     "No CSS grid highlighter exists in the highlighters overlay.");
   ok(!highlighters.gridHighlighterShown, "No CSS grid highlighter is shown.");
 
   info("Toggling ON the CSS grid highlighter from the layout panel.");
   let onHighlighterShown = highlighters.once("grid-highlighter-shown");
   let onCheckboxChange = waitUntilState(store, state =>
     state.grids.length == 1 &&
     state.grids[0].highlighted);
   checkbox.click();
-  yield onHighlighterShown;
-  yield onCheckboxChange;
+  await onHighlighterShown;
+  await onCheckboxChange;
 
   info("Checking the CSS grid highlighter is created.");
   ok(highlighters.highlighters[HIGHLIGHTER_TYPE],
     "CSS grid highlighter is created in the highlighters overlay.");
   ok(highlighters.gridHighlighterShown, "CSS grid highlighter is shown.");
 
   info("Toggling OFF the CSS grid highlighter from the layout panel.");
   let onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
   onCheckboxChange = waitUntilState(store, state =>
     state.grids.length == 1 &&
     !state.grids[0].highlighted);
   checkbox.click();
-  yield onHighlighterHidden;
-  yield onCheckboxChange;
+  await onHighlighterHidden;
+  await onCheckboxChange;
 
   info("Checking the CSS grid highlighter is not shown.");
   ok(!highlighters.gridHighlighterShown, "No CSS grid highlighter is shown.");
 });
--- a/devtools/client/inspector/grids/test/browser_grids_grid-outline-cannot-show-outline.js
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-outline-cannot-show-outline.js
@@ -15,38 +15,38 @@ const TEST_URI = `
     }
   </style>
   <div id="grid">
     <div id="cellA">cell A</div>
     <div id="cellB">cell B</div>
   </div>
 `;
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
 
-  let { inspector, gridInspector } = yield openLayoutView();
+  let { inspector, gridInspector } = await openLayoutView();
   let { document: doc } = gridInspector;
   let { highlighters, store } = inspector;
 
-  yield selectNode("#grid", inspector);
+  await selectNode("#grid", inspector);
   let outline = doc.getElementById("grid-outline-container");
   let gridList = doc.getElementById("grid-list");
   let checkbox = gridList.children[0].querySelector("input");
 
   info("Toggling ON the CSS grid highlighter from the layout panel.");
   let onHighlighterShown = highlighters.once("grid-highlighter-shown");
   let onGridOutlineRendered = waitForDOM(doc, ".grid-outline-text", 1);
   let onCheckboxChange = waitUntilState(store, state =>
     state.grids.length == 1 &&
     state.grids[0].highlighted);
   checkbox.click();
-  yield onHighlighterShown;
-  yield onCheckboxChange;
-  let elements = yield onGridOutlineRendered;
+  await onHighlighterShown;
+  await onCheckboxChange;
+  let elements = await onGridOutlineRendered;
 
   let cannotShowGridOutline = elements[0];
 
   info("Checking the grid outline is not rendered and an appropriate message is shown.");
   ok(!outline, "Outline component is not shown.");
   ok(cannotShowGridOutline,
     "The message 'Cannot show outline for this grid' is displayed.");
 });
--- a/devtools/client/inspector/grids/test/browser_grids_grid-outline-highlight-area.js
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-outline-highlight-area.js
@@ -22,39 +22,39 @@ const TEST_URI = `
     }
   </style>
   <div id="grid">
     <div id="cella" className="top">Cell A</div>
     <div id="cellb" className="bottom">Cell B</div>
   </div>
 `;
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
 
-  let { inspector, gridInspector } = yield openLayoutView();
+  let { inspector, gridInspector } = await openLayoutView();
   let { document: doc } = gridInspector;
   let { highlighters, store } = inspector;
 
   // Don't track reflows since this might cause intermittent failures.
   inspector.reflowTracker.untrackReflows(gridInspector, gridInspector.onReflow);
 
   let gridList = doc.getElementById("grid-list");
   let checkbox = gridList.children[0].querySelector("input");
 
   info("Toggling ON the CSS grid highlighter from the layout panel.");
   let onHighlighterShown = highlighters.once("grid-highlighter-shown");
   let onGridOutlineRendered = waitForDOM(doc, "#grid-cell-group rect", 2);
   let onCheckboxChange = waitUntilState(store, state =>
     state.grids.length == 1 &&
     state.grids[0].highlighted);
   checkbox.click();
-  yield onCheckboxChange;
-  yield onHighlighterShown;
-  let elements = yield onGridOutlineRendered;
+  await onCheckboxChange;
+  await onHighlighterShown;
+  let elements = await onGridOutlineRendered;
 
   let gridCellA = elements[0];
 
   info("Hovering over grid cell A in the grid outline.");
   let onCellAHighlight = highlighters.once("grid-highlighter-shown",
     (nodeFront, options) => {
       info("Checking the grid highlighter options for the show grid area" +
       "and cell parameters.");
@@ -62,10 +62,10 @@ add_task(function* () {
       const { gridFragmentIndex, rowNumber, columnNumber } = showGridCell;
 
       is(gridFragmentIndex, 0, "Should be the first grid fragment index.");
       is(rowNumber, 1, "Should be the first grid row.");
       is(columnNumber, 1, "Should be the first grid column.");
       is(showGridArea, "header", "Grid area name should be 'header'.");
     });
   EventUtils.synthesizeMouse(gridCellA, 1, 1, {type: "mouseover"}, doc.defaultView);
-  yield onCellAHighlight;
+  await onCellAHighlight;
 });
--- a/devtools/client/inspector/grids/test/browser_grids_grid-outline-highlight-cell.js
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-outline-highlight-cell.js
@@ -13,48 +13,48 @@ const TEST_URI = `
     }
   </style>
   <div id="grid">
     <div id="cella">Cell A</div>
     <div id="cellb">Cell B</div>
   </div>
 `;
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
 
-  let { inspector, gridInspector } = yield openLayoutView();
+  let { inspector, gridInspector } = await openLayoutView();
   let { document: doc } = gridInspector;
   let { highlighters, store } = inspector;
 
   // Don't track reflows since this might cause intermittent failures.
   inspector.reflowTracker.untrackReflows(gridInspector, gridInspector.onReflow);
 
   let gridList = doc.getElementById("grid-list");
   let checkbox = gridList.children[0].querySelector("input");
 
   info("Toggling ON the CSS grid highlighter from the layout panel.");
   let onHighlighterShown = highlighters.once("grid-highlighter-shown");
   let onGridOutlineRendered = waitForDOM(doc, "#grid-cell-group rect", 2);
   let onCheckboxChange = waitUntilState(store, state =>
     state.grids.length == 1 &&
     state.grids[0].highlighted);
   checkbox.click();
-  yield onCheckboxChange;
-  yield onHighlighterShown;
-  let elements = yield onGridOutlineRendered;
+  await onCheckboxChange;
+  await onHighlighterShown;
+  let elements = await onGridOutlineRendered;
 
   let gridCellA = elements[0];
 
   info("Hovering over grid cell A in the grid outline.");
   let onCellAHighlight = highlighters.once("grid-highlighter-shown",
     (nodeFront, options) => {
       info("Checking show grid cell options are correct.");
       const { showGridCell } = options;
       const { gridFragmentIndex, rowNumber, columnNumber } = showGridCell;
 
       is(gridFragmentIndex, 0, "Should be the first grid fragment index.");
       is(rowNumber, 1, "Should be the first grid row.");
       is(columnNumber, 1, "Should be the first grid column.");
     });
   EventUtils.synthesizeMouse(gridCellA, 1, 1, {type: "mouseover"}, doc.defaultView);
-  yield onCellAHighlight;
+  await onCellAHighlight;
 });
--- a/devtools/client/inspector/grids/test/browser_grids_grid-outline-selected-grid.js
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-outline-selected-grid.js
@@ -13,20 +13,20 @@ const TEST_URI = `
   </style>
   <div id="grid">
     <div id="cella">Cell A</div>
     <div id="cellb">Cell B</div>
     <div id="cellc">Cell C</div>
   </div>
 `;
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
 
-  let { inspector, gridInspector } = yield openLayoutView();
+  let { inspector, gridInspector } = await openLayoutView();
   let { document: doc } = gridInspector;
   let { highlighters, store } = inspector;
 
   let gridList = doc.getElementById("grid-list");
   let checkbox = gridList.children[0].querySelector("input");
 
   info("Checking the initial state of the Grid Inspector.");
   ok(!doc.getElementById("grid-outline-container"),
@@ -34,15 +34,15 @@ add_task(function* () {
 
   info("Toggling ON the CSS grid highlighter from the layout panel.");
   let onHighlighterShown = highlighters.once("grid-highlighter-shown");
   let onCheckboxChange = waitUntilState(store, state =>
     state.grids.length == 1 &&
     state.grids[0].highlighted);
   let onGridOutlineRendered = waitForDOM(doc, "#grid-cell-group rect", 3);
   checkbox.click();
-  yield onHighlighterShown;
-  yield onCheckboxChange;
-  let elements = yield onGridOutlineRendered;
+  await onHighlighterShown;
+  await onCheckboxChange;
+  let elements = await onGridOutlineRendered;
 
   info("Checking the grid outline is shown.");
   is(elements.length, 3, "Grid outline is shown.");
 });
--- a/devtools/client/inspector/grids/test/browser_grids_grid-outline-updates-on-grid-change.js
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-outline-updates-on-grid-change.js
@@ -15,36 +15,36 @@ const TEST_URI = `
   }
   </style>
   <div class="container">
     <div>item 1</div>
     <div>item 2</div>
   </div>
 `;
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
 
-  let { inspector, gridInspector, testActor } = yield openLayoutView();
+  let { inspector, gridInspector, testActor } = await openLayoutView();
   let { document: doc } = gridInspector;
   let { highlighters, store } = inspector;
 
   info("Clicking on the first checkbox to highlight the grid");
   let checkbox = doc.querySelector("#grid-list input");
 
   let onHighlighterShown = highlighters.once("grid-highlighter-shown");
   let onCheckboxChange = waitUntilState(store, state =>
     state.grids.length == 1 && state.grids[0].highlighted);
   let onGridOutlineRendered = waitForDOM(doc, ".grid-outline-cell", 2);
 
   checkbox.click();
 
-  yield onHighlighterShown;
-  yield onCheckboxChange;
-  let elements = yield onGridOutlineRendered;
+  await onHighlighterShown;
+  await onCheckboxChange;
+  let elements = await onGridOutlineRendered;
 
   info("Checking the grid outline is shown.");
   is(elements.length, 2, "Grid outline is shown.");
 
   info("Changing the grid in the page");
   let onReflow = new Promise(resolve => {
     let listener = {
       callback: () => {
@@ -57,14 +57,14 @@ add_task(function* () {
   let onGridOutlineChanged = waitForDOM(doc, ".grid-outline-cell", 4);
 
   testActor.eval(`
     const div = document.createElement("div");
     div.textContent = "item 3";
     document.querySelector(".container").appendChild(div);
   `);
 
-  yield onReflow;
-  elements = yield onGridOutlineChanged;
+  await onReflow;
+  elements = await onGridOutlineChanged;
 
   info("Checking the grid outline is correct.");
   is(elements.length, 4, "Grid outline was changed.");
 });
--- a/devtools/client/inspector/grids/test/browser_grids_highlighter-setting-rules-grid-toggle.js
+++ b/devtools/client/inspector/grids/test/browser_grids_highlighter-setting-rules-grid-toggle.js
@@ -15,38 +15,38 @@ const TEST_URI = `
   <div id="grid">
     <div id="cell1">cell1</div>
     <div id="cell2">cell2</div>
   </div>
 `;
 
 const SHOW_INFINITE_LINES_PREF = "devtools.gridinspector.showInfiniteLines";
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let { inspector, gridInspector } = yield openLayoutView();
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let { inspector, gridInspector } = await openLayoutView();
   let { document: doc } = gridInspector;
   let { store } = inspector;
 
   let checkbox = doc.getElementById("grid-setting-extend-grid-lines");
 
   ok(!Services.prefs.getBoolPref(SHOW_INFINITE_LINES_PREF),
     "'Extend grid lines infinitely' is pref off by default.");
 
   info("Toggling ON the 'Extend grid lines infinitely' setting.");
   let onCheckboxChange = waitUntilState(store, state =>
     state.highlighterSettings.showInfiniteLines);
   checkbox.click();
-  yield onCheckboxChange;
+  await onCheckboxChange;
 
   info("Selecting the rule view.");
   let ruleView = selectRuleView(inspector);
   let highlighters = ruleView.highlighters;
 
-  yield selectNode("#grid", inspector);
+  await selectNode("#grid", inspector);
 
   let container = getRuleViewProperty(ruleView, "#grid", "display").valueSpan;
   let gridToggle = container.querySelector(".ruleview-grid");
 
   info("Toggling ON the CSS grid highlighter from the rule-view.");
   let onHighlighterShown = highlighters.once("grid-highlighter-shown",
     (nodeFront, options) => {
       info("Checking the grid highlighter display settings.");
@@ -59,12 +59,12 @@ add_task(function* () {
 
       is(color, "#9400FF", "CSS grid highlighter color is correct.");
       ok(!showGridAreasOverlay, "Show grid areas overlay option is off.");
       ok(!showGridLineNumbers, "Show grid line numbers option is off.");
       ok(showInfiniteLines, "Show infinite lines option is on.");
     }
   );
   gridToggle.click();
-  yield onHighlighterShown;
+  await onHighlighterShown;
 
   Services.prefs.clearUserPref(SHOW_INFINITE_LINES_PREF);
 });
--- a/devtools/client/inspector/grids/test/browser_grids_no_fragments.js
+++ b/devtools/client/inspector/grids/test/browser_grids_no_fragments.js
@@ -18,32 +18,32 @@ const TEST_URI = `
     </div>
     <div class="grid">
       <div>cell1</div>
       <div>cell2</div>
     </div>
   </div>
 `;
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
 
-  let { inspector, gridInspector } = yield openLayoutView();
+  let { inspector, gridInspector } = await openLayoutView();
   let { document: doc } = gridInspector;
   let { store } = inspector;
 
   let gridList = doc.querySelector("#grid-list");
   is(gridList.children.length, 2, "There are 2 grids in the list");
 
   info("Try to click the first grid's checkbox");
   let checkbox1 = gridList.children[0].querySelector("input");
   let onCheckbox1Change = waitUntilState(store, state =>
     state.grids[0] && state.grids[0].highlighted);
   checkbox1.click();
-  yield onCheckbox1Change;
+  await onCheckbox1Change;
 
   info("Try to click the second grid's checkbox");
   let checkbox2 = gridList.children[1].querySelector("input");
   let onCheckbox2Change = waitUntilState(store, state =>
     state.grids[1] && state.grids[1].highlighted);
   checkbox2.click();
-  yield onCheckbox2Change;
+  await onCheckbox2Change;
 });
--- a/devtools/client/inspector/grids/test/browser_grids_number-of-css-grids-telemetry.js
+++ b/devtools/client/inspector/grids/test/browser_grids_number-of-css-grids-telemetry.js
@@ -19,27 +19,27 @@ const TEST_URI2 = `
   <div id="grid">
     <div id="cell1">cell1</div>
     <div id="cell2">cell2</div>
   </div>
 `;
 
 const CSS_GRID_COUNT_HISTOGRAM_ID = "DEVTOOLS_NUMBER_OF_CSS_GRIDS_IN_A_PAGE";
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI1));
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI1));
 
-  let { inspector } = yield openLayoutView();
+  let { inspector } = await openLayoutView();
   let { store } = inspector;
 
   info("Navigate to TEST_URI2");
 
   let onGridListUpdate = waitUntilState(store, state => state.grids.length == 1);
-  yield navigateTo(inspector,
+  await navigateTo(inspector,
     "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI2));
-  yield onGridListUpdate;
+  await onGridListUpdate;
 
   let histogram = Services.telemetry.getHistogramById(CSS_GRID_COUNT_HISTOGRAM_ID);
   let snapshot = histogram.snapshot();
 
   is(snapshot.counts[1], 1, "Got a count of 1 for 1 CSS Grid element seen.");
   is(snapshot.sum, 1, "Got the correct sum.");
 });
--- a/devtools/client/inspector/grids/test/browser_grids_restored-after-reload.js
+++ b/devtools/client/inspector/grids/test/browser_grids_restored-after-reload.js
@@ -27,61 +27,61 @@ const OTHER_URI = `
   </style>
   <div id="grid">
     <div id="cell1">cell1</div>
     <div id="cell2">cell2</div>
     <div id="cell3">cell3</div>
   </div>
 `;
 
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let { gridInspector, inspector } = yield openLayoutView();
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let { gridInspector, inspector } = await openLayoutView();
   let { document: doc } = gridInspector;
   let { highlighters, store } = inspector;
 
-  yield selectNode("#grid", inspector);
+  await selectNode("#grid", inspector);
   let gridList = doc.getElementById("grid-list");
   let checkbox = gridList.children[0].querySelector("input");
 
   info("Toggling ON the CSS grid highlighter from the layout panel.");
   let onHighlighterShown = highlighters.once("grid-highlighter-shown");
   let onCheckboxChange = waitUntilState(store, state =>
     state.grids.length == 1 &&
     state.grids[0].highlighted);
   checkbox.click();
-  yield onHighlighterShown;
-  yield onCheckboxChange;
+  await onHighlighterShown;
+  await onCheckboxChange;
 
   info("Checking the CSS grid highlighter is created.");
   ok(highlighters.highlighters[HIGHLIGHTER_TYPE],
     "CSS grid highlighter is created in the highlighters overlay.");
   ok(highlighters.gridHighlighterShown, "CSS grid highlighter is shown.");
 
   info("Reload the page, expect the highlighter to be displayed once again and " +
     "grid is checked");
   let onStateRestored = highlighters.once("grid-state-restored");
   let onGridListRestored = waitUntilState(store, state =>
     state.grids.length == 1 &&
     state.grids[0].highlighted);
-  yield refreshTab();
-  let { restored } = yield onStateRestored;
-  yield onGridListRestored;
+  await refreshTab();
+  let { restored } = await onStateRestored;
+  await onGridListRestored;
 
   info("Check that the grid highlighter can be displayed after reloading the page");
   ok(restored, "The highlighter state was restored");
   ok(highlighters.gridHighlighterShown, "CSS grid highlighter is shown.");
 
   info("Navigate to another URL, and check that the highlighter is hidden and " +
     "grid is unchecked");
   let otherUri = "data:text/html;charset=utf-8," + encodeURIComponent(OTHER_URI);
   onStateRestored = highlighters.once("grid-state-restored");
   onGridListRestored = waitUntilState(store, state =>
     state.grids.length == 1 &&
     !state.grids[0].highlighted);
-  yield navigateTo(inspector, otherUri);
-  ({ restored } = yield onStateRestored);
-  yield onGridListRestored;
+  await navigateTo(inspector, otherUri);
+  ({ restored } = await onStateRestored);
+  await onGridListRestored;
 
   info("Check that the grid highlighter is hidden after navigating to a different page");
   ok(!restored, "The highlighter state was not restored");
   ok(!highlighters.gridHighlighterShown, "CSS grid highlighter is hidden.");
 });
--- a/devtools/client/inspector/grids/test/head.js
+++ b/devtools/client/inspector/grids/test/head.js
@@ -27,21 +27,21 @@ const HIGHLIGHTER_TYPE = "CssGridHighlig
 /**
  * Simulate a color change in a given color picker tooltip.
  *
  * @param  {Spectrum|ColorWidget} colorPicker
  *         The color picker widget.
  * @param  {Array} newRgba
  *         Array of the new rgba values to be set in the color widget.
  */
-var simulateColorPickerChange = Task.async(function* (colorPicker, newRgba) {
+var simulateColorPickerChange = async function(colorPicker, newRgba) {
   info("Getting the spectrum colorpicker object");
-  let spectrum = yield colorPicker.spectrum;
+  let spectrum = await colorPicker.spectrum;
   info("Setting the new color");
   spectrum.rgb = newRgba;
   info("Applying the change");
   spectrum.updateUI();
   spectrum.onChange();
-});
+};
 
 registerCleanupFunction(async function() {
   await asyncStorage.removeItem("gridInspectorHostColors");
 });
--- a/devtools/client/inspector/inspector-commands.js
+++ b/devtools/client/inspector/inspector-commands.js
@@ -23,22 +23,22 @@ exports.items = [{
   params: [
     {
       name: "selector",
       type: "string",
       description: l10n.lookup("inspectNodeDesc"),
       manual: l10n.lookup("inspectNodeManual")
     }
   ],
-  exec: function* (args, context) {
+  exec: async function(args, context) {
     let target = context.environment.target;
-    let toolbox = yield gDevTools.showToolbox(target, "inspector");
+    let toolbox = await gDevTools.showToolbox(target, "inspector");
     let walker = toolbox.getCurrentPanel().walker;
-    let rootNode = yield walker.getRootNode();
-    let nodeFront = yield walker.querySelector(rootNode, args.selector);
+    let rootNode = await walker.getRootNode();
+    let nodeFront = await walker.querySelector(rootNode, args.selector);
     toolbox.getCurrentPanel().selection.setNodeFront(nodeFront, "gcli");
   },
 }, {
   item: "command",
   runAt: "client",
   name: "eyedropper",
   description: l10n.lookup("eyedropperDesc"),
   manual: l10n.lookup("eyedropperManual"),
@@ -52,29 +52,29 @@ exports.items = [{
       type: "boolean",
       hidden: true
     }, {
       name: "hide",
       type: "boolean",
       hidden: true
     }]
   }],
-  exec: function* (args, context) {
+  exec: async function(args, context) {
     if (args.hide) {
       context.updateExec("eyedropper_server_hide").catch(console.error);
       return;
     }
 
     // If the inspector is already picking a color from the page, cancel it.
     let target = context.environment.target;
     let toolbox = gDevTools.getToolbox(target);
     if (toolbox) {
       let inspector = toolbox.getPanel("inspector");
       if (inspector) {
-        yield inspector.hideEyeDropper();
+        await inspector.hideEyeDropper();
       }
     }
 
     let telemetry = new Telemetry();
     telemetry.toolOpened(args.frommenu ? "menueyedropper" : "eyedropper");
     context.updateExec("eyedropper_server").catch(console.error);
   }
 }, {
--- a/devtools/client/inspector/inspector-search.js
+++ b/devtools/client/inspector/inspector-search.js
@@ -1,16 +1,15 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const promise = require("promise");
-const {Task} = require("devtools/shared/task");
 const {KeyCodes} = require("devtools/client/shared/keycodes");
 
 const EventEmitter = require("devtools/shared/event-emitter");
 const AutocompletePopup = require("devtools/client/shared/autocomplete-popup");
 const Services = require("Services");
 
 // Maximum number of selector suggestions shown in the panel.
 const MAX_SUGGESTIONS = 15;
@@ -70,46 +69,46 @@ InspectorSearch.prototype = {
     this.autocompleter.destroy();
   },
 
   _onSearch: function(reverse = false) {
     this.doFullTextSearch(this.searchBox.value, reverse)
         .catch(console.error);
   },
 
-  doFullTextSearch: Task.async(function* (query, reverse) {
+  async doFullTextSearch(query, reverse) {
     let lastSearched = this._lastSearched;
     this._lastSearched = query;
 
     if (query.length === 0) {
       this.searchBox.classList.remove("devtools-style-searchbox-no-match");
       if (!lastSearched || lastSearched.length > 0) {
         this.emit("search-cleared");
       }
       return;
     }
 
-    let res = yield this.walker.search(query, { reverse });
+    let res = await this.walker.search(query, { reverse });
 
     // Value has changed since we started this request, we're done.
     if (query !== this.searchBox.value) {
       return;
     }
 
     if (res) {
       this.inspector.selection.setNodeFront(res.node, "inspectorsearch");
       this.searchBox.classList.remove("devtools-style-searchbox-no-match");
 
       res.query = query;
       this.emit("search-result", res);
     } else {
       this.searchBox.classList.add("devtools-style-searchbox-no-match");
       this.emit("search-result");
     }
-  }),
+  },
 
   _onInput: function() {
     if (this.searchBox.value.length === 0) {
       this.searchClearButton.hidden = true;
       this._onSearch();
     } else {
       this.searchClearButton.hidden = false;
     }
--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -7,17 +7,16 @@
 /* global window, BrowserLoader */
 
 "use strict";
 
 const Services = require("Services");
 const promise = require("promise");
 const EventEmitter = require("devtools/shared/event-emitter");
 const {executeSoon} = require("devtools/shared/DevToolsUtils");
-const {Task} = require("devtools/shared/task");
 const {PrefObserver} = require("devtools/client/shared/prefs");
 const Telemetry = require("devtools/client/shared/telemetry");
 const HighlightersOverlay = require("devtools/client/inspector/shared/highlighters-overlay");
 const ReflowTracker = require("devtools/client/inspector/shared/reflow-tracker");
 const Store = require("devtools/client/inspector/store");
 
 // Use privileged promise in panel documents to prevent having them to freeze
 // during toolbox destruction. See bug 1402779.
@@ -140,31 +139,31 @@ function Inspector(toolbox) {
 
   this._target.on("will-navigate", this._onBeforeNavigate);
 }
 
 Inspector.prototype = {
   /**
    * open is effectively an asynchronous constructor
    */
-  init: Task.async(function* () {
+  async init() {
     // Localize all the nodes containing a data-localization attribute.
     localizeMarkup(this.panelDoc);
 
-    this._cssProperties = yield initCssProperties(this.toolbox);
-    yield this.target.makeRemote();
-    yield this._getPageStyle();
+    this._cssProperties = await initCssProperties(this.toolbox);
+    await this.target.makeRemote();
+    await this._getPageStyle();
 
     // This may throw if the document is still loading and we are
     // refering to a dead about:blank document
-    let defaultSelection = yield this._getDefaultNodeForSelection()
+    let defaultSelection = await this._getDefaultNodeForSelection()
       .catch(this._handleRejectionIfNotDestroyed);
 
-    return yield this._deferredOpen(defaultSelection);
-  }),
+    return this._deferredOpen(defaultSelection);
+  },
 
   get toolbox() {
     return this._toolbox;
   },
 
   get inspector() {
     return this._toolbox.inspector;
   },
@@ -945,48 +944,48 @@ Inspector.prototype = {
 
   /**
    * Method to check whether the document is a HTML document and
    * pickColorFromPage method is available or not.
    *
    * @return {Boolean} true if the eyedropper highlighter is supported by the current
    *         document.
    */
-  supportsEyeDropper: Task.async(function* () {
+  async supportsEyeDropper() {
     try {
       let hasSupportsHighlighters =
-        yield this.target.actorHasMethod("inspector", "supportsHighlighters");
+        await this.target.actorHasMethod("inspector", "supportsHighlighters");
 
       let supportsHighlighters;
       if (hasSupportsHighlighters) {
-        supportsHighlighters = yield this.inspector.supportsHighlighters();
+        supportsHighlighters = await this.inspector.supportsHighlighters();
       } else {
         // If the actor does not provide the supportsHighlighter method, fallback to
         // check if the selected node's document is a HTML document.
         let { nodeFront } = this.selection;
         supportsHighlighters = nodeFront && nodeFront.isInHTMLDocument;
       }
 
       return supportsHighlighters;
     } catch (e) {
       console.error(e);
       return false;
     }
-  }),
+  },
 
-  setupToolbar: Task.async(function* () {
+  async setupToolbar() {
     this.teardownToolbar();
 
     // Setup the add-node button.
     this.addNode = this.addNode.bind(this);
     this.addNodeButton = this.panelDoc.getElementById("inspector-element-add-button");
     this.addNodeButton.addEventListener("click", this.addNode);
 
     // Setup the eye-dropper icon if we're in an HTML document and we have actor support.
-    let canShowEyeDropper = yield this.supportsEyeDropper();
+    let canShowEyeDropper = await this.supportsEyeDropper();
 
     // Bail out if the inspector was destroyed in the meantime and panelDoc is no longer
     // available.
     if (!this.panelDoc) {
       return;
     }
 
     if (canShowEyeDropper) {
@@ -1013,17 +1012,17 @@ Inspector.prototype = {
         collapsePaneTitle: INSPECTOR_L10N.getStr("inspector.hideSplitRulesView"),
         expandPaneTitle: INSPECTOR_L10N.getStr("inspector.showSplitRulesView"),
         onClick: this.onSidebarToggle
       });
 
       let parentBox = this.panelDoc.getElementById("inspector-sidebar-toggle-box");
       this.sidebarToggle = this.ReactDOM.render(sidebarToggle, parentBox);
     }
-  }),
+  },
 
   teardownToolbar: function() {
     if (this.addNodeButton) {
       this.addNodeButton.removeEventListener("click", this.addNode);
       this.addNodeButton = null;
     }
 
     if (this.eyeDropperButton) {
@@ -1063,52 +1062,52 @@ Inspector.prototype = {
         .then(onNodeSelected, this._handleRejectionIfNotDestroyed);
   },
 
   /**
    * Handler for "markuploaded" event fired on a new root mutation and after the markup
    * view is initialized. Expands the current selected node and restores the saved
    * highlighter state.
    */
-  onMarkupLoaded: Task.async(function* () {
+  async onMarkupLoaded() {
     if (!this.markup) {
       return;
     }
 
     let onExpand = this.markup.expandNode(this.selection.nodeFront);
 
     // Restore the highlighter states prior to emitting "new-root".
-    yield Promise.all([
+    await Promise.all([
       this.highlighters.restoreFlexboxState(),
       this.highlighters.restoreGridState(),
       this.highlighters.restoreShapeState()
     ]);
 
     this.emit("new-root");
 
     // Wait for full expand of the selected node in order to ensure
     // the markup view is fully emitted before firing 'reloaded'.
     // 'reloaded' is used to know when the panel is fully updated
     // after a page reload.
-    yield onExpand;
+    await onExpand;
 
     this.emit("reloaded");
 
     // Record the time between new-root event and inspector fully loaded.
     if (this._newRootStart) {
       // Only log the timing when inspector is not destroyed and is in foreground.
       if (this.toolbox && this.toolbox.currentToolId == "inspector") {
         let delay = this.panelWin.performance.now() - this._newRootStart;
         let telemetryKey = "DEVTOOLS_INSPECTOR_NEW_ROOT_TO_RELOAD_DELAY_MS";
         let histogram = Services.telemetry.getHistogramById(telemetryKey);
         histogram.add(delay);
       }
       delete this._newRootStart;
     }
-  }),
+  },
 
   _selectionCssSelector: null,
 
   /**
    * Set the currently selected node unique css selector.
    * Will store the current target url along with it to allow pre-selection at
    * reload
    */
@@ -1846,31 +1845,31 @@ Inspector.prototype = {
     return this.inspector.cancelPickColorFromPage()
                          .catch(console.error);
   },
 
   /**
    * Create a new node as the last child of the current selection, expand the
    * parent and select the new node.
    */
-  addNode: Task.async(function* () {
+  async addNode() {
     if (!this.canAddHTMLChild()) {
       return;
     }
 
     let html = "<div></div>";
 
     // Insert the html and expect a childList markup mutation.
     let onMutations = this.once("markupmutation");
-    yield this.walker.insertAdjacentHTML(this.selection.nodeFront, "beforeEnd", html);
-    yield onMutations;
+    await this.walker.insertAdjacentHTML(this.selection.nodeFront, "beforeEnd", html);
+    await onMutations;
 
     // Expand the parent node.
     this.markup.expandNode(this.selection.nodeFront);
-  }),
+  },
 
   /**
    * Toggle a pseudo class.
    */
   togglePseudoClass: function(pseudo) {
     if (this.selection.isElementNode()) {
       let node = this.selection.nodeFront;
       if (node.hasPseudoClassLock(pseudo)) {
@@ -2097,33 +2096,33 @@ Inspector.prototype = {
     this.selection.nodeFront.getXPath().then(path => {
       clipboardHelper.copyString(path);
     }).catch(console.error);
   },
 
   /**
    * Initiate gcli screenshot command on selected node.
    */
-  screenshotNode: Task.async(function* () {
+  async screenshotNode() {
     const command = Services.prefs.getBoolPref("devtools.screenshot.clipboard.enabled") ?
       "screenshot --file --clipboard --selector" :
       "screenshot --file --selector";
 
     // Bug 1332936 - it's possible to call `screenshotNode` while the BoxModel highlighter
     // is still visible, therefore showing it in the picture.
     // To avoid that, we have to hide it before taking the screenshot. The `hideBoxModel`
     // will do that, calling `hide` for the highlighter only if previously shown.
-    yield this.highlighter.hideBoxModel();
+    await this.highlighter.hideBoxModel();
 
     // Bug 1180314 -  CssSelector might contain white space so need to make sure it is
     // passed to screenshot as a single parameter.  More work *might* be needed if
     // CssSelector could contain escaped single- or double-quotes, backslashes, etc.
     CommandUtils.executeOnTarget(this._target,
       `${command} '${this.selectionCssSelector}'`);
-  }),
+  },
 
   /**
    * Scroll the node into view.
    */
   scrollNodeIntoView: function() {
     if (!this.selection.isNode()) {
       return;
     }
@@ -2339,17 +2338,17 @@ Inspector.prototype = {
  * @param {Function} createThreadClient
  *        When supported the thread client needs a reference to the toolbox.
  *        This callback will be called right after the toolbox object is created.
  * @param {Object} dependencies
  *        - react
  *        - reactDOM
  *        - browserRequire
  */
-const buildFakeToolbox = Task.async(function* (
+const buildFakeToolbox = async function(
   target, createThreadClient, {
     React,
     ReactDOM,
     browserRequire
   }) {
   const { InspectorFront } = require("devtools/shared/fronts/inspector");
   const { Selection } = require("devtools/client/framework/selection");
   const { getHighlighterUtils } = require("devtools/client/framework/toolbox-highlighter-utils");
@@ -2392,54 +2391,54 @@ const buildFakeToolbox = Task.async(func
     // For attachThread:
     highlightTool() {},
     unhighlightTool() {},
     selectTool() {},
     raise() {},
     getNotificationBox() {}
   };
 
-  fakeToolbox.threadClient = yield createThreadClient(fakeToolbox);
+  fakeToolbox.threadClient = await createThreadClient(fakeToolbox);
 
   let inspector = InspectorFront(target.client, target.form);
   let showAllAnonymousContent =
     Services.prefs.getBoolPref("devtools.inspector.showAllAnonymousContent");
-  let walker = yield inspector.getWalker({ showAllAnonymousContent });
+  let walker = await inspector.getWalker({ showAllAnonymousContent });
   let selection = new Selection(walker);
-  let highlighter = yield inspector.getHighlighter(false);
+  let highlighter = await inspector.getHighlighter(false);
   fakeToolbox.highlighterUtils = getHighlighterUtils(fakeToolbox);
 
   fakeToolbox.inspector = inspector;
   fakeToolbox.walker = walker;
   fakeToolbox.selection = selection;
   fakeToolbox.highlighter = highlighter;
   return fakeToolbox;
-});
+};
 
 // URL constructor doesn't support chrome: scheme
 let href = window.location.href.replace(/chrome:/, "http://");
 let url = new window.URL(href);
 
 // If query parameters are given in a chrome tab, the inspector is running in standalone.
 if (window.location.protocol === "chrome:" && url.search.length > 1) {
   const { targetFromURL } = require("devtools/client/framework/target-from-url");
   const { attachThread } = require("devtools/client/framework/attach-thread");
 
   const browserRequire = BrowserLoader({ window, useOnlyShared: true }).require;
   const React = browserRequire("devtools/client/shared/vendor/react");
   const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
 
-  Task.spawn(function* () {
-    let target = yield targetFromURL(url);
-    let fakeToolbox = yield buildFakeToolbox(
+  (async function() {
+    let target = await targetFromURL(url);
+    let fakeToolbox = await buildFakeToolbox(
       target,
       (toolbox) => attachThread(toolbox),
       { React, ReactDOM, browserRequire }
     );
     let inspectorUI = new Inspector(fakeToolbox);
     inspectorUI.init();
-  }).catch(e => {
+  })().catch(e => {
     window.alert("Unable to start the inspector:" + e.message + "\n" + e.stack);
   });
 }
 
 exports.Inspector = Inspector;
 exports.buildFakeToolbox = buildFakeToolbox;
--- a/devtools/client/inspector/markup/markup.js
+++ b/devtools/client/inspector/markup/markup.js
@@ -1,17 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const promise = require("promise");
 const Services = require("Services");
-const {Task} = require("devtools/shared/task");
 const nodeConstants = require("devtools/shared/dom-node-constants");
 const nodeFilterConstants = require("devtools/shared/dom-node-filter-constants");
 const EventEmitter = require("devtools/shared/event-emitter");
 const {LocalizationHelper} = require("devtools/shared/l10n");
 const {PluralForm} = require("devtools/shared/plural-form");
 const AutocompletePopup = require("devtools/client/shared/autocomplete-popup");
 const KeyShortcuts = require("devtools/client/shared/key-shortcuts");
 const {scrollIntoViewIfNeeded} = require("devtools/client/shared/scroll");
@@ -507,17 +506,17 @@ MarkupView.prototype = {
    * to decide whether this target should be used to display an image preview
    * tooltip.
    * Delegates the actual decision to the corresponding MarkupContainer instance
    * if one is found.
    *
    * @return {Promise} the promise returned by
    *         MarkupElementContainer._isImagePreviewTarget
    */
-  _isImagePreviewTarget: Task.async(function* (target) {
+  async _isImagePreviewTarget(target) {
     // From the target passed here, let's find the parent MarkupContainer
     // and ask it if the tooltip should be shown
     if (this.isDragging) {
       return false;
     }
 
     let parent = target, container;
     while (parent) {
@@ -530,17 +529,17 @@ MarkupView.prototype = {
 
     if (container instanceof MarkupElementContainer) {
       // With the newly found container, delegate the tooltip content creation
       // and decision to show or not the tooltip
       return container.isImagePreviewTarget(target, this.imagePreviewTooltip);
     }
 
     return false;
-  }),
+  },
 
   /**
    * Given the known reason, should the current selection be briefly highlighted
    * In a few cases, we don't want to highlight the node:
    * - If the reason is null (used to reset the selection),
    * - if it's "inspector-open" (when the inspector opens up, let's not
    * highlight the default node)
    * - if it's "navigateaway" (since the page is being navigated away from)
--- a/devtools/client/inspector/markup/test/browser_markup_accessibility_focus_blur.js
+++ b/devtools/client/inspector/markup/test/browser_markup_accessibility_focus_blur.js
@@ -2,58 +2,58 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 // Test inspector markup view handling focus and blur when moving between markup
 // view, its root and other containers, and other parts of inspector.
 
-add_task(function* () {
-  let {inspector, testActor} = yield openInspectorForURL(
+add_task(async function() {
+  let {inspector, testActor} = await openInspectorForURL(
     "data:text/html;charset=utf-8,<h1>foo</h1><span>bar</span>");
   let markup = inspector.markup;
   let doc = markup.doc;
   let win = doc.defaultView;
 
-  let spanContainer = yield getContainerForSelector("span", inspector);
+  let spanContainer = await getContainerForSelector("span", inspector);
   let rootContainer = markup.getContainer(markup._rootNode);
 
   is(doc.activeElement, doc.body,
     "Keyboard focus by default is on document body");
 
-  yield selectNode("span", inspector);
+  await selectNode("span", inspector);
 
   is(doc.activeElement, doc.body,
     "Keyboard focus is still on document body");
 
   info("Focusing on the test span node using 'Return' key");
   // Focus on the tree element.
   rootContainer.elt.focus();
   EventUtils.synthesizeKey("VK_RETURN", {}, win);
 
   is(doc.activeElement, spanContainer.editor.tag,
     "Keyboard focus should be on tag element of focused container");
 
   info("Focusing on search box, external to markup view document");
-  yield focusSearchBoxUsingShortcut(inspector.panelWin);
+  await focusSearchBoxUsingShortcut(inspector.panelWin);
 
   is(doc.activeElement, doc.body,
     "Keyboard focus should be removed from focused container");
 
   info("Selecting the test span node again");
-  yield selectNode("span", inspector);
+  await selectNode("span", inspector);
 
   is(doc.activeElement, doc.body,
     "Keyboard focus should again be on document body");
 
   info("Focusing on the test span node using 'Space' key");
   // Focus on the tree element.
   rootContainer.elt.focus();
   EventUtils.synthesizeKey("VK_SPACE", {}, win);
 
   is(doc.activeElement, spanContainer.editor.tag,
     "Keyboard focus should again be on tag element of focused container");
 
-  yield clickOnInspectMenuItem(testActor, "h1");
+  await clickOnInspectMenuItem(testActor, "h1");
   is(doc.activeElement, rootContainer.elt,
     "When inspect menu item is used keyboard focus should move to tree.");
 });
--- a/devtools/client/inspector/markup/test/browser_markup_accessibility_navigation.js
+++ b/devtools/client/inspector/markup/test/browser_markup_accessibility_navigation.js
@@ -236,41 +236,41 @@ const TESTS = [
     options: { },
     waitFor: "inspector-updated"
   },
 ];
 
 let containerID = 0;
 let elms = {};
 
-add_task(function* () {
-  let { inspector } = yield openInspectorForURL(`data:text/html;charset=utf-8,
+add_task(async function() {
+  let { inspector } = await openInspectorForURL(`data:text/html;charset=utf-8,
     <h1 id="some-id" class="some-class">foo<span>Child span<span></h1>`);
 
   // Record containers that are created after inspector is initialized to be
   // useful in testing.
   inspector.on("container-created", memorizeContainer);
   registerCleanupFunction(() => {
     inspector.off("container-created", memorizeContainer);
   });
 
   elms.docBody = inspector.markup.doc.body;
   elms.root = inspector.markup.getContainer(inspector.markup._rootNode);
-  elms.header = yield getContainerForSelector("h1", inspector);
-  elms.body = yield getContainerForSelector("body", inspector);
+  elms.header = await getContainerForSelector("h1", inspector);
+  elms.body = await getContainerForSelector("body", inspector);
 
   // Initial focus is on root element and active descendant should be set on
   // body tag line.
   testNavigationState(inspector, elms, elms.docBody, elms.body.tagLine);
 
   // Focus on the tree element.
   elms.root.elt.focus();
 
   for (let testData of TESTS) {
-    yield runAccessibilityNavigationTest(inspector, elms, testData);
+    await runAccessibilityNavigationTest(inspector, elms, testData);
   }
 
   elms = null;
 });
 
 // Record all containers that are created dynamically into elms object.
 function memorizeContainer(container) {
   elms[`container-${containerID++}`] = container;
--- a/devtools/client/inspector/markup/test/browser_markup_accessibility_navigation_after_edit.js
+++ b/devtools/client/inspector/markup/test/browser_markup_accessibility_navigation_after_edit.js
@@ -97,30 +97,30 @@ const TESTS = [
     activedescendant: "div.tagLine",
     key: "VK_TAB",
     options: { }
   },
 ];
 
 let elms = {};
 
-add_task(function* () {
+add_task(async function() {
   let url = `data:text/html;charset=utf-8,${TEST_URI}`;
-  let { inspector } = yield openInspectorForURL(url);
+  let { inspector } = await openInspectorForURL(url);
 
   elms.docBody = inspector.markup.doc.body;
   elms.root = inspector.markup.getContainer(inspector.markup._rootNode);
-  elms.div = yield getContainerForSelector("div", inspector);
-  elms.body = yield getContainerForSelector("body", inspector);
+  elms.div = await getContainerForSelector("div", inspector);
+  elms.body = await getContainerForSelector("body", inspector);
 
   // Initial focus is on root element and active descendant should be set on
   // body tag line.
   testNavigationState(inspector, elms, elms.docBody, elms.body.tagLine);
 
   // Focus on the tree element.
   elms.root.elt.focus();
 
   for (let testData of TESTS) {
-    yield runAccessibilityNavigationTest(inspector, elms, testData);
+    await runAccessibilityNavigationTest(inspector, elms, testData);
   }
 
   elms = null;
 });
--- a/devtools/client/inspector/markup/test/browser_markup_accessibility_new_selection.js
+++ b/devtools/client/inspector/markup/test/browser_markup_accessibility_new_selection.js
@@ -3,24 +3,24 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 // Test inspector markup view handling new node selection that is triggered by
 // the user keyboard action. In this case markup tree container must receive
 // keyboard focus so that further interactions continue within the markup tree.
 
-add_task(function* () {
-  let { inspector } = yield openInspectorForURL(
+add_task(async function() {
+  let { inspector } = await openInspectorForURL(
     "data:text/html;charset=utf-8,<h1>foo</h1><span>bar</span>");
   let markup = inspector.markup;
   let doc = markup.doc;
   let rootContainer = markup.getContainer(markup._rootNode);
 
   is(doc.activeElement, doc.body, "Keyboard focus by default is on document body");
 
-  yield selectNode("span", inspector, "test");
+  await selectNode("span", inspector, "test");
   is(doc.activeElement, doc.body, "Keyboard focus remains on document body.");
 
-  yield selectNode("h1", inspector, "test-keyboard");
+  await selectNode("h1", inspector, "test-keyboard");
   is(doc.activeElement, rootContainer.elt,
     "Keyboard focus must be on the markup tree conainer.");
 });
--- a/devtools/client/inspector/markup/test/browser_markup_anonymous_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_anonymous_01.js
@@ -2,43 +2,43 @@
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test native anonymous content in the markupview.
 const TEST_URL = URL_ROOT + "doc_markup_anonymous.html";
 
-add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector} = await openInspectorForURL(TEST_URL);
 
-  let pseudo = yield getNodeFront("#pseudo", inspector);
+  let pseudo = await getNodeFront("#pseudo", inspector);
 
   // Markup looks like: <div><::before /><span /><::after /></div>
-  let children = yield inspector.walker.children(pseudo);
+  let children = await inspector.walker.children(pseudo);
   is(children.nodes.length, 3, "Children returned from walker");
 
   info("Checking the ::before pseudo element");
   let before = children.nodes[0];
-  yield isEditingMenuDisabled(before, inspector);
+  await isEditingMenuDisabled(before, inspector);
 
   info("Checking the normal child element");
   let span = children.nodes[1];
-  yield isEditingMenuEnabled(span, inspector);
+  await isEditingMenuEnabled(span, inspector);
 
   info("Checking the ::after pseudo element");
   let after = children.nodes[2];
-  yield isEditingMenuDisabled(after, inspector);
+  await isEditingMenuDisabled(after, inspector);
 
-  let native = yield getNodeFront("#native", inspector);
+  let native = await getNodeFront("#native", inspector);
 
   // Markup looks like: <div><video controls /></div>
-  let nativeChildren = yield inspector.walker.children(native);
+  let nativeChildren = await inspector.walker.children(native);
   is(nativeChildren.nodes.length, 1, "Children returned from walker");
 
   info("Checking the video element");
   let video = nativeChildren.nodes[0];
   ok(!video.isAnonymous, "<video> is not anonymous");
 
-  let videoChildren = yield inspector.walker.children(video);
+  let videoChildren = await inspector.walker.children(video);
   is(videoChildren.nodes.length, 0,
     "No native children returned from walker for <video> by default");
 });
--- a/devtools/client/inspector/markup/test/browser_markup_anonymous_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_anonymous_02.js
@@ -4,28 +4,28 @@
 
 "use strict";
 
 requestLongerTimeout(2);
 
 // Test XBL anonymous content in the markupview
 const TEST_URL = "chrome://devtools/content/scratchpad/scratchpad.xul";
 
-add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector} = await openInspectorForURL(TEST_URL);
 
-  let toolbarbutton = yield getNodeFront("toolbarbutton", inspector);
-  let children = yield inspector.walker.children(toolbarbutton);
+  let toolbarbutton = await getNodeFront("toolbarbutton", inspector);
+  let children = await inspector.walker.children(toolbarbutton);
 
   is(toolbarbutton.numChildren, 3, "Correct number of children");
   is(children.nodes.length, 3, "Children returned from walker");
 
   is(toolbarbutton.isAnonymous, false, "Toolbarbutton is not anonymous");
-  yield isEditingMenuEnabled(toolbarbutton, inspector);
+  await isEditingMenuEnabled(toolbarbutton, inspector);
 
   for (let node of children.nodes) {
     ok(node.isAnonymous, "Child is anonymous");
     ok(node._form.isXBLAnonymous, "Child is XBL anonymous");
     ok(!node._form.isShadowAnonymous, "Child is not shadow anonymous");
     ok(!node._form.isNativeAnonymous, "Child is not native anonymous");
-    yield isEditingMenuDisabled(node, inspector);
+    await isEditingMenuDisabled(node, inspector);
   }
 });
--- a/devtools/client/inspector/markup/test/browser_markup_anonymous_03.js
+++ b/devtools/client/inspector/markup/test/browser_markup_anonymous_03.js
@@ -4,32 +4,32 @@
 
 "use strict";
 
 // Test shadow DOM content in the markupview.
 // Note that many features are not yet enabled, but basic listing
 // of elements should be working.
 const TEST_URL = URL_ROOT + "doc_markup_anonymous.html";
 
-add_task(function* () {
+add_task(async function() {
   Services.prefs.setBoolPref("dom.webcomponents.shadowdom.enabled", true);
 
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+  let {inspector} = await openInspectorForURL(TEST_URL);
 
-  let shadow = yield getNodeFront("#shadow", inspector.markup);
-  let children = yield inspector.walker.children(shadow);
+  let shadow = await getNodeFront("#shadow", inspector.markup);
+  let children = await inspector.walker.children(shadow);
 
   // Bug 1441535.
   todo_is(shadow.numChildren, 3, "Children of the shadow root are counted");
   is(children.nodes.length, 3, "Children returned from walker");
 
   info("Checking the ::before pseudo element");
   let before = children.nodes[0];
-  yield isEditingMenuDisabled(before, inspector);
+  await isEditingMenuDisabled(before, inspector);
 
   info("Checking the <h3> shadow element");
   let shadowChild1 = children.nodes[1];
-  yield isEditingMenuDisabled(shadowChild1, inspector);
+  await isEditingMenuDisabled(shadowChild1, inspector);
 
   info("Checking the <select> shadow element");
   let shadowChild2 = children.nodes[2];
-  yield isEditingMenuDisabled(shadowChild2, inspector);
+  await isEditingMenuDisabled(shadowChild2, inspector);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_anonymous_04.js
+++ b/devtools/client/inspector/markup/test/browser_markup_anonymous_04.js
@@ -4,34 +4,34 @@
 
 "use strict";
 
 // Test native anonymous content in the markupview with
 // devtools.inspector.showAllAnonymousContent set to true
 const TEST_URL = URL_ROOT + "doc_markup_anonymous.html";
 const PREF = "devtools.inspector.showAllAnonymousContent";
 
-add_task(function* () {
+add_task(async function() {
   Services.prefs.setBoolPref(PREF, true);
 
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+  let {inspector} = await openInspectorForURL(TEST_URL);
 
-  let native = yield getNodeFront("#native", inspector);
+  let native = await getNodeFront("#native", inspector);
 
   // Markup looks like: <div><video controls /></div>
-  let nativeChildren = yield inspector.walker.children(native);
+  let nativeChildren = await inspector.walker.children(native);
   is(nativeChildren.nodes.length, 1, "Children returned from walker");
 
   info("Checking the video element");
   let video = nativeChildren.nodes[0];
   ok(!video.isAnonymous, "<video> is not anonymous");
 
-  let videoChildren = yield inspector.walker.children(video);
+  let videoChildren = await inspector.walker.children(video);
   is(videoChildren.nodes.length, 3, "<video> has native anonymous children");
 
   for (let node of videoChildren.nodes) {
     ok(node.isAnonymous, "Child is anonymous");
     ok(!node._form.isXBLAnonymous, "Child is not XBL anonymous");
     ok(!node._form.isShadowAnonymous, "Child is not shadow anonymous");
     ok(node._form.isNativeAnonymous, "Child is native anonymous");
-    yield isEditingMenuDisabled(node, inspector);
+    await isEditingMenuDisabled(node, inspector);
   }
 });
--- a/devtools/client/inspector/markup/test/browser_markup_copy_image_data.js
+++ b/devtools/client/inspector/markup/test/browser_markup_copy_image_data.js
@@ -2,49 +2,49 @@
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that image nodes have the "copy data-uri" contextual menu item enabled
 // and that clicking it puts the image data into the clipboard
 
-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_markup_image_and_canvas.html");
-  let {inspector, testActor} = yield openInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_markup_image_and_canvas.html");
+  let {inspector, testActor} = await openInspector();
 
-  yield selectNode("div", inspector);
-  yield assertCopyImageDataNotAvailable(inspector);
+  await selectNode("div", inspector);
+  await assertCopyImageDataNotAvailable(inspector);
 
-  yield selectNode("img", inspector);
-  yield assertCopyImageDataAvailable(inspector);
-  let expectedSrc = yield testActor.getAttribute("img", "src");
-  yield triggerCopyImageUrlAndWaitForClipboard(expectedSrc, inspector);
+  await selectNode("img", inspector);
+  await assertCopyImageDataAvailable(inspector);
+  let expectedSrc = await testActor.getAttribute("img", "src");
+  await triggerCopyImageUrlAndWaitForClipboard(expectedSrc, inspector);
 
-  yield selectNode("canvas", inspector);
-  yield assertCopyImageDataAvailable(inspector);
-  let expectedURL = yield testActor.eval(`
+  await selectNode("canvas", inspector);
+  await assertCopyImageDataAvailable(inspector);
+  let expectedURL = await testActor.eval(`
     document.querySelector(".canvas").toDataURL();`);
-  yield triggerCopyImageUrlAndWaitForClipboard(expectedURL, inspector);
+  await triggerCopyImageUrlAndWaitForClipboard(expectedURL, inspector);
 
   // Check again that the menu isn't available on the DIV (to make sure our
   // menu updating mechanism works)
-  yield selectNode("div", inspector);
-  yield assertCopyImageDataNotAvailable(inspector);
+  await selectNode("div", inspector);
+  await assertCopyImageDataNotAvailable(inspector);
 });
 
-function* assertCopyImageDataNotAvailable(inspector) {
+function assertCopyImageDataNotAvailable(inspector) {
   let allMenuItems = openContextMenuAndGetAllItems(inspector);
   let item = allMenuItems.find(i => i.id === "node-menu-copyimagedatauri");
 
   ok(item, "The menu item was found in the contextual menu");
   ok(item.disabled, "The menu item is disabled");
 }
 
-function* assertCopyImageDataAvailable(inspector) {
+function assertCopyImageDataAvailable(inspector) {
   let allMenuItems = openContextMenuAndGetAllItems(inspector);
   let item = allMenuItems.find(i => i.id === "node-menu-copyimagedatauri");
 
   ok(item, "The menu item was found in the contextual menu");
   ok(!item.disabled, "The menu item is enabled");
 }
 
 function triggerCopyImageUrlAndWaitForClipboard(expected, inspector) {
--- a/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_01.js
@@ -64,13 +64,13 @@ const TEST_DATA = [
   ["!", "style=\"display:  inherit; color :chartreuse !important; ",
    45, 55, false],
   ["VK_RIGHT", "style=\"display:  inherit; color :chartreuse !important; ",
    55, 55, false],
   ["VK_RETURN", "style=\"display:  inherit; color :chartreuse !important;\"",
    -1, -1, false]
 ];
 
-add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector} = await openInspectorForURL(TEST_URL);
 
-  yield runStyleAttributeAutocompleteTests(inspector, TEST_DATA);
+  await runStyleAttributeAutocompleteTests(inspector, TEST_DATA);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_02.js
@@ -92,15 +92,15 @@ const TEST_DATA_INNER = [
   [" ", "style=\"background:url('1'); ", 28, 28, false],
   ["c", "style=\"background:url('1'); color", 29, 33, true],
   ["VK_RIGHT", "style=\"background:url('1'); color", 33, 33, false],
   [":", "style=\"background:url('1'); color:aliceblue", 34, 43, true],
   ["b", "style=\"background:url('1'); color:beige", 35, 39, true],
   ["VK_RETURN", "style=\"background:url('1'); color:beige\"", -1, -1, false]
 ];
 
-add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector} = await openInspectorForURL(TEST_URL);
 
-  yield runStyleAttributeAutocompleteTests(inspector, TEST_DATA_DOUBLE);
-  yield runStyleAttributeAutocompleteTests(inspector, TEST_DATA_SINGLE);
-  yield runStyleAttributeAutocompleteTests(inspector, TEST_DATA_INNER);
+  await runStyleAttributeAutocompleteTests(inspector, TEST_DATA_DOUBLE);
+  await runStyleAttributeAutocompleteTests(inspector, TEST_DATA_SINGLE);
+  await runStyleAttributeAutocompleteTests(inspector, TEST_DATA_INNER);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_03.js
+++ b/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_03.js
@@ -42,13 +42,13 @@ const TEST_DATA = [
   ["p", "style=\"color:beige;padding;\"", 20, 26, true],
   ["VK_RIGHT", "style=\"color:beige;padding;\"", 26, 26, false],
   [":", "style=\"color:beige;padding:calc;\"", 27, 31, true],
   ["0", "style=\"color:beige;padding:0;\"", 28, 28, false],
   ["VK_RETURN", "style=\"color:beige;padding:0;\"",
    -1, -1, false]
 ];
 
-add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector} = await openInspectorForURL(TEST_URL);
 
-  yield runStyleAttributeAutocompleteTests(inspector, TEST_DATA);
+  await runStyleAttributeAutocompleteTests(inspector, TEST_DATA);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_display_node_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_display_node_01.js
@@ -19,40 +19,40 @@ const TEST_URI = `
     }
   </style>
   <div id="grid">Grid</div>
   <div id="flex">Flex</div>
   <div id="block">Block</div>
   <span>HELLO WORLD</span>
 `;
 
-add_task(function* () {
-  let {inspector} = yield openInspectorForURL("data:text/html;charset=utf-8," +
+add_task(async function() {
+  let {inspector} = await openInspectorForURL("data:text/html;charset=utf-8," +
     encodeURIComponent(TEST_URI));
 
   info("Check the display node is shown and the value of #grid.");
-  yield selectNode("#grid", inspector);
-  let gridContainer = yield getContainerForSelector("#grid", inspector);
+  await selectNode("#grid", inspector);
+  let gridContainer = await getContainerForSelector("#grid", inspector);
   let gridDisplayNode = gridContainer.elt.querySelector(".markupview-display");
   is(gridDisplayNode.textContent, "grid", "Got the correct display type for #grid.");
   is(gridDisplayNode.style.display, "inline-block", "#grid display node is shown.");
 
   info("Check the display node is shown and the value of #flex.");
-  yield selectNode("#flex", inspector);
-  let flexContainer = yield getContainerForSelector("#flex", inspector);
+  await selectNode("#flex", inspector);
+  let flexContainer = await getContainerForSelector("#flex", inspector);
   let flexDisplayNode = flexContainer.elt.querySelector(".markupview-display");
   is(flexDisplayNode.textContent, "flex", "Got the correct display type for #flex");
   is(flexDisplayNode.style.display, "inline-block", "#flex display node is shown.");
 
   info("Check the display node is shown and the value of #block.");
-  yield selectNode("#block", inspector);
-  let blockContainer = yield getContainerForSelector("#block", inspector);
+  await selectNode("#block", inspector);
+  let blockContainer = await getContainerForSelector("#block", inspector);
   let blockDisplayNode = blockContainer.elt.querySelector(".markupview-display");
   is(blockDisplayNode.textContent, "block", "Got the correct display type for #block");
   is(blockDisplayNode.style.display, "none", "#block display node is hidden.");
 
   info("Check the display node is shown and the value of span.");
-  yield selectNode("span", inspector);
-  let spanContainer = yield getContainerForSelector("span", inspector);
+  await selectNode("span", inspector);
+  let spanContainer = await getContainerForSelector("span", inspector);
   let spanDisplayNode = spanContainer.elt.querySelector(".markupview-display");
   is(spanDisplayNode.textContent, "inline", "Got the correct display type for #span");
   is(spanDisplayNode.style.display, "none", "span display node is hidden.");
 });
--- a/devtools/client/inspector/markup/test/browser_markup_display_node_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_display_node_02.js
@@ -30,90 +30,90 @@ const TEST_URI = `
 const TEST_DATA = [
   {
     desc: "Hiding the #grid display node by changing its style property",
     selector: "#grid",
     before: {
       textContent: "grid",
       display: "inline-block"
     },
-    changeStyle: function* (testActor) {
-      yield testActor.eval(`
+    changeStyle: async function(testActor) {
+      await testActor.eval(`
         let node = document.getElementById("grid");
         node.style.display = "block";
       `);
     },
     after: {
       textContent: "block",
       display: "none"
     }
   },
   {
     desc: "Showing a 'grid' node by changing its style property",
     selector: "#block",
     before: {
       textContent: "block",
       display: "none"
     },
-    changeStyle: function* (testActor) {
-      yield testActor.eval(`
+    changeStyle: async function(testActor) {
+      await testActor.eval(`
         let node = document.getElementById("block");
         node.style.display = "grid";
       `);
     },
     after: {
       textContent: "grid",
       display: "inline-block"
     }
   },
   {
     desc: "Showing a 'flex' node by removing its hidden attribute",
     selector: "#flex",
     before: {
       textContent: "none",
       display: "none"
     },
-    changeStyle: function* (testActor) {
-      yield testActor.eval(`
+    changeStyle: async function(testActor) {
+      await testActor.eval(`
         document.getElementById("flex").removeAttribute("hidden");
       `);
     },
     after: {
       textContent: "flex",
       display: "inline-block"
     }
   }
 ];
 
-add_task(function* () {
-  let {inspector, testActor} = yield openInspectorForURL("data:text/html;charset=utf-8," +
+add_task(async function() {
+  let {inspector, testActor} = await openInspectorForURL("data:text/html;charset=utf-8," +
     encodeURIComponent(TEST_URI));
 
   for (let data of TEST_DATA) {
     info("Running test case: " + data.desc);
-    yield runTestData(inspector, testActor, data);
+    await runTestData(inspector, testActor, data);
   }
 });
 
-function* runTestData(inspector, testActor,
+async function runTestData(inspector, testActor,
                       {selector, before, changeStyle, after}) {
-  yield selectNode(selector, inspector);
-  let container = yield getContainerForSelector(selector, inspector);
+  await selectNode(selector, inspector);
+  let container = await getContainerForSelector(selector, inspector);
   let displayNode = container.elt.querySelector(".markupview-display");
 
   is(displayNode.textContent, before.textContent,
     `Got the correct before display type for ${selector}: ${displayNode.textContent}`);
   is(displayNode.style.display, before.display,
     `Got the correct before display style for ${selector}: ${displayNode.style.display}`);
 
   info("Listening for the display-change event");
   let onDisplayChanged = inspector.markup.walker.once("display-change");
   info("Making style changes");
-  yield changeStyle(testActor);
-  let nodes = yield onDisplayChanged;
+  await changeStyle(testActor);
+  let nodes = await onDisplayChanged;
 
   info("Verifying that the list of changed nodes include our container");
   ok(nodes.length, "The display-change event was received with a nodes");
   let foundContainer = false;
   for (let node of nodes) {
     if (getContainerForNodeFront(node, inspector) === container) {
       foundContainer = true;
       break;
--- a/devtools/client/inspector/markup/test/browser_markup_dragdrop_distance.js
+++ b/devtools/client/inspector/markup/test/browser_markup_dragdrop_distance.js
@@ -9,41 +9,41 @@
 // DRAG_DROP_MIN_INITIAL_DISTANCE.
 
 const TEST_URL = URL_ROOT + "doc_markup_dragdrop.html";
 const TEST_NODE = "#test";
 
 // Keep this in sync with DRAG_DROP_MIN_INITIAL_DISTANCE in markup-view.js
 const MIN_DISTANCE = 10;
 
-add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector} = await openInspectorForURL(TEST_URL);
 
   info("Drag the test node by half of the minimum distance");
-  yield simulateNodeDrag(inspector, TEST_NODE, 0, MIN_DISTANCE / 2);
-  yield checkIsDragging(inspector, TEST_NODE, false);
+  await simulateNodeDrag(inspector, TEST_NODE, 0, MIN_DISTANCE / 2);
+  await checkIsDragging(inspector, TEST_NODE, false);
 
   info("Drag the test node by exactly the minimum distance");
-  yield simulateNodeDrag(inspector, TEST_NODE, 0, MIN_DISTANCE);
-  yield checkIsDragging(inspector, TEST_NODE, true);
+  await simulateNodeDrag(inspector, TEST_NODE, 0, MIN_DISTANCE);
+  await checkIsDragging(inspector, TEST_NODE, true);
   inspector.markup.cancelDragging();
 
   info("Drag the test node by more than the minimum distance");
-  yield simulateNodeDrag(inspector, TEST_NODE, 0, MIN_DISTANCE * 2);
-  yield checkIsDragging(inspector, TEST_NODE, true);
+  await simulateNodeDrag(inspector, TEST_NODE, 0, MIN_DISTANCE * 2);
+  await checkIsDragging(inspector, TEST_NODE, true);
   inspector.markup.cancelDragging();
 
   info("Drag the test node by minus the minimum distance");
-  yield simulateNodeDrag(inspector, TEST_NODE, 0, MIN_DISTANCE * -1);
-  yield checkIsDragging(inspector, TEST_NODE, true);
+  await simulateNodeDrag(inspector, TEST_NODE, 0, MIN_DISTANCE * -1);
+  await checkIsDragging(inspector, TEST_NODE, true);
   inspector.markup.cancelDragging();
 });
 
-function* checkIsDragging(inspector, selector, isDragging) {
-  let container = yield getContainerForSelector(selector, inspector);
+async function checkIsDragging(inspector, selector, isDragging) {
+  let container = await getContainerForSelector(selector, inspector);
   if (isDragging) {
     ok(container.isDragging, "The container is being dragged");
     ok(inspector.markup.isDragging, "And the markup-view knows it");
   } else {
     ok(!container.isDragging, "The container hasn't been marked as dragging");
     ok(!inspector.markup.isDragging, "And the markup-view either");
   }
 }
--- a/devtools/client/inspector/markup/test/browser_markup_dragdrop_dragRootNode.js
+++ b/devtools/client/inspector/markup/test/browser_markup_dragdrop_dragRootNode.js
@@ -4,19 +4,19 @@
 
 "use strict";
 
 // Test that the root node isn't draggable (as well as head and body).
 
 const TEST_URL = URL_ROOT + "doc_markup_dragdrop.html";
 const TEST_DATA = ["html", "head", "body"];
 
-add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector} = await openInspectorForURL(TEST_URL);
 
   for (let selector of TEST_DATA) {
     info("Try to drag/drop node " + selector);
-    yield simulateNodeDrag(inspector, selector);
+    await simulateNodeDrag(inspector, selector);
 
-    let container = yield getContainerForSelector(selector, inspector);
+    let container = await getContainerForSelector(selector, inspector);
     ok(!container.isDragging, "The container hasn't been marked as dragging");
   }
 });
--- a/devtools/client/inspector/markup/test/browser_markup_dragdrop_draggable.js
+++ b/devtools/client/inspector/markup/test/browser_markup_dragdrop_draggable.js
@@ -17,47 +17,47 @@ const TEST_DATA = [
   { node: "body", draggable: false },
   { node: "html", draggable: false },
   { node: "style", draggable: true },
   { node: "a", draggable: true },
   { node: "p", draggable: true },
   { node: "input", draggable: true },
   { node: "div", draggable: true },
   {
-    node: function* (inspector) {
-      let parentFront = yield getNodeFront("#before", inspector);
-      let {nodes} = yield inspector.walker.children(parentFront);
+    node: async function(inspector) {
+      let parentFront = await getNodeFront("#before", inspector);
+      let {nodes} = await inspector.walker.children(parentFront);
       // Getting the comment node.
       return getContainerForNodeFront(nodes[1], inspector);
     },
     draggable: true
   },
   {
-    node: function* (inspector) {
-      let parentFront = yield getNodeFront("#test", inspector);
-      let {nodes} = yield inspector.walker.children(parentFront);
+    node: async function(inspector) {
+      let parentFront = await getNodeFront("#test", inspector);
+      let {nodes} = await inspector.walker.children(parentFront);
       // Getting the ::before pseudo element.
       return getContainerForNodeFront(nodes[0], inspector);
     },
     draggable: false
   }
 ];
 
-add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
-  yield inspector.markup.expandAll();
+add_task(async function() {
+  let {inspector} = await openInspectorForURL(TEST_URL);
+  await inspector.markup.expandAll();
 
   for (let {node, draggable} of TEST_DATA) {
     let container;
     let name;
     if (typeof node === "string") {
-      container = yield getContainerForSelector(node, inspector);
+      container = await getContainerForSelector(node, inspector);
       name = node;
     } else {
-      container = yield node(inspector);
+      container = await node(inspector);
       name = container.toString();
     }
 
     let status = draggable ? "draggable" : "not draggable";
     info(`Testing ${name}, expecting it to be ${status}`);
     is(container.isDraggable(), draggable, `The node is ${status}`);
   }
 });
--- a/devtools/client/inspector/markup/test/browser_markup_dragdrop_escapeKeyPress.js
+++ b/devtools/client/inspector/markup/test/browser_markup_dragdrop_escapeKeyPress.js
@@ -3,26 +3,26 @@
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test whether ESCAPE keypress cancels dragging of an element.
 
 const TEST_URL = URL_ROOT + "doc_markup_dragdrop.html";
 
-add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector} = await openInspectorForURL(TEST_URL);
   let {markup} = inspector;
 
   info("Get a test container");
-  yield selectNode("#test", inspector);
-  let container = yield getContainerForSelector("#test", inspector);
+  await selectNode("#test", inspector);
+  let container = await getContainerForSelector("#test", inspector);
 
   info("Simulate a drag/drop on this container");
-  yield simulateNodeDrag(inspector, "#test");
+  await simulateNodeDrag(inspector, "#test");
 
   ok(container.isDragging && markup.isDragging,
      "The container is being dragged");
   ok(markup.doc.body.classList.contains("dragging"),
      "The dragging css class was added");
 
   info("Simulate ESCAPE keypress");
   EventUtils.sendKey("escape", inspector.panelWin);
--- a/devtools/client/inspector/markup/test/browser_markup_dragdrop_invalidNodes.js
+++ b/devtools/client/inspector/markup/test/browser_markup_dragdrop_invalidNodes.js
@@ -4,45 +4,45 @@
 
 "use strict";
 
 // Check that pseudo-elements and anonymous nodes are not draggable.
 
 const TEST_URL = URL_ROOT + "doc_markup_dragdrop.html";
 const PREF = "devtools.inspector.showAllAnonymousContent";
 
-add_task(function* () {
+add_task(async function() {
   Services.prefs.setBoolPref(PREF, true);
 
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+  let {inspector} = await openInspectorForURL(TEST_URL);
 
   info("Expanding nodes below #test");
-  let parentFront = yield getNodeFront("#test", inspector);
-  yield inspector.markup.expandNode(parentFront);
-  yield waitForMultipleChildrenUpdates(inspector);
+  let parentFront = await getNodeFront("#test", inspector);
+  await inspector.markup.expandNode(parentFront);
+  await waitForMultipleChildrenUpdates(inspector);
 
   info("Getting the ::before pseudo element and selecting it");
-  let parentContainer = yield getContainerForNodeFront(parentFront, inspector);
+  let parentContainer = await getContainerForNodeFront(parentFront, inspector);
   let beforePseudo = parentContainer.elt.children[1].firstChild.container;
   parentContainer.elt.scrollIntoView(true);
-  yield selectNode(beforePseudo.node, inspector);
+  await selectNode(beforePseudo.node, inspector);
 
   info("Simulate dragging the ::before pseudo element");
-  yield simulateNodeDrag(inspector, beforePseudo);
+  await simulateNodeDrag(inspector, beforePseudo);
 
   ok(!beforePseudo.isDragging, "::before pseudo element isn't dragging");
 
   info("Expanding nodes below #anonymousParent");
-  let inputFront = yield getNodeFront("#anonymousParent", inspector);
-  yield inspector.markup.expandNode(inputFront);
-  yield waitForMultipleChildrenUpdates(inspector);
+  let inputFront = await getNodeFront("#anonymousParent", inspector);
+  await inspector.markup.expandNode(inputFront);
+  await waitForMultipleChildrenUpdates(inspector);
 
   info("Getting the anonymous node and selecting it");
-  let inputContainer = yield getContainerForNodeFront(inputFront, inspector);
+  let inputContainer = await getContainerForNodeFront(inputFront, inspector);
   let anonymousDiv = inputContainer.elt.children[1].firstChild.container;
   inputContainer.elt.scrollIntoView(true);
-  yield selectNode(anonymousDiv.node, inspector);
+  await selectNode(anonymousDiv.node, inspector);
 
   info("Simulate dragging the anonymous node");
-  yield simulateNodeDrag(inspector, anonymousDiv);
+  await simulateNodeDrag(inspector, anonymousDiv);
 
   ok(!anonymousDiv.isDragging, "anonymous node isn't dragging");
 });
--- a/devtools/client/inspector/markup/test/browser_markup_dragdrop_reorder.js
+++ b/devtools/client/inspector/markup/test/browser_markup_dragdrop_reorder.js
@@ -5,105 +5,105 @@
 "use strict";
 
 requestLongerTimeout(2);
 
 // Test different kinds of drag and drop node re-ordering.
 
 const TEST_URL = URL_ROOT + "doc_markup_dragdrop.html";
 
-add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector} = await openInspectorForURL(TEST_URL);
   let ids;
 
   info("Expand #test node");
-  let parentFront = yield getNodeFront("#test", inspector);
-  yield inspector.markup.expandNode(parentFront);
-  yield waitForMultipleChildrenUpdates(inspector);
+  let parentFront = await getNodeFront("#test", inspector);
+  await inspector.markup.expandNode(parentFront);
+  await waitForMultipleChildrenUpdates(inspector);
 
   info("Scroll #test into view");
-  let parentContainer = yield getContainerForNodeFront(parentFront, inspector);
+  let parentContainer = await getContainerForNodeFront(parentFront, inspector);
   parentContainer.elt.scrollIntoView(true);
 
   info("Test putting an element back at its original place");
-  yield dragElementToOriginalLocation("#firstChild", inspector);
-  ids = yield getChildrenIDsOf(parentFront, inspector);
+  await dragElementToOriginalLocation("#firstChild", inspector);
+  ids = await getChildrenIDsOf(parentFront, inspector);
   is(ids[0], "firstChild",
      "#firstChild is still the first child of #test");
   is(ids[1], "middleChild",
      "#middleChild is still the second child of #test");
 
   info("Testing switching elements inside their parent");
-  yield moveElementDown("#firstChild", "#middleChild", inspector);
-  ids = yield getChildrenIDsOf(parentFront, inspector);
+  await moveElementDown("#firstChild", "#middleChild", inspector);
+  ids = await getChildrenIDsOf(parentFront, inspector);
   is(ids[0], "middleChild",
      "#firstChild is now the second child of #test");
   is(ids[1], "firstChild",
      "#middleChild is now the first child of #test");
 
   info("Testing switching elements with a last child");
-  yield moveElementDown("#firstChild", "#lastChild", inspector);
-  ids = yield getChildrenIDsOf(parentFront, inspector);
+  await moveElementDown("#firstChild", "#lastChild", inspector);
+  ids = await getChildrenIDsOf(parentFront, inspector);
   is(ids[1], "lastChild",
      "#lastChild is now the second child of #test");
   is(ids[2], "firstChild",
      "#firstChild is now the last child of #test");
 
   info("Testing appending element to a parent");
-  yield moveElementDown("#before", "#test", inspector);
-  ids = yield getChildrenIDsOf(parentFront, inspector);
+  await moveElementDown("#before", "#test", inspector);
+  ids = await getChildrenIDsOf(parentFront, inspector);
   is(ids.length, 4,
      "New element appended to #test");
   is(ids[0], "before",
      "New element is appended at the right place (currently first child)");
 
   info("Testing moving element to after it's parent");
-  yield moveElementDown("#firstChild", "#test", inspector);
-  ids = yield getChildrenIDsOf(parentFront, inspector);
+  await moveElementDown("#firstChild", "#test", inspector);
+  ids = await getChildrenIDsOf(parentFront, inspector);
   is(ids.length, 3,
      "#firstChild is no longer #test's child");
-  let siblingFront = yield inspector.walker.nextSibling(parentFront);
+  let siblingFront = await inspector.walker.nextSibling(parentFront);
   is(siblingFront.id, "firstChild",
      "#firstChild is now #test's nextElementSibling");
 });
 
-function* dragElementToOriginalLocation(selector, inspector) {
+async function dragElementToOriginalLocation(selector, inspector) {
   info("Picking up and putting back down " + selector);
 
   function onMutation() {
     ok(false, "Mutation received from dragging a node back to its location");
   }
   inspector.on("markupmutation", onMutation);
-  yield simulateNodeDragAndDrop(inspector, selector, 0, 0);
+  await simulateNodeDragAndDrop(inspector, selector, 0, 0);
 
   // Wait a bit to make sure the event never fires.
   // This doesn't need to catch *all* cases, since the mutation
   // will cause failure later in the test when it checks element ordering.
-  yield wait(500);
+  await wait(500);
   inspector.off("markupmutation", onMutation);
 }
 
-function* moveElementDown(selector, next, inspector) {
+async function moveElementDown(selector, next, inspector) {
   info("Switching " + selector + " with " + next);
 
-  let container = yield getContainerForSelector(next, inspector);
+  let container = await getContainerForSelector(next, inspector);
   let height = container.tagLine.getBoundingClientRect().height;
 
   let onMutated = inspector.once("markupmutation");
   let uiUpdate = inspector.once("inspector-updated");
 
-  yield simulateNodeDragAndDrop(inspector, selector, 0, Math.round(height) + 2);
+  await simulateNodeDragAndDrop(inspector, selector, 0, Math.round(height) + 2);
 
-  let mutations = yield onMutated;
-  yield uiUpdate;
+  let mutations = await onMutated;
+  await uiUpdate;
 
   is(mutations.length, 2, "2 mutations were received");
 }
 
-function* getChildrenIDsOf(parentFront, {walker}) {
-  let {nodes} = yield walker.children(parentFront);
+async function getChildrenIDsOf(parentFront, {walker}) {
+  let {nodes} = await walker.children(parentFront);
   // Filter out non-element nodes since children also returns pseudo-elements.
   return nodes.filter(node => {
     return !node.isPseudoElement;
   }).map(node => {
     return node.id;
   });
 }
--- a/devtools/client/inspector/markup/test/browser_markup_dragdrop_tooltip.js
+++ b/devtools/client/inspector/markup/test/browser_markup_dragdrop_tooltip.js
@@ -2,34 +2,34 @@
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 "use strict";
 
 // Test that tooltips don't appear when dragging over tooltip targets.
 
 const TEST_URL = "data:text/html;charset=utf8,<img src=\"about:logo\" /><div>";
 
-add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector} = await openInspectorForURL(TEST_URL);
   let {markup} = inspector;
 
   info("Get the tooltip target element for the image's src attribute");
-  let img = yield getContainerForSelector("img", inspector);
+  let img = await getContainerForSelector("img", inspector);
   let target = img.editor.getAttributeElement("src").querySelector(".link");
 
   info("Check that the src attribute of the image is a valid tooltip target");
-  yield assertTooltipShownOnHover(markup.imagePreviewTooltip, target);
-  yield assertTooltipHiddenOnMouseOut(markup.imagePreviewTooltip, target);
+  await assertTooltipShownOnHover(markup.imagePreviewTooltip, target);
+  await assertTooltipHiddenOnMouseOut(markup.imagePreviewTooltip, target);
 
   info("Start dragging the test div");
-  yield simulateNodeDrag(inspector, "div");
+  await simulateNodeDrag(inspector, "div");
 
   info("Now check that the src attribute of the image isn't a valid target");
-  let isValid = yield markup.imagePreviewTooltip._toggle.isValidHoverTarget(target);
+  let isValid = await markup.imagePreviewTooltip._toggle.isValidHoverTarget(target);
   ok(!isValid, "The element is not a valid tooltip target");
 
   info("Stop dragging the test div");
-  yield simulateNodeDrop(inspector, "div");
+  await simulateNodeDrop(inspector, "div");
 
   info("Check again the src attribute of the image");
-  yield assertTooltipShownOnHover(markup.imagePreviewTooltip, target);
-  yield assertTooltipHiddenOnMouseOut(markup.imagePreviewTooltip, target);
+  await assertTooltipShownOnHover(markup.imagePreviewTooltip, target);
+  await assertTooltipHiddenOnMouseOut(markup.imagePreviewTooltip, target);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_events-overflow.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events-overflow.js
@@ -25,27 +25,27 @@ const TEST_DATA = [
     desc: "neither header nor editor overflows the container",
     initialScrollTop: 2,
     headerToClick: 5,
     alignBottom: false,
     alignTop: false,
   },
 ];
 
-add_task(function* () {
-  let { inspector } = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let { inspector } = await openInspectorForURL(TEST_URL);
 
-  let markupContainer = yield getContainerForSelector("#events", inspector);
+  let markupContainer = await getContainerForSelector("#events", inspector);
   let evHolder = markupContainer.elt.querySelector(".markupview-events");
   let tooltip = inspector.markup.eventDetailsTooltip;
 
   info("Clicking to open event tooltip.");
   EventUtils.synthesizeMouseAtCenter(evHolder, {},
     inspector.markup.doc.defaultView);
-  yield tooltip.once("shown");
+  await tooltip.once("shown");
   info("EventTooltip visible.");
 
   let container = tooltip.panel;
   let containerRect = container.getBoundingClientRect();
   let headers = container.querySelectorAll(".event-header");
 
   for (let data of TEST_DATA) {
     info("Testing scrolling when " + data.desc);
@@ -61,22 +61,22 @@ add_task(function* () {
 
     is(container.scrollTop, data.initialScrollTop, "Container scrolled.");
 
     info("Clicking on header #" + data.headerToClick);
     let header = headers[data.headerToClick];
 
     let ready = tooltip.once("event-tooltip-ready");
     EventUtils.synthesizeMouseAtCenter(header, {}, header.ownerGlobal);
-    yield ready;
+    await ready;
 
     info("Event handler expanded.");
 
     // Wait for any scrolling to finish.
-    yield promiseNextTick();
+    await promiseNextTick();
 
     if (data.alignTop) {
       let headerRect = header.getBoundingClientRect();
 
       is(Math.round(headerRect.top), Math.round(containerRect.top),
         "Clicked header is aligned with the container top.");
     } else if (data.alignBottom) {
       let editorRect = header.nextElementSibling.getBoundingClientRect();
--- a/devtools/client/inspector/markup/test/browser_markup_events-windowed-host.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events-windowed-host.js
@@ -10,52 +10,52 @@
 
 const TEST_URL = URL_ROOT + "doc_markup_events-overflow.html";
 
 registerCleanupFunction(() => {
   // Restore the default Toolbox host position after the test.
   Services.prefs.clearUserPref("devtools.toolbox.host");
 });
 
-add_task(function* () {
-  let { inspector, toolbox } = yield openInspectorForURL(TEST_URL);
-  yield runTests(inspector);
+add_task(async function() {
+  let { inspector, toolbox } = await openInspectorForURL(TEST_URL);
+  await runTests(inspector);
 
-  yield toolbox.switchHost("window");
-  yield runTests(inspector);
+  await toolbox.switchHost("window");
+  await runTests(inspector);
 
-  yield toolbox.switchHost("bottom");
-  yield runTests(inspector);
+  await toolbox.switchHost("bottom");
+  await runTests(inspector);
 
-  yield toolbox.destroy();
+  await toolbox.destroy();
 });
 
-function* runTests(inspector) {
-  let markupContainer = yield getContainerForSelector("#events", inspector);
+async function runTests(inspector) {
+  let markupContainer = await getContainerForSelector("#events", inspector);
   let evHolder = markupContainer.elt.querySelector(".markupview-events");
   let tooltip = inspector.markup.eventDetailsTooltip;
 
   info("Clicking to open event tooltip.");
 
   let onInspectorUpdated = inspector.once("inspector-updated");
   let onTooltipShown = tooltip.once("shown");
   EventUtils.synthesizeMouseAtCenter(evHolder, {}, inspector.markup.doc.defaultView);
 
-  yield onTooltipShown;
+  await onTooltipShown;
   // New node is selected when clicking on the events bubble, wait for inspector-updated.
-  yield onInspectorUpdated;
+  await onInspectorUpdated;
 
   ok(tooltip.isVisible(), "EventTooltip visible.");
 
   onInspectorUpdated = inspector.once("inspector-updated");
   let onTooltipHidden = tooltip.once("hidden");
 
   info("Click on another tag to hide the event tooltip");
-  let h1 = yield getContainerForSelector("h1", inspector);
+  let h1 = await getContainerForSelector("h1", inspector);
   let tag = h1.elt.querySelector(".tag");
   EventUtils.synthesizeMouseAtCenter(tag, {}, inspector.markup.doc.defaultView);
 
-  yield onTooltipHidden;
+  await onTooltipHidden;
   // New node is selected, wait for inspector-updated.
-  yield onInspectorUpdated;
+  await onInspectorUpdated;
 
   ok(!tooltip.isVisible(), "EventTooltip hidden.");
 }
--- a/devtools/client/inspector/markup/test/browser_markup_events_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_01.js
@@ -80,20 +80,20 @@ const TEST_DATA = [ // eslint-disable-li
   // #noevents tests check that dynamically added events are properly displayed
   // in the markupview
   {
     selector: "#noevents",
     expected: []
   },
   {
     selector: "#noevents",
-    beforeTest: function* (inspector, testActor) {
+    beforeTest: async function(inspector, testActor) {
       let nodeMutated = inspector.once("markupmutation");
-      yield testActor.eval("window.wrappedJSObject.addNoeventsClickHandler();");
-      yield nodeMutated;
+      await testActor.eval("window.wrappedJSObject.addNoeventsClickHandler();");
+      await nodeMutated;
     },
     expected: [
       {
         type: "click",
         filename: TEST_URL + ":72",
         attributes: [
           "Bubbling",
           "DOM2"
@@ -101,21 +101,21 @@ const TEST_DATA = [ // eslint-disable-li
         handler: "function noeventsClickHandler(event) {\n" +
                  "  alert(\"noevents has an event listener\");\n" +
                  "}"
       }
     ]
   },
   {
     selector: "#noevents",
-    beforeTest: function* (inspector, testActor) {
+    beforeTest: async function(inspector, testActor) {
       let nodeMutated = inspector.once("markupmutation");
-      yield testActor.eval(
+      await testActor.eval(
         "window.wrappedJSObject.removeNoeventsClickHandler();");
-      yield nodeMutated;
+      await nodeMutated;
     },
     expected: []
   },
   {
     selector: "#DOM0",
     expected: [
       {
         type: "click",
@@ -143,11 +143,11 @@ const TEST_DATA = [ // eslint-disable-li
         handler: "function(blah) {\n" +
                  "  alert(\"handleEvent\");\n" +
                  "}"
       }
     ]
   }
 ];
 
-add_task(function* () {
-  yield runEventPopupTests(TEST_URL, TEST_DATA);
+add_task(async function() {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_events_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_02.js
@@ -153,11 +153,11 @@ const TEST_DATA = [ // eslint-disable-li
         handler: "function kay() {\n" +
                  "  alert(\"obj.objectMethod\");\n" +
                  "}"
       }
     ]
   }
 ];
 
-add_task(function* () {
-  yield runEventPopupTests(TEST_URL, TEST_DATA);
+add_task(async function() {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_events_03.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_03.js
@@ -106,11 +106,11 @@ const TEST_DATA = [ // eslint-disable-li
         handler: "function bar() {\n" +
                  "  alert(\"returnedFunction\");\n" +
                  "}"
       }
     ]
   },
 ];
 
-add_task(function* () {
-  yield runEventPopupTests(TEST_URL, TEST_DATA);
+add_task(async function() {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_events_04.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_04.js
@@ -147,11 +147,11 @@ const TEST_DATA = [ // eslint-disable-li
                  "      alert(\"handleEvent click\");\n" +
                  "  }\n" +
                  "}"
       }
     ]
   },
 ];
 
-add_task(function* () {
-  yield runEventPopupTests(TEST_URL, TEST_DATA);
+add_task(async function() {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_events_click_to_close.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_click_to_close.js
@@ -15,54 +15,54 @@ const TEST_URL = `
     <!-- adding some comments to make sure      -->
     <!-- the second event icon is not hidden by -->
     <!-- the tooltip of the first event icon    -->
     <!--                                        -->
     <div id="d2" onclick="console.log(2)">test</div>
   </body>
 `;
 
-add_task(function* () {
-  let {inspector, toolbox} = yield openInspectorForURL(
+add_task(async function() {
+  let {inspector, toolbox} = await openInspectorForURL(
     "data:text/html;charset=utf-8," + encodeURI(TEST_URL));
 
-  yield inspector.markup.expandAll();
+  await inspector.markup.expandAll();
 
-  let container1 = yield getContainerForSelector("#d1", inspector);
+  let container1 = await getContainerForSelector("#d1", inspector);
   let evHolder1 = container1.elt.querySelector(".markupview-events");
 
-  let container2 = yield getContainerForSelector("#d2", inspector);
+  let container2 = await getContainerForSelector("#d2", inspector);
   let evHolder2 = container2.elt.querySelector(".markupview-events");
 
   let tooltip = inspector.markup.eventDetailsTooltip;
 
   info("Click the event icon for the first element");
   let onShown = tooltip.once("shown");
   EventUtils.synthesizeMouseAtCenter(evHolder1, {},
     inspector.markup.doc.defaultView);
-  yield onShown;
+  await onShown;
   info("event tooltip for the first div is shown");
 
   info("Click the event icon for the second element");
   let onHidden = tooltip.once("hidden");
   onShown = tooltip.once("shown");
   EventUtils.synthesizeMouseAtCenter(evHolder2, {},
     inspector.markup.doc.defaultView);
 
-  yield onHidden;
+  await onHidden;
   info("previous tooltip hidden");
 
-  yield onShown;
+  await onShown;
   info("event tooltip for the second div is shown");
 
   info("Click on the animation inspector tab");
   let onHighlighterHidden = toolbox.once("node-unhighlight");
   let onTabInspectorSelected = inspector.sidebar.once("animationinspector-selected");
   let animationInspectorTab = inspector.panelDoc.querySelector("#animationinspector-tab");
   EventUtils.synthesizeMouseAtCenter(animationInspectorTab, {},
     inspector.panelDoc.defaultView);
 
-  yield onTabInspectorSelected;
+  await onTabInspectorSelected;
   info("animation inspector was selected");
 
-  yield onHighlighterHidden;
+  await onHighlighterHidden;
   info("box model highlighter hidden after moving the mouse out of the markup view");
 });
--- a/devtools/client/inspector/markup/test/browser_markup_events_form.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_form.js
@@ -9,35 +9,35 @@
 // The test registers one backend actor providing custom form data
 // and checks that the value is properly sent to the client (NodeFront).
 
 const TEST_PAGE_URL = URL_ROOT + "doc_markup_events_form.html";
 const TEST_ACTOR_URL = CHROME_URL_ROOT + "actor_events_form.js";
 
 var {EventsFormFront} = require(TEST_ACTOR_URL);
 
-add_task(function* () {
+add_task(async function() {
   info("Opening the Toolbox");
-  let tab = yield addTab(TEST_PAGE_URL);
-  let toolbox = yield openToolboxForTab(tab, "webconsole");
+  let tab = await addTab(TEST_PAGE_URL);
+  let toolbox = await openToolboxForTab(tab, "webconsole");
 
   info("Registering test actor");
-  let {registrar, front} = yield registerTestActor(toolbox);
+  let {registrar, front} = await registerTestActor(toolbox);
 
   info("Selecting the Inspector panel");
-  let inspector = yield toolbox.selectTool("inspector");
-  let container = yield getContainerForSelector("#container", inspector);
+  let inspector = await toolbox.selectTool("inspector");
+  let container = await getContainerForSelector("#container", inspector);
   isnot(container, null, "There must be requested container");
 
   let nodeFront = container.node;
   let value = nodeFront.getFormProperty("test-property");
   is(value, "test-value", "There must be custom property");
 
   info("Unregistering actor");
-  yield unregisterActor(registrar, front);
+  await unregisterActor(registrar, front);
 });
 
 function registerTestActor(toolbox) {
   let options = {
     prefix: "eventsFormActor",
     actorClass: "EventsFormActor",
     moduleUrl: TEST_ACTOR_URL,
   };
--- a/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.0.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.0.js
@@ -252,11 +252,11 @@ const TEST_DATA = [
                  "  return returnValue;\n" +
                  "}"
       }
     ]
   },
 ];
 /* eslint-enable */
 
-add_task(function* () {
-  yield runEventPopupTests(TEST_URL, TEST_DATA);
+add_task(async function() {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.1.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.1.js
@@ -261,11 +261,11 @@ const TEST_DATA = [
                  "  return returnValue;\n" +
                  "}"
       }
     ]
   }
 ];
 /* eslint-enable */
 
-add_task(function* () {
-  yield runEventPopupTests(TEST_URL, TEST_DATA);
+add_task(async function() {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.11.1.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.11.1.js
@@ -164,11 +164,11 @@ const TEST_DATA = [
                  "  alert(5);\n" +
                  "}"
       }
     ]
   },
 ];
 /* eslint-enable */
 
-add_task(function* () {
-  yield runEventPopupTests(TEST_URL, TEST_DATA);
+add_task(async function() {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.2.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.2.js
@@ -181,11 +181,11 @@ const TEST_DATA = [
                  "  return val;\n" +
                  "}"
       }
     ]
   },
 ];
 /* eslint-enable */
 
-add_task(function* () {
-  yield runEventPopupTests(TEST_URL, TEST_DATA);
+add_task(async function() {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.3.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.3.js
@@ -260,11 +260,11 @@ const TEST_DATA = [
                  "  return E.apply(this, arguments)\n" +
                  "}"
       }
     ]
   },
 ];
 /* eslint-enable */
 
-add_task(function* () {
-  yield runEventPopupTests(TEST_URL, TEST_DATA);
+add_task(async function() {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.4.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.4.js
@@ -213,11 +213,11 @@ const TEST_DATA = [
                  "  return a.apply(d || this, arguments)\n" +
                  "}"
       }
     ]
   },
 ];
 /* eslint-enable */
 
-add_task(function* () {
-  yield runEventPopupTests(TEST_URL, TEST_DATA);
+add_task(async function() {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.6.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.6.js
@@ -367,11 +367,11 @@ const TEST_DATA = [
                  "  }\n" +
                  "}"
       }
     ]
   },
 ];
 /* eslint-enable */
 
-add_task(function* () {
-  yield runEventPopupTests(TEST_URL, TEST_DATA);
+add_task(async function() {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.7.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_jquery_1.7.js
@@ -213,11 +213,11 @@ const TEST_DATA = [
                  "  alert(5);\n" +
                  "}"
       }
     ]
   },
 ];
 /* eslint-enable */
 
-add_task(function* () {
-  yield runEventPopupTests(TEST_URL, TEST_DATA);
+add_task(async function() {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_events_jquery_2.1.1.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_jquery_2.1.1.js
@@ -164,11 +164,11 @@ const TEST_DATA = [
                  "  alert(5);\n" +
                  "}"
       }
     ]
   },
 ];
 /* eslint-enable */
 
-add_task(function* () {
-  yield runEventPopupTests(TEST_URL, TEST_DATA);
+add_task(async function() {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_events_react_development_15.4.1.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_react_development_15.4.1.js
@@ -122,11 +122,11 @@ const TEST_DATA = [
   alert("externalCapturingFunction");
 }`
       }
     ]
   }
 ];
 /* eslint-enable */
 
-add_task(function* () {
-  yield runEventPopupTests(TEST_URL, TEST_DATA);
+add_task(async function() {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_events_react_development_15.4.1_jsx.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_react_development_15.4.1_jsx.js
@@ -122,11 +122,11 @@ const TEST_DATA = [
   alert("externalCapturingFunction");
 }`
       }
     ]
   }
 ];
 /* eslint-enable */
 
-add_task(function* () {
-  yield runEventPopupTests(TEST_URL, TEST_DATA);
+add_task(async function() {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_events_react_production_15.3.1.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_react_production_15.3.1.js
@@ -122,11 +122,11 @@ const TEST_DATA = [
   alert("externalCapturingFunction");
 }`
       }
     ]
   }
 ];
 /* eslint-enable */
 
-add_task(function* () {
-  yield runEventPopupTests(TEST_URL, TEST_DATA);
+add_task(async function() {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_events_react_production_15.3.1_jsx.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_react_production_15.3.1_jsx.js
@@ -122,11 +122,11 @@ const TEST_DATA = [
   alert("externalCapturingFunction");
 }`
       }
     ]
   }
 ];
 /* eslint-enable */
 
-add_task(function* () {
-  yield runEventPopupTests(TEST_URL, TEST_DATA);
+add_task(async function() {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_events_react_production_16.2.0.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_react_production_16.2.0.js
@@ -122,11 +122,11 @@ const TEST_DATA = [
   alert("externalCapturingFunction");
 }`
       }
     ]
   }
 ];
 /* eslint-enable */
 
-add_task(function* () {
-  yield runEventPopupTests(TEST_URL, TEST_DATA);
+add_task(async function() {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_events_react_production_16.2.0_jsx.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_react_production_16.2.0_jsx.js
@@ -122,11 +122,11 @@ const TEST_DATA = [
   alert("externalCapturingFunction");
 }`
       }
     ]
   }
 ];
 /* eslint-enable */
 
-add_task(function* () {
-  yield runEventPopupTests(TEST_URL, TEST_DATA);
+add_task(async function() {
+  await runEventPopupTests(TEST_URL, TEST_DATA);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_events_source_map.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_source_map.js
@@ -27,32 +27,32 @@ const TEST_DATA = [
         handler: `function clickme() {
   console.log("clickme");
 }`,
       },
     ],
   },
 ];
 
-add_task(function* () {
+add_task(async function() {
   // Load some other URL before opening the toolbox, then navigate to
   // the test URL.  This ensures that source map service will see the
   // sources as they are loaded, avoiding any races.
-  let {toolbox, inspector, testActor} = yield openInspectorForURL(INITIAL_URL);
+  let {toolbox, inspector, testActor} = await openInspectorForURL(INITIAL_URL);
 
   // Ensure the source map service is operating.  This looks a bit
   // funny, but sourceMapURLService is a getter, and we don't need the
   // result.
   toolbox.sourceMapURLService;
 
-  yield navigateTo(inspector, TEST_URL);
+  await navigateTo(inspector, TEST_URL);
 
-  yield inspector.markup.expandAll();
+  await inspector.markup.expandAll();
 
   for (let test of TEST_DATA) {
-    yield checkEventsForNode(test, inspector, testActor);
+    await checkEventsForNode(test, inspector, testActor);
   }
 
   // Wait for promises to avoid leaks when running this as a single test.
   // We need to do this because we have opened a bunch of popups and don't them
   // to affect other test runs when they are GCd.
-  yield promiseNextTick();
+  await promiseNextTick();
 });
--- a/devtools/client/inspector/markup/test/browser_markup_html_edit_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_html_edit_01.js
@@ -9,20 +9,20 @@
 requestLongerTimeout(2);
 
 loadHelperScript("helper_outerhtml_test_runner.js");
 
 const TEST_DATA = [{
   selector: "#one",
   oldHTML: '<div id="one">First <em>Div</em></div>',
   newHTML: '<div id="one">First Div</div>',
-  validate: function* ({pageNodeFront, selectedNodeFront, testActor}) {
-    let text = yield testActor.getProperty("#one", "textContent");
+  validate: async function({pageNodeFront, selectedNodeFront, testActor}) {
+    let text = await testActor.getProperty("#one", "textContent");
     is(text, "First Div", "New div has expected text content");
-    let num = yield testActor.getNumberOfElementMatches("#one em");
+    let num = await testActor.getNumberOfElementMatches("#one em");
     is(num, 0, "No em remaining");
   }
 }, {
   selector: "#removedChildren",
   oldHTML: "<div id=\"removedChildren\">removedChild " +
            "<i>Italic <b>Bold <u>Underline</u></b></i> Normal</div>",
   newHTML: "<div id=\"removedChildren\">removedChild</div>"
 }, {
@@ -30,55 +30,55 @@ const TEST_DATA = [{
   oldHTML: '<div id="addedChildren">addedChildren</div>',
   newHTML: "<div id=\"addedChildren\">addedChildren " +
            "<i>Italic <b>Bold <u>Underline</u></b></i> Normal</div>"
 }, {
   selector: "#addedAttribute",
   oldHTML: '<div id="addedAttribute">addedAttribute</div>',
   newHTML: "<div id=\"addedAttribute\" class=\"important\" disabled checked>" +
            "addedAttribute</div>",
-  validate: function* ({pageNodeFront, selectedNodeFront, testActor}) {
+  validate: async function({pageNodeFront, selectedNodeFront, testActor}) {
     is(pageNodeFront, selectedNodeFront, "Original element is selected");
-    let html = yield testActor.getProperty("#addedAttribute", "outerHTML");
+    let html = await testActor.getProperty("#addedAttribute", "outerHTML");
     is(html, "<div id=\"addedAttribute\" class=\"important\" disabled=\"\" " +
        "checked=\"\">addedAttribute</div>", "Attributes have been added");
   }
 }, {
   selector: "#changedTag",
   oldHTML: '<div id="changedTag">changedTag</div>',
   newHTML: '<p id="changedTag" class="important">changedTag</p>'
 }, {
   selector: "#siblings",
   oldHTML: '<div id="siblings">siblings</div>',
   newHTML: '<div id="siblings-before-sibling">before sibling</div>' +
            '<div id="siblings">siblings (updated)</div>' +
            '<div id="siblings-after-sibling">after sibling</div>',
-  validate: function* ({selectedNodeFront, inspector, testActor}) {
-    let beforeSiblingFront = yield getNodeFront("#siblings-before-sibling",
+  validate: async function({selectedNodeFront, inspector, testActor}) {
+    let beforeSiblingFront = await getNodeFront("#siblings-before-sibling",
                                                 inspector);
     is(beforeSiblingFront, selectedNodeFront, "Sibling has been selected");
 
-    let text = yield testActor.getProperty("#siblings", "textContent");
+    let text = await testActor.getProperty("#siblings", "textContent");
     is(text, "siblings (updated)", "New div has expected text content");
 
-    let beforeText = yield testActor.getProperty("#siblings-before-sibling",
+    let beforeText = await testActor.getProperty("#siblings-before-sibling",
                                                  "textContent");
     is(beforeText, "before sibling", "Sibling has been inserted");
 
-    let afterText = yield testActor.getProperty("#siblings-after-sibling",
+    let afterText = await testActor.getProperty("#siblings-after-sibling",
                                                 "textContent");
     is(afterText, "after sibling", "Sibling has been inserted");
   }
 }];
 
 const TEST_URL = "data:text/html," +
   "<!DOCTYPE html>" +
   "<head><meta charset='utf-8' /></head>" +
   "<body>" +
   TEST_DATA.map(outer => outer.oldHTML).join("\n") +
   "</body>" +
   "</html>";
 
-add_task(function* () {
-  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector, testActor} = await openInspectorForURL(TEST_URL);
   inspector.markup._frame.focus();
-  yield runEditOuterHTMLTests(TEST_DATA, inspector, testActor);
+  await runEditOuterHTMLTests(TEST_DATA, inspector, testActor);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_html_edit_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_html_edit_02.js
@@ -9,96 +9,96 @@
 loadHelperScript("helper_outerhtml_test_runner.js");
 requestLongerTimeout(2);
 
 const TEST_DATA = [
   {
     selector: "#badMarkup1",
     oldHTML: "<div id=\"badMarkup1\">badMarkup1</div>",
     newHTML: "<div id=\"badMarkup1\">badMarkup1</div> hanging</div>",
-    validate: function* ({pageNodeFront, selectedNodeFront, testActor}) {
+    validate: async function({pageNodeFront, selectedNodeFront, testActor}) {
       is(pageNodeFront, selectedNodeFront, "Original element is selected");
 
-      let textNodeName = yield testActor.eval(`
+      let textNodeName = await testActor.eval(`
         document.querySelector("#badMarkup1").nextSibling.nodeName
       `);
-      let textNodeData = yield testActor.eval(`
+      let textNodeData = await testActor.eval(`
         document.querySelector("#badMarkup1").nextSibling.data
       `);
       is(textNodeName, "#text", "Sibling is a text element");
       is(textNodeData, " hanging", "New text node has expected text content");
     }
   },
   {
     selector: "#badMarkup2",
     oldHTML: "<div id=\"badMarkup2\">badMarkup2</div>",
     newHTML: "<div id=\"badMarkup2\">badMarkup2</div> hanging<div></div>" +
              "</div></div></body>",
-    validate: function* ({pageNodeFront, selectedNodeFront, testActor}) {
+    validate: async function({pageNodeFront, selectedNodeFront, testActor}) {
       is(pageNodeFront, selectedNodeFront, "Original element is selected");
 
-      let textNodeName = yield testActor.eval(`
+      let textNodeName = await testActor.eval(`
         document.querySelector("#badMarkup2").nextSibling.nodeName
       `);
-      let textNodeData = yield testActor.eval(`
+      let textNodeData = await testActor.eval(`
         document.querySelector("#badMarkup2").nextSibling.data
       `);
       is(textNodeName, "#text", "Sibling is a text element");
       is(textNodeData, " hanging", "New text node has expected text content");
     }
   },
   {
     selector: "#badMarkup3",
     oldHTML: "<div id=\"badMarkup3\">badMarkup3</div>",
     newHTML: "<div id=\"badMarkup3\">badMarkup3 <em>Emphasized <strong> " +
              "and strong</div>",
-    validate: function* ({pageNodeFront, selectedNodeFront, testActor}) {
+    validate: async function({pageNodeFront, selectedNodeFront, testActor}) {
       is(pageNodeFront, selectedNodeFront, "Original element is selected");
 
-      let emText = yield testActor.getProperty("#badMarkup3 em", "textContent");
-      let strongText = yield testActor.getProperty("#badMarkup3 strong",
+      let emText = await testActor.getProperty("#badMarkup3 em", "textContent");
+      let strongText = await testActor.getProperty("#badMarkup3 strong",
                                                    "textContent");
       is(emText, "Emphasized  and strong", "<em> was auto created");
       is(strongText, " and strong", "<strong> was auto created");
     }
   },
   {
     selector: "#badMarkup4",
     oldHTML: "<div id=\"badMarkup4\">badMarkup4</div>",
     newHTML: "<div id=\"badMarkup4\">badMarkup4</p>",
-    validate: function* ({pageNodeFront, selectedNodeFront, testActor}) {
+    validate: async function({pageNodeFront, selectedNodeFront, testActor}) {
       is(pageNodeFront, selectedNodeFront, "Original element is selected");
 
-      let divText = yield testActor.getProperty("#badMarkup4", "textContent");
-      let divTag = yield testActor.getProperty("#badMarkup4", "tagName");
+      let divText = await testActor.getProperty("#badMarkup4", "textContent");
+      let divTag = await testActor.getProperty("#badMarkup4", "tagName");
 
-      let pText = yield testActor.getProperty("#badMarkup4 p", "textContent");
-      let pTag = yield testActor.getProperty("#badMarkup4 p", "tagName");
+      let pText = await testActor.getProperty("#badMarkup4 p", "textContent");
+      let pTag = await testActor.getProperty("#badMarkup4 p", "tagName");
 
       is(divText, "badMarkup4", "textContent is correct");
       is(divTag, "DIV", "did not change to <p> tag");
       is(pText, "", "The <p> tag has no children");
       is(pTag, "P", "Created an empty <p> tag");
     }
   },
   {
     selector: "#badMarkup5",
     oldHTML: "<p id=\"badMarkup5\">badMarkup5</p>",
     newHTML: "<p id=\"badMarkup5\">badMarkup5 <div>with a nested div</div></p>",
-    validate: function* ({pageNodeFront, selectedNodeFront, testActor}) {
+    validate: async function({pageNodeFront, selectedNodeFront, testActor}) {
       is(pageNodeFront, selectedNodeFront, "Original element is selected");
 
-      let num = yield testActor.getNumberOfElementMatches("#badMarkup5 div");
+      let num = await testActor.getNumberOfElementMatches("#badMarkup5 div");
 
-      let pText = yield testActor.getProperty("#badMarkup5", "textContent");
-      let pTag = yield testActor.getProperty("#badMarkup5", "tagName");
+      let pText = await testActor.getProperty("#badMarkup5", "textContent");
+      let pTag = await testActor.getProperty("#badMarkup5", "tagName");
 
-      let divText = yield testActor.getProperty("#badMarkup5 ~ div",
+      let divText = await testActor.getProperty("#badMarkup5 ~ div",
                                                 "textContent");
-      let divTag = yield testActor.getProperty("#badMarkup5 ~ div", "tagName");
+      let divTag = await testActor.getProperty("#badMarkup5 ~ div", "tagName");
 
       is(num, 0, "The invalid markup got created as a sibling");
       is(pText, "badMarkup5 ", "The p tag does not take in the div content");
       is(pTag, "P", "Did not change to a <div> tag");
       is(divText, "with a nested div", "textContent is correct");
       is(divTag, "DIV", "Did not change to <p> tag");
     }
   }
@@ -107,13 +107,13 @@ const TEST_DATA = [
 const TEST_URL = "data:text/html," +
   "<!DOCTYPE html>" +
   "<head><meta charset='utf-8' /></head>" +
   "<body>" +
   TEST_DATA.map(outer => outer.oldHTML).join("\n") +
   "</body>" +
   "</html>";
 
-add_task(function* () {
-  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector, testActor} = await openInspectorForURL(TEST_URL);
   inspector.markup._frame.focus();
-  yield runEditOuterHTMLTests(TEST_DATA, inspector, testActor);
+  await runEditOuterHTMLTests(TEST_DATA, inspector, testActor);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_html_edit_03.js
+++ b/devtools/client/inspector/markup/test/browser_markup_html_edit_03.js
@@ -15,186 +15,186 @@ const TEST_URL = "data:text/html," +
   "</body>" +
   "</html>";
 const SELECTOR = "#keyboard";
 const OLD_HTML = '<div id="keyboard"></div>';
 const NEW_HTML = '<div id="keyboard">Edited</div>';
 
 requestLongerTimeout(2);
 
-add_task(function* () {
-  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector, testActor} = await openInspectorForURL(TEST_URL);
 
   inspector.markup._frame.focus();
 
   info("Check that pressing escape cancels edits");
-  yield testEscapeCancels(inspector, testActor);
+  await testEscapeCancels(inspector, testActor);
 
   info("Check that pressing F2 commits edits");
-  yield testF2Commits(inspector, testActor);
+  await testF2Commits(inspector, testActor);
 
   info("Check that editing the <body> element works like other nodes");
-  yield testBody(inspector, testActor);
+  await testBody(inspector, testActor);
 
   info("Check that editing the <head> element works like other nodes");
-  yield testHead(inspector, testActor);
+  await testHead(inspector, testActor);
 
   info("Check that editing the <html> element works like other nodes");
-  yield testDocumentElement(inspector, testActor);
+  await testDocumentElement(inspector, testActor);
 
   info("Check (again) that editing the <html> element works like other nodes");
-  yield testDocumentElement2(inspector, testActor);
+  await testDocumentElement2(inspector, testActor);
 });
 
-function* testEscapeCancels(inspector, testActor) {
-  yield selectNode(SELECTOR, inspector);
+async function testEscapeCancels(inspector, testActor) {
+  await selectNode(SELECTOR, inspector);
 
   let onHtmlEditorCreated = once(inspector.markup, "begin-editing");
   EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
-  yield onHtmlEditorCreated;
+  await onHtmlEditorCreated;
   ok(inspector.markup.htmlEditor._visible, "HTML Editor is visible");
 
-  is((yield testActor.getProperty(SELECTOR, "outerHTML")), OLD_HTML,
+  is((await testActor.getProperty(SELECTOR, "outerHTML")), OLD_HTML,
      "The node is starting with old HTML.");
 
   inspector.markup.htmlEditor.editor.setText(NEW_HTML);
 
   let onEditorHiddem = once(inspector.markup.htmlEditor, "popuphidden");
   EventUtils.sendKey("ESCAPE", inspector.markup.htmlEditor.doc.defaultView);
-  yield onEditorHiddem;
+  await onEditorHiddem;
   ok(!inspector.markup.htmlEditor._visible, "HTML Editor is not visible");
 
-  is((yield testActor.getProperty(SELECTOR, "outerHTML")), OLD_HTML,
+  is((await testActor.getProperty(SELECTOR, "outerHTML")), OLD_HTML,
      "Escape cancels edits");
 }
 
-function* testF2Commits(inspector, testActor) {
+async function testF2Commits(inspector, testActor) {
   let onEditorShown = once(inspector.markup.htmlEditor, "popupshown");
   inspector.markup._frame.contentDocument.documentElement.focus();
   EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
-  yield onEditorShown;
+  await onEditorShown;
   ok(inspector.markup.htmlEditor._visible, "HTML Editor is visible");
 
-  is((yield testActor.getProperty(SELECTOR, "outerHTML")), OLD_HTML,
+  is((await testActor.getProperty(SELECTOR, "outerHTML")), OLD_HTML,
      "The node is starting with old HTML.");
 
   let onMutations = inspector.once("markupmutation");
   inspector.markup.htmlEditor.editor.setText(NEW_HTML);
   EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
-  yield onMutations;
+  await onMutations;
 
   ok(!inspector.markup.htmlEditor._visible, "HTML Editor is not visible");
 
-  is((yield testActor.getProperty(SELECTOR, "outerHTML")), NEW_HTML,
+  is((await testActor.getProperty(SELECTOR, "outerHTML")), NEW_HTML,
      "F2 commits edits - the node has new HTML.");
 }
 
-function* testBody(inspector, testActor) {
-  let currentBodyHTML = yield testActor.getProperty("body", "outerHTML");
+async function testBody(inspector, testActor) {
+  let currentBodyHTML = await testActor.getProperty("body", "outerHTML");
   let bodyHTML = '<body id="updated"><p></p></body>';
-  let bodyFront = yield getNodeFront("body", inspector);
+  let bodyFront = await getNodeFront("body", inspector);
 
   let onUpdated = inspector.once("inspector-updated");
   let onReselected = inspector.markup.once("reselectedonremoved");
-  yield inspector.markup.updateNodeOuterHTML(bodyFront, bodyHTML,
+  await inspector.markup.updateNodeOuterHTML(bodyFront, bodyHTML,
                                              currentBodyHTML);
-  yield onReselected;
-  yield onUpdated;
+  await onReselected;
+  await onUpdated;
 
-  let newBodyHTML = yield testActor.getProperty("body", "outerHTML");
+  let newBodyHTML = await testActor.getProperty("body", "outerHTML");
   is(newBodyHTML, bodyHTML, "<body> HTML has been updated");
 
-  let headsNum = yield testActor.getNumberOfElementMatches("head");
+  let headsNum = await testActor.getNumberOfElementMatches("head");
   is(headsNum, 1, "no extra <head>s have been added");
 }
 
-function* testHead(inspector, testActor) {
-  yield selectNode("head", inspector);
+async function testHead(inspector, testActor) {
+  await selectNode("head", inspector);
 
-  let currentHeadHTML = yield testActor.getProperty("head", "outerHTML");
+  let currentHeadHTML = await testActor.getProperty("head", "outerHTML");
   let headHTML = "<head id=\"updated\"><title>New Title</title>" +
                  "<script>window.foo=\"bar\";</script></head>";
-  let headFront = yield getNodeFront("head", inspector);
+  let headFront = await getNodeFront("head", inspector);
 
   let onUpdated = inspector.once("inspector-updated");
   let onReselected = inspector.markup.once("reselectedonremoved");
-  yield inspector.markup.updateNodeOuterHTML(headFront, headHTML,
+  await inspector.markup.updateNodeOuterHTML(headFront, headHTML,
                                              currentHeadHTML);
-  yield onReselected;
-  yield onUpdated;
+  await onReselected;
+  await onUpdated;
 
-  is((yield testActor.eval("document.title")), "New Title",
+  is((await testActor.eval("document.title")), "New Title",
      "New title has been added");
-  is((yield testActor.eval("window.foo")), undefined,
+  is((await testActor.eval("window.foo")), undefined,
      "Script has not been executed");
-  is((yield testActor.getProperty("head", "outerHTML")), headHTML,
+  is((await testActor.getProperty("head", "outerHTML")), headHTML,
      "<head> HTML has been updated");
-  is((yield testActor.getNumberOfElementMatches("body")), 1,
+  is((await testActor.getNumberOfElementMatches("body")), 1,
      "no extra <body>s have been added");
 }
 
-function* testDocumentElement(inspector, testActor) {
-  let currentDocElementOuterHMTL = yield testActor.eval(
+async function testDocumentElement(inspector, testActor) {
+  let currentDocElementOuterHMTL = await testActor.eval(
     "document.documentElement.outerHMTL");
   let docElementHTML = "<html id=\"updated\" foo=\"bar\"><head>" +
                        "<title>Updated from document element</title>" +
                        "<script>window.foo=\"bar\";</script></head><body>" +
                        "<p>Hello</p></body></html>";
-  let docElementFront = yield inspector.markup.walker.documentElement();
+  let docElementFront = await inspector.markup.walker.documentElement();
 
   let onReselected = inspector.markup.once("reselectedonremoved");
-  yield inspector.markup.updateNodeOuterHTML(docElementFront, docElementHTML,
+  await inspector.markup.updateNodeOuterHTML(docElementFront, docElementHTML,
     currentDocElementOuterHMTL);
-  yield onReselected;
+  await onReselected;
 
-  is((yield testActor.eval("document.title")),
+  is((await testActor.eval("document.title")),
      "Updated from document element", "New title has been added");
-  is((yield testActor.eval("window.foo")),
+  is((await testActor.eval("window.foo")),
      undefined, "Script has not been executed");
-  is((yield testActor.getAttribute("html", "id")),
+  is((await testActor.getAttribute("html", "id")),
      "updated", "<html> ID has been updated");
-  is((yield testActor.getAttribute("html", "class")),
+  is((await testActor.getAttribute("html", "class")),
      null, "<html> class has been updated");
-  is((yield testActor.getAttribute("html", "foo")),
+  is((await testActor.getAttribute("html", "foo")),
      "bar", "<html> attribute has been updated");
-  is((yield testActor.getProperty("html", "outerHTML")),
+  is((await testActor.getProperty("html", "outerHTML")),
      docElementHTML, "<html> HTML has been updated");
-  is((yield testActor.getNumberOfElementMatches("head")),
+  is((await testActor.getNumberOfElementMatches("head")),
      1, "no extra <head>s have been added");
-  is((yield testActor.getNumberOfElementMatches("body")),
+  is((await testActor.getNumberOfElementMatches("body")),
      1, "no extra <body>s have been added");
-  is((yield testActor.getProperty("body", "textContent")),
+  is((await testActor.getProperty("body", "textContent")),
      "Hello", "document.body.textContent has been updated");
 }
 
-function* testDocumentElement2(inspector, testActor) {
-  let currentDocElementOuterHMTL = yield testActor.eval(
+async function testDocumentElement2(inspector, testActor) {
+  let currentDocElementOuterHMTL = await testActor.eval(
     "document.documentElement.outerHMTL");
   let docElementHTML = "<html id=\"somethingelse\" class=\"updated\"><head>" +
                        "<title>Updated again from document element</title>" +
                        "<script>window.foo=\"bar\";</script></head><body>" +
                        "<p>Hello again</p></body></html>";
-  let docElementFront = yield inspector.markup.walker.documentElement();
+  let docElementFront = await inspector.markup.walker.documentElement();
 
   let onReselected = inspector.markup.once("reselectedonremoved");
   inspector.markup.updateNodeOuterHTML(docElementFront, docElementHTML,
     currentDocElementOuterHMTL);
-  yield onReselected;
+  await onReselected;
 
-  is((yield testActor.eval("document.title")),
+  is((await testActor.eval("document.title")),
      "Updated again from document element", "New title has been added");
-  is((yield testActor.eval("window.foo")),
+  is((await testActor.eval("window.foo")),
      undefined, "Script has not been executed");
-  is((yield testActor.getAttribute("html", "id")),
+  is((await testActor.getAttribute("html", "id")),
      "somethingelse", "<html> ID has been updated");
-  is((yield testActor.getAttribute("html", "class")),
+  is((await testActor.getAttribute("html", "class")),
      "updated", "<html> class has been updated");
-  is((yield testActor.getAttribute("html", "foo")),
+  is((await testActor.getAttribute("html", "foo")),
      null, "<html> attribute has been removed");
-  is((yield testActor.getProperty("html", "outerHTML")),
+  is((await testActor.getProperty("html", "outerHTML")),
      docElementHTML, "<html> HTML has been updated");
-  is((yield testActor.getNumberOfElementMatches("head")),
+  is((await testActor.getNumberOfElementMatches("head")),
      1, "no extra <head>s have been added");
-  is((yield testActor.getNumberOfElementMatches("body")),
+  is((await testActor.getNumberOfElementMatches("body")),
      1, "no extra <body>s have been added");
-  is((yield testActor.getProperty("body", "textContent")),
+  is((await testActor.getProperty("body", "textContent")),
      "Hello again", "document.body.textContent has been updated");
 }
--- a/devtools/client/inspector/markup/test/browser_markup_html_edit_undo-redo.js
+++ b/devtools/client/inspector/markup/test/browser_markup_html_edit_undo-redo.js
@@ -15,44 +15,44 @@ const TEST_URL = "data:text/html," +
   "<!DOCTYPE html>" +
   "<head><meta charset='utf-8' /></head>" +
   "<body>" +
     DIV1_HTML +
     DIV2_HTML +
   "</body>" +
   "</html>";
 
-add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector} = await openInspectorForURL(TEST_URL);
 
   inspector.markup._frame.focus();
 
-  yield selectNode("#d1", inspector);
+  await selectNode("#d1", inspector);
 
   info("Open the HTML editor on node #d1");
   let onHtmlEditorCreated = once(inspector.markup, "begin-editing");
   EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
-  yield onHtmlEditorCreated;
+  await onHtmlEditorCreated;
 
   ok(inspector.markup.htmlEditor._visible, "HTML Editor is visible");
   is(inspector.markup.htmlEditor.editor.getText(), DIV1_HTML,
       "The editor content for d1 is correct.");
 
   info("Hide the HTML editor for #d1");
   let onEditorHidden = once(inspector.markup.htmlEditor, "popuphidden");
   EventUtils.sendKey("ESCAPE", inspector.markup.htmlEditor.doc.defaultView);
-  yield onEditorHidden;
+  await onEditorHidden;
   ok(!inspector.markup.htmlEditor._visible, "HTML Editor is not visible");
 
-  yield selectNode("#d2", inspector);
+  await selectNode("#d2", inspector);
 
   info("Open the HTML editor on node #d2");
   onHtmlEditorCreated = once(inspector.markup, "begin-editing");
   EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
-  yield onHtmlEditorCreated;
+  await onHtmlEditorCreated;
 
   ok(inspector.markup.htmlEditor._visible, "HTML Editor is visible");
   is(inspector.markup.htmlEditor.editor.getText(), DIV2_HTML,
       "The editor content for d2 is correct.");
 
   inspector.markup.htmlEditor.editor.setText(DIV2_HTML_UPDATED);
   is(inspector.markup.htmlEditor.editor.getText(), DIV2_HTML_UPDATED,
       "The editor content for d2 is updated.");
@@ -63,11 +63,11 @@ add_task(function* () {
 
   inspector.markup.htmlEditor.editor.undo();
   is(inspector.markup.htmlEditor.editor.getText(), DIV2_HTML,
       "The editor content for d2 has not been set to content1.");
 
   info("Hide the HTML editor for #d2");
   onEditorHidden = once(inspector.markup.htmlEditor, "popuphidden");
   EventUtils.sendKey("ESCAPE", inspector.markup.htmlEditor.doc.defaultView);
-  yield onEditorHidden;
+  await onEditorHidden;
   ok(!inspector.markup.htmlEditor._visible, "HTML Editor is not visible");
 });
--- a/devtools/client/inspector/markup/test/browser_markup_image_tooltip.js
+++ b/devtools/client/inspector/markup/test/browser_markup_image_tooltip.js
@@ -9,33 +9,33 @@
 
 const TEST_NODES = [
   {selector: "img.local", size: "192" + " \u00D7 " + "192"},
   {selector: "img.data", size: "64" + " \u00D7 " + "64"},
   {selector: "img.remote", size: "22" + " \u00D7 " + "23"},
   {selector: ".canvas", size: "600" + " \u00D7 " + "600"}
 ];
 
-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_markup_image_and_canvas_2.html");
-  let {inspector} = yield openInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_markup_image_and_canvas_2.html");
+  let {inspector} = await openInspector();
 
   info("Selecting the first <img> tag");
-  yield selectNode("img", inspector);
+  await selectNode("img", inspector);
 
   for (let testNode of TEST_NODES) {
-    let target = yield getImageTooltipTarget(testNode, inspector);
-    yield assertTooltipShownOnHover(inspector.markup.imagePreviewTooltip, target);
+    let target = await getImageTooltipTarget(testNode, inspector);
+    await assertTooltipShownOnHover(inspector.markup.imagePreviewTooltip, target);
     checkImageTooltip(testNode, inspector);
-    yield assertTooltipHiddenOnMouseOut(inspector.markup.imagePreviewTooltip, target);
+    await assertTooltipHiddenOnMouseOut(inspector.markup.imagePreviewTooltip, target);
   }
 });
 
-function* getImageTooltipTarget({selector}, inspector) {
-  let nodeFront = yield getNodeFront(selector, inspector);
+async function getImageTooltipTarget({selector}, inspector) {
+  let nodeFront = await getNodeFront(selector, inspector);
   let isImg = nodeFront.tagName.toLowerCase() === "img";
 
   let container = getContainerForNodeFront(nodeFront, inspector);
 
   let target = container.editor.tag;
   if (isImg) {
     target = container.editor.getAttributeElement("src").querySelector(".link");
   }
--- a/devtools/client/inspector/markup/test/browser_markup_image_tooltip_mutations.js
+++ b/devtools/client/inspector/markup/test/browser_markup_image_tooltip_mutations.js
@@ -11,56 +11,56 @@
 const INITIAL_SRC = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAADI5JREFUeNrsWwuQFNUVPf1m5z87szv7HWSWj8CigBFMEFZKiQsB1PgJwUAZg1HBpIQsKmokEhNjWUnFVPnDWBT+KolJYbRMoqUVq0yCClpqiX8sCchPWFwVlt2db7+X93pez7zu6Vn2NxsVWh8987p7pu+9555z7+tZjTGGY3kjOMa34w447oBjfKsY7i/UNM3Y8eFSAkD50Plgw03K5P9gvGv7U5ieeR3PszeREiPNX3/0DL4hjslzhm8THh+OITfXk3dhiv4GDtGPVzCaeJmPLYzuu5qJuWfuw2QTlcN1X9pwQU7LhdZ/ZAseD45cOh9hHvDkc/yAF/DNhdb5Mrr3PvBMaAYW8fMSIi2G497IMEK/YutGtAYr6+ej+nxu/NN8Ks3N7AR6HgcLz0Eg1Ljg1UcxZzi5qewIkMYLRweTr2Kzp+nmyXAd5pS3XQDd+N/4h4zgu9FI7brlXf90nMEnuwQxlvv+hosE3TuexmWeysmT4W+WxkMaLzf9Y8ATgjcUn7T9H1gqrpFq8eV1gMn6t16NhngjfoX6q4DUP032Rd4LJgpSLwJ1yzFqBG69eRkah0MVyo0Acfe+yy9AG4nMiYCkeM53KKFXncBLAXqEm+wCqZwaueq7WCmuLTcKSJmj737ol2hurA9eq9VdyiO8yWa3NNyog+SB5CZodSsQq/dfu34tJpYbBaTMzvVddDZu16q5smXf4G8zEvqm4cyaAmJPuTJk3oJWdS4WzcVtfMZbThSQckb/pYfRGgo3zNOqZnEHbJPGK4abaDCQIIsT8V/qTaBqHkLh6LzXH8XZQhbLhYKyyCC/WeHYcNdmvOgfe8skzbWL270/T3wf7tSx/lGCbTu8xlzzmCSWLc5iwmgikcCHi3Mga0Ry913vBFvQwg90l6M4ImWKfsWOp7DSWxmfpPlCFuPFfsNfKrCnPYpQKIRgqBK7D0SxYaNHwkEiJMtl0ReDp3Lc5D3PGoTo/sKngCl7a5chFqvBatKwjBd7WwqIlzB/78NcoUcp5VSgGxm+7b8eqQRGnHMO634epO4S1EZww09/iFg5UmGoESDuznP1xVhTUX1WWHPzjpd25wyH0hRxI3LGM75nxmuNEEUVpAN0XgxmPoKralakbQnWlIMQyVBD/w+3orkq4lvualjKyWwzt4MaxqspQHVhPOWG64bxYuhZXSFGWhipbSDVragOu5Y9eAsmDDUKyBA703vemVhHoueD6e9wAzJK1WfmN0Umk5GGM4kEMZcuIECqgjm0nldAqmbjwtm4VxZH5AvlADP6mx9Eqy9Q0+KqW8Ch+47FaMMYmnNGfY1iPMshoC6qFxme4wQ+0p+ARE6H3+9veWEDWgUhDhUKyFARn4jM5BNxT0XsMg7bfymGK1ov3wtjDfhL4w0HVGUVBEjDaaE+QNdrcNWch1PG4W6xrjBUXECGivg++Cva3JUT4iQUz3V2RsSVaKLwOuDT89A3HdBQoxhNC+fnVm74ual2EG893P6G+PuP4SfiO4cCBWQooL9qCWKNXPbcI37Aa/lnlZxXRt4RFONGwSDCPAHqOuqjWct1QiEMw5mChM5X4K47FyNqcd3aK9AwFH0CGYLoe1ctxk2eWi57rg5JfGp9rzC6ggCdFlAgHBDw5Yxlcg6G8SyHCjMlsgmDD9zhSeHlF+JnAgWDTQUy2NxfdwOao1UVV3pi3+bE97YSbWpLAbn6zefHNQkp1PMpIBwwvslKgIYTKM2nEpNzrGcH3FXTEal0L38kJ4uDQgEZbO4vnI173LXf5NHZaiUxtaCxyZuo/rK6LpUg54yg3zTWRAArvDcRIPZ6BqzrQ1REpmL+DNw32OKIDCb3X1qPVn8wNNMT4w2bvs+q4bAZrqBh2skaL3yyhhIIZ4i6oHkUK0RckcB8GigEyRIH4A6Mgc8fatl0/+BkkQxC9gIT4ljna1rIZW9rEdNbjJcNjsnoYj7LHWCUwpITzEgzRQKZ3XAFHbTzA3hrz8TEUUZxFBhoKpABQt/97p+w0hMZG68I8R6FtlsJT3FELndZntjM+VMnylKYq8GJI3UZaRMpquGSGFVOEfv0YZBMNzz+uvjbfzS6xQERIhlI9FcvQWNdFVb7x1zCb+QNK8vb9NsiifmI5hBgVoOCBC1sb0ab5RomqENxLO3eA1/0NDRU47q2RQNbRCUDIb7lF2CNL3ZGxEV4n08TVvZWYG4pZyV0zUdS45tyCBByOHWiyvZmxFXDCyRo1ge5+Sy0TA+8lWMiP/6O0S32exGV9Jf4fr8azdUR3zL/CZz4MtvzdX5uOYs6NDOmpkuj5Huh+7qUQSYl0ThHzw0YQzcGo6bhzEqoYq5rN3yRiYiG3Vfe2Ybm/qKA9NNZ3nNm4F7/yDkg9AN+U1mHiBcXP8zuDN76jj8hg1QyiWQigalj02BJPhK8I0zxijAjhp5zhlpLUDvS+BCy2HMAvvB4XDgL9/SXC0g/ou/5+6/xLX8w0uJrOIkXfPvyhY0F6gr7M8H0KWFYikcqAXakB+xwD9CdREBLoau7Gz3cAdSIdLFxFtJTCqRChSjnutvhDcREtzjz2Tswtz+yeNRFUeXZXtWux7C1fuoVcbd3J//ipDX3uZZDLGrwweS+UBLL5TDliVBnF8P7H+XI8aRRGsIBJg/Zlslt1+W+D1JWoSyi+kD9jfhs78t7mhZhSl+fLfY1Bdyv3I8V/qpY3B1McgN7ZFT5/vNO0I5DPLLdPBIJA8qc4h2I0QplYfDpJwHT+aj0246r5S8rToG8OjCle8wk4OLvvYGa+Ovr84uo2qBSwJS9G5egoZFLTfiEqWDtbwGfHgKOdPHcS+ai7XDzMPW/FJRLGGcxnBbK4YJC2K+h+T6Bdu5CqHqCWERd3bawb7JI+iJ735+LNaHaprBLLHBm08U3XxShEsdt+f3eTh3v7aC95Dct4RCWL5OZWh/oXBZThxAIxyOXLzBk8aiEWJID8rK3CpPOmeHaGpvCS+7EHv5FujVHUSJPLXvIFeHcNc+9xrB2gws9KZdxuLFax/WLM5gzzSm/lTXF/OdAcapyvjxPqxqHjr2v4ckX2bS2dRBrc5lSdpKjEJ9/9tdwX2WMd53ZQ2IVo3RES+UwVSpCPvYepNx4gmTGDUKIMQ4eduPnD7mx9xOn/KZKOlFbStjONxHTtR+BYAPmnoZ1Zp8wkBRwP/EL3u0F/C2hGl7vpz7vW37T3vP7if8wroKuoh8ribknX9BK5rcF+mo1qKaKyRPJTgTDjbzY8szcuLb3bpH00u35T47j7prRpwDJTxzyG0dHgxPp5bPG8VdkpfPbUg3SgoOo2mwVukb98D5EqpswZTTulCggTk4gpYhv0++wIhCJxr0+Hq1sondis0SE2oxQe3qWXwWyO4DSQg9gJ8Iiw1VFcGqXxet0N9xE4ygIxv/9W6wo9WyROEX/R+eiobYSq2vHTOR631Eiv2lRfh9dvxkumkXh92Qsx8XrAJ+7YGbWuhxOi/U+31NQmzyqNYG8N/3wfo6CRtRHcN01FzkvojohwLu0VVvDa56IS/xcj2b7nN+O+m0jqpE1wMPXZxAN9iCVThtDvH7gmiRGRpU8Lspv1Uhq4wIVdQoyuGSLNYPKUCS8+CzNURbzMmjK3i8u0U793lmuV0ef9nWQ5MGC/DiUqEUSaCtXna9RJEspZS1lrXINK/pcq+SpT50t98QKMq1FRmDfx3vxty102k0PM4ssEnvuz5+G26Ij4yDpz6z9fV8bkyIkqBFkhej0Ib+ZQ34XJK9AfozaiimqIoX3Jp3tiISrcfYpuN2+iFph/02P36PNC9fVcCnp6H9jYouKyfaWufz5Tp9tVxcUniw7IohZv4dZz81/ns67z3AYPrc2n0+Ix2q8k0PWjgBy88XaibnfK9A+5LdDY2Ivhy36fbT8Zv3Lb1U1qLqUxorXEEXIs0mjjrtxoTZWtdvigNs2sgPiujTv6DIZLld6b/V5742JZV3fUsUVFy5gdsNtKWFzUCEVbNepD1MkSMVbsb6SZm7jI3/zODtQKgUMsOw8wDZ63t5xcV1TnaEAxoc6wrqY+Fj+N4DsqOnhOIdicrQSm1MPYCPlIqHn5bbHg8/bj2D3QfZnCX3mpAICDZV8jH5kpbZqTD0W+DxaA74CWzLN2nd14OlL72J38Lf7+TjC7dadZFDoZJQPrtaIKL/G0L6ktptPZVJ8fMqHYPZOKYPMyQGadIJfDvdXwAFiZOTvDBPydf5vk4rWA+RfdhBlaF/yDDBRoMu9pfnSjv/p7DG+HXfAcQcc49v/BBgAcFAO4DmB2GQAAAAASUVORK5CYII=";
 /* eslint-enable */
 
 const UPDATED_SRC = URL_ROOT + "doc_markup_tooltip.png";
 
 const INITIAL_SRC_SIZE = "64" + " \u00D7 " + "64";
 const UPDATED_SRC_SIZE = "22" + " \u00D7 " + "23";
 
-add_task(function* () {
-  let { inspector } = yield openInspectorForURL(
+add_task(async function() {
+  let { inspector } = await openInspectorForURL(
     "data:text/html,<p>markup view tooltip test</p><img>");
 
   info("Retrieving NodeFront for the <img> element.");
-  let img = yield getNodeFront("img", inspector);
+  let img = await getNodeFront("img", inspector);
 
   info("Selecting the <img> element");
-  yield selectNode(img, inspector);
+  await selectNode(img, inspector);
 
   info("Adding src attribute to the image.");
-  yield updateImageSrc(img, INITIAL_SRC, inspector);
+  await updateImageSrc(img, INITIAL_SRC, inspector);
 
   let container = getContainerForNodeFront(img, inspector);
   ok(container, "Found markup container for the image.");
 
   let target = container.editor.getAttributeElement("src")
                                .querySelector(".link");
   ok(target, "Found the src attribute in the markup view.");
 
   info("Showing tooltip on the src link.");
-  yield assertTooltipShownOnHover(inspector.markup.imagePreviewTooltip, target);
+  await assertTooltipShownOnHover(inspector.markup.imagePreviewTooltip, target);
 
   checkImageTooltip(INITIAL_SRC_SIZE, inspector);
 
-  yield assertTooltipHiddenOnMouseOut(inspector.markup.imagePreviewTooltip, target);
+  await assertTooltipHiddenOnMouseOut(inspector.markup.imagePreviewTooltip, target);
 
   info("Updating the image src.");
-  yield updateImageSrc(img, UPDATED_SRC, inspector);
+  await updateImageSrc(img, UPDATED_SRC, inspector);
 
   target = container.editor.getAttributeElement("src").querySelector(".link");
   ok(target, "Found the src attribute in the markup view after mutation.");
 
   info("Showing tooltip on the src link.");
-  yield assertTooltipShownOnHover(inspector.markup.imagePreviewTooltip, target);
+  await assertTooltipShownOnHover(inspector.markup.imagePreviewTooltip, target);
 
   info("Checking that the new image was shown.");
   checkImageTooltip(UPDATED_SRC_SIZE, inspector);
 
-  yield assertTooltipHiddenOnMouseOut(inspector.markup.imagePreviewTooltip, target);
+  await assertTooltipHiddenOnMouseOut(inspector.markup.imagePreviewTooltip, target);
 });
 
 /**
  * Updates the src attribute of the image. Return a Promise.
  */
 function updateImageSrc(img, newSrc, inspector) {
   let onMutated = inspector.once("markupmutation");
   let onModified = img.modifyAttributes([{
--- a/devtools/client/inspector/markup/test/browser_markup_keybindings_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_keybindings_01.js
@@ -5,34 +5,34 @@
 "use strict";
 
 requestLongerTimeout(2);
 
 // Tests tabbing through attributes on a node
 
 const TEST_URL = "data:text/html;charset=utf8,<div id='test' a b c d e></div>";
 
-add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector} = await openInspectorForURL(TEST_URL);
 
   info("Focusing the tag editor of the test element");
-  let {editor} = yield focusNode("div", inspector);
+  let {editor} = await focusNode("div", inspector);
   editor.tag.focus();
 
   info("Pressing tab and expecting to focus the ID attribute, always first");
   EventUtils.sendKey("tab", inspector.panelWin);
   checkFocusedAttribute("id");
 
   info("Hit enter to turn the attribute to edit mode");
   EventUtils.sendKey("return", inspector.panelWin);
   checkFocusedAttribute("id", true);
 
   // Check the order of the other attributes in the DOM to the check they appear
   // correctly in the markup-view
-  let attributes = (yield getAttributesFromEditor("div", inspector)).slice(1);
+  let attributes = (await getAttributesFromEditor("div", inspector)).slice(1);
 
   info("Tabbing forward through attributes in edit mode");
   for (let attribute of attributes) {
     collapseSelectionAndTab(inspector);
     checkFocusedAttribute(attribute, true);
   }
 
   info("Tabbing backward through attributes in edit mode");
--- a/devtools/client/inspector/markup/test/browser_markup_keybindings_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_keybindings_02.js
@@ -4,29 +4,29 @@
 
 "use strict";
 
 // Tests that pressing ESC when a node in the markup-view is focused toggles
 // the split-console (see bug 988278)
 
 const TEST_URL = "data:text/html;charset=utf8,<div></div>";
 
-add_task(function* () {
-  let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector, toolbox} = await openInspectorForURL(TEST_URL);
 
   info("Focusing the tag editor of the test element");
-  let {editor} = yield getContainerForSelector("div", inspector);
+  let {editor} = await getContainerForSelector("div", inspector);
   editor.tag.focus();
 
   info("Pressing ESC and wait for the split-console to open");
   let onSplitConsole = toolbox.once("split-console");
   let onConsoleReady = toolbox.once("webconsole-ready");
   EventUtils.synthesizeKey("VK_ESCAPE", {}, inspector.panelWin);
-  yield onSplitConsole;
-  yield onConsoleReady;
+  await onSplitConsole;
+  await onConsoleReady;
   ok(toolbox.splitConsole, "The split console is shown.");
 
   info("Pressing ESC again and wait for the split-console to close");
   onSplitConsole = toolbox.once("split-console");
   EventUtils.synthesizeKey("VK_ESCAPE", {}, inspector.panelWin);
-  yield onSplitConsole;
+  await onSplitConsole;
   ok(!toolbox.splitConsole, "The split console is hidden.");
 });
--- a/devtools/client/inspector/markup/test/browser_markup_keybindings_03.js
+++ b/devtools/client/inspector/markup/test/browser_markup_keybindings_03.js
@@ -6,45 +6,45 @@
 
 // Tests that selecting a node with the mouse (by clicking on the line) focuses
 // the first focusable element in the corresponding MarkupContainer so that the
 // keyboard can be used immediately.
 
 const TEST_URL = `data:text/html;charset=utf8,
                   <div class='test-class'></div>Text node`;
 
-add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector} = await openInspectorForURL(TEST_URL);
   let {walker} = inspector;
 
   info("Select the test node to have the 2 test containers visible");
-  yield selectNode("div", inspector);
+  await selectNode("div", inspector);
 
-  let divFront = yield walker.querySelector(walker.rootNode, "div");
-  let textFront = yield walker.nextSibling(divFront);
+  let divFront = await walker.querySelector(walker.rootNode, "div");
+  let textFront = await walker.nextSibling(divFront);
 
   info("Click on the MarkupContainer element for the text node");
-  yield clickContainer(textFront, inspector);
+  await clickContainer(textFront, inspector);
   is(inspector.markup.doc.activeElement,
      getContainerForNodeFront(textFront, inspector).editor.value,
      "The currently focused element is the node's text content");
 
   info("Click on the MarkupContainer element for the <div> node");
-  yield clickContainer(divFront, inspector);
+  await clickContainer(divFront, inspector);
   is(inspector.markup.doc.activeElement,
      getContainerForNodeFront(divFront, inspector).editor.tag,
      "The currently focused element is the div's tagname");
 
   info("Click on the test-class attribute, to make sure it gets focused");
   let editor = getContainerForNodeFront(divFront, inspector).editor;
   let attributeEditor = editor.attrElements.get("class")
                                            .querySelector(".editable");
 
   let onFocus = once(attributeEditor, "focus");
   EventUtils.synthesizeMouseAtCenter(attributeEditor, {type: "mousedown"},
     inspector.markup.doc.defaultView);
   EventUtils.synthesizeMouseAtCenter(attributeEditor, {type: "mouseup"},
     inspector.markup.doc.defaultView);
-  yield onFocus;
+  await onFocus;
 
   is(inspector.markup.doc.activeElement, attributeEditor,
      "The currently focused element is the div's class attribute");
 });
--- a/devtools/client/inspector/markup/test/browser_markup_keybindings_04.js
+++ b/devtools/client/inspector/markup/test/browser_markup_keybindings_04.js
@@ -7,52 +7,52 @@
 requestLongerTimeout(2);
 
 // Tests that selecting a node using the browser context menu (inspect element)
 // or the element picker focuses that node so that the keyboard can be used
 // immediately.
 
 const TEST_URL = "data:text/html;charset=utf8,<div>test element</div>";
 
-add_task(function* () {
-  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector, testActor} = await openInspectorForURL(TEST_URL);
 
   info("Select the test node with the browser ctx menu");
-  yield clickOnInspectMenuItem(testActor, "div");
+  await clickOnInspectMenuItem(testActor, "div");
   assertNodeSelected(inspector, "div");
 
   info("Press arrowUp to focus <body> " +
        "(which works if the node was focused properly)");
-  yield selectPreviousNodeWithArrowUp(inspector);
+  await selectPreviousNodeWithArrowUp(inspector);
   assertNodeSelected(inspector, "body");
 
   info("Select the test node with the element picker");
-  yield selectWithElementPicker(inspector, testActor);
+  await selectWithElementPicker(inspector, testActor);
   assertNodeSelected(inspector, "div");
 
   info("Press arrowUp to focus <body> " +
        "(which works if the node was focused properly)");
-  yield selectPreviousNodeWithArrowUp(inspector);
+  await selectPreviousNodeWithArrowUp(inspector);
   assertNodeSelected(inspector, "body");
 });
 
 function assertNodeSelected(inspector, tagName) {
   is(inspector.selection.nodeFront.tagName.toLowerCase(), tagName,
     `The <${tagName}> node is selected`);
 }
 
 function selectPreviousNodeWithArrowUp(inspector) {
   let onNodeHighlighted = inspector.toolbox.once("node-highlight");
   let onUpdated = inspector.once("inspector-updated");
   EventUtils.synthesizeKey("KEY_ArrowUp");
   return Promise.all([onUpdated, onNodeHighlighted]);
 }
 
-function* selectWithElementPicker(inspector, testActor) {
-  yield startPicker(inspector.toolbox);
+async function selectWithElementPicker(inspector, testActor) {
+  await startPicker(inspector.toolbox);
 
-  yield BrowserTestUtils.synthesizeMouseAtCenter("div", {
+  await BrowserTestUtils.synthesizeMouseAtCenter("div", {
     type: "mousemove",
   }, gBrowser.selectedBrowser);
 
-  yield testActor.synthesizeKey({key: "KEY_Enter", options: {}});
-  yield inspector.once("inspector-updated");
+  await testActor.synthesizeKey({key: "KEY_Enter", options: {}});
+  await inspector.once("inspector-updated");
 }
--- a/devtools/client/inspector/markup/test/browser_markup_keybindings_delete_attributes.js
+++ b/devtools/client/inspector/markup/test/browser_markup_keybindings_delete_attributes.js
@@ -19,45 +19,45 @@ const TEST_URL = "data:text/html;charset
 const TEST_DATA = [{
   selector: "#id",
   attribute: "class"
 }, {
   selector: "#id",
   attribute: "data-id"
 }];
 
-add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector} = await openInspectorForURL(TEST_URL);
   let {walker} = inspector;
 
   for (let {selector, attribute} of TEST_DATA) {
     info("Get the container for node " + selector);
-    let {editor} = yield getContainerForSelector(selector, inspector);
+    let {editor} = await getContainerForSelector(selector, inspector);
 
     info("Focus attribute " + attribute);
     let attr = editor.attrElements.get(attribute).querySelector(".editable");
     attr.focus();
 
     info("Delete the attribute by pressing delete");
     let mutated = inspector.once("markupmutation");
     EventUtils.sendKey("delete", inspector.panelWin);
-    yield mutated;
+    await mutated;
 
     info("Check that the node is still here");
-    let node = yield walker.querySelector(walker.rootNode, selector);
+    let node = await walker.querySelector(walker.rootNode, selector);
     ok(node, "The node hasn't been deleted");
 
     info("Check that the attribute has been deleted");
-    node = yield walker.querySelector(walker.rootNode,
+    node = await walker.querySelector(walker.rootNode,
                                       selector + "[" + attribute + "]");
     ok(!node, "The attribute does not exist anymore in the DOM");
     ok(!editor.attrElements.get(attribute),
        "The attribute has been removed from the container");
 
     info("Undo the change");
-    yield undoChange(inspector);
-    node = yield walker.querySelector(walker.rootNode,
+    await undoChange(inspector);
+    node = await walker.querySelector(walker.rootNode,
                                       selector + "[" + attribute + "]");
     ok(node, "The attribute is back in the DOM");
     ok(editor.attrElements.get(attribute),
        "The attribute is back on the container");
   }
 });
--- a/devtools/client/inspector/markup/test/browser_markup_keybindings_scrolltonode.js
+++ b/devtools/client/inspector/markup/test/browser_markup_keybindings_scrolltonode.js
@@ -12,75 +12,75 @@ const HTML =
       style="height: 50px; top: 0; position:absolute;">
       TOP</div>
     <div id="scroll-bottom"
       style="height: 50px; bottom: 0; position:absolute;">
       BOTTOM</div>
   </div>`;
 const TEST_URL = "data:text/html;charset=utf-8," + encodeURIComponent(HTML);
 
-add_task(function* () {
-  let { inspector, testActor } = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let { inspector, testActor } = await openInspectorForURL(TEST_URL);
 
   info("Make sure the markup frame has the focus");
   inspector.markup._frame.focus();
 
   info("Before test starts, #scroll-top is visible, #scroll-bottom is hidden");
-  yield checkElementIsInViewport("#scroll-top", true, testActor);
-  yield checkElementIsInViewport("#scroll-bottom", false, testActor);
+  await checkElementIsInViewport("#scroll-top", true, testActor);
+  await checkElementIsInViewport("#scroll-bottom", false, testActor);
 
   info("Select the #scroll-bottom node");
-  yield selectNode("#scroll-bottom", inspector);
+  await selectNode("#scroll-bottom", inspector);
   info("Press S to scroll to the bottom node");
   let waitForScroll = testActor.waitForEventOnNode("scroll");
-  yield EventUtils.synthesizeKey("S", {}, inspector.panelWin);
-  yield waitForScroll;
+  await EventUtils.synthesizeKey("S", {}, inspector.panelWin);
+  await waitForScroll;
   ok(true, "Scroll event received");
 
   info("#scroll-top should be scrolled out, #scroll-bottom should be visible");
-  yield checkElementIsInViewport("#scroll-top", false, testActor);
-  yield checkElementIsInViewport("#scroll-bottom", true, testActor);
+  await checkElementIsInViewport("#scroll-top", false, testActor);
+  await checkElementIsInViewport("#scroll-bottom", true, testActor);
 
   info("Select the #scroll-top node");
-  yield selectNode("#scroll-top", inspector);
+  await selectNode("#scroll-top", inspector);
   info("Press S to scroll to the top node");
   waitForScroll = testActor.waitForEventOnNode("scroll");
-  yield EventUtils.synthesizeKey("S", {}, inspector.panelWin);
-  yield waitForScroll;
+  await EventUtils.synthesizeKey("S", {}, inspector.panelWin);
+  await waitForScroll;
   ok(true, "Scroll event received");
 
   info("#scroll-top should be visible, #scroll-bottom should be scrolled out");
-  yield checkElementIsInViewport("#scroll-top", true, testActor);
-  yield checkElementIsInViewport("#scroll-bottom", false, testActor);
+  await checkElementIsInViewport("#scroll-top", true, testActor);
+  await checkElementIsInViewport("#scroll-bottom", false, testActor);
 
   info("Select #scroll-bottom node");
-  yield selectNode("#scroll-bottom", inspector);
+  await selectNode("#scroll-bottom", inspector);
   info("Press shift + S, nothing should happen due to the modifier");
-  yield EventUtils.synthesizeKey("S", {shiftKey: true}, inspector.panelWin);
+  await EventUtils.synthesizeKey("S", {shiftKey: true}, inspector.panelWin);
 
   info("Same state, #scroll-top is visible, #scroll-bottom is scrolled out");
-  yield checkElementIsInViewport("#scroll-top", true, testActor);
-  yield checkElementIsInViewport("#scroll-bottom", false, testActor);
+  await checkElementIsInViewport("#scroll-top", true, testActor);
+  await checkElementIsInViewport("#scroll-bottom", false, testActor);
 });
 
 /**
  * Verify that the element matching the provided selector is either in or out
  * of the viewport, depending on the provided "expected" argument.
  * Returns a promise that will resolve when the test has been performed.
  *
  * @param {String} selector
  *        css selector for the element to test
  * @param {Boolean} expected
  *        true if the element is expected to be in the viewport, false otherwise
  * @param {TestActor} testActor
  *        current test actor
  * @return {Promise} promise
  */
-function* checkElementIsInViewport(selector, expected, testActor) {
-  let isInViewport = yield testActor.eval(`
+async function checkElementIsInViewport(selector, expected, testActor) {
+  let isInViewport = await testActor.eval(`
     let node = document.querySelector("${selector}");
     let rect = node.getBoundingClientRect();
     rect.bottom >= 0 && rect.right >= 0 &&
       rect.top <= window.innerHeight && rect.left <= window.innerWidth;
   `);
 
   is(isInViewport, expected,
     selector + " in the viewport: expected to be " + expected);
--- a/devtools/client/inspector/markup/test/browser_markup_links_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_links_01.js
@@ -97,23 +97,23 @@ const TEST_DATA = [{
   attributes: [{
     attributeName: "src",
     links: [{type: "jsresource", value: "lib_jquery_1.0.js"}]
   }]
 }];
 
 requestLongerTimeout(2);
 
-add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector} = await openInspectorForURL(TEST_URL);
 
   for (let {selector, attributes} of TEST_DATA) {
     info("Testing attributes on node " + selector);
-    yield selectNode(selector, inspector);
-    let {editor} = yield getContainerForSelector(selector, inspector);
+    await selectNode(selector, inspector);
+    let {editor} = await getContainerForSelector(selector, inspector);
 
     for (let {attributeName, links} of attributes) {
       info("Testing attribute " + attributeName);
       let linkEls = editor.attrElements.get(attributeName)
                                        .querySelectorAll(".link");
 
       is(linkEls.length, links.length, "The right number of links were found");
 
--- a/devtools/client/inspector/markup/test/browser_markup_links_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_links_02.js
@@ -4,35 +4,35 @@
 
 "use strict";
 
 // Tests that attributes are linkified correctly when attributes are updated
 // and created.
 
 const TEST_URL = URL_ROOT + "doc_markup_links.html";
 
-add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector} = await openInspectorForURL(TEST_URL);
 
   info("Adding a contextmenu attribute to the body node");
-  yield addNewAttributes("body", "contextmenu=\"menu1\"", inspector);
+  await addNewAttributes("body", "contextmenu=\"menu1\"", inspector);
 
   info("Checking for links in the new attribute");
-  let {editor} = yield getContainerForSelector("body", inspector);
+  let {editor} = await getContainerForSelector("body", inspector);
   let linkEls = editor.attrElements.get("contextmenu")
                                    .querySelectorAll(".link");
   is(linkEls.length, 1, "There is one link in the contextmenu attribute");
   is(linkEls[0].dataset.type, "idref", "The link has the right type");
   is(linkEls[0].textContent, "menu1", "The link has the right value");
 
   info("Editing the contextmenu attribute on the body node");
   let nodeMutated = inspector.once("markupmutation");
   let attr = editor.attrElements.get("contextmenu").querySelector(".editable");
   setEditableFieldValue(attr, "contextmenu=\"menu2\"", inspector);
-  yield nodeMutated;
+  await nodeMutated;
 
   info("Checking for links in the updated attribute");
-  ({editor} = yield getContainerForSelector("body", inspector));
+  ({editor} = await getContainerForSelector("body", inspector));
   linkEls = editor.attrElements.get("contextmenu").querySelectorAll(".link");
   is(linkEls.length, 1, "There is one link in the contextmenu attribute");
   is(linkEls[0].dataset.type, "idref", "The link has the right type");
   is(linkEls[0].textContent, "menu2", "The link has the right value");
 });
--- a/devtools/client/inspector/markup/test/browser_markup_links_03.js
+++ b/devtools/client/inspector/markup/test/browser_markup_links_03.js
@@ -3,36 +3,36 @@
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Tests that links appear correctly in attributes created in content.
 
 const TEST_URL = URL_ROOT + "doc_markup_links.html";
 
-add_task(function* () {
-  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector, testActor} = await openInspectorForURL(TEST_URL);
 
   info("Adding a contextmenu attribute to the body node via the content");
   let onMutated = inspector.once("markupmutation");
-  yield testActor.setAttribute("body", "contextmenu", "menu1");
-  yield onMutated;
+  await testActor.setAttribute("body", "contextmenu", "menu1");
+  await onMutated;
 
   info("Checking for links in the new attribute");
-  let {editor} = yield getContainerForSelector("body", inspector);
+  let {editor} = await getContainerForSelector("body", inspector);
   let linkEls = editor.attrElements.get("contextmenu")
                                    .querySelectorAll(".link");
   is(linkEls.length, 1, "There is one link in the contextmenu attribute");
   is(linkEls[0].dataset.type, "idref", "The link has the right type");
   is(linkEls[0].textContent, "menu1", "The link has the right value");
 
   info("Editing the contextmenu attribute on the body node");
   onMutated = inspector.once("markupmutation");
-  yield testActor.setAttribute("body", "contextmenu", "menu2");
-  yield onMutated;
+  await testActor.setAttribute("body", "contextmenu", "menu2");
+  await onMutated;
 
   info("Checking for links in the updated attribute");
-  ({editor} = yield getContainerForSelector("body", inspector));
+  ({editor} = await getContainerForSelector("body", inspector));
   linkEls = editor.attrElements.get("contextmenu").querySelectorAll(".link");
   is(linkEls.length, 1, "There is one link in the contextmenu attribute");
   is(linkEls[0].dataset.type, "idref", "The link has the right type");
   is(linkEls[0].textContent, "menu2", "The link has the right value");
 });
--- a/devtools/client/inspector/markup/test/browser_markup_links_04.js
+++ b/devtools/client/inspector/markup/test/browser_markup_links_04.js
@@ -67,25 +67,25 @@ const TEST_DATA = [{
 }, {
   selector: "p[for]",
   attributeName: "for",
   popupNodeSelector: ".attr-value",
   isLinkFollowItemVisible: false,
   isLinkCopyItemVisible: false
 }];
 
-add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector} = await openInspectorForURL(TEST_URL);
 
   for (let test of TEST_DATA) {
     info("Selecting test node " + test.selector);
-    yield selectNode(test.selector, inspector);
+    await selectNode(test.selector, inspector);
 
     info("Finding the popupNode to anchor the context-menu to");
-    let {editor} = yield getContainerForSelector(test.selector, inspector);
+    let {editor} = await getContainerForSelector(test.selector, inspector);
     let popupNode = editor.attrElements.get(test.attributeName)
                     .querySelector(test.popupNodeSelector);
     ok(popupNode, "Found the popupNode in attribute " + test.attributeName);
 
     info("Simulating a context click on the popupNode");
     let allMenuItems = openContextMenuAndGetAllItems(inspector, {
       target: popupNode,
     });
--- a/devtools/client/inspector/markup/test/browser_markup_links_05.js
+++ b/devtools/client/inspector/markup/test/browser_markup_links_05.js
@@ -4,66 +4,66 @@
 
 "use strict";
 
 // Tests that the contextual menu items shown when clicking on links in
 // attributes actually do the right things.
 
 const TEST_URL = URL_ROOT + "doc_markup_links.html";
 
-add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector} = await openInspectorForURL(TEST_URL);
 
   info("Select a node with a URI attribute");
-  yield selectNode("video", inspector);
+  await selectNode("video", inspector);
 
   info("Set the popupNode to the node that contains the uri");
-  let {editor} = yield getContainerForSelector("video", inspector);
+  let {editor} = await getContainerForSelector("video", inspector);
   openContextMenuAndGetAllItems(inspector, {
     target: editor.attrElements.get("poster").querySelector(".link"),
   });
 
   info("Follow the link and wait for the new tab to open");
   let onTabOpened = once(gBrowser.tabContainer, "TabOpen");
   inspector.onFollowLink();
-  let {target: tab} = yield onTabOpened;
-  yield BrowserTestUtils.browserLoaded(tab.linkedBrowser);
+  let {target: tab} = await onTabOpened;
+  await BrowserTestUtils.browserLoaded(tab.linkedBrowser);
 
   ok(true, "A new tab opened");
   is(tab.linkedBrowser.currentURI.spec, URL_ROOT + "doc_markup_tooltip.png",
     "The URL for the new tab is correct");
   gBrowser.removeTab(tab);
 
   info("Select a node with a IDREF attribute");
-  yield selectNode("label", inspector);
+  await selectNode("label", inspector);
 
   info("Set the popupNode to the node that contains the ref");
-  ({editor} = yield getContainerForSelector("label", inspector));
+  ({editor} = await getContainerForSelector("label", inspector));
   openContextMenuAndGetAllItems(inspector, {
     target: editor.attrElements.get("for").querySelector(".link"),
   });
 
   info("Follow the link and wait for the new node to be selected");
   let onSelection = inspector.selection.once("new-node-front");
   inspector.onFollowLink();
-  yield onSelection;
+  await onSelection;
 
   ok(true, "A new node was selected");
   is(inspector.selection.nodeFront.id, "name", "The right node was selected");
 
   info("Select a node with an invalid IDREF attribute");
-  yield selectNode("output", inspector);
+  await selectNode("output", inspector);
 
   info("Set the popupNode to the node that contains the ref");
-  ({editor} = yield getContainerForSelector("output", inspector));
+  ({editor} = await getContainerForSelector("output", inspector));
   openContextMenuAndGetAllItems(inspector, {
     target: editor.attrElements.get("for").querySelectorAll(".link")[2],
   });
 
   info("Try to follow the link and check that no new node were selected");
   let onFailed = inspector.once("idref-attribute-link-failed");
   inspector.onFollowLink();
-  yield onFailed;
+  await onFailed;
 
   ok(true, "The node selection failed");
   is(inspector.selection.nodeFront.tagName.toLowerCase(), "output",
     "The <output> node is still selected");
 });
--- a/devtools/client/inspector/markup/test/browser_markup_links_06.js
+++ b/devtools/client/inspector/markup/test/browser_markup_links_06.js
@@ -9,50 +9,50 @@
 
 // The following rejection should not be left uncaught. This test has been
 // whitelisted until the issue is fixed.
 ChromeUtils.import("resource://testing-common/PromiseTestUtils.jsm", this);
 PromiseTestUtils.expectUncaughtRejection(/NS_ERROR_NOT_INITIALIZED/);
 
 const TEST_URL = URL_ROOT + "doc_markup_links.html";
 
-add_task(function* () {
-  let {toolbox, inspector} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {toolbox, inspector} = await openInspectorForURL(TEST_URL);
 
   info("Select a node with a cssresource attribute");
-  yield selectNode("link", inspector);
+  await selectNode("link", inspector);
 
   info("Set the popupNode to the node that contains the uri");
-  let {editor} = yield getContainerForSelector("link", inspector);
+  let {editor} = await getContainerForSelector("link", inspector);
   openContextMenuAndGetAllItems(inspector, {
     target: editor.attrElements.get("href").querySelector(".link"),
   });
 
   info("Follow the link and wait for the style-editor to open");
   let onStyleEditorReady = toolbox.once("styleeditor-ready");
   inspector.onFollowLink();
-  yield onStyleEditorReady;
+  await onStyleEditorReady;
 
   // No real need to test that the editor opened on the right file here as this
   // is already tested in /framework/test/browser_toolbox_view_source_*
   ok(true, "The style-editor was open");
 
   info("Switch back to the inspector");
-  yield toolbox.selectTool("inspector");
+  await toolbox.selectTool("inspector");
 
   info("Select a node with a jsresource attribute");
-  yield selectNode("script", inspector);
+  await selectNode("script", inspector);
 
   info("Set the popupNode to the node that contains the uri");
-  ({editor} = yield getContainerForSelector("script", inspector));
+  ({editor} = await getContainerForSelector("script", inspector));
   openContextMenuAndGetAllItems(inspector, {
     target: editor.attrElements.get("src").querySelector(".link"),
   });
 
   info("Follow the link and wait for the debugger to open");
   let onDebuggerReady = toolbox.once("jsdebugger-ready");
   inspector.onFollowLink();
-  yield onDebuggerReady;
+  await onDebuggerReady;
 
   // No real need to test that the debugger opened on the right file here as
   // this is already tested in /framework/test/browser_toolbox_view_source_*
   ok(true, "The debugger was open");
 });
--- a/devtools/client/inspector/markup/test/browser_markup_links_07.js
+++ b/devtools/client/inspector/markup/test/browser_markup_links_07.js
@@ -4,63 +4,63 @@
 
 "use strict";
 
 // Tests that a middle-click or meta/ctrl-click on links in attributes actually
 // do follows the link.
 
 const TEST_URL = URL_ROOT + "doc_markup_links.html";
 
-add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector} = await openInspectorForURL(TEST_URL);
 
   info("Select a node with a URI attribute");
-  yield selectNode("video", inspector);
+  await selectNode("video", inspector);
 
   info("Find the link element from the markup-view");
-  let {editor} = yield getContainerForSelector("video", inspector);
+  let {editor} = await getContainerForSelector("video", inspector);
   let linkEl = editor.attrElements.get("poster").querySelector(".link");
 
   info("Follow the link with middle-click and wait for the new tab to open");
-  yield followLinkWaitForTab(linkEl, false,
+  await followLinkWaitForTab(linkEl, false,
                              URL_ROOT + "doc_markup_tooltip.png");
 
   info("Follow the link with meta/ctrl-click and wait for the new tab to open");
-  yield followLinkWaitForTab(linkEl, true,
+  await followLinkWaitForTab(linkEl, true,
                              URL_ROOT + "doc_markup_tooltip.png");
 
   info("Select a node with a IDREF attribute");
-  yield selectNode("label", inspector);
+  await selectNode("label", inspector);
 
   info("Find the link element from the markup-view that contains the ref");
-  ({editor} = yield getContainerForSelector("label", inspector));
+  ({editor} = await getContainerForSelector("label", inspector));
   linkEl = editor.attrElements.get("for").querySelector(".link");
 
   info("Follow link with middle-click, wait for new node to be selected.");
-  yield followLinkWaitForNewNode(linkEl, false, inspector);
+  await followLinkWaitForNewNode(linkEl, false, inspector);
 
   // We have to re-select the label as the link switched the currently selected
   // node.
-  yield selectNode("label", inspector);
+  await selectNode("label", inspector);
 
   info("Follow link with ctrl/meta-click, wait for new node to be selected.");
-  yield followLinkWaitForNewNode(linkEl, true, inspector);
+  await followLinkWaitForNewNode(linkEl, true, inspector);
 
   info("Select a node with an invalid IDREF attribute");
-  yield selectNode("output", inspector);
+  await selectNode("output", inspector);
 
   info("Find the link element from the markup-view that contains the ref");
-  ({editor} = yield getContainerForSelector("output", inspector));
+  ({editor} = await getContainerForSelector("output", inspector));
   linkEl = editor.attrElements.get("for").querySelectorAll(".link")[2];
 
   info("Try to follow link wiith middle-click, check no new node selected");
-  yield followLinkNoNewNode(linkEl, false, inspector);
+  await followLinkNoNewNode(linkEl, false, inspector);
 
   info("Try to follow link wiith meta/ctrl-click, check no new node selected");
-  yield followLinkNoNewNode(linkEl, true, inspector);
+  await followLinkNoNewNode(linkEl, true, inspector);
 });
 
 function performMouseDown(linkEl, metactrl) {
   let evt = linkEl.ownerDocument.createEvent("MouseEvents");
 
   let button = -1;
 
   if (metactrl) {
@@ -73,37 +73,37 @@ function performMouseDown(linkEl, metact
 
   evt.initMouseEvent("mousedown", true, true,
       linkEl.ownerDocument.defaultView, 1, 0, 0, 0, 0, metactrl,
       false, false, metactrl, button, null);
 
   linkEl.dispatchEvent(evt);
 }
 
-function* followLinkWaitForTab(linkEl, isMetaClick, expectedTabURI) {
+async function followLinkWaitForTab(linkEl, isMetaClick, expectedTabURI) {
   let onTabOpened = once(gBrowser.tabContainer, "TabOpen");
   performMouseDown(linkEl, isMetaClick);
-  let {target} = yield onTabOpened;
-  yield BrowserTestUtils.browserLoaded(target.linkedBrowser);
+  let {target} = await onTabOpened;
+  await BrowserTestUtils.browserLoaded(target.linkedBrowser);
   ok(true, "A new tab opened");
   is(target.linkedBrowser.currentURI.spec, expectedTabURI,
      "The URL for the new tab is correct");
   gBrowser.removeTab(target);
 }
 
-function* followLinkWaitForNewNode(linkEl, isMetaClick, inspector) {
+async function followLinkWaitForNewNode(linkEl, isMetaClick, inspector) {
   let onSelection = inspector.selection.once("new-node-front");
   performMouseDown(linkEl, isMetaClick);
-  yield onSelection;
+  await onSelection;
 
   ok(true, "A new node was selected");
   is(inspector.selection.nodeFront.id, "name", "The right node was selected");
 }
 
-function* followLinkNoNewNode(linkEl, isMetaClick, inspector) {
+async function followLinkNoNewNode(linkEl, isMetaClick, inspector) {
   let onFailed = inspector.once("idref-attribute-link-failed");
   performMouseDown(linkEl, isMetaClick);
-  yield onFailed;
+  await onFailed;
 
   ok(true, "The node selection failed");
   is(inspector.selection.nodeFront.tagName.toLowerCase(), "output",
     "The <output> node is still selected");
 }
--- a/devtools/client/inspector/markup/test/browser_markup_load_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_load_01.js
@@ -28,50 +28,50 @@ const TEST_URL = "data:text/html," +
   "<!DOCTYPE html>" +
   "<head><meta charset='utf-8' /></head>" +
   "<body>" +
   "<p>Slow script</p>" +
   "<img src='http://localhost:" + server.identity.primaryPort + "/slow.gif' />" +
   "</body>" +
   "</html>";
 
-add_task(function* () {
-  let {inspector, testActor, tab} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector, testActor, tab} = await openInspectorForURL(TEST_URL);
 
   let domContentLoaded = waitForLinkedBrowserEvent(tab, "DOMContentLoaded");
   let pageLoaded = waitForLinkedBrowserEvent(tab, "load");
 
   ok(inspector.markup, "There is a markup view");
 
   // Select an element while the tab is in the middle of a slow reload.
   testActor.eval("location.reload()");
 
   info("Wait for DOMContentLoaded");
-  yield domContentLoaded;
+  await domContentLoaded;
 
   info("Inspect element via context menu");
   let markupLoaded = inspector.once("markuploaded");
-  yield chooseWithInspectElementContextMenu("img", tab);
+  await chooseWithInspectElementContextMenu("img", tab);
 
   info("Wait for load");
-  yield pageLoaded;
+  await pageLoaded;
 
   info("Wait for markup-loaded after element inspection");
-  yield markupLoaded;
+  await markupLoaded;
   info("Wait for multiple children updates after element inspection");
-  yield waitForMultipleChildrenUpdates(inspector);
+  await waitForMultipleChildrenUpdates(inspector);
 
   ok(inspector.markup, "There is a markup view");
   is(inspector.markup._elt.children.length, 1, "The markup view is rendering");
 });
 
-function* chooseWithInspectElementContextMenu(selector, tab) {
-  yield BrowserTestUtils.synthesizeMouseAtCenter(selector, {
+async function chooseWithInspectElementContextMenu(selector, tab) {
+  await BrowserTestUtils.synthesizeMouseAtCenter(selector, {
     type: "contextmenu",
     button: 2
   }, tab.linkedBrowser);
 
-  yield EventUtils.sendString("Q");
+  await EventUtils.sendString("Q");
 }
 
 function waitForLinkedBrowserEvent(tab, event) {
   return BrowserTestUtils.waitForContentEvent(tab.linkedBrowser, event, true);
 }
--- a/devtools/client/inspector/markup/test/browser_markup_mutation_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_mutation_01.js
@@ -12,248 +12,248 @@ const TEST_URL = URL_ROOT + "doc_markup_
 // - desc: for logging only
 // - numMutations: how many mutations are expected to come happen due to the
 //   test case.  Defaults to 1 if not set.
 // - test: a function supposed to mutate the DOM
 // - check: a function supposed to test that the mutation was handled
 const TEST_DATA = [
   {
     desc: "Adding an attribute",
-    test: function* (testActor) {
-      yield testActor.setAttribute("#node1", "newattr", "newattrval");
+    test: async function(testActor) {
+      await testActor.setAttribute("#node1", "newattr", "newattrval");
     },
-    check: function* (inspector) {
-      let {editor} = yield getContainerForSelector("#node1", inspector);
+    check: async function(inspector) {
+      let {editor} = await getContainerForSelector("#node1", inspector);
       ok([...editor.attrList.querySelectorAll(".attreditor")].some(attr => {
         return attr.textContent.trim() === "newattr=\"newattrval\""
           && attr.dataset.value === "newattrval"
           && attr.dataset.attr === "newattr";
       }), "newattr attribute found");
     }
   },
   {
     desc: "Removing an attribute",
-    test: function* (testActor) {
-      yield testActor.removeAttribute("#node1", "newattr");
+    test: async function(testActor) {
+      await testActor.removeAttribute("#node1", "newattr");
     },
-    check: function* (inspector) {
-      let {editor} = yield getContainerForSelector("#node1", inspector);
+    check: async function(inspector) {
+      let {editor} = await getContainerForSelector("#node1", inspector);
       ok(![...editor.attrList.querySelectorAll(".attreditor")].some(attr => {
         return attr.textContent.trim() === "newattr=\"newattrval\"";
       }), "newattr attribute removed");
     }
   },
   {
     desc: "Re-adding an attribute",
-    test: function* (testActor) {
-      yield testActor.setAttribute("#node1", "newattr", "newattrval");
+    test: async function(testActor) {
+      await testActor.setAttribute("#node1", "newattr", "newattrval");
     },
-    check: function* (inspector) {
-      let {editor} = yield getContainerForSelector("#node1", inspector);
+    check: async function(inspector) {
+      let {editor} = await getContainerForSelector("#node1", inspector);
       ok([...editor.attrList.querySelectorAll(".attreditor")].some(attr => {
         return attr.textContent.trim() === "newattr=\"newattrval\""
           && attr.dataset.value === "newattrval"
           && attr.dataset.attr === "newattr";
       }), "newattr attribute found");
     }
   },
   {
     desc: "Changing an attribute",
-    test: function* (testActor) {
-      yield testActor.setAttribute("#node1", "newattr", "newattrchanged");
+    test: async function(testActor) {
+      await testActor.setAttribute("#node1", "newattr", "newattrchanged");
     },
-    check: function* (inspector) {
-      let {editor} = yield getContainerForSelector("#node1", inspector);
+    check: async function(inspector) {
+      let {editor} = await getContainerForSelector("#node1", inspector);
       ok([...editor.attrList.querySelectorAll(".attreditor")].some(attr => {
         return attr.textContent.trim() === "newattr=\"newattrchanged\""
           && attr.dataset.value === "newattrchanged"
           && attr.dataset.attr === "newattr";
       }), "newattr attribute found");
     }
   },
   {
     desc: "Adding another attribute does not rerender unchanged attributes",
-    test: function* (testActor, inspector) {
-      let {editor} = yield getContainerForSelector("#node1", inspector);
+    test: async function(testActor, inspector) {
+      let {editor} = await getContainerForSelector("#node1", inspector);
 
       // This test checks the impact on the markup-view nodes after setting attributes on
       // content nodes.
       info("Expect attribute-container for 'new-attr' from the previous test");
       let attributeContainer = editor.attrList.querySelector("[data-attr=newattr]");
       ok(attributeContainer, "attribute-container for 'newattr' found");
 
       info("Set a flag on the attribute-container to check after the mutation");
       attributeContainer.beforeMutationFlag = true;
 
       info("Add the attribute 'otherattr' on the content node to trigger the mutation");
-      yield testActor.setAttribute("#node1", "otherattr", "othervalue");
+      await testActor.setAttribute("#node1", "otherattr", "othervalue");
     },
-    check: function* (inspector) {
-      let {editor} = yield getContainerForSelector("#node1", inspector);
+    check: async function(inspector) {
+      let {editor} = await getContainerForSelector("#node1", inspector);
 
       info("Check the attribute-container for the new attribute mutation was created");
       let otherAttrContainer = editor.attrList.querySelector("[data-attr=otherattr]");
       ok(otherAttrContainer, "attribute-container for 'otherattr' found");
 
       info("Check the attribute-container for 'new-attr' is the same node as earlier.");
       let newAttrContainer = editor.attrList.querySelector("[data-attr=newattr]");
       ok(newAttrContainer, "attribute-container for 'newattr' found");
       ok(newAttrContainer.beforeMutationFlag, "attribute-container same as earlier");
     }
   },
   {
     desc: "Adding ::after element",
     numMutations: 2,
-    test: function* (testActor) {
-      yield testActor.eval(`
+    test: async function(testActor) {
+      await testActor.eval(`
         let node1 = document.querySelector("#node1");
         node1.classList.add("pseudo");
       `);
     },
-    check: function* (inspector) {
-      let {children} = yield getContainerForSelector("#node1", inspector);
+    check: async function(inspector) {
+      let {children} = await getContainerForSelector("#node1", inspector);
       is(children.childNodes.length, 2,
         "Node1 now has 2 children (text child and ::after");
     }
   },
   {
     desc: "Removing ::after element",
     numMutations: 2,
-    test: function* (testActor) {
-      yield testActor.eval(`
+    test: async function(testActor) {
+      await testActor.eval(`
         let node1 = document.querySelector("#node1");
         node1.classList.remove("pseudo");
       `);
     },
-    check: function* (inspector) {
-      let container = yield getContainerForSelector("#node1", inspector);
+    check: async function(inspector) {
+      let container = await getContainerForSelector("#node1", inspector);
       ok(container.inlineTextChild, "Has single text child.");
     }
   },
   {
     desc: "Updating the text-content",
-    test: function* (testActor) {
-      yield testActor.setProperty("#node1", "textContent", "newtext");
+    test: async function(testActor) {
+      await testActor.setProperty("#node1", "textContent", "newtext");
     },
-    check: function* (inspector) {
-      let container = yield getContainerForSelector("#node1", inspector);
+    check: async function(inspector) {
+      let container = await getContainerForSelector("#node1", inspector);
       ok(container.inlineTextChild, "Has single text child.");
       ok(!container.canExpand, "Can't expand container with inlineTextChild.");
       ok(!container.inlineTextChild.canExpand, "Can't expand inlineTextChild.");
       is(container.editor.elt.querySelector(".text").textContent.trim(),
          "newtext", "Single text child editor updated.");
     }
   },
   {
     desc: "Adding a second text child",
-    test: function* (testActor) {
-      yield testActor.eval(`
+    test: async function(testActor) {
+      await testActor.eval(`
         let node1 = document.querySelector("#node1");
         let newText = node1.ownerDocument.createTextNode("more");
         node1.appendChild(newText);
       `);
     },
-    check: function* (inspector) {
-      let container = yield getContainerForSelector("#node1", inspector);
+    check: async function(inspector) {
+      let container = await getContainerForSelector("#node1", inspector);
       ok(!container.inlineTextChild, "Does not have single text child.");
       ok(container.canExpand, "Can expand container with child nodes.");
       ok(container.editor.elt.querySelector(".text") == null,
         "Single text child editor removed.");
     },
   },
   {
     desc: "Go from 2 to 1 text child",
-    test: function* (testActor) {
-      yield testActor.setProperty("#node1", "textContent", "newtext");
+    test: async function(testActor) {
+      await testActor.setProperty("#node1", "textContent", "newtext");
     },
-    check: function* (inspector) {
-      let container = yield getContainerForSelector("#node1", inspector);
+    check: async function(inspector) {
+      let container = await getContainerForSelector("#node1", inspector);
       ok(container.inlineTextChild, "Has single text child.");
       ok(!container.canExpand, "Can't expand container with inlineTextChild.");
       ok(!container.inlineTextChild.canExpand, "Can't expand inlineTextChild.");
       ok(container.editor.elt.querySelector(".text").textContent.trim(),
          "newtext", "Single text child editor updated.");
     },
   },
   {
     desc: "Removing an only text child",
-    test: function* (testActor) {
-      yield testActor.setProperty("#node1", "innerHTML", "");
+    test: async function(testActor) {
+      await testActor.setProperty("#node1", "innerHTML", "");
     },
-    check: function* (inspector) {
-      let container = yield getContainerForSelector("#node1", inspector);
+    check: async function(inspector) {
+      let container = await getContainerForSelector("#node1", inspector);
       ok(!container.inlineTextChild, "Does not have single text child.");
       ok(!container.canExpand, "Can't expand empty container.");
       ok(container.editor.elt.querySelector(".text") == null,
         "Single text child editor removed.");
     },
   },
   {
     desc: "Go from 0 to 1 text child",
-    test: function* (testActor) {
-      yield testActor.setProperty("#node1", "textContent", "newtext");
+    test: async function(testActor) {
+      await testActor.setProperty("#node1", "textContent", "newtext");
     },
-    check: function* (inspector) {
-      let container = yield getContainerForSelector("#node1", inspector);
+    check: async function(inspector) {
+      let container = await getContainerForSelector("#node1", inspector);
       ok(container.inlineTextChild, "Has single text child.");
       ok(!container.canExpand, "Can't expand container with inlineTextChild.");
       ok(!container.inlineTextChild.canExpand, "Can't expand inlineTextChild.");
       ok(container.editor.elt.querySelector(".text").textContent.trim(),
          "newtext", "Single text child editor updated.");
     },
   },
 
   {
     desc: "Updating the innerHTML",
-    test: function* (testActor) {
-      yield testActor.setProperty("#node2", "innerHTML",
+    test: async function(testActor) {
+      await testActor.setProperty("#node2", "innerHTML",
                                   "<div><span>foo</span></div>");
     },
-    check: function* (inspector) {
-      let container = yield getContainerForSelector("#node2", inspector);
+    check: async function(inspector) {
+      let container = await getContainerForSelector("#node2", inspector);
 
       let openTags = container.children.querySelectorAll(".open .tag");
       is(openTags.length, 2, "There are 2 tags in node2");
       is(openTags[0].textContent.trim(), "div", "The first tag is a div");
       is(openTags[1].textContent.trim(), "span", "The second tag is a span");
 
       is(container.children.querySelector(".text").textContent.trim(), "foo",
         "The span's textcontent is correct");
     }
   },
   {
     desc: "Removing child nodes",
-    test: function* (testActor) {
-      yield testActor.eval(`
+    test: async function(testActor) {
+      await testActor.eval(`
         let node4 = document.querySelector("#node4");
         while (node4.firstChild) {
           node4.removeChild(node4.firstChild);
         }
       `);
     },
-    check: function* (inspector) {
-      let {children} = yield getContainerForSelector("#node4", inspector);
+    check: async function(inspector) {
+      let {children} = await getContainerForSelector("#node4", inspector);
       is(children.innerHTML, "", "Children have been removed");
     }
   },
   {
     desc: "Appending a child to a different parent",
-    test: function* (testActor) {
-      yield testActor.eval(`
+    test: async function(testActor) {
+      await testActor.eval(`
         let node17 = document.querySelector("#node17");
         let node2 = document.querySelector("#node2");
         node2.appendChild(node17);
       `);
     },
-    check: function* (inspector) {
-      let {children} = yield getContainerForSelector("#node16", inspector);
+    check: async function(inspector) {
+      let {children} = await getContainerForSelector("#node16", inspector);
       is(children.innerHTML, "",
          "Node17 has been removed from its node16 parent");
 
-      let container = yield getContainerForSelector("#node2", inspector);
+      let container = await getContainerForSelector("#node2", inspector);
       let openTags = container.children.querySelectorAll(".open .tag");
       is(openTags.length, 3, "There are now 3 tags in node2");
       is(openTags[2].textContent.trim(), "p", "The third tag is node17");
     }
   },
   {
     desc: "Swapping a parent and child element, putting them in the same tree",
     // body
@@ -264,29 +264,29 @@ const TEST_DATA = [
     //        node21
     // will become:
     // body
     //   node1
     //     node20
     //      node21
     //      node18
     //        node19
-    test: function* (testActor) {
-      yield testActor.eval(`
+    test: async function(testActor) {
+      await testActor.eval(`
         let node18 = document.querySelector("#node18");
         let node20 = document.querySelector("#node20");
         let node1 = document.querySelector("#node1");
         node1.appendChild(node20);
         node20.appendChild(node18);
       `);
     },
-    check: function* (inspector) {
-      yield inspector.markup.expandAll();
+    check: async function(inspector) {
+      await inspector.markup.expandAll();
 
-      let {children} = yield getContainerForSelector("#node1", inspector);
+      let {children} = await getContainerForSelector("#node1", inspector);
       is(children.childNodes.length, 2,
         "Node1 now has 2 children (textnode and node20)");
 
       let node20 = children.childNodes[1];
       let node20Children = node20.container.children;
       is(node20Children.childNodes.length, 2,
           "Node20 has 2 children (21 and 18)");
 
@@ -297,21 +297,21 @@ const TEST_DATA = [
       let node18 = node20Children.childNodes[1];
       is(node18.querySelector(".open .attreditor .attr-value")
                .textContent.trim(),
          "node18", "Node20's second child is indeed node18");
     }
   }
 ];
 
-add_task(function* () {
-  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector, testActor} = await openInspectorForURL(TEST_URL);
 
   info("Expanding all markup-view nodes");
-  yield inspector.markup.expandAll();
+  await inspector.markup.expandAll();
 
   for (let {desc, test, check, numMutations} of TEST_DATA) {
     info("Starting test: " + desc);
 
     numMutations = numMutations || 1;
 
     info("Executing the test markup mutation");
 
@@ -324,18 +324,18 @@ add_task(function* () {
         info("Receieved " + seenMutations +
              " mutations, expecting at least " + numMutations);
         if (seenMutations >= numMutations) {
           inspector.off("markupmutation", onmutation);
           resolve();
         }
       });
     });
-    yield test(testActor, inspector);
-    yield promise;
+    await test(testActor, inspector);
+    await promise;
 
     info("Expanding all markup-view nodes to make sure new nodes are imported");
-    yield inspector.markup.expandAll();
+    await inspector.markup.expandAll();
 
     info("Checking the markup-view content");
-    yield check(inspector);
+    await check(inspector);
   }
 });
--- a/devtools/client/inspector/markup/test/browser_markup_mutation_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_mutation_02.js
@@ -20,145 +20,145 @@ const TEST_URL = URL_ROOT + "doc_markup_
 // - mutate: a generator function that should make changes to the content DOM
 // - attribute: if set, the test will expect the corresponding attribute to
 //   flash instead of the whole node
 // - flashedNode: [optional] the css selector of the node that is expected to
 //   flash in the markup-view as a result of the mutation.
 //   If missing, the rootNode (".list") will be expected to flash
 const TEST_DATA = [{
   desc: "Adding a new node should flash the new node",
-  mutate: function* (testActor) {
-    yield testActor.eval(`
+  mutate: async function(testActor) {
+    await testActor.eval(`
       let newLi = document.createElement("LI");
       newLi.textContent = "new list item";
       document.querySelector(".list").appendChild(newLi);
     `);
   },
   flashedNode: ".list li:nth-child(3)"
 }, {
   desc: "Removing a node should flash its parent",
-  mutate: function* (testActor) {
-    yield testActor.eval(`
+  mutate: async function(testActor) {
+    await testActor.eval(`
       let root = document.querySelector(".list");
       root.removeChild(root.lastElementChild);
     `);
   }
 }, {
   desc: "Re-appending an existing node should only flash this node",
-  mutate: function* (testActor) {
-    yield testActor.eval(`
+  mutate: async function(testActor) {
+    await testActor.eval(`
       let root = document.querySelector(".list");
       root.appendChild(root.firstElementChild);
     `);
   },
   flashedNode: ".list .item:last-child"
 }, {
   desc: "Adding an attribute should flash the attribute",
   attribute: "test-name",
-  mutate: function* (testActor) {
-    yield testActor.setAttribute(".list", "test-name", "value-" + Date.now());
+  mutate: async function(testActor) {
+    await testActor.setAttribute(".list", "test-name", "value-" + Date.now());
   }
 }, {
   desc: "Adding an attribute with css reserved characters should flash the " +
         "attribute",
   attribute: "one:two",
-  mutate: function* (testActor) {
-    yield testActor.setAttribute(".list", "one:two", "value-" + Date.now());
+  mutate: async function(testActor) {
+    await testActor.setAttribute(".list", "one:two", "value-" + Date.now());
   }
 }, {
   desc: "Editing an attribute should flash the attribute",
   attribute: "class",
-  mutate: function* (testActor) {
-    yield testActor.setAttribute(".list", "class", "list value-" + Date.now());
+  mutate: async function(testActor) {
+    await testActor.setAttribute(".list", "class", "list value-" + Date.now());
   }
 }, {
   desc: "Multiple changes to an attribute should flash the attribute",
   attribute: "class",
-  mutate: function* (testActor) {
-    yield testActor.eval(`
+  mutate: async function(testActor) {
+    await testActor.eval(`
       let root = document.querySelector(".list");
       root.removeAttribute("class");
       root.setAttribute("class", "list value-" + Date.now());
       root.setAttribute("class", "list value-" + Date.now());
       root.removeAttribute("class");
       root.setAttribute("class", "list value-" + Date.now());
       root.setAttribute("class", "list value-" + Date.now());
     `);
   }
 }, {
   desc: "Removing an attribute should flash the node",
-  mutate: function* (testActor) {
-    yield testActor.eval(`
+  mutate: async function(testActor) {
+    await testActor.eval(`
       let root = document.querySelector(".list");
       root.removeAttribute("class");
     `);
   }
 }];
 
-add_task(function* () {
+add_task(async function() {
   let timerPrecision = Preferences.get("privacy.reduceTimerPrecision");
   Preferences.set("privacy.reduceTimerPrecision", false);
 
   registerCleanupFunction(function() {
     Preferences.set("privacy.reduceTimerPrecision", timerPrecision);
   });
 
-  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
+  let {inspector, testActor} = await openInspectorForURL(TEST_URL);
 
   // Make sure mutated nodes flash for a very long time so we can more easily
   // assert they do
   inspector.markup.CONTAINER_FLASHING_DURATION = 1000 * 60 * 60;
 
   info("Getting the <ul.list> root node to test mutations on");
-  let rootNodeFront = yield getNodeFront(".list", inspector);
+  let rootNodeFront = await getNodeFront(".list", inspector);
 
   info("Selecting the last element of the root node before starting");
-  yield selectNode(".list .item:nth-child(2)", inspector);
+  await selectNode(".list .item:nth-child(2)", inspector);
 
   for (let {mutate, flashedNode, desc, attribute} of TEST_DATA) {
     info("Starting test: " + desc);
 
     info("Mutating the DOM and listening for markupmutation event");
     let onMutation = inspector.once("markupmutation");
-    yield mutate(testActor);
-    let mutations = yield onMutation;
+    await mutate(testActor);
+    let mutations = await onMutation;
 
     info("Wait for the breadcrumbs widget to update if it needs to");
     if (inspector.breadcrumbs._hasInterestingMutations(mutations)) {
-      yield inspector.once("breadcrumbs-updated");
+      await inspector.once("breadcrumbs-updated");
     }
 
     info("Asserting that the correct markup-container is flashing");
     let flashingNodeFront = rootNodeFront;
     if (flashedNode) {
-      flashingNodeFront = yield getNodeFront(flashedNode, inspector);
+      flashingNodeFront = await getNodeFront(flashedNode, inspector);
     }
 
     if (attribute) {
-      yield assertAttributeFlashing(flashingNodeFront, attribute, inspector);
+      await assertAttributeFlashing(flashingNodeFront, attribute, inspector);
     } else {
-      yield assertNodeFlashing(flashingNodeFront, inspector);
+      await assertNodeFlashing(flashingNodeFront, inspector);
     }
   }
 });
 
-function* assertNodeFlashing(nodeFront, inspector) {
+function assertNodeFlashing(nodeFront, inspector) {
   let container = getContainerForNodeFront(nodeFront, inspector);
   ok(container, "Markup container for node found");
   ok(container.tagState.classList.contains("theme-bg-contrast"),
     "Markup container for node is flashing");
 
   // Clear the mutation flashing timeout now that we checked the node was
   // flashing.
   clearTimeout(container._flashMutationTimer);
   container._flashMutationTimer = null;
   container.tagState.classList.remove("theme-bg-contrast");
 }
 
-function* assertAttributeFlashing(nodeFront, attribute, inspector) {
+function assertAttributeFlashing(nodeFront, attribute, inspector) {
   let container = getContainerForNodeFront(nodeFront, inspector);
   ok(container, "Markup container for node found");
   ok(container.editor.attrElements.get(attribute),
      "Attribute exists on editor");
 
   let attributeElement = container.editor.getAttributeElement(attribute);
 
   ok(attributeElement.classList.contains("theme-bg-contrast"),
--- a/devtools/client/inspector/markup/test/browser_markup_navigation.js
+++ b/devtools/client/inspector/markup/test/browser_markup_navigation.js
@@ -71,40 +71,40 @@ const TEST_DATA = [
   ["KEY_ArrowDown", "node10"],
   ["KEY_PageUp", "*text*"],
   ["KEY_PageUp", "*doctype*"],
   ["KEY_ArrowDown", "html"],
   ["KEY_ArrowLeft", "html"],
   ["KEY_ArrowDown", "head"]
 ];
 
-add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector} = await openInspectorForURL(TEST_URL);
 
   info("Making sure the markup-view frame is focused");
   inspector.markup._frame.focus();
 
   info("Starting to iterate through the test data");
   for (let [key, className] of TEST_DATA) {
     info("Testing step: " + key + " to navigate to " + className);
     EventUtils.synthesizeKey(key);
 
     info("Making sure markup-view children get updated");
-    yield waitForChildrenUpdated(inspector);
+    await waitForChildrenUpdated(inspector);
 
     info("Checking the right node is selected");
     checkSelectedNode(key, className, inspector);
   }
 
   // In theory, we should wait for the inspector-updated event at each iteration
   // of the previous loop where we expect the current node to change (because
   // changing the current node ends up refreshing the rule-view, breadcrumbs,
   // ...), but this would make this test a *lot* slower. Instead, having a final
   // catch-all event works too.
-  yield inspector.once("inspector-updated");
+  await inspector.once("inspector-updated");
 });
 
 function checkSelectedNode(key, className, inspector) {
   let node = inspector.selection.nodeFront;
 
   if (className == "*comment*") {
     is(node.nodeType, Node.COMMENT_NODE,
        "Found a comment after pressing " + key);
--- a/devtools/client/inspector/markup/test/browser_markup_node_names.js
+++ b/devtools/client/inspector/markup/test/browser_markup_node_names.js
@@ -2,27 +2,27 @@
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test element node name in the markupview
 const TEST_URL = URL_ROOT + "doc_markup_html_mixed_case.html";
 
-add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector} = await openInspectorForURL(TEST_URL);
 
   // Get and open the svg element to show its children
-  let svgNodeFront = yield getNodeFront("svg", inspector);
-  yield inspector.markup.expandNode(svgNodeFront);
-  yield waitForMultipleChildrenUpdates(inspector);
+  let svgNodeFront = await getNodeFront("svg", inspector);
+  await inspector.markup.expandNode(svgNodeFront);
+  await waitForMultipleChildrenUpdates(inspector);
 
-  let clipPathContainer = yield getContainerForSelector("clipPath", inspector);
+  let clipPathContainer = await getContainerForSelector("clipPath", inspector);
   info("Checking the clipPath element");
   ok(clipPathContainer.editor.tag.textContent === "clipPath",
      "clipPath node name is not lowercased");
 
-  let divContainer = yield getContainerForSelector("div", inspector);
+  let divContainer = await getContainerForSelector("div", inspector);
 
   info("Checking the div element");
   ok(divContainer.editor.tag.textContent === "div",
      "div node name is lowercased");
 });
--- a/devtools/client/inspector/markup/test/browser_markup_node_names_namespaced.js
+++ b/devtools/client/inspector/markup/test/browser_markup_node_names_namespaced.js
@@ -18,26 +18,26 @@ const XHTML = `
         <svg:circle cx="0" cy="0" r="5"></svg:circle>
       </svg:svg>
     </body>
   </html>
 `;
 
 const TEST_URI = "data:application/xhtml+xml;charset=utf-8," + encodeURI(XHTML);
 
-add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URI);
+add_task(async function() {
+  let {inspector} = await openInspectorForURL(TEST_URI);
 
   // Get and open the svg element to show its children.
-  let svgNodeFront = yield getNodeFront("svg", inspector);
-  yield inspector.markup.expandNode(svgNodeFront);
-  yield waitForMultipleChildrenUpdates(inspector);
+  let svgNodeFront = await getNodeFront("svg", inspector);
+  await inspector.markup.expandNode(svgNodeFront);
+  await waitForMultipleChildrenUpdates(inspector);
 
-  let clipPathContainer = yield getContainerForSelector("clipPath", inspector);
+  let clipPathContainer = await getContainerForSelector("clipPath", inspector);
   info("Checking the clipPath element");
   ok(clipPathContainer.editor.tag.textContent === "svg:clipPath",
      "svg:clipPath node is correctly displayed");
 
-  let circlePathContainer = yield getContainerForSelector("circle", inspector);
+  let circlePathContainer = await getContainerForSelector("circle", inspector);
   info("Checking the circle element");
   ok(circlePathContainer.editor.tag.textContent === "svg:circle",
      "svg:circle node is correctly displayed");
 });
--- a/devtools/client/inspector/markup/test/browser_markup_node_not_displayed_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_node_not_displayed_01.js
@@ -17,19 +17,19 @@ const TEST_DATA = [
   {selector: "#normal-div", isDisplayed: true},
   {selector: "head", isDisplayed: false},
   {selector: "#display-none", isDisplayed: false},
   {selector: "#hidden-true", isDisplayed: false},
   {selector: "#visibility-hidden", isDisplayed: true},
   {selector: "#hidden-via-hide-shortcut", isDisplayed: false},
 ];
 
-add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector} = await openInspectorForURL(TEST_URL);
 
   for (let {selector, isDisplayed} of TEST_DATA) {
     info("Getting node " + selector);
-    let nodeFront = yield getNodeFront(selector, inspector);
+    let nodeFront = await getNodeFront(selector, inspector);
     let container = getContainerForNodeFront(nodeFront, inspector);
     is(!container.elt.classList.contains("not-displayed"), isDisplayed,
        `The container for ${selector} is marked as displayed ${isDisplayed}`);
   }
 });
--- a/devtools/client/inspector/markup/test/browser_markup_node_not_displayed_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_node_not_displayed_02.js
@@ -8,136 +8,136 @@
 // their display changes
 
 const TEST_URL = URL_ROOT + "doc_markup_not_displayed.html";
 const TEST_DATA = [
   {
     desc: "Hiding a node by creating a new stylesheet",
     selector: "#normal-div",
     before: true,
-    changeStyle: function* (testActor) {
-      yield testActor.eval(`
+    changeStyle: async function(testActor) {
+      await testActor.eval(`
         let div = document.createElement("div");
         div.id = "new-style";
         div.innerHTML = "<style>#normal-div {display:none;}</style>";
         document.body.appendChild(div);
       `);
     },
     after: false
   },
   {
     desc: "Showing a node by deleting an existing stylesheet",
     selector: "#normal-div",
     before: false,
-    changeStyle: function* (testActor) {
-      yield testActor.eval(`
+    changeStyle: async function(testActor) {
+      await testActor.eval(`
         document.getElementById("new-style").remove();
       `);
     },
     after: true
   },
   {
     desc: "Hiding a node by changing its style property",
     selector: "#display-none",
     before: false,
-    changeStyle: function* (testActor) {
-      yield testActor.eval(`
+    changeStyle: async function(testActor) {
+      await testActor.eval(`
         let node = document.querySelector("#display-none");
         node.style.display = "block";
       `);
     },
     after: true
   },
   {
     desc: "Showing a node by removing its hidden attribute",
     selector: "#hidden-true",
     before: false,
-    changeStyle: function* (testActor) {
-      yield testActor.eval(`
+    changeStyle: async function(testActor) {
+      await testActor.eval(`
         document.querySelector("#hidden-true")
                 .removeAttribute("hidden");
       `);
     },
     after: true
   },
   {
     desc: "Hiding a node by adding a hidden attribute",
     selector: "#hidden-true",
     before: true,
-    changeStyle: function* (testActor) {
-      yield testActor.setAttribute("#hidden-true", "hidden", "true");
+    changeStyle: async function(testActor) {
+      await testActor.setAttribute("#hidden-true", "hidden", "true");
     },
     after: false
   },
   {
     desc: "Showing a node by changin a stylesheet's rule",
     selector: "#hidden-via-stylesheet",
     before: false,
-    changeStyle: function* (testActor) {
-      yield testActor.eval(`
+    changeStyle: async function(testActor) {
+      await testActor.eval(`
         document.styleSheets[0]
                 .cssRules[0].style
                 .setProperty("display", "inline");
       `);
     },
     after: true
   },
   {
     desc: "Hiding a node by adding a new rule to a stylesheet",
     selector: "#hidden-via-stylesheet",
     before: true,
-    changeStyle: function* (testActor) {
-      yield testActor.eval(`
+    changeStyle: async function(testActor) {
+      await testActor.eval(`
         document.styleSheets[0].insertRule(
           "#hidden-via-stylesheet {display: none;}", 1);
       `);
     },
     after: false
   },
   {
     desc: "Hiding a node by adding a class that matches an existing rule",
     selector: "#normal-div",
     before: true,
-    changeStyle: function* (testActor) {
-      yield testActor.eval(`
+    changeStyle: async function(testActor) {
+      await testActor.eval(`
         document.styleSheets[0].insertRule(
           ".a-new-class {display: none;}", 2);
         document.querySelector("#normal-div")
                 .classList.add("a-new-class");
       `);
     },
     after: false
   }
 ];
 
-add_task(function* () {
-  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector, testActor} = await openInspectorForURL(TEST_URL);
 
   for (let data of TEST_DATA) {
     info("Running test case: " + data.desc);
-    yield runTestData(inspector, testActor, data);
+    await runTestData(inspector, testActor, data);
   }
 });
 
-function* runTestData(inspector, testActor,
+async function runTestData(inspector, testActor,
                       {selector, before, changeStyle, after}) {
   info("Getting the " + selector + " test node");
-  let nodeFront = yield getNodeFront(selector, inspector);
+  let nodeFront = await getNodeFront(selector, inspector);
   let container = getContainerForNodeFront(nodeFront, inspector);
   is(!container.elt.classList.contains("not-displayed"), before,
     "The container is marked as " + (before ? "shown" : "hidden"));
 
   info("Listening for the display-change event");
   let onDisplayChanged = new Promise(resolve => {
     inspector.markup.walker.once("display-change", resolve);
   });
 
   info("Making style changes");
-  yield changeStyle(testActor);
-  let nodes = yield onDisplayChanged;
+  await changeStyle(testActor);
+  let nodes = await onDisplayChanged;
 
   info("Verifying that the list of changed nodes include our container");
 
   ok(nodes.length, "The display-change event was received with a nodes");
   let foundContainer = false;
   for (let node of nodes) {
     if (getContainerForNodeFront(node, inspector) === container) {
       foundContainer = true;
--- a/devtools/client/inspector/markup/test/browser_markup_pagesize_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_pagesize_01.js
@@ -32,55 +32,55 @@ const TEST_DATA = [{
   desc: "Verify childrenDirty reloads the page",
   selector: "#w",
   forceReload: true,
   // But now that we don't already have a loaded page, selecting
   // w should center around w.
   expected: "*more*uvwxy*more*"
 }];
 
-add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector} = await openInspectorForURL(TEST_URL);
 
   info("Start iterating through the test data");
   for (let step of TEST_DATA) {
     info("Start test: " + step.desc);
 
     if (step.forceReload) {
-      yield forceReload(inspector);
+      await forceReload(inspector);
     }
     info("Selecting the node that corresponds to " + step.selector);
-    yield selectNode(step.selector, inspector);
+    await selectNode(step.selector, inspector);
 
     info("Checking that the right nodes are shwon");
-    yield assertChildren(step.expected, inspector);
+    await assertChildren(step.expected, inspector);
   }
 
   info("Checking that clicking the more button loads everything");
-  yield clickShowMoreNodes(inspector);
-  yield inspector.markup._waitForChildren();
-  yield assertChildren("abcdefghijklmnopqrstuvwxyz", inspector);
+  await clickShowMoreNodes(inspector);
+  await inspector.markup._waitForChildren();
+  await assertChildren("abcdefghijklmnopqrstuvwxyz", inspector);
 });
 
-function* assertChildren(expected, inspector) {
-  let container = yield getContainerForSelector("body", inspector);
+async function assertChildren(expected, inspector) {
+  let container = await getContainerForSelector("body", inspector);
   let found = "";
   for (let child of container.children.children) {
     if (child.classList.contains("more-nodes")) {
       found += "*more*";
     } else {
       found += child.container.node.getAttribute("id");
     }
   }
   is(found, expected, "Got the expected children.");
 }
 
-function* forceReload(inspector) {
-  let container = yield getContainerForSelector("body", inspector);
+async function forceReload(inspector) {
+  let container = await getContainerForSelector("body", inspector);
   container.childrenDirty = true;
 }
 
-function* clickShowMoreNodes(inspector) {
-  let container = yield getContainerForSelector("body", inspector);
+async function clickShowMoreNodes(inspector) {
+  let container = await getContainerForSelector("body", inspector);
   let button = container.elt.querySelector("button");
   let win = button.ownerDocument.defaultView;
   EventUtils.sendMouseEvent({type: "click"}, button, win);
 }
--- a/devtools/client/inspector/markup/test/browser_markup_pagesize_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_pagesize_02.js
@@ -8,40 +8,40 @@
 // by the devtools.markup.pagesize preference and that pressing the "show all
 // nodes" actually shows the nodes
 
 const TEST_URL = URL_ROOT + "doc_markup_pagesize_02.html";
 
 // Make sure nodes are hidden when there are more than 5 in a row
 Services.prefs.setIntPref("devtools.markup.pagesize", 5);
 
-add_task(function* () {
-  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector, testActor} = await openInspectorForURL(TEST_URL);
 
   info("Selecting the UL node");
-  yield clickContainer("ul", inspector);
+  await clickContainer("ul", inspector);
   info("Reloading the page with the UL node selected will expand its children");
-  yield reloadPage(inspector, testActor);
-  yield inspector.markup._waitForChildren();
+  await reloadPage(inspector, testActor);
+  await inspector.markup._waitForChildren();
 
   info("Click on the 'show all nodes' button in the UL's list of children");
-  yield showAllNodes(inspector);
+  await showAllNodes(inspector);
 
-  yield assertAllNodesAreVisible(inspector, testActor);
+  await assertAllNodesAreVisible(inspector, testActor);
 });
 
-function* showAllNodes(inspector) {
-  let container = yield getContainerForSelector("ul", inspector);
+async function showAllNodes(inspector) {
+  let container = await getContainerForSelector("ul", inspector);
   let button = container.elt.querySelector("button");
   ok(button, "All nodes button is here");
   let win = button.ownerDocument.defaultView;
 
   EventUtils.sendMouseEvent({type: "click"}, button, win);
-  yield inspector.markup._waitForChildren();
+  await inspector.markup._waitForChildren();
 }
 
-function* assertAllNodesAreVisible(inspector, testActor) {
-  let container = yield getContainerForSelector("ul", inspector);
+async function assertAllNodesAreVisible(inspector, testActor) {
+  let container = await getContainerForSelector("ul", inspector);
   ok(!container.elt.querySelector("button"),
      "All nodes button isn't here anymore");
-  let numItems = yield testActor.getNumberOfElementMatches("ul > *");
+  let numItems = await testActor.getNumberOfElementMatches("ul > *");
   is(container.children.childNodes.length, numItems);
 }
--- a/devtools/client/inspector/markup/test/browser_markup_remove_xul_attributes.js
+++ b/devtools/client/inspector/markup/test/browser_markup_remove_xul_attributes.js
@@ -4,25 +4,25 @@
 
 "use strict";
 
 // Test confirms that XUL attributes don't show up as empty
 // attributes after being deleted
 
 const TEST_URL = URL_ROOT + "doc_markup_xul.xul";
 
-add_task(function* () {
-  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector, testActor} = await openInspectorForURL(TEST_URL);
 
-  let panelFront = yield getNodeFront("#test", inspector);
+  let panelFront = await getNodeFront("#test", inspector);
   ok(panelFront.hasAttribute("id"),
      "panelFront has id attribute in the beginning");
 
   info("Removing panel's id attribute");
   let onMutation = inspector.once("markupmutation");
-  yield testActor.removeAttribute("#test", "id");
+  await testActor.removeAttribute("#test", "id");
 
   info("Waiting for markupmutation");
-  yield onMutation;
+  await onMutation;
 
   is(panelFront.hasAttribute("id"), false,
      "panelFront doesn't have id attribute anymore");
 });
--- a/devtools/client/inspector/markup/test/browser_markup_search_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_search_01.js
@@ -5,47 +5,47 @@
 "use strict";
 
 // Test that searching for nodes using the selector-search input expands and
 // selects the right nodes in the markup-view, even when those nodes are deeply
 // nested (and therefore not attached yet when the markup-view is initialized).
 
 const TEST_URL = URL_ROOT + "doc_markup_search.html";
 
-add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector} = await openInspectorForURL(TEST_URL);
 
-  let container = yield getContainerForSelector("em", inspector, true);
+  let container = await getContainerForSelector("em", inspector, true);
   ok(!container, "The <em> tag isn't present yet in the markup-view");
 
   // Searching for the innermost element first makes sure that the inspector
   // back-end is able to attach the resulting node to the tree it knows at the
   // moment. When the inspector is started, the <body> is the default selected
   // node, and only the parents up to the ROOT are known, and its direct
   // children.
   info("searching for the innermost child: <em>");
-  yield searchFor("em", inspector);
+  await searchFor("em", inspector);
 
-  container = yield getContainerForSelector("em", inspector);
+  container = await getContainerForSelector("em", inspector);
   ok(container, "The <em> tag is now imported in the markup-view");
 
-  let nodeFront = yield getNodeFront("em", inspector);
+  let nodeFront = await getNodeFront("em", inspector);
   is(inspector.selection.nodeFront, nodeFront,
     "The <em> tag is the currently selected node");
 
   info("searching for other nodes too");
   for (let node of ["span", "li", "ul"]) {
-    yield searchFor(node, inspector);
+    await searchFor(node, inspector);
 
-    nodeFront = yield getNodeFront(node, inspector);
+    nodeFront = await getNodeFront(node, inspector);
     is(inspector.selection.nodeFront, nodeFront,
       "The <" + node + "> tag is the currently selected node");
   }
 });
 
-function* searchFor(selector, inspector) {
+async function searchFor(selector, inspector) {
   let onNewNodeFront = inspector.selection.once("new-node-front");
 
   searchUsingSelectorSearch(selector, inspector);
 
-  yield onNewNodeFront;
-  yield inspector.once("inspector-updated");
+  await onNewNodeFront;
+  await inspector.once("inspector-updated");
 }
--- a/devtools/client/inspector/markup/test/browser_markup_tag_delete_whitespace_node.js
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_delete_whitespace_node.js
@@ -12,62 +12,62 @@ const HTML =
   `<div>
     <p id="container">
       <span id="before-whitespace">1</span>      <span id="after-whitespace">2</span>
     </p>
   </div>`;
 
 const TEST_URL = "data:text/html;charset=utf-8," + encodeURIComponent(HTML);
 
-add_task(function* deleteNodeAfterWhitespace() {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+add_task(async function deleteNodeAfterWhitespace() {
+  let {inspector} = await openInspectorForURL(TEST_URL);
 
   info("Test deleting a node that will modify the whitespace nodes rendered in the " +
     "markup view.");
 
-  yield selectAndFocusNode("#after-whitespace", inspector);
-  yield deleteCurrentSelection(inspector);
+  await selectAndFocusNode("#after-whitespace", inspector);
+  await deleteCurrentSelection(inspector);
 
   // TODO: There is still an issue with selection here.  When the span is deleted, the
   // selection goes to text-node. But since the text-node gets removed from the markup
   // view after losing its impact on the layout, the selection remains on a node which
   // is no longer part of the markup view (but still a valid node in the content DOM).
-  let parentNodeFront = yield inspector.selection.nodeFront.parentNode();
-  let nodeFront = yield getNodeFront("#container", inspector);
+  let parentNodeFront = await inspector.selection.nodeFront.parentNode();
+  let nodeFront = await getNodeFront("#container", inspector);
   is(parentNodeFront, nodeFront, "Selection is as expected after deletion");
 
   info("Check that the node was really removed");
-  let node = yield getNodeFront("#after-whitespace", inspector);
+  let node = await getNodeFront("#after-whitespace", inspector);
   ok(!node, "The node can't be found in the page anymore");
 
   info("Undo the deletion to restore the original markup");
-  yield undoChange(inspector);
-  node = yield getNodeFront("#after-whitespace", inspector);
+  await undoChange(inspector);
+  node = await getNodeFront("#after-whitespace", inspector);
   ok(node, "The node is back");
 
   info("Test deleting the node before the whitespace and performing an undo preserves " +
        "the node order");
 
-  yield selectAndFocusNode("#before-whitespace", inspector);
-  yield deleteCurrentSelection(inspector);
+  await selectAndFocusNode("#before-whitespace", inspector);
+  await deleteCurrentSelection(inspector);
 
   info("Undo the deletion to restore the original markup");
-  yield undoChange(inspector);
-  node = yield getNodeFront("#before-whitespace", inspector);
+  await undoChange(inspector);
+  node = await getNodeFront("#before-whitespace", inspector);
   ok(node, "The node is back");
 
-  let nextSibling = yield getNodeFront("#before-whitespace + *", inspector);
-  let afterWhitespace = yield getNodeFront("#after-whitespace", inspector);
+  let nextSibling = await getNodeFront("#before-whitespace + *", inspector);
+  let afterWhitespace = await getNodeFront("#after-whitespace", inspector);
   is(nextSibling, afterWhitespace, "Order has been preserved after restoring the node");
 });
 
-function* selectAndFocusNode(selector, inspector) {
+async function selectAndFocusNode(selector, inspector) {
   info(`Select node ${selector} and make sure it is focused`);
-  yield selectNode(selector, inspector);
-  yield clickContainer(selector, inspector);
+  await selectNode(selector, inspector);
+  await clickContainer(selector, inspector);
 }
 
-function* deleteCurrentSelection(inspector) {
+async function deleteCurrentSelection(inspector) {
   info("Delete the node with the delete key");
   let mutated = inspector.once("markupmutation");
   EventUtils.sendKey("delete", inspector.panelWin);
-  yield Promise.all([mutated, inspector.once("inspector-updated")]);
+  await Promise.all([mutated, inspector.once("inspector-updated")]);
 }
--- a/devtools/client/inspector/markup/test/browser_markup_tag_edit_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_01.js
@@ -57,12 +57,12 @@ var TEST_DATA = [{
   name: "id",
   value: 'id="node24" class="""',
   expectedAttributes: {
     id: "node24",
     class: ""
   }
 }];
 
-add_task(function* () {
-  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
-  yield runEditAttributesTests(TEST_DATA, inspector, testActor);
+add_task(async function() {
+  let {inspector, testActor} = await openInspectorForURL(TEST_URL);
+  await runEditAttributesTests(TEST_DATA, inspector, testActor);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_tag_edit_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_02.js
@@ -4,41 +4,41 @@
 
 "use strict";
 
 // Tests that an existing attribute can be modified
 
 const TEST_URL = `data:text/html,
                   <div id='test-div'>Test modifying my ID attribute</div>`;
 
-add_task(function* () {
+add_task(async function() {
   info("Opening the inspector on the test page");
-  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
+  let {inspector, testActor} = await openInspectorForURL(TEST_URL);
 
   info("Selecting the test node");
-  yield focusNode("#test-div", inspector);
+  await focusNode("#test-div", inspector);
 
   info("Verify attributes, only ID should be there for now");
-  yield assertAttributes("#test-div", {
+  await assertAttributes("#test-div", {
     id: "test-div"
   }, testActor);
 
   info("Focus the ID attribute and change its content");
-  let {editor} = yield getContainerForSelector("#test-div", inspector);
+  let {editor} = await getContainerForSelector("#test-div", inspector);
   let attr = editor.attrElements.get("id").querySelector(".editable");
   let mutated = inspector.once("markupmutation");
   setEditableFieldValue(attr,
     attr.textContent + ' class="newclass" style="color:green"', inspector);
-  yield mutated;
+  await mutated;
 
   info("Verify attributes, should have ID, class and style");
-  yield assertAttributes("#test-div", {
+  await assertAttributes("#test-div", {
     id: "test-div",
     class: "newclass",
     style: "color:green"
   }, testActor);
 
   info("Trying to undo the change");
-  yield undoChange(inspector);
-  yield assertAttributes("#test-div", {
+  await undoChange(inspector);
+  await assertAttributes("#test-div", {
     id: "test-div"
   }, testActor);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_tag_edit_03.js
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_03.js
@@ -4,48 +4,48 @@
 
 "use strict";
 
 // Tests that a node's tagname can be edited in the markup-view
 
 const TEST_URL = `data:text/html;charset=utf-8,
                   <div id='retag-me'><div id='retag-me-2'></div></div>`;
 
-add_task(function* () {
-  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector, testActor} = await openInspectorForURL(TEST_URL);
 
-  yield inspector.markup.expandAll();
+  await inspector.markup.expandAll();
 
   info("Selecting the test node");
-  yield focusNode("#retag-me", inspector);
+  await focusNode("#retag-me", inspector);
 
   info("Getting the markup-container for the test node");
-  let container = yield getContainerForSelector("#retag-me", inspector);
+  let container = await getContainerForSelector("#retag-me", inspector);
   ok(container.expanded, "The container is expanded");
 
-  let parentInfo = yield testActor.getNodeInfo("#retag-me");
+  let parentInfo = await testActor.getNodeInfo("#retag-me");
   is(parentInfo.tagName.toLowerCase(), "div",
      "We've got #retag-me element, it's a DIV");
   is(parentInfo.numChildren, 1, "#retag-me has one child");
-  let childInfo = yield testActor.getNodeInfo("#retag-me > *");
+  let childInfo = await testActor.getNodeInfo("#retag-me > *");
   is(childInfo.attributes[0].value, "retag-me-2",
      "#retag-me's only child is #retag-me-2");
 
   info("Changing #retag-me's tagname in the markup-view");
   let mutated = inspector.once("markupmutation");
   let tagEditor = container.editor.tag;
   setEditableFieldValue(tagEditor, "p", inspector);
-  yield mutated;
+  await mutated;
 
   info("Checking that the markup-container exists and is correct");
-  container = yield getContainerForSelector("#retag-me", inspector);
+  container = await getContainerForSelector("#retag-me", inspector);
   ok(container.expanded, "The container is still expanded");
   ok(container.selected, "The container is still selected");
 
   info("Checking that the tagname change was done");
-  parentInfo = yield testActor.getNodeInfo("#retag-me");
+  parentInfo = await testActor.getNodeInfo("#retag-me");
   is(parentInfo.tagName.toLowerCase(), "p",
      "The #retag-me element is now a P");
   is(parentInfo.numChildren, 1, "#retag-me still has one child");
-  childInfo = yield testActor.getNodeInfo("#retag-me > *");
+  childInfo = await testActor.getNodeInfo("#retag-me > *");
   is(childInfo.attributes[0].value, "retag-me-2",
      "#retag-me's only child is #retag-me-2");
 });
--- a/devtools/client/inspector/markup/test/browser_markup_tag_edit_04-backspace.js
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_04-backspace.js
@@ -45,15 +45,15 @@ const TEST_DATA = [{
   selector: "#fourth",
   focusedSelector: "#only-child"
 }, {
   selector: "#fifth",
   focusedSelector: "#pseudo",
   pseudo: "before"
 }];
 
-add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+add_task(async function() {
+  let {inspector} = await openInspectorForURL(TEST_URL);