A Universal Lite Gecko Theme Platform

Discuss application theming and theme development.
Post Reply
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

A Universal Lite Gecko Theme Platform

Post by patrickjdempsey »

I am at times, powerless to the wanderings of my brain. Sigh. Here we go:

In the very near future, Mozilla will be shipping a browser that lacks basic customization and has serious issues in it's theme-ability. Many themers have already given up on even supporting the most basic types of themes. I have for some time thought that Mozilla could change their builds to implement a "basic" theme which would be easy to build and difficult for Mozilla to break in updates. Neither of these seems likely. We've also seen over and over again that even the "lite" themes many of us have built using basic !important tags are breaking. The problem is of course that the Firefox developers are constantly tweaking the default theme in weird ways. There is also a severe lack of even uninteresting themes available for Sea Monkey.

So here's an idea: why not build an extension that creates an alternative theming platform for basic themes? The extension would be composed of the following components:

1. a chrome.manifest that sets up a secondary skin mirroring browser and navigator skins in Firefox and SeaMonkey.

2. a series of overrides in the manifest that replaces browser.css and navigator.css (and other files) respectively.

3. an xul overlay for Firefox that restores the independent back, forward, stop and reload buttons, and reduces the urlbar to it's current state (as well as provide missing buttons for SeaMonkey).

4. "dummy" versions of browser.css and navigator.css sitting in our new skins, which contain the boring parts of those files in the default theme.

5. a "mini" theme which connects to either browser.css or navigator.css (based on the manifest) which styles the fun bits.

6. the required images also sitting in our new skins.

With such a system running, all a theme would be required to do is provide images and provide the "fun" parts of the theme, with a manifest pointing to our "basic" skin. You wouldn't even need a special manifest flag to support SeaMonkey, because it's all universal. The owner/developer of the extension would have to be responsible for making sure that the default theme bits continue to work properly... but unlike the REAL default theme, it wouldn't HAVE to carry every change Mozilla makes.

Jeez I'm crazy. ](*,)
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: A Universal Lite Gecko Theme Platform

Post by patrickjdempsey »

Oh, and the "baseline" theme that this would deliver would be something similar to the current SeaMonkey or old Firefox 2.0 theme: nothing fancy. Basic toolbox, toolbars, toolbarbuttons, urlbar, searchbar, and tab styles... that's it.

Comparing Firefox with SeaMonkey, they currently share many identical node names, which means a really well-rounded theme could easily style both.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: A Universal Lite Gecko Theme Platform

Post by patrickjdempsey »

So here is the basic requirement for a platform Extension to make such a thing work... a chrome.manifest that registers a two new skin package and inserts our two halves of browser.css (for the sake of clarity, only the Firefox part is shown, it gets a little harder to see when you add the flags to support SeaMonkey as well):

Code: Select all

#create our old skin package:
skin    oldskin    classic/1.0     chrome/firefox/

#create our new skin package:
skin     newskin    newskin        chrome/newskin/

#skin Firefox:
override   chrome://browser/skin/browser.css      chrome://oldskin/skin/edited-browser.css
style     chrome://browser/content/browser.xul     chrome://newskin/skin/newskin.css


So now you just need three folders:

/newskin/ = contains your agnostic universal newskin.css file with only the fun bits.
/firefox/ = contains your edited browser.css file based on the default theme with the fun bits taken out.
/seamonkey/ = contains your edited navigator.css file based on the default theme with the fun bits taken out.

You can do this same process with as many files and window overlays as your want to. The code in newskin.css will *not* require !important tags because it is applying to the overlays exactly the same as any major theme CSS file does, and because we've *removed* the conflicting bits from browser.css and navigator.css. This builds the platform. Now you can create a basic theme using only the newskin skin package and the newskin.css (and support images) and it will work just like a regular old theme.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
User avatar
KLB
Posts: 2282
Joined: December 21st, 2003, 9:25 am
Location: Saco Maine
Contact:

Re: A Universal Lite Gecko Theme Platform

Post by KLB »

patrickjdempsey wrote:I am at times, powerless to the wanderings of my brain. Sigh. Here we go:
....
Jeez I'm crazy. ](*,)

Ya... just a little bit. I can't even wrap my head around Australis. I am dreading FF28 and your mind is wandering off onto how to support Firefox and Sea Monkey in a single theme? :crazyeyes:

