Cross OS theme development and scrollbars - cause/solution

[KLB]

I have been getting messages via PM and email asking me how I was able to get scrollbars to work correctly on my Firefox 3.0 theme Classic Compact so I thought I would start a new thread on this subject and post everything I know for the benefit of all the other theme developers out there. Maybe an admin could sticky this thread for a while as this will be a serious issue for a lot of developers.

THE PROBLEM: native scrollbars don't work right on themes between Windows Firefox and Mac Firefox
With Firefox 3.0b3 Firefox no longer used two different CSS files to for scrollbar instructions and the two existing files "nativescrollbars.css" and
"xulscrollbars.css" were replaced with "scrollbars.css." In theory this sounded like a good idea to Firefox developers as it would eliminate the need for one stylesheet. In function making this radical of a change so late in the Firefox beta process has created a developing nightmare for theme developers. The reason is was that while Windows Firefox developers opted to use xulscrollbars.css as their scrollbars.css file. Mac Firefox developers decided to use nativescrollbars.css as their scrollbars.css file and neither party took the time to make sure their version of Firefox worked with the other file.

As a result, very serious scrollbar incompatibilities were exposed between Mac and Windows Firefox. If a theme uses the old nativescrollbars.css file as the new scrollbars.css file, and that theme is installed on Windows XP that is using the default Windows XP desktop style (the new "cartoonish" look with rounded everything) then Firefox will draw a 1px black border around all of the scrollbars. This black border does not appear when Windows XP uses the "classic" (aka Windows 2000) desktop style. If on the other hand a theme uses the old xulscrollbars.css file and the theme is installed on Mac Firefox, then Firefox will not display scrollbars at all. Basically the problem is that there is a bug in Windows Firefox that doesn't render the nativescrollbar.css instructions properly and Mac Firefox never implemented some of the native scrollbar instructions used in the old xulscrollbars.css file. For what it is worth, Linux doesn't care which set of scrollbar instructions it gets and it works just fine with both sets of files.

THE SOLUTION: Not very pretty
The only solutions I could find for this issue was to either:
1) release two different versions of my theme with one version targeting Windows and the other version targeting Mac OS; or
2) develop custom scrollbars for my theme.

As I did not want the headache of maintaining two different theme files I opted to create a custom scrollbar for my theme that was loosely based on a hybrid between Windows 2000 style scrollbars and what I had seen from screen captures of Linux style scrollbars. Via the optional extension I created for my theme called Classic Compact Options I was able to give users the ability to revert back to OS native scrollbars by using JavaScript to sniff out the OS when Firefox loaded and to feed Firefox the proper legacy scrollbar CSS file. Unfortunatly, I did not figure out any way of doing this OS sniffing and CSS file swapping within the theme file itself.

THE BUGZILLA BUG REPORT
When I discovered this issue back in March, I did post a bug report on Bugzilla and pleaded for it to be fixed. I even tried to narrow down the cause of the bug even though I am not C++ programmer. Unfortunately, even though this was a regression bug that was caused by a change that should not have been made so late in a development cycle, and that it would have a serious impact on theme developers, the Firefox developers decided this bug would not be fixed before the launch of Firefox 3.0 and that instead it would have to wait until Firefox 3.1 at the earliest to get fixed.

There you have it, the ugly gory details as to nightmare a "late in the game" design change to Firefox will cause you when you try to make your themes cross OS compatible. Hopefully if enough theme developers vote for the above referenced bug, someone with the programming skills necessary will fix the native scrollbars issue such that we can deliver a single install file for our themes while using native scrollbar instructions.

MY FIX
I realize that folks may not want to undertake the effort necessary to make their own custom scrollbars so I'm making a slightly modified version of my theme's custom scrollbars available for others to use in their theme. The only difference between the custom scrollbars I'm providing here and the custom scrollbars my theme uses is that the one's I'm providing here have square corners instead of rounded corners.

You can download my custom scrollbars from http://EnvironmentalChemistry.com/CustomScrollbars.zip

Just unzip the files into your theme and you will be all set.

[aaron]

KLB, thank you very much for the information there. Much appreciated!

[KLB]

