diff --git a/devtools/client/framework/components/toolbox-controller.js b/devtools/client/framework/components/toolbox-controller.js
index 67d0c06647cf..ab6d5c5811e7 100644
--- a/devtools/client/framework/components/toolbox-controller.js
+++ b/devtools/client/framework/components/toolbox-controller.js
@@ -22,6 +22,7 @@ class ToolboxController extends Component {
     this.state = {
       focusedButton: ELEMENT_PICKER_ID,
       toolboxButtons: [],
+      visibleToolboxButtonCount: 0,
       currentToolId: null,
       highlightedTools: new Set(),
       panelDefinitions: [],
@@ -172,7 +173,10 @@ class ToolboxController extends Component {
       button.on("updatechecked", this.state.checkedButtonsUpdated);
     });
 
-    this.setState({ toolboxButtons }, this.updateButtonIds);
+    const visibleToolboxButtonCount =
+      toolboxButtons.filter(button => button.isVisible).length;
+
+    this.setState({ toolboxButtons, visibleToolboxButtonCount }, this.updateButtonIds);
   }
 
   render() {
diff --git a/devtools/client/framework/components/toolbox-tabs.js b/devtools/client/framework/components/toolbox-tabs.js
index 83f8917be01b..279043308b1f 100644
--- a/devtools/client/framework/components/toolbox-tabs.js
+++ b/devtools/client/framework/components/toolbox-tabs.js
@@ -28,6 +28,7 @@ class ToolboxTabs extends Component {
       panelDefinitions: PropTypes.array,
       selectTool: PropTypes.func,
       toolbox: PropTypes.object,
+      visibleToolboxButtonCount: PropTypes.number.isRequired,
       L10N: PropTypes.object,
       onTabsOrderUpdated: PropTypes.func.isRequired,
     };
@@ -94,7 +95,8 @@ class ToolboxTabs extends Component {
    * Return true if we should update the overflowed tabs.
    */
   shouldUpdateToolboxTabs(prevProps, nextProps) {
-    if (prevProps.currentToolId !== nextProps.currentToolId) {
+    if (prevProps.currentToolId !== nextProps.currentToolId ||
+        prevProps.visibleToolboxButtonCount !== nextProps.visibleToolboxButtonCount) {
       return true;
     }
 
diff --git a/devtools/client/framework/components/toolbox-toolbar.js b/devtools/client/framework/components/toolbox-toolbar.js
index 9608732c312f..8f8b60fade48 100644
--- a/devtools/client/framework/components/toolbox-toolbar.js
+++ b/devtools/client/framework/components/toolbox-toolbar.js
@@ -76,6 +76,11 @@ class ToolboxToolbar extends Component {
       toolbox: PropTypes.object,
       // Call back function to detect tabs order updated.
       onTabsOrderUpdated: PropTypes.func.isRequired,
+      // Count of visible toolbox buttons which is used by ToolboxTabs component to
+      // recognize that the visibility of toolbox buttons were changed. Because in the
+      // component we cannot compare the visibility since the button definition instance
+      // in toolboxButtons will be unchanged.
+      visibleToolboxButtonCount: PropTypes.number,
     };
   }