264523 - De-uglify default gecko HTML form widgets (forms.css)

Status: RESOLVED DUPLICATE of bug 74058

(Core :: Layout: Form Controls, enhancement)

Description

[Steven Garrity [:sgarrity]]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; rv:1.7.3) Gecko/20041003 Firefox/0.10.1
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; rv:1.7.3) Gecko/20041003 Firefox/0.10.1

On platforms that aren't picking up the native look for HTML form widgets
(Linux, Mac OS X), the default HTML form widgets in gecko have an old visual style.

Garrett LeSage from Novell has put together a simple set of updates to
/res/forms.css that bring these forms from a 1996 look to a 2001 look. They are
design to have a minimal impact and be easily incorporated. The css changes are
minor and the widgets do not change in size - they only change slightly in
internal appearance.

The look a *lot* better. I'd like to see his forms.css used (in Firefox, at
least) by default.

I wasn't sure where to categorize this bug - please feel free to move it.

Reproducible: Always
Steps to Reproduce:

Comment 1

[Steven Garrity [:sgarrity]]

Attachment: replacement for /res/forms.css

Comment 2

[Steven Garrity [:sgarrity]]

Attachment: Updated Radio button png

Comment 3

[Steven Garrity [:sgarrity]]

Attachment: Updated Radio button (checked) png

Comment 4

[Boris Zbarsky [:bzbarsky]]

Steven, does Garrett have a bugzilla address?  If so, please cc him.  There are
some pretty serious issues with the attached CSS that I think it would be good
to not ship in the Novell version of Firefox or SeaMonkey (not sure which they
ship)...  I wish the attached file had been attached as a diff -- that would
make it a lot easier to read.  Using "diff -up10" would be best here, I think.

What follows is not a full review, just comments based on a 10-minute skim of
the file.

1)  Why is the license being changed to the NPL?
2)  What sort of testing has been done on the interaction of this CSS with
    author styles?  I see at least the following problems:

    A)  Setting "-moz-border-colors" means that "border-color" settings will
        suddenly be ignored.
    B)  I see a lot of stuff being marked !important.  This means authors can't
        change it anymore.  There are good reasons for this, right?  If so, they
        should be clearly documented in the CSS.
    C)  letter-spacing is no longer really applied to file inputs.
    D)  Radio buttons no longer scale correctly (try setting the width and
        height of one via style)
    E)  The way checkboxes align vertically has been changed (this is only a
        potential problem; I recall something breaking when I tried that change
        at some point, but I can't recall what it was).
3)  The "if the input is styled" code is just wrong in that it doesn't detect
    "styled" inputs.  There are many other ways of styling inputs (eg the common
    method of styling all "input" nodes).
4)  The same block sets margin to "inherit" for some reason.  This is absolutely
    wrong.  I was testing out issue (2A) from this comment to make sure I
    recalled correctly and simply adding a style attribute caused the input to
    move by 8px (the margin of the body).
5)  This is clearly not based on the trunk forms.css.  There are changes that
    have been made to the trunk forms.css recently that are absolutely required
    for proper functioning of back-end code (read: not crashing) that are
    missing from this file.  They're not needed for Firefox branch, of course.
6)  The select button height is being changed, as far as I can tell (it's
    getting borders when it used to have none).
7)  The change to outlines on focused nodes will make the outlines invisible in
    many cases.
8)  I no longer see anything indicating the focused state of radios and
    checkboxes.  Am I just missing it?

Comment 5

[Steven Garrity [:sgarrity]]

Boris, thanks - all good points. Which forms.css file in the source should we be
working against?

This one?:
http://lxr.mozilla.org/aviarybranch/source/layout/html/document/src/forms.css

Comment 6

[Boris Zbarsky [:bzbarsky]]

Steven, that's the one for Firefox 1.0.  For trunk and releases of Firefox after
1.0, you should be using
http://lxr.mozilla.org/seamonkey/source/layout/html/document/src/forms.css
(which is the same file, but not on the aviary branch, so different at this point).

Comment 7

[Anne (:annevk)]

Attachment: diff

Here is a diffed version (-up8).

Comment 8

[Boris Zbarsky [:bzbarsky]]

Note that that diff backs out some recent changes that have gone into forms.css
(eg the form margin change).

Comment 9

[Anne (:annevk)]

Yeah, I didn't clean up the file of Steven. This should not be considered a
patch therefore, just a diff.

Comment 10

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

You could at least diff against the version that the changes were based on.

Comment 11

[Boris Zbarsky [:bzbarsky]]

But what's the point given that the file you're diffing against has numerous
known issues?

Comment 12

[Paul Lambert]

Now mac os is getting some attention to its form widgets, maybe linux will be
next. i doubt this will be in by 1.1, as iv heard the mac widgets may not be in
by then. but 1.5 would be nice.

failing that i suppode the default ones could be made nicer?

Comment 13

[Boris Zbarsky [:bzbarsky]]

Given that we now do native theming on all platforms, is this relevant?  I guess pages can drop native theming, so maybe...

Comment 14

[Boris Zbarsky [:bzbarsky]]

Dupping to much older bug with more discussion, in any case.