74058 - HTML form controls are very ugly

Status: RESOLVED WORKSFORME

(Core :: Layout: Form Controls, defect)

Description

[Simon Fraser [no longer active]]

The appearance of HTML form controls leaves a lot to be desired; they look like
bad examples of Windows 3.1 widgets, and make no attempt to respect platform
conventsions (despite the list box still using a native scroll bar)

This is a catfood item for me.

Comment 1

[Blake Ross]

Uh huh.  They suck.  Personally, I'd rather see this time be put into xblifying 
them (so they can look and feel like our chrome widgets, which our considerably 
nicer).

Comment 2

[rods (gone)]

I agree they don't look great and eventually we will move them over to XBL. But 
isn't this German's issue or somebody over in the UI group?

A good start right now to improve things would be to create platform specific 
forms.css files. Which I tried to start a thread in the UI newsgroup (or XPFE) 
many months ago, but nobody was interested.

So, who is in charge of making the decision to change what is there? 

Comment 3

[Matthew T (active 1999-2002)]

I filed bug 67749 for making forms.css platform-specific, and volunteered to 
write the Mac version.

Note that we'll need platform-specific forms.css even when we have XBL form 
controls (for OS-specific padding between controls, <fieldset> appearance, 
etc), so it's not as if we save time just by waiting for XBL form controls.

Comment 4

[Simon Fraser [no longer active]]

So, how about some pretty HTML form controls, guys?

Comment 5

[Matthew T (active 1999-2002)]

*** Bug 47632 has been marked as a duplicate of this bug. ***

Comment 6

[Daniel Borgmann]

Make them look nice, everything else isn't very important for now. You can still
do the magic and think about revolutionary new ways, if mozilla 1.0 is out. But
for 1.0 I would suggest just making those form widgets match the Classic theme
(and therefore the win32 native look). I use Linux and I would prefer a native
Gtk look, but I think that's impossible because of different Gtk Engines.
To please Windows users is the easiest thing for now. And copying an existing
look as much easier, than to create something new.
The advantages:
- A clean and almost nice look and feel of the form widgets. Also it would look
weird for Mac OS users... that's life.
- Mozilla looks neat on win32 and that's the platform where the most important
fight is fought.

Well, I don't really care which solution will be used, but something has to be
done. Soon. Those widgets look cheap.

Comment 7

[Henri Sivonen (:hsivonen)]

An idea about using native plug-ins to draw XBLified widgets has surfaced a
couple of times. Is anyone working on it? (Mac OS X users are going to want real
Aqua widgets in forms and elsewhere. OmniWeb has Aqua form widgets.)

Screenshots:
http://www.pp.htv.fi/hsivone1/OmniWeb-form.png
http://www.pp.htv.fi/hsivone1/Mozilla-form.png

Comment 8

[rods (gone)]

I don't think it would take much to have it copy the platforms specific files 
per platform build. I think we should do it. Who needs to ok this?

Comment 9

[Matthew T (active 1999-2002)]

Rod, you are the owner of the HTML Form Controls component. Fixing bug 67749 
requires nothing more than a relatively simple change to the build config, 
which shouldn't affect any other components. So why do you think you need 
someone else to ok this?

Comment 10

[Simon Fraser [no longer active]]

Right. No-one needs to ok this. If you see a snake, kill it.

Comment 11

[Mike Pinkerton (not reading bugmail)]

<al haig voice>
I'm in charge and I give Rod full authorization to fix this. Make them not suck!
</al haig voice>

go for it! ;) ;)

Comment 12

[David Hyatt]

Actually, I have everything set up to do this already for xbl form controls, and
we could possibly leverage that work.  The xbl-forms.css file for XBL form
controls comes from xbl/builtin, which is already subdivided into mac and win dirs.

Comment 13

[David Hyatt]

I'm still not sure this is worth doing without XBL form controls though.
Without XBL, I don't think we can even come close to getting the Mac widget
look, and wewon't be able to do much better on the Windows look than we're doing
already.

Comment 14

[Simon Fraser [no longer active]]

I think it's worth doing. I'm sure the skin guys could whip up some CSS to make 
the old form widgets look 200% better in about an hour. This is low-hanging user-
perceived-quality fruit.

Comment 15

[David Hyatt]

Look better how?  I think you underestimate the role XBL plays in enabling you
to produce a better look.  For example, without XBL, you can't even do a Win32
native border (since it has two levels).

Comment 16

[Simon Fraser [no longer active]]

I was able to get widgets that look more like 4.x by hacking the CSS; I know we 
can't do fancy borders, but at least we can eliminte those butt-ugly 2-pixel 
bevels everywhere.

Comment 17

[Matthew T (active 1999-2002)]

[Ding!-dong!] ... Attention, passengers ... *** Bug 66749 *** is the bug for 
discussion of platform-specific forms.css. It contains concrete examples of how 
to make the form controls look nicer (not perfect, but nicer) using plain CSS 
without XBL. That's *** bug 66749 ***, leaving now at Gate 3A. Thankyou.

