From c74dff8112f82cf24db3786148c29bcbaf19cd62 Mon Sep 17 00:00:00 2001
From: Dan Mosedale <dmose2@gmail.com>
Date: Wed, 9 Aug 2017 13:50:12 -0700
Subject: [PATCH] Switch out the promise to setTimeout

---
 .../components/TopSites/TopSites.jsx          | 20 ++++++++++---------
 .../content-src/components/TopSites.test.jsx  |  3 +++
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/system-addon/content-src/components/TopSites/TopSites.jsx b/system-addon/content-src/components/TopSites/TopSites.jsx
index f687fd09a1..d2db3b453d 100644
--- a/system-addon/content-src/components/TopSites/TopSites.jsx
+++ b/system-addon/content-src/components/TopSites/TopSites.jsx
@@ -117,21 +117,23 @@ class TopSitesPerfTimer extends React.Component {
   }
 
   /**
-   * Call the given callback after the upcoming frame paints.  We're using
-   * a Promise rather than a setTimeout or double rFA, as Promise resolution
-   * is faster, as of this writing (Firefox 57 Nightly) - see #3105 for
-   * details.
+   * Call the given callback after the upcoming frame paints.
+   *
+   * @note Both setTimeout and requestAnimationFrame are throttled when the page
+   * is hidden, so this will give incorrect results in that case.  We'll want to
+   * filter out preloaded tabs, and otherwise, this is presumably, a fairly rare
+   * case that will get lost in the noise.  If we decide that it's important to
+   * find out when something that's hidden has "painted", however, another
+   * option is to post a message to this window. That should happen even faster
+   * than setTimeout, and, at least as of this writing, it's not throttled in
+   * hidden windows in Firefox.
    *
    * @param {Function} callback
    *
    * @returns void
    */
   _afterFramePaint(callback) {
-    new Promise(resolve => requestAnimationFrame(resolve))
-      .then(callback).catch(reason => {
-        // eslint-disable-next-line no-console
-        console.warn("_afterFramePaint Promise rejected, reason:", reason);
-      });
+    requestAnimationFrame(() => setTimeout(callback, 0));
   }
 
   _maybeSendPaintedEvent() {
diff --git a/system-addon/test/unit/content-src/components/TopSites.test.jsx b/system-addon/test/unit/content-src/components/TopSites.test.jsx
index 734d4a7cea..4d8ae02f11 100644
--- a/system-addon/test/unit/content-src/components/TopSites.test.jsx
+++ b/system-addon/test/unit/content-src/components/TopSites.test.jsx
@@ -119,6 +119,9 @@ describe("<TopSitesPerfTimer>", () => {
 
   describe("#_afterFramePaint", () => {
     it("should call callback after the requestAnimationFrame callback returns", done => {
+      // Setting the callback to done is the test that it does finally get
+      // called at the correct time, after the event loop ticks again.
+      // If it doesn't get called, this test will time out.
       this.callback = () => done();
       sandbox.spy(this, "callback");
       const wrapper = shallow(<TopSitesPerfTimer {...DEFAULT_PROPS} />);