Bug 1358816: Part 2 - Use client rather than screen coordinates to calculate drag positions. r?florian draft
authorKris Maglione <maglione.k@gmail.com>
Sat, 22 Jul 2017 14:12:41 -0700
changeset 613813 ff979b98b4d2c934e0f224d8a88621daa2c6869f
parent 613812 bec00e5fabe9c882f533a73b6baa68f0854b8340
child 613820 b46998e60792d9f1b9e19e3e6b8ee707c5fba329
child 613825 0adcbdd64f3b6402037964218c38b977605cb518
push id69857
push usermaglione.k@gmail.com
push dateSat, 22 Jul 2017 21:16:41 +0000
reviewersflorian
bugs1358816
milestone56.0a1
Bug 1358816: Part 2 - Use client rather than screen coordinates to calculate drag positions. r?florian Calculating screen coordinates requires checking native widget bounds, which aren't usually cached, and can be expensive to retrieve. Checking client bounds gives the same results, but is much cheaper. MozReview-Commit-ID: 8vNanfRFyGA
browser/base/content/tabbrowser.xml
--- a/browser/base/content/tabbrowser.xml
+++ b/browser/base/content/tabbrowser.xml
@@ -6434,25 +6434,25 @@
 
           if (this.getAttribute("movingtab") != "true") {
             requestAnimationFrame(() => {
               this.setAttribute("movingtab", "true");
               this.selectedItem = draggedTab;
             });
           }
 
-          if (!("animLastScreenX" in draggedTab._dragData))
-            draggedTab._dragData.animLastScreenX = draggedTab._dragData.screenX;
-
-          let screenX = event.screenX;
-          if (screenX == draggedTab._dragData.animLastScreenX)
+          if (!("animLastClientX" in draggedTab._dragData))
+            draggedTab._dragData.animLastClientX = draggedTab._dragData.clientX;
+
+          let clientX = event.clientX;
+          if (clientX == draggedTab._dragData.animLastClientX)
             return;
 
           (async () => {
-            draggedTab._dragData.animLastScreenX = screenX;
+            draggedTab._dragData.animLastClientX = clientX;
 
             let tabWidth, rtl;
             let newIndex = -1;
             let oldIndex = "animDropIndex" in draggedTab._dragData ?
                            draggedTab._dragData.animDropIndex : draggedTab._tPos;
 
             let pinned = draggedTab.pinned;
             let numPinned = this.tabbrowser._numPinnedTabs;
@@ -6466,51 +6466,51 @@
                 tabs.reverse();
               tabWidth = draggedTab.getBoundingClientRect().width;
               draggedTab._dragData.tabWidth = tabWidth;
 
               // Move the dragged tab based on the mouse position.
 
               let leftTab = tabs[0];
               let rightTab = tabs[tabs.length - 1];
-              let tabScreenX = draggedTab.boxObject.screenX;
-              let translateX = screenX - draggedTab._dragData.screenX;
+              let tabClientX = draggedTab.boxObject.x;
+              let translateX = clientX - draggedTab._dragData.clientX;
               if (!pinned)
                 translateX += this.mTabstrip.scrollPosition - draggedTab._dragData.scrollX;
-              let leftBound = leftTab.boxObject.screenX - tabScreenX;
-              let rightBound = (rightTab.boxObject.screenX + rightTab.boxObject.width) -
-                               (tabScreenX + tabWidth);
+              let leftBound = leftTab.boxObject.x - tabClientX;
+              let rightBound = (rightTab.boxObject.x + rightTab.boxObject.width) -
+                               (tabClientX + tabWidth);
               translateX = Math.max(translateX, leftBound);
               translateX = Math.min(translateX, rightBound);
 
               requestAnimationFrame(() => {
                 draggedTab.style.transform = "translateX(" + translateX + "px)";
                 draggedTab._dragData.translateX = translateX;
               });
 
               // Determine what tab we're dragging over.
               // * Point of reference is the center of the dragged tab. If that
               //   point touches a background tab, the dragged tab would take that
               //   tab's position when dropped.
               // * We're doing a binary search in order to reduce the amount of
               //   tabs we need to check.
 
-              let tabCenter = tabScreenX + translateX + tabWidth / 2;
+              let tabCenter = tabClientX + translateX + tabWidth / 2;
               let low = 0;
               let high = tabs.length - 1;
               while (low <= high) {
                 let mid = Math.floor((low + high) / 2);
                 if (tabs[mid] == draggedTab &&
                     ++mid > high)
                   break;
                 let boxObject = tabs[mid].boxObject;
-                screenX = boxObject.screenX + getTabShift(tabs[mid], oldIndex);
-                if (screenX > tabCenter) {
+                clientX = boxObject.x + getTabShift(tabs[mid], oldIndex);
+                if (clientX > tabCenter) {
                   high = mid - 1;
-                } else if (screenX + boxObject.width < tabCenter) {
+                } else if (clientX + boxObject.width < tabCenter) {
                   low = mid + 1;
                 } else {
                   newIndex = tabs[mid]._tPos;
                   break;
                 }
               }
             });
 
@@ -7032,17 +7032,17 @@
         function clientX(ele) {
           return ele.getBoundingClientRect().left;
         }
         let tabOffsetX = clientX(tab) - clientX(this);
         tab._dragData = {
           offsetX: event.screenX - window.screenX - tabOffsetX,
           offsetY: event.screenY - window.screenY,
           scrollX: this.mTabstrip.scrollPosition,
-          screenX: event.screenX
+          clientX: event.clientX
         };
 
         event.stopPropagation();
       ]]></handler>
 
       <handler event="dragover"><![CDATA[
         var effects = this._getDropEffectForTabDrag(event);