As an example, I was concerned that the autoscroll image I use on Windows looks horrible under Linux (apparently Linux has problems with these transparent images used for Windows) and was investigating a way to fix this. Of course, with those new manifest flags I can load and register a different directory for the global package (as it contains the autoscroll skin) according to the used OS. Duplicating the whole global directory to just change one image wasn't a reliable solution for me... But, do I really need to duplicate the whole global directory?. No, I don't!!!
I've figured out a simple way to use the manifest flags and replace the image without duplicating the whole directory. You just need to register a new standalone skin provider!
Let's see how I solve the problem with the autoscroll image. I've registered a new skin provider as I normally would do for an existent package. I've called it sharebird (just kidding...). I've called it os_target. Using the conditional flags, I can load different folders according to the OS. Normally a chrome.manifest file looks something like (if not using compression):
Code: Select all
skin global myTheme chrome/global/
skin browser myTheme chrome/browser/
skin mozapps myTheme chrome/mozapps/
skin communicator myTheme chrome/communicator/
With the chrome directory containing this:
Code: Select all
browser
places
...
preferences
communicator
global
alerts
...
So, I can register a new skin provider for an (inexistent) os_target package:
Code: Select all
skin global myTheme chrome/global/
skin browser myTheme chrome/browser/
skin mozapps myTheme chrome/mozapps/
skin communicator myTheme chrome/communicator/
skin os_target myTheme chrome/os_target/common/
skin os_target myTheme chrome/os_target/linux/ os=Linux
and add the new directories:
Code: Select all
browser
places
...
preferences
communicator
global
alerts
...
os_target
common
linux
This means that the os_target/common directory will be registered anyway but if the used OS is Linux. In this case it will register the os_target/linux directory instead.
Now I can use the directory to load different versions from files into them. On my issue, for example, the rules for the autoscroll thing are inside the global.css file:
Code: Select all
/* :::::: autoscroll popup ::::: */
#autoscroller {
height: 28px;
width: 28px;
border: none;
margin: -14px;
padding: 0;
background-image: url("chrome://global/skin/icons/autoscroll.png");
background-color: transparent;
background-position: right top;
-moz-appearance: none;
}
#autoscroller[scrolldir="NS"] {
background-position: right center;
}
#autoscroller[scrolldir="EW"] {
background-position: right bottom;
}
I've added a new file inside my os_target/linux directory (notice I could use any other name than os_target for the root), called autoscroll.css with these rules to overwrite the rules inside global.css:
Code: Select all
#autoscroller {
background-image: url("autoscroll.png") !important;
background-position: center top !important;
}
#autoscroller[scrolldir="NS"] {
background-position: center center !important;
}
#autoscroller[scrolldir="EW"] {
background-position: center bottom !important;
}
On this folder I've also added the linux autoscroll.png file...
Now I have just to include the file to the global.css with:
Code: Select all
@import url("chrome://os_target/skin/autoscroll.css");
To avoid probable warnings from nonexistent files, I've also included an empty autoscroll.css file inside the os_target/common directory.
With his approach it's possible to easily solve the issues with scrollbars related here: viewtopic.php?f=18&t=682635 and here: viewtopic.php?f=18&t=677195 using native scrollbars instead of xul scrollbars.
Let's see: You need to register the skin providers according to Mac (a list with OS_TARGET strings can be found here). Something like:
Code: Select all
skin global myTheme chrome/global/
skin browser myTheme chrome/browser/
skin mozapps myTheme chrome/mozapps/
skin communicator myTheme chrome/communicator/
skin os_target myTheme chrome/os_target/common/
skin os_target myTheme chrome/os_target/mac/ os=Darwin
Now you need to empty the original global/scrollbars.css file and just have this line
Code: Select all
@import url("chrome://os_target/skin/scrollbars.css");
On your os_target/common directory you will have a scrollbars.css file with the rules you use for Windows, Linux etc...
On your os_target/mac directory you will have a scrollbars.css file with the rules for the Mac scrollbars.
This should work well and fix the problems...
As we can see, this approach opens a ton of possibilities. For example, supposing you want to have different toolbar buttons according to different OS, you just have to point the list-style-image to an image located inside those folders. Something like
Code: Select all
url("chrome://os_target/skin/toolbar.png")
Looking at the other existing manifest flags, there is no end for the imagination solving issues like versions compatibility and so on...
I hope it helps!!
Cheers