Comment 18

[Matthew T (active 1999-2002)]

Ok, so I'm stupid. It's bug 67749, not 66749. Sorry. *sigh*

Comment 19

[Daniel Borgmann]

Attachment: Some ideas to make CSS widgets looks less ugly. What do you think?

Comment 20

[rob cherny]

adding me 2 cc:

Comment 21

[rods (gone)]

Moving to Future

Comment 22

[Martin Horwath]

the reason why the form-controls are ugly as hell is that inset,outset,ridge or 
groove painting for borders is not looking good. a solution would be solving 
bug 50699 .i think that would be easier to solve than waiting for xbl-
controls ;-)

so what do you think ?

Comment 23

[Joe Hewitt (gone)]

The ugly days are over.  Hyatt recently implemented -moz-border-top-colors
(left,right, bottom too of course) which lets us specify a list of colors for a
border. Using this, I have been able to make our form controls look GOOD.  We
can easily imitate the look of windows form controls, at the very least.

Comment 24

[Joe Hewitt (gone)]

Attachment: quick and dirty patch to make form controls look like windows

This patch is just an example, there is more work to do, but you get the idea.

Comment 25

[Joe Hewitt (gone)]

Attachment: screen shot - yes, that's mozilla

Comment 26

[Brian 'netdragon' Bober]

Attachment: This is what it looked like on my screen.

I applied your patch, and that is what it looked like on my build. Did I miss
something? Maybe there is something else you have to apply along with it?

Comment 27

[[e-mail]]

There may be a problem with using -moz-border-colors: in html.css; consider a
page whose form controls are styled inline with CSS. -moz-border-colors appears
to override the border: colour, so the page's border colours will get lost.

Comment 28

[Ronald van Kuijk]

This looks great....

Besides the radiobuttons (but that is probably why Joe left them out in his
example) Why aren't these checked in yet? I understand the problem described in
the previous but for the moment its a quick win since I expect that not many
sites style form elements, at least not the border..

Comment 29

[[e-mail]]

Attachment: Test case

The problem with radiobuttons appears to be caused by a bug in the
-moz-border-color code in combination with -moz-border-radius.

Comment 30

[Ronald van Kuijk]

one year has passed, no progress in bug #57209 (XBL form controls) and still
patch http://bugzilla.mozilla.org/attachment.cgi?id=60900 is lying around. Is
the problem mentioned in comment #27 and comment #28 stil there? Otherwise I'd
like to see the patch checked in as a temporary fix (what is temporary as xbl
has no progress...)

Comment 31

[John Keiser (jkeiser)]

Ronald: do form controls still look ugly for you?  There were many considerable
improvements in the look of form controls in 2002, though theming probably made
this point moot for most of us :)

Comment 32

[John Keiser (jkeiser)]

Rod no longer works on form controls for Mozilla.

Comment 33

[[e-mail]]

I like most of the improvements, except one: the checkbox/radio focus style.

Comment 34

[Boris Zbarsky [:bzbarsky]]

Shouldn't this be solved by using native theming for form controls like Win2XP does?

Comment 35

[Ronald van Kuijk]

Just to be precise... the gui of mozilla/thunderbird/fire* looks great, it is
just the controls in the html pages that do not look good. 

Even more precise, the borders of controls and the dropdown arrow on selects.
The scrollbars on controls look good.

Do you mean by 'use native theming' that it I could turn that on on linux or
that it should be implemented?

Comment 36

[Brendan Eich [:brendan]]

Which Linux desktop and OS version?  We do render some widgets and widget-parts
using GTK code called via nsITheme.

/be

Comment 37

[Ronald van Kuijk]

Fedora 1.0 with extras

Kernel 2.4.22
Gnome 2.4.1
GTK2 2.2.4
Metacity 2.6.5

2 screenshot attachements added. I'll try to make anotherone with the 'patch'
applied

btw. it is impossible to make a screenshot with e.g. target milestone in a
dropdown situation, but that can either be a gnome or mozilla issue.

Comment 38

[Ronald van Kuijk]

Attachment: Screenshot of this bugpage with default L&F

Screenshot of this bugpage with default L&F

Comment 39

[Ronald van Kuijk]

Attachment: Screenshot of query page with default L&F

Screenshot of query page with default L&F

Comment 40

[Brian 'netdragon' Bober]

Wow. That looks excellent.

I have one question, though. Could certain X Windows themes' controls screw up
the layout of web pages?

Comment 42

[Boris Zbarsky [:bzbarsky]]

Whoever decides to work on this, note bug 264523 comment 4 which describes some of the issues with, e.g., using -moz-border-colors here.

Comment 43

[Nickolay_Ponomarev]

Works on the three main platforms, guess this bug can now be closed.