Merge mozilla-central to autoland. a=merge CLOSED TREE

browser/base/content/test/tabs/browser.ini

@@ -28,6 +28,7 @@ skip-if = !e10s # Pref and test only relevant for e10s.
 [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]

devtools/client/inspector/boxmodel/box-model.js

@@ -4,7 +4,6 @@
 
 "use strict";
 
-const { Task } = require("devtools/shared/task");
 const { getCssProperties } = require("devtools/shared/fronts/css-properties");
 
 const { InplaceEditor } = require("devtools/client/shared/inplace-editor");
@@ -125,7 +124,7 @@ BoxModel.prototype = {
       this._updateReasons.push(reason);
     }
 
-    let lastRequest = Task.spawn((function* () {
+    let lastRequest = ((async function() {
       if (!this.inspector ||
           !this.isPanelVisible() ||
           !this.inspector.selection.isConnected() ||
@@ -135,11 +134,11 @@ BoxModel.prototype = {
 
       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
       });
@@ -147,18 +146,18 @@ BoxModel.prototype = {
 
       // 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));
       }
 
@@ -177,7 +176,7 @@ BoxModel.prototype = {
       this._updateReasons = [];
 
       return null;
-    }).bind(this)).catch(console.error);
+    }).bind(this))().catch(console.error);
 
     this._lastRequest = lastRequest;
   },

devtools/client/inspector/boxmodel/test/browser_boxmodel.js

@@ -150,21 +150,21 @@ var res2 = [
   },
 ];
 
-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;
 
@@ -175,14 +175,14 @@ function* testInitialValues(inspector, boxmodel) {
   }
 }
 
-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);

devtools/client/inspector/boxmodel/test/browser_boxmodel_edit-position-visible-position-change.js

@@ -16,11 +16,11 @@ const TEST_URI = `
     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");
@@ -37,7 +37,7 @@ add_task(function* () {
   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");

devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel.js

@@ -17,28 +17,28 @@ const TEST_URI = "<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.");
@@ -49,26 +49,26 @@ function* testEditingMargins(inspector, boxmodel, testActor) {
   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.");
@@ -79,39 +79,39 @@ function* testKeyBindings(inspector, boxmodel, testActor) {
   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.");
@@ -122,27 +122,27 @@ function* testEscapeToUndo(inspector, boxmodel, testActor) {
   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.");
@@ -153,23 +153,23 @@ function* testDeletingValue(inspector, boxmodel, testActor) {
   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.");
@@ -185,14 +185,14 @@ function* testRefocusingOnClick(inspector, boxmodel, testActor) {
 
   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.");
 }

devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_allproperties.js

@@ -14,23 +14,23 @@ const TEST_URI = "<style>" +
   "</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.");
@@ -41,27 +41,27 @@ function* testEditing(inspector, boxmodel, testActor) {
   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.");
@@ -72,24 +72,24 @@ function* testEditingAndCanceling(inspector, boxmodel, testActor) {
   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.");
@@ -100,27 +100,27 @@ function* testDeleting(inspector, boxmodel, testActor) {
   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.");
@@ -131,16 +131,16 @@ function* testDeletingAndCanceling(inspector, boxmodel, testActor) {
   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.");
 }

devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_bluronclick.js

@@ -15,20 +15,20 @@ const TEST_URI =
   </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.");
@@ -42,13 +42,13 @@ function* testClickingOutsideEditor(boxmodel) {
   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.");
@@ -67,7 +67,7 @@ function* testClickingBelowContainer(boxmodel) {
     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.");

devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_border.js

@@ -14,15 +14,15 @@ const TEST_URI = "<style>" +
   "</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.");
@@ -33,20 +33,20 @@ add_task(function* () {
   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.");
 });

devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_pseudo.js

@@ -20,30 +20,30 @@ const TEST_URI =
     <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.");
 
@@ -54,5 +54,5 @@ function* checkValueInBoxModel(selector, expectedValue, doc) {
 
   let onBlur = once(editor, "blur");
   EventUtils.synthesizeKey("VK_RETURN", {}, doc.defaultView);
-  yield onBlur;
+  await onBlur;
 }

devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_stylerules.js

@@ -15,21 +15,21 @@ const TEST_URI = "<style>" +
   "</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.");
@@ -40,33 +40,33 @@ function* testUnits(inspector, boxmodel, testActor) {
   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.");
@@ -77,25 +77,25 @@ function* testValueComesFromStyleRule(inspector, boxmodel, testActor) {
   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.");
@@ -107,7 +107,7 @@ function* testShorthandsAreParsed(inspector, boxmodel, testActor) {
 
   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.");
 }

devtools/client/inspector/boxmodel/test/browser_boxmodel_layout-accordion-state.js

@@ -18,19 +18,19 @@ const TEST_URI = `
 
 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");
 
