Bug 1405063 - Adding a tab in the TabBar should be able to take an index to specify where to add the tab. r=honza draft
authorGabriel Luong <gabriel.luong@gmail.com>
Mon, 02 Oct 2017 14:14:22 -0400
changeset 673739 2316bd0777e1bb9ba56366ed66f8a7006bba9623
parent 673738 dd7266c2e716480ac13ecf3fd89a9133cbe4ebc7
child 734132 a7f65aec92a6b65a452e1d6c125749026073a5e2
push id82624
push userbmo:gl@mozilla.com
push dateMon, 02 Oct 2017 18:15:01 +0000
reviewershonza
bugs1405063
milestone58.0a1
Bug 1405063 - Adding a tab in the TabBar should be able to take an index to specify where to add the tab. r=honza MozReview-Commit-ID: 7uBKHdVTXR8
devtools/client/inspector/toolsidebar.js
devtools/client/shared/components/tabs/TabBar.js
--- a/devtools/client/inspector/toolsidebar.js
+++ b/devtools/client/inspector/toolsidebar.js
@@ -82,66 +82,69 @@ ToolSidebar.prototype = {
     });
 
     this._tabbar = this.ReactDOM.render(sidebar, this._tabbox);
   },
 
   /**
    * Register a side-panel tab.
    *
-   * @param {string} tab uniq id
-   * @param {string} title tab title
+   * @param {String} tab uniq id
+   * @param {String} title tab title
    * @param {React.Component} panel component. See `InspectorPanelTab` as an example.
-   * @param {boolean} selected true if the panel should be selected
+   * @param {Boolean} selected true if the panel should be selected
+   * @param {Number} index the position where the tab should be inserted
    */
-  addTab: function (id, title, panel, selected) {
-    this._tabbar.addTab(id, title, selected, panel);
+  addTab: function (id, title, panel, selected, index) {
+    this._tabbar.addTab(id, title, selected, panel, null, index);
     this.emit("new-tab-registered", id);
   },
 
   /**
    * Helper API for adding side-panels that use existing DOM nodes
    * (defined within inspector.xhtml) as the content.
    *
-   * @param {string} tab uniq id
-   * @param {string} title tab title
-   * @param {boolean} selected true if the panel should be selected
+   * @param {String} tab uniq id
+   * @param {String} title tab title
+   * @param {Boolean} selected true if the panel should be selected
+   * @param {Number} index the position where the tab should be inserted
    */
-  addExistingTab: function (id, title, selected) {
+  addExistingTab: function (id, title, selected, index) {
     let panel = this.InspectorTabPanel({
       id: id,
       idPrefix: this.TABPANEL_ID_PREFIX,
       key: id,
       title: title,
     });
 
-    this.addTab(id, title, panel, selected);
+    this.addTab(id, title, panel, selected, index);
   },
 
   /**
    * Helper API for adding side-panels that use existing <iframe> nodes
    * (defined within inspector.xhtml) as the content.
    * The document must have a title, which will be used as the name of the tab.
    *
-   * @param {string} tab uniq id
-   * @param {string} title tab title
-   * @param {string} url
-   * @param {boolean} selected true if the panel should be selected
+   * @param {String} tab uniq id
+   * @param {String} title tab title
+   * @param {String} url
+   * @param {Boolean} selected true if the panel should be selected
+   * @param {Number} index the position where the tab should be inserted
    */
-  addFrameTab: function (id, title, url, selected) {
+  addFrameTab: function (id, title, url, selected, index) {
     let panel = this.InspectorTabPanel({
       id: id,
       idPrefix: this.TABPANEL_ID_PREFIX,
       key: id,
       title: title,
       url: url,
       onMount: this.onSidePanelMounted.bind(this),
     });
 
-    this.addTab(id, title, panel, selected);
+    this.addTab(id, title, panel, selected, index);
   },
 
   onSidePanelMounted: function (content, props) {
     let iframe = content.querySelector("iframe");
     if (!iframe || iframe.getAttribute("src")) {
       return;
     }
 
--- a/devtools/client/shared/components/tabs/TabBar.js
+++ b/devtools/client/shared/components/tabs/TabBar.js
@@ -73,26 +73,31 @@ let Tabbar = createClass({
           panel,
           title: panel.props.title,
         })
       );
   },
 
   // Public API
 
-  addTab: function (id, title, selected = false, panel, url) {
+  addTab: function (id, title, selected = false, panel, url, index) {
     let tabs = this.state.tabs.slice();
-    tabs.push({id, title, panel, url});
+
+    if (index >= 0) {
+      tabs.splice(index, 0, {id, title, panel, url});
+    } else {
+      tabs.push({id, title, panel, url});
+    }
 
     let newState = Object.assign({}, this.state, {
       tabs: tabs,
     });
 
     if (selected) {
-      newState.activeTab = tabs.length - 1;
+      newState.activeTab = index >= 0 ? index : tabs.length - 1;
     }
 
     this.setState(newState, () => {
       if (this.props.onSelect && selected) {
         this.props.onSelect(id);
       }
     });
   },