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

Firefox widgets, yet again

21.12 2004 - 14:40 utc +9 | Comments

With the newest nightly trunk builds of Firefox, after the release of Firefox 1.0 in November, the previously discussed form widgets styling for Firefox on OS X stopped working. The browser doesn’t load/read the platform-forms.css anymore, style–sheet that was used to style those widgets (as a sidenote: there is simply no platform-forms.css in the original package). After some trial and error and a round trip through the DOM Inspector, I’ve been able to move all styling to the userContent.css file. There were some problems with this. Due to some security issues, the browser cannot load external files linked from the userContent.css. Hence, background images still need to be placed inside the application bundle. Another problem I encountered was fully styling the radio buttons and checkboxes (input[type="radio"] and input[type="checkbox"]. For some reason, the default styling kept overriding the rules in my useContent.css. Commenting out some of the rules in forms.css file (which controls the default styling of the widgets) turned out to be the easiest solution. I’ve used this set of rules over the past few weeks without encountering any problems.

As an additional bonus, I’ve added rules to style the [disabled] form widgets as well, something that was lacking with the original packages.

To use these modifications:

  1. Download the package linked below.
  2. Quit Firefox.
  3. Add the contents (everything) of the userContents.css at the very top of your own userContent.css file (found in the chrome folder of your profile directory). This must be placed at the top of the file.
  4. Right–click or control click on the Firefox.app icon (usually in the /Applications folder), and select ‘Show Package Contents’. Navigate through Contents > MacOS > res. In the ‘res’ folder, add the images and replace the forms.css file.
  5. Done. Launch Firefox and enjoy.

Download the widgets-1.8 package.

It is probably safe to make a backup of your profile folder before proceeding.

This has been tested with the nightly Trunk Builds since December 1 (Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8a6) Gecko/200412** Firefox/1.0+). I didn’t test this with the official Firefox 1.0 release, although there is no reason that it shouldn’t work. Some of these rules might even work with Windoze and Linux builds.

Note: I don’t know the reasons why the original workaround stopped working in the nightly builds. Possibly, this is a deliberate choice by the developers, preparing for more changes to come in the architecture of the browser (the ‘aquafication’ release ?). Those CSS rules above are yet again a stop gap measure to make the form widgets nice-looking on OS X. It is certainly not yet a definitive solution. Much better would be to have the browser use the native OS X form widgets. All other OS X browsers do this already. And Firefox already uses the native scroll bar mechanism for elements with overflow. bug 175279: native-style form controls calls for this. Vote for it.

[update] The latest version of these widgets (current release notes) is always available in the downloads section.

Comments

  1. Comment by: Hiro — 26.12 2004 - 23:23 UTC+9   [ # ]

    I created an installer based on kaz’s work (whom you mentioned in article #63) and yours. But, according to this artcle, I have to modify the installer for new Firefox… I will try later.

  2. Comment by: Philippe — 27.12 2004 - 07:33 UTC+9   [ # ]

    Thanks, Hiro.

    For the record, Hiro’s installer (OS X type installer) can be found from this page.

  3. Comment by: Hiro — 27.12 2004 - 10:53 UTC+9   [ # ]

    Thanks for the follow-up.
    The page Philippe has intruduced above is written in Japanese. Those who understand English can refer this page.

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