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

devtools/client/framework/components/ToolboxTabs.js

@@ -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() {

devtools/client/framework/toolbox-tabs-order-manager.js

@@ -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;