Bug 1455573 - Part 2: Correspond to the extension tool tab. r?jdescottes
MozReview-Commit-ID: 34Qm2CENXiV
--- a/devtools/client/framework/components/toolbox-tab.js
+++ b/devtools/client/framework/components/toolbox-tab.js
@@ -36,31 +36,32 @@ class ToolboxTab extends Component {
src: icon
}),
];
}
render() {
const {panelDefinition, currentToolId, highlightedTools, selectTool,
focusedButton, focusButton} = this.props;
- const {id, tooltip, label, iconOnly} = panelDefinition;
+ const {id, extensionId, tooltip, label, iconOnly} = panelDefinition;
const isHighlighted = id === currentToolId;
const className = [
"devtools-tab",
currentToolId === id ? "selected" : "",
highlightedTools.has(id) ? "highlighted" : "",
iconOnly ? "devtools-tab-icon-only" : ""
].join(" ");
return button(
{
className,
id: `toolbox-tab-${id}`,
"data-id": id,
+ "data-extension-id": extensionId,
title: tooltip,
type: "button",
"aria-pressed": currentToolId === id ? "true" : "false",
tabIndex: focusedButton === id ? "0" : "-1",
onFocus: () => focusButton(id),
onMouseDown: () => selectTool(id, "tab_switch"),
onKeyDown: (evt) => {
if (evt.key === "Enter" || evt.key === " ") {
--- a/devtools/client/framework/components/toolbox-tabs.js
+++ b/devtools/client/framework/components/toolbox-tabs.js
@@ -234,17 +234,17 @@ class ToolboxTabs extends Component {
currentToolId,
focusButton,
focusedButton,
highlightedTools,
panelDefinitions,
selectTool,
} = this.props;
- this._tabsOrderManager.setOverflowedTabs(this.state.overflowedTabIds);
+ this._tabsOrderManager.setCurrentPanelDefinitions(panelDefinitions);
let tabs = panelDefinitions.map(panelDefinition => {
// Don't display overflowed tab.
if (!this.state.overflowedTabIds.includes(panelDefinition.id)) {
return ToolboxTab({
key: panelDefinition.id,
currentToolId,
focusButton,
--- a/devtools/client/framework/toolbox-tabs-order-manager.js
+++ b/devtools/client/framework/toolbox-tabs-order-manager.js
@@ -8,33 +8,33 @@ const Services = require("Services");
const PREFERENCE_NAME = "devtools.toolbox.tabsOrder";
/**
* Manage the order of devtools tabs.
*/
class ToolboxTabsOrderManager {
constructor(onOrderUpdated) {
this.onOrderUpdated = onOrderUpdated;
- this.overflowedTabIds = [];
+ this.currentPanelDefinitions = [];
this.onMouseDown = this.onMouseDown.bind(this);
this.onMouseMove = this.onMouseMove.bind(this);
this.onMouseOut = this.onMouseOut.bind(this);
this.onMouseUp = this.onMouseUp.bind(this);
Services.prefs.addObserver(PREFERENCE_NAME, this.onOrderUpdated);
}
destroy() {
Services.prefs.removeObserver(PREFERENCE_NAME, this.onOrderUpdated);
this.onMouseUp();
}
- setOverflowedTabs(overflowedTabIds) {
- this.overflowedTabIds = overflowedTabIds;
+ setCurrentPanelDefinitions(currentPanelDefinitions) {
+ this.currentPanelDefinitions = currentPanelDefinitions;
}
onMouseDown(e) {
if (!e.target.classList.contains("devtools-tab")) {
return;
}
this.dragStartX = e.pageX;
@@ -111,21 +111,26 @@ class ToolboxTabsOrderManager {
if (!this.dragTarget) {
// The case in here has two type:
// 1. Although destroy method was called, it was not during reordering.
// 2. Although mouse event occur, destroy method was called during reordering.
return;
}
if (this.isOrderUpdated) {
- const ids =
- [...this.toolboxTabsElement.querySelectorAll(".devtools-tab")]
- .map(tabElement => tabElement.dataset.id)
- .concat(this.overflowedTabIds);
- const pref = ids.join(",");
+ const tabs = [...this.toolboxTabsElement.querySelectorAll(".devtools-tab")];
+ const tabIds = tabs.map(tab => tab.dataset.extensionId || tab.dataset.id);
+ // Concat the overflowed tabs id since they are not contained in visible tabs.
+ // The overflowed tabs cannot be reordered so we just append the id from current
+ // panel definitions on their order.
+ const overflowedTabIds =
+ this.currentPanelDefinitions
+ .filter(definition => !tabs.some(tab => tab.dataset.id === definition.id))
+ .map(definition => definition.extensionId || definition.id);
+ const pref = tabIds.concat(overflowedTabIds).join(",");
Services.prefs.setCharPref(PREFERENCE_NAME, pref);
}
this.dragTarget.ownerDocument.removeEventListener("mousemove", this.onMouseMove);
this.dragTarget.ownerDocument.removeEventListener("mouseout", this.onMouseOut);
this.dragTarget.ownerDocument.removeEventListener("mouseup", this.onMouseUp);
this.toolboxContainerElement.classList.remove("tabs-reordering");
@@ -146,18 +151,18 @@ function sortPanelDefinitions(definition
: definition.ordinal
);
});
}
const toolIds = pref.split(",");
return definitions.sort((a, b) => {
- let orderA = toolIds.indexOf(a.id);
- let orderB = toolIds.indexOf(b.id);
+ let orderA = toolIds.indexOf(a.extensionId || a.id);
+ let orderB = toolIds.indexOf(b.extensionId || b.id);
orderA = orderA < 0 ? Number.MAX_VALUE : orderA;
orderB = orderB < 0 ? Number.MAX_VALUE : orderB;
return orderA - orderB;
});
}
module.exports.ToolboxTabsOrderManager = ToolboxTabsOrderManager;
module.exports.sortPanelDefinitions = sortPanelDefinitions;