Bug 963576 - Part 1 - Provide attributes/classes to style customization targets. r=Gijs

This commit is contained in:
Matthew Noorenberghe 2014-02-25 23:07:02 -08:00
parent 8eb84b80df
commit 983371f461
3 changed files with 38 additions and 2 deletions

View File

@ -628,7 +628,7 @@
overflowtarget="widget-overflow-list"
context="toolbar-context-menu">
<hbox id="nav-bar-customization-target" class="customization-target" flex="1">
<hbox id="nav-bar-customization-target" flex="1">
<toolbaritem id="urlbar-container" flex="400" persist="width"
forwarddisabled="true" title="&locationItem.title;" removable="false"
cui-areatype="toolbar"

View File

@ -794,6 +794,10 @@ let CustomizableUIInternal = {
}
gBuildAreas.get(aArea).add(aNode);
// Give a class to all customize targets to be used for styling in Customize Mode
let customizableNode = this.getCustomizeTargetForArea(aArea, window);
customizableNode.classList.add("customization-target");
},
registerBuildWindow: function(aWindow) {

View File

@ -1475,6 +1475,7 @@ CustomizeMode.prototype = {
this._cancelDragActive(this._dragOverItem);
this._dragOverItem = null;
}
this._updateToolbarCustomizationOutline(this.window);
this._showPanelCustomizationPlaceholders();
},
@ -1511,6 +1512,7 @@ CustomizeMode.prototype = {
this._setGridDragActive(aItem, draggedItem, aValue);
} else {
let targetArea = this._getCustomizableParent(aItem);
this._updateToolbarCustomizationOutline(window, targetArea);
let makeSpaceImmediately = false;
if (!gDraggingInToolbars.has(targetArea.id)) {
gDraggingInToolbars.add(targetArea.id);
@ -1545,6 +1547,7 @@ CustomizeMode.prototype = {
}
},
_cancelDragActive: function(aItem, aNextItem, aNoTransition) {
this._updateToolbarCustomizationOutline(aItem.ownerDocument.defaultView);
let currentArea = this._getCustomizableParent(aItem);
if (!currentArea) {
return;
@ -1771,7 +1774,36 @@ CustomizeMode.prototype = {
while (oldPlaceholders.length) {
contents.removeChild(oldPlaceholders[0]);
}
}
},
/**
* Update toolbar customization targets during drag events to add or remove
* outlines to indicate that an area is customizable.
*
* @param aWindow The XUL window in which outlines should be updated.
* @param {Element} [aToolbarArea=null] The element of the customizable toolbar area to add the
* outline to. If aToolbarArea is falsy, the outline will be
* removed from all toolbar areas.
*/
_updateToolbarCustomizationOutline: function(aWindow, aToolbarArea = null) {
// Remove the attribute from existing customization targets
for (let area of CustomizableUI.areas) {
if (CustomizableUI.getAreaType(area) != CustomizableUI.TYPE_TOOLBAR) {
continue;
}
let target = CustomizableUI.getCustomizeTargetForArea(area, aWindow);
target.removeAttribute("customizing-dragovertarget");
}
// Now set the attribute on the desired target
if (aToolbarArea) {
if (CustomizableUI.getAreaType(aToolbarArea.id) != CustomizableUI.TYPE_TOOLBAR)
return;
let target = CustomizableUI.getCustomizeTargetForArea(aToolbarArea.id, aWindow);
target.setAttribute("customizing-dragovertarget", true);
}
},
};
function __dumpDragData(aEvent, caller) {