Merge mozilla-central to inbound

--HG-- rename : browser/base/content/test/general/bug364677-data.xml => browser/components/feeds/test/bug364677-data.xml rename : browser/base/content/test/general/bug364677-data.xml^headers^ => browser/components/feeds/test/bug364677-data.xml^headers^ rename : browser/base/content/test/general/test_bug364677.html => browser/components/feeds/test/test_bug364677.html rename : services/sync/tps/extensions/tps/bootstrap.js => services/sync/tps/extensions/tps/components/tps-cmdline.js rename : testing/talos/talos/pageloader/bootstrap.js => testing/talos/talos/pageloader/components/tp-cmdline.js rename : testing/talos/talos/startup_test/sessionrestore/addon/bootstrap.js => testing/talos/talos/startup_test/sessionrestore/addon/SessionRestoreTalosTest.js rename : testing/talos/talos/talos-powers/bootstrap.js => testing/talos/talos/talos-powers/components/TalosPowersService.js rename : tools/quitter/bootstrap.js => tools/quitter/QuitterObserver.js extra : rebase_source : 5801e95a945b54754f27571e7b211e1eac132d67
2018-03-21 22:27:21 +02:00 · 2018-03-21 22:27:21 +02:00 · 5e8092339a
--- a/accessible/base/TreeWalker.cpp
+++ b/accessible/base/TreeWalker.cpp
@ -345,7 +345,6 @@ TreeWalker::AccessibleFor(nsIContent* aNode, uint32_t aFlags, bool* aSkipSubtree
 dom::AllChildrenIterator*
 TreeWalker::PopState()
 {
-  size_t length = mStateStack.Length();
-  mStateStack.RemoveElementAt(length - 1);
+  mStateStack.RemoveLastElement();
  return mStateStack.IsEmpty() ? nullptr : &mStateStack.LastElement();
 }
--- a/accessible/xul/XULListboxAccessible.cpp
+++ b/accessible/xul/XULListboxAccessible.cpp
@ -276,9 +276,9 @@ XULListboxAccessible::SelectedCellCount()
  if (!selectedItems)
    return 0;

-  uint32_t selectedItemsCount = 0;
-  nsresult rv = selectedItems->GetLength(&selectedItemsCount);
-  NS_ENSURE_SUCCESS(rv, 0);
+  nsINodeList* list = nsINodeList::FromDOMNodeList(selectedItems);
+
+  uint32_t selectedItemsCount = list->Length();

  return selectedItemsCount * ColCount();
 }
@ -326,15 +326,12 @@ XULListboxAccessible::SelectedCells(nsTArray<Accessible*>* aCells)
  control->GetSelectedItems(getter_AddRefs(selectedItems));
  if (!selectedItems)
    return;
+  nsINodeList* list = nsINodeList::FromDOMNodeList(selectedItems);

