Cross OS theme development

Discuss application theming and theme development.
Locked
User avatar
ShareBird
Posts: 2740
Joined: December 8th, 2004, 7:09 am
Location: Berlin | Made in Brasil
Contact:

Cross OS theme development

Post by ShareBird »

I guess most of you were happy (like me) about the new manifest flags introduced by Firefox 3.0, specially those related to Operational Systems. I also guess most of you were quite disappointed (like me) how it was implemented, for example, by the default theme on the issue with Windows Vista, having to duplicate all folders and files inside the global or browser directory.

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
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.
User avatar
CatThief
Posts: 1854
Joined: January 19th, 2004, 12:19 am
Location: Northeast USA

Re: Cross OS theme development

Post by CatThief »

Hey, ShareBird, good job! Currently I offer a separate autoscroller for Windows users through a userChrome option. Your method would make it the default. I'll definitely have to play around with this. I love trying new things. :D
Still passionate for Mozilla themes and extensions, just not actively developing them for public release anymore.
User avatar
ShareBird
Posts: 2740
Joined: December 8th, 2004, 7:09 am
Location: Berlin | Made in Brasil
Contact:

Re: Cross OS theme development

Post by ShareBird »

Hey CatThief,

Sorry, I guess I was not clear in my text... You know, my English sucks... :-)

Actually this topic has almost nothing to do with the autoscroll thing. I'm sure it's not an issue for most of you and not a big issue for me.

The topic is about the method to register a skin provider, just for playing around with the manifest flags. The autoscroll was just an example to illustrate the possibilities this method offers to solve cross platforms issues. The other example about scrollbars should be much more interesting if you are wanting to work with native scrollbars cross platform:
ShareBird wrote: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...


Cheers
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.
User avatar
CatThief
Posts: 1854
Joined: January 19th, 2004, 12:19 am
Location: Northeast USA

Re: Cross OS theme development

Post by CatThief »

Actually scrollbars are not the issue. It is the autoscroller image - the one that works well with Windows, while at the same time it does not work well with Linux. I currently have a userChrome option to change the autoscroller image for Windows users, while the one that works for Linux is the theme default. By incorporating the os_target example you described, I could apply two separate images dependent upon which OS is being used without the need to duplicate *all* files within a directory like they are inside the default classic.jar for Windows with "aero".

BTW, your English is excellent. :D
Still passionate for Mozilla themes and extensions, just not actively developing them for public release anymore.
User avatar
CatThief
Posts: 1854
Joined: January 19th, 2004, 12:19 am
Location: Northeast USA

Re: Cross OS theme development

Post by CatThief »

Holy cow IT WORKS!

ShareBird, I love you!!!
Still passionate for Mozilla themes and extensions, just not actively developing them for public release anymore.
User avatar
ShareBird
Posts: 2740
Joined: December 8th, 2004, 7:09 am
Location: Berlin | Made in Brasil
Contact:

Re: Cross OS theme development

Post by ShareBird »

CatThief wrote:BTW, your English is excellent. :D

CatThief, I love you too :lol:

Actually for now I don't have any issues I could use this approach (excepted the solved autoscroll issue) in a more complex way, but I'm very excited with the possibilities it can open to solve problems, for example, with compatibility across Firefox versions (using the appversion flag) or having (as I have) one only package for different applications (using the application flag). It's possible to create other folders associating them to other providers, making folders to contain shared files, etc...
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.
User avatar
mcdavis
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Re: Cross OS theme development

Post by mcdavis »

This looks pretty good. Thanks, ShareBird.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
falconer.
Posts: 292
Joined: March 23rd, 2008, 6:22 pm

Re: Cross OS theme development

Post by falconer. »

This is pure genius! Finally, a sensible solution.
User avatar
KLB
Posts: 2282
Joined: December 21st, 2003, 9:25 am
Location: Saco Maine
Contact:

Re: Cross OS theme development

Post by KLB »

Thanks for starting this thread.
Ken Barbalace - AMO Editor (I focus on reviewing themes)
I maintain Classic Compact, a very compact yet clean Firefox theme.
EnvironmentalChemistry.com (Periodic Table)
Tjason10
Posts: 2
Joined: December 1st, 2011, 9:45 pm

Re: Cross OS theme development

Post by Tjason10 »

Yes KLB I use it too.. Did you check it in the site? "Rollup of Firefox 5 & 6 theme changes: With Firefox 5.0 & 6.0 under development, there is a steady trickle of changes that impact themes. These changes will be rolled into v4.0.10.?"

I am excited!
User avatar
LoudNoise
New Member
Posts: 39900
Joined: October 18th, 2007, 1:45 pm
Location: Next door to the west

Re: Cross OS theme development

Post by LoudNoise »

This is an elderly thread which I don't want Sharebird's solution to roll off the page. Locking at least for the time being. That said, I am willing to reopen it if folks want it reopened.
Post wrangler
"Choose between the Food Select Feature or other Functions. If no food or function is chosen, Toast is the default."
Locked