MozillaZine

Cross OS theme development

Discuss application theming and theme development.
ShareBird

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

Post Posted October 16th, 2008, 12:19 pm

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.

CatThief

User avatar
 
Posts: 1854
Joined: January 19th, 2004, 12:19 am
Location: Northeast USA

Post Posted October 16th, 2008, 6:28 pm

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.

ShareBird

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

Post Posted October 17th, 2008, 12:23 am

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.

CatThief

User avatar
 
Posts: 1854
Joined: January 19th, 2004, 12:19 am
Location: Northeast USA

Post Posted October 17th, 2008, 5:30 pm

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.

CatThief

User avatar
 
Posts: 1854
Joined: January 19th, 2004, 12:19 am
Location: Northeast USA

Post Posted October 17th, 2008, 6:24 pm

Holy cow IT WORKS!

ShareBird, I love you!!!
Still passionate for Mozilla themes and extensions, just not actively developing them for public release anymore.

ShareBird

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

Post Posted October 17th, 2008, 7:23 pm

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.

mcdavis

User avatar
 
Posts: 3066
Joined: December 9th, 2005, 5:51 am

Post Posted October 18th, 2008, 5:00 am

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

Post Posted December 13th, 2008, 9:34 am

This is pure genius! Finally, a sensible solution.

KLB

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

Post Posted March 30th, 2011, 8:35 am

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

Post Posted December 5th, 2011, 8:52 pm

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!

LoudNoise
Moderator

User avatar
 
Posts: 38620
Joined: October 18th, 2007, 1:45 pm
Location: Next door to the west

Post Posted December 6th, 2011, 9:27 am

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
Notice: If you have a comment on moderation, please post here viewtopic.php?f=11&t=2706389 and don't private message a mod. I don't reply to private messages unless I have previously requested them

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 2 guests