To make it smaller I reduced the PNG files down to only the Active (dark) states and redefined everything in browser.css to use opacity instead of different image regions. I also made the dropmarker.css a tad darker to match the dark toolbar buttons better. This also adds a hover state to the Back and Forward buttons and dropmarker which did not originally have one:
Code: Select all
#back-button {
list-style-image: url("Toolbar.png") !important;
-moz-image-region: rect(0px 32px 32px 0px) !important;
opacity: .6 !important;
}
#back-button:not([disabled]):hover {
opacity: .8 !important;
}
#back-button:not([disabled]):hover:active {
opacity: 1 !important;
}
#back-button[disabled="true"] {
opacity: .25 !important;
}
New dropmarker code:
Code: Select all
#back-forward-dropmarker {
list-style-image: url(dropmarker.png) !important;
-moz-image-region: rect(0 11px 11px 0) !important;
opacity: .8 !important;
-moz-box-align: end !important;
padding-bottom: 5px !important
}
#back-forward-dropmarker[open="true"],
#back-forward-dropmarker:not([disabled]):hover {
opacity: 1 !important;
}
#back-forward-dropmarker[disabled="true"] {
opacity: .25 !important;
}
To make it "hot swappable" I simply removed all of the instructions to load browser.css. I removed the "style" instructions out of chrome.manifest, ditched customizeToolbar.css and the classic folder. All that is left is browser.css and the three image files. It's also important to use !important in *every* line of browser.css or all of the instructions will not translate.
Using either Stylish or Generic Chrome CSS Loader, you insert the code found in your customizeToolbar.css file. Doing that it is possible to switch between the default theme and Firebird in only a few key strokes, without reload. This isn't *quite* Personas for themes, but it's close.
This is basically the exact method I'm using for building my subthemes for Stratini Padded and Mosaic-Fox and it seems to work well... it's basically just a userchrome hack acting as a theme.
I think your biggest problem here is that the theme you are building from is based on either a much older version of Firefox or a custom theme engine. You can't really use custom theme engine stuff for these kinds of themes... not really. What you need to be doing is looking at the default theme and thinking to yourself... "how can I change THAT" and not building a whole new theme. I only touched on the tabs because that's the only thing you mentioned, but I'm sure there's many other places you need to compare to the default theme and take out the redundant, conflicting or just plain weird stuff.