Bug 1272870 - Load React and build Notificationbox on demand. r=bgrins

devtools/client/framework/toolbox.js

@@ -382,16 +382,9 @@ Toolbox.prototype = {
         useOnlyShared: true
       }).require;
 
-      this.React = this.browserRequire(
-        "devtools/client/shared/vendor/react");
-      this.ReactDOM = this.browserRequire(
-        "devtools/client/shared/vendor/react-dom");
-
       iframe.setAttribute("aria-label", toolboxStrings("toolbox.label"));
       let domHelper = new DOMHelpers(iframe.contentWindow);
       domHelper.onceDOMReady(() => {
-        // Build the Notification box as soon as the DOM is ready.
-        this._buildNotificationBox();
         domReady.resolve();
       }, this._URL);
 
@@ -487,6 +480,18 @@ Toolbox.prototype = {
     }.bind(this)).then(null, console.error.bind(console));
   },
 
+  /**
+   * loading React modules when needed (to avoid performance penalties
+   * during Firefox start up time).
+   */
+  get React() {
+    return this.browserRequire("devtools/client/shared/vendor/react");
+  },
+
+  get ReactDOM() {
+    return this.browserRequire("devtools/client/shared/vendor/react-dom");
+  },
+
   _pingTelemetry: function () {
     this._telemetry.toolOpened("toolbox");
 
@@ -812,19 +817,23 @@ Toolbox.prototype = {
   },
 
   /**
-   * Build the notification box. Called every time the host changes.
+   * Build the notification box as soon as needed.
    */
-  _buildNotificationBox: function () {
-    let { NotificationBox, PriorityLevels } =
-      this.browserRequire("devtools/client/shared/components/notification-box");
+  get notificationBox() {
+    if (!this._notificationBox) {
+      let { NotificationBox, PriorityLevels } =
+        this.browserRequire(
+          "devtools/client/shared/components/notification-box");
 
-    NotificationBox = this.React.createFactory(NotificationBox);
+      NotificationBox = this.React.createFactory(NotificationBox);
 
-    // Render NotificationBox and assign priority levels to it.
-    let box = this.doc.getElementById("toolbox-notificationbox");
-    this.notificationBox = Object.assign(
-      this.ReactDOM.render(NotificationBox({}), box),
-      PriorityLevels);
+      // Render NotificationBox and assign priority levels to it.
+      let box = this.doc.getElementById("toolbox-notificationbox");
+      this._notificationBox = Object.assign(
+        this.ReactDOM.render(NotificationBox({}), box),
+        PriorityLevels);
+    }
+    return this._notificationBox;
   },
 
   /**
@@ -2098,7 +2107,7 @@ Toolbox.prototype = {
       }
     }
 
-    this.React = this.ReactDOM = this.browserRequire = null;
+    this.browserRequire = null;
 
     // Now that we are closing the toolbox we can re-enable the cache settings
     // and disable the service workers testing settings for the current tab.