Bug 992373 - Items in the panel jump up slightly when the customization transition finishes. r=Gijs, mikedeboer.

browser/components/customizableui/src/CustomizeMode.jsm

@@ -1603,6 +1603,7 @@ CustomizeMode.prototype = {
     }
     this._updateToolbarCustomizationOutline(this.window);
     this._showPanelCustomizationPlaceholders();
+    DragPositionManager.stop();
   },
 
   _isUnwantedDragDrop: function(aEvent) {

browser/components/customizableui/src/DragPositionManager.jsm

@@ -332,20 +332,36 @@ AreaPositionManager.prototype = {
   _lazyStoreGet: function(aNode) {
     let rect = this._nodePositionStore.get(aNode);
     if (!rect) {
-      rect = aNode.getBoundingClientRect();
+      // getBoundingClientRect() returns a DOMRect that is live, meaning that
+      // as the element moves around, the rects values change. We don't want
+      // that - we want a snapshot of what the rect values are right at this
+      // moment, and nothing else. So we have to clone the values.
+      let clientRect = aNode.getBoundingClientRect();
+      rect = {
+        left: clientRect.left,
+        right: clientRect.right,
+        width: clientRect.width,
+        height: clientRect.height,
+        top: clientRect.top,
+        bottom: clientRect.bottom,
+      };
       rect.x = rect.left + rect.width / 2;
       rect.y = rect.top + rect.height / 2;
+      Object.freeze(rect);
       this._nodePositionStore.set(aNode, rect);
     }
     return rect;
   },
 
   _firstInRow: function(aNode) {
-    let bound = this._lazyStoreGet(aNode).top;
+    // XXXmconley: I'm not entirely sure why we need to take the floor of these
+    // values - it looks like, periodically, we're getting fractional pixels back
+    //from lazyStoreGet. I've filed bug 994247 to investigate.
+    let bound = Math.floor(this._lazyStoreGet(aNode).top);
     let rv = aNode;
     let prev;
     while (rv && (prev = this._getVisibleSiblingForDirection(rv, "previous"))) {
-      if (this._lazyStoreGet(prev).bottom <= bound) {
+      if (Math.floor(this._lazyStoreGet(prev).bottom) <= bound) {
         return rv;
       }
       rv = prev;

browser/themes/shared/customizableui/panelUIOverlay.inc.css

@@ -244,7 +244,6 @@ panelview:not([mainview]) .toolbarbutton-text,
 
 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
 .panelUI-grid .toolbarbutton-1,
-toolbarpaletteitem[place="panel"]:not([haswideitem=true]),
 .panel-customization-placeholder-child {
   -moz-appearance: none;
   -moz-box-orient: vertical;
@@ -918,10 +917,14 @@ toolbarpaletteitem[place="palette"] > #search-container {
 
 /* Make direct siblings overlap borders: */
 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons@inAnyPanel@ {
-  margin-top: -1px;
   border-top-color: transparent !important;
 }
 
+.toolbaritem-combined-buttons + .toolbaritem-combined-buttons@inAnyPanel@,
+toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
+  margin-top: -1px;
+}
+
 .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton {
   border: 0;
   padding: .5em;