diff --git a/browser/modules/CustomizeMode.jsm b/browser/modules/CustomizeMode.jsm index 29bdac75fb3..d66277b25aa 100644 --- a/browser/modules/CustomizeMode.jsm +++ b/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; } }; diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css index 4aa9955684c..10904ae7877 100644 --- a/browser/themes/linux/browser.css +++ b/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 { diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css index 3cfae76aded..638d1ca59a1 100644 --- a/browser/themes/osx/browser.css +++ b/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"], diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css index 24333dbb407..ead04851c86 100644 --- a/browser/themes/windows/browser.css +++ b/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 {