Bug 770135 - Add a grabbing item effect when customizing, as well as some CSS polish. r=jaws.

browser/modules/CustomizeMode.jsm

@@ -290,10 +290,16 @@ CustomizeMode.prototype = {
       wrapper.setAttribute("flex", aNode.getAttribute("flex"));
     }
 
+    wrapper.addEventListener("mousedown", this);
+    wrapper.addEventListener("mouseup", this);
+
     return wrapper;
   },
 
   unwrapToolbarItem: function(aWrapper) {
+    aWrapper.removeEventListener("mousedown", this);
+    aWrapper.removeEventListener("mouseup", this);
+
     let toolbarItem = aWrapper.firstChild;
 
     if (aWrapper.hasAttribute("itemdisabled")) {
@@ -377,6 +383,12 @@ CustomizeMode.prototype = {
       case "dragexit":
         this._onDragExit(aEvent);
         break;
+      case "mousedown":
+        this._onMouseDown(aEvent);
+        break;
+      case "mouseup":
+        this._onMouseUp(aEvent);
+        break;
       case "keypress":
         if (aEvent.keyCode === aEvent.DOM_VK_ESCAPE) {
           this.exit();
@@ -460,6 +472,8 @@ CustomizeMode.prototype = {
     let draggedItemId = aEvent.dataTransfer.getData("text/toolbarwrapper-id/" + documentId);
     let draggedWrapper = document.getElementById("wrapper-" + draggedItemId);
 
+    draggedWrapper.removeAttribute("mousedown");
+
     let targetNode = aEvent.target;
     let targetParent = targetNode.parentNode;
     let targetArea = this._getCustomizableParent(targetNode);
@@ -572,6 +586,29 @@ CustomizeMode.prototype = {
       aElement = aElement.parentNode;
     }
     return null;
+  },
+
+  _onMouseDown: function(aEvent) {
+    let item = this._getWrapper(aEvent.target);
+    if (item) {
+      item.setAttribute("mousedown", "true");
+    }
+  },
+
+  _onMouseUp: function(aEvent) {
+    let item = this._getWrapper(aEvent.target);
+    if (item) {
+      item.removeAttribute("mousedown");
+    }
+  },
+
+  _getWrapper: function(aElement) {
+    while (aElement && aElement.localName != "toolbarpaletteitem") {
+      if (aElement.localName == "toolbar")
+        return null;
+      aElement = aElement.parentNode;
+    }
+    return aElement;
   }
 };
 

browser/themes/linux/browser.css

@@ -2205,6 +2205,20 @@ chatbox {
   padding: 1em;
 }
 
+toolbarpaletteitem {
+  cursor: -moz-grab;
+  transition: transform, background-color, border-color, box-shadow;
+  transition-duration: 0.5s, 10ms, 10ms, 10ms;
+  transition-timing-function: ease-in-out, linear, linear, linear;
+}
+
+toolbarpaletteitem[mousedown] {
+  box-shadow: inset 0 0 3px hsl(204,100%,40%);
+  cursor: -moz-grabbing;
+  opacity: 0.8;
+  transform: scale(1.1);
+}
+
 /* end Customization mode */
 
 .click-to-play-plugins-notification-content {

browser/themes/osx/browser.css

@@ -3637,6 +3637,20 @@ chatbox {
   padding: 1em;
 }
 
+toolbarpaletteitem {
+  cursor: -moz-grab;
+  transition: transform, background-color, border-color, box-shadow;
+  transition-duration: 0.5s, 10ms, 10ms, 10ms;
+  transition-timing-function: ease-in-out, linear, linear, linear;
+}
+
+toolbarpaletteitem[mousedown] {
+  box-shadow: inset 0 0 3px hsl(204,100%,40%);
+  cursor: -moz-grabbing;
+  opacity: 0.8;
+  transform: scale(1.1);
+}
+
 /* end Customization mode */
 
 panel[type="arrow"][popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="top"],

browser/themes/windows/browser.css

@@ -2968,6 +2968,20 @@ chatbox {
   padding: 1em;
 }
 
+toolbarpaletteitem {
+  cursor: -moz-grab;
+  transition: transform, background-color, border-color, box-shadow;
+  transition-duration: 0.5s, 10ms, 10ms, 10ms;
+  transition-timing-function: ease-in-out, linear, linear, linear;
+}
+
+toolbarpaletteitem[mousedown] {
+  box-shadow: inset 0 0 3px hsl(204,100%,40%);
+  cursor: -moz-grabbing;
+  opacity: 0.8;
+  transform: scale(1.1);
+}
+
 /* end Customization mode */
 
 .click-to-play-plugins-notification-content {