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

@@ -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);