mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1354117 - remove old panel code from customize mode and update related CSS, r=jaws 

MozReview-Commit-ID: IwKUWMTagCK

--HG--
extra : rebase_source : e6c54f3b5d6115574f22f31380a4a07601776d1c
This commit is contained in:
Gijs Kruitbosch 2017-08-02 11:51:58 +01:00
Родитель 45b4d7f5f4
Коммит f1b0d2d8c3
7 изменённых файлов: 163 добавлений и 499 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

60
browser/base/content/browser.css
Просмотреть файл

@ -1254,24 +1254,22 @@ toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > #downloads-
#customization-container {
-moz-box-orient: horizontal;
}
#customization-container[photon] {
display: flex;
flex-direction: column;
}
#customization-container[photon] > #customization-content-container {
#customization-container:not([hidden]) {
/* In a separate rule to avoid 'display:flex' causing the node to be
* displayed while the container is still hidden. */
display: flex;
}
#customization-content-container {
display: flex;
flex-grow: 1; /* Grow so there isn't empty space below the footer */
min-height: 0; /* Allow this to shrink so the footer doesn't get pushed out. */
}
#customization-container[photon] > #customization-content-container > #customization-palette-container {
flex-grow: 1;
}
#customization-container[photon] #customization-panelHolder {
#customization-panelHolder {
padding-top: 10px;
padding-bottom: 10px;
}
@ -1284,25 +1282,15 @@ toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > #downloads-
overflow-x: hidden;
}
#customization-container:not([photon]) #customization-panelHolder {
overflow-y: hidden;
}
#customization-container[photon] #customization-panel-container {
display: flex;
flex-direction: column;
flex: none;
}
#customization-container[photon] #customization-panelWrapper,
#customization-container[photon] #customization-panelWrapper > .panel-arrowcontent,
#customization-container[photon] #customization-panelHolder {
#customization-panelWrapper,
#customization-panelWrapper > .panel-arrowcontent,
#customization-panelHolder {
flex-direction: column;
display: flex;
min-height: 0;
}
#customization-container[photon] #customization-panelWrapper {
#customization-panelWrapper {
flex: 1 1 auto;
height: 0; /* Don't let my contents affect ancestors' content-based sizing */
align-items: end; /* align to the end on the cross-axis (affects arrow) */
@ -1313,28 +1301,11 @@ toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > #downloads-
-moz-box-flex: 1;
}
#customization-container:not([photon]) #customization-panelWrapper > .panel-arrowcontent {
overflow: hidden;
}
#customization-panelHolder > #PanelUI-mainView {
display: flex;
flex-direction: column;
/* Hack alert - by manually setting the preferred height to 0, we convince
#PanelUI-mainView to shrink when the window gets smaller in customization
mode. Not sure why that is - might have to do with our intermingling of
XUL flex, and CSS3 Flexbox. */
height: 0;
}
#customization-panelHolder > #PanelUI-mainView > #PanelUI-contents-scroller {
display: flex;
flex: auto;
flex-direction: column;
}
#customization-panel-container {
overflow-y: auto;
display: flex;
flex-direction: column;
flex: none;
}
toolbarpaletteitem[dragover] {
@ -1345,6 +1316,7 @@ toolbarpaletteitem[dragover] {
#customization-palette-container {
display: flex;
flex-direction: column;
flex-grow: 1;
}
#customization-palette:not([hidden]) {

296
browser/components/customizableui/CustomizeMode.jsm
Просмотреть файл

@ -42,9 +42,6 @@ XPCOMUtils.defineLazyGetter(this, "gWidgetsBundle", function() {
return Services.strings.createBundle(kUrl);
});
XPCOMUtils.defineLazyPreferenceGetter(this, "gPhotonStructure",
"browser.photon.structure.enabled", false);
let gDebug;
XPCOMUtils.defineLazyGetter(this, "log", () => {
let scope = {};
@ -141,10 +138,6 @@ CustomizeMode.prototype = {
_skipSourceNodeCheck: null,
_mainViewContext: null,
get panelUIContents() {
return this.document.getElementById("PanelUI-contents");
},
get _handler() {
return this.window.CustomizationHandler;
},
@ -289,80 +282,14 @@ CustomizeMode.prototype = {
window.PanelUI.hide();
let panelHolder = document.getElementById("customization-panelHolder");
let panelContainer = document.getElementById("customization-panel-container");
let customizationContainer = document.getElementById("customization-container");
let paletteContainer = document.getElementById("customization-palette-container");
let contentContainer = document.getElementById("customization-content-container");
let footer = document.getElementById("customization-footer");
let doneButton = document.getElementById("customization-done-button");
let panelContextMenu = document.getElementById(kPanelItemContextMenu);
this._previousPanelContextMenuParent = panelContextMenu.parentNode;
document.getElementById("mainPopupSet").appendChild(panelContextMenu);
if (gPhotonStructure) {
if (!customizationContainer.hasAttribute("photon")) {
contentContainer.appendChild(paletteContainer);
contentContainer.appendChild(panelContainer);
customizationContainer.appendChild(footer);
customizationContainer.setAttribute("photon", "true");
doneButton.hidden = false;
}
panelHolder.appendChild(window.PanelUI.overflowFixedList);
window.PanelUI.overflowFixedList.setAttribute("customizing", true);
window.PanelUI.menuButton.disabled = true;
document.getElementById("nav-bar-overflow-button").disabled = true;
} else {
if (customizationContainer.hasAttribute("photon")) {
customizationContainer.insertBefore(paletteContainer, contentContainer);
customizationContainer.appendChild(panelContainer);
paletteContainer.appendChild(footer);
customizationContainer.removeAttribute("photon");
doneButton.hidden = true;
}
window.PanelUI.menuButton.addEventListener("command", this);
window.PanelUI.menuButton.open = true;
window.PanelUI.beginBatchUpdate();
panelHolder.appendChild(window.PanelUI.overflowFixedList);
// The menu panel is lazy, and registers itself when the popup shows.
// If it hasn't been opened yet, we need to force the menu panel to
// register itself, or else customization is not going to work.
// We pass "true" to ensureReady to indicate that we're handling
// calling startBatchUpdate and endBatchUpdate.
if (!window.PanelUI.isReady) {
await window.PanelUI.ensureReady(true);
// Up to now, it will have been hidden, and its XBL bindings won't have
// been constructed. Unhiding it won't trigger the construction of
// those bindings immediately, but the next layout flush will.
// Because we don't want to sync flush layout, we wait for the next
// natural style/layout flush.
await new Promise(resolve => window.requestIdleCallback(resolve));
}
// Hide the palette before starting the transition for increased perf.
this.visiblePalette.hidden = true;
this.visiblePalette.removeAttribute("showing");
if (!AppConstants.MOZ_PHOTON_THEME) {
// Disable the button-text fade-out mask
// during the transition for increased perf.
window.PanelUI.contents.setAttribute("customize-transitioning", "true");
}
// Move the mainView in the panel to the holder so that we can see it
// while customizing.
let mainView = window.PanelUI.mainView;
panelHolder.appendChild(mainView);
let customizeButton = document.getElementById("PanelUI-customize");
customizeButton.setAttribute("enterLabel", customizeButton.getAttribute("label"));
customizeButton.setAttribute("label", customizeButton.getAttribute("exitLabel"));
customizeButton.setAttribute("enterTooltiptext", customizeButton.getAttribute("tooltiptext"));
customizeButton.setAttribute("tooltiptext", customizeButton.getAttribute("exitTooltiptext"));
this._mainViewContext = mainView.getAttribute("context");
if (this._mainViewContext) {
mainView.removeAttribute("context");
}
}
window.PanelUI.overflowFixedList.setAttribute("customizing", true);
window.PanelUI.menuButton.disabled = true;
document.getElementById("nav-bar-overflow-button").disabled = true;
this._transitioning = true;
@ -383,10 +310,6 @@ CustomizeMode.prototype = {
// Let everybody in this window know that we're about to customize.
CustomizableUI.dispatchToolboxEvent("customizationstarting", {}, window);
if (!gPhotonStructure) {
this._showPanelCustomizationPlaceholders();
}
await this._wrapToolbarItems();
this.populatePalette();
@ -394,11 +317,6 @@ CustomizeMode.prototype = {
window.gNavToolbox.addEventListener("toolbarvisibilitychange", this);
if (!gPhotonStructure) {
document.getElementById("PanelUI-help").setAttribute("disabled", true);
document.getElementById("PanelUI-quit").setAttribute("disabled", true);
}
this._updateResetButton();
this._updateUndoResetButton();
@ -406,9 +324,6 @@ CustomizeMode.prototype = {
Services.prefs.getBoolPref(kSkipSourceNodePref);
CustomizableUI.addListener(this);
if (!gPhotonStructure) {
window.PanelUI.endBatchUpdate();
}
this._customizing = true;
this._transitioning = false;
@ -428,26 +343,14 @@ CustomizeMode.prototype = {
}
this._handler.isEnteringCustomizeMode = false;
if (!gPhotonStructure) {
window.PanelUI.contents.removeAttribute("customize-transitioning");
}
CustomizableUI.dispatchToolboxEvent("customizationready", {}, window);
this._enableOutlinesTimeout = window.setTimeout(() => {
this.document.getElementById("nav-bar").setAttribute("showoutline", "true");
if (!gPhotonStructure) {
this.panelUIContents.setAttribute("showoutline", "true");
}
delete this._enableOutlinesTimeout;
}, 0);
if (!this._wantToBeInCustomizeMode) {
this.exit();
}
})().catch(e => {
log.error("Error entering customize mode", e);
// We should ensure this has been called, and calling it again doesn't hurt:
window.PanelUI.endBatchUpdate();
this._handler.isEnteringCustomizeMode = false;
// Exit customize mode to ensure proper clean-up when entering failed.
this.exit();
@ -478,26 +381,11 @@ CustomizeMode.prototype = {
this._handler.isExitingCustomizeMode = true;
if (this._enableOutlinesTimeout) {
this.window.clearTimeout(this._enableOutlinesTimeout);
} else {
this.document.getElementById("nav-bar").removeAttribute("showoutline");
this.panelUIContents.removeAttribute("showoutline");
}
this._removeExtraToolbarsIfEmpty();
CustomizableUI.removeListener(this);
this.document.removeEventListener("keypress", this);
if (!gPhotonStructure) {
this.window.PanelUI.menuButton.removeEventListener("command", this);
this.window.PanelUI.menuButton.open = false;
this.window.PanelUI.beginBatchUpdate();
this._removePanelCustomizationPlaceholders();
}
let window = this.window;
let document = this.document;
@ -507,13 +395,6 @@ CustomizeMode.prototype = {
this.visiblePalette.removeAttribute("showing");
this.paletteEmptyNotice.hidden = true;
if (!gPhotonStructure) {
// Disable the button-text fade-out mask
// during the transition for increased perf.
let panelContents = window.PanelUI.contents;
panelContents.setAttribute("customize-transitioning", "true");
}
// Disable the reset and undo reset buttons while transitioning:
let resetButton = this.document.getElementById("customization-reset-button");
let undoResetButton = this.document.getElementById("customization-undo-reset-button");
@ -564,26 +445,9 @@ CustomizeMode.prototype = {
CustomizableUI.dispatchToolboxEvent("customizationending", {}, window);
window.PanelUI.menuButton.disabled = false;
if (gPhotonStructure) {
let overflowContainer = document.getElementById("widget-overflow-scroller");
overflowContainer.appendChild(window.PanelUI.overflowFixedList);
document.getElementById("nav-bar-overflow-button").disabled = false;
} else {
window.PanelUI.setMainView(window.PanelUI.mainView);
let customizeButton = document.getElementById("PanelUI-customize");
customizeButton.setAttribute("exitLabel", customizeButton.getAttribute("label"));
customizeButton.setAttribute("label", customizeButton.getAttribute("enterLabel"));
customizeButton.setAttribute("exitTooltiptext", customizeButton.getAttribute("tooltiptext"));
customizeButton.setAttribute("tooltiptext", customizeButton.getAttribute("enterTooltiptext"));
// We have to use setAttribute/removeAttribute here instead of the
// property because the XBL property will be set later, and right
// now we'd be setting an expando, which breaks the XBL property.
document.getElementById("PanelUI-help").removeAttribute("disabled");
document.getElementById("PanelUI-quit").removeAttribute("disabled");
this.panelUIContents.removeAttribute("customize-transitioning");
}
let overflowContainer = document.getElementById("widget-overflow-scroller");
overflowContainer.appendChild(window.PanelUI.overflowFixedList);
document.getElementById("nav-bar-overflow-button").disabled = false;
let panelContextMenu = document.getElementById(kPanelItemContextMenu);
this._previousPanelContextMenuParent.appendChild(panelContextMenu);
@ -592,20 +456,10 @@ CustomizeMode.prototype = {
// customization mode for a second time.
this._customizing = false;
if (!gPhotonStructure) {
let mainView = window.PanelUI.mainView;
if (this._mainViewContext) {
mainView.setAttribute("context", this._mainViewContext);
}
}
let customizableToolbars = document.querySelectorAll("toolbar[customizable=true]:not([autohide=true])");
for (let toolbar of customizableToolbars)
toolbar.removeAttribute("customizing");
if (!gPhotonStructure) {
this.window.PanelUI.endBatchUpdate();
}
delete this._lastLightweightTheme;
this._changed = false;
this._transitioning = false;
@ -618,10 +472,6 @@ CustomizeMode.prototype = {
}
})().catch(e => {
log.error("Error exiting customize mode", e);
if (!gPhotonStructure) {
// We should ensure this has been called, and calling it again doesn't hurt:
window.PanelUI.endBatchUpdate();
}
this._handler.isExitingCustomizeMode = false;
});
},
@ -810,8 +660,7 @@ CustomizeMode.prototype = {
if (aNode.localName == "toolbarpaletteitem" && aNode.firstChild) {
aNode = aNode.firstChild;
}
let panel = gPhotonStructure ? CustomizableUI.AREA_FIXED_OVERFLOW_PANEL
: CustomizableUI.AREA_PANEL;
let panel = CustomizableUI.AREA_FIXED_OVERFLOW_PANEL;
CustomizableUI.addWidgetToArea(aNode.id, panel);
if (!this._customizing) {
CustomizableUI.dispatchToolboxEvent("customizationchange");
@ -860,10 +709,8 @@ CustomizeMode.prototype = {
fragment.appendChild(paletteItem);
}
if (gPhotonStructure) {
let flexSpace = CustomizableUI.createSpecialWidget("spring", this.document);
fragment.appendChild(this.wrapToolbarItem(flexSpace, "palette"));
}
let flexSpace = CustomizableUI.createSpecialWidget("spring", this.document);
fragment.appendChild(this.wrapToolbarItem(flexSpace, "palette"));
this.visiblePalette.appendChild(fragment);
this._stowedPalette = this.window.gNavToolbox.palette;
@ -1164,7 +1011,7 @@ CustomizeMode.prototype = {
_addDragHandlers(aTarget) {
// Allow dropping on the padding of the arrow panel.
if (gPhotonStructure && aTarget.id == CustomizableUI.AREA_FIXED_OVERFLOW_PANEL) {
if (aTarget.id == CustomizableUI.AREA_FIXED_OVERFLOW_PANEL) {
aTarget = this.document.getElementById("customization-panelHolder");
}
aTarget.addEventListener("dragstart", this, true);
@ -1185,7 +1032,7 @@ CustomizeMode.prototype = {
_removeDragHandlers(aTarget) {
// Remove handler from different target if it was added to
// allow dropping on the padding of the arrow panel.
if (gPhotonStructure && aTarget.id == CustomizableUI.AREA_FIXED_OVERFLOW_PANEL) {
if (aTarget.id == CustomizableUI.AREA_FIXED_OVERFLOW_PANEL) {
aTarget = this.document.getElementById("customization-panelHolder");
}
aTarget.removeEventListener("dragstart", this, true);
@ -1249,7 +1096,6 @@ CustomizeMode.prototype = {
BrowserUITelemetry.countCustomizationEvent("reset");
btn.disabled = true;
return (async () => {
this._removePanelCustomizationPlaceholders();
await this.depopulatePalette();
await this._unwrapToolbarItems();
@ -1265,7 +1111,6 @@ CustomizeMode.prototype = {
this._updateResetButton();
this._updateUndoResetButton();
this._updateEmptyPaletteNotice();
this._showPanelCustomizationPlaceholders();
this.resetting = false;
if (!this._wantToBeInCustomizeMode) {
this.exit();
@ -1277,7 +1122,6 @@ CustomizeMode.prototype = {
this.resetting = true;
return (async () => {
this._removePanelCustomizationPlaceholders();
await this.depopulatePalette();
await this._unwrapToolbarItems();
@ -1324,9 +1168,6 @@ CustomizeMode.prototype = {
if (aContainer.ownerGlobal != this.window || this.resetting) {
return;
}
if (aContainer.id == CustomizableUI.AREA_PANEL) {
this._removePanelCustomizationPlaceholders();
}
// If we get called for widgets that aren't in the window yet, they might not have
// a parentNode at all.
if (aNodeToChange.parentNode) {
@ -1362,19 +1203,12 @@ CustomizeMode.prototype = {
this.visiblePalette.appendChild(paletteItem);
}
}
if (aContainer.id == CustomizableUI.AREA_PANEL) {
this._showPanelCustomizationPlaceholders();
}
},
onWidgetDestroyed(aWidgetId) {
let wrapper = this.document.getElementById("wrapper-" + aWidgetId);
if (wrapper) {
let wasInPanel = wrapper.parentNode == this.panelUIContents;
wrapper.remove();
if (wasInPanel) {
this._showPanelCustomizationPlaceholders();
}
}
},
@ -1396,7 +1230,6 @@ CustomizeMode.prototype = {
if (aContainer.ownerDocument == this.document) {
this._wrapItemsInArea(aContainer);
this._addDragHandlers(aContainer);
DragPositionManager.add(this.window, aArea, aContainer);
this.areas.add(aContainer);
}
},
@ -1405,7 +1238,6 @@ CustomizeMode.prototype = {
if (aContainer.ownerDocument == this.document && aReason == CustomizableUI.REASON_AREA_UNREGISTERED) {
this._unwrapItemsInArea(aContainer);
this._removeDragHandlers(aContainer);
DragPositionManager.remove(this.window, aArea, aContainer);
this.areas.delete(aContainer);
}
},
@ -1680,12 +1512,6 @@ CustomizeMode.prototype = {
case "dragend":
this._onDragEnd(aEvent);
break;
case "command":
if (aEvent.originalTarget == this.window.PanelUI.menuButton) {
this.exit();
aEvent.preventDefault();
}
break;
case "mousedown":
this._onMouseDown(aEvent);
break;
@ -1799,10 +1625,8 @@ CustomizeMode.prototype = {
// we've exited. So we need to check that we are indeed customizing.
if (this._customizing && !this._transitioning) {
item.hidden = true;
this._showPanelCustomizationPlaceholders();
DragPositionManager.start(this.window);
let canUsePrevSibling = placeForItem == "toolbar" ||
(placeForItem == "panel" && gPhotonStructure);
let canUsePrevSibling = placeForItem == "toolbar" || placeForItem == "panel";
if (item.nextSibling) {
this._setDragActive(item.nextSibling, "before", draggedItem.id, placeForItem);
this._dragOverItem = item.nextSibling;
@ -1892,7 +1716,7 @@ CustomizeMode.prototype = {
}
let before = this._dir == "ltr" ? aEvent.clientX < dropTargetCenter : aEvent.clientX > dropTargetCenter;
dragValue = before ? "before" : "after";
} else if (targetAreaType == "menu-panel" && gPhotonStructure) {
} else if (targetAreaType == "menu-panel") {
let itemRect = this._dwu.getBoundsWithoutFlushing(dragOverItem);
let dropTargetCenter = itemRect.top + (itemRect.height / 2);
let existingDir = dragOverItem.getAttribute("dragover");
@ -1915,8 +1739,6 @@ CustomizeMode.prototype = {
if (dragOverItem != this._dragOverItem || dragValue != dragOverItem.getAttribute("dragover")) {
if (dragOverItem != targetArea.customizationTarget) {
this._setDragActive(dragOverItem, dragValue, draggedItemId, targetAreaType);
} else if (targetAreaType == "toolbar") {
this._updateToolbarCustomizationOutline(this.window, targetArea);
}
this._dragOverItem = dragOverItem;
}
@ -1967,15 +1789,12 @@ CustomizeMode.prototype = {
}
this._cancelDragActive(this._dragOverItem, null, true);
this._removePanelCustomizationPlaceholders();
try {
this._applyDrop(aEvent, targetArea, originArea, draggedItemId, targetNode);
} catch (ex) {
log.error(ex, ex.stack);
}
this._showPanelCustomizationPlaceholders();
},
_applyDrop(aEvent, aTargetArea, aOriginArea, aDraggedItemId, aTargetNode) {
@ -2165,8 +1984,6 @@ CustomizeMode.prototype = {
this._cancelDragActive(this._dragOverItem);
this._dragOverItem = null;
}
this._updateToolbarCustomizationOutline(this.window);
this._showPanelCustomizationPlaceholders();
DragPositionManager.stop();
},
@ -2204,11 +2021,10 @@ CustomizeMode.prototype = {
let window = aItem.ownerGlobal;
let draggedItem = window.document.getElementById(aDraggedItemId);
if (aAreaType == "palette" || (aAreaType == "menu-panel" && !gPhotonStructure)) {
if (aAreaType == "palette") {
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);
@ -2242,14 +2058,12 @@ CustomizeMode.prototype = {
}
},
_cancelDragActive(aItem, aNextItem, aNoTransition) {
this._updateToolbarCustomizationOutline(aItem.ownerGlobal);
let currentArea = this._getCustomizableParent(aItem);
if (!currentArea) {
return;
}
let areaType = CustomizableUI.getAreaType(currentArea.id);
let needPositionManager = !areaType || (areaType == "menu-panel" && !gPhotonStructure);
if (!needPositionManager) {
if (areaType) {
if (aNoTransition) {
aItem.setAttribute("notransition", "true");
}
@ -2352,7 +2166,7 @@ CustomizeMode.prototype = {
},
_getCustomizableParent(aElement) {
if (gPhotonStructure && aElement) {
if (aElement) {
// Deal with drag/drop on the padding of the panel in photon.
let containingPanelHolder = aElement.closest("#customization-panelHolder");
if (containingPanelHolder) {
@ -2397,7 +2211,7 @@ CustomizeMode.prototype = {
dragY = Math.min(bounds.bottom, Math.max(dragY, bounds.top));
let targetNode;
if (aAreaType == "toolbar" || (aAreaType == "menu-panel" && gPhotonStructure)) {
if (aAreaType == "toolbar" || aAreaType == "menu-panel") {
targetNode = aAreaElement.ownerDocument.elementFromPoint(dragX, dragY);
while (targetNode && targetNode.parentNode != expectedParent) {
targetNode = targetNode.parentNode;
@ -2456,77 +2270,6 @@ CustomizeMode.prototype = {
return aElement;
},
_showPanelCustomizationPlaceholders() {
let doc = this.document;
let contents = this.panelUIContents;
let narrowItemsAfterWideItem = 0;
let node = contents.lastChild;
while (node && !node.classList.contains(CustomizableUI.WIDE_PANEL_CLASS) &&
(!node.firstChild || !node.firstChild.classList.contains(CustomizableUI.WIDE_PANEL_CLASS))) {
if (!node.hidden && !node.classList.contains(kPlaceholderClass)) {
narrowItemsAfterWideItem++;
}
node = node.previousSibling;
}
let orphanedItems = narrowItemsAfterWideItem % CustomizableUI.PANEL_COLUMN_COUNT;
let placeholders = CustomizableUI.PANEL_COLUMN_COUNT - orphanedItems;
let currentPlaceholderCount = contents.querySelectorAll("." + kPlaceholderClass).length;
if (placeholders > currentPlaceholderCount) {
while (placeholders-- > currentPlaceholderCount) {
let placeholder = doc.createElement("toolbarpaletteitem");
placeholder.classList.add(kPlaceholderClass);
// XXXjaws The toolbarbutton child here is only necessary to get
// the styling right here.
let placeholderChild = doc.createElement("toolbarbutton");
placeholderChild.classList.add(kPlaceholderClass + "-child");
placeholder.appendChild(placeholderChild);
contents.appendChild(placeholder);
}
} else if (placeholders < currentPlaceholderCount) {
while (placeholders++ < currentPlaceholderCount) {
contents.querySelectorAll("." + kPlaceholderClass)[0].remove();
}
}
},
_removePanelCustomizationPlaceholders() {
let contents = this.panelUIContents;
let oldPlaceholders = contents.getElementsByClassName(kPlaceholderClass);
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(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);
}
},
_findVisiblePreviousSiblingNode(aReferenceNode) {
while (aReferenceNode &&
aReferenceNode.localName == "toolbarpaletteitem" &&
@ -2537,8 +2280,7 @@ CustomizeMode.prototype = {
},
onPanelContextMenuShowing(event) {
let inPermanentArea = !gPhotonStructure ||
!!event.target.triggerNode.closest("#widget-overflow-fixed-list");
let inPermanentArea = !!event.target.triggerNode.closest("#widget-overflow-fixed-list");
let doc = event.target.ownerDocument;
doc.getElementById("customizationPanelItemContextMenuUnpin").hidden = !inPermanentArea;
doc.getElementById("customizationPanelItemContextMenuPin").hidden = inPermanentArea;

23
browser/components/customizableui/DragPositionManager.jsm
Просмотреть файл

@ -7,9 +7,6 @@
Components.utils.import("resource:///modules/CustomizableUI.jsm");
Components.utils.import("resource://gre/modules/XPCOMUtils.jsm");
XPCOMUtils.defineLazyPreferenceGetter(this, "gPhotonStructure",
"browser.photon.structure.enabled", false);
var gManagers = new WeakMap();
const kPaletteId = "customization-palette";
@ -383,9 +380,7 @@ AreaPositionManager.prototype = {
var DragPositionManager = {
start(aWindow) {
let areas = gPhotonStructure ? [] : [CustomizableUI.AREA_PANEL];
areas = areas.map((area) => CustomizableUI.getCustomizeTargetForArea(area, aWindow));
areas.push(aWindow.document.getElementById(kPaletteId));
let areas = [aWindow.document.getElementById(kPaletteId)];
for (let areaNode of areas) {
let positionManager = gManagers.get(areaNode);
if (positionManager) {
@ -396,22 +391,6 @@ var DragPositionManager = {
}
},
add(aWindow, aArea, aContainer) {
if (aArea != CustomizableUI.AREA_PANEL) {
return;
}
gManagers.set(aContainer, new AreaPositionManager(aContainer));
},
remove(aWindow, aArea, aContainer) {
if (aArea != CustomizableUI.AREA_PANEL) {
return;
}
gManagers.delete(aContainer);
},
stop() {
gManagers = new WeakMap();
},

250
browser/components/customizableui/content/customizeMode.inc.xul
Просмотреть файл

@ -3,139 +3,139 @@
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<box id="customization-container" flex="1" hidden="true">
<box flex="1" id="customization-palette-container">
<label id="customization-header">
&customizeMode.menuAndToolbars.header2;
</label>
<hbox id="customization-empty" hidden="true">
<label>&customizeMode.menuAndToolbars.empty;</label>
<label onclick="BrowserOpenAddonsMgr('addons://discover/');"
onkeypress="BrowserOpenAddonsMgr('addons://discover/');"
id="customization-more-tools"
class="text-link">
&customizeMode.menuAndToolbars.emptyLink;
<box id="customization-content-container">
<box flex="1" id="customization-palette-container">
<label id="customization-header">
&customizeMode.menuAndToolbars.header2;
</label>
</hbox>
<vbox id="customization-palette" class="customization-palette"/>
<spacer id="customization-spacer"/>
<hbox id="customization-footer">
<hbox id="customization-empty" hidden="true">
<label>&customizeMode.menuAndToolbars.empty;</label>
<label onclick="BrowserOpenAddonsMgr('addons://discover/');"
onkeypress="BrowserOpenAddonsMgr('addons://discover/');"
id="customization-more-tools"
class="text-link">
&customizeMode.menuAndToolbars.emptyLink;
</label>
</hbox>
<vbox id="customization-palette" class="customization-palette" hidden="true"/>
<spacer id="customization-spacer"/>
</box>
<vbox id="customization-panel-container">
<vbox id="customization-panelWrapper">
<box class="panel-arrowbox">
<image class="panel-arrow" side="top"/>
</box>
<box class="panel-arrowcontent" side="top" flex="1">
<hbox id="customization-panelHolder"/>
<box class="panel-inner-arrowcontentfooter" hidden="true"/>
</box>
</vbox>
</vbox>
</box>
<hbox id="customization-footer">
#ifdef CAN_DRAW_IN_TITLEBAR
<checkbox id="customization-titlebar-visibility-checkbox" class="customizationmode-checkbox"
label="&customizeMode.titlebar;"
<checkbox id="customization-titlebar-visibility-checkbox" class="customizationmode-checkbox"
label="&customizeMode.titlebar;"
#NB: because oncommand fires after click, by the time we've fired, the checkbox binding
# will already have switched the button's state, so this is correct:
oncommand="gCustomizeMode.toggleTitlebar(this.checked)"/>
oncommand="gCustomizeMode.toggleTitlebar(this.checked)"/>
#endif
<button id="customization-toolbar-visibility-button" label="&customizeMode.toolbars2;" class="customizationmode-button" type="menu">
<menupopup id="customization-toolbar-menu" onpopupshowing="onViewToolbarsPopupShowing(event)"/>
</button>
<button id="customization-lwtheme-button" label="&customizeMode.lwthemes;" class="customizationmode-button" type="menu">
<panel type="arrow" id="customization-lwtheme-menu"
onpopupshowing="gCustomizeMode.onLWThemesMenuShowing(event);"
position="topcenter bottomleft"
flip="none"
role="menu">
<label id="customization-lwtheme-menu-header" value="&customizeMode.lwthemes.myThemes;"/>
<label id="customization-lwtheme-menu-recommended" value="&customizeMode.lwthemes.recommended;"/>
<hbox id="customization-lwtheme-menu-footer">
<toolbarbutton class="customization-lwtheme-menu-footeritem"
label="&customizeMode.lwthemes.menuManage;"
accesskey="&customizeMode.lwthemes.menuManage.accessKey;"
tabindex="0"
oncommand="gCustomizeMode.openAddonsManagerThemes(event);"/>
<toolbarbutton class="customization-lwtheme-menu-footeritem"
label="&customizeMode.lwthemes.menuGetMore;"
accesskey="&customizeMode.lwthemes.menuGetMore.accessKey;"
tabindex="0"
oncommand="gCustomizeMode.getMoreThemes(event);"/>
</hbox>
</panel>
</button>
<button id="customization-toolbar-visibility-button" label="&customizeMode.toolbars2;" class="customizationmode-button" type="menu">
<menupopup id="customization-toolbar-menu" onpopupshowing="onViewToolbarsPopupShowing(event)"/>
</button>
<button id="customization-lwtheme-button" label="&customizeMode.lwthemes;" class="customizationmode-button" type="menu">
<panel type="arrow" id="customization-lwtheme-menu"
onpopupshowing="gCustomizeMode.onLWThemesMenuShowing(event);"
position="topcenter bottomleft"
flip="none"
role="menu">
<label id="customization-lwtheme-menu-header" value="&customizeMode.lwthemes.myThemes;"/>
<label id="customization-lwtheme-menu-recommended" value="&customizeMode.lwthemes.recommended;"/>
<hbox id="customization-lwtheme-menu-footer">
<toolbarbutton class="customization-lwtheme-menu-footeritem"
label="&customizeMode.lwthemes.menuManage;"
accesskey="&customizeMode.lwthemes.menuManage.accessKey;"
tabindex="0"
oncommand="gCustomizeMode.openAddonsManagerThemes(event);"/>
<toolbarbutton class="customization-lwtheme-menu-footeritem"
label="&customizeMode.lwthemes.menuGetMore;"
accesskey="&customizeMode.lwthemes.menuGetMore.accessKey;"
tabindex="0"
oncommand="gCustomizeMode.getMoreThemes(event);"/>
</hbox>
</panel>
</button>
#ifdef MOZ_PHOTON_THEME
<button id="customization-uidensity-button"
label="&customizeMode.uidensity;"
class="customizationmode-button"
type="menu">
<panel type="arrow" id="customization-uidensity-menu"
onpopupshowing="gCustomizeMode.onUIDensityMenuShowing();"
position="topcenter bottomleft"
flip="none"
role="menu">
<menuitem id="customization-uidensity-menuitem-compact"
class="menuitem-iconic customization-uidensity-menuitem"
role="menuitemradio"
label="&customizeMode.uidensity.menuCompact.label;"
accesskey="&customizeMode.uidensity.menuCompact.accessKey;"
tooltiptext="&customizeMode.uidensity.menuCompact.tooltip;"
tabindex="0"
onfocus="gCustomizeMode.updateUIDensity(this.mode);"
onmouseover="gCustomizeMode.updateUIDensity(this.mode);"
onblur="gCustomizeMode.resetUIDensity();"
onmouseout="gCustomizeMode.resetUIDensity();"
oncommand="gCustomizeMode.setUIDensity(this.mode);" />
<menuitem id="customization-uidensity-menuitem-normal"
class="menuitem-iconic customization-uidensity-menuitem"
role="menuitemradio"
label="&customizeMode.uidensity.menuNormal.label;"
accesskey="&customizeMode.uidensity.menuNormal.accessKey;"
tooltiptext="&customizeMode.uidensity.menuNormal.tooltip;"
tabindex="0"
onfocus="gCustomizeMode.updateUIDensity(this.mode);"
onmouseover="gCustomizeMode.updateUIDensity(this.mode);"
onblur="gCustomizeMode.resetUIDensity();"
onmouseout="gCustomizeMode.resetUIDensity();"
oncommand="gCustomizeMode.setUIDensity(this.mode);" />
<button id="customization-uidensity-button"
label="&customizeMode.uidensity;"
class="customizationmode-button"
type="menu">
<panel type="arrow" id="customization-uidensity-menu"
onpopupshowing="gCustomizeMode.onUIDensityMenuShowing();"
position="topcenter bottomleft"
flip="none"
role="menu">
<menuitem id="customization-uidensity-menuitem-compact"
class="menuitem-iconic customization-uidensity-menuitem"
role="menuitemradio"
label="&customizeMode.uidensity.menuCompact.label;"
accesskey="&customizeMode.uidensity.menuCompact.accessKey;"
tooltiptext="&customizeMode.uidensity.menuCompact.tooltip;"
tabindex="0"
onfocus="gCustomizeMode.updateUIDensity(this.mode);"
onmouseover="gCustomizeMode.updateUIDensity(this.mode);"
onblur="gCustomizeMode.resetUIDensity();"
onmouseout="gCustomizeMode.resetUIDensity();"
oncommand="gCustomizeMode.setUIDensity(this.mode);" />
<menuitem id="customization-uidensity-menuitem-normal"
class="menuitem-iconic customization-uidensity-menuitem"
role="menuitemradio"
label="&customizeMode.uidensity.menuNormal.label;"
accesskey="&customizeMode.uidensity.menuNormal.accessKey;"
tooltiptext="&customizeMode.uidensity.menuNormal.tooltip;"
tabindex="0"
onfocus="gCustomizeMode.updateUIDensity(this.mode);"
onmouseover="gCustomizeMode.updateUIDensity(this.mode);"
onblur="gCustomizeMode.resetUIDensity();"
onmouseout="gCustomizeMode.resetUIDensity();"
oncommand="gCustomizeMode.setUIDensity(this.mode);" />
#ifndef XP_MACOSX
<menuitem id="customization-uidensity-menuitem-touch"
class="menuitem-iconic customization-uidensity-menuitem"
role="menuitemradio"
label="&customizeMode.uidensity.menuTouch.label;"
accesskey="&customizeMode.uidensity.menuTouch.accessKey;"
tooltiptext="&customizeMode.uidensity.menuTouch.tooltip;"
tabindex="0"
onfocus="gCustomizeMode.updateUIDensity(this.mode);"
onmouseover="gCustomizeMode.updateUIDensity(this.mode);"
onblur="gCustomizeMode.resetUIDensity();"
onmouseout="gCustomizeMode.resetUIDensity();"
oncommand="gCustomizeMode.setUIDensity(this.mode);">
</menuitem>
<spacer hidden="true" id="customization-uidensity-touch-spacer"/>
<checkbox id="customization-uidensity-autotouchmode-checkbox"
hidden="true"
label="&customizeMode.uidensity.autoTouchMode.checkbox.label;"
oncommand="gCustomizeMode.updateAutoTouchMode(this.checked)"/>
<menuitem id="customization-uidensity-menuitem-touch"
class="menuitem-iconic customization-uidensity-menuitem"
role="menuitemradio"
label="&customizeMode.uidensity.menuTouch.label;"
accesskey="&customizeMode.uidensity.menuTouch.accessKey;"
tooltiptext="&customizeMode.uidensity.menuTouch.tooltip;"
tabindex="0"
onfocus="gCustomizeMode.updateUIDensity(this.mode);"
onmouseover="gCustomizeMode.updateUIDensity(this.mode);"
onblur="gCustomizeMode.resetUIDensity();"
onmouseout="gCustomizeMode.resetUIDensity();"
oncommand="gCustomizeMode.setUIDensity(this.mode);">
</menuitem>
<spacer hidden="true" id="customization-uidensity-touch-spacer"/>
<checkbox id="customization-uidensity-autotouchmode-checkbox"
hidden="true"
label="&customizeMode.uidensity.autoTouchMode.checkbox.label;"
oncommand="gCustomizeMode.updateAutoTouchMode(this.checked)"/>
#endif
</panel>
</button>
</panel>
</button>
#endif
<spacer id="customization-footer-spacer"/>
<button id="customization-undo-reset-button"
class="customizationmode-button"
hidden="true"
oncommand="gCustomizeMode.undoReset();"
label="&undoCmd.label;"/>
<button id="customization-reset-button"
oncommand="gCustomizeMode.reset();"
label="&customizeMode.restoreDefaults;"
class="customizationmode-button"/>
<button id="customization-done-button"
hidden="true"
oncommand="gCustomizeMode.exit();"
label="&customizeMode.done;"
class="customizationmode-button"/>
</hbox>
</box>
<box id="customization-content-container"/>
<vbox id="customization-panel-container">
<vbox id="customization-panelWrapper">
<box class="panel-arrowbox">
<image class="panel-arrow" side="top"/>
</box>
<box class="panel-arrowcontent" side="top" flex="1">
<hbox id="customization-panelHolder"/>
<box class="panel-inner-arrowcontentfooter" hidden="true"/>
</box>
</vbox>
</vbox>
<spacer id="customization-footer-spacer"/>
<button id="customization-undo-reset-button"
class="customizationmode-button"
hidden="true"
oncommand="gCustomizeMode.undoReset();"
label="&undoCmd.label;"/>
<button id="customization-reset-button"
oncommand="gCustomizeMode.reset();"
label="&customizeMode.restoreDefaults;"
class="customizationmode-button"/>
<button id="customization-done-button"
oncommand="gCustomizeMode.exit();"
label="&customizeMode.done;"
class="customizationmode-button"/>
</hbox>
</box>

19
browser/components/customizableui/content/panelUI.js
Просмотреть файл

@ -653,25 +653,6 @@ const PanelUI = {
}
},
/**
* Signal that we're about to make a lot of changes to the contents of the
* panels all at once. For performance, we ignore the mutations.
*/
beginBatchUpdate() {
this._ensureEventListenersAdded();
this.multiView.ignoreMutations = true;
},
/**
* Signal that we're done making bulk changes to the panel. We now pay
* attention to mutations. This automatically synchronizes the multiview
* container with whichever view is displayed if the panel is open.
*/
endBatchUpdate(aReason) {
this._ensureEventListenersAdded();
this.multiView.ignoreMutations = false;
},
_adjustLabelsForAutoHyphens(aNode) {
let toolbarButtons = aNode ? [aNode] :
this.contents.querySelectorAll(".toolbarbutton-1");

10
browser/themes/shared/customizableui/customizeMode.inc.css
Просмотреть файл

@ -630,16 +630,6 @@ toolbarpaletteitem[place=toolbar] > toolbarspring {
}
%endif
/* Non-photon adjustments. Remove when we stop supporting non-photon. */
#customization-container:not([photon]) #customization-panelWrapper > .panel-arrowbox {
margin-bottom: -1px;
}
#customization-container:not([photon]) #customization-panelWrapper > .panel-arrowbox > .panel-arrow[side="top"] {
margin-inline-end: 0;
margin-inline-start: 22.35em;
}
%ifdef MOZ_PHOTON_THEME
#customization-panelHolder > #widget-overflow-fixed-list:not(:empty) {
padding-bottom: 50px; /* Make sure there's always space to drop stuff. */

4
browser/themes/shared/customizableui/panelUI.inc.css
Просмотреть файл

@ -282,8 +282,8 @@ panel[photon] > .panel-arrowcontainer > .panel-arrowcontent {
-moz-hyphens: auto;
}
.panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
.panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text {
.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
.panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
position: absolute;
clip: rect(-0.1em, auto, 2.6em, auto);
}