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

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

browser/base/content/browser.xhtml

@@ -241,6 +241,7 @@
     <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,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,

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.shadowRoot.querySelector(".panel-arrowcontent");
+  let arrowContent = panel.panelContent;
   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.shadowRoot.querySelector(".panel-arrowcontent");
+    let arrowContent = panel.panelContent;
 
     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">
+                        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>

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.width = width + "px";
+            popup.style.setProperty("--panel-width", width + "px");
           });
 
           popup._invalidate();

browser/themes/linux/customizableui/panelUI.css

@@ -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;
-}

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(arrowcontent) {
+#confirmation-hint::part(content) {
   -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(arrowcontent) {
+.translation-welcome-panel::part(content) {
   /* Prevent from stretching logo height */
   -moz-box-align: start;
 }

browser/themes/shared/urlbarView.inc.css

@@ -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 ***/
 

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

layout/base/tests/browser_select_popup_position_in_out_of_process_iframe.js

@@ -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")) {

layout/xul/test/test_windowminmaxsize.xhtml

@@ -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");

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 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>

toolkit/actors/AutoCompleteParent.jsm

@@ -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);

toolkit/actors/SelectParent.jsm

@@ -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(

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

@@ -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(

toolkit/content/tests/chrome/window_panel.xhtml

@@ -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");

toolkit/content/widgets/autocomplete-popup.js

@@ -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();
 

toolkit/content/widgets/autocomplete-richlistitem.js

@@ -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() {}

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"
+                        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;

toolkit/content/widgets/panel.js

@@ -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();

toolkit/themes/linux/global/autocomplete.css

@@ -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 ::::: */

toolkit/themes/linux/global/popup.css

@@ -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),

toolkit/themes/osx/global/autocomplete.css

@@ -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 ::::: */

toolkit/themes/osx/global/popup.css

@@ -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) {

toolkit/themes/shared/global.inc.css

@@ -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;

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

@@ -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;

toolkit/themes/windows/global/autocomplete.css

@@ -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 ::::: */

toolkit/themes/windows/global/popup.css

@@ -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);
   }
 }