@@ -48,7 +48,7 @@ function* testAccordionStateAfterClickingHeader(doc) {
     `${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");
@@ -65,15 +65,15 @@ function* testAccordionStateAfterSwitchingSidebars(inspector, doc) {
     `${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");
 

devtools/client/inspector/boxmodel/test/browser_boxmodel_navigation.js

@@ -15,18 +15,18 @@ const TEST_URI = `
   </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");
@@ -37,7 +37,7 @@ function* testInitialFocus(inspector, boxmodel) {
     "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");
@@ -78,7 +78,7 @@ function* testChangingLevels(inspector, boxmodel) {
     "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");
@@ -100,7 +100,7 @@ function* testTabbingWrapAround(inspector, boxmodel) {
   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");

devtools/client/inspector/boxmodel/test/browser_boxmodel_offsetparent.js

@@ -55,38 +55,38 @@ const res2 = [
   },
 ];
 
-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,

devtools/client/inspector/boxmodel/test/browser_boxmodel_positions.js

@@ -42,18 +42,18 @@ const res1 = [
   },
 ];
 
-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;
 

devtools/client/inspector/boxmodel/test/browser_boxmodel_properties.js

@@ -79,16 +79,16 @@ const res2 = [
   },
 ];
 
-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;
 
@@ -98,15 +98,15 @@ function* testInitialValues(inspector, boxmodel) {
   }
 }
 
-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));

devtools/client/inspector/boxmodel/test/browser_boxmodel_pseudo-element.js

@@ -97,18 +97,18 @@ const res1 = [
   },
 ];
 
-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;
 

devtools/client/inspector/boxmodel/test/browser_boxmodel_rotate-labels-on-sides.js

@@ -30,10 +30,10 @@ const TEST_URI = encodeURIComponent([
 ].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);

devtools/client/inspector/boxmodel/test/browser_boxmodel_sync.js

@@ -8,13 +8,13 @@
 
 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");
@@ -22,7 +22,7 @@ add_task(function* () {
   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);
 
@@ -32,10 +32,10 @@ add_task(function* () {
   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);

devtools/client/inspector/boxmodel/test/browser_boxmodel_tooltips.js

@@ -70,9 +70,9 @@ const VALUES_TEST_DATA = [{
   }]
 }];
 
-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");
 
@@ -98,7 +98,7 @@ add_task(function* () {
 
   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) {

devtools/client/inspector/boxmodel/test/browser_boxmodel_update-after-navigation.js

@@ -10,31 +10,31 @@
 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(
@@ -43,18 +43,18 @@ function* testFirstPage(inspector, boxmodel, testActor) {
 
   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");
@@ -62,18 +62,18 @@ function* testSecondPage(inspector, boxmodel, testActor) {
 
   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");
@@ -83,8 +83,8 @@ function* testBackToFirstPage(inspector, boxmodel, testActor) {
 
   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");

devtools/client/inspector/boxmodel/test/browser_boxmodel_update-after-reload.js

@@ -6,24 +6,24 @@
 
 // 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(
@@ -32,8 +32,8 @@ function* assertBoxModelView(inspector, boxmodel, testActor) {
 
   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");

devtools/client/inspector/boxmodel/test/browser_boxmodel_update-in-iframes.js

@@ -7,19 +7,19 @@
 // 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");
@@ -27,25 +27,25 @@ function* testResizingInIframe(inspector, boxmodel, testActor) {
 
   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");
@@ -53,37 +53,37 @@ function* testReflowsAfterIframeDeletion(inspector, boxmodel, testActor) {
 
   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")
@@ -92,8 +92,8 @@ function* setStyleInIframe2(testActor, selector, propertyName, value) {
   `);
 }
 
