Bug 1456849 - Part 1: Re-arrange the tool tabs if the visibility of command tools are changed. r=jdescottes
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Sun, 29 Apr 2018 10:52:10 +0900
changeset 416230 95f8c87c1d97ae309e795c09d5aff376c695156c
parent 416229 d10c828a7c3eb914687fe8bb6df31ceecc38df21
child 416231 37463107d7585e9854360a193e84f6ed519fb186
push id33920
push usertoros@mozilla.com
push dateMon, 30 Apr 2018 09:50:56 +0000
treeherdermozilla-central@f01311ae4951 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes
bugs1456849
milestone61.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1456849 - Part 1: Re-arrange the tool tabs if the visibility of command tools are changed. r=jdescottes MozReview-Commit-ID: EzUfqRUdK6I
devtools/client/framework/components/toolbox-controller.js
devtools/client/framework/components/toolbox-tabs.js
devtools/client/framework/components/toolbox-toolbar.js
--- 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() {