Closed Bug 1792063 Opened 3 months ago Closed 3 months ago

Firefox uses white font on gray ground in the menu for the highlighted item

Categories

(Toolkit :: General, defect)

Firefox 105
Desktop
Linux
defect

Tracking

()

VERIFIED FIXED
107 Branch
Tracking Status
relnote-firefox --- 105+
firefox-esr102 --- unaffected
firefox105 --- verified
firefox106 --- verified
firefox107 --- verified

People

(Reporter: allo, Assigned: emilio)

References

(Regression)

Details

(Keywords: regression)

Attachments

(2 files)

Since Firefox 105, <select > menus on websites have a grey background with black foreground text, but the highlighted item has a grey background with white foreground text (when using a dark theme), which is very hard to read.

This may be related to Bug 1784328.

As soon as I give a <select> a background-color property, the dropdown menu uses the style of the context menus and main menus and has a dark background with white text and highlighted items have a blue background. The bug seems to only affect unstyled widgets.

In general it seems that Firefox stopped using the old theme colors and changed something with the menus between version 104 and 105.

Summary: Firefox uses white font on white ground in the menu for the highlighted item → Firefox uses white font on gray ground in the menu for the highlighted item

This really needs a bit more context in order to be fixable.

What browser theme are you using? And what is your content appearance setting in the Firefox settings? And can you link to a website where you reproduce this problem (and/or does it reproduce on just data:text/html,<select><option>A</option><option>B</option>) ?

The bug report indicates you're on Linux - which window manager and what window manager theme are you using?

Flags: needinfo?(allo)
  • WM: Kwin
  • Gtk-Theme: Clearlooks-Phenix (light color scheme)
  • Firefox Theme: Default Black theme
  • URL to reproduce:
    data:text/html,<select><option>A</option><option>B</option>
  • URL where it does not happen (Dark menu item background, NO blue):
    data:text/html,<select style="background: blue"><option>A</option><option>B</option>
Flags: needinfo?(allo)

Dark menu item background, NO blue
The widget itself is blue (with black foreground text and a frame that does not match the color, also a square shape instead of the rounded default), but the popup menu is dark themed.

The selectparent actor code suggests this bug should live in Toolkit::General, though that feels somewhat unsatisfying.

Emilio, any idea what's up here?

Reporter: if you're sure about this being a regression and have time, it could help us if you ran https://mozilla.github.io/mozregression/ to work out which specific change broke this. (104 - 105 still includes 1000s of changes so isn't enough in and of itself, though it's a good clue...)

I'm also still curious about this:

And what is your content appearance setting in the Firefox settings?

That is, if you search the settings for "Website appearance", does changing the website colour scheme there make any difference?

Component: Menus → General
Flags: needinfo?(emilio)
Flags: needinfo?(allo)
Product: Firefox → Toolkit

Sorry, I overread the part with the content preference. It is set to "light"
I can try mozregression later.

Flags: needinfo?(allo)

And setting it to dark doesn't change anything.

I wonder if the data url shouldn't have a dark background on dark website preference. about:blank has one.

When figuring out menuhover background, make sure not to come up with
the exact same color as the menu background. This ensures we also try
gradients / background-images before giving up.

This is only an issue with the dark theme in this case, because
otherwise we use native drawing.

Assignee: nobody → emilio
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true
Flags: needinfo?(emilio)
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/0d1e3f187317
Fix menuhover background computation in some gtk themes. r=stransky

7:02.60 INFO: Narrowed integration regression window from [ef655438, 41bff817] (3 builds) to [ef655438, 93b9d555] (2 builds) (~1 steps left)
7:02.60 INFO: No more integration revisions, bisection finished.
7:02.60 INFO: Last good revision: ef6554388dda8b2a6b7b2627cc59dabdf8aeb0d9
7:02.60 INFO: First bad revision: 93b9d5559192c11f08f01904d677645fe3c7e3d5
7:02.60 INFO: Pushlog:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=ef6554388dda8b2a6b7b2627cc59dabdf8aeb0d9&tochange=93b9d5559192c11f08f01904d677645fe3c7e3d5

