Bug 1396633 - Prevent updating toolbox react component until it is ready to be displayed. r=? draft
authorAlexandre Poirot <poirot.alex@gmail.com>
Tue, 12 Sep 2017 00:40:08 +0200
changeset 662922 8df77b5118333683f69ac5719f5507ae7207139f
parent 662089 a5f163da8a9be5d2e86138c57d59be69723b5457
child 731015 f665db299db21f05fbf130866b6a7b1d601d9d10
push id79237
push userbmo:poirot.alex@gmail.com
push dateTue, 12 Sep 2017 08:54:46 +0000
bugs1396633
milestone57.0a1
Bug 1396633 - Prevent updating toolbox react component until it is ready to be displayed. r=? MozReview-Commit-ID: 5gOAq7mRygf
devtools/client/framework/components/toolbox-controller.js
devtools/client/framework/toolbox.js
--- a/devtools/client/framework/components/toolbox-controller.js
+++ b/devtools/client/framework/components/toolbox-controller.js
@@ -67,29 +67,36 @@ module.exports = createClass({
 
   updateFocusedButton() {
     this.setFocusedButton(this.state.focusedButton);
   },
 
   setFocusedButton(focusedButton) {
     const {buttonIds} = this.state;
 
-    this.setState({
-      focusedButton: focusedButton && buttonIds.includes(focusedButton)
+    focusedButton = focusedButton && buttonIds.includes(focusedButton)
         ? focusedButton
-        : buttonIds[0]
-    });
+        : buttonIds[0];
+    if (this.state.focusedButton !== focusedButton) {
+      this.setState({
+        focusedButton
+      });
+    }
   },
 
   setCurrentToolId(currentToolId) {
     this.setState({currentToolId});
     // Also set the currently focused button to this tool.
     this.setFocusedButton(currentToolId);
   },
 
+  shouldComponentUpdate() {
+    return this.state.canRender;
+  },
+
   setCanRender() {
     this.setState({ canRender: true });
     this.updateButtonIds();
   },
 
   setOptionsPanel(optionsPanel) {
     this.setState({ optionsPanel });
     this.updateButtonIds();
--- a/devtools/client/framework/toolbox.js
+++ b/devtools/client/framework/toolbox.js
@@ -490,17 +490,19 @@ Toolbox.prototype = {
       // (bug 1072764).
       let toolDef = gDevTools.getToolDefinition(this._defaultToolId);
       if (!toolDef || !toolDef.isTargetSupported(this._target)) {
         this._defaultToolId = "webconsole";
       }
 
       // Start rendering the toolbox toolbar before selecting the tool, as the tools
       // can take a few hundred milliseconds seconds to start up.
-      this.component.setCanRender();
+      buttonsPromise.then(() => {
+        this.component.setCanRender();
+      });
 
       yield this.selectTool(this._defaultToolId);
 
       // Wait until the original tool is selected so that the split
       // console input will receive focus.
       let splitConsolePromise = promise.resolve();
       if (Services.prefs.getBoolPref(SPLITCONSOLE_ENABLED_PREF)) {
         splitConsolePromise = this.openSplitConsole();