-  uint32_t selectedItemsCount = 0;
-  DebugOnly<nsresult> rv = selectedItems->GetLength(&selectedItemsCount);
-  NS_ASSERTION(NS_SUCCEEDED(rv), "GetLength() Shouldn't fail!");
+  uint32_t selectedItemsCount = list->Length();

  for (uint32_t index = 0; index < selectedItemsCount; index++) {
-    nsCOMPtr<nsIDOMNode> itemNode;
-    selectedItems->Item(index, getter_AddRefs(itemNode));
-    nsCOMPtr<nsIContent> itemContent(do_QueryInterface(itemNode));
+    nsIContent* itemContent = list->Item(index);
    Accessible* item = mDoc->GetAccessible(itemContent);

    if (item) {
@ -360,10 +357,9 @@ XULListboxAccessible::SelectedCellIndices(nsTArray<uint32_t>* aCells)
  control->GetSelectedItems(getter_AddRefs(selectedItems));
  if (!selectedItems)
    return;
+  nsINodeList* list = nsINodeList::FromDOMNodeList(selectedItems);

-  uint32_t selectedItemsCount = 0;
-  DebugOnly<nsresult> rv = selectedItems->GetLength(&selectedItemsCount);
-  NS_ASSERTION(NS_SUCCEEDED(rv), "GetLength() Shouldn't fail!");
+  uint32_t selectedItemsCount = list->Length();

  uint32_t colCount = ColCount();
  aCells->SetCapacity(selectedItemsCount * colCount);
@ -372,10 +368,9 @@ XULListboxAccessible::SelectedCellIndices(nsTArray<uint32_t>* aCells)
  for (uint32_t selItemsIdx = 0, cellsIdx = 0;
       selItemsIdx < selectedItemsCount; selItemsIdx++) {

-    nsCOMPtr<nsIDOMNode> itemNode;
-    selectedItems->Item(selItemsIdx, getter_AddRefs(itemNode));
+    nsIContent* itemContent = list->Item(selItemsIdx);
    nsCOMPtr<nsIDOMXULSelectControlItemElement> item =
-      do_QueryInterface(itemNode);
+      do_QueryInterface(itemContent);

    if (item) {
      int32_t itemIdx = -1;
@ -409,10 +404,9 @@ XULListboxAccessible::SelectedRowIndices(nsTArray<uint32_t>* aRows)
  control->GetSelectedItems(getter_AddRefs(selectedItems));
  if (!selectedItems)
    return;
+  nsINodeList* list = nsINodeList::FromDOMNodeList(selectedItems);

-  uint32_t rowCount = 0;
-  DebugOnly<nsresult> rv = selectedItems->GetLength(&rowCount);
-  NS_ASSERTION(NS_SUCCEEDED(rv), "GetLength() Shouldn't fail!");
+  uint32_t rowCount = list->Length();

  if (!rowCount)
    return;
@ -421,10 +415,9 @@ XULListboxAccessible::SelectedRowIndices(nsTArray<uint32_t>* aRows)
  aRows->AppendElements(rowCount);

  for (uint32_t rowIdx = 0; rowIdx < rowCount; rowIdx++) {
-    nsCOMPtr<nsIDOMNode> itemNode;
-    selectedItems->Item(rowIdx, getter_AddRefs(itemNode));
+    nsIContent* itemContent = list->Item(rowIdx);
    nsCOMPtr<nsIDOMXULSelectControlItemElement> item =
-      do_QueryInterface(itemNode);
+      do_QueryInterface(itemContent);

    if (item) {
      int32_t itemIdx = -1;
--- a/browser/base/content/test/general/mochitest.ini
+++ b/browser/base/content/test/general/mochitest.ini
@ -1,8 +1,6 @@
 [DEFAULT]
 support-files =
  audio.ogg
-  bug364677-data.xml
-  bug364677-data.xml^headers^
  bug395533-data.txt
  contextmenu_common.js
  ctxmenu-image.png
@ -21,5 +19,4 @@ support-files =
  video.ogg
  !/image/test/mochitest/blue.png

-[test_bug364677.html]
 [test_bug395533.html]
--- a/browser/components/feeds/FeedConverter.js
+++ b/browser/components/feeds/FeedConverter.js
@ -86,6 +86,10 @@ function getPrefReaderForType(t) {
  }
 }

+XPCOMUtils.defineLazyPreferenceGetter(this, "gCanFrameFeeds",
+  "browser.feeds.unsafelyFrameFeeds", false);
+
+
 function FeedConverter() {
 }
 FeedConverter.prototype = {
@ -266,6 +270,13 @@ FeedConverter.prototype = {
  onStartRequest(request, context) {
    let channel = request.QueryInterface(Ci.nsIChannel);

+    let {loadInfo} = channel;
+    if ((loadInfo.frameOuterWindowID || loadInfo.outerWindowID) != loadInfo.topOuterWindowID &&
+        !gCanFrameFeeds) {
+      // We don't care about frame loads:
+      return;
+    }
+
    // Check for a header that tells us there was no sniffing
    // The value doesn't matter.
    try {
--- a/browser/components/feeds/FeedWriter.js
+++ b/browser/components/feeds/FeedWriter.js
@ -64,6 +64,9 @@ function convertByteUnits(aBytes) {
  return [aBytes, units[unitIndex]];
 }

+XPCOMUtils.defineLazyPreferenceGetter(this, "gCanFrameFeeds",
+  "browser.feeds.unsafelyFrameFeeds", false);
+
 function FeedWriter() {
  this._selectedApp = undefined;
  this._selectedAppMenuItem = null;
@ -778,6 +781,9 @@ FeedWriter.prototype = {
  // BrowserFeedWriter WebIDL methods
  init(aWindow) {
    let window = aWindow;
+    if (window != window.top && !gCanFrameFeeds) {
+      return;
+    }
    this._feedURI = this._getOriginalURI(window);
    if (!this._feedURI)
      return;
@ -877,6 +883,9 @@ FeedWriter.prototype = {
  },

  close() {
+    if (!this._window) {
+      return;
+    }
    this._document.getElementById("subscribeButton")
        .removeEventListener("click", this);
    this._handlersList
@ -895,7 +904,7 @@ FeedWriter.prototype = {
  },

  _removeFeedFromCache() {
-    if (this._feedURI) {
+    if (this._window && this._feedURI) {
      let feedService = Cc["@mozilla.org/browser/feeds/result-service;1"].
                        getService(Ci.nsIFeedResultService);
      feedService.removeFeedResult(this._feedURI);
@ -904,6 +913,9 @@ FeedWriter.prototype = {
  },

  subscribe() {
+    if (!this._window) {
+      return;
+    }
    let feedType = this._getFeedType();

    // Subscribe to the feed using the selected handler and save prefs
--- a/browser/components/feeds/nsFeedSniffer.cpp
+++ b/browser/components/feeds/nsFeedSniffer.cpp
@ -5,6 +5,7 @@

 #include "nsFeedSniffer.h"

+#include "mozilla/Preferences.h"
 #include "mozilla/Unused.h"

 #include "nsNetCID.h"
@ -40,6 +41,11 @@

 #define MAX_BYTES 512u

+static bool sFramePrefCached = false;
+static bool sFramingAllowed = false;
+
+using namespace mozilla;
+
 NS_IMPL_ISUPPORTS(nsFeedSniffer,
                  nsIContentSniffer,
                  nsIStreamListener,
@ -220,6 +226,29 @@ nsFeedSniffer::GetMIMETypeFromContent(nsIRequest* request,
    return NS_OK;
  }

+  if (!sFramePrefCached) {
+    sFramePrefCached = true;
+    Preferences::AddBoolVarCache(&sFramingAllowed,
+                                 "browser.feeds.unsafelyFrameFeeds");
+  }
+
+  if (!sFramingAllowed) {
+    // Check that we're the toplevel frame:
+    nsCOMPtr<nsILoadInfo> loadInfo = channel->GetLoadInfo();
+    if (!loadInfo) {
+      sniffedType.Truncate();
+      return NS_OK;
+    }
+    auto frameID = loadInfo->GetFrameOuterWindowID();
+    if (!frameID) {
+      frameID = loadInfo->GetOuterWindowID();
+    }
+    if (loadInfo->GetTopOuterWindowID() != frameID) {
+      sniffedType.Truncate();
+      return NS_OK;
+    }
+  }
+
  // We need to find out if this is a load of a view-source document. In this
  // case we do not want to override the content type, since the source display
  // does not need to be converted from feed format to XUL. More importantly,
--- a/browser/base/content/test/general/bug364677-data.xml
+++ b/browser/base/content/test/general/bug364677-data.xml
--- a/browser/base/content/test/general/bug364677-data.xml^headers^
+++ b/browser/base/content/test/general/bug364677-data.xml^headers^
--- a/browser/components/feeds/test/chrome/chrome.ini
+++ b/browser/components/feeds/test/chrome/chrome.ini
@ -1,4 +1,7 @@
 [DEFAULT]
+prefs =
+  browser.feeds.unsafelyFrameFeeds=true
+
 support-files = sample_feed.atom
  !/browser/components/feeds/test/bug408328-data.xml
  !/browser/components/feeds/test/valid-feed.xml
--- a/browser/components/feeds/test/mochitest.ini
+++ b/browser/components/feeds/test/mochitest.ini
@ -1,4 +1,7 @@
 [DEFAULT]
+prefs =
+  browser.feeds.unsafelyFrameFeeds=true
+
 support-files =
  bug368464-data.xml
  bug408328-data.xml
@ -8,6 +11,10 @@ support-files =
  valid-feed.xml
  valid-unsniffable-feed.xml

+[test_bug364677.html]
+support-files =
+  bug364677-data.xml
+  bug364677-data.xml^headers^
 [test_bug436801.html]
 [test_bug494328.html]
 [test_bug589543.html]
--- a/browser/base/content/test/general/test_bug364677.html
+++ b/browser/base/content/test/general/test_bug364677.html
--- a/browser/components/places/PlacesUIUtils.jsm
+++ b/browser/components/places/PlacesUIUtils.jsm
@ -262,7 +262,7 @@ var PlacesUIUtils = {
   *        Owner window for the new dialog.
   *
   * @see documentation at the top of bookmarkProperties.js
-   * @return true if any transaction has been performed, false otherwise.
+   * @return The guid of the item that was created or edited, undefined otherwise.
   */
  showBookmarkDialog(aInfo, aParentWindow) {
    // Preserve size attributes differently based on the fact the dialog has
@ -289,16 +289,16 @@ var PlacesUIUtils = {

    aParentWindow.openDialog(dialogURL, "", features, aInfo);

-    let performed = ("performed" in aInfo && aInfo.performed);
+    let bookmarkGuid = ("bookmarkGuid" in aInfo && aInfo.bookmarkGuid) || undefined;

    batchBlockingDeferred.resolve();

-    if (!performed &&
+    if (!bookmarkGuid &&
        topUndoEntry != PlacesTransactions.topUndoEntry) {
      PlacesTransactions.undo().catch(Cu.reportError);
    }

-    return performed;
+    return bookmarkGuid;
  },

  /**
--- a/browser/components/places/content/bookmarkProperties.js
+++ b/browser/components/places/content/bookmarkProperties.js
@ -53,8 +53,8 @@
 *     - "loadInSidebar"
 *     - "folderPicker" - hides both the tree and the menu.
 *
- * window.arguments[0].performed is set to true if any transaction has
- * been performed by the dialog.
+ * window.arguments[0].bookmarkGuid is set to the guid of the item, if the
+ * dialog is accepted.
 */

 /* import-globals-from editBookmark.js */
@ -86,7 +86,6 @@ var BookmarkPropertiesPanel = {

  _action: null,
  _itemType: null,
-  _itemId: -1,
  _uri: null,
  _loadInSidebar: false,
  _title: "",
@ -404,14 +403,15 @@ var BookmarkPropertiesPanel = {
    // We have to uninit the panel first, otherwise late changes could force it
    // to commit more transactions.
    gEditItemOverlay.uninitPanel(true);
-    window.arguments[0].performed = true;
+    if (this._node.bookmarkGuid) {
+      window.arguments[0].bookmarkGuid = this._node.bookmarkGuid;
+    }
  },

  onDialogCancel() {
    // We have to uninit the panel first, otherwise late changes could force it
    // to commit more transactions.
    gEditItemOverlay.uninitPanel(true);
-    window.arguments[0].performed = false;
  },

  /**
@ -505,11 +505,9 @@ var BookmarkPropertiesPanel = {
      throw new Error(`unexpected value for _itemType:  ${this._itemType}`);
    }

-    this._itemGuid = itemGuid;
-    this._itemId = await PlacesUtils.promiseItemId(itemGuid);
    return Object.freeze({
-      itemId: this._itemId,
-      bookmarkGuid: this._itemGuid,
+      itemId: await PlacesUtils.promiseItemId(itemGuid),
+      bookmarkGuid: itemGuid,
      title: this._title,
      uri: this._uri ? this._uri.spec : "",
      type: this._itemType == BOOKMARK_ITEM ?
--- a/browser/components/places/content/controller.js
+++ b/browser/components/places/content/controller.js
@ -707,23 +707,14 @@ PlacesController.prototype = {
    if (!ip)
      throw Cr.NS_ERROR_NOT_AVAILABLE;

-    let performed =
+    let bookmarkGuid =
      PlacesUIUtils.showBookmarkDialog({ action: "add",
                                         type: aType,
                                         defaultInsertionPoint: ip,
                                         hiddenRows: [ "folderPicker" ]
                                       }, window.top);
-    if (performed) {
-      // Select the new item.
-      // TODO (Bug 1425555): When we remove places transactions, we might be
-      // able to improve showBookmarkDialog to return the guid direct, and
-      // avoid the fetch.
-      let insertedNode = await PlacesUtils.bookmarks.fetch({
-        parentGuid: ip.guid,
-        index: await ip.getIndex()
-      });
-
-      this._view.selectItems([insertedNode.guid], false);
+    if (bookmarkGuid) {
+      this._view.selectItems([bookmarkGuid], false);
    }
  },

--- a/browser/components/places/tests/browser/browser.ini
+++ b/browser/components/places/tests/browser/browser.ini
@ -67,6 +67,7 @@ skip-if = (os == 'win' && ccov) # Bug 1423667
 skip-if = (os == 'win' && ccov) # Bug 1423667
 [browser_library_middleclick.js]
 skip-if = (os == 'win' && ccov) # Bug 1423667
+[browser_library_new_bookmark.js]
 [browser_library_open_leak.js]
 [browser_library_openFlatContainer.js]
 skip-if = (os == 'win' && ccov) # Bug 1423667
--- a/browser/components/places/tests/browser/browser_library_new_bookmark.js
+++ b/browser/components/places/tests/browser/browser_library_new_bookmark.js
@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/
+ */
+
+/**
+ * Test that the a new bookmark is correctly selected after being created via
+ * the bookmark dialog.
+ */
+"use strict";
+
+add_task(async function test_open_bookmark_from_library() {
+  let bm = await PlacesUtils.bookmarks.insertTree({
+    guid: PlacesUtils.bookmarks.unfiledGuid,
+    children: [{
+      url: "https://example1.com",
+      title: "bm1",
+    }, {
+      url: "https://example2.com",
+      title: "bm2",
+    }, {
+      url: "https://example3.com",
+      title: "bm3",
+    }]
+  });
+
+  let library = await promiseLibrary("UnfiledBookmarks");
+
+  registerCleanupFunction(async function() {
+    await promiseLibraryClosed(library);
+    await PlacesUtils.bookmarks.eraseEverything();
+  });
+
+  let bmLibrary = library.ContentTree.view.view.nodeForTreeIndex(1);
+  Assert.equal(bmLibrary.title, bm[1].title, "Found bookmark in the right pane");
+
+  library.ContentTree.view.selectNode(bmLibrary);
+
+  await withBookmarksDialog(
+    false,
+    async () => {
+      // Open the context menu.
+      let placesContext = library.document.getElementById("placesContext");
+      let promisePopup = BrowserTestUtils.waitForEvent(placesContext, "popupshown");
+      synthesizeClickOnSelectedTreeCell(library.ContentTree.view, {
+        button: 2,
+        type: "contextmenu"
+      });
+
+      await promisePopup;
+      let properties = library.document.getElementById("placesContext_new:bookmark");
+      EventUtils.synthesizeMouseAtCenter(properties, {}, library);
+    },
+    async dialogWin => {
+      let promiseLocationChange = PlacesTestUtils.waitForNotification("onItemChanged",
+        (id, parentId, index, itemUrl) => itemUrl === "https://example4.com/");
+
+      fillBookmarkTextField("editBMPanel_locationField", "https://example4.com/", dialogWin, false);
+
+      EventUtils.synthesizeKey("VK_RETURN", {}, dialogWin);
+      await promiseLocationChange;
+
+      let node = library.ContentTree.view.selectedNode;
+      Assert.ok(node, "Should have a selectedNode");
+      Assert.equal(node.uri, "https://example4.com/",
+        "Should have selected the newly created bookmark");
+    });
+});
--- a/browser/components/preferences/containers.js
+++ b/browser/components/preferences/containers.js
@ -5,9 +5,22 @@
 ChromeUtils.import("resource://gre/modules/Services.jsm");
 ChromeUtils.import("resource://gre/modules/ContextualIdentityService.jsm");

-const containersBundle = Services.strings.createBundle("chrome://browser/locale/preferences/containers.properties");
+/**
+ * We want to set the window title immediately to prevent flickers.
+ */
+function setTitle() {
+  let params = window.arguments[0] || {};

-const HTMLNS = "http://www.w3.org/1999/xhtml";
+  let winElem = document.documentElement;
+  if (params.userContextId) {
+    document.l10n.setAttributes(winElem, "containers-window-update", {
+      name: params.identity.name
+    });
+  } else {
+    document.l10n.setAttributes(winElem, "containers-window-new");
+  }
+}
+setTitle();

 let gContainersManager = {
  icons: [
@ -45,10 +58,6 @@ let gContainersManager = {
    this.userContextId = aParams.userContextId || null;
    this.identity = aParams.identity;

-    if (aParams.windowTitle) {
-      document.title = aParams.windowTitle;
-    }
-
    const iconWrapper = document.getElementById("iconWrapper");
    iconWrapper.appendChild(this.createIconButtons());

@ -61,28 +70,14 @@ let gContainersManager = {
      this.checkForm();
    }

-    this.setLabelsMinWidth();
-
    // This is to prevent layout jank caused by the svgs and outlines rendering at different times
    document.getElementById("containers-content").removeAttribute("hidden");
  },

-  setLabelsMinWidth() {
-    const labelMinWidth = containersBundle.GetStringFromName("containers.labelMinWidth");
-    const labels = [
-      document.getElementById("nameLabel"),
-      document.getElementById("iconLabel"),
-      document.getElementById("colorLabel")
-    ];
-    for (let label of labels) {
-      label.style.minWidth = labelMinWidth;
-    }
-  },
-
  uninit() {
  },

-  // Check if name string as to if the form can be submitted
+  // Check if name is provided to determine if the form can be submitted
  checkForm() {
    const name = document.getElementById("name");
    let btnApplyChanges = document.getElementById("btnApplyChanges");
@ -109,8 +104,7 @@ let gContainersManager = {
        iconSwatch.setAttribute("selected", true);
      }

-      iconSwatch.setAttribute("label",
-        containersBundle.GetStringFromName(`containers.${icon}.label`));
+      document.l10n.setAttributes(iconSwatch, `containers-icon-${icon}`);
      let iconElement = document.createElement("hbox");
      iconElement.className = "userContext-icon";
      iconElement.setAttribute("data-identity-icon", icon);
@ -138,8 +132,7 @@ let gContainersManager = {
        colorSwatch.setAttribute("selected", true);
      }

-      colorSwatch.setAttribute("label",
-        containersBundle.GetStringFromName(`containers.${color}.label`));
+      document.l10n.setAttributes(colorSwatch, `containers-color-${color}`);
      let iconElement = document.createElement("hbox");
      iconElement.className = "userContext-icon";
      iconElement.setAttribute("data-identity-icon", "circle");
--- a/browser/components/preferences/containers.xul
+++ b/browser/components/preferences/containers.xul
@ -7,44 +7,47 @@
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/preferences/containers.css" type="text/css"?>

-<!DOCTYPE dialog SYSTEM "chrome://browser/locale/preferences/containers.dtd" >
-
 <window id="ContainersDialog" class="windowDialog"
        windowtype="Browser:Permissions"
-        title="&window.title;"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-        style="width: &window.width;;"
+        data-l10n-attrs="title, style"
        onload="gContainersManager.onLoad();"
        onunload="gContainersManager.uninit();"
        persist="screenX screenY width height"
        onkeypress="gContainersManager.onWindowKeyPress(event);">

+  <link rel="localization" href="browser/preferences/containers.ftl"/>
+  <script type="text/javascript" src="chrome://global/content/l10n.js"></script>
+
  <script src="chrome://global/content/treeUtils.js"/>
  <script src="chrome://browser/content/preferences/containers.js"/>

-  <stringbundle id="bundlePreferences"
-                src="chrome://browser/locale/preferences/preferences.properties"/>
-
  <keyset>
-    <key key="&windowClose.key;" modifiers="accel" oncommand="window.close();"/>
+    <key data-l10n-id="containers-window-close" modifiers="accel" oncommand="window.close();"/>
  </keyset>

  <vbox class="contentPane largeDialogContainer" flex="1" hidden="true" id="containers-content">
    <hbox align="start">
-      <label id="nameLabel" control="name" accesskey="&name2.accesskey;">&name2.label;</label>
-      <textbox id="name" placeholder="&name.placeholder;" flex="1" oninput="gContainersManager.checkForm();" />
+      <label id="nameLabel" control="name"
+             data-l10n-id="containers-name-label"
+             data-l10n-attrs="style"/>
+      <textbox id="name" data-l10n-id="containers-name-text" flex="1" oninput="gContainersManager.checkForm();" />
    </hbox>
    <hbox align="center" id="iconWrapper">
-      <label id="iconLabel" control="icon" accesskey="&icon2.accesskey;">&icon2.label;</label>
+      <label id="iconLabel" control="icon"
+             data-l10n-id="containers-icon-label"
+             data-l10n-attrs="style"/>
    </hbox>
    <hbox align="center" id="colorWrapper">
-      <label id="colorLabel" control="color" accesskey="&color2.accesskey;">&color2.label;</label>
+      <label id="colorLabel" control="color"
+             data-l10n-id="containers-color-label"
+             data-l10n-attrs="style"/>
    </hbox>
  </vbox>
  <vbox>
    <hbox class="actionButtons" align="right" flex="1">
      <button id="btnApplyChanges" disabled="true" oncommand="gContainersManager.onApplyChanges();" icon="save"
-              label="&button.ok.label;" accesskey="&button.ok.accesskey;"/>
+              data-l10n-id="containers-button-done"/>
    </hbox>
  </vbox>
 </window>
--- a/browser/components/preferences/handlers.xml
+++ b/browser/components/preferences/handlers.xml
@ -5,13 +5,6 @@
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <!-- import-globals-from in-content/main.js -->

-<!DOCTYPE overlay [
-  <!ENTITY % brandDTD SYSTEM "chrome://branding/locale/brand.dtd">
-  <!ENTITY % containersDTD SYSTEM "chrome://browser/locale/preferences/containers.dtd">
-  %brandDTD;
-  %containersDTD;
-]>
-
 <bindings id="handlerBindings"
          xmlns="http://www.mozilla.org/xbl"
          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
@ -71,16 +64,7 @@
          <xul:label flex="1" crop="end" xbl:inherits="xbl:text=containerName,highlightable"/>
        </xul:hbox>
        <xul:hbox flex="1" align="right">
-          <xul:button anonid="preferencesButton"
-                      label="&preferencesButton.label;"
-                      xbl:inherits="value=userContextId"
-                      oncommand="gContainersPane.onPreferenceCommand(event.originalTarget)">
-          </xul:button>
-          <xul:button anonid="removeButton"
-                      label="&removeButton.label;"
-                      xbl:inherits="value=userContextId"
-                      oncommand="gContainersPane.onRemoveCommand(event.originalTarget)">
-          </xul:button>
+          <children />
        </xul:hbox>
      </xul:hbox>
    </content>
--- a/browser/components/preferences/in-content/containers.js
+++ b/browser/components/preferences/in-content/containers.js
@ -7,8 +7,6 @@
 ChromeUtils.import("resource://gre/modules/AppConstants.jsm");
 ChromeUtils.import("resource://gre/modules/ContextualIdentityService.jsm");

-const containersBundle = Services.strings.createBundle("chrome://browser/locale/preferences/containers.properties");
-
 const defaultContainerIcon = "fingerprint";
 const defaultContainerColor = "blue";

@ -38,6 +36,18 @@ let gContainersPane = {
      item.setAttribute("containerColor", container.color);
      item.setAttribute("userContextId", container.userContextId);

+      let prefsButton = document.createElement("button");
+      prefsButton.setAttribute("oncommand", "gContainersPane.onPreferenceCommand(event.originalTarget)");
+      prefsButton.setAttribute("value", container.userContextId);
+      document.l10n.setAttributes(prefsButton, "containers-preferences-button");
+      item.appendChild(prefsButton);
+
+      let removeButton = document.createElement("button");
+      removeButton.setAttribute("oncommand", "gContainersPane.onRemoveCommand(event.originalTarget)");
+      removeButton.setAttribute("value", container.userContextId);
+      document.l10n.setAttributes(removeButton, "containers-remove-button");
+      item.appendChild(removeButton);
+
      this._list.appendChild(item);
    }
  },
@ -47,13 +57,12 @@ let gContainersPane = {

    let count = ContextualIdentityService.countContainerTabs(userContextId);
    if (count > 0) {
-      let bundlePreferences = document.getElementById("bundlePreferences");
-
-      let title = bundlePreferences.getString("removeContainerAlertTitle");
-      let message = PluralForm.get(count, bundlePreferences.getString("removeContainerMsg"))
-                              .replace("#S", count);
-      let okButton = bundlePreferences.getString("removeContainerOkButton");
-      let cancelButton = bundlePreferences.getString("removeContainerButton2");
+      let [title, message, okButton, cancelButton] = await document.l10n.formatValues([
+        ["containers-remove-alert-title"],
+        ["containers-remove-alert-msg", { count }],
+        ["containers-remove-ok-button"],
+        ["containers-remove-cancel-button"]
+      ]);

      let buttonFlags = (Ci.nsIPrompt.BUTTON_TITLE_IS_STRING * Ci.nsIPrompt.BUTTON_POS_0) +
                        (Ci.nsIPrompt.BUTTON_TITLE_IS_STRING * Ci.nsIPrompt.BUTTON_POS_1);
@ -85,15 +94,12 @@ let gContainersPane = {
      icon: defaultContainerIcon,
      color: defaultContainerColor
    };
-    let title;
    if (userContextId) {
      identity = ContextualIdentityService.getPublicIdentityFromId(userContextId);
-      // This is required to get the translation string from defaults
      identity.name = ContextualIdentityService.getUserContextLabel(identity.userContextId);
-      title = containersBundle.formatStringFromName("containers.updateContainerTitle", [identity.name], 1);
    }

-    const params = { userContextId, identity, windowTitle: title };
+    const params = { userContextId, identity };
    gSubDialog.open("chrome://browser/content/preferences/containers.xul",
                     null, params);
  }
--- a/browser/components/preferences/in-content/containers.xul
+++ b/browser/components/preferences/in-content/containers.xul
@ -10,14 +10,14 @@
 <hbox hidden="true"
      class="container-header-links"
      data-category="paneContainers">
-  <label class="text-link" id="backContainersLink">&backLink2.label;</label>
+  <label class="text-link" id="backContainersLink" data-l10n-id="containers-back-link"/>
 </hbox>

 <hbox id="header-containers"
      class="header"
      hidden="true"
      data-category="paneContainers">
-  <label class="header-name" flex="1">&paneContainers.title;</label>
+  <label class="header-name" flex="1" data-l10n-id="containers-header"/>
 </hbox>

 <!-- Containers -->
@ -31,7 +31,7 @@
  </vbox>
  <vbox>
    <hbox flex="1">
-      <button id="containersAdd" oncommand="gContainersPane.onAddButtonCommand();" accesskey="&addButton.accesskey;" label="&addButton.label;"/>
+      <button id="containersAdd" oncommand="gContainersPane.onAddButtonCommand();" data-l10n-id="containers-add-button"/>
    </hbox>
  </vbox>
 </groupbox>
--- a/browser/components/preferences/in-content/main.xul
+++ b/browser/components/preferences/in-content/main.xul
@ -130,9 +130,10 @@
          <button id="browserContainersSettings"
                  class="accessory-button"
                  data-l10n-id="browser-containers-settings"
-                  searchkeywords="&addButton.label;
-                                  &preferencesButton.label;
-                                  &removeButton.label;"/>
+                  search-l10n-ids="containers-add-button.label,
+                    containers-preferences-button.label,
+                    containers-remove-button.label"
+                  />
        </hbox>
      </hbox>
    </vbox>
--- a/browser/components/preferences/in-content/preferences.xul
+++ b/browser/components/preferences/in-content/preferences.xul
@ -41,8 +41,6 @@
 <!ENTITY % syncDTD SYSTEM "chrome://browser/locale/preferences/sync.dtd">
 <!ENTITY % securityDTD SYSTEM
  "chrome://browser/locale/preferences/security.dtd">
-<!ENTITY % containersDTD SYSTEM
-  "chrome://browser/locale/preferences/containers.dtd">
 <!ENTITY % sanitizeDTD SYSTEM "chrome://browser/locale/sanitize.dtd">
 <!ENTITY % mainDTD SYSTEM "chrome://browser/locale/preferences/main.dtd">
 <!ENTITY % aboutHomeDTD SYSTEM "chrome://browser/locale/aboutHome.dtd">
@ -70,7 +68,6 @@
 %syncBrandDTD;
 %syncDTD;
 %securityDTD;
-%containersDTD;
 %sanitizeDTD;
 %mainDTD;
 %aboutHomeDTD;
--- a/browser/components/preferences/in-content/sync.xul
+++ b/browser/components/preferences/in-content/sync.xul
@ -108,7 +108,7 @@
                </hbox>
                <hbox class="fxaAccountBoxButtons">
                  <button id="verifyFxaAccount" label="&resendVerification.label;" accesskey="&resendVerification.accesskey;"></button>
-                  <button id="unverifiedUnlinkFxaAccount" label="&cancelSetup.label;" accesskey="&cancelSetup.accesskey;"></button>
+                  <button id="unverifiedUnlinkFxaAccount" label="&removeAccount.label;" accesskey="&removeAccount.accesskey;"></button>
                </hbox>
              </vbox>
            </hbox>
@ -129,7 +129,7 @@
                </hbox>
                <hbox class="fxaAccountBoxButtons">
                  <button id="rejectReSignIn" label="&signIn.label;" accesskey="&signIn.accesskey;"></button>
-                  <button id="rejectUnlinkFxaAccount" label="&cancelSetup.label;" accesskey="&cancelSetup.accesskey;"></button>
+                  <button id="rejectUnlinkFxaAccount" label="&removeAccount.label;" accesskey="&removeAccount.accesskey;"></button>
                </hbox>
              </vbox>
            </hbox>
--- a/browser/components/preferences/in-content/tests/browser_search_within_preferences_2.js
+++ b/browser/components/preferences/in-content/tests/browser_search_within_preferences_2.js
@ -12,8 +12,8 @@ add_task(async function() {

 /**
 * Test that we only search the selected child of a XUL deck.
- * When we search "Cancel Setup",
- * it should not show the "Cancel Setup" button if the Firefox account is not logged in yet.
+ * When we search "Remove Account",
+ * it should not show the "Remove Account" button if the Firefox account is not logged in yet.
 */
 add_task(async function() {
  await openPreferencesViaOpenPreferencesAPI("paneGeneral", {leaveOpen: true});
@ -48,13 +48,13 @@ add_task(async function() {
    }
  }

-  // Ensure the "Cancel Setup" button exists in the hidden child of the <xul:deck>.
+  // Ensure the "Remove Account" button exists in the hidden child of the <xul:deck>.
  let unlinkFxaAccount = weavePrefsDeck.childNodes[1].querySelector("#unverifiedUnlinkFxaAccount");
-  is(unlinkFxaAccount.label, "Cancel Setup", "The Cancel Setup button should exist");
+  is(unlinkFxaAccount.label, "Remove Account", "The Remove Account button should exist");

  // Performs search.
  searchInput.focus();
-  query = "Cancel Setup";
+  query = "Remove Account";
  searchCompletedPromise = BrowserTestUtils.waitForEvent(
      gBrowser.contentWindow, "PreferencesSearchCompleted", evt => evt.detail == query);
  EventUtils.sendString(query);
--- a/browser/locales/en-US/browser/preferences/containers.ftl
+++ b/browser/locales/en-US/browser/preferences/containers.ftl
@ -0,0 +1,102 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+containers-window-new =
+    .title = Add New Container
+    .style = width: 45em
+# Variables
+#   $name (String) - Name of the container
+containers-window-update =
+    .title = { $name } Container Preferences
+    .style = width: 45em
+
+containers-window-close =
+    .key = w
+
+# This is a term to store style to be applied
+# on the three labels in the containers add/edit dialog:
+#   - name
+#   - icon
+#   - color
+#
+# Using this term and referencing it in the `.style` attribute
+# of the three messages ensures that all three labels
+# will be aligned correctly.
+-containers-labels-style = min-width: 4rem
+
+containers-name-label = Name
+    .accesskey = N
+    .style = { -containers-labels-style }
+
+containers-name-text =
+    .placeholder = Enter a container name
+
+containers-icon-label = Icon
+    .accesskey = I
+    .style = { -containers-labels-style }
+
+containers-color-label = Color
+    .accesskey = o
+    .style = { -containers-labels-style }
+
+containers-button-done =
+    .label = Done
+    .accesskey = D
+
+containers-remove-alert-title = Remove This Container?
+
+# Variables:
+#   $count (Number) - Number of tabs that will be closed.
+containers-remove-alert-msg =
+    { $count ->
+       *[one] If you remove this Container now, { $count } container tab will be closed. Are you sure you want to remove this Container?
+        [other] If you remove this Container now, { $count } container tabs will be closed. Are you sure you want to remove this Container?
+    }
+
+containers-remove-ok-button = Remove this Container
+containers-remove-cancel-button = Don’t remove this Container
+
+containers-color-blue =
+    .label = Blue
+containers-color-turquoise =
+    .label = Turquoise
+containers-color-green =
+    .label = Green
+containers-color-yellow =
+    .label = Yellow
+containers-color-orange =
+    .label = Orange
+containers-color-red =
+    .label = Red
+containers-color-pink =
+    .label = Pink
+containers-color-purple =
+    .label = Purple
+
+containers-icon-fingerprint =
+    .label = Fingerprint
+containers-icon-briefcase =
+    .label = Briefcase
+# String represents a money sign but currently uses a dollar sign
+# so don't change to local currency. See Bug 1291672.
+containers-icon-dollar =
+    .label = Dollar sign
+containers-icon-cart =
+    .label = Shopping cart
+containers-icon-circle =
+    .label = Dot
+containers-icon-vacation =
+    .label = Vacation
+containers-icon-gift =
+    .label = Gift
+containers-icon-food =
+    .label = Food
+containers-icon-fruit =
+    .label = Fruit
+containers-icon-pet =
+    .label = Pet
+containers-icon-tree =
+    .label = Tree
+containers-icon-chill =
+    .label = Chill
--- a/browser/locales/en-US/browser/preferences/preferences.ftl
+++ b/browser/locales/en-US/browser/preferences/preferences.ftl
@ -462,3 +462,16 @@ search-keyword-warning-title = Duplicate Keyword
 #   $name (String) - Name of a search engine.
 search-keyword-warning-engine = You have chosen a keyword that is currently in use by “{ $name }”. Please select another.
 search-keyword-warning-bookmark = You have chosen a keyword that is currently in use by a bookmark. Please select another.
+
+## Containers Section
+
+containers-back-link = « Go Back
+containers-header = Container Tabs
+containers-add-button =
+    .label = Add New Container
+    .accesskey = A
+
+containers-preferences-button =
+    .label = Preferences
+containers-remove-button =
+    .label = Remove
--- a/browser/locales/en-US/chrome/browser/preferences/containers.dtd
+++ b/browser/locales/en-US/chrome/browser/preferences/containers.dtd
@ -1,25 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-
-<!ENTITY addButton.label      "Add New Container">
-<!ENTITY addButton.accesskey  "A">
-<!ENTITY preferencesButton.label "Preferences">
-<!ENTITY removeButton.label   "Remove">
-<!-- &#171; is &laquo; however it's not defined in XML -->
-<!ENTITY backLink2.label      "&#171; Go Back">
-
-<!ENTITY window.title         "Add New Container">
-<!ENTITY window.width         "45em">
-
-<!ENTITY name2.label          "Name">
-<!ENTITY name2.accesskey      "N">
-<!ENTITY name.placeholder     "Enter a container name">
-<!ENTITY icon2.label          "Icon">
-<!ENTITY icon2.accesskey      "I">
-<!ENTITY color2.label         "Color">
-<!ENTITY color2.accesskey     "o">
-<!ENTITY windowClose.key      "w">
-
-<!ENTITY button.ok.label      "Done">
-<!ENTITY button.ok.accesskey  "D">
--- a/browser/locales/en-US/chrome/browser/preferences/containers.properties
+++ b/browser/locales/en-US/chrome/browser/preferences/containers.properties
@ -1,31 +0,0 @@
-# This Source Code Form is subject to the terms of the Mozilla Public
-# License, v. 2.0. If a copy of the MPL was not distributed with this
-# file, You can obtain one at http://mozilla.org/MPL/2.0/.
-
-containers.labelMinWidth = 4rem
-containers.updateContainerTitle = %S Container Preferences
-
-containers.blue.label = Blue
-containers.turquoise.label = Turquoise
-containers.green.label = Green
-containers.yellow.label = Yellow
-containers.orange.label = Orange
-containers.red.label = Red
-containers.pink.label = Pink
-containers.purple.label = Purple
-
-containers.fingerprint.label = Fingerprint
-containers.briefcase.label = Briefcase
-# LOCALIZATION NOTE (containers.dollar.label)
-# String represents a money sign but currently uses a dollar sign so don't change to local currency
-# See Bug 1291672
-containers.dollar.label = Dollar sign
-containers.cart.label = Shopping cart
-containers.circle.label = Dot
-containers.vacation.label = Vacation
-containers.gift.label = Gift
-containers.food.label = Food
-containers.fruit.label = Fruit
-containers.pet.label = Pet
-containers.tree.label = Tree
-containers.chill.label = Chill
--- a/browser/locales/en-US/chrome/browser/preferences/preferences.dtd
+++ b/browser/locales/en-US/chrome/browser/preferences/preferences.dtd
@ -2,8 +2,6 @@
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

-<!ENTITY  paneContainers.title          "Container Tabs">
-
 <!ENTITY  browserPrivacy.label          "Browser Privacy">

 <!-- LOCALIZATION NOTE (paneSync1.title): This should match syncBrand.fxAccount.label in ../syncBrand.dtd -->
--- a/browser/locales/en-US/chrome/browser/preferences/preferences.properties
+++ b/browser/locales/en-US/chrome/browser/preferences/preferences.properties
@ -207,16 +207,6 @@ spaceAlert.under5GB.okButton.accesskey=K
 # LOCALIZATION NOTE (spaceAlert.under5GB.message): %S = brandShortName
 spaceAlert.under5GB.message=%S is running out of disk space. Website contents may not display properly. Visit “Learn More” to optimize your disk usage for better browsing experience.

-removeContainerAlertTitle=Remove This Container?
-
-# LOCALIZATION NOTE (removeContainerMsg): Semi-colon list of plural forms.
-# See: http://developer.mozilla.org/en/docs/Localization_and_Plurals
-# #S is the number of container tabs
-removeContainerMsg=If you remove this Container now, #S container tab will be closed. Are you sure you want to remove this Container?;If you remove this Container now, #S container tabs will be closed. Are you sure you want to remove this Container?
-
-removeContainerOkButton=Remove this Container
-removeContainerButton2=Don’t remove this Container
-
 # LOCALIZATION NOTE (extensionControlled.homepage_override):
 # This string is shown to notify the user that their home page is being controlled by an extension.
 extensionControlled.homepage_override2 = An extension, %S, is controlling your home page.
--- a/browser/locales/en-US/chrome/browser/preferences/sync.dtd
+++ b/browser/locales/en-US/chrome/browser/preferences/sync.dtd
@ -72,8 +72,8 @@ both, to better adapt this sentence to their language.
 <!ENTITY disconnect3.accesskey        "D">
 <!ENTITY resendVerification.label     "Resend Verification">
 <!ENTITY resendVerification.accesskey "d">
-<!ENTITY cancelSetup.label            "Cancel Setup">
-<!ENTITY cancelSetup.accesskey        "p">
+<!ENTITY removeAccount.label          "Remove Account">
+<!ENTITY removeAccount.accesskey      "p">

 <!ENTITY signedOut.caption            "Take Your Web With You">
 <!ENTITY signedOut.description        "Synchronize your bookmarks, history, tabs, passwords, add-ons, and preferences across all your devices.">
--- a/browser/locales/jar.mn
+++ b/browser/locales/jar.mn
@ -65,8 +65,6 @@
    locale/browser/preferences/clearSiteData.properties     (%chrome/browser/preferences/clearSiteData.properties)
    locale/browser/preferences/colors.dtd             (%chrome/browser/preferences/colors.dtd)
    locale/browser/preferences/connection.dtd         (%chrome/browser/preferences/connection.dtd)
-    locale/browser/preferences/containers.dtd         (%chrome/browser/preferences/containers.dtd)
-    locale/browser/preferences/containers.properties     (%chrome/browser/preferences/containers.properties)
    locale/browser/preferences/content.dtd            (%chrome/browser/preferences/content.dtd)
    locale/browser/preferences/cookies.dtd            (%chrome/browser/preferences/cookies.dtd)
    locale/browser/preferences/fonts.dtd              (%chrome/browser/preferences/fonts.dtd)
--- a/browser/locales/l10n.toml
+++ b/browser/locales/l10n.toml
@ -148,6 +148,11 @@ locales = [
    reference = "devtools/startup/locales/en-US/**"
    l10n = "{l}devtools/startup/**"

+# for Firefox 60 and older and cross-channel
+[[paths]]
+    reference = "devtools/shim/locales/en-US/**"
+    l10n = "{l}devtools/shim/**"
+
 # Filters
 # The filters below are evaluated one after the other, in the given order.
 # Enter a combination of path as in the localization, key, and an action,
--- a/devtools/.eslintrc.js
+++ b/devtools/.eslintrc.js
@ -12,6 +12,22 @@ module.exports = {
    "reportError": true,
    "require": true,
  },
+  "overrides": [{
+    // XXX Bug 1230193. We're still working on enabling no-undef for these test
+    // directories.
+    "files": [
+      "client/memory/test/**",
+      "server/tests/browser/**",
+      "server/tests/mochitest/**",
+      "server/tests/unit/**",
+      "shared/heapsnapshot/tests/unit/**",
+      "shared/tests/unit/**",
+      "shared/webconsole/test/**",
+    ],
+    "rules": {
+      "no-undef": "off",
+    }
+  }],
  "rules": {
    // These are the rules that have been configured so far to match the
    // devtools coding style.
--- a/devtools/.eslintrc.mochitests.js
+++ b/devtools/.eslintrc.mochitests.js
@ -20,6 +20,8 @@ module.exports = {
  },

  "rules": {
+    // Allow non-camelcase so that run_test doesn't produce a warning.
+    "camelcase": "off",
    // Tests can always import anything.
    "mozilla/reject-some-requires": 0,
  },
--- a/devtools/.eslintrc.xpcshell.js
+++ b/devtools/.eslintrc.xpcshell.js
@ -6,12 +6,6 @@ module.exports = {
  "rules": {
    // Allow non-camelcase so that run_test doesn't produce a warning.
    "camelcase": "off",
-    // Allow using undefined variables so that tests can refer to functions
-    // and variables defined in head.js files, without having to maintain a
-    // list of globals in each .eslintrc file.
-    // Note that bug 1168340 will eventually help auto-registering globals
-    // from head.js files.
-    "no-undef": "off",
    "block-scoped-var": "off",
    // Tests can always import anything.
    "mozilla/reject-some-requires": "off",
--- a/devtools/client/animationinspector/animation-controller.js
+++ b/devtools/client/animationinspector/animation-controller.js
@ -13,7 +13,6 @@
 "use strict";

 var { loader, require } = ChromeUtils.import("resource://devtools/shared/Loader.jsm", {});
-var { Task } = require("devtools/shared/task");

 loader.lazyRequireGetter(this, "promise");
 loader.lazyRequireGetter(this, "EventEmitter", "devtools/shared/event-emitter");
@ -30,7 +29,7 @@ var gToolbox, gInspector;
 * Startup the animationinspector controller and view, called by the sidebar
 * widget when loading/unloading the iframe into the tab.
 */
-var startup = Task.async(function* (inspector) {
+var startup = async function(inspector) {
  gInspector = inspector;
  gToolbox = inspector.toolbox;

@ -43,22 +42,22 @@ var startup = Task.async(function* (inspector) {
  // Startup first initalizes the controller and then the panel, in sequence.
  // If you want to know when everything's ready, do:
  // AnimationsPanel.once(AnimationsPanel.PANEL_INITIALIZED)
-  yield AnimationsController.initialize();
-  yield AnimationsPanel.initialize();
-});
+  await AnimationsController.initialize();
+  await AnimationsPanel.initialize();
+};

 /**
 * Shutdown the animationinspector controller and view, called by the sidebar
 * widget when loading/unloading the iframe into the tab.
 */
-var shutdown = Task.async(function* () {
-  yield AnimationsController.destroy();
+var shutdown = async function() {
+  await AnimationsController.destroy();
  // Don't assume that AnimationsPanel is defined here, it's in another file.
  if (typeof AnimationsPanel !== "undefined") {
-    yield AnimationsPanel.destroy();
+    await AnimationsPanel.destroy();
  }
  gToolbox = gInspector = null;
-});
+};

 // This is what makes the sidebar widget able to load/unload the panel.
 function setPanel(panel) {
@ -74,7 +73,7 @@ function destroy() {
 * @param {Target} target The current toolbox target.
 * @return {Object} An object with boolean properties.
 */
-var getServerTraits = Task.async(function* (target) {
+var getServerTraits = async function(target) {
  let config = [
    { name: "hasToggleAll", actor: "animations",
      method: "toggleAll" },
@ -104,11 +103,11 @@ var getServerTraits = Task.async(function* (target) {

  let traits = {};
  for (let {name, actor, method} of config) {
-    traits[name] = yield target.actorHasMethod(actor, method);
+    traits[name] = await target.actorHasMethod(actor, method);
  }

  return traits;
-});
+};

 /**
 * The animationinspector controller's job is to retrieve AnimationPlayerFronts
@ -132,9 +131,9 @@ var AnimationsController = {
  PLAYERS_UPDATED_EVENT: "players-updated",
  ALL_ANIMATIONS_TOGGLED_EVENT: "all-animations-toggled",

-  initialize: Task.async(function* () {
+  async initialize() {
    if (this.initialized) {
-      yield this.initialized;
+      await this.initialized;
      return;
    }

@ -151,7 +150,7 @@ var AnimationsController = {
    this.animationsFront = new AnimationsFront(target.client, target.form);

    // Expose actor capabilities.
-    this.traits = yield getServerTraits(target);
+    this.traits = await getServerTraits(target);

    if (this.destroyed) {
      console.warn("Could not fully initialize the AnimationsController");
@ -161,22 +160,22 @@ var AnimationsController = {
    // Let the AnimationsActor know what WalkerActor we're using. This will
    // come in handy later to return references to DOM Nodes.
    if (this.traits.hasSetWalkerActor) {
-      yield this.animationsFront.setWalkerActor(gInspector.walker);
+      await this.animationsFront.setWalkerActor(gInspector.walker);
    }

    this.startListeners();
-    yield this.onNewNodeFront();
+    await this.onNewNodeFront();

    resolver();
-  }),
+  },

-  destroy: Task.async(function* () {
+  async destroy() {
    if (!this.initialized) {
      return;
    }

    if (this.destroyed) {
-      yield this.destroyed;
+      await this.destroyed;
      return;
    }

@ -194,7 +193,7 @@ var AnimationsController = {
      this.animationsFront = null;
    }
    resolver();
-  }),
+  },

  startListeners: function() {
    // Re-create the list of players when a new node is selected, except if the
@ -219,13 +218,13 @@ var AnimationsController = {
           gInspector.sidebar.getCurrentTabID() == "animationinspector";
  },

-  onPanelVisibilityChange: Task.async(function* () {
+  async onPanelVisibilityChange() {
    if (this.isPanelVisible()) {
      this.onNewNodeFront();
    }
-  }),
+  },

-  onNewNodeFront: Task.async(function* () {
+  async onNewNodeFront() {
    // Ignore if the panel isn't visible.
    // Or the node selection hasn't changed and no animation mutations event occurs during
    // hidden.
@ -247,11 +246,11 @@ var AnimationsController = {
      return;
    }

-    yield this.refreshAnimationPlayers(this.nodeFront);
+    await this.refreshAnimationPlayers(this.nodeFront);
    this.emit(this.PLAYERS_UPDATED_EVENT, this.animationPlayers);

    done();
-  }),
+  },

  /**
   * Toggle (pause/play) all animations in the current target.
@ -273,22 +272,22 @@ var AnimationsController = {
   * if they should be played.
   * @return {Promise} Resolves when the playState has been changed.
   */
-  toggleCurrentAnimations: Task.async(function* (shouldPause) {
+  async toggleCurrentAnimations(shouldPause) {
    if (this.traits.hasToggleSeveral) {
-      yield this.animationsFront.toggleSeveral(this.animationPlayers,
+      await this.animationsFront.toggleSeveral(this.animationPlayers,
                                               shouldPause);
    } else {
      // Fall back to pausing/playing the players one by one, which is bound to
      // introduce some de-synchronization.
      for (let player of this.animationPlayers) {
        if (shouldPause) {
-          yield player.pause();
+          await player.pause();
        } else {
-          yield player.play();
+          await player.play();
        }
      }
    }
-  }),
+  },

  /**
   * Set all known animations' currentTimes to the provided time.
@ -296,38 +295,38 @@ var AnimationsController = {
   * @param {Boolean} shouldPause Should the animations be paused too.
   * @return {Promise} Resolves when the current time has been set.
   */
-  setCurrentTimeAll: Task.async(function* (time, shouldPause) {
+  async setCurrentTimeAll(time, shouldPause) {
    if (this.traits.hasSetCurrentTimes) {
-      yield this.animationsFront.setCurrentTimes(this.animationPlayers, time,
+      await this.animationsFront.setCurrentTimes(this.animationPlayers, time,
                                                 shouldPause);
    } else {
      // Fall back to pausing and setting the current time on each player, one
      // by one, which is bound to introduce some de-synchronization.
      for (let animation of this.animationPlayers) {
        if (shouldPause) {
-          yield animation.pause();
+          await animation.pause();
        }
-        yield animation.setCurrentTime(time);
+        await animation.setCurrentTime(time);
      }
    }
-  }),
+  },

  /**
   * Set all known animations' playback rates to the provided rate.
   * @param {Number} rate.
   * @return {Promise} Resolves when the rate has been set.
   */
-  setPlaybackRateAll: Task.async(function* (rate) {
+  async setPlaybackRateAll(rate) {
    if (this.traits.hasSetPlaybackRates) {
      // If the backend can set all playback rates at the same time, use that.
-      yield this.animationsFront.setPlaybackRates(this.animationPlayers, rate);
+      await this.animationsFront.setPlaybackRates(this.animationPlayers, rate);
    } else if (this.traits.hasSetPlaybackRate) {
      // Otherwise, fall back to setting each rate individually.
      for (let animation of this.animationPlayers) {
-        yield animation.setPlaybackRate(rate);
+        await animation.setPlaybackRate(rate);
      }
    }
-  }),
+  },

  // AnimationPlayerFront objects are managed by this controller. They are
  // retrieved when refreshAnimationPlayers is called, stored in the
@ -335,10 +334,10 @@ var AnimationsController = {
  // called again.
  animationPlayers: [],

-  refreshAnimationPlayers: Task.async(function* (nodeFront) {
+  async refreshAnimationPlayers(nodeFront) {
    this.destroyAnimationPlayers();

-    this.animationPlayers = yield this.animationsFront
+    this.animationPlayers = await this.animationsFront
                                      .getAnimationPlayersForNode(nodeFront);

    // Start listening for animation mutations only after the first method call
@ -347,7 +346,7 @@ var AnimationsController = {
      this.animationsFront.on("mutations", this.onAnimationMutations);
      this.isListeningToMutations = true;
    }
-  }),
+  },

  onAnimationMutations: function(changes) {
    // Insert new players into this.animationPlayers when new animations are
--- a/devtools/client/animationinspector/animation-panel.js
+++ b/devtools/client/animationinspector/animation-panel.js
@ -23,14 +23,14 @@ var AnimationsPanel = {
  UI_UPDATED_EVENT: "ui-updated",
  PANEL_INITIALIZED: "panel-initialized",

-  initialize: Task.async(function* () {
+  async initialize() {
    if (AnimationsController.destroyed) {
      console.warn("Could not initialize the animation-panel, controller " +
                   "was destroyed");
      return;
    }
    if (this.initialized) {
-      yield this.initialized;
+      await this.initialized;
      return;
    }

@ -81,19 +81,19 @@ var AnimationsPanel = {

    this.startListeners();

-    yield this.refreshAnimationsUI();
+    await this.refreshAnimationsUI();

    resolver();
    this.emit(this.PANEL_INITIALIZED);
-  }),
+  },

-  destroy: Task.async(function* () {
+  async destroy() {
    if (!this.initialized) {
      return;
    }

    if (this.destroyed) {
-      yield this.destroyed;
+      await this.destroyed;
      return;
    }

@ -118,7 +118,7 @@ var AnimationsPanel = {
    this.timelineCurrentTimeEl = this.rateSelectorEl = null;

    resolver();
-  }),
+  },

  startListeners: function() {
    AnimationsController.on(AnimationsController.PLAYERS_UPDATED_EVENT,
@ -215,10 +215,10 @@ var AnimationsPanel = {
   * Toggle (pause/play) all animations in the current target
   * and update the UI the toggleAll button.
   */
-  toggleAll: Task.async(function* () {
+  async toggleAll() {
    this.toggleAllButtonEl.classList.toggle("paused");
-    yield AnimationsController.toggleAll();
-  }),
+    await AnimationsController.toggleAll();
+  },

  onTimelinePlayClicked: function() {
    this.playPauseTimeline().catch(console.error);
@ -308,18 +308,18 @@ var AnimationsPanel = {
   * useful after the playState or currentTime has been changed and in case the
   * animations aren't auto-refreshing), and then refresh the UI.
   */
-  refreshAnimationsStateAndUI: Task.async(function* () {
+  async refreshAnimationsStateAndUI() {
    for (let player of AnimationsController.animationPlayers) {
-      yield player.refreshState();
+      await player.refreshState();
    }
-    yield this.refreshAnimationsUI();
-  }),
+    await this.refreshAnimationsUI();
+  },

  /**
   * Refresh the list of animations UI. This will empty the panel and re-render
   * the various components again.
   */
-  refreshAnimationsUI: Task.async(function* () {
+  async refreshAnimationsUI() {
    // Empty the whole panel first.
    this.togglePlayers(true);

@ -342,7 +342,7 @@ var AnimationsPanel = {
    }

    this.emit(this.UI_UPDATED_EVENT);
-  })
+  }
 };

 EventEmitter.decorate(AnimationsPanel);
--- a/devtools/client/animationinspector/components/animation-details.js
+++ b/devtools/client/animationinspector/components/animation-details.js
@ -6,7 +6,6 @@

 "use strict";

-const {Task} = require("devtools/shared/task");
 const {createNode, getCssPropertyName} =
  require("devtools/client/animationinspector/utils");
 const {Keyframes} = require("devtools/client/animationinspector/components/keyframes");
@ -89,9 +88,9 @@ AnimationDetails.prototype = {
   *                  e.g. { "background-color": "color", }
   *                         "opacity": "float", ... }
   */
-  getAnimationTypes: Task.async(function* (propertyNames) {
+  async getAnimationTypes(propertyNames) {
    if (this.serverTraits.hasGetAnimationTypes) {
-      return yield this.animation.getAnimationTypes(propertyNames);
+      return this.animation.getAnimationTypes(propertyNames);
    }
    // Set animation type 'none' since does not support getAnimationTypes.
    const animationTypes = {};
@ -99,9 +98,9 @@ AnimationDetails.prototype = {
      animationTypes[propertyName] = "none";
    });
    return Promise.resolve(animationTypes);
-  }),
+  },

-  render: Task.async(function* (animation, tracks) {
+  async render(animation, tracks) {
    this.unrender();

    if (!animation) {
@ -117,7 +116,7 @@ AnimationDetails.prototype = {
    }

    // Get animation type for each CSS properties.
-    const animationTypes = yield this.getAnimationTypes(Object.keys(this.tracks));
+    const animationTypes = await this.getAnimationTypes(Object.keys(this.tracks));

    // Render progress indicator.
    this.renderProgressIndicator();
@ -133,7 +132,7 @@ AnimationDetails.prototype = {
    });
    this.dummyAnimation =
      new this.win.Animation(new this.win.KeyframeEffect(null, null, timing), null);
-  }),
+  },

  renderAnimatedPropertiesHeader: function() {
    // Add animated property header.
--- a/devtools/client/animationinspector/components/animation-target-node.js
+++ b/devtools/client/animationinspector/components/animation-target-node.js
@ -6,7 +6,6 @@

 "use strict";

-const {Task} = require("devtools/shared/task");
 const EventEmitter = require("devtools/shared/event-emitter");
 const {DomNodePreview} = require("devtools/client/inspector/shared/dom-node-preview");

@ -40,7 +39,7 @@ AnimationTargetNode.prototype = {
    this.isDestroyed = true;
  },

-  render: Task.async(function* (playerFront) {
+  async render(playerFront) {
    // Get the nodeFront from the cache if it was stored previously.
    let nodeFront = nodeFronts.get(playerFront);

@ -52,7 +51,7 @@ AnimationTargetNode.prototype = {
    // Finally, get it from the walkerActor if it wasn't found.
    if (!nodeFront) {
      try {
-        nodeFront = yield this.inspector.walker.getNodeFromActor(
+        nodeFront = await this.inspector.walker.getNodeFromActor(
                               playerFront.actorID, ["node"]);
      } catch (e) {
        // If an error occured while getting the nodeFront and if it can't be
@ -76,5 +75,5 @@ AnimationTargetNode.prototype = {

    this.previewer.render(nodeFront);
    this.emit("target-retrieved");
-  })
+  }
 };
--- a/devtools/client/animationinspector/components/animation-timeline.js
+++ b/devtools/client/animationinspector/components/animation-timeline.js
@ -6,7 +6,6 @@

 "use strict";

-const { Task } = require("devtools/shared/task");
 const EventEmitter = require("devtools/shared/event-emitter");
 const {
  createNode,
@ -315,7 +314,7 @@ AnimationsTimeline.prototype = {
    }, TIMELINE_BACKGROUND_RESIZE_DEBOUNCE_TIMER);
  },

-  onAnimationSelected: Task.async(function* (animation) {
+  async onAnimationSelected(animation) {
    let index = this.animations.indexOf(animation);
    if (index === -1) {
      return;
@ -354,12 +353,12 @@ AnimationsTimeline.prototype = {
    // Don't render if the detail displays same animation already.
    if (animation !== this.details.animation) {
      this.selectedAnimation = animation;
-      yield this.details.render(animation, this.componentsMap[animation.actorID].tracks);
+      await this.details.render(animation, this.componentsMap[animation.actorID].tracks);
      this.animationAnimationNameEl.textContent = getFormattedAnimationTitle(animation);
    }
    this.onTimelineDataChanged({ time: this.currentTime || 0 });
    this.emit("animation-selected", animation);
-  }),
+  },

  /**
   * When move the scrubber to the corresponding position
@ -438,7 +437,7 @@ AnimationsTimeline.prototype = {
    return className;
  },

-  render: Task.async(function* (animations, documentCurrentTime) {
+  async render(animations, documentCurrentTime) {
    this.animations = animations;

    // Destroy components which are no longer existed in given animations.
@ -472,7 +471,7 @@ AnimationsTimeline.prototype = {
    for (let animation of this.animations) {
      animation.on("changed", this.onAnimationStateChanged);

-      const tracks = yield this.getTracks(animation);
+      const tracks = await this.getTracks(animation);
      // If we're destroyed by now, just give up.
      if (this.isDestroyed) {
        return;
@ -510,18 +509,18 @@ AnimationsTimeline.prototype = {
    if (this.animations.length === 1) {
      // Display animation's detail if there is only one animation,
      // even if the detail pane is closing.
-      yield this.onAnimationSelected(this.animations[0]);
+      await this.onAnimationSelected(this.animations[0]);
    } else if (this.animationRootEl.classList.contains("animation-detail-visible") &&
               this.animations.includes(this.selectedAnimation)) {
      // animation's detail displays in case of the previously displayed animation is
      // included in timeline list and the detail pane is not closing.
-      yield this.onAnimationSelected(this.selectedAnimation);
+      await this.onAnimationSelected(this.selectedAnimation);
    } else {
      // Otherwise, close detail pane.
      this.onDetailCloseButtonClick();
    }
    this.emit("animation-timeline-rendering-completed");
-  }),
+  },

  updateAnimation: function(animation, tracks, existentComponents) {
    // If keyframes (tracks) and effect timing (state) are not changed, we update the
@ -713,7 +712,7 @@ AnimationsTimeline.prototype = {
   * @return {Object} A list of tracks, one per animated property, each
   * with a list of keyframes
   */
-  getTracks: Task.async(function* (animation) {
+  async getTracks(animation) {
    let tracks = {};

    /*
@ -732,7 +731,7 @@ AnimationsTimeline.prototype = {
    if (this.serverTraits.hasGetProperties) {
      let properties = [];
      try {
-        properties = yield animation.getProperties();
+        properties = await animation.getProperties();
      } catch (e) {
        // Expected if we've already been destroyed in the meantime.
        if (!this.isDestroyed) {
@ -754,7 +753,7 @@ AnimationsTimeline.prototype = {
    } else {
      let frames = [];
      try {
-        frames = yield animation.getFrames();
+        frames = await animation.getFrames();
      } catch (e) {
        // Expected if we've already been destroyed in the meantime.
        if (!this.isDestroyed) {
@ -786,7 +785,7 @@ AnimationsTimeline.prototype = {
    }

    return tracks;
-  })
+  }
 };

 /**
--- a/devtools/client/animationinspector/test/browser_animation_animated_properties_displayed.js
+++ b/devtools/client/animationinspector/test/browser_animation_animated_properties_displayed.js
@ -31,9 +31,9 @@ const EXPECTED_PROPERTIES = [
  "background-size"
 ].sort();

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_keyframes.html");
-  let {panel} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_keyframes.html");
+  let {panel} = await openAnimationInspector();
  let timeline = panel.animationsTimelineComponent;
  let propertiesList = timeline.rootWrapperEl
                               .querySelector(".animated-properties");
@ -51,7 +51,7 @@ add_task(function* () {
     "The list of properties panel contains the right warnings");

  info("Click same animation again");
-  yield clickOnAnimation(panel, 0, true);
+  await clickOnAnimation(panel, 0, true);
  ok(isNodeVisible(propertiesList),
     "The list of properties panel keeps");
 });
--- a/devtools/client/animationinspector/test/browser_animation_animated_properties_for_delayed_starttime_animations.js
+++ b/devtools/client/animationinspector/test/browser_animation_animated_properties_for_delayed_starttime_animations.js
@ -8,13 +8,13 @@
 // We should check progress indicator working well even if the start time is not zero.
 // Also, check that there is no duplication display.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_delayed_starttime_animations.html");
-  const { panel } = yield openAnimationInspector();
-  yield setStyle(null, panel, "animation", "anim 100s", "#target2");
-  yield setStyle(null, panel, "animation", "anim 100s", "#target3");
-  yield setStyle(null, panel, "animation", "anim 100s", "#target4");
-  yield setStyle(null, panel, "animation", "anim 100s", "#target5");
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_delayed_starttime_animations.html");
+  const { panel } = await openAnimationInspector();
+  await setStyle(null, panel, "animation", "anim 100s", "#target2");
+  await setStyle(null, panel, "animation", "anim 100s", "#target3");
+  await setStyle(null, panel, "animation", "anim 100s", "#target4");
+  await setStyle(null, panel, "animation", "anim 100s", "#target5");

  const timelineComponent = panel.animationsTimelineComponent;
  const detailsComponent = timelineComponent.details;
@ -23,7 +23,7 @@ add_task(function* () {
  is(headers.length, 1, "There should be only one header in the details panel");

  // Check indicator.
-  yield clickOnAnimation(panel, 1);
+  await clickOnAnimation(panel, 1);
  const progressIndicatorEl = detailsComponent.progressIndicatorEl;
  const startTime = detailsComponent.animation.state.previousStartTime;
  detailsComponent.indicateProgress(0);
--- a/devtools/client/animationinspector/test/browser_animation_animated_properties_path.js
+++ b/devtools/client/animationinspector/test/browser_animation_animated_properties_path.js
@ -332,16 +332,16 @@ const TEST_CASES = [
  }
 ];

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_multiple_property_types.html");
-  const {panel} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_multiple_property_types.html");
+  const {panel} = await openAnimationInspector();
  const timelineComponent = panel.animationsTimelineComponent;
  const detailEl = timelineComponent.details.containerEl;
  const hasClosePath = true;

  for (let i = 0; i < TEST_CASES.length; i++) {
    info(`Click to select the animation[${ i }]`);
-    yield clickOnAnimation(panel, i);
+    await clickOnAnimation(panel, i);
    const timeBlock = getAnimationTimeBlocks(panel)[0];
    const state = timeBlock.animation.state;
    const properties = TEST_CASES[i];
--- a/devtools/client/animationinspector/test/browser_animation_animated_properties_progress_indicator.js
+++ b/devtools/client/animationinspector/test/browser_animation_animated_properties_progress_indicator.js
@ -8,29 +8,29 @@
 // Since this indicator works with the timeline, after selecting each animation,
 // click the timeline header to change the current time and check the change.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_multiple_property_types.html");
-  const { panel } = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_multiple_property_types.html");
+  const { panel } = await openAnimationInspector();
  const timelineComponent = panel.animationsTimelineComponent;
  const detailsComponent = timelineComponent.details;

  info("Click to select the animation");
-  yield clickOnAnimation(panel, 0);
+  await clickOnAnimation(panel, 0);
  let progressIndicatorEl = detailsComponent.progressIndicatorEl;
  ok(progressIndicatorEl, "The progress indicator should be exist");
-  yield clickOnTimelineHeader(panel, 0);
+  await clickOnTimelineHeader(panel, 0);
  is(progressIndicatorEl.style.left, "0%",
     "The left style of progress indicator element should be 0% at 0ms");
-  yield clickOnTimelineHeader(panel, 0.5);
+  await clickOnTimelineHeader(panel, 0.5);
  approximate(progressIndicatorEl.style.left, "50%",
              "The left style of progress indicator element should be "
              + "approximately 50% at 500ms");
-  yield clickOnTimelineHeader(panel, 1);
+  await clickOnTimelineHeader(panel, 1);
  is(progressIndicatorEl.style.left, "100%",
     "The left style of progress indicator element should be 100% at 1000ms");

  info("Click to select the steps animation");
-  yield clickOnAnimation(panel, 4);
+  await clickOnAnimation(panel, 4);
  // Re-get progressIndicatorEl since this element re-create
  // in case of select the animation.
  progressIndicatorEl = detailsComponent.progressIndicatorEl;
@ -49,15 +49,15 @@ add_task(function* () {
  detailsComponent.indicateProgress(999);
  is(progressIndicatorEl.style.left, "50%",
     "The left style of progress indicator element should be 50% at 999ms");
-  yield clickOnTimelineHeader(panel, 1);
+  await clickOnTimelineHeader(panel, 1);
  is(progressIndicatorEl.style.left, "100%",
     "The left style of progress indicator element should be 100% at 1000ms");

  info("Change the playback rate");
-  yield changeTimelinePlaybackRate(panel, 2);
-  yield clickOnAnimation(panel, 0);
+  await changeTimelinePlaybackRate(panel, 2);
+  await clickOnAnimation(panel, 0);
  progressIndicatorEl = detailsComponent.progressIndicatorEl;
-  yield clickOnTimelineHeader(panel, 0);
+  await clickOnTimelineHeader(panel, 0);
  is(progressIndicatorEl.style.left, "0%",
     "The left style of progress indicator element should be 0% "
     + "at 0ms and playback rate 2");
@ -71,10 +71,10 @@ add_task(function* () {
     + "at 500ms and playback rate 2");

  info("Check the progress indicator position after select another animation");
-  yield changeTimelinePlaybackRate(panel, 1);
-  yield clickOnTimelineHeader(panel, 0.5);
+  await changeTimelinePlaybackRate(panel, 1);
+  await clickOnTimelineHeader(panel, 0.5);
  const originalIndicatorPosition = progressIndicatorEl.style.left;
-  yield clickOnAnimation(panel, 1);
+  await clickOnAnimation(panel, 1);
  is(progressIndicatorEl.style.left, originalIndicatorPosition,
     "The animation time should be continued even if another animation selects");
 });
--- a/devtools/client/animationinspector/test/browser_animation_click_selects_animation.js
+++ b/devtools/client/animationinspector/test/browser_animation_click_selects_animation.js
@ -7,23 +7,23 @@
 // Check that animations displayed in the timeline can be selected by clicking
 // them, and that this emits the right events and adds the right classes.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
-  let {panel} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  let {panel} = await openAnimationInspector();
  let timeline = panel.animationsTimelineComponent;

  let selected = timeline.rootWrapperEl.querySelectorAll(".animation.selected");
  ok(!selected.length, "There are no animations selected by default");

  info("Click on the first animation, expect the right event and right class");
-  let animation0 = yield clickOnAnimation(panel, 0);
+  let animation0 = await clickOnAnimation(panel, 0);
  is(animation0, timeline.animations[0],
     "The selected event was emitted with the right animation");
  ok(isTimeBlockSelected(timeline, 0),
     "The time block has the right selected class");

  info("Click on the second animation, expect it to be selected too");
-  let animation1 = yield clickOnAnimation(panel, 1);
+  let animation1 = await clickOnAnimation(panel, 1);
  is(animation1, timeline.animations[1],
     "The selected event was emitted with the right animation");
  ok(isTimeBlockSelected(timeline, 1),
@ -32,7 +32,7 @@ add_task(function* () {
     "The first time block has been unselected");

  info("Click again on the first animation and check if it unselects");
-  yield clickOnAnimation(panel, 0);
+  await clickOnAnimation(panel, 0);
  ok(isTimeBlockSelected(timeline, 0),
     "The time block has the right selected class again");
  ok(!isTimeBlockSelected(timeline, 1),
--- a/devtools/client/animationinspector/test/browser_animation_controller_exposes_document_currentTime.js
+++ b/devtools/client/animationinspector/test/browser_animation_controller_exposes_document_currentTime.js
@ -7,15 +7,15 @@
 // Test that the controller provides the document.timeline currentTime (at least
 // the last known version since new animations were added).

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
-  let {panel, controller} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  let {panel, controller} = await openAnimationInspector();

  ok(controller.documentCurrentTime, "The documentCurrentTime getter exists");
  checkDocumentTimeIsCorrect(controller);
  let time1 = controller.documentCurrentTime;

-  yield startNewAnimation(controller, panel);
+  await startNewAnimation(controller, panel);
  checkDocumentTimeIsCorrect(controller);
  let time2 = controller.documentCurrentTime;
  ok(time2 > time1, "The new documentCurrentTime is higher than the old one");
@ -30,18 +30,18 @@ function checkDocumentTimeIsCorrect(controller) {
     "The documentCurrentTime is correct");
 }

-function* startNewAnimation(controller, panel) {
+async function startNewAnimation(controller, panel) {
  info("Add a new animation to the page and check the time again");
  let onPlayerAdded = controller.once(controller.PLAYERS_UPDATED_EVENT);
  let onRendered = waitForAnimationTimelineRendering(panel);

-  yield executeInContent("devtools:test:setAttribute", {
+  await executeInContent("devtools:test:setAttribute", {
    selector: ".still",
    attributeName: "class",
    attributeValue: "ball still short"
  });

-  yield onPlayerAdded;
-  yield onRendered;
-  yield waitForAllAnimationTargets(panel);
+  await onPlayerAdded;
+  await onRendered;
+  await waitForAllAnimationTargets(panel);
 }
--- a/devtools/client/animationinspector/test/browser_animation_detail_displayed.js
+++ b/devtools/client/animationinspector/test/browser_animation_detail_displayed.js
@ -16,9 +16,9 @@

 requestLongerTimeout(5);

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_multiple_property_types.html");
-  const { panel, inspector } = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_multiple_property_types.html");
+  const { panel, inspector } = await openAnimationInspector();
  const timelineComponent = panel.animationsTimelineComponent;
  const animationDetailEl =
    timelineComponent.rootWrapperEl.querySelector(".animation-detail");
@ -35,37 +35,37 @@ add_task(function* () {
     + "if multiple animations were displayed");

  // 3. Display after click on an animation.
-  yield clickOnAnimation(panel, 0);
+  await clickOnAnimation(panel, 0);
  isnot(win.getComputedStyle(splitboxControlledEl).display, "none",
        "The animation-detail element should be displayed after clicked on an animation");

  // 4. Display from first time if displayed animation is only one.
-  yield selectNodeAndWaitForAnimations("#target1", inspector);
+  await selectNodeAndWaitForAnimations("#target1", inspector);
  ok(animationDetailEl.querySelector(".property"),
     "The property in animation-detail element should be displayed");

  // 5. Close the animation-detail element by clicking on close button.
  const previousHeight = animationDetailEl.offsetHeight;
-  yield clickCloseButtonForDetailPanel(timelineComponent, animationDetailEl);
+  await clickCloseButtonForDetailPanel(timelineComponent, animationDetailEl);
  is(win.getComputedStyle(splitboxControlledEl).display, "none",
     "animation-detail element should not display");

  // Select another animation.
-  yield selectNodeAndWaitForAnimations("#target2", inspector);
+  await selectNodeAndWaitForAnimations("#target2", inspector);
  isnot(win.getComputedStyle(splitboxControlledEl).display, "none",
        "animation-detail element should display");
  is(animationDetailEl.offsetHeight, previousHeight,
     "The height of animation-detail should keep the height");

  // 6. Stay selected animation even if refresh all UI.
-  yield selectNodeAndWaitForAnimations("#target1", inspector);
-  yield clickTimelineRewindButton(panel);
+  await selectNodeAndWaitForAnimations("#target1", inspector);
+  await clickTimelineRewindButton(panel);
  ok(animationDetailEl.querySelector(".property"),
     "The property in animation-detail element should stay as is");

  // 7. Close the animation-detail element again and click selected animation again.
-  yield clickCloseButtonForDetailPanel(timelineComponent, animationDetailEl);
-  yield clickOnAnimation(panel, 0);
+  await clickCloseButtonForDetailPanel(timelineComponent, animationDetailEl);
+  await clickOnAnimation(panel, 0);
  isnot(win.getComputedStyle(splitboxControlledEl).display, "none",
     "animation-detail element should display again");
 });
@ -77,9 +77,9 @@ add_task(function* () {
 * @param {DOMNode} animation-detail element
 * @return {Promise} which wait for close the detail pane
 */
-function* clickCloseButtonForDetailPanel(timeline, element) {
+async function clickCloseButtonForDetailPanel(timeline, element) {
  const button = element.querySelector(".animation-detail-header button");
  const onclosed = timeline.once("animation-detail-closed");
  EventUtils.sendMouseEvent({type: "click"}, button, element.ownerDocument.defaultView);
-  return yield onclosed;
+  return onclosed;
 }
--- a/devtools/client/animationinspector/test/browser_animation_detail_easings.js
+++ b/devtools/client/animationinspector/test/browser_animation_detail_easings.js
@ -48,14 +48,14 @@ const TEST_CASES = {
  },
 };

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_multiple_easings.html");
-  const { panel } = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_multiple_easings.html");
+  const { panel } = await openAnimationInspector();

  const timelineComponent = panel.animationsTimelineComponent;
  const timeBlocks = getAnimationTimeBlocks(panel);
  for (let i = 0; i < timeBlocks.length; i++) {
-    yield clickOnAnimation(panel, i);
+    await clickOnAnimation(panel, i);

    const detailComponent = timelineComponent.details;
    const detailEl = detailComponent.containerEl;
--- a/devtools/client/animationinspector/test/browser_animation_empty_on_invalid_nodes.js
+++ b/devtools/client/animationinspector/test/browser_animation_empty_on_invalid_nodes.js
@ -7,14 +7,14 @@ requestLongerTimeout(2);

 // Test that the panel shows no animation data for invalid or not animated nodes

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
-  let {inspector, panel, window} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  let {inspector, panel, window} = await openAnimationInspector();
  let {document} = window;

  info("Select node .still and check that the panel is empty");
-  let stillNode = yield getNodeFront(".still", inspector);
-  yield selectNodeAndWaitForAnimations(stillNode, inspector);
+  let stillNode = await getNodeFront(".still", inspector);
+  await selectNodeAndWaitForAnimations(stillNode, inspector);

  is(panel.animationsTimelineComponent.animations.length, 0,
     "No animation players stored in the timeline component for a still node");
@ -25,8 +25,8 @@ add_task(function* () {
     "The correct error message is displayed");

  info("Select the comment text node and check that the panel is empty");
-  let commentNode = yield inspector.walker.previousSibling(stillNode);
-  yield selectNodeAndWaitForAnimations(commentNode, inspector);
+  let commentNode = await inspector.walker.previousSibling(stillNode);
+  await selectNodeAndWaitForAnimations(commentNode, inspector);

  is(panel.animationsTimelineComponent.animations.length, 0,
     "No animation players stored in the timeline component for a text node");
--- a/devtools/client/animationinspector/test/browser_animation_keyframe_markers.js
+++ b/devtools/client/animationinspector/test/browser_animation_keyframe_markers.js
@ -21,9 +21,9 @@ const EXPECTED_PROPERTIES = [
  "width"
 ];

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_keyframes.html");
-  let {panel} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_keyframes.html");
+  let {panel} = await openAnimationInspector();
  let timeline = panel.animationsTimelineComponent;

  // doc_keyframes.html has only one animation.
@ -32,7 +32,7 @@ add_task(function* () {
  ok(timeline.rootWrapperEl.querySelectorAll(".frames .keyframes").length,
     "There are container elements for displaying keyframes");

-  let data = yield getExpectedKeyframesData(timeline.animations[0]);
+  let data = await getExpectedKeyframesData(timeline.animations[0]);
  for (let propertyName in data) {
    info("Check the keyframe markers for " + propertyName);
    let widthMarkerSelector = ".frame[data-property=" + propertyName + "]";
@ -52,10 +52,10 @@ add_task(function* () {
  }
 });

-function* getExpectedKeyframesData(animation) {
+async function getExpectedKeyframesData(animation) {
  // We're testing the UI state here, so it's fine to get the list of expected
  // properties from the animation actor.
-  let properties = yield animation.getProperties();
+  let properties = await animation.getProperties();
  let data = {};

  for (let expectedProperty of EXPECTED_PROPERTIES) {
--- a/devtools/client/animationinspector/test/browser_animation_mutations_with_same_names.js
+++ b/devtools/client/animationinspector/test/browser_animation_mutations_with_same_names.js
@ -9,9 +9,9 @@
 // displayed (which should be true as long as these animations apply to
 // different nodes).

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_negative_animation.html");
-  const {controller, panel} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_negative_animation.html");
+  const {controller, panel} = await openAnimationInspector();
  const timeline = panel.animationsTimelineComponent;

  const areTracksReady = () => timeline.animations.every(a => {
@ -21,11 +21,11 @@ add_task(function* () {
  // We need to wait for all tracks to be ready, cause this is an async part of the init
  // of the panel.
  while (controller.animationPlayers.length < 3 || !areTracksReady()) {
-    yield waitForAnimationTimelineRendering(panel);
+    await waitForAnimationTimelineRendering(panel);
  }

  // Same for animation targets, they're retrieved asynchronously.
-  yield waitForAllAnimationTargets(panel);
+  await waitForAllAnimationTargets(panel);

  is(panel.animationsTimelineComponent.animations.length, 3,
     "The timeline shows 3 animations too");
--- a/devtools/client/animationinspector/test/browser_animation_panel_exists.js
+++ b/devtools/client/animationinspector/test/browser_animation_panel_exists.js
@ -6,9 +6,9 @@

 // Test that the animation panel sidebar exists

-add_task(function* () {
-  yield addTab("data:text/html;charset=utf-8,welcome to the animation panel");
-  let {panel, controller} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8,welcome to the animation panel");
+  let {panel, controller} = await openAnimationInspector();

  ok(controller,
     "The animation controller exists");
--- a/devtools/client/animationinspector/test/browser_animation_participate_in_inspector_update.js
+++ b/devtools/client/animationinspector/test/browser_animation_participate_in_inspector_update.js
@ -10,9 +10,9 @@ requestLongerTimeout(2);
 // inspector-updated event. This means that the test verifies that the
 // inspector-updated event is emitted *after* the animation panel is ready.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
-  let {inspector, panel, controller} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  let {inspector, panel, controller} = await openAnimationInspector();

  info("Listen for the players-updated, ui-updated and " +
       "inspector-updated events");
@ -28,8 +28,8 @@ add_task(function* () {
  });

  info("Selecting an animated node");
-  let node = yield getNodeFront(".animated", inspector);
-  yield selectNodeAndWaitForAnimations(node, inspector);
+  let node = await getNodeFront(".animated", inspector);
+  await selectNodeAndWaitForAnimations(node, inspector);

  info("Check that all events were received");
  // Only assert that the inspector-updated event is last, the order of the
--- a/devtools/client/animationinspector/test/browser_animation_playerFronts_are_refreshed.js
+++ b/devtools/client/animationinspector/test/browser_animation_playerFronts_are_refreshed.js
@ -9,27 +9,27 @@ requestLongerTimeout(2);
 // Check that the AnimationPlayerFront objects lifecycle is managed by the
 // AnimationController.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
-  let {controller, inspector} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  let {controller, inspector} = await openAnimationInspector();

  info("Selecting an animated node");
  // selectNode waits for the inspector-updated event before resolving, which
  // means the controller.PLAYERS_UPDATED_EVENT event has been emitted before
  // and players are ready.
-  yield selectNodeAndWaitForAnimations(".animated", inspector);
+  await selectNodeAndWaitForAnimations(".animated", inspector);

  is(controller.animationPlayers.length, 1,
    "One AnimationPlayerFront has been created");

  info("Selecting a node with mutliple animations");
-  yield selectNodeAndWaitForAnimations(".multi", inspector);
+  await selectNodeAndWaitForAnimations(".multi", inspector);

  is(controller.animationPlayers.length, 2,
    "2 AnimationPlayerFronts have been created");

  info("Selecting a node with no animations");
-  yield selectNodeAndWaitForAnimations(".still", inspector);
+  await selectNodeAndWaitForAnimations(".still", inspector);

  is(controller.animationPlayers.length, 0,
    "There are no more AnimationPlayerFront objects");
--- a/devtools/client/animationinspector/test/browser_animation_playerWidgets_appear_on_panel_init.js
+++ b/devtools/client/animationinspector/test/browser_animation_playerWidgets_appear_on_panel_init.js
@ -9,10 +9,10 @@

 const { ANIMATION_TYPES } = require("devtools/server/actors/animation");

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_multiple_animation_types.html");
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_multiple_animation_types.html");

-  let {panel} = yield openAnimationInspector();
+  let {panel} = await openAnimationInspector();
  is(panel.animationsTimelineComponent.animations.length, 3,
    "Three animations are handled by the timeline after init");
  assertAnimationsDisplayed(panel, 3,
--- a/devtools/client/animationinspector/test/browser_animation_playerWidgets_target_nodes.js
+++ b/devtools/client/animationinspector/test/browser_animation_playerWidgets_target_nodes.js
@ -8,12 +8,12 @@ requestLongerTimeout(2);

 // Test that player widgets display information about target nodes

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
-  let {inspector, panel} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  let {inspector, panel} = await openAnimationInspector();

  info("Select the simple animated node");
-  yield selectNodeAndWaitForAnimations(".animated", inspector);
+  await selectNodeAndWaitForAnimations(".animated", inspector);

  let targetNodeComponent = getAnimationTargetNodes(panel)[0];
  let {previewer} = targetNodeComponent;
@ -21,7 +21,7 @@ add_task(function* () {
  // Make sure to wait for the target-retrieved event if the nodeFront hasn't
  // yet been retrieved by the TargetNodeComponent.
  if (!previewer.nodeFront) {
-    yield targetNodeComponent.once("target-retrieved");
+    await targetNodeComponent.once("target-retrieved");
  }

  is(previewer.el.textContent, "div#.ball.animated",
--- a/devtools/client/animationinspector/test/browser_animation_pseudo_elements.js
+++ b/devtools/client/animationinspector/test/browser_animation_pseudo_elements.js
@ -6,9 +6,9 @@

 // Test that animated pseudo-elements do show in the timeline.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_pseudo_elements.html");
-  let {inspector, panel} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_pseudo_elements.html");
+  let {inspector, panel} = await openAnimationInspector();

  info("With <body> selected by default check the content of the timeline");
  is(getAnimationTimeBlocks(panel).length, 3, "There are 3 animations in the timeline");
@ -26,7 +26,7 @@ add_task(function* () {
  is(getTargetNodeText(2), "::after", "The third animated node is ::after");

  info("Getting the before and after nodeFronts");
-  let bodyContainer = yield getContainerForSelector("body", inspector);
+  let bodyContainer = await getContainerForSelector("body", inspector);
  let getBodyChildNodeFront = index => {
    return bodyContainer.elt.children[1].childNodes[index].container.node;
  };
@ -34,14 +34,14 @@ add_task(function* () {
  let afterNode = getBodyChildNodeFront(1);

  info("Select the ::before pseudo-element in the inspector");
-  yield selectNodeAndWaitForAnimations(beforeNode, inspector);
+  await selectNodeAndWaitForAnimations(beforeNode, inspector);
  is(getAnimationTimeBlocks(panel).length, 1, "There is 1 animation in the timeline");
  is(getAnimationTargetNodes(panel)[0].previewer.nodeFront,
     inspector.selection.nodeFront,
     "The right node front is displayed in the timeline");

  info("Select the ::after pseudo-element in the inspector");
-  yield selectNodeAndWaitForAnimations(afterNode, inspector);
+  await selectNodeAndWaitForAnimations(afterNode, inspector);
  is(getAnimationTimeBlocks(panel).length, 1, "There is 1 animation in the timeline");
  is(getAnimationTargetNodes(panel)[0].previewer.nodeFront,
     inspector.selection.nodeFront,
--- a/devtools/client/animationinspector/test/browser_animation_refresh_on_added_animation.js
+++ b/devtools/client/animationinspector/test/browser_animation_refresh_on_added_animation.js
@ -8,30 +8,30 @@ requestLongerTimeout(2);

 // Test that the panel content refreshes when new animations are added.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
-  let {inspector, panel} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  let {inspector, panel} = await openAnimationInspector();

  info("Select a non animated node");
-  yield selectNodeAndWaitForAnimations(".still", inspector);
+  await selectNodeAndWaitForAnimations(".still", inspector);

  assertAnimationsDisplayed(panel, 0);

  info("Start an animation on the node");
  let onRendered = waitForAnimationTimelineRendering(panel);
-  yield changeElementAndWait({
+  await changeElementAndWait({
    selector: ".still",
    attributeName: "class",
    attributeValue: "ball animated"
  }, panel, inspector);

-  yield onRendered;
-  yield waitForAllAnimationTargets(panel);
+  await onRendered;
+  await waitForAllAnimationTargets(panel);

  assertAnimationsDisplayed(panel, 1);

  info("Remove the animation class on the node");
-  yield changeElementAndWait({
+  await changeElementAndWait({
    selector: ".ball.animated",
    attributeName: "class",
    attributeValue: "ball still"
@ -40,11 +40,11 @@ add_task(function* () {
  assertAnimationsDisplayed(panel, 0);
 });

-function* changeElementAndWait(options, panel, inspector) {
+async function changeElementAndWait(options, panel, inspector) {
  let onPanelUpdated = panel.once(panel.UI_UPDATED_EVENT);
  let onInspectorUpdated = inspector.once("inspector-updated");

-  yield executeInContent("devtools:test:setAttribute", options);
+  await executeInContent("devtools:test:setAttribute", options);

-  yield promise.all([onInspectorUpdated, onPanelUpdated]);
+  await promise.all([onInspectorUpdated, onPanelUpdated]);
 }
--- a/devtools/client/animationinspector/test/browser_animation_refresh_on_removed_animation.js
+++ b/devtools/client/animationinspector/test/browser_animation_refresh_on_removed_animation.js
@ -8,16 +8,16 @@ requestLongerTimeout(2);

 // Test that the panel content refreshes when animations are removed.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");

-  let {inspector, panel} = yield openAnimationInspector();
-  yield testRefreshOnRemove(inspector, panel);
+  let {inspector, panel} = await openAnimationInspector();
+  await testRefreshOnRemove(inspector, panel);
 });

-function* testRefreshOnRemove(inspector, panel) {
+async function testRefreshOnRemove(inspector, panel) {
  info("Select a animated node");
-  yield selectNodeAndWaitForAnimations(".animated", inspector);
+  await selectNodeAndWaitForAnimations(".animated", inspector);

  assertAnimationsDisplayed(panel, 1);

@ -25,25 +25,25 @@ function* testRefreshOnRemove(inspector, panel) {
  let onPanelUpdated = panel.once(panel.UI_UPDATED_EVENT);

  info("Remove the animation on the node by removing the class");
-  yield executeInContent("devtools:test:setAttribute", {
+  await executeInContent("devtools:test:setAttribute", {
    selector: ".animated",
    attributeName: "class",
    attributeValue: "ball still test-node"
  });

-  yield onPanelUpdated;
+  await onPanelUpdated;
  ok(true, "The panel update event was fired");

  assertAnimationsDisplayed(panel, 0);

  info("Add an finite animation on the node again, and wait for it to appear");
  onPanelUpdated = panel.once(panel.UI_UPDATED_EVENT);
-  yield executeInContent("devtools:test:setAttribute", {
+  await executeInContent("devtools:test:setAttribute", {
    selector: ".test-node",
    attributeName: "class",
    attributeValue: "ball short test-node"
  });
-  yield onPanelUpdated;
-  yield waitForAnimationSelecting(panel);
+  await onPanelUpdated;
+  await waitForAnimationSelecting(panel);
  assertAnimationsDisplayed(panel, 1);
 }
--- a/devtools/client/animationinspector/test/browser_animation_refresh_when_active.js
+++ b/devtools/client/animationinspector/test/browser_animation_refresh_when_active.js
@ -8,22 +8,22 @@ requestLongerTimeout(2);

 // Test that the panel only refreshes when it is visible in the sidebar.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");

-  let {inspector, panel} = yield openAnimationInspector();
-  yield testRefresh(inspector, panel);
+  let {inspector, panel} = await openAnimationInspector();
+  await testRefresh(inspector, panel);
 });

-function* testRefresh(inspector, panel) {
+async function testRefresh(inspector, panel) {
  info("Select a non animated node");
-  yield selectNodeAndWaitForAnimations(".still", inspector);
+  await selectNodeAndWaitForAnimations(".still", inspector);

  info("Switch to the rule-view panel");
  inspector.sidebar.select("ruleview");

  info("Select the animated node now");
-  yield selectNode(".animated", inspector);
+  await selectNode(".animated", inspector);

  assertAnimationsDisplayed(panel, 0,
    "The panel doesn't show the animation data while inactive");
@ -31,8 +31,8 @@ function* testRefresh(inspector, panel) {
  info("Switch to the animation panel");
  let onRendered = waitForAnimationTimelineRendering(panel);
  inspector.sidebar.select("animationinspector");
-  yield panel.once(panel.UI_UPDATED_EVENT);
-  yield onRendered;
+  await panel.once(panel.UI_UPDATED_EVENT);
+  await onRendered;

  assertAnimationsDisplayed(panel, 1,
    "The panel shows the animation data after selecting it");
@ -41,14 +41,14 @@ function* testRefresh(inspector, panel) {
  inspector.sidebar.select("ruleview");

  info("Select the non animated node again");
-  yield selectNode(".still", inspector);
+  await selectNode(".still", inspector);

  assertAnimationsDisplayed(panel, 1,
    "The panel still shows the previous animation data since it is inactive");

  info("Switch to the animation panel again");
  inspector.sidebar.select("animationinspector");
-  yield panel.once(panel.UI_UPDATED_EVENT);
+  await panel.once(panel.UI_UPDATED_EVENT);

  assertAnimationsDisplayed(panel, 0,
    "The panel is now empty after refreshing");
--- a/devtools/client/animationinspector/test/browser_animation_refresh_when_active_after_mutations.js
+++ b/devtools/client/animationinspector/test/browser_animation_refresh_when_active_after_mutations.js
@ -14,13 +14,13 @@ const EXPECTED_GRAPH_PATH_SEGMENTS = [{ x: 0, y: 0 },
                                      { x: 99999, y: 0.5 },
                                      { x: 100000, y: 0 }];

-add_task(function* () {
+add_task(async function() {
  info("Open animation inspector once so that activate animation mutations listener");
-  yield addTab("data:text/html;charset=utf8,<div id='target'>test</div>");
-  const { controller, inspector, panel } = yield openAnimationInspector();
+  await addTab("data:text/html;charset=utf8,<div id='target'>test</div>");
+  const { controller, inspector, panel } = await openAnimationInspector();

  info("Select other tool to hide animation inspector");
-  yield inspector.sidebar.select("ruleview");
+  await inspector.sidebar.select("ruleview");

  // Count players-updated event in controller.
  let updatedEventCount = 0;
@ -29,17 +29,17 @@ add_task(function* () {
  });

  info("Make animation by eval in content");
-  yield evalInDebuggee(`document.querySelector('#target').animate(
+  await evalInDebuggee(`document.querySelector('#target').animate(
                        { transform: 'translate(100px)' },
                        { duration: 100000, easing: 'steps(2)' });`);
  info("Wait for animation mutations event");
-  yield controller.animationsFront.once("mutations");
+  await controller.animationsFront.once("mutations");
  info("Check players-updated events count");
  is(updatedEventCount, 0, "players-updated event shoud not be fired");

  info("Re-select animation inspector and check the UI");
-  yield inspector.sidebar.select("animationinspector");
-  yield waitForAnimationTimelineRendering(panel);
+  await inspector.sidebar.select("animationinspector");
+  await waitForAnimationTimelineRendering(panel);

  const timeBlocks = getAnimationTimeBlocks(panel);
  is(timeBlocks.length, 1, "One animation should display");
--- a/devtools/client/animationinspector/test/browser_animation_running_on_compositor.js
+++ b/devtools/client/animationinspector/test/browser_animation_running_on_compositor.js
@ -9,13 +9,13 @@ requestLongerTimeout(2);
 // Test that when animations displayed in the timeline are running on the
 // compositor, they get a special icon and information in the tooltip.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
-  let {inspector, panel} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  let {inspector, panel} = await openAnimationInspector();
  let timeline = panel.animationsTimelineComponent;

  info("Select a test node we know has an animation running on the compositor");
-  yield selectNodeAndWaitForAnimations(".compositor-all", inspector);
+  await selectNodeAndWaitForAnimations(".compositor-all", inspector);

  let animationEl = timeline.animationsEl.querySelector(".animation");
  ok(animationEl.classList.contains("fast-track"),
@ -25,7 +25,7 @@ add_task(function* () {
     "The animation element has the right tooltip content");

  info("Select a node we know doesn't have an animation on the compositor");
-  yield selectNodeAndWaitForAnimations(".no-compositor", inspector);
+  await selectNodeAndWaitForAnimations(".no-compositor", inspector);

  animationEl = timeline.animationsEl.querySelector(".animation");
  ok(!animationEl.classList.contains("fast-track"),
@ -39,7 +39,7 @@ add_task(function* () {

  info("Select a node we know has animation on the compositor and not on the" +
       " compositor");
-  yield selectNodeAndWaitForAnimations(".compositor-notall", inspector);
+  await selectNodeAndWaitForAnimations(".compositor-notall", inspector);

  animationEl = timeline.animationsEl.querySelector(".animation");
  ok(animationEl.classList.contains("fast-track"),
--- a/devtools/client/animationinspector/test/browser_animation_same_nb_of_playerWidgets_and_playerFronts.js
+++ b/devtools/client/animationinspector/test/browser_animation_same_nb_of_playerWidgets_and_playerFronts.js
@ -9,13 +9,13 @@ requestLongerTimeout(2);
 // Check that when playerFronts are updated, the same number of playerWidgets
 // are created in the panel.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
-  let {inspector, panel, controller} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  let {inspector, panel, controller} = await openAnimationInspector();
  let timeline = panel.animationsTimelineComponent;

  info("Selecting the test animated node again");
-  yield selectNodeAndWaitForAnimations(".multi", inspector);
+  await selectNodeAndWaitForAnimations(".multi", inspector);

  is(controller.animationPlayers.length,
    timeline.animationsEl.querySelectorAll(".animation").length,
--- a/devtools/client/animationinspector/test/browser_animation_shows_player_on_valid_node.js
+++ b/devtools/client/animationinspector/test/browser_animation_shows_player_on_valid_node.js
@ -9,13 +9,13 @@ requestLongerTimeout(2);
 // Test that the panel shows an animation player when an animated node is
 // selected.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
-  let {inspector, panel} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  let {inspector, panel} = await openAnimationInspector();

  info("Select node .animated and check that the panel is not empty");
-  let node = yield getNodeFront(".animated", inspector);
-  yield selectNodeAndWaitForAnimations(node, inspector);
+  let node = await getNodeFront(".animated", inspector);
+  await selectNodeAndWaitForAnimations(node, inspector);

  assertAnimationsDisplayed(panel, 1);
 });
--- a/devtools/client/animationinspector/test/browser_animation_spacebar_toggles_animations.js
+++ b/devtools/client/animationinspector/test/browser_animation_spacebar_toggles_animations.js
@ -10,13 +10,13 @@
 // because there's an other test that does this :
 // browser_animation_toggle_button_toggles_animation.js

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
-  let {panel, inspector, window, controller} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  let {panel, inspector, window, controller} = await openAnimationInspector();
  let {toggleAllButtonEl} = panel;

  // select a node without animations
-  yield selectNodeAndWaitForAnimations(".still", inspector);
+  await selectNodeAndWaitForAnimations(".still", inspector);

  // ensure the focus is on the animation panel
  window.focus();
@ -27,7 +27,7 @@ add_task(function* () {
  // sending the key will lead to a ALL_ANIMATIONS_TOGGLED_EVENT
  let onToggled = once(controller, controller.ALL_ANIMATIONS_TOGGLED_EVENT);
  EventUtils.sendKey("SPACE", window);
-  yield onToggled;
+  await onToggled;
  ok(toggleAllButtonEl.classList.contains("paused"),
   "The toggle all button is in its paused state");

@ -37,7 +37,7 @@ add_task(function* () {
  // sending the key will lead to a ALL_ANIMATIONS_TOGGLED_EVENT
  onToggled = once(controller, controller.ALL_ANIMATIONS_TOGGLED_EVENT);
  EventUtils.sendKey("SPACE", window);
-  yield onToggled;
+  await onToggled;
  ok(!toggleAllButtonEl.classList.contains("paused"),
   "The toggle all button is in its playing state again");
 });
--- a/devtools/client/animationinspector/test/browser_animation_spacebar_toggles_node_animations.js
+++ b/devtools/client/animationinspector/test/browser_animation_spacebar_toggles_node_animations.js
@ -13,11 +13,11 @@

 requestLongerTimeout(2);

-add_task(function* () {
+add_task(async function() {
  requestLongerTimeout(2);

-  yield addTab(URL_ROOT + "doc_simple_animation.html");
-  let {panel, window} = yield openAnimationInspector();
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  let {panel, window} = await openAnimationInspector();
  let {playTimelineButtonEl} = panel;

  // ensure the focus is on the animation panel
@ -28,7 +28,7 @@ add_task(function* () {

  // sending the key will lead to render animation timeline
  EventUtils.sendKey("SPACE", window);
-  yield waitForAnimationTimelineRendering(panel);
+  await waitForAnimationTimelineRendering(panel);
  ok(playTimelineButtonEl.classList.contains("paused"),
    "The play/resume button is in its paused state");

@ -37,7 +37,7 @@ add_task(function* () {

  // sending the key will lead to render animation timeline
  EventUtils.sendKey("SPACE", window);
-  yield waitForAnimationTimelineRendering(panel);
+  await waitForAnimationTimelineRendering(panel);
  ok(!playTimelineButtonEl.classList.contains("paused"),
    "The play/resume button is in its play state again");
 });
--- a/devtools/client/animationinspector/test/browser_animation_summarygraph_for_multiple_easings.js
+++ b/devtools/client/animationinspector/test/browser_animation_summarygraph_for_multiple_easings.js
@ -143,9 +143,9 @@ const TEST_CASES = {
  },
 };

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_multiple_easings.html");
-  const { panel } = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_multiple_easings.html");
+  const { panel } = await openAnimationInspector();
  getAnimationTimeBlocks(panel).forEach(timeBlock => {
    const state = timeBlock.animation.state;
    const testcase = TEST_CASES[state.name];
--- a/devtools/client/animationinspector/test/browser_animation_target_highlight_select.js
+++ b/devtools/client/animationinspector/test/browser_animation_target_highlight_select.js
@ -9,13 +9,13 @@ requestLongerTimeout(2);
 // Test that the DOM element targets displayed in animation player widgets can
 // be used to highlight elements in the DOM and select them in the inspector.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");

-  let {toolbox, inspector, panel} = yield openAnimationInspector();
+  let {toolbox, inspector, panel} = await openAnimationInspector();

  info("Select the simple animated node");
-  yield selectNodeAndWaitForAnimations(".animated", inspector);
+  await selectNodeAndWaitForAnimations(".animated", inspector);

  let targets = getAnimationTargetNodes(panel);
  // Arbitrary select the first one
@ -28,7 +28,7 @@ add_task(function* () {
  let onHighlight = toolbox.once("node-highlight");
  EventUtils.synthesizeMouse(highlightingEl, 10, 5, {type: "mouseover"},
                             highlightingEl.ownerDocument.defaultView);
-  let nodeFront = yield onHighlight;
+  let nodeFront = await onHighlight;

  // Do not forget to mouseout, otherwise we get random mouseover event
  // when selecting another node, which triggers some requests in animation
@ -47,7 +47,7 @@ add_task(function* () {
    "The highlighted node has the correct class");

  info("Select the body node in order to have the list of all animations");
-  yield selectNodeAndWaitForAnimations("body", inspector);
+  await selectNodeAndWaitForAnimations("body", inspector);

  targets = getAnimationTargetNodes(panel);
  targetNodeComponent = targets[0];
@ -59,10 +59,10 @@ add_task(function* () {
  let nodeEl = targetNodeComponent.previewer.previewEl;
  EventUtils.sendMouseEvent({type: "click"}, nodeEl,
                            nodeEl.ownerDocument.defaultView);
-  yield onSelection;
+  await onSelection;

  is(inspector.selection.nodeFront, targetNodeComponent.previewer.nodeFront,
    "The selected node is the one stored on the animation widget");

-  yield onRendered;
+  await onRendered;
 });
--- a/devtools/client/animationinspector/test/browser_animation_target_highlighter_lock.js
+++ b/devtools/client/animationinspector/test/browser_animation_target_highlighter_lock.js
@ -9,42 +9,42 @@ requestLongerTimeout(2);
 // Test that the DOM element targets displayed in animation player widgets can
 // be used to highlight elements in the DOM and select them in the inspector.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
-  let {panel} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  let {panel} = await openAnimationInspector();

  let targets = getAnimationTargetNodes(panel);

  info("Click on the highlighter icon for the first animated node");
  let domNodePreview1 = targets[0].previewer;
-  yield lockHighlighterOn(domNodePreview1);
+  await lockHighlighterOn(domNodePreview1);
  ok(domNodePreview1.highlightNodeEl.classList.contains("selected"),
     "The highlighter icon is selected");

  info("Click on the highlighter icon for the second animated node");
  let domNodePreview2 = targets[1].previewer;
-  yield lockHighlighterOn(domNodePreview2);
+  await lockHighlighterOn(domNodePreview2);
  ok(domNodePreview2.highlightNodeEl.classList.contains("selected"),
     "The highlighter icon is selected");
  ok(!domNodePreview1.highlightNodeEl.classList.contains("selected"),
     "The highlighter icon for the first node is unselected");

  info("Click again to unhighlight");
-  yield unlockHighlighterOn(domNodePreview2);
+  await unlockHighlighterOn(domNodePreview2);
  ok(!domNodePreview2.highlightNodeEl.classList.contains("selected"),
     "The highlighter icon for the second node is unselected");
 });

-function* lockHighlighterOn(domNodePreview) {
+async function lockHighlighterOn(domNodePreview) {
  let onLocked = domNodePreview.once("target-highlighter-locked");
  clickOnHighlighterIcon(domNodePreview);
-  yield onLocked;
+  await onLocked;
 }

-function* unlockHighlighterOn(domNodePreview) {
+async function unlockHighlighterOn(domNodePreview) {
  let onUnlocked = domNodePreview.once("target-highlighter-unlocked");
  clickOnHighlighterIcon(domNodePreview);
-  yield onUnlocked;
+  await onUnlocked;
 }

 function clickOnHighlighterIcon(domNodePreview) {
--- a/devtools/client/animationinspector/test/browser_animation_timeline_add_animation.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_add_animation.js
@ -7,13 +7,13 @@
 // Test re-used animation element since we re-use existent animation element
 // for the render performance.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_add_animation.html");
-  let {panel, controller} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_add_animation.html");
+  let {panel, controller} = await openAnimationInspector();
  const timelineComponent = panel.animationsTimelineComponent;

  // Add new animation which has delay and endDelay.
-  yield startNewAnimation(controller, panel, "#target2");
+  await startNewAnimation(controller, panel, "#target2");
  const previousAnimationEl =
    timelineComponent.animationsEl.querySelector(".animation:nth-child(2)");
  const previousSummaryGraphEl = previousAnimationEl.querySelector(".summary");
@ -24,7 +24,7 @@ add_task(function* () {
  const previousEndDelayBounds = previousEndDelayEl.getBoundingClientRect();

  // Add another animation.
-  yield startNewAnimation(controller, panel, "#target3");
+  await startNewAnimation(controller, panel, "#target3");
  const currentAnimationEl =
    timelineComponent.animationsEl.querySelector(".animation:nth-child(2)");
  const currentSummaryGraphEl = currentAnimationEl.querySelector(".summary");
@ -51,18 +51,18 @@ add_task(function* () {
     "Reused .end-delay element should be shorter");
 });

-function* startNewAnimation(controller, panel, selector) {
+async function startNewAnimation(controller, panel, selector) {
  info("Add a new animation to the page and check the time again");
  let onPlayerAdded = controller.once(controller.PLAYERS_UPDATED_EVENT);
  let onRendered = waitForAnimationTimelineRendering(panel);

-  yield executeInContent("devtools:test:setAttribute", {
+  await executeInContent("devtools:test:setAttribute", {
    selector: selector,
    attributeName: "class",
    attributeValue: "animation"
  });

-  yield onPlayerAdded;
-  yield onRendered;
-  yield waitForAllAnimationTargets(panel);
+  await onPlayerAdded;
+  await onRendered;
+  await waitForAllAnimationTargets(panel);
 }
--- a/devtools/client/animationinspector/test/browser_animation_timeline_currentTime.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_currentTime.js
@ -11,10 +11,10 @@ requestLongerTimeout(2);
 // changes when animations are playing, gets back to 0 when animations are
 // rewound, and stops when animations are paused.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");

-  let {panel} = yield openAnimationInspector();
+  let {panel} = await openAnimationInspector();
  let label = panel.timelineCurrentTimeEl;
  ok(label, "The current time label exists");

@ -22,23 +22,23 @@ add_task(function* () {
  // don't want to test the exact value of the time displayed, just that it
  // actually changes.
  info("Make sure the time displayed actually changes");
-  yield isCurrentTimeLabelChanging(panel, true);
+  await isCurrentTimeLabelChanging(panel, true);

  info("Pause the animations and check that the time stops changing");
-  yield clickTimelinePlayPauseButton(panel);
-  yield isCurrentTimeLabelChanging(panel, false);
+  await clickTimelinePlayPauseButton(panel);
+  await isCurrentTimeLabelChanging(panel, false);

  info("Rewind the animations and check that the time stops changing");
-  yield clickTimelineRewindButton(panel);
-  yield isCurrentTimeLabelChanging(panel, false);
+  await clickTimelineRewindButton(panel);
+  await isCurrentTimeLabelChanging(panel, false);
  is(label.textContent, "00:00.000");
 });

-function* isCurrentTimeLabelChanging(panel, isChanging) {
+async function isCurrentTimeLabelChanging(panel, isChanging) {
  let label = panel.timelineCurrentTimeEl;

  let time1 = label.textContent;
-  yield new Promise(r => setTimeout(r, 200));
+  await new Promise(r => setTimeout(r, 200));
  let time2 = label.textContent;

  if (isChanging) {
--- a/devtools/client/animationinspector/test/browser_animation_timeline_header.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_header.js
@ -14,15 +14,15 @@ const {findOptimalTimeInterval, TimeScale} = require("devtools/client/animationi
 // animation-timeline.js
 const TIME_GRADUATION_MIN_SPACING = 40;

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");

  // System scrollbar is enabled by default on our testing envionment and it
  // would shrink width of inspector and affect number of time-ticks causing
  // unexpected results. So, we set it wider to avoid this kind of edge case.
-  yield pushPref("devtools.toolsidebar-width.inspector", 350);
+  await pushPref("devtools.toolsidebar-width.inspector", 350);

-  let {panel} = yield openAnimationInspector();
+  let {panel} = await openAnimationInspector();

  let timeline = panel.animationsTimelineComponent;
  let headerEl = timeline.timeHeaderEl;
--- a/devtools/client/animationinspector/test/browser_animation_timeline_iterationStart.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_iterationStart.js
@ -6,16 +6,16 @@

 // Check that the iteration start is displayed correctly in time blocks.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_script_animation.html");
-  let {panel} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_script_animation.html");
+  let {panel} = await openAnimationInspector();
  let timelineComponent = panel.animationsTimelineComponent;
  let timeBlockComponents = getAnimationTimeBlocks(panel);
  let detailsComponent = timelineComponent.details;

  for (let i = 0; i < timeBlockComponents.length; i++) {
    info(`Expand time block ${i} so its keyframes are visible`);
-    yield clickOnAnimation(panel, i);
+    await clickOnAnimation(panel, i);

    info(`Check the state of time block ${i}`);
    let {containerEl, animation: {state}} = timeBlockComponents[i];
--- a/devtools/client/animationinspector/test/browser_animation_timeline_pause_button_01.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_pause_button_01.js
@ -10,25 +10,25 @@ requestLongerTimeout(2);
 // be clicked. Check that when it is, the button changes state and the scrubber stops and
 // resumes.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");

-  let {panel} = yield openAnimationInspector();
+  let {panel} = await openAnimationInspector();
  let btn = panel.playTimelineButtonEl;

  ok(btn, "The play/pause button exists");
  ok(!btn.classList.contains("paused"), "The play/pause button is in its playing state");

  info("Click on the button to pause all timeline animations");
-  yield clickTimelinePlayPauseButton(panel);
+  await clickTimelinePlayPauseButton(panel);

  ok(btn.classList.contains("paused"), "The play/pause button is in its paused state");
-  yield assertScrubberMoving(panel, false);
+  await assertScrubberMoving(panel, false);

  info("Click again on the button to play all timeline animations");
-  yield clickTimelinePlayPauseButton(panel);
+  await clickTimelinePlayPauseButton(panel);

  ok(!btn.classList.contains("paused"),
     "The play/pause button is in its playing state again");
-  yield assertScrubberMoving(panel, true);
+  await assertScrubberMoving(panel, true);
 });
--- a/devtools/client/animationinspector/test/browser_animation_timeline_pause_button_02.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_pause_button_02.js
@ -12,7 +12,7 @@ ChromeUtils.defineModuleGetter(this, "Preferences",
 // Checks that the play/pause button goes to the right state when the scrubber has reached
 // the end of the timeline but there are infinite animations playing.

-add_task(function* () {
+add_task(async function() {
  // TODO see if this is needed?
  // let timerPrecision = Preferences.get("privacy.reduceTimerPrecision");
  // Preferences.set("privacy.reduceTimerPrecision", false);
@ -21,26 +21,26 @@ add_task(function* () {
  //   Preferences.set("privacy.reduceTimerPrecision", timerPrecision);
  // });

-  yield addTab(URL_ROOT + "doc_simple_animation.html");
+  await addTab(URL_ROOT + "doc_simple_animation.html");

-  let {panel, inspector} = yield openAnimationInspector();
+  let {panel, inspector} = await openAnimationInspector();
  let timeline = panel.animationsTimelineComponent;
  let btn = panel.playTimelineButtonEl;

  info("Select an infinite animation and wait for the scrubber to reach the end");
-  yield selectNodeAndWaitForAnimations(".multi", inspector);
-  yield waitForOutOfBoundScrubber(timeline);
+  await selectNodeAndWaitForAnimations(".multi", inspector);
+  await waitForOutOfBoundScrubber(timeline);

  ok(!btn.classList.contains("paused"),
     "The button is in its playing state still, animations are infinite.");
-  yield assertScrubberMoving(panel, true);
+  await assertScrubberMoving(panel, true);

  info("Click on the button after the scrubber has moved out of bounds");
-  yield clickTimelinePlayPauseButton(panel);
+  await clickTimelinePlayPauseButton(panel);

  ok(btn.classList.contains("paused"),
     "The button can be paused after the scrubber has moved out of bounds");
-  yield assertScrubberMoving(panel, false);
+  await assertScrubberMoving(panel, false);
 });

 function waitForOutOfBoundScrubber({win, scrubberEl}) {
--- a/devtools/client/animationinspector/test/browser_animation_timeline_pause_button_03.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_pause_button_03.js
@ -12,33 +12,33 @@ requestLongerTimeout(2);
 // And test that clicking the button once the scrubber has reached the end of
 // the timeline does the right thing.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");

-  let {panel, inspector} = yield openAnimationInspector();
+  let {panel, inspector} = await openAnimationInspector();
  let btn = panel.playTimelineButtonEl;

  // For a finite animation, once the scrubber reaches the end of the timeline, the pause
  // button should go back to paused mode.
  info("Select a finite animation and wait for the animation to complete");
-  yield selectNodeAndWaitForAnimations(".negative-delay", inspector);
+  await selectNodeAndWaitForAnimations(".negative-delay", inspector);

-  yield reloadTab(inspector);
+  await reloadTab(inspector);

  if (!btn.classList.contains("paused")) {
-    yield waitForButtonPaused(btn);
+    await waitForButtonPaused(btn);
  }

  ok(btn.classList.contains("paused"),
     "The button is in paused state once finite animations are done");
-  yield assertScrubberMoving(panel, false);
+  await assertScrubberMoving(panel, false);

  info("Click again on the button to play the animation from the start again");
-  yield clickTimelinePlayPauseButton(panel);
+  await clickTimelinePlayPauseButton(panel);

  ok(!btn.classList.contains("paused"),
     "Clicking the button once finite animations are done should restart them");
-  yield assertScrubberMoving(panel, true);
+  await assertScrubberMoving(panel, true);
 });

 function waitForButtonPaused(btn) {
--- a/devtools/client/animationinspector/test/browser_animation_timeline_rate_selector.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_rate_selector.js
@ -12,10 +12,10 @@ requestLongerTimeout(2);
 // all have the same rate, or that it displays the empty value in case they
 // have mixed rates.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");

-  let {panel, controller, inspector, toolbox} = yield openAnimationInspector();
+  let {panel, controller, inspector, toolbox} = await openAnimationInspector();

  // In this test, we disable the highlighter on purpose because of the way
  // events are simulated to select an option in the playbackRate <select>.
@ -30,22 +30,22 @@ add_task(function* () {
  ok(select, "The rate selector exists");

  info("Change all of the current animations' rates to 0.5");
-  yield changeTimelinePlaybackRate(panel, .5);
+  await changeTimelinePlaybackRate(panel, .5);
  checkAllAnimationsRatesChanged(controller, select, .5);

  info("Select just one animated node and change its rate only");
-  yield selectNodeAndWaitForAnimations(".animated", inspector);
+  await selectNodeAndWaitForAnimations(".animated", inspector);

-  yield changeTimelinePlaybackRate(panel, 2);
+  await changeTimelinePlaybackRate(panel, 2);
  checkAllAnimationsRatesChanged(controller, select, 2);

  info("Select the <body> again, it should now have mixed-rates animations");
-  yield selectNodeAndWaitForAnimations("body", inspector);
+  await selectNodeAndWaitForAnimations("body", inspector);

  is(select.value, "", "The selected rate is empty");

  info("Change the rate for these mixed-rate animations");
-  yield changeTimelinePlaybackRate(panel, 1);
+  await changeTimelinePlaybackRate(panel, 1);
  checkAllAnimationsRatesChanged(controller, select, 1);
 });

--- a/devtools/client/animationinspector/test/browser_animation_timeline_rewind_button.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_rewind_button.js
@ -13,20 +13,20 @@ requestLongerTimeout(2);
 // reset to 0, and that the scrubber stops moving and is positioned to the
 // start.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");

-  let {panel, controller} = yield openAnimationInspector();
+  let {panel, controller} = await openAnimationInspector();
  let players = controller.animationPlayers;
  let btn = panel.rewindTimelineButtonEl;

  ok(btn, "The rewind button exists");

  info("Click on the button to rewind all timeline animations");
-  yield clickTimelineRewindButton(panel);
+  await clickTimelineRewindButton(panel);

  info("Check that the scrubber has stopped moving");
-  yield assertScrubberMoving(panel, false);
+  await assertScrubberMoving(panel, false);

  ok(players.every(({state}) => state.currentTime === 0),
     "All animations' currentTimes have been set to 0");
@ -34,16 +34,16 @@ add_task(function* () {
     "All animations have been paused");

  info("Play the animations again");
-  yield clickTimelinePlayPauseButton(panel);
+  await clickTimelinePlayPauseButton(panel);

  info("And pause them after a short while");
-  yield new Promise(r => setTimeout(r, 200));
+  await new Promise(r => setTimeout(r, 200));

  info("Check that rewinding when animations are paused works too");
-  yield clickTimelineRewindButton(panel);
+  await clickTimelineRewindButton(panel);

  info("Check that the scrubber has stopped moving");
-  yield assertScrubberMoving(panel, false);
+  await assertScrubberMoving(panel, false);

  ok(players.every(({state}) => state.currentTime === 0),
     "All animations' currentTimes have been set to 0");
--- a/devtools/client/animationinspector/test/browser_animation_timeline_scrubber_exists.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_scrubber_exists.js
@ -8,9 +8,9 @@ requestLongerTimeout(2);

 // Check that the timeline does have a scrubber element.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
-  let {panel} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  let {panel} = await openAnimationInspector();

  let timeline = panel.animationsTimelineComponent;
  let scrubberEl = timeline.scrubberEl;
--- a/devtools/client/animationinspector/test/browser_animation_timeline_scrubber_movable.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_scrubber_movable.js
@ -12,10 +12,10 @@ requestLongerTimeout(2);
 // state.
 // Finally, also check that the scrubber can be moved using the scrubber handle.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");

-  let {panel} = yield openAnimationInspector();
+  let {panel} = await openAnimationInspector();
  let timeline = panel.animationsTimelineComponent;
  let {win, timeHeaderEl, scrubberEl, scrubberHandleEl} = timeline;
  let playTimelineButtonEl = panel.playTimelineButtonEl;
@ -24,14 +24,14 @@ add_task(function* () {
     "The timeline play button is in its playing state by default");

  info("Mousedown in the header to move the scrubber");
-  yield synthesizeInHeaderAndWaitForChange(timeline, 50, 1, "mousedown");
+  await synthesizeInHeaderAndWaitForChange(timeline, 50, 1, "mousedown");
  checkScrubberIsAt(scrubberEl, timeHeaderEl, 50);

  ok(playTimelineButtonEl.classList.contains("paused"),
     "The timeline play button is in its paused state after mousedown");

  info("Continue moving the mouse and verify that the scrubber tracks it");
-  yield synthesizeInHeaderAndWaitForChange(timeline, 100, 1, "mousemove");
+  await synthesizeInHeaderAndWaitForChange(timeline, 100, 1, "mousemove");
  checkScrubberIsAt(scrubberEl, timeHeaderEl, 100);

  ok(playTimelineButtonEl.classList.contains("paused"),
@ -47,20 +47,20 @@ add_task(function* () {
  EventUtils.synthesizeMouse(scrubberHandleEl, 1, 20, {type: "mousedown"}, win);
  EventUtils.synthesizeMouse(timeHeaderEl, 0, 0, {type: "mousemove"}, win);
  EventUtils.synthesizeMouse(timeHeaderEl, 0, 0, {type: "mouseup"}, win);
-  yield onDataChanged;
+  await onDataChanged;

  checkScrubberIsAt(scrubberEl, timeHeaderEl, 0);

  // Wait for promise of setCurrentTimes if setCurrentTimes is running.
  if (panel.setCurrentTimeAllPromise) {
-    yield panel.setCurrentTimeAllPromise;
+    await panel.setCurrentTimeAllPromise;
  }
 });

-function* synthesizeInHeaderAndWaitForChange(timeline, x, y, type) {
+async function synthesizeInHeaderAndWaitForChange(timeline, x, y, type) {
  let onDataChanged = timeline.once("timeline-data-changed");
  EventUtils.synthesizeMouse(timeline.timeHeaderEl, x, y, {type}, timeline.win);
-  yield onDataChanged;
+  await onDataChanged;
 }

 function getPositionPercentage(pos, headerEl) {
--- a/devtools/client/animationinspector/test/browser_animation_timeline_scrubber_moves.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_scrubber_moves.js
@ -12,16 +12,16 @@ requestLongerTimeout(2);
 // measures the position of the scrubber once, then waits for some time to pass
 // and measures its position again.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
-  let {panel} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  let {panel} = await openAnimationInspector();

  let timeline = panel.animationsTimelineComponent;
  let scrubberEl = timeline.scrubberEl;
  let startPos = scrubberEl.getBoundingClientRect().left;

  info("Wait for some time to check that the scrubber moves");
-  yield new Promise(r => setTimeout(r, 2000));
+  await new Promise(r => setTimeout(r, 2000));

  let endPos = scrubberEl.getBoundingClientRect().left;

--- a/devtools/client/animationinspector/test/browser_animation_timeline_setCurrentTime.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_setCurrentTime.js
@ -18,20 +18,20 @@ requestLongerTimeout(2);
 // In these tests,
 // we confirm the behavior of setCurrentTime by delay and endDelay.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_timing_combination_animation.html");
-  const { panel, controller } = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_timing_combination_animation.html");
+  const { panel, controller } = await openAnimationInspector();

-  yield clickTimelinePlayPauseButton(panel);
+  await clickTimelinePlayPauseButton(panel);

  const timeBlockComponents = getAnimationTimeBlocks(panel);

  // Test -5000ms.
  let time = -5000;
-  yield controller.setCurrentTimeAll(time, true);
+  await controller.setCurrentTimeAll(time, true);
  for (let i = 0; i < timeBlockComponents.length; i++) {
-    yield timeBlockComponents[i].animation.refreshState();
-    const state = yield timeBlockComponents[i].animation.state;
+    await timeBlockComponents[i].animation.refreshState();
+    const state = await timeBlockComponents[i].animation.state;
    info(`Check the state at ${ time }ms with `
         + `delay:${ state.delay } and endDelay:${ state.endDelay }`);
    is(state.currentTime, 0,
@ -40,10 +40,10 @@ add_task(function* () {

  // Test 10000ms.
  time = 10000;
-  yield controller.setCurrentTimeAll(time, true);
+  await controller.setCurrentTimeAll(time, true);
  for (let i = 0; i < timeBlockComponents.length; i++) {
-    yield timeBlockComponents[i].animation.refreshState();
-    const state = yield timeBlockComponents[i].animation.state;
+    await timeBlockComponents[i].animation.refreshState();
+    const state = await timeBlockComponents[i].animation.state;
    info(`Check the state at ${ time }ms with `
         + `delay:${ state.delay } and endDelay:${ state.endDelay }`);
    const expected = state.delay < 0 ? 0 : time;
@ -54,10 +54,10 @@ add_task(function* () {

  // Test 60000ms.
  time = 60000;
-  yield controller.setCurrentTimeAll(time, true);
+  await controller.setCurrentTimeAll(time, true);
  for (let i = 0; i < timeBlockComponents.length; i++) {
-    yield timeBlockComponents[i].animation.refreshState();
-    const state = yield timeBlockComponents[i].animation.state;
+    await timeBlockComponents[i].animation.refreshState();
+    const state = await timeBlockComponents[i].animation.state;
    info(`Check the state at ${ time }ms with `
         + `delay:${ state.delay } and endDelay:${ state.endDelay }`);
    const expected = state.delay < 0 ? time + state.delay : time;
@ -68,10 +68,10 @@ add_task(function* () {

  // Test 150000ms.
  time = 150000;
-  yield controller.setCurrentTimeAll(time, true);
+  await controller.setCurrentTimeAll(time, true);
  for (let i = 0; i < timeBlockComponents.length; i++) {
-    yield timeBlockComponents[i].animation.refreshState();
-    const state = yield timeBlockComponents[i].animation.state;
+    await timeBlockComponents[i].animation.refreshState();
+    const state = await timeBlockComponents[i].animation.state;
    info(`Check the state at ${ time }ms with `
         + `delay:${ state.delay } and endDelay:${ state.endDelay }`);
    const currentTime = state.delay < 0 ? time + state.delay : time;
--- a/devtools/client/animationinspector/test/browser_animation_timeline_short_duration.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_short_duration.js
@ -8,9 +8,9 @@ requestLongerTimeout(2);

 // Test short duration (e.g. 1ms) animation.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_short_duration_animation.html");
-  const { panel, inspector } = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_short_duration_animation.html");
+  const { panel, inspector } = await openAnimationInspector();

  info("Check the listed time blocks");
  const timeBlocks = getAnimationTimeBlocks(panel);
@ -22,14 +22,14 @@ add_task(function* () {

  info("Check the time block one by one");
  info("Check #onetime");
-  yield selectNodeAndWaitForAnimations("#onetime", inspector);
+  await selectNodeAndWaitForAnimations("#onetime", inspector);
  let timeBlock = getAnimationTimeBlocks(panel)[0];
  let containerEl = timeBlock.containerEl;
  let state = timeBlock.animation.state;
  checkSummaryGraph(containerEl, state, true);

  info("Check #infinite");
-  yield selectNodeAndWaitForAnimations("#infinite", inspector);
+  await selectNodeAndWaitForAnimations("#infinite", inspector);
  timeBlock = getAnimationTimeBlocks(panel)[0];
  containerEl = timeBlock.containerEl;
  state = timeBlock.animation.state;
--- a/devtools/client/animationinspector/test/browser_animation_timeline_shows_delay.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_shows_delay.js
@ -11,12 +11,12 @@ requestLongerTimeout(2);
 // Also check that negative delays do not overflow the UI, and are shown like
 // positive delays.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
-  let {inspector, panel} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  let {inspector, panel} = await openAnimationInspector();

  info("Selecting a delayed animated node");
-  yield selectNodeAndWaitForAnimations(".delayed", inspector);
+  await selectNodeAndWaitForAnimations(".delayed", inspector);
  let timelineEl = panel.animationsTimelineComponent.rootWrapperEl;
  checkDelayAndName(timelineEl, true);
  let animationEl = timelineEl.querySelector(".animation");
@ -24,14 +24,14 @@ add_task(function* () {
  checkPath(animationEl, state);

  info("Selecting a no-delay animated node");
-  yield selectNodeAndWaitForAnimations(".animated", inspector);
+  await selectNodeAndWaitForAnimations(".animated", inspector);
  checkDelayAndName(timelineEl, false);
  animationEl = timelineEl.querySelector(".animation");
  state = getAnimationTimeBlocks(panel)[0].animation.state;
  checkPath(animationEl, state);

  info("Selecting a negative-delay animated node");
-  yield selectNodeAndWaitForAnimations(".negative-delay", inspector);
+  await selectNodeAndWaitForAnimations(".negative-delay", inspector);
  checkDelayAndName(timelineEl, true);
  animationEl = timelineEl.querySelector(".animation");
  state = getAnimationTimeBlocks(panel)[0].animation.state;
--- a/devtools/client/animationinspector/test/browser_animation_timeline_shows_endDelay.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_shows_endDelay.js
@ -11,15 +11,15 @@ requestLongerTimeout(2);
 // Also check that negative endDelays do not overflow the UI, and are shown
 // like positive endDelays.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_end_delay.html");
-  let {inspector, panel} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_end_delay.html");
+  let {inspector, panel} = await openAnimationInspector();

  let selectors = ["#target1", "#target2", "#target3", "#target4"];
  for (let i = 0; i < selectors.length; i++) {
    let selector = selectors[i];
-    yield selectNode(selector, inspector);
-    yield waitForAnimationSelecting(panel);
+    await selectNode(selector, inspector);
+    await waitForAnimationSelecting(panel);
    let timelineEl = panel.animationsTimelineComponent.rootWrapperEl;
    let animationEl = timelineEl.querySelector(".animation");
    checkEndDelayAndName(animationEl);
--- a/devtools/client/animationinspector/test/browser_animation_timeline_shows_iterations.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_shows_iterations.js
@ -9,12 +9,12 @@ requestLongerTimeout(2);
 // Check that the timeline is displays as many iteration elements as there are
 // iterations in an animation.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
-  let {inspector, panel} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  let {inspector, panel} = await openAnimationInspector();

  info("Selecting the test node");
-  yield selectNodeAndWaitForAnimations(".delayed", inspector);
+  await selectNodeAndWaitForAnimations(".delayed", inspector);

  info("Getting the animation element from the panel");
  const timelineComponent = panel.animationsTimelineComponent;
@ -33,7 +33,7 @@ add_task(function* () {
     + " that have infinity class");

  info("Selecting another test node with an infinite animation");
-  yield selectNodeAndWaitForAnimations(".animated", inspector);
+  await selectNodeAndWaitForAnimations(".animated", inspector);

  info("Getting the animation element from the panel again");
  animation = timelineEl.querySelector(".time-block");
--- a/devtools/client/animationinspector/test/browser_animation_timeline_shows_name_label.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_shows_name_label.js
@ -8,16 +8,16 @@ requestLongerTimeout(2);

 // Check the text content and width of name label.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
-  let {inspector, panel} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  let {inspector, panel} = await openAnimationInspector();

  info("Selecting 'simple-animation' animation which is running on compositor");
-  yield selectNodeAndWaitForAnimations(".animated", inspector);
+  await selectNodeAndWaitForAnimations(".animated", inspector);
  checkNameLabel(panel.animationsTimelineComponent.rootWrapperEl, "simple-animation");

  info("Selecting 'no-compositor' animation which is not running on compositor");
-  yield selectNodeAndWaitForAnimations(".no-compositor", inspector);
+  await selectNodeAndWaitForAnimations(".no-compositor", inspector);
  checkNameLabel(panel.animationsTimelineComponent.rootWrapperEl, "no-compositor");
 });

--- a/devtools/client/animationinspector/test/browser_animation_timeline_shows_time_info.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_shows_time_info.js
@ -9,9 +9,9 @@ requestLongerTimeout(2);
 // Check that the timeline displays animations' duration, delay iteration
 // counts and iteration start in tooltips.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
-  let {panel, controller} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  let {panel, controller} = await openAnimationInspector();

  info("Getting the animation element from the panel");
  let timelineEl = panel.animationsTimelineComponent.rootWrapperEl;
--- a/devtools/client/animationinspector/test/browser_animation_timeline_takes_rate_into_account.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_takes_rate_into_account.js
@ -11,10 +11,10 @@
 // of which may have a different rate than others. Those that have had their
 // rate changed have a delay = delay/rate and a duration = duration/rate.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_modify_playbackRate.html");
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_modify_playbackRate.html");

-  let {panel} = yield openAnimationInspector();
+  let {panel} = await openAnimationInspector();

  let timelineEl = panel.animationsTimelineComponent.rootWrapperEl;

--- a/devtools/client/animationinspector/test/browser_animation_timeline_ui.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_ui.js
@ -8,9 +8,9 @@ requestLongerTimeout(2);

 // Check that the timeline contains the right elements.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
-  let {panel} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  let {panel} = await openAnimationInspector();

  let timeline = panel.animationsTimelineComponent;
  let el = timeline.rootWrapperEl;
--- a/devtools/client/animationinspector/test/browser_animation_toggle_button_resets_on_navigate.js
+++ b/devtools/client/animationinspector/test/browser_animation_toggle_button_resets_on_navigate.js
@ -8,23 +8,23 @@ requestLongerTimeout(2);

 // Test that a page navigation resets the state of the global toggle button.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
-  let {inspector, panel} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  let {inspector, panel} = await openAnimationInspector();

  info("Select the non-animated test node");
-  yield selectNodeAndWaitForAnimations(".still", inspector);
+  await selectNodeAndWaitForAnimations(".still", inspector);

  ok(!panel.toggleAllButtonEl.classList.contains("paused"),
    "The toggle button is in its running state by default");

  info("Toggle all animations, so that they pause");
-  yield panel.toggleAll();
+  await panel.toggleAll();
  ok(panel.toggleAllButtonEl.classList.contains("paused"),
    "The toggle button now is in its paused state");

  info("Reloading the page");
-  yield reloadTab(inspector);
+  await reloadTab(inspector);

  ok(!panel.toggleAllButtonEl.classList.contains("paused"),
    "The toggle button is back in its running state");
--- a/devtools/client/animationinspector/test/browser_animation_toggle_button_toggles_animations.js
+++ b/devtools/client/animationinspector/test/browser_animation_toggle_button_toggles_animations.js
@ -11,22 +11,22 @@ requestLongerTimeout(2);
 // animations have been paused (including inside iframes) because there's an
 // actor test in /devtools/server/tests/browser/ that does this.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
-  let {panel} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  let {panel} = await openAnimationInspector();

  info("Click the toggle button");
-  yield panel.toggleAll();
-  yield checkState("paused");
+  await panel.toggleAll();
+  await checkState("paused");

  info("Click again the toggle button");
-  yield panel.toggleAll();
-  yield checkState("running");
+  await panel.toggleAll();
+  await checkState("running");
 });

-function* checkState(state) {
+async function checkState(state) {
  for (let selector of [".animated", ".multi", ".long"]) {
-    let playState = yield getAnimationPlayerState(selector);
+    let playState = await getAnimationPlayerState(selector);
    is(playState, state, "The animation on node " + selector + " is " + state);
  }
 }
--- a/devtools/client/animationinspector/test/browser_animation_toolbar_exists.js
+++ b/devtools/client/animationinspector/test/browser_animation_toolbar_exists.js
@ -11,9 +11,9 @@ requestLongerTimeout(2);
 // Also test that this toolbar gets replaced by the timeline toolbar when there
 // are animations to be displayed.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
-  let {inspector, window} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  let {inspector, window} = await openAnimationInspector();
  let doc = window.document;
  let toolbar = doc.querySelector("#global-toolbar");

@ -27,7 +27,7 @@ add_task(function* () {
     "The timeline toolbar is visible when there are animations");

  info("Select a node that has no animations");
-  yield selectNodeAndWaitForAnimations(".still", inspector);
+  await selectNodeAndWaitForAnimations(".still", inspector);

  ok(isNodeVisible(toolbar),
     "The toolbar is shown when there are no animations");
--- a/devtools/client/animationinspector/test/browser_animation_ui_updates_when_animation_data_changes.js
+++ b/devtools/client/animationinspector/test/browser_animation_ui_updates_when_animation_data_changes.js
@ -9,17 +9,17 @@ requestLongerTimeout(2);
 // Verify that if the animation's duration, iterations or delay change in
 // content, then the widget reflects the changes.

-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_simple_animation.html");
-  let {panel, controller, inspector} = yield openAnimationInspector();
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  let {panel, controller, inspector} = await openAnimationInspector();

  info("Select the test node");
-  yield selectNodeAndWaitForAnimations(".animated", inspector);
+  await selectNodeAndWaitForAnimations(".animated", inspector);

  let animation = controller.animationPlayers[0];
-  yield setStyle(animation, panel, "animationDuration", "5.5s", ".animated");
-  yield setStyle(animation, panel, "animationIterationCount", "300", ".animated");
-  yield setStyle(animation, panel, "animationDelay", "45s", ".animated");
+  await setStyle(animation, panel, "animationDuration", "5.5s", ".animated");
+  await setStyle(animation, panel, "animationIterationCount", "300", ".animated");
+  await setStyle(animation, panel, "animationDelay", "45s", ".animated");

  let animationsEl = panel.animationsTimelineComponent.animationsEl;
  let timeBlockEl = animationsEl.querySelector(".time-block");
--- a/devtools/client/animationinspector/test/head.js
+++ b/devtools/client/animationinspector/test/head.js
@ -17,8 +17,8 @@ const ANIMATION_L10N =
  new LocalizationHelper("devtools/client/locales/animationinspector.properties");

 // Auto clean-up when a test ends
-registerCleanupFunction(function* () {
-  yield closeAnimationInspector();
+registerCleanupFunction(async function() {
+  await closeAnimationInspector();

  while (gBrowser.tabs.length > 1) {
    gBrowser.removeCurrentTab();
@ -65,11 +65,11 @@ addTab = function(url) {
 * @param {InspectorPanel} inspector The instance of InspectorPanel currently
 * loaded in the toolbox
 */
-function* reloadTab(inspector) {
+async function reloadTab(inspector) {
  let onNewRoot = inspector.once("new-root");
-  yield executeInContent("devtools:test:reload", {}, {}, false);
-  yield onNewRoot;
-  yield inspector.once("inspector-updated");
+  await executeInContent("devtools:test:reload", {}, {}, false);
+  await onNewRoot;
+  await inspector.once("inspector-updated");
 }

 /*
@ -86,23 +86,21 @@ function* reloadTab(inspector) {
 * @return {Promise} Resolves when the inspector is updated with the new node
           and animations of its subtree are properly displayed.
 */
-var selectNodeAndWaitForAnimations = Task.async(
-  function* (data, inspector, reason = "test") {
-    // We want to make sure the rest of the test waits for the animations to
-    // be properly displayed (wait for all target DOM nodes to be previewed).
-    let {AnimationsController, AnimationsPanel} =
-      inspector.sidebar.getWindowForTab(TAB_NAME);
-    let onUiUpdated = AnimationsPanel.once(AnimationsPanel.UI_UPDATED_EVENT);
+var selectNodeAndWaitForAnimations = async function(data, inspector, reason = "test") {
+  // We want to make sure the rest of the test waits for the animations to
+  // be properly displayed (wait for all target DOM nodes to be previewed).
+  let {AnimationsController, AnimationsPanel} =
+    inspector.sidebar.getWindowForTab(TAB_NAME);
+  let onUiUpdated = AnimationsPanel.once(AnimationsPanel.UI_UPDATED_EVENT);

-    yield selectNode(data, inspector, reason);
+  await selectNode(data, inspector, reason);

-    yield onUiUpdated;
-    if (AnimationsController.animationPlayers.length !== 0) {
-      yield waitForAnimationTimelineRendering(AnimationsPanel);
-      yield waitForAllAnimationTargets(AnimationsPanel);
-    }
+  await onUiUpdated;
+  if (AnimationsController.animationPlayers.length !== 0) {
+    await waitForAnimationTimelineRendering(AnimationsPanel);
+    await waitForAllAnimationTargets(AnimationsPanel);
  }
-);
+};

 /**
 * Check if there are the expected number of animations being displayed in the
@ -126,7 +124,7 @@ function assertAnimationsDisplayed(panel, nbAnimations, msg = "") {
 * @param {InspectorPanel} inspector
 * @return {Promise}
 */
-var waitForAnimationInspectorReady = Task.async(function* (inspector) {
+var waitForAnimationInspectorReady = async function(inspector) {
  let win = inspector.sidebar.getWindowForTab(TAB_NAME);
  let updated = inspector.once("inspector-updated");

@ -139,32 +137,32 @@ var waitForAnimationInspectorReady = Task.async(function* (inspector) {
                 inspector.sidebar.once("animationinspector-ready");

  return promise.all([updated, tabReady]);
-});
+};

 /**
 * Open the toolbox, with the inspector tool visible and the animationinspector
 * sidebar selected.
 * @return a promise that resolves when the inspector is ready.
 */
-var openAnimationInspector = Task.async(function* () {
-  let {inspector, toolbox} = yield openInspectorSidebarTab(TAB_NAME);
+var openAnimationInspector = async function() {
+  let {inspector, toolbox} = await openInspectorSidebarTab(TAB_NAME);

  info("Waiting for the inspector and sidebar to be ready");
-  yield waitForAnimationInspectorReady(inspector);
+  await waitForAnimationInspectorReady(inspector);

  let win = inspector.sidebar.getWindowForTab(TAB_NAME);
  let {AnimationsController, AnimationsPanel} = win;

  info("Waiting for the animation controller and panel to be ready");
  if (AnimationsPanel.initialized) {
-    yield AnimationsPanel.initialized;
+    await AnimationsPanel.initialized;
  } else {
-    yield AnimationsPanel.once(AnimationsPanel.PANEL_INITIALIZED);
+    await AnimationsPanel.once(AnimationsPanel.PANEL_INITIALIZED);
  }

  if (AnimationsController.animationPlayers.length !== 0) {
-    yield waitForAnimationTimelineRendering(AnimationsPanel);
-    yield waitForAllAnimationTargets(AnimationsPanel);
+    await waitForAnimationTimelineRendering(AnimationsPanel);
+    await waitForAllAnimationTargets(AnimationsPanel);
  }

  return {
@ -174,16 +172,16 @@ var openAnimationInspector = Task.async(function* () {
    panel: AnimationsPanel,
    window: win
  };
-});
+};

 /**
 * Close the toolbox.
 * @return a promise that resolves when the toolbox has closed.
 */
-var closeAnimationInspector = Task.async(function* () {
+var closeAnimationInspector = async function() {
  let target = TargetFactory.forTab(gBrowser.selectedTab);
-  yield gDevTools.closeToolbox(target);
-});
+  await gDevTools.closeToolbox(target);
+};

 /**
 * Wait for a content -> chrome message on the message manager (the window
@ -233,12 +231,12 @@ function executeInContent(name, data = {}, objects = {},
 /**
 * Get the current playState of an animation player on a given node.
 */
-var getAnimationPlayerState = Task.async(function* (selector,
+var getAnimationPlayerState = async function(selector,
                                                    animationIndex = 0) {
-  let playState = yield executeInContent("Test:GetAnimationPlayerState",
+  let playState = await executeInContent("Test:GetAnimationPlayerState",
                                         {selector, animationIndex});
  return playState;
-});
+};

 /**
 * Is the given node visible in the page (rendered in the frame tree).
@ -257,30 +255,30 @@ function isNodeVisible(node) {
 * @param {AnimationsPanel} panel
 * @return {Array} all AnimationTargetNode instances
 */
-var waitForAllAnimationTargets = Task.async(function* (panel) {
+var waitForAllAnimationTargets = async function(panel) {
  let targets = getAnimationTargetNodes(panel);
-  yield promise.all(targets.map(t => {
+  await promise.all(targets.map(t => {
    if (!t.previewer.nodeFront) {
      return t.once("target-retrieved");
    }
    return false;
  }));
  return targets;
-});
+};

 /**
 * Check the scrubber element in the timeline is moving.
 * @param {AnimationPanel} panel
 * @param {Boolean} isMoving
 */
-function* assertScrubberMoving(panel, isMoving) {
+async function assertScrubberMoving(panel, isMoving) {
  let timeline = panel.animationsTimelineComponent;

  if (isMoving) {
    // If we expect the scrubber to move, just wait for a couple of
    // timeline-data-changed events and compare times.
-    let {time: time1} = yield timeline.once("timeline-data-changed");
-    let {time: time2} = yield timeline.once("timeline-data-changed");
+    let {time: time1} = await timeline.once("timeline-data-changed");
+    let {time: time2} = await timeline.once("timeline-data-changed");
    ok(time2 > time1, "The scrubber is moving");
  } else {
    // If instead we expect the scrubber to remain at its position, just wait
@ -289,7 +287,7 @@ function* assertScrubberMoving(panel, isMoving) {
    timeline.once("timeline-data-changed", () => {
      hasMoved = true;
    });
-    yield new Promise(r => setTimeout(r, 500));
+    await new Promise(r => setTimeout(r, 500));
    ok(!hasMoved, "The scrubber is not moving");
  }
 }
@ -299,7 +297,7 @@ function* assertScrubberMoving(panel, isMoving) {
 * to update.
 * @param {AnimationsPanel} panel
 */
-function* clickTimelinePlayPauseButton(panel) {
+async function clickTimelinePlayPauseButton(panel) {
  let onUiUpdated = panel.once(panel.UI_UPDATED_EVENT);
  let onRendered = waitForAnimationTimelineRendering(panel);

@ -307,9 +305,9 @@ function* clickTimelinePlayPauseButton(panel) {
  let win = btn.ownerDocument.defaultView;
  EventUtils.sendMouseEvent({type: "click"}, btn, win);

-  yield onUiUpdated;
-  yield onRendered;
-  yield waitForAllAnimationTargets(panel);
+  await onUiUpdated;
+  await onRendered;
+  await waitForAllAnimationTargets(panel);
 }

 /**
@ -317,7 +315,7 @@ function* clickTimelinePlayPauseButton(panel) {
 * update.
 * @param {AnimationsPanel} panel
 */
-function* clickTimelineRewindButton(panel) {
+async function clickTimelineRewindButton(panel) {
  let onUiUpdated = panel.once(panel.UI_UPDATED_EVENT);
  let onRendered = waitForAnimationTimelineRendering(panel);

@ -325,9 +323,9 @@ function* clickTimelineRewindButton(panel) {
  let win = btn.ownerDocument.defaultView;
  EventUtils.sendMouseEvent({type: "click"}, btn, win);

-  yield onUiUpdated;
-  yield onRendered;
-  yield waitForAllAnimationTargets(panel);
+  await onUiUpdated;
+  await onRendered;
+  await waitForAllAnimationTargets(panel);
 }

 /**
@ -336,9 +334,8 @@ function* clickTimelineRewindButton(panel) {
 * @param {AnimationsPanel} panel
 * @param {Number} rate The new rate value to be selected
 */
-function* changeTimelinePlaybackRate(panel, rate) {
+async function changeTimelinePlaybackRate(panel, rate) {
  let onUiUpdated = panel.once(panel.UI_UPDATED_EVENT);
-  let onRendered = waitForAnimationTimelineRendering(panel);

  let select = panel.rateSelectorEl.firstChild;
  let win = select.ownerDocument.defaultView;
@ -356,9 +353,9 @@ function* changeTimelinePlaybackRate(panel, rate) {
  EventUtils.synthesizeMouseAtCenter(select, {type: "mousedown"}, win);
  EventUtils.synthesizeMouseAtCenter(option, {type: "mouseup"}, win);

-  yield onUiUpdated;
-  yield onRendered;
-  yield waitForAllAnimationTargets(panel);
+  await onUiUpdated;
+  await waitForAnimationTimelineRendering(panel);
+  await waitForAllAnimationTargets(panel);

  // Simulate a mousemove outside of the rate selector area to avoid subsequent
  // tests from failing because of unwanted mouseover events.
@ -370,15 +367,15 @@ function* changeTimelinePlaybackRate(panel, rate) {
 * Wait for animation selecting.
 * @param {AnimationsPanel} panel
 */
-function* waitForAnimationSelecting(panel) {
-  yield panel.animationsTimelineComponent.once("animation-selected");
+async function waitForAnimationSelecting(panel) {
+  await panel.animationsTimelineComponent.once("animation-selected");
 }

 /**
 * Wait for rendering animation timeline.
 * @param {AnimationsPanel} panel
 */
-function* waitForAnimationTimelineRendering(panel) {
+function waitForAnimationTimelineRendering(panel) {
  return panel.animationsTimelineComponent.once("animation-timeline-rendering-completed");
 }

@ -391,7 +388,7 @@ function* waitForAnimationTimelineRendering(panel) {
   + *                 as the clientX of MouseEvent.
   + *                 This parameter should be from 0.0 to 1.0.
   + */
-function* clickOnTimelineHeader(panel, position) {
+async function clickOnTimelineHeader(panel, position) {
  const timeline = panel.animationsTimelineComponent;
  const onTimelineDataChanged = timeline.once("timeline-data-changed");

@ -402,7 +399,7 @@ function* clickOnTimelineHeader(panel, position) {
  info(`Click at (${ clientX }, 0) on timeline header`);
  EventUtils.sendMouseEvent({ type: "mouseup", clientX: clientX }, header,
                            header.ownerDocument.defaultView);
-  return yield onTimelineDataChanged;
+  return onTimelineDataChanged;
 }

 /**
@ -428,7 +425,7 @@ function disableHighlighter(toolbox) {
 *                  if the clicked animation is already selected.
 * @return {Promise} resolves to the animation whose state has changed.
 */
-function* clickOnAnimation(panel, index, shouldAlreadySelected) {
+async function clickOnAnimation(panel, index, shouldAlreadySelected) {
  let timeline = panel.animationsTimelineComponent;

  // Expect a selection event.
@ -449,7 +446,7 @@ function* clickOnAnimation(panel, index, shouldAlreadySelected) {
  }
  EventUtils.synthesizeMouse(timeBlock, x, y, {}, timeBlock.ownerDocument.defaultView);

-  return yield onSelectionChanged;
+  return onSelectionChanged;
 }

 /**
@ -486,22 +483,22 @@ function getKeyframeEl(panel, propertyName, keyframeIndex) {
 * @param {String} value - property value.
 * @param {String} selector - selector for test document.
 */
-function* setStyle(animation, panel, name, value, selector) {
+async function setStyle(animation, panel, name, value, selector) {
  info("Change the animation style via the content DOM. Setting " +
       name + " to " + value + " of " + selector);

  const onAnimationChanged = animation ? once(animation, "changed") : Promise.resolve();
  const onRendered = waitForAnimationTimelineRendering(panel);

-  yield executeInContent("devtools:test:setStyle", {
+  await executeInContent("devtools:test:setStyle", {
    selector: selector,
    propertyName: name,
    propertyValue: value
  });

-  yield onAnimationChanged;
-  yield onRendered;
-  yield waitForAllAnimationTargets(panel);
+  await onAnimationChanged;
+  await onRendered;
+  await waitForAllAnimationTargets(panel);
 }

 /**
--- a/devtools/client/dom/dom-panel.js
+++ b/devtools/client/dom/dom-panel.js
@ -9,7 +9,7 @@ const { Cu } = require("chrome");
 const ObjectClient = require("devtools/shared/client/object-client");

 const defer = require("devtools/shared/defer");
-const EventEmitter = require("devtools/shared/old-event-emitter");
+const EventEmitter = require("devtools/shared/event-emitter");

 /**
 * This object represents DOM panel. It's responsibility is to
--- a/devtools/client/netmonitor/src/har/test/browser_net_har_copy_all_as_har.js
+++ b/devtools/client/netmonitor/src/har/test/browser_net_har_copy_all_as_har.js
@ -10,30 +10,12 @@ add_task(async function() {
  // Disable tcp fast open, because it is setting a response header indicator
  // (bug 1352274). TCP Fast Open is not present on all platforms therefore the
  // number of response headers will vary depending on the platform.
-  Services.prefs.setBoolPref("network.tcp.tcp_fastopen_enable", false);
+  await pushPref("network.tcp.tcp_fastopen_enable", false);
  let { tab, monitor } = await initNetMonitor(SIMPLE_URL);

  info("Starting test... ");

-  let { connector, store, windowRequire } = monitor.panelWin;
-  let Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
-  let RequestListContextMenu = windowRequire(
-    "devtools/client/netmonitor/src/widgets/RequestListContextMenu");
-  let { getSortedRequests } = windowRequire(
-    "devtools/client/netmonitor/src/selectors/index");
-
-  store.dispatch(Actions.batchEnable(false));
-
-  let wait = waitForNetworkEvents(monitor, 1);
-  tab.linkedBrowser.reload();
-  await wait;
-
-  let contextMenu = new RequestListContextMenu({ connector });
-
-  await contextMenu.copyAllAsHar(getSortedRequests(store.getState()));
-
-  let jsonString = SpecialPowers.getClipboardData("text/unicode");
-  let har = JSON.parse(jsonString);
+  let har = await reloadAndCopyAllAsHar(tab, monitor);

  // Check out HAR log
  isnot(har.log, null, "The HAR log must exist");
@ -60,5 +42,44 @@ add_task(async function() {
    "Check response body");
  isnot(entry.timings, undefined, "Check timings");

+  // Test response body limit (non zero).
+  await pushPref("devtools.netmonitor.responseBodyLimit", 10);
+  har = await reloadAndCopyAllAsHar(tab, monitor);
+  entry = har.log.entries[0];
+  is(entry.response.content.text.length, 10, // eslint-disable-line
+    "Response body must be truncated");
+
+  // Test response body limit (zero).
+  await pushPref("devtools.netmonitor.responseBodyLimit", 0);
+  har = await reloadAndCopyAllAsHar(tab, monitor);
+  entry = har.log.entries[0];
+  is(entry.response.content.text.length, 465, // eslint-disable-line
+    "Response body must not be truncated");
+
  return teardown(monitor);
 });
+
+/**
+ * Reload the page and copy all as HAR.
+ */
+async function reloadAndCopyAllAsHar(tab, monitor) {
+  let { connector, store, windowRequire } = monitor.panelWin;
+  let Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
+  let RequestListContextMenu = windowRequire(
+    "devtools/client/netmonitor/src/widgets/RequestListContextMenu");
+  let { getSortedRequests } = windowRequire(
+    "devtools/client/netmonitor/src/selectors/index");
+
+  store.dispatch(Actions.batchEnable(false));
+
+  let wait = waitForNetworkEvents(monitor, 1);
+  tab.linkedBrowser.reload();
+  await wait;
+
+  let contextMenu = new RequestListContextMenu({ connector });
+
+  await contextMenu.copyAllAsHar(getSortedRequests(store.getState()));
+
+  let jsonString = SpecialPowers.getClipboardData("text/unicode");
+  return JSON.parse(jsonString);
+}
--- a/devtools/client/netmonitor/test/browser_net_truncate.js
+++ b/devtools/client/netmonitor/test/browser_net_truncate.js
@ -6,10 +6,9 @@
 /**
 * Verifies that truncated response bodies still have the correct reported size.
 */
-
 add_task(async function() {
-  let { RESPONSE_BODY_LIMIT } = require("devtools/shared/webconsole/network-monitor");
-  let URL = EXAMPLE_URL + "sjs_truncate-test-server.sjs?limit=" + RESPONSE_BODY_LIMIT;
+  let limit = Services.prefs.getIntPref("devtools.netmonitor.responseBodyLimit");
+  let URL = EXAMPLE_URL + "sjs_truncate-test-server.sjs?limit=" + limit;
  let { monitor, tab } = await initNetMonitor(URL);

  info("Starting test... ");
--- a/Показать больше
+++ b/Показать больше