зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1488660 - Fix devtools tab reordering in RTL locales;r=daisuke
Differential Revision: https://phabricator.services.mozilla.com/D6910 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Родитель
235e8fa384
Коммит
8a409ae0b7
|
@ -60,8 +60,9 @@ class ToolboxTabs extends Component {
|
|||
this._resizeTimerId = null;
|
||||
this.resizeHandler = this.resizeHandler.bind(this);
|
||||
|
||||
const { toolbox, onTabsOrderUpdated, panelDefinitions } = props;
|
||||
this._tabsOrderManager =
|
||||
new ToolboxTabsOrderManager(props.onTabsOrderUpdated, props.panelDefinitions);
|
||||
new ToolboxTabsOrderManager(toolbox, onTabsOrderUpdated, panelDefinitions);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
|
|
@ -15,7 +15,8 @@ const PREFERENCE_NAME = "devtools.toolbox.tabsOrder";
|
|||
* Manage the order of devtools tabs.
|
||||
*/
|
||||
class ToolboxTabsOrderManager {
|
||||
constructor(onOrderUpdated, panelDefinitions) {
|
||||
constructor(toolbox, onOrderUpdated, panelDefinitions) {
|
||||
this.toolbox = toolbox;
|
||||
this.onOrderUpdated = onOrderUpdated;
|
||||
this.currentPanelDefinitions = panelDefinitions || [];
|
||||
|
||||
|
@ -53,6 +54,10 @@ class ToolboxTabsOrderManager {
|
|||
tabElement.nextSibling.id === "tools-chevron-menu-button";
|
||||
}
|
||||
|
||||
isRTL() {
|
||||
return this.toolbox.direction === "rtl";
|
||||
}
|
||||
|
||||
async saveOrderPreference() {
|
||||
const tabs = [...this.toolboxTabsElement.querySelectorAll(".devtools-tab")];
|
||||
const tabIds = tabs.map(tab => tab.dataset.extensionId || tab.dataset.id);
|
||||
|
@ -104,26 +109,34 @@ class ToolboxTabsOrderManager {
|
|||
|
||||
onMouseMove(e) {
|
||||
const diffPageX = e.pageX - this.previousPageX;
|
||||
const dragTargetCenterX =
|
||||
let dragTargetCenterX =
|
||||
this.dragTarget.offsetLeft + diffPageX + this.dragTarget.clientWidth / 2;
|
||||
let isDragTargetPreviousSibling = false;
|
||||
|
||||
for (const tabElement of this.toolboxTabsElement.querySelectorAll(".devtools-tab")) {
|
||||
const tabElements = this.toolboxTabsElement.querySelectorAll(".devtools-tab");
|
||||
|
||||
// Calculate the minimum and maximum X-offset that can be valid for the drag target.
|
||||
const firstElement = tabElements[0];
|
||||
const firstElementCenterX = firstElement.offsetLeft + firstElement.clientWidth / 2;
|
||||
const lastElement = tabElements[tabElements.length - 1];
|
||||
const lastElementCenterX = lastElement.offsetLeft + lastElement.clientWidth / 2;
|
||||
const max = Math.max(firstElementCenterX, lastElementCenterX);
|
||||
const min = Math.min(firstElementCenterX, lastElementCenterX);
|
||||
|
||||
// Normalize the target center X so to remain between the first and last tab.
|
||||
dragTargetCenterX = Math.min(max, dragTargetCenterX);
|
||||
dragTargetCenterX = Math.max(min, dragTargetCenterX);
|
||||
|
||||
for (const tabElement of tabElements) {
|
||||
if (tabElement === this.dragTarget) {
|
||||
isDragTargetPreviousSibling = true;
|
||||
continue;
|
||||
}
|
||||
|
||||
// Is the dragTarget near the center of the other tab?
|
||||
const anotherCenterX = tabElement.offsetLeft + tabElement.clientWidth / 2;
|
||||
const isReplaceable =
|
||||
// Is the dragTarget near the center of the other tab?
|
||||
Math.abs(dragTargetCenterX - anotherCenterX) < tabElement.clientWidth / 3 ||
|
||||
// Has the dragTarget moved before the first tab
|
||||
// (mouse moved too fast between two events)
|
||||
(this.isFirstTab(tabElement) && dragTargetCenterX < anotherCenterX) ||
|
||||
// Has the dragTarget moved after the last tab
|
||||
// (mouse moved too fast between two events)
|
||||
(this.isLastTab(tabElement) && anotherCenterX < dragTargetCenterX);
|
||||
const distanceWithDragTarget = Math.abs(dragTargetCenterX - anotherCenterX);
|
||||
const isReplaceable = distanceWithDragTarget < tabElement.clientWidth / 3;
|
||||
|
||||
if (isReplaceable) {
|
||||
const replaceableElement =
|
||||
|
@ -135,8 +148,15 @@ class ToolboxTabsOrderManager {
|
|||
|
||||
let distance = e.pageX - this.dragStartX;
|
||||
|
||||
if ((this.isFirstTab(this.dragTarget) && distance < 0) ||
|
||||
(this.isLastTab(this.dragTarget) && distance > 0)) {
|
||||
// To accomodate for RTL locales, we cannot rely on the first/last element of the
|
||||
// NodeList. We cannot have negative distances for the leftmost tab, and we cannot
|
||||
// have positive distances for the rightmost tab.
|
||||
const isFirstTab = this.isFirstTab(this.dragTarget);
|
||||
const isLastTab = this.isLastTab(this.dragTarget);
|
||||
const isLeftmostTab = this.isRTL() ? isLastTab : isFirstTab;
|
||||
const isRightmostTab = this.isRTL() ? isFirstTab : isLastTab;
|
||||
|
||||
if ((isLeftmostTab && distance < 0) || (isRightmostTab && 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;
|
||||
|
|
Загрузка…
Ссылка в новой задаче