MozillaZine

Cross OS theme development and scrollbars - cause/solution

Discuss application theming and theme development.
KLB

User avatar
 
Posts: 2282
Joined: December 21st, 2003, 9:25 am
Location: Saco Maine

Post Posted June 19th, 2008, 6:02 pm

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 :cry:
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 [-o<
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.
Last edited by KLB on June 20th, 2008, 3:55 pm, edited 2 times in total.
Ken Barbalace - AMO Editor (I focus on reviewing themes)
I maintain Classic Compact, a very compact yet clean Firefox theme.
EnvironmentalChemistry.com (Periodic Table)

aaron

User avatar
 
Posts: 3130
Joined: November 4th, 2002, 8:49 pm
Location: Texas

Post Posted June 20th, 2008, 5:35 am

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

KLB

User avatar
 
Posts: 2282
Joined: December 21st, 2003, 9:25 am
Location: Saco Maine

Post Posted June 20th, 2008, 3:59 pm

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.
Ken Barbalace - AMO Editor (I focus on reviewing themes)
I maintain Classic Compact, a very compact yet clean Firefox theme.
EnvironmentalChemistry.com (Periodic Table)

Xavius
 
Posts: 97
Joined: June 1st, 2008, 3:59 am

Post Posted June 21st, 2008, 1:02 pm

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

User avatar
 
Posts: 2282
Joined: December 21st, 2003, 9:25 am
Location: Saco Maine

Post Posted June 21st, 2008, 4:59 pm

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.
Ken Barbalace - AMO Editor (I focus on reviewing themes)
I maintain Classic Compact, a very compact yet clean Firefox theme.
EnvironmentalChemistry.com (Periodic Table)

DonGato

User avatar
 
Posts: 589
Joined: December 1st, 2005, 9:57 am

Post Posted July 6th, 2008, 7:39 am

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

KLB

User avatar
 
Posts: 2282
Joined: December 21st, 2003, 9:25 am
Location: Saco Maine

Post Posted July 6th, 2008, 7:51 am

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.
Ken Barbalace - AMO Editor (I focus on reviewing themes)
I maintain Classic Compact, a very compact yet clean Firefox theme.
EnvironmentalChemistry.com (Periodic Table)

FineWine

User avatar
 
Posts: 194
Joined: July 16th, 2004, 12:21 am

Post Posted September 5th, 2008, 6:57 pm

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

User avatar
 
Posts: 194
Joined: July 16th, 2004, 12:21 am

Post Posted November 2nd, 2009, 3:19 pm

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

aaron

User avatar
 
Posts: 3130
Joined: November 4th, 2002, 8:49 pm
Location: Texas

Post Posted November 2nd, 2009, 5:49 pm

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

User avatar
 
Posts: 194
Joined: July 16th, 2004, 12:21 am

Post Posted November 2nd, 2009, 6:42 pm

aaron wrote: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

User avatar
 
Posts: 2282
Joined: December 21st, 2003, 9:25 am
Location: Saco Maine

Post Posted November 2nd, 2009, 6:54 pm

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.
Ken Barbalace - AMO Editor (I focus on reviewing themes)
I maintain Classic Compact, a very compact yet clean Firefox theme.
EnvironmentalChemistry.com (Periodic Table)

ShareBird

User avatar
 
Posts: 2740
Joined: December 8th, 2004, 7:09 am
Location: Berlin | Made in Brasil

Post Posted November 2nd, 2009, 7:04 pm

Silvermel - A Theme for Firefox and Thunderbird
YATT - Yet Another Theme Tutorial
Don't give a man a fish. Teach him how to fish instead.

FineWine

User avatar
 
Posts: 194
Joined: July 16th, 2004, 12:21 am

Post Posted November 2nd, 2009, 9:09 pm

ShareBird wrote: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

User avatar
 
Posts: 2740
Joined: December 8th, 2004, 7:09 am
Location: Berlin | Made in Brasil

Post Posted November 2nd, 2009, 10:06 pm

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...
Silvermel - A Theme for Firefox and Thunderbird
YATT - Yet Another Theme Tutorial
Don't give a man a fish. Teach him how to fish instead.

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 1 guest