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

This commit is contained in:
Mike Conley 2013-03-22 17:28:34 -04:00
parent 27dcaf5e0f
commit 12458680bc
4 changed files with 79 additions and 0 deletions

View File

@ -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;
}
};

View File

@ -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 {

View File

@ -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"],

View File

@ -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 {