Bug: about:preferences findInPage highlight is very difficult to see when combining dark mode with custom highlight / text colours using ui.* prefs
Status: NEW
Priority: P2
Created: 2021-01-16 01:45:24+00:00
Resolved: 2023-06-02 15:20:59+00:00

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:86.0) Gecko/20100101 Firefox/86.0

Steps to reproduce:

- Enable chromeUI dark mode
- Go to about:preferences and type something in the searchbox
- findInPage.js calls this:

getFindSelection(win) {
    // Yuck. See bug 138068.
    let docShell = win.docShell;

    let controller = docShell
        .QueryInterface(Ci.nsIInterfaceRequestor)
        .getInterface(Ci.nsISelectionDisplay)
        .QueryInterface(Ci.nsISelectionController);

    let selection = controller.getSelection(
        Ci.nsISelectionController.SELECTION_FIND
    );
    selection.setColors("currentColor", "#ffe900", "currentColor", "#003eaa");

    return selection;
}


Actual results:

See the attached image. #ffe900 is ultra-bright yellow, 100% saturation 50% lightness. Works fine when currentColor is black, but in dark mode the font color is white. In that case, the text is almost completely illegible. I've tried rec709, rec2020, and DCI-P3 and it's really difficult to read in every case unless gamma is set very low. I don't think it's likely that the average user's color space is configured in such a way that this works.


Expected results:

I think findInPage.js should either read a pref or do a media query, and set a property _highlightColor accordingly. Then when it calls selection.setColors() it can pass "currentColor", highlightColor. I did test it myself with a pref. I think that would be the cheapest way to make the color dynamic but I'm not any expert on the selection controller. However, I think it would be cleaner to use something like:
_highlightColor = window.matchMedia("(prefers-color-scheme: dark)").matches ? "#7d7309" : #ffe900

That way it's not necessary to make any new prefs. But idk what other considerations there might be. Maybe it's more desirable to just find a neutral highlight color that is legible whether the text is black or white. In my experience though, I don't think all users would be happy with a single color. I find that washed out purple is a pretty neutral color that's still bold enough to stick out as a "highlight" color, but not every user wants purple highlights. In this case I think it might actually make sense to make a new pref, since changing highlight colors is a popular user modification. iirc, macOS has let you choose between several highlight colors for like 15 or 20 years.

That said, some prefs already exist for highlight colors. I don't think they're that great, but there are prefs like ui.textHighlightBackground and ui.textSelectBackground and a few more. These change the color of highlights created by the findbar. These prefs could be used but they work in a weird way that I can't really describe. You'd probably have to test them to see what I mean.

Anyway, there also needs to be a CSS rule for the arrow tooltips, e.g.
@media (prefers-color-scheme: dark) {
    .search-tooltip {
        background-color: #7d7309;
        color: #fff;
        border: 1px solid #635607;
    }
}