Switch out the promise to setTimeout

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() {

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} />);