Bug 964204 - fix drag glitches in Australis panel and palette, r=mikedeboer
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Mon, 27 Jan 2014 18:44:34 +0000
changeset 165459 cdef896777c5d8eecc9101ee9a908ed47c22010e
parent 165458 3d88bd2aa13ff520b0e041e52d4f67aca284bf8f
child 165460 f6926dbcb4c4d112079e090f1d7d2408382bf485
push id26093
push usercbook@mozilla.com
push dateTue, 28 Jan 2014 12:45:25 +0000
treeherdermozilla-central@9499add966ba [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmikedeboer
bugs964204
milestone29.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 964204 - fix drag glitches in Australis panel and palette, r=mikedeboer
browser/components/customizableui/src/CustomizeMode.jsm
browser/components/customizableui/src/DragPositionManager.jsm
browser/themes/shared/customizableui/customizeMode.inc.css
--- a/browser/components/customizableui/src/CustomizeMode.jsm
+++ b/browser/components/customizableui/src/CustomizeMode.jsm
@@ -1406,20 +1406,23 @@ CustomizeMode.prototype = {
       // Otherwise, clear everything out:
       let positionManager = DragPositionManager.getManagerForArea(currentArea);
       positionManager.clearPlaceholders(currentArea, aNoTransition);
     }
   },
 
   _setGridDragActive: function(aDragOverNode, aDraggedItem, aValue) {
     let targetArea = this._getCustomizableParent(aDragOverNode);
+    let draggedWrapper = this.document.getElementById("wrapper-" + aDraggedItem.id);
+    let originArea = this._getCustomizableParent(draggedWrapper);
     let positionManager = DragPositionManager.getManagerForArea(targetArea);
     let draggedSize = this._getDragItemSize(aDragOverNode, aDraggedItem);
     let isWide = aDraggedItem.classList.contains(CustomizableUI.WIDE_PANEL_CLASS);
-    positionManager.insertPlaceholder(targetArea, aDragOverNode, isWide, draggedSize);
+    positionManager.insertPlaceholder(targetArea, aDragOverNode, isWide, draggedSize,
+                                      originArea == targetArea);
   },
 
   _getDragItemSize: function(aDragOverNode, aDraggedItem) {
     // Cache it good, cache it real good.
     if (!this._dragSizeMap)
       this._dragSizeMap = new WeakMap();
     if (!this._dragSizeMap.has(aDraggedItem))
       this._dragSizeMap.set(aDraggedItem, new WeakMap());
--- a/browser/components/customizableui/src/DragPositionManager.jsm
+++ b/browser/components/customizableui/src/DragPositionManager.jsm
@@ -121,17 +121,17 @@ AreaPositionManager.prototype = {
   },
 
   /**
    * "Insert" a "placeholder" by shifting the subsequent children out of the
    * way. We go through all the children, and shift them based on the position
    * they would have if we had inserted something before aBefore. We use CSS
    * transforms for this, which are CSS transitioned.
    */
-  insertPlaceholder: function(aContainer, aBefore, aWide, aSize) {
+  insertPlaceholder: function(aContainer, aBefore, aWide, aSize, aIsFromThisArea) {
     let isShifted = false;
     let shiftDown = aWide;
     for (let child of aContainer.children) {
       // Don't need to shift hidden nodes:
       if (child.getAttribute("hidden") == "true") {
         continue;
       }
       // If this is the node before which we're inserting, start shifting
@@ -152,27 +152,28 @@ AreaPositionManager.prototype = {
         isShifted = false;
       }
       if (isShifted) {
         // Conversely, if we're adding something before a wide node, for
         // simplicity's sake we move everything including the wide node down:
         if (this.__moveDown) {
           shiftDown = true;
         }
-        if (!this._lastPlaceholderInsertion) {
+        if (aIsFromThisArea && !this._lastPlaceholderInsertion) {
           child.setAttribute("notransition", "true");
         }
         // Determine the CSS transform based on the next node:
         child.style.transform = this._getNextPos(child, shiftDown, aSize);
       } else {
         // If we're not shifting this node, reset the transform
         child.style.transform = "";
       }
     }
-    if (aContainer.lastChild && !this._lastPlaceholderInsertion) {
+    if (aContainer.lastChild && aIsFromThisArea &&
+        !this._lastPlaceholderInsertion) {
       // Flush layout:
       aContainer.lastChild.getBoundingClientRect();
       // then remove all the [notransition]
       for (let child of aContainer.children) {
         child.removeAttribute("notransition");
       }
     }
     delete this.__moveDown;
--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -70,16 +70,17 @@ toolbarpaletteitem[mousedown] {
 }
 
 .panel-customization-placeholder,
 toolbarpaletteitem[place="palette"],
 toolbarpaletteitem[place="panel"] {
   transition: transform .3s ease-in-out;
 }
 
+toolbarpaletteitem[notransition].panel-customization-placeholder,
 toolbarpaletteitem[notransition][place="palette"],
 toolbarpaletteitem[notransition][place="panel"] {
   transition: none;
 }
 
 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon {
   transition: transform .3s cubic-bezier(.6, 2, .75, 1.5);
 }