Bug 1226272 - Part 3: Handle overflowed tabs. r=jdescottes
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Thu, 19 Apr 2018 18:48:53 +0900
changeset 468148 a30819ceb73420975af5ded60b0cfff0184435e1
parent 468147 59a62840bad1551a12d7a6535829a9cec94bbde5
child 468149 918f4ce27e41fae79c3c463988b2e4dbdc712866
push id9165
push userasasaki@mozilla.com
push dateThu, 26 Apr 2018 21:04:54 +0000
treeherdermozilla-beta@064c3804de2e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes
bugs1226272
milestone61.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1226272 - Part 3: Handle overflowed tabs. r=jdescottes MozReview-Commit-ID: 77V2VIbIp0l
devtools/client/framework/components/toolbox-tabs.js
devtools/client/framework/toolbox-tabs-order-manager.js
--- 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);