405207 - Using system colors doesn't work for form elements

Status: NEW

(Core :: CSS Parsing and Computation, defect)

Description

[ChanibaL]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; pl; rv:1.9b1) Gecko/2007110903 Firefox/3.0b1
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; pl; rv:1.9b1) Gecko/2007110903 Firefox/3.0b1

This is a bug i noticed years ago but i think ff3 would be a good ocasion to fix it. Most ppl do not notice it because they use normal system colors like black text on white background, but some do not, i have silver text on almost black background. This unfortunatly leads to many usability problems, because most (almost all, including this one) websites do not think about this possibility. If the user is lucky they do not touch form styling at all and everything looks just out of place, but a simple *{color: ...} makes using this site very annoying - my bank for example - dark blue on dark gray.

Reproducible: Always

Steps to Reproduce:
1. Set your system theme to something with dark backgrounds, unset use system colors in the preferences->colors menu, but leave the ability for websites to use their own colors.
2. “enjoy” forms on most websites - good example: https://www.mbank.com.pl/
3. use something like web developer addon to disable colors or css before using the forms



I know that it is not a firefox bug, but the fault of webdesigners that don't think about this, but i think that if you have the option to set the colors, then that option should set all of them, not just some.

The problem is also reproducable on windows.

Comment 1

[ChanibaL]

Attachment: the forms elements on this site - they aren't touched by css, and are readable

Comment 2

[ChanibaL]

Attachment: my bank's site - wish me good luck finding misspelled account numbers in these forms!

Comment 3

[Bruno Wolff]

I am seeing what I think is the same problem. I used fixed colors rather than system colors, but I have the same problem that form elements don't use my colors, though other parts of pages do.
If there is a style sheet, then some elements seem to pick up my background color, but not my font color, making the element impossible to read without disable the style sheet (using: view -> page style). I normally use black as my background color and bluish white for my font color.
Things work correctly in firefox 2. When I switched to firefox 3 (firefox-3.0-0.beta2.12.nightly20080121.fc9.i386) I started seeing the problem.
I originally entered a ticket (https://bugzilla.redhat.com/show_bug.cgi?id=430570) in Fedora/Redhat's bugzilla system about this issue.

Comment 4

[Boris Zbarsky [:bzbarsky]]

What this bug needs are clear steps to reproduce.  In particular:

1)  A url to an HTML page showing the problem.
2)  The exact steps taken by the user to change their color scheme.  Are you
    changing it in Firefox preferences?  OS preferences?  Somewhere else?

Also, please make sure to test in a current Firefox 3.1 beta build; there have been significant changes to this code since Firefox 3 betas.

Comment 5

[ChanibaL]

Boris, both of these are stated in the bug, but here's some more:

AD 1. for example https://bugzilla.mozilla.org/show_bug.cgi?id=405207

AD 2. OS preferences (gtk theme), firefox is using the default theme

Firefox 3.1: will check, not now through

Comment 6

[ChanibaL]

Firefox 3.1 is as broken as 0.x, 1.x, 2.x and 3.0 series.

It's about time this thing gets fixed, probably some default css values will be enough.

Btw, a workaround i use is to well... use a not so dark theme, for GTK2 ubuntu studio is quite good at that.

Comment 7

[Boris Zbarsky [:bzbarsky]]

When I say steps to reproduce, I mean steps to reproduce.  Starting with a clean FC9 and Firefox install, which menus do I look at, which options do I select, etc.  Step by step.  Assume I've never used Linux (which is true enough for this purpose; I've never used GNOME).

Comment 8

[MasterPi]

(In reply to comment #7)
> When I say steps to reproduce, I mean steps to reproduce.  Starting with a
> clean FC9 and Firefox install, which menus do I look at, which options do I
> select, etc.  Step by step.  Assume I've never used Linux (which is true enough
> for this purpose; I've never used GNOME).

1. From the Gnome menu, choose System->Preferences->Appearance.  Then in the theme tab, select High Contrast Inverse if it is available; if not, select Clearlooks (hopefully installed by default), and click Customize... at the bottom of the theme list.  Then select the Color tab, and set up a light-on-dark theme.

2. Start Firefox and open the Preferences window.  Select the Content tab, then under Fonts and Colors, select Colors.  Under Text and Background, uncheck "Use system colors".

3. Visit a page with an unthemed form (such as Bugzilla).  You'll notice all text fields are themed to match the system theme.  While this is somewhat nice for when they are completely unthemed, when they are half-themed (only one of background and foreground set) they are rendered unusable.

This bug probably has to do with different handling of form elements and other page elements, due to trying to use the GTK widgets for form elements.  It'd be nice if there was a way to force fields and buttons to a default background/foreground color other than the one in the GTK theme.  Firefox seems to fall back on its own widgets when the background color of buttons are set by the page author, though they aren't very attractive.  This probably indicates that the developers couldn't find a way to change the background color on the native GTK widgets (it may not even be possible with all themes since not all themes are color-configurable).  Users wanting defaults set to something other than the GTK theme will probably have to sacrifice the native look and feel of their form widgets, but this is a small price to pay for usability.  It should definitely be optional though, because users of normal-colored themes will want to keep their native looking forms.  The perception of this as a bug comes from expecting the "Use system colors" to apply to forms as well as normal elements, since there's not a clear distinction made in the dialog.

Comment 9

[Boris Zbarsky [:bzbarsky]]

Aha, thank you!  That makes a lot more sense.

Yeah, I think we should drop native theming for HTML forms at least if "use system colors" is unchecked.  David, thoughts?

Comment 10

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

"Use system colors" being unchecked is the default; I think it refers to whether we should use system colors for the default foreground and background colors (and maybe the link colors?) -- i.e., it's about whether to replace the colors in the dialog with system colors, not about whether to use system colors in general.

And I don't think we want to drop native theme on form controls in the default configuration.

Comment 11

[Jeremy Nickurak]

> And I don't think we want to drop native theme on form controls in the default
> configuration.

Have to disagree here.

If the page is colored like the native theme, native-themed form controls make sense. If any changes are made to the page's colors however, the native-themed form controls can stick out like a sore thumb.... or be colored as if they blend into the background:

http://nickurak.ca/~atrus/bad-bugzilla-colors.jpg

The problem is dramatically worse when either the foreground or background color of the form controls is changed by the page, which can *easily* lead to the form controls becoming unreadable:

http://nickurak.ca/~atrus/bad-slashdot-colors.jpg

Using the native theme for form controls makes sense *if and only if* the page is also using the native-theme.

Comment 12

[[:Aleksej]]

A related issue: bug 519763.

Comment 13

[bailey]

I think this issue might finally be fixed in FF8! Text fields/boxes work as desired from the URL posted to this bug report as well as others that I've tried.

Comment 14

[Graham Perry]

No, this has not been fixed.