(In reply to alex from comment #9)

7:02.60 INFO: Narrowed integration regression window from [ef655438, 41bff817] (3 builds) to [ef655438, 93b9d555] (2 builds) (~1 steps left)
7:02.60 INFO: No more integration revisions, bisection finished.
7:02.60 INFO: Last good revision: ef6554388dda8b2a6b7b2627cc59dabdf8aeb0d9
7:02.60 INFO: First bad revision: 93b9d5559192c11f08f01904d677645fe3c7e3d5
7:02.60 INFO: Pushlog:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=ef6554388dda8b2a6b7b2627cc59dabdf8aeb0d9&tochange=93b9d5559192c11f08f01904d677645fe3c7e3d5

Thanks! I've updated the regressor - looks like Emilio has written and landed a patch already. TBC exactly which version that first goes out in. :-)

Status: ASSIGNED → RESOLVED
Closed: 3 months ago
Resolution: --- → FIXED
Target Milestone: --- → 107 Branch

The patch landed in nightly and beta is affected.
:emilio, is this bug important enough to require an uplift?

  • If yes, please nominate the patch for beta approval.
  • If no, please set status-firefox106 to wontfix.

For more information, please visit auto_nag documentation.

Flags: needinfo?(emilio)

The main menu bar is affected as well:

Dark theme:
On mouseover the main menu items have blue background and white text (The color should probably not be changed at all, see Bug 1792216), on click it has blue background and light blue text, which is hard to read.

Light theme:
When the menu is open, the entry in the menubar has a light gray background and white text, which is almost impossible to read.
(On mouseover it has light grey background with black text which is readable, even when there probably should be no highlight, see Bug 1792216)

Can you share a screenshot of the issue? I can't repro on the latest nightly, I think my patch also fixes what you're seeing.

The "mouseover activates menubar item" is an issue only with the non-native themes ("light" / "dark"). The system theme seems to work as you expect).

Flags: needinfo?(emilio) → needinfo?(allo)

Comment on attachment 9295858 [details]
Bug 1792063 - Fix menuhover background computation in some gtk themes. r=stransky

Beta/Release Uplift Approval Request

  • User impact if declined: Some themes might have poor contrast in menubar / select menuitems.
  • Is this code covered by automated tests?: No
  • Has the fix been verified in Nightly?: Yes
  • Needs manual test from QE?: Yes
  • If yes, steps to reproduce: Install https://github.com/jpfleury/clearlooks-phenix, set dark theme, open a select menu from data:text/html,<select><option>A</option><option>B</option></select>
  • List of other uplifts needed: none
  • Risk to taking this patch: Low
  • Why is the change risky/not risky? (and alternatives if risky): Relatively simple / low-risk patch. Linux only.
  • String changes made/needed: none
  • Is Android affected?: No
Attachment #9295858 - Flags: approval-mozilla-beta?
Flags: qe-verify+
Flags: needinfo?(allo)
QA Whiteboard: [qa-triaged]

Used an old Nightly from 2022-08-14 in order to reproduce this issue: I installed the clearlooks-phenix theme, enabled it and turned on the Dark theme inside Firefox. Hovering over the items from the dropdown data:text/html,<select><option>A</option><option>B</option></select> are white in color with a white hover so basically they are invisible.

Using latest Nightly 107.0a1 from today on Ubuntu 18.04, this is no longer an issue, the text inside the dropdown keeps its dark color and the hover effect is light blue, making the dropdown elements clearly visible while hovering over them.

Comment on attachment 9295858 [details]
Bug 1792063 - Fix menuhover background computation in some gtk themes. r=stransky

Low risk, verified on Nightly, approved for 106 beta 6, thanks!

Attachment #9295858 - Flags: approval-mozilla-beta? → approval-mozilla-beta+

@pascal, I guess this will not reach 105 since we are so close to 106 RC, right? I'm asking because I see that the 105 tracking flag is still set as affected.

Flags: needinfo?(pascalc)

Ryan, is that something you would consider for uplift in 105.0.2?

Flags: needinfo?(pascalc) → needinfo?(ryanvm)

Seems like a great candidate. Emilio, go ahead and nominate :-)

Flags: needinfo?(ryanvm) → needinfo?(emilio)

Comment on attachment 9295858 [details]
Bug 1792063 - Fix menuhover background computation in some gtk themes. r=stransky

Beta/Release Uplift Approval Request

  • User impact if declined: see above
  • Is this code covered by automated tests?: No
  • Has the fix been verified in Nightly?: Yes
  • Needs manual test from QE?: Yes
  • If yes, steps to reproduce: see above
  • List of other uplifts needed: none
  • Risk to taking this patch: Low
  • Why is the change risky/not risky? (and alternatives if risky): Simple linux-specific tweak.
  • String changes made/needed: none
  • Is Android affected?: No
Flags: needinfo?(emilio)
Attachment #9295858 - Flags: approval-mozilla-release?

Comment on attachment 9295858 [details]
Bug 1792063 - Fix menuhover background computation in some gtk themes. r=stransky

Approved for 105.0.2.

Attachment #9295858 - Flags: approval-mozilla-release? → approval-mozilla-release+

Added to the 105.0.2 release notes:

Fixed poor contrast on various menu items with certain themes on Linux systems

(In reply to Bogdan Maris [:bogdan_maris], Release Desktop QA from comment #20)

Also verified as fixed using latest beta build (106.0b6) from treeheder https://treeherder.mozilla.org/jobs?repo=mozilla-beta&revision=29cbf057f9e8c8c7c604dac42ad4fece96164101 on Ubuntu 18.04.

Also verified as fixed on Firefox 105.0.2 on the same Ubuntu 18.04.

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