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