1702940 - background-color not set correctly in sidebar <select> and <option> elements

Status: RESOLVED FIXED

(Firefox :: Theme, defect)

Description

[trittson]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:87.0) Gecko/20100101 Firefox/87.0

Steps to reproduce:

1. Create an add-on with a sidebar (you can use the annotate-page example to get set up quickly: https://github.com/mdn/webextensions-examples/tree/master/annotate-page)
2. On the sidebar page, add a <select> item with a few <option> elements inside. Set background-color of <select> and <option> elements to an arbitrary color (e.g. black). Example codepen: https://codepen.io/eliykat/pen/bGgRgvm (note this codepen exhibits the expected behaviour because it is not in a sidebar)
3. Click the <select> item to open the dropdown list

Actual results:

background-color is not set on the <option> elements and therefore defaults to white.
This occurs any time the <option> background-color is the same as the <select> background-color. Changing the <option> background-color even by 1 unit will exhibit the expected behaviour.

Expected results:

background-color on <option> elements should be set per the CSS styling, irrespective of the background-color on the parent <select> element. Codepen example shows the expected behaviour.

Expected behaviour also occurs in the add-on popup.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Form Controls' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Can you post an screenshot of what you see? I see a working <select> here (on Linux though).

Comment 3

[trittson]

Attachment: Expected result - dropdown has black background when open

Comment 4

[trittson]

Attachment: Actual result - dropdown does not have background-color set when open

Comment 5

[Jonathan Kew [:jfkthame]]

Could you also attach your example add-on showing the problem, so we can be sure we're looking at the same thing? Thanks.

Comment 6

[trittson]

Attachment: Example add-on showing the bug

Comment 7

[trittson]

Attachment: Screen recording showing the bug

Comment 8

[trittson]

I've attached a minimal add-on which shows the bug, plus a short recording to show you exactly what I'm seeing.

The add-on will open in the sidebar (exhibiting the bug) and in the browser-action popup window (exhibiting the expected behaviour). Per the CSS of the extension, the dropdown items should have white text on a black background. However, when we open the dropdown in the sidebar, the background defaults to white, making the text unreadable.

Comment 9

[Emilio Cobos Álvarez (:emilio)]

Thanks, yeah, that looks pretty bad, I'll try to take a look. I think this might be fixed on Nightly via some related fixes I made, if this is using the general select popup code.

Comment 10

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1702940 - Move content select dropdown rules from browser.css to global.css. r=dao,Gijs

So that the rules apply to the popup in
browser/base/content/webext-panels.xhtml and about:addons as well.

Comment 11

[Emilio Cobos Álvarez (:emilio)]

So I took a look (sorry for the lag, this doesn't repro on Linux so it took a bit more time) and this is a front-end issue. Will fix anyways.

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1a9cd609d14d
Move content select dropdown rules from browser.css to global.css. r=Gijs

Comment 13

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/1a9cd609d14d

Comment 14

[trittson]

Hey Emilio, thanks for sorting this one out! That was a really quick turnaround for a pretty minor bug. Much appreciated.