Bug 850163 - use mozRequestAnimationFrame to start the tab opening animation asynchronously but without missing the next possible frame. r=ttaubert

--HG--
extra : rebase_source : 5274b1f1a8b5b5d0e4b7f3d369b0a91f3fb0655d

browser/base/content/tabbrowser.xml

@@ -1454,17 +1454,18 @@
             }
 
             if (animate) {
-              this.tabContainer._handleTabTelemetryStart(t, aURI);
+              mozRequestAnimationFrame(function () {
+                this.tabContainer._handleTabTelemetryStart(t, aURI);
 
-              // kick the animation off
-              t.clientTop;
-              t.setAttribute("fadein", "true");
+                // kick the animation off
+                t.setAttribute("fadein", "true");
 
-              // This call to adjustTabstrip is redundant but needed so that
-              // when opening a second tab, the first tab's close buttons
-              // appears immediately rather than when the transition ends.
-              if (this.tabContainer.childNodes.length == 2)
-                this.tabContainer.adjustTabstrip();
+                // This call to adjustTabstrip is redundant but needed so that
+                // when opening a second tab, the first tab's close buttons
+                // appears immediately rather than when the transition ends.
+                if (this.tabContainer.childNodes.length == 2)
+                  this.tabContainer.adjustTabstrip();
+              }.bind(this));
             }
 
             return t;

browser/base/content/test/browser_bug585785.js

@@ -4,13 +4,15 @@ function test() {
   waitForExplicitFinish();
 
   tab = gBrowser.addTab();
-  is(tab.getAttribute("fadein"), "true", "tab opening animation initiated");
+  isnot(tab.getAttribute("fadein"), "true", "newly opened tab is yet to fade in");
 
   // Try to remove the tab right before the opening animation's first frame
   window.mozRequestAnimationFrame(checkAnimationState);
 }
 
 function checkAnimationState() {
+  is(tab.getAttribute("fadein"), "true", "tab opening animation initiated");
+
   info(window.getComputedStyle(tab).maxWidth);
   gBrowser.removeTab(tab, { animate: true });
   if (!tab.parentNode) {