Backed out changeset 229e905d571e (bug 1708735) for multiple regressions. CLOSED TREE

browser/base/content/browser.xhtml

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

browser/base/content/test/forms/browser_selectpopup_colors.js

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

browser/components/extensions/test/browser/browser_ext_popup_background.js

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

browser/components/extensions/test/browser/browser_ext_popup_corners.js

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

browser/components/places/content/places-menupopup.js

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

browser/components/search/content/searchbar.js

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

browser/themes/linux/customizableui/panelUI.css

@@ -36,3 +36,13 @@ 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;
+}

browser/themes/shared/customizableui/panelUI.inc.css

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

browser/themes/shared/translation/infobar.inc.css

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

browser/themes/shared/urlbarView.inc.css

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

devtools/client/themes/tooltips.css

@@ -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(content) {
+.tooltip-xul-wrapper[type="arrow"]::part(arrowcontent) {
   margin: 0;
   padding: 0;
   background: transparent;

layout/base/tests/browser_select_popup_position_in_out_of_process_iframe.js

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

layout/xul/test/test_windowminmaxsize.xhtml

@@ -3,27 +3,15 @@
 <?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:html="http://www.w3.org/1999/xhtml">
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
   <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)"
-       orient="vertical"
-       align="start" pack="start" style="appearance: none; margin: 0; border: 0; padding: 0;">
+       align="start" pack="start" style="-moz-appearance: none; margin: 0; border: 0; padding: 0;">
   <resizer id="popupresizer" dir="bottomright" flex="1" width="60" height="60"
-           style="appearance: none; margin: 0; border: 0; padding: 0;"/>
+           style="-moz-appearance: none; margin: 0; border: 0; padding: 0;"/>
 </panel>
 
 <script>
@@ -212,19 +200,14 @@ 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");

layout/xul/test/titledpanelwindow.xhtml

@@ -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 style="background: white" noautohide='true' titlebar='normal' minwidth='120' minheight='140'/><label value='Test'/>
+<panel noautohide='true' titlebar='normal' minwidth='120' minheight='140'/><label value='Test'/>
 </window>

toolkit/actors/AutoCompleteParent.jsm

@@ -252,10 +252,7 @@ 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.style.setProperty(
-      "--panel-width",
-      Math.max(100, rect.width) + "px"
-    );
+    this.openedPopup.setAttribute("width", Math.max(100, rect.width));
     this.openedPopup.style.direction = dir;
 
     AutoCompleteResultView.setResults(this, results);

toolkit/actors/SelectParent.jsm

@@ -158,9 +158,6 @@ 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,
@@ -180,7 +177,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.setProperty("--panel-color", selectStyle.color);
+        sheet.cssRules[0].style.color = selectStyle.color;
       }
       if (addedRule) {
         sheet.insertRule(

toolkit/components/extensions/test/browser/browser_ext_themes_arrowpanels.js

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

toolkit/content/tests/chrome/window_panel.xhtml

@@ -5,20 +5,10 @@
   XUL Widget Test for panels
   -->
 <window title="Titlebar" width="200" height="200"
-        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-        xmlns:html="http://www.w3.org/1999/xhtml">
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <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"/>
@@ -111,8 +101,8 @@ function createPanel(attrs)
   button.label = "OK";
   button.width = 120;
   button.height = 40;
-  button.setAttribute("style", "appearance: none; border: 0; margin: 0;");
-  panel.setAttribute("style", "appearance: none; border: 0; margin: 0;");
+  button.setAttribute("style", "-moz-appearance: none; border: 0; margin: 0;");
+  panel.setAttribute("style", "-moz-appearance: none; border: 0; margin: 0;");
   return document.documentElement.appendChild(panel);
 }
 
@@ -202,7 +192,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, testname + "top greater " + panelrect.top + " " + window.mozInnerScreenY);
+        ok(panelrect.top >= 210 - window.mozInnerScreenY + 10, testname + "top greater");
       }
       ok(panelrect.top <= 210 - window.mozInnerScreenY + 36, testname + "top less");
       is(panelrect.width, 120, testname + "width");

toolkit/content/widgets/autocomplete-popup.js

@@ -12,14 +12,6 @@
     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;
@@ -201,7 +193,7 @@
     closePopup() {
       if (this.mPopupOpen) {
         this.hidePopup();
-        this.style.removeProperty("--panel-width");
+        this.removeAttribute("width");
       }
     }
 
@@ -266,7 +258,7 @@
         this.selectedIndex = -1;
 
         var width = aElement.getBoundingClientRect().width;
