From e65ab1463e6209c50719d97534c18450a14439d8 Mon Sep 17 00:00:00 2001
From: Alexandre Poirot <poirot.alex@gmail.com>
Date: Thu, 30 Nov 2017 08:34:05 -0800
Subject: [PATCH] Bug 1365574 - Release event loop between react module loading
 and toolbox react rendering. r=pbro

MozReview-Commit-ID: D1M9n3VFdHJ

--HG--
extra : rebase_source : 400bcbb8a4984c32e9decc0877ed9ae7ce386842
---
 devtools/client/framework/toolbox.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/devtools/client/framework/toolbox.js b/devtools/client/framework/toolbox.js
index 68c108fd12dd..eaf429e1a61b 100644
--- a/devtools/client/framework/toolbox.js
+++ b/devtools/client/framework/toolbox.js
@@ -504,7 +504,15 @@ Toolbox.prototype = {
       // can take a few hundred milliseconds seconds to start up.
       // But wait for toolbar buttons to be set before updating this react component.
       buttonsPromise.then(() => {
-        this.component.setCanRender();
+        // Delay React rendering as Toolbox.open and buttonsPromise are synchronous.
+        // Even if this involve promises, this is synchronous. Toolbox.open already loads
+        // react modules and freeze the event loop for a significant time.
+        // requestIdleCallback allows releasing it to allow user events to be processed.
+        // Use 16ms maximum delay to allow one frame to be rendered at 60FPS
+        // (1000ms/60FPS=16ms)
+        this.win.requestIdleCallback(() => {
+          this.component.setCanRender();
+        }, {timeout: 16});
       });
 
       yield this.selectTool(this._defaultToolId);