--- a/devtools/client/framework/components/toolbox-controller.js
+++ b/devtools/client/framework/components/toolbox-controller.js
@@ -17,16 +17,17 @@ class ToolboxController extends Componen
   constructor(props, context) {
     super(props, context);
 
     // See the ToolboxToolbar propTypes for documentation on each of these items in
     // state, and for the definitions of the props that are expected to be passed in.
     this.state = {
       focusedButton: ELEMENT_PICKER_ID,
       toolboxButtons: [],
+      visibleToolboxButtonCount: 0,
       currentToolId: null,
       highlightedTools: new Set(),
       panelDefinitions: [],
       hostTypes: [],
       currentHostType: undefined,
       areDockOptionsEnabled: true,
       canCloseToolbox: true,
       isSplitConsoleActive: false,
@@ -167,17 +168,20 @@ class ToolboxController extends Componen
     // Listen for updates of the checked attribute.
     this.state.toolboxButtons.forEach(button => {
       button.off("updatechecked", this.state.checkedButtonsUpdated);
     });
     toolboxButtons.forEach(button => {
       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() {
     return ToolboxToolbar(Object.assign({}, this.props, this.state));
   }
 }
 
 module.exports = ToolboxController;

--- a/devtools/client/framework/components/toolbox-tabs.js
+++ b/devtools/client/framework/components/toolbox-tabs.js
@@ -23,16 +23,17 @@ class ToolboxTabs extends Component {
     return {
       currentToolId: PropTypes.string,
       focusButton: PropTypes.func,
       focusedButton: PropTypes.string,
       highlightedTools: PropTypes.object,
       panelDefinitions: PropTypes.array,
       selectTool: PropTypes.func,
       toolbox: PropTypes.object,
+      visibleToolboxButtonCount: PropTypes.number.isRequired,
       L10N: PropTypes.object,
       onTabsOrderUpdated: PropTypes.func.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
 
@@ -89,17 +90,18 @@ class ToolboxTabs extends Component {
     // For example, the case of changing the tab's order.
     return prevPanels.join("-") === nextPanels.join("-");
   }
 
   /**
    * 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;
     }
 
     let prevPanels = prevProps.panelDefinitions.map(def => def.id);
     let nextPanels = nextProps.panelDefinitions.map(def => def.id);
     return !this.equalToolIdArray(prevPanels, nextPanels);
   }
 

--- a/devtools/client/framework/components/toolbox-toolbar.js
+++ b/devtools/client/framework/components/toolbox-toolbar.js
@@ -71,16 +71,21 @@ class ToolboxToolbar extends Component {
       // it to render nicely.
       canRender: PropTypes.bool,
       // Localization interface.
       L10N: PropTypes.object,
       // The devtools toolbox
       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,
     };
   }
 
   /**
    * The render function is kept fairly short for maintainability. See the individual
    * render functions for how each of the sections is rendered.
    */
   render() {