Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-16 23:05:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1708735 - Make the arrowpanel code more generic. r=dao,zombie

Browse Source 
Share the concept of a panel content with all other menupopups / panels.

This avoids importing global.css in the shadow tree, and renames the
arrowcontent part to just "content", since we want to introduce a
"content" part for other panels.

This shouldn't change behavior but makes bug 1708136 a matter of
tweaking a couple CSS rules and fixing up test failures.

Differential Revision: https://phabricator.services.mozilla.com/D113990
This commit is contained in:
Emilio Cobos Alvarez 2021-05-28 11:56:07 +00:00
parent 518023275d
commit 24058f2dca
30 changed files with 193 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
browser/base/content/browser.xhtml
View File

@ -241,6 +241,7 @@
<panel is="search-autocomplete-richlistbox-popup"
type="autocomplete-richlistbox"
id="PopupSearchAutoComplete"
orient="vertical"
role="group"
noautofocus="true"
hidden="true" />

23
browser/base/content/test/forms/browser_selectpopup_colors.js
View File

@ -360,18 +360,15 @@ async function testSelectColors(selectID, itemCount, options) {
);
if (options.waitForComputedStyle) {
let property = options.waitForComputedStyle.property;
let value = options.waitForComputedStyle.value;
let expectedValue = options.waitForComputedStyle.value;
await TestUtils.waitForCondition(() => {
let node = ["background-image", "background-color"].includes(property)
? arrowSB
: selectPopup;
info(
`<${node.localName}> has ${property}: ${
getComputedStyle(node)[property]
}`
);
return getComputedStyle(node)[property] == value;
}, `${selectID} - Waiting for <select> to have ${property}: ${value}`);
let value = getComputedStyle(node).getPropertyValue(property);
info(`<${node.localName}> has ${property}: ${value}`);
return value == expectedValue;
}, `${selectID} - Waiting for <select> to have ${property}: ${expectedValue}`);
}
is(selectPopup.parentNode.itemCount, itemCount, "Correct number of items");
@ -387,7 +384,11 @@ async function testSelectColors(selectID, itemCount, options) {
}
if (!options.skipSelectColorTest.color) {
is(
getComputedStyle(selectPopup).color,
rgbaToString(
InspectorUtils.colorToRGBA(
getComputedStyle(selectPopup).getPropertyValue("--panel-color")
)
),
options.selectColor,
selectID + " popup has expected foreground color"
);
@ -608,7 +609,7 @@ add_task(
let options = {
skipSelectColorTest: true,
waitForComputedStyle: {
property: "color",
property: "--panel-color",
value: "rgb(255, 0, 0)",
},
};
@ -675,7 +676,7 @@ add_task(
selectColor: "rgb(128, 0, 128)",
selectBgColor: kDefaultSelectStyles.backgroundColor,
waitForComputedStyle: {
property: "color",
property: "--panel-color",
value: "rgb(128, 0, 128)",
},
leaveOpen: true,

2
browser/components/extensions/test/browser/browser_ext_popup_background.js
View File

@ -5,7 +5,7 @@
async function testPanel(browser, standAlone, initial_background) {
let panel = getPanelForNode(browser);
let arrowContent = panel.shadowRoot.querySelector(".panel-arrowcontent");
let arrowContent = panel.panelContent;
let arrow = panel.shadowRoot.querySelector(".panel-arrow");
let checkArrow = (background = null) => {

2
browser/components/extensions/test/browser/browser_ext_popup_corners.js
View File

@ -35,7 +35,7 @@ add_task(async function testPopupBorderRadius() {
async function testPanel(browser, standAlone = true) {
let panel = getPanelForNode(browser);
let arrowContent = panel.shadowRoot.querySelector(".panel-arrowcontent");
let arrowContent = panel.panelContent;
let panelStyle = getComputedStyle(arrowContent);
is(

4
browser/components/places/content/places-menupopup.js
View File

@ -44,7 +44,7 @@
</vbox>
<arrowscrollbox class="menupopup-arrowscrollbox" flex="1" orient="vertical"
exportparts="scrollbox: arrowscrollbox-scrollbox"
smoothscroll="false" part="arrowscrollbox">
smoothscroll="false" part="arrowscrollbox content">
<html:slot></html:slot>
</arrowscrollbox>
</hbox>
@ -618,7 +618,7 @@
</vbox>
<arrowscrollbox class="menupopup-arrowscrollbox" flex="1"
orient="vertical" smoothscroll="false"
part="arrowscrollbox">
part="arrowscrollbox content">
<html:slot/>
</arrowscrollbox>
</box>

2
browser/components/search/content/searchbar.js
View File

@ -749,7 +749,7 @@
// least 3 buttons, so take that into account here.
width = Math.max(width, popup.oneOffButtons.buttonWidth * 3);
}
popup.style.width = width + "px";
popup.style.setProperty("--panel-width", width + "px");
});
popup._invalidate();

10
browser/themes/linux/customizableui/panelUI.css
View File

@ -36,13 +36,3 @@ menuitem.subviewbutton {
.subviewradio > .radio-label-box {
appearance: none;
}
/*
* #pageActionFeedbackAnimatableImage is wider than the panel, and due to a
* bug in panels on Linux, a box-shadow appears where the image would be if
* overflow:hidden wasn't applied. Disabling the box-shadow for this panel on
* Linux works around this issue. This bug is on file as 1394575.
*/
#pageActionFeedback::part(arrowcontent) {
box-shadow: none;
}

2
browser/themes/shared/customizableui/panelUI.inc.css
View File

@ -440,7 +440,7 @@ panelmultiview[transitioning] > .panel-viewcontainer > .panel-viewstack > panelv
font-size: 1.1rem;
}
#confirmation-hint::part(arrowcontent) {
#confirmation-hint::part(content) {
-moz-box-align: center;
}

2
browser/themes/shared/translation/infobar.inc.css
View File

@ -66,7 +66,7 @@ notification[value="translation"] menulist > menupopup {
width: 305px;
}
.translation-welcome-panel::part(arrowcontent) {
.translation-welcome-panel::part(content) {
/* Prevent from stretching logo height */
-moz-box-align: start;
}

16
browser/themes/shared/urlbarView.inc.css
View File

@ -848,23 +848,21 @@
/* search bar popup */
#PopupSearchAutoComplete {
background-color: var(--autocomplete-popup-background);
color: var(--autocomplete-popup-color);
border-color: var(--arrowpanel-border-color);
--panel-background: var(--autocomplete-popup-background);
--panel-color: var(--autocomplete-popup-color);
--panel-border-color: var(--arrowpanel-border-color);
}
@media (-moz-proton) {
#PopupSearchAutoComplete {
border: 1px solid var(--arrowpanel-border-color);
#PopupSearchAutoComplete::part(content) {
/* Remove the top border since the panel is flush with the input. */
border-top-width: 0;
/* override autocomplete.css padding */
padding: var(--panel-subview-body-padding) !important;
--panel-padding: var(--panel-subview-body-padding);
}
#PopupSearchAutoComplete:-moz-lwtheme {
color: var(--lwt-toolbar-field-focus-color);
background-color: var(--lwt-toolbar-field-focus);
--panel-color: var(--lwt-toolbar-field-focus-color);
--panel-background: var(--lwt-toolbar-field-focus);
}
} /*** END proton ***/

2
devtools/client/themes/tooltips.css
View File

@ -245,7 +245,7 @@ strong {
/* The arrow image is hidden because the panel is opened using openPopupAtScreen(). */
/* The arrow content is styled on the HTML, so we don't need the styling on the XUL element */
.tooltip-xul-wrapper[type="arrow"]::part(arrowcontent) {
.tooltip-xul-wrapper[type="arrow"]::part(content) {
margin: 0;
padding: 0;
background: transparent;

12
layout/base/tests/browser_select_popup_position_in_out_of_process_iframe.js
View File

@ -106,12 +106,20 @@ add_task(async function() {
let popupRect = selectPopup.getBoundingClientRect();
is(
popupRect.x,
iframeX + iframeBorderLeft + selectRect.x - newWin.mozInnerScreenX,
iframeX +
iframeBorderLeft +
selectRect.x -
newWin.mozInnerScreenX +
parseFloat(getComputedStyle(selectPopup).marginLeft),
"x position of the popup"
);
let expectedYPosition =
iframeY + selectRect.y + iframeBorderTop - newWin.mozInnerScreenY;
iframeY +
selectRect.y +
iframeBorderTop -
newWin.mozInnerScreenY +
parseFloat(getComputedStyle(selectPopup).marginTop);
// On platforms other than MaxOSX the popup menu is positioned below the
// option element.
if (!navigator.platform.includes("Mac")) {

25
layout/xul/test/test_windowminmaxsize.xhtml
View File

@ -3,15 +3,27 @@
<?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?>
<window title="Window Minimum and Maximum Size Tests" onload="nextTest()"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml">
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/>
<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"/>
<html:style>
<![CDATA[
panel::part(content) {
border: 0;
padding: 0;
margin: 0;
}
]]>
</html:style>
<panel id="panel" onpopupshown="doPanelTest(this)" onpopuphidden="nextPopupTest(this)"
align="start" pack="start" style="-moz-appearance: none; margin: 0; border: 0; padding: 0;">
orient="vertical"
align="start" pack="start" style="appearance: none; margin: 0; border: 0; padding: 0;">
<resizer id="popupresizer" dir="bottomright" flex="1" width="60" height="60"
style="-moz-appearance: none; margin: 0; border: 0; padding: 0;"/>
style="appearance: none; margin: 0; border: 0; padding: 0;"/>
</panel>
<script>
@ -200,14 +212,19 @@ function nextPopupTest(panel)
function titledPanelWindowOpened(panelwindow)
{
info("titledPanelWindowOpened");
var panel = panelwindow.document.documentElement.firstChild;
panel.openPopup();
panel.addEventListener("popupshown", () => doTitledPanelTest(panel));
panel.addEventListener("popuphidden", () => done(panelwindow));
// See above as for why.
SimpleTest.executeSoon(() => {
SimpleTest.waitForFocus(() => { panel.openPopup() }, panelwindow);
});
}
function doTitledPanelTest(panel)
{
info("doTitledPanelTest");
var rect = panel.getBoundingClientRect();
is(rect.width, 120, "panel with titlebar width");
is(rect.height, 140, "panel with titlebar height");

2
layout/xul/test/titledpanelwindow.xhtml
View File

@ -1,4 +1,4 @@
<?xml-stylesheet href='chrome://global/skin' type='text/css'?>
<window xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul' align='start' pack='start' style='-moz-appearance: none; margin: 0; padding: 0; border: 0;'>
<panel noautohide='true' titlebar='normal' minwidth='120' minheight='140'/><label value='Test'/>
<panel style="background: white" noautohide='true' titlebar='normal' minwidth='120' minheight='140'/><label value='Test'/>
</window>

5
toolkit/actors/AutoCompleteParent.jsm
View File

@ -252,7 +252,10 @@ class AutoCompleteParent extends JSWindowActorParent {
this.openedPopup.setAttribute("resultstyles", [...resultStyles].join(" "));
this.openedPopup.hidden = false;
// don't allow the popup to become overly narrow
this.openedPopup.setAttribute("width", Math.max(100, rect.width));
this.openedPopup.style.setProperty(
"--panel-width",
Math.max(100, rect.width) + "px"
);
this.openedPopup.style.direction = dir;
AutoCompleteResultView.setResults(this, results);

5
toolkit/actors/SelectParent.jsm
View File

@ -158,6 +158,9 @@ var SelectParentHelper = {
// scrollbar-width doesn't inherit.
property = "--content-select-scrollbar-width";
}
if (property == "color") {
property = "--panel-color";
}
sheet.cssRules[0].style.setProperty(property, value);
}
// Some webpages set the <select> backgroundColor to transparent,
@ -177,7 +180,7 @@ var SelectParentHelper = {
sheet.cssRules[0].style["background-color"] = "";
// If the background is set, we also make sure we set the color, to
// prevent contrast issues.
sheet.cssRules[0].style.color = selectStyle.color;
sheet.cssRules[0].style.setProperty("--panel-color", selectStyle.color);
}
if (addedRule) {
sheet.insertRule(

4
toolkit/components/extensions/test/browser/browser_ext_themes_arrowpanels.js
View File

@ -56,9 +56,7 @@ add_task(async function test_popup_styling(browser, accDoc) {
// Open the information arrow panel
await openIdentityPopup();
let arrowContent = gIdentityHandler._identityPopup.shadowRoot.querySelector(
".panel-arrowcontent"
);
let arrowContent = gIdentityHandler._identityPopup.panelContent;
let arrowContentComputedStyle = window.getComputedStyle(arrowContent);
// Ensure popup background color was set properly
Assert.equal(

18
toolkit/content/tests/chrome/window_panel.xhtml
View File

@ -5,10 +5,20 @@
XUL Widget Test for panels
-->
<window title="Titlebar" width="200" height="200"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml">
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/>
<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"/>
<html:style>
<![CDATA[
panel, panel::part(content) {
border: 0;
margin: 0;
}
]]>
</html:style>
<tree id="tree" seltype="single" width="100" height="100">
<treecols>
<treecol flex="1"/>
@ -101,8 +111,8 @@ function createPanel(attrs)
button.label = "OK";
button.width = 120;
button.height = 40;
button.setAttribute("style", "-moz-appearance: none; border: 0; margin: 0;");
panel.setAttribute("style", "-moz-appearance: none; border: 0; margin: 0;");
button.setAttribute("style", "appearance: none; border: 0; margin: 0;");
panel.setAttribute("style", "appearance: none; border: 0; margin: 0;");
return document.documentElement.appendChild(panel);
}
@ -192,7 +202,7 @@ var tests = [
var panelrect = panel.getBoundingClientRect();
ok(panelrect.left >= 200 - window.mozInnerScreenX, testname + "left");
if (!navigator.platform.includes("Linux")) {
ok(panelrect.top >= 210 - window.mozInnerScreenY + 10, testname + "top greater");
ok(panelrect.top >= 210 - window.mozInnerScreenY, testname + "top greater " + panelrect.top + " " + window.mozInnerScreenY);
}
ok(panelrect.top <= 210 - window.mozInnerScreenY + 36, testname + "top less");
is(panelrect.width, 120, testname + "width");

12
toolkit/content/widgets/autocomplete-popup.js
View File

@ -12,6 +12,14 @@
constructor() {
super();
this.attachShadow({ mode: "open" });
{
let slot = document.createElement("slot");
slot.part = "content";
this.shadowRoot.appendChild(slot);
}
this.mInput = null;
this.mPopupOpen = false;
this._currentIndex = 0;
@ -193,7 +201,7 @@
closePopup() {
if (this.mPopupOpen) {
this.hidePopup();
this.removeAttribute("width");
this.style.removeProperty("--panel-width");
}
}
@ -258,7 +266,7 @@
this.selectedIndex = -1;
var width = aElement.getBoundingClientRect().width;
this.setAttribute("width", width > 100 ? width : 100);
this.style.setProperty("--panel-width", Math.max(width, 100) + "px");
// invalidate() depends on the width attribute
this._invalidate();

7
toolkit/content/widgets/autocomplete-richlistitem.js
View File

@ -692,9 +692,12 @@
const minWidth = getComputedStyle(popup).minWidth.replace("px", "");
// Make item fit in popup as XUL box could not constrain
// item's width
// popup.width is equal to the input field's width from the content process
// --panel-width is equal to the input field's width from the content process
this.firstElementChild.style.width =
Math.max(minWidth, popup.width) + "px";
Math.max(
minWidth,
parseFloat(popup.style.getPropertyValue("--panel-width") || "0")
) + "px";
}
_onOverflow() {}

4
toolkit/content/widgets/menupopup.js
View File

@ -107,7 +107,7 @@
<html:link rel="stylesheet" href="chrome://global/skin/global.css"/>
<html:style>${this.styles}</html:style>
<arrowscrollbox class="menupopup-arrowscrollbox"
part="arrowscrollbox"
part="arrowscrollbox content"
exportparts="scrollbox: arrowscrollbox-scrollbox"
flex="1"
orient="vertical"
@ -136,7 +136,7 @@
case "macosx":
s += `
:host(.in-menulist) arrowscrollbox {
padding: 0;
--panel-padding: 0;
}
`;
break;

14
toolkit/content/widgets/panel.js
View File

@ -10,12 +10,11 @@
class MozPanel extends MozElements.MozElementMixin(XULPopupElement) {
static get markup() {
return `
<html:link rel="stylesheet" href="chrome://global/skin/global.css"/>
<vbox class="panel-arrowcontainer" flex="1">
<box class="panel-arrowbox" part="arrowbox">
<image class="panel-arrow" part="arrow"/>
</box>
<box class="panel-arrowcontent" flex="1" part="arrowcontent"><html:slot/></box>
<html:slot part="content" />
</vbox>
`;
}
@ -59,7 +58,7 @@
initialize() {
// As an optimization, we don't slot contents if the panel is [hidden] in
// connecetedCallack this means we can avoid running this code at startup
// connectedCallack this means we can avoid running this code at startup
// and only need to do it when a panel is about to be shown.
// We then override the `hidden` setter and `removeAttribute` and call this
// function if the node is about to be shown.
@ -68,15 +67,22 @@
}
if (!this.isArrowPanel) {
this.shadowRoot.appendChild(document.createElement("slot"));
let slot = document.createElement("slot");
slot.part = "content";
this.shadowRoot.appendChild(slot);
} else {
this.shadowRoot.appendChild(this.constructor.fragment);
}
}
get panelContent() {
return this.shadowRoot.querySelector("[part=content]");
}
get hidden() {
return super.hidden;
}
set hidden(v) {
if (!v) {
this.initialize();

7
toolkit/themes/linux/global/autocomplete.css
View File

@ -18,11 +18,8 @@ html|input[nomatch="true"][highlightnonmatches="true"] {
/* ::::: autocomplete popups ::::: */
panel[type="autocomplete-richlistbox"] {
border: 1px solid ThreeDShadow;
padding: 0;
color: FieldText;
background-color: Field;
appearance: none;
--panel-color: FieldText;
--panel-background: Field;
}
/* ::::: richlistbox autocomplete ::::: */

43
toolkit/themes/linux/global/popup.css
View File

@ -9,16 +9,12 @@
menupopup,
panel {
border: 1px solid ThreeDShadow;
min-width: 1px;
background-color: Menu;
color: MenuText;
}
/* ::::: arrow panel ::::: */
panel[type="arrow"] {
appearance: none;
border: none;
background-color: transparent;
}
@ -33,34 +29,37 @@ panel[type="arrow"][side="right"] {
margin-block: -20px;
}
.panel-arrowcontent {
padding: var(--arrowpanel-padding);
color: var(--arrowpanel-color);
background: var(--arrowpanel-background);
border-radius: var(--arrowpanel-border-radius);
border: 1px solid var(--arrowpanel-border-color);
:is(panel, menupopup)::part(content) {
display: -moz-box;
-moz-box-flex: 1;
padding: var(--panel-padding, 0);
color: var(--panel-color, MenuText);
background: var(--panel-background, Menu);
border-radius: var(--panel-border-radius, 0);
border: 1px solid var(--panel-border-color, ThreeDShadow);
width: var(--panel-width, initial);
}
:is(panel, menupopup)[orient=vertical]::part(content) {
-moz-box-orient: vertical;
}
panel[type="arrow"]::part(content) {
/* TODO: Make this shadow apply to other popups (needs tests fixes to account
* for negative margins) */
box-shadow: 0 0 4px hsla(0,0%,0%,.2);
margin: 4px;
}
.panel-arrowcontent > html|slot {
/* propagate border-radius from arrowcontent to slotted children */
border-radius: inherit;
}
:host([orient=vertical]) .panel-arrowcontent {
-moz-box-orient: vertical;
}
panel[type="arrow"].panel-no-padding::part(arrowcontent) {
panel[type="arrow"].panel-no-padding::part(content) {
padding: 0;
overflow: hidden; /* Don't let panel content overflow the border */
}
:is(panel, menupopup)::part(arrow) {
-moz-context-properties: fill, stroke;
fill: var(--arrowpanel-background);
stroke: var(--arrowpanel-border-color);
fill: var(--panel-background);
stroke: var(--panel-border-color);
}
:is(panel, menupopup)[side="top"]::part(arrow),

8
toolkit/themes/osx/global/autocomplete.css
View File

@ -12,11 +12,11 @@ html|input[nomatch="true"][highlightnonmatches="true"] {
/* ::::: autocomplete popups ::::: */
panel[type="autocomplete-richlistbox"] {
padding: 0px !important;
color: FieldText;
background-color: Field;
font: icon;
appearance: none;
font: icon;
--panel-padding: 0px;
--panel-color: FieldText;
--panel-background: Field;
}
/* ::::: richlistbox autocomplete ::::: */

45
toolkit/themes/osx/global/popup.css
View File

@ -9,17 +9,18 @@ menupopup,
panel {
appearance: auto;
-moz-default-appearance: menupopup;
-moz-font-smoothing-background-color: -moz-mac-menupopup;
/* We set the default background here, rather than on ::part(content),
* because otherwise it'd interfere with the native look. Non-native-looking
* popups should get their background via --panel-background */
background-color: Menu;
color: MenuText;
}
menupopup > menu > menupopup {
margin-top: -4px;
}
.menupopup-arrowscrollbox {
padding: 4px 0;
menupopup {
--panel-padding: 4px 0;
}
panel[titlebar] {
@ -41,36 +42,36 @@ panel[type="arrow"][side="right"] {
margin-block: -25px;
}
.panel-arrowcontent {
appearance: none;
-moz-font-smoothing-background-color: var(--arrowpanel-background);
background: var(--arrowpanel-background);
border-radius: var(--arrowpanel-border-radius);
box-shadow: 0 0 0 1px var(--arrowpanel-border-color);
color: var(--arrowpanel-color);
:is(panel, menupopup)::part(content) {
display: -moz-box;
-moz-box-flex: 1;
-moz-font-smoothing-background-color: var(--panel-background, -moz-mac-menupopup);
background: var(--panel-background, transparent);
color: var(--panel-color, MenuText);
border-radius: var(--panel-border-radius, 0);
box-shadow: 0 0 0 1px var(--panel-border-color, transparent);
padding: var(--panel-padding);
width: var(--panel-width, initial);
border: none;
padding: var(--arrowpanel-padding);
margin: 1px;
}
.panel-arrowcontent > html|slot {
/* propagate border-radius from arrowcontent to slotted children */
border-radius: inherit;
}
:host([orient=vertical]) .panel-arrowcontent {
:is(panel, menupopup)[orient=vertical]::part(content) {
-moz-box-orient: vertical;
}
panel[type="arrow"].panel-no-padding::part(arrowcontent) {
panel[type="arrow"]::part(content) {
margin: 1px;
}
panel[type="arrow"].panel-no-padding::part(content) {
padding: 0;
overflow: hidden; /* Don't let panel content overflow the border-radius */
}
:is(panel, menupopup)::part(arrow) {
-moz-context-properties: fill, stroke;
fill: var(--arrowpanel-background);
stroke: var(--arrowpanel-border-color);
fill: var(--panel-background);
stroke: var(--panel-border-color);
}
:is(panel, menupopup)[side="top"]::part(arrow) {

8
toolkit/themes/shared/global.inc.css
View File

@ -30,6 +30,14 @@
--toolbarbutton-icon-fill: currentColor;
}
panel[type=arrow] {
--panel-background: var(--arrowpanel-background);
--panel-color: var(--arrowpanel-color);
--panel-border-color: var(--arrowpanel-border-color);
--panel-border-radius: var(--arrowpanel-border-radius);
--panel-padding: var(--arrowpanel-padding);
}
@media not (-moz-proton-doorhangers) {
:root {
--popup-notification-body-width: 25em;

4
toolkit/themes/shared/notification-popup.inc.css
View File

@ -6,7 +6,7 @@ xul|popupnotificationcontent {
margin-top: .5em;
}
.popup-notification-panel::part(arrowcontent) {
.popup-notification-panel::part(content) {
/* To keep the rounded borders of the panel, we use overflow: hidden; from the
* panel-no-padding class to ensure the contents are clipped to the border box.
* That causes us to override the "display" property so that the height of the
@ -17,7 +17,7 @@ xul|popupnotificationcontent {
}
.popup-notification-panel > popupnotification:not([hidden]) {
/* Since the anonymous parent (::part(arrowcontent)) has display: flex, sizing
/* Since the anonymous parent (::part(content)) has display: flex, sizing
* computations work better with display: block; than with the XUL default
* display: -moz-box; */
display: block;

6
toolkit/themes/windows/global/autocomplete.css
View File

@ -19,9 +19,9 @@ html|input[nomatch="true"][highlightnonmatches="true"] {
panel[type="autocomplete-richlistbox"] {
appearance: none;
padding: 0;
color: FieldText;
background-color: Field;
--panel-color: FieldText;
--panel-background: Field;
--panel-padding: 0;
}
/* ::::: richlistbox autocomplete ::::: */

57
toolkit/themes/windows/global/popup.css
View File

@ -9,11 +9,7 @@
menupopup,
panel {
border: 1px solid ThreeDShadow;
padding: 0;
min-width: 1px;
background-color: Menu;
color: MenuText;
}
menupopup {
@ -35,10 +31,11 @@ menupopup {
border: none;
border-radius: 4px;
/* Set this here rather than on the scrollbox so it is more easily
* overridden by e.g. ContentSelectDropdown */
color: var(--menu-color);
--panel-color: var(--menu-color);
--panel-border-radius: 4px;
--panel-padding: 4px 0;
--panel-border-color: var(--menu-border-color);
--panel-background: var(--menu-background-color);
--nested-margin: -6px;
}
@ -48,16 +45,7 @@ menupopup {
padding-inline-start: 1em;
}
/* This is the container inside of the <menupopup> element; the border is
defined here to keep it inside of the shadow. */
.menupopup-arrowscrollbox {
background-color: var(--menu-background-color);
border: 1px solid var(--menu-border-color);
border-radius: 4px;
padding-block: 4px;
menupopup::part(content) {
/* Prevent contained items from drawing over the border-radius. */
overflow: clip;
}
@ -86,35 +74,30 @@ panel[type="arrow"][side="right"] {
margin-block: -20px;
}
.panel-arrowcontent {
padding: var(--arrowpanel-padding);
color: var(--arrowpanel-color);
background: var(--arrowpanel-background);
border-radius: var(--arrowpanel-border-radius);
background-clip: padding-box;
border: 1px solid var(--arrowpanel-border-color);
box-shadow: 0 0 4px hsla(0,0%,0%,.2);
margin: 4px;
:is(panel, menupopup)::part(content) {
display: -moz-box;
-moz-box-flex: 1;
padding: var(--panel-padding, 0);
color: var(--panel-color, MenuText);
background: var(--panel-background, Menu);
border-radius: var(--panel-border-radius, 0);
border: 1px solid var(--panel-border-color, ThreeDShadow);
width: var(--panel-width, initial);
}
.panel-arrowcontent > html|slot {
/* propagate border-radius from arrowcontent to slotted children */
border-radius: inherit;
}
:host([orient=vertical]) .panel-arrowcontent {
:is(panel, menupopup)[orient=vertical]::part(content) {
-moz-box-orient: vertical;
}
@media not (-moz-proton) {
@media (-moz-os-version: windows-win7) {
.panel-arrowcontent {
border-radius: 4px;
panel[type="arrow"]::part(content) {
--arrowpanel-border-radius: 4px;
}
}
}
panel[type="arrow"].panel-no-padding::part(arrowcontent) {
panel[type="arrow"].panel-no-padding::part(content) {
padding: 0;
overflow: hidden; /* Don't let panel content overflow the border-radius */
}
@ -158,7 +141,7 @@ panel[type="arrow"].panel-no-padding::part(arrowcontent) {
}
@media (-moz-windows-default-theme) {
.panel-arrowcontent {
panel[type="arrow"]::part(content) {
box-shadow: 0 0 4px hsla(210,4%,10%,.2);
}
}