If anyone could pull this off, it would be you. I'm just praying I can figure out how to support FF28 without losing my mind. [-o<
Ken Barbalace - AMO Editor (I focus on reviewing themes)
I maintain Classic Compact, a very compact yet clean Firefox theme.
EnvironmentalChemistry.com (Periodic Table)
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: A Universal Lite Gecko Theme Platform

Post by patrickjdempsey »

Well, I don't think any of this really applies to Australis... since it appears to be breaking extensions as well as themes in pretty extreme ways. This is more like the "light" theming platform that Mozilla (or one of us) should have built 4 years ago instead of Personas. More of a hypothetical thought experiment for an alternative reality where Mozilla isn't hell bent on breaking every feature that made Firefox the beloved web browser of choice.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: A Universal Lite Gecko Theme Platform

Post by patrickjdempsey »

Some conversations with a few people has revived my interest in this project. Just for giggles I finished fleshing out my basic vision. Here is an identical "theme" being rendered on SeaMonkey 2.23, Firefox 26.0, and Nightly 29 (from today). All I've changed is the toolbar background color and the back button:

Image

And for reference, here is the entire "theme":

Code: Select all

#navigator-toolbox  toolbar:not(:-moz-lwtheme) {
  -moz-appearance: none;
  border-style: none;
  background-color: pink;
}

#back-button {
  list-style-image: url("chrome://basicskin/skin/icons/back.png");
  -moz-image-region: rect(0px 30px 30px 0);
}
#back-button:not([disabled]):hover {
  -moz-image-region: rect(0px 60px 30px 30px);
}
#back-button:not([disabled]):hover:active {
  -moz-image-region: rect(0px 90px 30px 60px);
}
#back-button[disabled="true"] {
  -moz-image-region: rect(0px 120px 30px 90px);
}


The chrome manifest for the extension looks like this:

Code: Select all

#Register skin packages for the original CSS files:
skin    oldskin   classic/1.0   chrome/oldskin/firefox/win/26/       application={ec8030f7-c20a-464f-9b0e-13a3a9e97384}    appversion>=26.0    os=WINNT
skin    oldskin   classic/1.0   chrome/oldskin/firefox/aero/26/      application={ec8030f7-c20a-464f-9b0e-13a3a9e97384}    appversion>=26.0    os=WINNT   osversion>=6.0
skin    oldskin   classic/1.0   chrome/oldskin/firefox/win/29/       application={ec8030f7-c20a-464f-9b0e-13a3a9e97384}    appversion>=29.0a1  os=WINNT
skin    oldskin   classic/1.0   chrome/oldskin/firefox/aero/29/      application={ec8030f7-c20a-464f-9b0e-13a3a9e97384}    appversion>=29.0a1  os=WINNT   osversion>=6.0
skin    oldskin   classic/1.0   chrome/oldskin/seamonkey/win/2.20/   application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}    appversion>=2.20    os=WINNT

#Override the original CSS files:
override  chrome://browser/skin/browser.css         chrome://oldskin/skin/browser.css     application={ec8030f7-c20a-464f-9b0e-13a3a9e97384}
override  chrome://navigator/skin/navigator.css     chrome://oldskin/skin/navigator.css   application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}

#Register our new skin package:
skin    basicskin   basicskin   chrome/basicskin/

#Load the new styles:
style       chrome://browser/content/browser.xul      chrome://basicskin/skin/basicskin.css   application={ec8030f7-c20a-464f-9b0e-13a3a9e97384}
style       chrome://navigator/content/navigator.xul  chrome://basicskin/skin/basicskin.css   application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}


The chrome.manifest for an installed JAR-type 'basic' theme *should* be this simple since the Platform extension would already be handling the crunchy bits:

Code: Select all

#Basic skin package:
skin    basicskin   yourtheme   chrome/basicskin/


As you can see, the essential 'problem' with this platform is it requires an edited version of the default theme's browser.css (or navigator.css) with the following hierarchy:

Firefox / SeaMonkey
Win / Win Aero / OSX / Linux
/versions support/

So every time there is a major change to browser.css or navigator.css (in areas outside of our basic theme!) that would require a new /versions support/ to be built for each supported OS. The fortunate thing is I honestly don't think such support would require much testing. Unpacking the files from the FTP and editing the bits out of browser.css that impact our basic theme should be sufficient to maintain compatibility for a long time to come.

I feel like it's also important to mention that no matter how large and ungainly the install is for the extension due to copious os/version support folders, that the chrome.manifest will only be loading ONE browser.css or navigator.css file into memory, which replaces the one in the default theme, so there should be NO net gain in overhead!!!!
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
Post Reply