Pretty Form Widgets for Firefox, the next step

2.07 2005 - 14:15 utc +9 | Comments

The development process for the next release of Firefox is humming along very well. A second developer preview release (DeerPark alpha 2) is expected any time soon, with a final release scheduled for the end of the summer. Lots of things have changed for the better (Preference window, dramatic speed improvements, easier to use interface, blazingly fast caching,…), with Firefox for OS X getting lots of interface overhauls, and compatibility with Apple’s HIG documents.

Widgets

One often demanded feature will not be included in the final release of Firefox 1.1 however: native looking cocoa widgets. Based on all previous work, I have updated my own ‘widgets’ package, to give those form widgets a more sexy look. Some notes about this release:

improved design.
much better support for RTL languages, such as Hebrew and Arabic.
better display of disabled widgets.
my previous package didn’t allow for styling of widgets by web–page authors. I’ve now made it so that some form objects can be styled (background colours for input fields in particular, styling of the button tag,…).

Overall behaviour of the widgets follows closely what Safari 1.3 and 2.0 is doing.

Download the code (css files and images) for this new release: prettywidgets.tgz. This only runs correctly on Firefox 1.04, and Firefox nightly builds released after 2005.06.30 (and the soon to be released DeerPark alpha 2 for developers).

Future

The good news, Josh Aas, one of the lead developers on Firefox and Camino, has started working on real cocoa widgets for Firefox, similar to those already existing for Camino. This is lots of work, and regression prone; cocoa widgets won’t be available yet for the upcoming Firefox 1.1.

Firefoxy

Then, Aaron has been very kind. The latest release of Firefoxy now includes my code as the default. 3 cheers and thanks, Aaron.

Notes

There has been lots of interest from the Linux world for this widget code. Strictly speaking, the changes I made are optimised for the OS X releases of Firefox, and use some Mac specific code. With slight modifications, it should not be difficult to make this working on Linux builds of Firefox. Let me know if you need some help, or if you are succesful. Garret LeSage already made one implementation, for Firefox 1.04 available.

Any further update to those widgets will always be available from the downloads section.

Update(s)

Kai ‘Powerbook’ Mathisen has also included these widgets in his beautiful G4 optimized Firefox builds.
Josh has published a screenshot of Firefox with cocoa widgets. It looks like current rendering of Camino.
Reader Alan debugged a bit the css file to get it to work on his Linux box. I’ve made those files now available for download separately from the Mac pretty widget files. I can’t guarantee that those will work correctly for every Linux install. And, as I have only have sporadic access to a Linux install (running Ubuntu) and I’m not familiar enough with all the Linux conventions, etc, feedback is certainly appreciated.
Download: Prettywidgets-Linux.tgz
Starting with the 2005-09-12 builds, the nightly trunk builds for Firefox (those with rv:1.9a1 in the UA string), include some changes in the forms.css file. I’ve updated the file, and made a special package available: prettywidgets-1.9.tgz

Comments

Comment by: Kai Rune Mathisen — 2.07 2005 - 18:00 UTC+9 [ # ]

Great work, as always! :)

They certainly bring better looking form widgets to Firefox…
Comment by: Thomas — 7.07 2005 - 09:04 UTC+9 [ # ]

How do I get this to work with Firefoxy? I’d like to try them out without having to do it manually. ;)
Comment by: Philippe — 7.07 2005 - 09:25 UTC+9 [ # ]

Thomas, The latest version of Firefoxy includes those widgets as a default for the nightly builds. Just download and run that. Or, you can edit your own version of Firefoxy to use them. Download the files linked above, and read the instructions I posted previously.
Comment by: Allan — 29.07 2005 - 19:01 UTC+9 [ # ]

Those widgets looks cool on my iBook, great job, so i copied it on my linux workstation. Everything looks the same, but i have to click 3 time on dropdowns in order to make then drop down. I know it is made for macs, but it could be great if it also worked on other OS’s too :)
Comment by: Philippe — 29.07 2005 - 20:54 UTC+9 [ # ]

Allan, I suspect the problem on Linux is related to some Mac specific code I use to have some focussing ring around each widget. I made the forms.css available without that part of the code. Here is the ~~download~~. That package only contains the css files for either Firefox 1.0 (platform.css) or Firefox 1.1+ (forms.css). Exchange the css files, and let me know how it goes.

I won’t be able to test myself at the moment, as I won’t have access to a linux box for at least a week.
Comment by: Allan — 31.07 2005 - 20:35 UTC+9 [ # ]
Thanks for the files, it got me experimenting with commenting out code chuncks. It had nothing to with the focussing ring around each widget, but changed the following in platform-forms.css did.

--- snip ---
```
/* linux triple-click fix */ 
/* html select:not([multiple]):focus,  
html select:not([multiple]):hover:active {
        border: 2px solid !important;  
        -moz-border-top-colors: #616365 #fff;  
    -moz-border-right-colors: #797b7f #cecece;  
    -moz-border-bottom-colors: #797b7f #cecece;  
    -moz-border-left-colors: #616365 #fff;  
} */ 
```
—-snip—-

I am not sure what this code does and how important it is, but i have not found any problem yet.

Sorry for the messy code layout, could not get to look right.

ed. cleaned up the code display for nicer presentation.
Comment by: Philippe — 31.07 2005 - 23:22 UTC+9 [ # ]

Thanks for this debugging, Allan. I’ll post some updated files for Linux users as soon as possible.

And don’t worry about the messy code display. I went into the back end to clean up a bit. There are still some problems with Textpattern’s handling of this.

Commenting is closed for this article. If you have anything to share, feel free to contact us.

::[ Empty Spaces ]:: Wandering through, a journey within.