-        this.style.setProperty("--panel-width", Math.max(width, 100) + "px");
+        this.setAttribute("width", width > 100 ? width : 100);
         // invalidate() depends on the width attribute
         this._invalidate();
 

toolkit/content/widgets/autocomplete-richlistitem.js

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

toolkit/content/widgets/menupopup.js

@@ -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 content"
+                        part="arrowscrollbox"
                         exportparts="scrollbox: arrowscrollbox-scrollbox"
                         flex="1"
                         orient="vertical"
@@ -136,7 +136,7 @@
         case "macosx":
           s += `
             :host(.in-menulist) arrowscrollbox {
-              --panel-padding: 0;
+              padding: 0;
             }
           `;
           break;

toolkit/content/widgets/panel.js

@@ -10,11 +10,12 @@
   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>
-        <html:slot part="content" />
+        <box class="panel-arrowcontent" flex="1" part="arrowcontent"><html:slot/></box>
       </vbox>
       `;
     }
@@ -58,7 +59,7 @@
 
     initialize() {
       // As an optimization, we don't slot contents if the panel is [hidden] in
-      // connectedCallack this means we can avoid running this code at startup
+      // connecetedCallack 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.
@@ -67,22 +68,15 @@
       }
 
       if (!this.isArrowPanel) {
-        let slot = document.createElement("slot");
-        slot.part = "content";
-        this.shadowRoot.appendChild(slot);
+        this.shadowRoot.appendChild(document.createElement("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();

toolkit/themes/linux/global/autocomplete.css

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

toolkit/themes/linux/global/popup.css

@@ -9,12 +9,16 @@
 
 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;
 }
@@ -29,37 +33,34 @@ panel[type="arrow"][side="right"] {
   margin-block: -20px;
 }
 
-: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) */
+.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);
   box-shadow: 0 0 4px hsla(0,0%,0%,.2);
   margin: 4px;
 }
 
-panel[type="arrow"].panel-no-padding::part(content) {
+.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) {
   padding: 0;
   overflow: hidden; /* Don't let panel content overflow the border */
 }
 
 :is(panel, menupopup)::part(arrow) {
   -moz-context-properties: fill, stroke;
-  fill: var(--panel-background);
-  stroke: var(--panel-border-color);
+  fill: var(--arrowpanel-background);
+  stroke: var(--arrowpanel-border-color);
 }
 
 :is(panel, menupopup)[side="top"]::part(arrow),

toolkit/themes/osx/global/autocomplete.css

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

toolkit/themes/osx/global/popup.css

@@ -9,18 +9,17 @@ menupopup,
 panel {
   appearance: auto;
   -moz-default-appearance: 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 */
+  -moz-font-smoothing-background-color: -moz-mac-menupopup;
   background-color: Menu;
+  color: MenuText;
 }
 
 menupopup > menu > menupopup {
   margin-top: -4px;
 }
 
-menupopup {
-  --panel-padding: 4px 0;
+.menupopup-arrowscrollbox {
+  padding: 4px 0;
 }
 
 panel[titlebar] {
@@ -42,36 +41,36 @@ panel[type="arrow"][side="right"] {
   margin-block: -25px;
 }
 
-: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);
+.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);
   border: none;
-}
-
-:is(panel, menupopup)[orient=vertical]::part(content) {
-  -moz-box-orient: vertical;
-}
-
-panel[type="arrow"]::part(content) {
+  padding: var(--arrowpanel-padding);
   margin: 1px;
 }
 
-panel[type="arrow"].panel-no-padding::part(content) {
+.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) {
   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(--panel-background);
-  stroke: var(--panel-border-color);
+  fill: var(--arrowpanel-background);
+  stroke: var(--arrowpanel-border-color);
 }
 
 :is(panel, menupopup)[side="top"]::part(arrow) {

toolkit/themes/shared/global.inc.css

@@ -30,14 +30,6 @@
   --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;

toolkit/themes/shared/notification-popup.inc.css

@@ -6,7 +6,7 @@ xul|popupnotificationcontent {
   margin-top: .5em;
 }
 
-.popup-notification-panel::part(content) {
+.popup-notification-panel::part(arrowcontent) {
   /* 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(content)) has display: flex, sizing
+  /* Since the anonymous parent (::part(arrowcontent)) has display: flex, sizing
    * computations work better with display: block; than with the XUL default
    * display: -moz-box; */
   display: block;

toolkit/themes/windows/global/autocomplete.css

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

toolkit/themes/windows/global/popup.css

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