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
--- 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);
}
});
},