-function* removeIframe2(testActor) {
-  yield testActor.eval(`
+async function removeIframe2(testActor) {
+  await testActor.eval(`
     content.document.querySelector("iframe")
            .contentDocument
            .querySelector("iframe")

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

@@ -27,13 +27,13 @@ registerCleanupFunction(() => {
  * @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;
 }
 
 /**
@@ -100,8 +100,8 @@ function setStyle(testActor, selector, propertyName, value) {
  * 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;
 };

devtools/client/inspector/boxmodel/utils/editing-session.js

@@ -4,7 +4,6 @@
 
 "use strict";
 
-const { Task } = require("devtools/shared/task");
 const { getCssProperties } = require("devtools/shared/fronts/css-properties");
 
 /**
@@ -107,7 +106,7 @@ EditingSession.prototype = {
    *         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.
@@ -135,16 +134,16 @@ EditingSession.prototype = {
         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) {
@@ -170,9 +169,9 @@ EditingSession.prototype = {
         modifications.removeProperty(index, property);
       }
 
-      yield modifications.apply();
+      await modifications.apply();
     }
-  }),
+  },
 
   destroy: function() {
     this._doc = null;

devtools/client/inspector/computed/test/browser_computed_browser-styles.js

@@ -15,10 +15,10 @@ const TEST_URI = `
   <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,
@@ -31,7 +31,7 @@ add_task(function* () {
   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,

devtools/client/inspector/computed/test/browser_computed_getNodeInfo.js

@@ -50,7 +50,7 @@ const TEST_URI = `
 const TEST_DATA = [
   {
     desc: "Testing a null node",
-    getHoveredNode: function* () {
+    getHoveredNode: function() {
       return null;
     },
     assertNodeInfo: function(nodeInfo) {
@@ -59,7 +59,7 @@ const TEST_DATA = [
   },
   {
     desc: "Testing a useless node",
-    getHoveredNode: function* (view) {
+    getHoveredNode: function(view) {
       return view.element;
     },
     assertNodeInfo: function(nodeInfo) {
@@ -68,7 +68,7 @@ const TEST_DATA = [
   },
   {
     desc: "Testing a property name",
-    getHoveredNode: function* (view) {
+    getHoveredNode: function(view) {
       return getComputedViewProperty(view, "color").nameSpan;
     },
     assertNodeInfo: function(nodeInfo) {
@@ -81,7 +81,7 @@ const TEST_DATA = [
   },
   {
     desc: "Testing a property value",
-    getHoveredNode: function* (view) {
+    getHoveredNode: function(view) {
       return getComputedViewProperty(view, "color").valueSpan;
     },
     assertNodeInfo: function(nodeInfo) {
@@ -94,7 +94,7 @@ const TEST_DATA = [
   },
   {
     desc: "Testing an image url",
-    getHoveredNode: function* (view) {
+    getHoveredNode: function(view) {
       let {valueSpan} = getComputedViewProperty(view, "background-image");
       return valueSpan.querySelector(".theme-link");
     },
@@ -110,8 +110,8 @@ const TEST_DATA = [
   },
   {
     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) {
@@ -121,8 +121,8 @@ const TEST_DATA = [
   },
   {
     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) {
@@ -132,8 +132,8 @@ const TEST_DATA = [
   },
   {
     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) {
@@ -143,8 +143,8 @@ const TEST_DATA = [
   },
   {
     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) {
@@ -155,8 +155,8 @@ const TEST_DATA = [
   },
   {
     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) {
@@ -165,14 +165,14 @@ const TEST_DATA = [
   }
 ];
 
-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);
   }
 });

devtools/client/inspector/computed/test/browser_computed_keybindings_01.js

@@ -15,10 +15,10 @@ const TEST_URI = `
   <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;
@@ -28,13 +28,13 @@ add_task(function* () {
   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) {
@@ -50,7 +50,7 @@ function getFirstVisiblePropertyView(view) {
   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");
 
@@ -59,12 +59,12 @@ function* checkToggleKeyBinding(win, key, rulesTable, inspector) {
 
   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");
 }
 

devtools/client/inspector/computed/test/browser_computed_keybindings_02.js

@@ -32,10 +32,10 @@ const TEST_URI = `
   </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");
@@ -46,7 +46,7 @@ add_task(function* () {
   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(
@@ -57,7 +57,7 @@ add_task(function* () {
   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(

devtools/client/inspector/computed/test/browser_computed_matched-selectors-toggle.js

@@ -15,18 +15,18 @@ const TEST_URI = `
   <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");
@@ -37,7 +37,7 @@ function* testExpandOnTwistyClick({styleDocument, styleWindow}, inspector) {
   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");
@@ -45,7 +45,7 @@ function* testExpandOnTwistyClick({styleDocument, styleWindow}, inspector) {
     "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");
@@ -56,7 +56,7 @@ function* testCollapseOnTwistyClick({styleDocument, styleWindow}, inspector) {
   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");
@@ -64,7 +64,7 @@ function* testCollapseOnTwistyClick({styleDocument, styleWindow}, inspector) {
     "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");
@@ -77,14 +77,14 @@ function* testExpandOnDblClick({styleDocument, styleWindow}, inspector) {
   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");
@@ -95,7 +95,7 @@ function* testCollapseOnDblClick({styleDocument, styleWindow}, inspector) {
   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");

devtools/client/inspector/computed/test/browser_computed_matched-selectors_01.js

@@ -10,18 +10,18 @@ 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");
 
@@ -30,7 +30,7 @@ function* testMatchedSelectors(view, inspector) {
   propertyView.buildSelectorContainer();
   propertyView.matchedExpanded = true;
 
-  yield propertyView.refreshMatchedSelectors();
+  await propertyView.refreshMatchedSelectors();
 
   let numMatchedSelectors = propertyView.matchedSelectors.length;
   is(numMatchedSelectors, 6,

devtools/client/inspector/computed/test/browser_computed_matched-selectors_02.js

@@ -6,10 +6,10 @@
 
 // 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");
@@ -18,7 +18,7 @@ add_task(function* () {
 
   info("Expanding the matched selectors");
   propertyView.matchedExpanded = true;
-  yield propertyView.refreshMatchedSelectors();
+  await propertyView.refreshMatchedSelectors();
 
   let span = propertyView.matchedSelectorsContainer
     .querySelector("span.rule-text");

devtools/client/inspector/computed/test/browser_computed_media-queries.js

@@ -11,11 +11,11 @@ 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) {

devtools/client/inspector/computed/test/browser_computed_no-results-placeholder.js

@@ -15,19 +15,19 @@ const TEST_URI = `
   <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";
 
@@ -36,7 +36,7 @@ function* enterInvalidFilter(inspector, computedView) {
   let onRefreshed = inspector.once("computed-view-refreshed");
   searchbar.focus();
   synthesizeKeys(searchTerm, computedView.styleWindow);
-  yield onRefreshed;
+  await onRefreshed;
 }
 
 function checkNoResultsPlaceholderShown(computedView) {
@@ -48,7 +48,7 @@ function checkNoResultsPlaceholderShown(computedView) {
   is(display, "block", "placeholder is visible");
 }
 
-function* clearFilterText(inspector, computedView) {
+async function clearFilterText(inspector, computedView) {
   info("Clearing the filter text");
 
   let searchbar = computedView.searchField;
@@ -57,7 +57,7 @@ function* clearFilterText(inspector, computedView) {
   searchbar.focus();
   searchbar.value = "";
   EventUtils.synthesizeKey("c", {}, computedView.styleWindow);
-  yield onRefreshed;
+  await onRefreshed;
 }
 
 function checkNoResultsPlaceholderHidden(computedView) {

devtools/client/inspector/computed/test/browser_computed_original-source-link.js

@@ -12,43 +12,43 @@ 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");
@@ -56,7 +56,7 @@ function* testClickingLink(toolbox, view) {
   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");

devtools/client/inspector/computed/test/browser_computed_pseudo-element_01.js

@@ -8,30 +8,30 @@
 
 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");

devtools/client/inspector/computed/test/browser_computed_refresh-on-style-change_01.js

@@ -9,19 +9,19 @@
 
 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");

devtools/client/inspector/computed/test/browser_computed_search-filter.js

@@ -15,23 +15,23 @@ const TEST_URI = `
   <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");
@@ -49,7 +49,7 @@ function* testAddTextInFilter(inspector, computedView) {
   is(inspector.panelDoc.activeElement, searchField, "Search field is focused");
 
   synthesizeKeys("color", win);
-  yield onRefreshed;
+  await onRefreshed;
 
   info("check that the correct properties are visible");
 

devtools/client/inspector/computed/test/browser_computed_search-filter_clear.js

@@ -17,15 +17,15 @@ const TEST_URI = `
   <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;
@@ -34,7 +34,7 @@ function* testAddTextInFilter(inspector, computedView) {
 
   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");
 
@@ -45,7 +45,7 @@ function* testAddTextInFilter(inspector, computedView) {
   });
 }
 
-function* testClearSearchFilter(inspector, computedView) {
+async function testClearSearchFilter(inspector, computedView) {
   info("Clearing the search filter");
 
   let win = computedView.styleWindow;
@@ -55,7 +55,7 @@ function* testClearSearchFilter(inspector, computedView) {
   let onRefreshed = inspector.once("computed-view-refreshed");
 
   EventUtils.synthesizeMouseAtCenter(searchClearButton, {}, win);
-  yield onRefreshed;
+  await onRefreshed;
 
   info("Check that the correct properties are visible");
 

devtools/client/inspector/computed/test/browser_computed_search-filter_context-menu.js

@@ -10,10 +10,10 @@ 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;
@@ -34,12 +34,12 @@ add_task(function* () {
 
   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");
@@ -54,22 +54,22 @@ add_task(function* () {
   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");

devtools/client/inspector/computed/test/browser_computed_search-filter_escape-keypress.js

@@ -19,15 +19,15 @@ const TEST_URI = `
   <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;
@@ -37,11 +37,11 @@ function* testAddTextInFilter(inspector, computedView) {
 
   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");
 
@@ -52,7 +52,7 @@ function* testAddTextInFilter(inspector, computedView) {
   });
 }
 
-function* testEscapeKeypress(inspector, computedView) {
+async function testEscapeKeypress(inspector, computedView) {
   info("Pressing the escape key on search filter");
 
   let win = computedView.styleWindow;
@@ -62,7 +62,7 @@ function* testEscapeKeypress(inspector, computedView) {
 
   searchField.focus();
   EventUtils.synthesizeKey("VK_ESCAPE", {}, win);
-  yield onRefreshed;
+  await onRefreshed;
 
   info("Check that the correct properties are visible");
 

devtools/client/inspector/computed/test/browser_computed_search-filter_noproperties.js

@@ -21,31 +21,31 @@ const TEST_URI = `
   </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");
@@ -54,7 +54,7 @@ add_task(function* () {
   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");

devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles-01.js

@@ -32,31 +32,31 @@ const TEST_URI = `
   </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);
 }

devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles-02.js

@@ -8,14 +8,14 @@
 
 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");
 
@@ -29,8 +29,8 @@ add_task(function* () {
                     "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);
 });

devtools/client/inspector/computed/test/browser_computed_style-editor-link.js

@@ -41,27 +41,27 @@ const DOCUMENT_URL = "data:text/html;charset=utf-8," + encodeURIComponent(
    </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");
@@ -69,7 +69,7 @@ function* testInlineStyle(view) {
   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");
@@ -77,14 +77,14 @@ function* testFirstInlineStyleSheet(view, toolbox, testActor) {
 
   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");
@@ -92,18 +92,18 @@ function* testSecondInlineStyleSheet(view, toolbox, testActor) {
   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");
@@ -111,20 +111,20 @@ function* testExternalStyleSheet(view, toolbox, testActor) {
   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,

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

@@ -82,7 +82,7 @@ function getComputedViewPropertyView(view, name) {
  * @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")) {
@@ -98,11 +98,11 @@ var getComputedViewMatchedRules = Task.async(function* (view, name) {
     // 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
@@ -175,14 +175,14 @@ function selectAllText(view) {
  * @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);
@@ -201,7 +201,7 @@ function* copyAllAndCheckClipboard(view, expectedPattern) {
  * @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;
@@ -215,7 +215,7 @@ function* copySomeTextAndCheckClipboard(view, positions, expectedPattern) {
 
   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);

devtools/client/inspector/fonts/test/browser_fontinspector.js

@@ -28,21 +28,21 @@ const FONTS = [{
   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");
 
@@ -70,10 +70,10 @@ function* testBodyFonts(inspector, viewDoc) {
   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");

devtools/client/inspector/fonts/test/browser_fontinspector_edit-previews.js

@@ -9,23 +9,23 @@
 
 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);
 });
 

devtools/client/inspector/fonts/test/browser_fontinspector_expand-css-code.js

@@ -8,8 +8,8 @@
 
 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");
@@ -27,7 +27,7 @@ add_task(function* () {
 
   let expander = fontEl.querySelector(".font-css-code .theme-twisty");
   expander.click();
-  yield onExpanded;
+  await onExpanded;
 
   ok(true, "Font-face rule is now expanded");
 
@@ -45,7 +45,7 @@ add_task(function* () {
 
   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");
 });

devtools/client/inspector/fonts/test/browser_fontinspector_other-fonts.js

@@ -10,15 +10,15 @@
 
 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");
@@ -28,8 +28,8 @@ add_task(function* () {
      "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) {

devtools/client/inspector/fonts/test/browser_fontinspector_text-node.js

@@ -8,14 +8,14 @@
 
 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");

devtools/client/inspector/fonts/test/browser_fontinspector_theme-change.js

@@ -17,11 +17,11 @@ registerCleanupFunction(() => {
   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;
@@ -29,11 +29,11 @@ add_task(function* () {
 
   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.");
 });
@@ -44,12 +44,12 @@ add_task(function* () {
  * @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;
 }

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

@@ -23,10 +23,10 @@ registerCleanupFunction(() => {
  * 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;
 };
 
 /**
@@ -34,21 +34,21 @@ selectNode = function* (node, inspector, reason) {
  * 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
@@ -57,7 +57,7 @@ var openFontInspectorForURL = Task.async(function* (url) {
  * @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;
@@ -66,7 +66,7 @@ function* updatePreviewText(view, text) {
   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.");
@@ -75,14 +75,14 @@ function* updatePreviewText(view, text) {
   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.");

devtools/client/inspector/grids/test/browser_grids_accordion-state.js

@@ -20,19 +20,19 @@ const TEST_URI = `
 
 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");
 
@@ -49,7 +49,7 @@ function* testAccordionStateAfterClickingHeader(doc) {
   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");
@@ -65,15 +65,15 @@ function* testAccordionStateAfterSwitchingSidebars(inspector, doc) {
   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");
 

devtools/client/inspector/grids/test/browser_grids_color-in-rules-grid-toggle.js

@@ -18,9 +18,9 @@ const TEST_URI = `
   </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();
@@ -33,9 +33,9 @@ add_task(function* () {
   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.");
@@ -45,8 +45,8 @@ add_task(function* () {
     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.");
@@ -55,7 +55,7 @@ add_task(function* () {
   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");
@@ -78,5 +78,5 @@ add_task(function* () {
     }
   );
   gridToggle.click();
-  yield onHighlighterShown;
+  await onHighlighterShown;
 });

devtools/client/inspector/grids/test/browser_grids_display-setting-extend-grid-lines.js

@@ -20,13 +20,13 @@ const TEST_URI = `
 
 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),
@@ -36,13 +36,13 @@ add_task(function* () {
   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.");

devtools/client/inspector/grids/test/browser_grids_display-setting-show-grid-areas.js

@@ -20,13 +20,13 @@ const TEST_URI = `
 
 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),
@@ -36,13 +36,13 @@ add_task(function* () {
   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.");

devtools/client/inspector/grids/test/browser_grids_display-setting-show-grid-line-numbers.js

@@ -20,13 +20,13 @@ const TEST_URI = `
 
 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.");
@@ -37,7 +37,7 @@ add_task(function* () {
   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.");
@@ -46,7 +46,7 @@ add_task(function* () {
   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.");

devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-ESC.js

@@ -18,9 +18,9 @@ const TEST_URI = `
   </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();
@@ -38,9 +38,9 @@ add_task(function* () {
   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.");
@@ -50,8 +50,8 @@ add_task(function* () {
     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.");

devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-RETURN.js

@@ -18,9 +18,9 @@ const TEST_URI = `
   </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();
@@ -38,9 +38,9 @@ add_task(function* () {
   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.");
@@ -50,8 +50,8 @@ add_task(function* () {
     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.");

devtools/client/inspector/grids/test/browser_grids_grid-list-element-rep.js

@@ -18,9 +18,9 @@ const TEST_URI = `
   </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;
 
@@ -32,7 +32,7 @@ add_task(function* () {
   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.");
@@ -42,7 +42,7 @@ add_task(function* () {
 
   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.");

devtools/client/inspector/grids/test/browser_grids_grid-list-no-grids.js

@@ -15,13 +15,13 @@ const TEST_URI = `
   </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");
 

devtools/client/inspector/grids/test/browser_grids_grid-list-on-iframe-reloaded.js

@@ -9,16 +9,16 @@
 
 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");
@@ -33,19 +33,19 @@ add_task(function* () {
     !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");
@@ -54,6 +54,6 @@ function* enableTheFirstGrid(doc, { highlighters, store }) {
 
   checkbox.click();
 
-  yield onHighlighterShown;
-  yield onCheckboxChange;
+  await onHighlighterShown;
+  await onCheckboxChange;
 }

devtools/client/inspector/grids/test/browser_grids_grid-list-on-mutation-element-added.js

@@ -21,13 +21,13 @@ const TEST_URI = `
   </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");
 
@@ -40,7 +40,7 @@ add_task(function* () {
   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],
@@ -55,7 +55,7 @@ add_task(function* () {
   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.");
@@ -72,8 +72,8 @@ add_task(function* () {
     !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.");
@@ -85,8 +85,8 @@ add_task(function* () {
     !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.");

devtools/client/inspector/grids/test/browser_grids_grid-list-on-mutation-element-removed.js

@@ -18,13 +18,13 @@ const TEST_URI = `
   </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");
 
@@ -39,8 +39,8 @@ add_task(function* () {
   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],
@@ -53,8 +53,8 @@ add_task(function* () {
   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.");

devtools/client/inspector/grids/test/browser_grids_grid-list-toggle-multiple-grids.js

@@ -22,13 +22,13 @@ const TEST_URI = `
   </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");
@@ -48,8 +48,8 @@ add_task(function* () {
     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],
@@ -63,8 +63,8 @@ add_task(function* () {
     !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.");
@@ -76,8 +76,8 @@ add_task(function* () {
     !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.");

devtools/client/inspector/grids/test/browser_grids_grid-list-toggle-single-grid.js

@@ -17,13 +17,13 @@ const TEST_URI = `
   </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");
 
@@ -40,8 +40,8 @@ add_task(function* () {
     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],
@@ -54,8 +54,8 @@ add_task(function* () {
     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.");

devtools/client/inspector/grids/test/browser_grids_grid-outline-cannot-show-outline.js

@@ -20,14 +20,14 @@ const TEST_URI = `
   </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");
@@ -39,9 +39,9 @@ add_task(function* () {
     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];
 

devtools/client/inspector/grids/test/browser_grids_grid-outline-highlight-area.js

@@ -27,10 +27,10 @@ const TEST_URI = `
   </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;
 
@@ -47,9 +47,9 @@ add_task(function* () {
     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];
 
@@ -67,5 +67,5 @@ add_task(function* () {
       is(showGridArea, "header", "Grid area name should be 'header'.");
     });
   EventUtils.synthesizeMouse(gridCellA, 1, 1, {type: "mouseover"}, doc.defaultView);
-  yield onCellAHighlight;
+  await onCellAHighlight;
 });

devtools/client/inspector/grids/test/browser_grids_grid-outline-highlight-cell.js

@@ -18,10 +18,10 @@ const TEST_URI = `
   </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;
 
@@ -38,9 +38,9 @@ add_task(function* () {
     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];
 
@@ -56,5 +56,5 @@ add_task(function* () {
       is(columnNumber, 1, "Should be the first grid column.");
     });
   EventUtils.synthesizeMouse(gridCellA, 1, 1, {type: "mouseover"}, doc.defaultView);
-  yield onCellAHighlight;
+  await onCellAHighlight;
 });

devtools/client/inspector/grids/test/browser_grids_grid-outline-selected-grid.js

@@ -18,10 +18,10 @@ const TEST_URI = `
   </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;
 
@@ -39,9 +39,9 @@ add_task(function* () {
     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.");

devtools/client/inspector/grids/test/browser_grids_grid-outline-updates-on-grid-change.js

@@ -20,10 +20,10 @@ const TEST_URI = `
   </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;
 
@@ -37,9 +37,9 @@ add_task(function* () {
 
   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.");
@@ -62,8 +62,8 @@ add_task(function* () {
     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.");

devtools/client/inspector/grids/test/browser_grids_highlighter-setting-rules-grid-toggle.js

@@ -20,9 +20,9 @@ const TEST_URI = `
 
 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;
 
@@ -35,13 +35,13 @@ add_task(function* () {
   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");
@@ -64,7 +64,7 @@ add_task(function* () {
     }
   );
   gridToggle.click();
-  yield onHighlighterShown;
+  await onHighlighterShown;
 
   Services.prefs.clearUserPref(SHOW_INFINITE_LINES_PREF);
 });

devtools/client/inspector/grids/test/browser_grids_no_fragments.js

@@ -23,10 +23,10 @@ const TEST_URI = `
   </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;
 
@@ -38,12 +38,12 @@ add_task(function* () {
   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;
 });

devtools/client/inspector/grids/test/browser_grids_number-of-css-grids-telemetry.js

@@ -24,18 +24,18 @@ const TEST_URI2 = `
 
 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();

devtools/client/inspector/grids/test/browser_grids_restored-after-reload.js

@@ -32,13 +32,13 @@ const OTHER_URI = `
   </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");
 
@@ -48,8 +48,8 @@ add_task(function* () {
     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],
@@ -62,9 +62,9 @@ add_task(function* () {
   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");
@@ -77,9 +77,9 @@ add_task(function* () {
   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");

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

@@ -32,15 +32,15 @@ const HIGHLIGHTER_TYPE = "CssGridHighlighter";
  * @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");

devtools/client/inspector/inspector-commands.js

@@ -28,12 +28,12 @@ exports.items = [{
       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");
   },
 }, {
@@ -57,7 +57,7 @@ exports.items = [{
       hidden: true
     }]
   }],
-  exec: function* (args, context) {
+  exec: async function(args, context) {
     if (args.hide) {
       context.updateExec("eyedropper_server_hide").catch(console.error);
       return;
@@ -69,7 +69,7 @@ exports.items = [{
     if (toolbox) {
       let inspector = toolbox.getPanel("inspector");
       if (inspector) {
-        yield inspector.hideEyeDropper();
+        await inspector.hideEyeDropper();
       }
     }
 

devtools/client/inspector/inspector-search.js

@@ -5,7 +5,6 @@
 "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");
@@ -75,7 +74,7 @@ InspectorSearch.prototype = {
         .catch(console.error);
   },
 
-  doFullTextSearch: Task.async(function* (query, reverse) {
+  async doFullTextSearch(query, reverse) {
     let lastSearched = this._lastSearched;
     this._lastSearched = query;
 
@@ -87,7 +86,7 @@ InspectorSearch.prototype = {
       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) {
@@ -104,7 +103,7 @@ InspectorSearch.prototype = {
       this.searchBox.classList.add("devtools-style-searchbox-no-match");
       this.emit("search-result");
     }
-  }),
+  },
 
   _onInput: function() {
     if (this.searchBox.value.length === 0) {

devtools/client/inspector/inspector.js

@@ -12,7 +12,6 @@ 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");
@@ -145,21 +144,21 @@ 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;
@@ -950,14 +949,14 @@ Inspector.prototype = {
    * @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.
@@ -970,9 +969,9 @@ Inspector.prototype = {
       console.error(e);
       return false;
     }
-  }),
+  },
 
-  setupToolbar: Task.async(function* () {
+  async setupToolbar() {
     this.teardownToolbar();
 
     // Setup the add-node button.
@@ -981,7 +980,7 @@ Inspector.prototype = {
     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.
@@ -1018,7 +1017,7 @@ Inspector.prototype = {
       let parentBox = this.panelDoc.getElementById("inspector-sidebar-toggle-box");
       this.sidebarToggle = this.ReactDOM.render(sidebarToggle, parentBox);
     }
-  }),
+  },
 
   teardownToolbar: function() {
     if (this.addNodeButton) {
@@ -1068,7 +1067,7 @@ Inspector.prototype = {
    * view is initialized. Expands the current selected node and restores the saved
    * highlighter state.
    */
-  onMarkupLoaded: Task.async(function* () {
+  async onMarkupLoaded() {
     if (!this.markup) {
       return;
     }
@@ -1076,7 +1075,7 @@ Inspector.prototype = {
     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()
@@ -1088,7 +1087,7 @@ Inspector.prototype = {
     // 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");
 
@@ -1103,7 +1102,7 @@ Inspector.prototype = {
       }
       delete this._newRootStart;
     }
-  }),
+  },
 
   _selectionCssSelector: null,
 
@@ -1851,7 +1850,7 @@ Inspector.prototype = {
    * 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;
     }
@@ -1860,12 +1859,12 @@ Inspector.prototype = {
 
     // 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.
@@ -2102,7 +2101,7 @@ Inspector.prototype = {
   /**
    * 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";
@@ -2111,14 +2110,14 @@ Inspector.prototype = {
     // 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.
@@ -2344,7 +2343,7 @@ Inspector.prototype = {
  *        - reactDOM
  *        - browserRequire
  */
-const buildFakeToolbox = Task.async(function* (
+const buildFakeToolbox = async function(
   target, createThreadClient, {
     React,
     ReactDOM,
@@ -2397,14 +2396,14 @@ const buildFakeToolbox = Task.async(function* (
     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;
@@ -2412,7 +2411,7 @@ const buildFakeToolbox = Task.async(function* (
   fakeToolbox.selection = selection;
   fakeToolbox.highlighter = highlighter;
   return fakeToolbox;
-});
+};
 
 // URL constructor doesn't support chrome: scheme
 let href = window.location.href.replace(/chrome:/, "http://");
@@ -2427,16 +2426,16 @@ if (window.location.protocol === "chrome:" && url.search.length > 1) {
   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);
   });
 }

devtools/client/inspector/markup/markup.js

@@ -6,7 +6,6 @@
 
 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");
@@ -512,7 +511,7 @@ MarkupView.prototype = {
    * @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) {
@@ -535,7 +534,7 @@ MarkupView.prototype = {
     }
 
     return false;
-  }),
+  },
 
   /**
    * Given the known reason, should the current selection be briefly highlighted

devtools/client/inspector/markup/test/browser_markup_accessibility_focus_blur.js

@@ -7,20 +7,20 @@
 // 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");
@@ -34,13 +34,13 @@ add_task(function* () {
     "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");
@@ -53,7 +53,7 @@ add_task(function* () {
   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.");
 });

devtools/client/inspector/markup/test/browser_markup_accessibility_navigation.js

@@ -241,8 +241,8 @@ const TESTS = [
 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
@@ -254,8 +254,8 @@ add_task(function* () {
 
   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.
@@ -265,7 +265,7 @@ add_task(function* () {
   elms.root.elt.focus();
 
   for (let testData of TESTS) {
-    yield runAccessibilityNavigationTest(inspector, elms, testData);
+    await runAccessibilityNavigationTest(inspector, elms, testData);
   }
 
   elms = null;

devtools/client/inspector/markup/test/browser_markup_accessibility_navigation_after_edit.js

@@ -102,14 +102,14 @@ const TESTS = [
 
 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.
@@ -119,7 +119,7 @@ add_task(function* () {
   elms.root.elt.focus();
 
   for (let testData of TESTS) {
-    yield runAccessibilityNavigationTest(inspector, elms, testData);
+    await runAccessibilityNavigationTest(inspector, elms, testData);
   }
 
   elms = null;

devtools/client/inspector/markup/test/browser_markup_accessibility_new_selection.js

@@ -8,8 +8,8 @@
 // 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;
@@ -17,10 +17,10 @@ add_task(function* () {
 
   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.");
 });

devtools/client/inspector/markup/test/browser_markup_anonymous_01.js

@@ -7,38 +7,38 @@
 // 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");
 });

devtools/client/inspector/markup/test/browser_markup_anonymous_02.js

@@ -9,23 +9,23 @@ 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);
   }
 });

devtools/client/inspector/markup/test/browser_markup_anonymous_03.js

@@ -9,13 +9,13 @@
 // 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");
@@ -23,13 +23,13 @@ add_task(function* () {
 
   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);
 });

devtools/client/inspector/markup/test/browser_markup_anonymous_04.js

@@ -9,22 +9,22 @@
 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) {
@@ -32,6 +32,6 @@ add_task(function* () {
     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);
   }
 });

devtools/client/inspector/markup/test/browser_markup_copy_image_data.js

@@ -7,31 +7,31 @@
 // 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");
 
@@ -39,7 +39,7 @@ function* assertCopyImageDataNotAvailable(inspector) {
   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");
 

devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_01.js

@@ -69,8 +69,8 @@ const TEST_DATA = [
    -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);
 });

devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_02.js

@@ -97,10 +97,10 @@ const TEST_DATA_INNER = [
   ["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);
 });

devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_03.js

@@ -47,8 +47,8 @@ const TEST_DATA = [
    -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);
 });

devtools/client/inspector/markup/test/browser_markup_display_node_01.js

@@ -24,34 +24,34 @@ const TEST_URI = `
   <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.");

devtools/client/inspector/markup/test/browser_markup_display_node_02.js

@@ -35,8 +35,8 @@ const TEST_DATA = [
       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";
       `);
@@ -53,8 +53,8 @@ const TEST_DATA = [
       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";
       `);
@@ -71,8 +71,8 @@ const TEST_DATA = [
       textContent: "none",
       display: "none"
     },
-    changeStyle: function* (testActor) {
-      yield testActor.eval(`
+    changeStyle: async function(testActor) {
+      await testActor.eval(`
         document.getElementById("flex").removeAttribute("hidden");
       `);
     },
@@ -83,20 +83,20 @@ const TEST_DATA = [
   }
 ];
 
-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,
@@ -107,8 +107,8 @@ function* runTestData(inspector, testActor,
   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");

devtools/client/inspector/markup/test/browser_markup_dragdrop_distance.js

@@ -14,31 +14,31 @@ 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");

devtools/client/inspector/markup/test/browser_markup_dragdrop_dragRootNode.js

@@ -9,14 +9,14 @@
 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");
   }
 });

devtools/client/inspector/markup/test/browser_markup_dragdrop_draggable.js

@@ -22,18 +22,18 @@ const TEST_DATA = [
   { 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);
     },
@@ -41,18 +41,18 @@ const TEST_DATA = [
   }
 ];
 
-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();
     }
 

devtools/client/inspector/markup/test/browser_markup_dragdrop_escapeKeyPress.js

@@ -8,16 +8,16 @@
 
 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");

devtools/client/inspector/markup/test/browser_markup_dragdrop_invalidNodes.js

@@ -9,40 +9,40 @@
 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");
 });

devtools/client/inspector/markup/test/browser_markup_dragdrop_reorder.js

@@ -10,96 +10,96 @@ requestLongerTimeout(2);
 
 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;