I have updated my post above to include a link to a ZIP file that contains my custom scrollbars that folks can add to their own themes if they want to work around the Windows/Mac scrollbar issue. The files are covered by a GPL license so folks can use them how ever they want.

[Xavius]

a MAC user suggests me the idea that a number 3 solution can be using chrome.manifest file to tell firefox to use some OS specific files
read here about chrome.manifest
http://developer.mozilla.org/en/docs/Ch ... gistration

PS: thanks a lot KLB, for your PM support

[KLB]

There has been some discussion of using the chrome.manifest in this thread. The thing is, no one is sure how to implement this on a single file only basis. It appears that this solution would require the duplication of the entire "global" folder, which isn't desirable.

[DonGato]

The problem with custom developed scrollbars is that it has some nasty bugs... viewtopic.php?f=18&t=706855

[KLB]

Yes there are issues with custom developed scrollbars, but those issues are less problematic than the OS native scrollbars. The problem is that Firefox developers did not consider the ramifications of their changes on theme development. This is really an instance of poor quality control in regards to the development of Firefox 3 and theme developers are being forced to work extra hard and to make compromises to sidestep the issues created by changing the way scrollbars get their styling instructions.

[FineWine]

I had a similar problem, that is the scroll bars did not appear, with the "Mostly Crystal 3.0.1" theme by CatThief (http://www.tom-cat.com/mozilla/), as she does not code for Mac due to the lack of a Mac machine. I then discovered this theme by Radar.250x.com, "iFox Smooth 3.0.1", which uses the Mac OS Aqua style scroll bars. With both of these Theme writers permission and for personal use only, I replaced the "scrollbars.css" file and the "scrollbar" image folder in the "global" folder, in the Mostly Crystal theme with the same from iFox Smooth theme. I now have scroll bars in FF3.0.1

Come Mozilla get your act together.

[FineWine]

Is Mozilla any where near fixing this issue or are they not going to bother with it

[aaron]

chascb, the problem existed until around firefox 1.5 and then it was fixed. then it resurfaced in like release candidate 4 or 5 for firefox 3.0.... don't think they're going to fix it. you can take a gander at my themes and see how i got around the issue on my own. not going to hold my breath on the firefox devs fixing it anytime soon.

[FineWine]

chascb, the problem existed until around firefox 1.5 and then it was fixed. then it resurfaced in like release candidate 4 or 5 for firefox 3.0.... don't think they're going to fix it. you can take a gander at my themes and see how i got around the issue on my own. not going to hold my breath on the firefox devs fixing it anytime soon.

If you look at my previous message I am able to work around the issue but it would be nice if we did not have to do this.

Do you write separate versions for Mac and Windows with your themes or have you solved this with just one theme?

[KLB]

I was able to develop one theme file that runs on all OSes, however, to do this I had to use custom scroll bars. It was not easy to do and took a lot of careful testing. I tend to agree with Aaron that we should not hold our breath that the cross OS theme development issues will get fixed any time soon. It just doesn't seem to be a priority.

Personally I'd be happy if they just stop breaking our themes between Firefox versions.

[ShareBird]

This can be solved:
viewtopic.php?f=18&t=906535&p=4756995#p4756995

[FineWine]

This can be solved:
viewtopic.php?f=18&t=906535&p=4756995#p4756995

ShareBird you are a god send. I followed your instructions by adding a darwin specific entry in the chrome-manifest file, then creating a mac specific folder in the os-target directory and placed the scrollbars.css and scrollbars.xml files plus the scrollbar folder containing the scroll bar png image files.

Doing it this way enabled the same theme to work on linus, windows as well as mac.

The theme is CatThief's "Mostly Cyrstal" which she does not Mac support.

Is there a way to get the scrollbars.css file to just call the mac OS native scrollbars without placing all these files in the os-target, mac folder?

I am very much an amateur at all of this, it is just that I like CatThief's theme so much I would hate to have to drop its use.

Thanks again.

[ShareBird]

chascb, just copy the content of this file:
http://mxr.mozilla.org/mozilla-central/ ... .css?raw=1

and paste to the os_theme/mac/scrollbars.css replacing the code you have now. The scrollbars.xml is not necessary...