Closed Bug 1846624 Opened 7 months ago Closed 7 months ago

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

Categories

(Firefox :: Migration, defect, P1)

defect

Tracking

()

VERIFIED FIXED
118 Branch
Tracking Status
firefox118 --- fixed

People

(Reporter: dholbert, Assigned: mconley)

References

Details

Attachments

(4 files)

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.

Attachment #9346801 - Attachment description: screenshot → screenshot showing what this UI looks like when the menu is dropped down

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)

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

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)

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

Thanks for the thorough analysis, dholbert!

Assignee: nobody → mconley
Severity: -- → S4
Priority: -- → P3
Priority: P3 → P1

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!

Pushed by mconley@mozilla.com:
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
Status: NEW → RESOLVED
Closed: 7 months ago
Resolution: --- → FIXED
Target Milestone: --- → 118 Branch

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?

Flags: needinfo?(mconley)
Blocks: 1848351

Thanks for the reminder! Filed bug 1848351.

Flags: needinfo?(mconley)
Flags: qe-verify+

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.

Status: RESOLVED → VERIFIED
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.