Bugzilla

The relevant element here looks like this in DevTools inspector:
```
<panel-list xmlns="http://www.w3.org/1999/xhtml" min-width-from-anchor="" role="menu" open="" style="left: 0px; top: 0px; min-width: 335.1px;" inxulpanel="">
```
The relevant background & box-shadow styles come from the `:host {...}` rule in chrome://global/content/elements/panel-list.css , which lives here in the tree:
https://searchfox.org/mozilla-central/rev/7a642b487e4b93309285e2eb235f87a0d4b86518/toolkit/content/widgets/panel-list/panel-list.css#13,16,20
```
:host {
...
  background-color: var(--in-content-box-background);
...
  box-shadow: var(--shadow-30);
```

There are two issues here:
(1) For our light theme, that `background-color`  CSS variable resolves to the same value as the underlying background-color which is `--in-content-page-background`. Both are `#fff`, per https://searchfox.org/mozilla-central/rev/7a642b487e4b93309285e2eb235f87a0d4b86518/toolkit/themes/shared/in-content/common-shared.css#13,15
(They [differ for our dark color-scheme](https://searchfox.org/mozilla-central/rev/7a642b487e4b93309285e2eb235f87a0d4b86518/toolkit/themes/shared/in-content/common-shared.css#132,135), which is why this looks better there, per comment 3.)

(2) The box-shadow doesn't seem to be rendering at all on this element. I can specify my own extreme color-scheme, e.g. `box-shadow: 10px 10px 10px 10px red`, at the bottom of the CSS rule, and it still doesn't show up.  (Or actually, after more prodding: it *barely* shows up, but only in individual pixels at the corners; it seems to be getting clipped to the element's border-box. If I specify a more-extreme `border-radius`, then I can see more of the shadow.)

The relevant element here looks like this in DevTools inspector:
```
<panel-list xmlns="http://www.w3.org/1999/xhtml" min-width-from-anchor="" role="menu" open="" style="left: 0px; top: 0px; min-width: 335.1px;" inxulpanel="">
```
The relevant background & box-shadow styles come from the `:host {...}` rule in chrome://global/content/elements/panel-list.css , which lives here in the tree:
https://searchfox.org/mozilla-central/rev/7a642b487e4b93309285e2eb235f87a0d4b86518/toolkit/content/widgets/panel-list/panel-list.css#13,16,20
```
:host {
...
  background-color: var(--in-content-box-background);
...
  box-shadow: var(--shadow-30);
```

There are two issues here:
(1) For our light theme, that `background-color`  CSS variable resolves to the same value as the underlying background-color which is `--in-content-page-background`. Both are `#fff`, per https://searchfox.org/mozilla-central/rev/7a642b487e4b93309285e2eb235f87a0d4b86518/toolkit/themes/shared/in-content/common-shared.css#13,15
(They [differ for our dark color-scheme](https://searchfox.org/mozilla-central/rev/7a642b487e4b93309285e2eb235f87a0d4b86518/toolkit/themes/shared/in-content/common-shared.css#132,135), which is why this looks better there, per comment 3.)

(2) The box-shadow doesn't seem to be rendering at all on this element. I can specify my own extreme color-scheme, e.g. `box-shadow: 10px 10px 10px 10px red`, at the bottom of the CSS rule, and it still doesn't show up.  (Or actually, after more prodding: it *barely* shows up, but only in individual pixels at the corners; it seems to be getting clipped to the element's border-box. If I specify a more-extreme `border-radius`, then I can see more of the shadow.)

Issue (2) is the real problem here. Issue (1) is only a problem **because of** issue (2).  (i.e. it's probably fine for popups to have the same background as the stuff that they're covering, as long as they render with a box-shadow)