1846624 - [Linux] Import Data dropdown-menu doesn't have any border and so blends in to the UI that it's covering up

Status: VERIFIED FIXED

(Firefox :: Migration, defect, P1)

Description

[Daniel Holbert [:dholbert]]

Attachment: screenshot showing what this UI looks like when the menu is dropped down

STR:

1. Start Firefox Nightly with a fresh profile, on Ubuntu
2. Open Firefox Preferences and search for "Import", and then click "Import Data"
3. Click to open the dropdown menu to pick the data source (Chrome, etc)

ACTUAL RESULTS:
The dropdown menu (i.e. the menu popup) is the exact same color as its surroundings, with no separation between them. See screenshot.

EXPECTED RESULTS:
We should have some sort of shadow or border around the dropdown-menu, so that the menu can be distinguished from its surroundings.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: video showing the menu opening & closing

Comment 2

[Daniel Holbert [:dholbert]]

I tried this on macOS and on Windows, for comparison. There seems to be a dark shadow around the popup in both of those, which makes this a non-issue there. But on Linux (Ubuntu 22.04), there's no such dark shadow.

Other dropdowns (e.g. the awesomebar, the right-click context menu, dropdown menus in preferences) do render with a shadow. This issue is specific to this particular "Import Data" widget.

I'm using Nightly 118.0a1 (2023-08-01)

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: screenshot with dark color-scheme (which is fine)

For comparison, here's how this looks on an affected profile, when I express a dark color-scheme preference (choosing "Website appearance: dark" in Preferences). That gives the menu-popup a notably lighter color than its surroundings which lets them be distinguished.

So: this issue seems to only affect the "light" color scheme version of this content (which is the default look under most OS configurations, I think).

Comment 4

[Daniel Holbert [:dholbert]]

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

Comment 5

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #4)

(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.)

This is actually true on macOS, too -- the element does render with some shadow, but it's not the one that we're specifying in this rule. I suspect the shadow that we're actually seeing here is coming from the OS, or from some other bit of styling other than the above-quoted panel-list.css stylesheet.

Comment 6

[Mike Conley (:mconley) (:⚙️)]

Thanks for the thorough analysis, dholbert!

Comment 7

[Mike Conley (:mconley) (:⚙️)]

Attachment: Bug 1846624 - Ensure there is an outline for panel-lists embedded in XUL panels on Linux. r?hjones

Comment 8

[Daniel Holbert [:dholbert]]

I tested the attached patch in a local build, and I confirmed that the issue does seem to be fixed with the patch. (The border shows up and looks good to me. I tested with both dark and light color-scheme preference.)

Thanks, mconley!

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/8b506ab41451
Ensure there is an outline for panel-lists embedded in XUL panels on Linux. r=desktop-theme-reviewers,dao

Comment 10

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/8b506ab41451

Comment 11

[Emilio Cobos Álvarez (:emilio)]

Just a reminder, I'm not sure this is the right solution. Panels on Linux are supposed to have borders and shadows, but it seems popup.css is not getting loaded?

Comment 12

[Mike Conley (:mconley) (:⚙️)]

Thanks for the reminder! Filed bug 1848351.

Comment 13

[Dana Lucaci, Desktop QA]

Reproduced the issue with Firefox 118.0a1 (2023-08-01) on Ubuntu 22.04.
The issue is verified fixed with Firefox 119.0a1 (20230831092008) and Firefox 118.0b2 (20230829180158) on Ubuntu 22.04.