Bug 1226272 - Part 3: Handle overflowed tabs. r?jdescottes
MozReview-Commit-ID: 77V2VIbIp0l
--- a/devtools/client/framework/components/toolbox-tabs.js
+++ b/devtools/client/framework/components/toolbox-tabs.js
@@ -234,16 +234,18 @@ class ToolboxTabs extends Component {
currentToolId,
focusButton,
focusedButton,
highlightedTools,
panelDefinitions,
selectTool,
} = this.props;
+ this._tabsOrderManager.setOverflowedTabs(this.state.overflowedTabIds);
+
let tabs = panelDefinitions.map(panelDefinition => {
// Don't display overflowed tab.
if (!this.state.overflowedTabIds.includes(panelDefinition.id)) {
return ToolboxTab({
key: panelDefinition.id,
currentToolId,
focusButton,
focusedButton,
--- a/devtools/client/framework/toolbox-tabs-order-manager.js
+++ b/devtools/client/framework/toolbox-tabs-order-manager.js
@@ -8,30 +8,35 @@ 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.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;
+ }
+
onMouseDown(e) {
if (!e.target.classList.contains("devtools-tab")) {
return;
}
this.dragStartX = e.pageX;
this.dragTarget = e.target;
this.previousPageX = e.pageX;
@@ -78,17 +83,19 @@ class ToolboxTabsOrderManager {
this.isOrderUpdated = true;
break;
}
}
let distance = e.pageX - this.dragStartX;
if ((!this.dragTarget.previousSibling && distance < 0) ||
- (!this.dragTarget.nextSibling && distance > 0)) {
+ ((!this.dragTarget.nextSibling ||
+ this.dragTarget.nextSibling.id === "tools-chevron-menu-button") &&
+ distance > 0)) {
// If the drag target is already edge of the tabs and the mouse will make the
// element to move to same direction more, keep the position.
distance = 0;
}
this.dragTarget.style.left = `${ distance }px`;
this.previousPageX = e.pageX;
}
@@ -106,17 +113,18 @@ class ToolboxTabsOrderManager {
// 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);
+ .map(tabElement => tabElement.dataset.id)
+ .concat(this.overflowedTabIds);
const pref = ids.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);