Bug 1354117 - remove old panel code from panelUI and CSS, r?jaws
MozReview-Commit-ID: G6a9ybDxqki
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -221,17 +221,17 @@ toolbar[overflowable] > .customization-t
}
toolbar:not([overflowing]) > .overflow-button,
toolbar[customizing] > .overflow-button {
display: none;
}
window:not([chromehidden~="toolbar"]) #nav-bar[nonemptyoverflow] > .overflow-button,
-#nav-bar[customizing][photon-structure] > .overflow-button {
+#nav-bar[customizing] > .overflow-button {
display: -moz-box;
}
/* The ids are ugly, but this should be reasonably performant, and
* using a tagname as the last item would be less so.
*/
#widget-overflow-list:empty + #widget-overflow-fixed-separator,
#widget-overflow:not([hasfixeditems]) #widget-overflow-fixed-separator {
@@ -1337,51 +1337,37 @@ toolbarpaletteitem[dragover] {
flex-wrap: wrap;
}
#customization-toolbar-visibility-button > .box-inherit > .button-menu-dropmarker {
display: -moz-box;
}
toolbarpaletteitem[place="palette"] {
- width: 10em;
- /* icon (32) + margin (2 * 4) + button padding/border (2 * 4) + label margin (~2) + label
- * line-height (1.5em): */
- height: calc(50px + 1.5em);
- margin-bottom: 5px;
- overflow: hidden;
- display: inline-block;
-}
-
-#main-window[photon-structure] toolbarpaletteitem[place="palette"] {
-moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbarpaletteitem-palette-wrapping-label");
width: 7em;
/* icon (16) + margin (9 + 12) + 3 lines of text: */
height: calc(39px + 3em);
+ margin-bottom: 5px;
margin-inline-end: 24px;
overflow: visible;
+ display: inline-block;
vertical-align: top;
}
toolbarpaletteitem[place="palette"][hidden] {
display: none;
}
#customization-palette .toolbarpaletteitem-box {
-moz-box-pack: center;
width: 7em;
max-width: 7em;
}
-#main-window:not([photon-structure]) #customization-palette .toolbarpaletteitem-box {
- -moz-box-flex: 1;
- width: 10em;
- max-width: 10em;
-}
-
#main-window[customizing=true] .addon-banner-item,
#main-window[customizing=true] .panel-banner-item {
display: none;
}
/* UI Tour */
@keyframes uitour-wobble {
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -324,20 +324,18 @@
<toolbarbutton label="&sidebarMenuClose.label;"
class="subviewbutton"
oncommand="SidebarUI.hide()"/>
</panel>
<menupopup id="toolbar-context-menu"
onpopupshowing="onViewToolbarsPopupShowing(event, document.getElementById('viewToolbarsMenuSeparator'));">
<menuitem oncommand="gCustomizeMode.addToPanel(document.popupNode)"
- photonaccesskey="&customizeMenu.pinToOverflowMenu.accesskey;"
- photonlabel="&customizeMenu.pinToOverflowMenu.label;"
- accesskey="&customizeMenu.moveToPanel.accesskey;"
- label="&customizeMenu.moveToPanel.label;"
+ accesskey="&customizeMenu.pinToOverflowMenu.accesskey;"
+ label="&customizeMenu.pinToOverflowMenu.label;"
contexttype="toolbaritem"
class="customize-context-moveToPanel"/>
<menuitem oncommand="gCustomizeMode.removeFromArea(document.popupNode)"
accesskey="&customizeMenu.removeFromToolbar.accesskey;"
label="&customizeMenu.removeFromToolbar.label;"
contexttype="toolbaritem"
class="customize-context-removeFromToolbar"/>
<menuitem id="toolbar-context-reloadAllTabs"
--- a/browser/components/customizableui/content/panelUI.inc.xul
+++ b/browser/components/customizableui/content/panelUI.inc.xul
@@ -437,37 +437,31 @@
#endif
<!-- This menu is here because not having it in the menu in which it's used flickers
when hover styles overlap. See https://bugzilla.mozilla.org/show_bug.cgi?id=1378427 .
-->
<menupopup id="customizationPanelItemContextMenu"
onpopupshowing="gCustomizeMode.onPanelContextMenuShowing(event)">
<menuitem oncommand="gCustomizeMode.addToPanel(document.popupNode)"
id="customizationPanelItemContextMenuPin"
- photonaccesskey="&customizeMenu.pinToOverflowMenu.accesskey;"
- photonlabel="&customizeMenu.pinToOverflowMenu.label;"
- accesskey="&customizeMenu.moveToPanel.accesskey;"
- label="&customizeMenu.moveToPanel.label;"
+ accesskey="&customizeMenu.pinToOverflowMenu.accesskey;"
+ label="&customizeMenu.pinToOverflowMenu.label;"
closemenu="single"
class="customize-context-moveToPanel"/>
<menuitem oncommand="gCustomizeMode.addToToolbar(document.popupNode)"
id="customizationPanelItemContextMenuUnpin"
closemenu="single"
class="customize-context-moveToToolbar"
- photonaccesskey="&customizeMenu.unpinFromOverflowMenu.accesskey;"
- photonlabel="&customizeMenu.unpinFromOverflowMenu.label;"
- accesskey="&customizeMenu.moveToToolbar.accesskey;"
- label="&customizeMenu.moveToToolbar.label;"/>
+ accesskey="&customizeMenu.unpinFromOverflowMenu.accesskey;"
+ label="&customizeMenu.unpinFromOverflowMenu.label;"/>
<menuitem oncommand="gCustomizeMode.removeFromArea(document.popupNode)"
closemenu="single"
class="customize-context-removeFromPanel"
- photonaccesskey="&customizeMenu.removeFromToolbar.accesskey;"
- photonlabel="&customizeMenu.removeFromToolbar.label;"
- accesskey="&customizeMenu.removeFromMenu.accesskey;"
- label="&customizeMenu.removeFromMenu.label;"/>
+ accesskey="&customizeMenu.removeFromToolbar.accesskey;"
+ label="&customizeMenu.removeFromToolbar.label;"/>
<menuseparator/>
<menuitem command="cmd_CustomizeToolbars"
class="viewCustomizeToolbar"
accesskey="&viewCustomizeToolbar.accesskey;"
label="&viewCustomizeToolbar.label;"/>
</menupopup>
</panel>
@@ -574,20 +568,18 @@
<menupopup id="customizationPaletteItemContextMenu">
<menuitem oncommand="gCustomizeMode.addToToolbar(document.popupNode)"
class="customize-context-addToToolbar"
accesskey="&customizeMenu.addToToolbar.accesskey;"
label="&customizeMenu.addToToolbar.label;"/>
<menuitem oncommand="gCustomizeMode.addToPanel(document.popupNode)"
class="customize-context-addToPanel"
- photonaccesskey="&customizeMenu.addToOverflowMenu.accesskey;"
- photonlabel="&customizeMenu.addToOverflowMenu.label;"
- accesskey="&customizeMenu.addToPanel.accesskey;"
- label="&customizeMenu.addToPanel.label;"/>
+ accesskey="&customizeMenu.addToOverflowMenu.accesskey;"
+ label="&customizeMenu.addToOverflowMenu.label;"/>
</menupopup>
<menupopup id="customizationPanelContextMenu">
<menuitem command="cmd_CustomizeToolbars"
accesskey="&customizeMenu.addMoreItems.accesskey;"
label="&customizeMenu.addMoreItems.label;"/>
</menupopup>
--- a/browser/components/customizableui/content/panelUI.js
+++ b/browser/components/customizableui/content/panelUI.js
@@ -17,28 +17,25 @@ const PanelUI = {
return ["popupshowing", "popupshown", "popuphiding", "popuphidden"];
},
/**
* Used for lazily getting and memoizing elements from the document. Lazy
* getters are set in init, and memoizing happens after the first retrieval.
*/
get kElements() {
return {
- contents: "PanelUI-contents",
- mainView: gPhotonStructure ? "appMenu-mainView" : "PanelUI-mainView",
- multiView: gPhotonStructure ? "appMenu-multiView" : "PanelUI-multiView",
+ mainView: "appMenu-mainView",
+ multiView: "appMenu-multiView",
helpView: "PanelUI-helpView",
menuButton: "PanelUI-menu-button",
- panel: gPhotonStructure ? "appMenu-popup" : "PanelUI-popup",
+ panel: "appMenu-popup",
notificationPanel: "appMenu-notification-popup",
- scroller: "PanelUI-contents-scroller",
- addonNotificationContainer: gPhotonStructure ? "appMenu-addon-banners" : "PanelUI-footer-addons",
-
- overflowFixedList: gPhotonStructure ? "widget-overflow-fixed-list" : "",
- overflowPanel: gPhotonStructure ? "widget-overflow" : "",
+ addonNotificationContainer: "appMenu-addon-banners",
+ overflowFixedList: "widget-overflow-fixed-list",
+ overflowPanel: "widget-overflow",
navbar: "nav-bar",
};
},
_initialized: false,
_notifications: null,
init() {
@@ -81,91 +78,41 @@ const PanelUI = {
window.addEventListener("activate", this);
window.matchMedia("(-moz-overlay-scrollbars)").addListener(this._overlayScrollListenerBoundFn);
CustomizableUI.addListener(this);
for (let event of this.kEvents) {
this.notificationPanel.addEventListener(event, this);
}
- this._initPhotonPanel();
- this._updateContextMenuLabels();
+ // We do this sync on init because in order to have the overflow button show up
+ // we need to know whether anything is in the permanent panel area.
+ this.overflowFixedList.hidden = false;
+ // Also unhide the separator. We use CSS to hide/show it based on the panel's content.
+ this.overflowFixedList.previousSibling.hidden = false;
+ CustomizableUI.registerMenuPanel(this.overflowFixedList, CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
+ this.updateOverflowStatus();
+
Services.obs.notifyObservers(null, "appMenu-notifications-request", "refresh");
this._initialized = true;
},
- reinit() {
- this._removeEventListeners();
- // If the Photon pref changes, we need to re-init our element references.
- this._initElements();
- this._initPhotonPanel();
- this._updateContextMenuLabels();
- delete this._readyPromise;
- this._isReady = false;
- },
-
- // We do this sync on init because in order to have the overflow button show up
- // we need to know whether anything is in the permanent panel area.
- _initPhotonPanel() {
- if (gPhotonStructure) {
- this.overflowFixedList.hidden = false;
- // Also unhide the separator. We use CSS to hide/show it based on the panel's content.
- this.overflowFixedList.previousSibling.hidden = false;
- CustomizableUI.registerMenuPanel(this.overflowFixedList, CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
- this.navbar.setAttribute("photon-structure", "true");
- document.documentElement.setAttribute("photon-structure", "true");
- this.updateOverflowStatus();
- } else {
- this.navbar.removeAttribute("photon-structure");
- document.documentElement.removeAttribute("photon-structure");
- }
- },
-
_initElements() {
for (let [k, v] of Object.entries(this.kElements)) {
- if (!v) {
- continue;
- }
// Need to do fresh let-bindings per iteration
let getKey = k;
let id = v;
this.__defineGetter__(getKey, function() {
delete this[getKey];
return this[getKey] = document.getElementById(id);
});
}
},
- _updateContextMenuLabels() {
- const kContextMenus = [
- "customizationPanelItemContextMenu",
- "customizationPaletteItemContextMenu",
- "toolbar-context-menu",
- ];
- for (let menuId of kContextMenus) {
- let menu = document.getElementById(menuId);
- if (gPhotonStructure) {
- let items = menu.querySelectorAll("menuitem[photonlabel]");
- for (let item of items) {
- item.setAttribute("nonphotonlabel", item.getAttribute("label"));
- item.setAttribute("nonphotonaccesskey", item.getAttribute("accesskey"));
- item.setAttribute("label", item.getAttribute("photonlabel"));
- item.setAttribute("accesskey", item.getAttribute("photonaccesskey"));
- }
- } else {
- let items = menu.querySelectorAll("menuitem[nonphotonlabel]");
- for (let item of items) {
- item.setAttribute("label", item.getAttribute("nonphotonlabel"));
- item.setAttribute("accesskey", item.getAttribute("nonphotonaccesskey"));
- }
- }
- }
- },
-
_eventListenersAdded: false,
_ensureEventListenersAdded() {
if (this._eventListenersAdded)
return;
this._addEventListeners();
},
_addEventListeners() {
@@ -241,19 +188,17 @@ const PanelUI = {
/**
* Opens the menu panel. If the event target has a child with the
* toolbarbutton-icon attribute, the panel will be anchored on that child.
* Otherwise, the panel is anchored on the event target itself.
*
* @param aEvent the event (if any) that triggers showing the menu.
*/
show(aEvent) {
- if (gPhotonStructure) {
- this._ensureShortcutsShown();
- }
+ this._ensureShortcutsShown();
return new Promise(resolve => {
this.ensureReady().then(() => {
if (this.panel.state == "open" ||
document.documentElement.hasAttribute("customizing")) {
resolve();
return;
}
@@ -311,33 +256,32 @@ const PanelUI = {
handleEvent(aEvent) {
// Ignore context menus and menu button menus showing and hiding:
if (aEvent.type.startsWith("popup") &&
aEvent.target != this.panel) {
return;
}
switch (aEvent.type) {
case "popupshowing":
- this._adjustLabelsForAutoHyphens();
updateEditUIVisibility();
// Fall through
case "popupshown":
- if (gPhotonStructure && aEvent.type == "popupshown") {
+ if (aEvent.type == "popupshown") {
CustomizableUI.addPanelCloseListeners(this.panel);
}
// Fall through
case "popuphiding":
if (aEvent.type == "popuphiding") {
updateEditUIVisibility();
}
// Fall through
case "popuphidden":
this._updateNotifications();
this._updatePanelButton(aEvent.target);
- if (gPhotonStructure && aEvent.type == "popuphidden") {
+ if (aEvent.type == "popuphidden") {
CustomizableUI.removePanelCloseListeners(this.panel);
}
break;
case "mousedown":
if (aEvent.button == 0)
this.toggle(aEvent);
break;
case "keypress":
@@ -369,77 +313,24 @@ const PanelUI = {
* by the user.
*
* @param aCustomizing (optional) set to true if this was called while entering
* customization mode. If that's the case, we trust that customization
* mode will handle calling beginBatchUpdate and endBatchUpdate.
*
* @return a Promise that resolves once the panel is ready to roll.
*/
- ensureReady(aCustomizing = false) {
+ ensureReady() {
if (this._readyPromise) {
return this._readyPromise;
}
this._ensureEventListenersAdded();
- if (gPhotonStructure) {
- this.panel.hidden = false;
- this._readyPromise = Promise.resolve();
- this._isReady = true;
- return this._readyPromise;
- }
- this._readyPromise = (async () => {
- if (!this._initialized) {
- await new Promise(resolve => {
- let delayedStartupObserver = (aSubject, aTopic, aData) => {
- if (aSubject == window) {
- Services.obs.removeObserver(delayedStartupObserver, "browser-delayed-startup-finished");
- resolve();
- }
- };
- Services.obs.addObserver(delayedStartupObserver, "browser-delayed-startup-finished");
- });
- }
-
- this.contents.setAttributeNS("http://www.w3.org/XML/1998/namespace", "lang",
- getLocale());
- if (!this._scrollWidth) {
- // In order to properly center the contents of the panel, while ensuring
- // that we have enough space on either side to show a scrollbar, we have to
- // do a bit of hackery. In particular, we calculate a new width for the
- // scroller, based on the system scrollbar width.
- this._scrollWidth =
- (await ScrollbarSampler.getSystemScrollbarWidth()) + "px";
- let cstyle = window.getComputedStyle(this.scroller);
- let widthStr = cstyle.width;
- // Get the calculated padding on the left and right sides of
- // the scroller too. We'll use that in our final calculation so
- // that if a scrollbar appears, we don't have the contents right
- // up against the edge of the scroller.
- let paddingLeft = cstyle.paddingLeft;
- let paddingRight = cstyle.paddingRight;
- let calcStr = [widthStr, this._scrollWidth,
- paddingLeft, paddingRight].join(" + ");
- this.scroller.style.width = "calc(" + calcStr + ")";
- }
-
- if (aCustomizing) {
- CustomizableUI.registerMenuPanel(this.contents, CustomizableUI.AREA_PANEL);
- } else {
- this.beginBatchUpdate();
- try {
- CustomizableUI.registerMenuPanel(this.contents, CustomizableUI.AREA_PANEL);
- } finally {
- this.endBatchUpdate();
- }
- }
- this._updateQuitTooltip();
- this.panel.hidden = false;
- this._isReady = true;
- })().catch(Cu.reportError);
-
+ this.panel.hidden = false;
+ this._readyPromise = Promise.resolve();
+ this._isReady = true;
return this._readyPromise;
},
/**
* Switch the panel to the main view if it's not already
* in that view.
*/
showMainView() {
@@ -508,29 +399,24 @@ const PanelUI = {
tempPanel.setAttribute("animate", "false");
}
tempPanel.setAttribute("context", "");
document.getElementById(CustomizableUI.AREA_NAVBAR).appendChild(tempPanel);
// If the view has a footer, set a convenience class on the panel.
tempPanel.classList.toggle("cui-widget-panelWithFooter",
viewNode.querySelector(".panel-subview-footer"));
- let multiView = document.createElement(gPhotonStructure ? "photonpanelmultiview" : "panelmultiview");
+ let multiView = document.createElement("photonpanelmultiview");
multiView.setAttribute("id", "customizationui-widget-multiview");
multiView.setAttribute("nosubviews", "true");
multiView.setAttribute("viewCacheId", "appMenu-viewCache");
- if (gPhotonStructure) {
- tempPanel.setAttribute("photon", true);
- multiView.setAttribute("mainViewId", viewNode.id);
- multiView.appendChild(viewNode);
- }
+ tempPanel.setAttribute("photon", true);
+ multiView.setAttribute("mainViewId", viewNode.id);
+ multiView.appendChild(viewNode);
tempPanel.appendChild(multiView);
- if (!gPhotonStructure) {
- multiView.setMainView(viewNode);
- }
viewNode.classList.add("cui-widget-panelview");
let viewShown = false;
let panelRemover = () => {
viewNode.classList.remove("cui-widget-panelview");
if (viewShown) {
CustomizableUI.removePanelCloseListeners(tempPanel);
tempPanel.removeEventListener("popuphidden", panelRemover);
@@ -600,80 +486,42 @@ const PanelUI = {
disableSingleSubviewPanelAnimations() {
this._disableAnimations = true;
},
enableSingleSubviewPanelAnimations() {
this._disableAnimations = false;
},
- onPhotonChanged() {
- this.reinit();
- },
-
updateOverflowStatus() {
let hasKids = this.overflowFixedList.hasChildNodes();
if (hasKids && !this.navbar.hasAttribute("nonemptyoverflow")) {
this.navbar.setAttribute("nonemptyoverflow", "true");
this.overflowPanel.setAttribute("hasfixeditems", "true");
} else if (!hasKids && this.navbar.hasAttribute("nonemptyoverflow")) {
if (this.overflowPanel.state != "closed") {
this.overflowPanel.hidePopup();
}
this.overflowPanel.removeAttribute("hasfixeditems");
this.navbar.removeAttribute("nonemptyoverflow");
}
},
onWidgetAfterDOMChange(aNode, aNextNode, aContainer, aWasRemoval) {
- if (gPhotonStructure && aContainer == this.overflowFixedList) {
+ if (aContainer == this.overflowFixedList) {
this.updateOverflowStatus();
- return;
- }
- if (aContainer != this.contents) {
- return;
- }
- if (aWasRemoval) {
- aNode.removeAttribute("auto-hyphens");
- }
- },
-
- onWidgetBeforeDOMChange(aNode, aNextNode, aContainer, aIsRemoval) {
- if (aContainer != this.contents) {
- return;
- }
- if (!aIsRemoval &&
- (this.panel.state == "open" ||
- document.documentElement.hasAttribute("customizing"))) {
- this._adjustLabelsForAutoHyphens(aNode);
}
},
onAreaReset(aArea, aContainer) {
- if (gPhotonStructure && aContainer == this.overflowFixedList) {
+ if (aContainer == this.overflowFixedList) {
this.updateOverflowStatus();
}
},
- _adjustLabelsForAutoHyphens(aNode) {
- let toolbarButtons = aNode ? [aNode] :
- this.contents.querySelectorAll(".toolbarbutton-1");
- for (let node of toolbarButtons) {
- let label = node.getAttribute("label");
- if (!label) {
- continue;
- }
- if (label.includes("\u00ad")) {
- node.setAttribute("auto-hyphens", "off");
- } else {
- node.removeAttribute("auto-hyphens");
- }
- }
- },
-
/**
* Sets the anchor node into the open or closed state, depending
* on the state of the panel.
*/
_updatePanelButton() {
this.menuButton.open = this.panel.state == "open" ||
this.panel.state == "showing";
},
--- a/browser/components/customizableui/test/browser_editcontrols_update.js
+++ b/browser/components/customizableui/test/browser_editcontrols_update.js
@@ -148,37 +148,35 @@ add_task(async function test_panelui_cus
kOverflowPanel.hidePopup();
overridePromise = expectCommandUpdate(isMac ? 1 : 0);
gURLBar.select();
await overridePromise;
window.resizeTo(originalWidth, window.outerHeight);
await waitForCondition(() => !navbar.hasAttribute("overflowing"));
- if (gPhotonStructure) {
- CustomizableUI.addWidgetToArea("edit-controls", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
- // updateEditUIVisibility should be called when customization happens but isn't. See bug 1359790.
- updateEditUIVisibility();
+ CustomizableUI.addWidgetToArea("edit-controls", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
+ // updateEditUIVisibility should be called when customization happens but isn't. See bug 1359790.
+ updateEditUIVisibility();
- overridePromise = expectCommandUpdate(isMac ? 1 : 0);
- gURLBar.select();
- await overridePromise;
+ overridePromise = expectCommandUpdate(isMac ? 1 : 0);
+ gURLBar.select();
+ await overridePromise;
- // Check that we get an update if we select content while the panel is open.
- overridePromise = expectCommandUpdate(1);
- await navbar.overflowable.show();
- gURLBar.select();
- await overridePromise;
+ // Check that we get an update if we select content while the panel is open.
+ overridePromise = expectCommandUpdate(1);
+ await navbar.overflowable.show();
+ gURLBar.select();
+ await overridePromise;
- // And that we don't (except on mac) when the panel is hidden.
- kOverflowPanel.hidePopup();
- overridePromise = expectCommandUpdate(isMac ? 1 : 0);
- gURLBar.select();
- await overridePromise;
- }
+ // And that we don't (except on mac) when the panel is hidden.
+ kOverflowPanel.hidePopup();
+ overridePromise = expectCommandUpdate(isMac ? 1 : 0);
+ gURLBar.select();
+ await overridePromise;
});
// Test updating when the edit-controls are moved to the palette.
add_task(async function test_panelui_customize_to_palette() {
await startCustomizing();
let palette = document.getElementById("customization-palette");
simulateItemDrag(document.getElementById("edit-controls"), palette);
await endCustomizing();
--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -386,53 +386,25 @@ toolbarpaletteitem[place=palette] > tool
toolbarpaletteitem[place=toolbar] > toolbarspring {
outline: 1px solid GrayText;
outline-offset: -2px;
margin-top: 5px;
margin-bottom: 5px;
}
-:root:not([photon-structure]) #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
-:root:not([photon-structure]) #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
-:root:not([photon-structure]) #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
-:root:not([photon-structure]) #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
- margin-top: 20px;
-}
-
-:root:not([photon-structure]) #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
-:root:not([photon-structure]) #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
- margin-left: 0;
- margin-right: 0;
- max-width: 24px;
- min-width: 24px;
- max-height: 24px;
- min-height: 24px;
- padding: 4px;
-}
-
-:root:not([photon-structure]) #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
-:root:not([photon-structure]) #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
- width: 16px;
-}
-
#wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
opacity: 1; /* To ensure these buttons always look enabled in customize mode */
}
#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
display: none;
}
-:root:not([photon-structure]) #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
- -moz-box-pack: center;
- min-height: 48px;
-}
-
#personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
margin-inline-end: 5px;
}
#customization-palette > toolbarpaletteitem > label {
text-align: center;
margin-left: 0;
margin-right: 0;
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -21,20 +21,16 @@
%include ../browser.inc
:root {
--panel-ui-exit-subview-gutter-width: 38px;
--appmenu-yellow-warning-border-color: hsl(45, 100%, 77%);
--appmenu-yellow-warning-color: #FFEFBF;
--appmenu-yellow-warning-hover-color: #FFE8A2;
--appmenu-yellow-warning-active-color: #FFE38F;
- --panel-palette-icon-size: 32px;
-}
-
-:root[photon-structure] {
--panel-palette-icon-size: 16px;
}
#PanelUI-popup #PanelUI-contents:empty {
height: 128px;
}
#PanelUI-popup #PanelUI-contents:empty::before {
@@ -396,46 +392,40 @@ photonpanelmultiview .panel-subview-body
}
.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton > .toolbarbutton-icon {
min-width: 0;
min-height: 0;
margin: 0;
}
-:root:not([photon-structure]) toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
.panelUI-grid .toolbarbutton-1,
.panel-customization-placeholder-child {
-moz-appearance: none;
-moz-box-orient: vertical;
width: calc(@menuPanelButtonWidth@);
height: calc(51px + 2.2em);
}
-/* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
- * should have a min-width set so they abide by the width set above (which they do outside of
- * customize mode because they're in a flexed container) */
-:root:not([photon-structure]) toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
- min-width: 0.01px;
-}
-
/* Help SDK buttons fit in. */
toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon,
toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
toolbarpaletteitem[place="palette"] > toolbaritem[sdkstylewidget="true"] > .toolbarbutton-1 > .toolbarbutton-icon,
toolbarpaletteitem[place="panel"] > toolbaritem[sdkstylewidget="true"] > .toolbarbutton-1 > .toolbarbutton-icon,
toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon,
toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
height: @panelPaletteIconSize@;
width: @panelPaletteIconSize@;
}
-.customization-palette .toolbarbutton-1 {
+#customization-palette .toolbarbutton-1 {
-moz-appearance: none;
-moz-box-orient: vertical;
+ padding: 12px 0 9px;
+ margin: 0;
}
.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
-moz-appearance: none;
-moz-box-orient: vertical;
width: calc(@menuPanelButtonWidth@ - 2px);
height: calc(49px + 2.2em);
border: 0;
@@ -547,21 +537,17 @@ toolbaritem[cui-areatype="menu-panel"][s
height: @panelPaletteIconSize@;
min-width: @panelPaletteIconSize@;
min-height: @panelPaletteIconSize@;
}
.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
.panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack,
-:root:not([photon-structure]) .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
-:root:not([photon-structure]) .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
-:root:not([photon-structure]) .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack,
.panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
-:root:not([photon-structure]) .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
.panel-customization-placeholder-child > .toolbarbutton-icon {
/* Explanation for the below formula (A / B - C)
A
Each button is @menuPanelButtonWidth@ wide
B
Each button has two margins.
C (46px / 2 = 23px)
The button icon is 32 pixels wide.
@@ -581,25 +567,16 @@ toolbaritem[cui-areatype="menu-panel"][s
width: @panelPaletteIconSize@;
height: @panelPaletteIconSize@;
min-width: @panelPaletteIconSize@;
min-height: @panelPaletteIconSize@;
margin: 0;
padding: 0;
}
-:root[photon-structure] .customization-palette .toolbarbutton-1 {
- padding: 12px 0 9px;
- margin: 0;
-}
-
-:root[photon-structure] toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
- -moz-box-flex: 1;
-}
-
#personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
-moz-box-flex: 1;
}
#personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
margin-inline-end: 2px;
}
@@ -1172,31 +1149,29 @@ toolbaritem[cui-areatype="menu-panel"][s
#customization-palette .toolbarbutton-text {
display: none;
}
panelview .toolbarbutton-1,
.subviewbutton,
.widget-overflow-list .toolbarbutton-1,
.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
-.share-provider-button,
-:root:not([photon-structure]) .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton {
+.share-provider-button {
-moz-appearance: none;
padding: 0 6px;
background-color: transparent;
border-radius: 2px;
border-style: solid;
border-color: transparent;
}
panelview .toolbarbutton-1,
.subviewbutton,
.widget-overflow-list .toolbarbutton-1,
-.share-provider-button,
-:root:not([photon-structure]) .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton {
+.share-provider-button {
border-width: 1px;
}
.subviewbutton.panel-subview-footer {
border-radius: 0;
border: none;
}