MozillaZine

Metal Lion Sea Monkey Past.

Discuss application theming and theme development.
Frank Lion

User avatar
 
Posts: 19425
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted December 2nd, 2014, 11:50 am

This is a sort of technical discussion thread, so although there is a completed theme at the end of it that's not really the point here. Certainly this theme will not go up to AMO for release as I have 6 out already!

First, here's the theme (with the Sea Fox extension being used) - http://franklion.co.uk/GEN-LINKS/Sn0821.png

I made this as I needed a new theme code template to give more options in the future. As many will know, I now make Complete Themes in a completely new way to anyone else (so far) - viewtopic.php?p=13293773#p13293773 Faster to make, easier to maintain and they don't break with every change, yadda, yadda

However, so far, every theme I made with this template was done using the 'Single Row' Toolbar.png approach, like the Firefox default does, where all the toolbar buttons are on one long row with no states. That's OK, MLA and MLA Graphite used border states for hover/active, like Firefox default and the Tigers and ML Sea Monkey and Silver SM get rid of button borders and use fancy svg filters for their hover, active and disabled states. The latter system works very well, giving very convincing 'glow' hover states and is very quick to code up.

However, that template engine would never be able to handle the old, traditional 3 to 4 row Toolbar.pngs, where you have normal/hover/active/disabled states all on one png and the states are graphically far more complex than contrast/brightness changes. This would mean that advanced themes, like my Blue Moonlight Vista and Aluminium Kai 2 could not be swung over to this template in the future. So, that was the first problem to solve.

The second problem concerns Sea Monkey (bear in mind that the original template was designed for Firefox) and its Email side. Put simply, you could easily style up the backgrounds of the Email client, but no way could you ever have properly styled buttons, simply because that Email stuff has hundreds of buttons! Seriously, there are a lot (large icon set and small set as well) and no way am I making that lot. You also couldn't, even if you wanted to, use the Modern set as not only are they not much different, but they have different -moz-image-regions to default, so you'd end up with yards and yards of extra code. But, it did mean that unless I sorted it, that any SM theme I ever did would end up with unstyled default Email buttons. :(

So, I needed a new, quick way to theme up the SM EMail side and here's the result -

http://franklion.co.uk/GEN-LINKS/Sn0822.png

The solution I came up with was to use a highly defined selective colour replacement technique on the default large and small various button sets to change just the colour of the background 'folder' images, but to leave the other colours untouched. These modified images are then thrown into the theme, the theme code points to them and the default theme then does all of the -moz-image-regions, thus saving literally thousands of line of coding.

I'm happy with the results of this 'proof of concept' method and it was certainly very quick to do. This technique will now appear in the Email side of the existing ML SM and ML Silver SM themes when it's time for their next update.

....I'm going to take a break now and then cover the browser side (lots of pics and stuff) in a while. Incidentally, the button set I'm using for this new template engine is from the old Firefox Past Modern theme by Kuden. I chose these because with slight modification they looked OK, their hover states were coloured (like many of mine) but, above all, there weren't mine, so I wouldn't be tempted to release it when it was done and so lumber myself with yet another damn theme to maintain. :)

Later...
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted December 2nd, 2014, 1:11 pm

Phew. This reminds me of a bunch of work I started and need to get back to. All those tiny icons in Mail are really. Really. A ton of work!
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/

Frank Lion

User avatar
 
Posts: 19425
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted December 2nd, 2014, 1:32 pm

....It is now later...

As you can see from the top pic, I obviously did a fair bit more than change the toolbar buttons, but that's the nice thing about using this type of template, what appears to be huge changes is just actually me tweaking what was already there. So, there's new tabs, new backgrounds, new scrolls, etc as well as the button stuff.

The actual swingover from single to 3 row large and 3 row small toolbar.pngs was pretty uneventful, just lots of concentration. Yep, I was using the existing -moz-image-regions from the old theme, even so it was quite tough. But it's only done once.

Oh, when I looked at the sets, I could see that in addition to separate Forward and Back, that there was also a joined up Forward and Back as well (they are not actually joined, but look as though they are) Seemed a pity to waste these, so I coded it up like this.


Traditional SM users get separates on the Nav bar, like this -
Image



Put Forward/Back on the Menu Bar and they join up -
Image



Forward and Back on the Bookmark Bar and they will stay large, even in Small Icons mode (this is how I have my own stuff) -
Image


The rest of the pics are general shots, some using just the default theme, some with the Sea Fox extension enabled and the final one is of the SM Modern theme. As I wrote, I just wanted to do this template, but it did occur to me at the end that this new theme does actually look more harmonious and a lot more modern than the Modern theme, haha....

http://franklion.co.uk/GEN-LINKS/Sn0814.png

http://franklion.co.uk/GEN-LINKS/Sn0816.png

http://franklion.co.uk/GEN-LINKS/Sn0812.png
http://franklion.co.uk/GEN-LINKS/Sn0811.png


So, there you have it, an insight into how theme code template engines are developed.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted December 2nd, 2014, 3:26 pm

Looks nice Frank! Yes, unfortunately Modern needs a ton of work. Even if you compare the current state to the original Netscape Modern, it's lost some of it's "charm" along the way... mostly due to switching over to CSS-drawn buttons and tabs in a time back when that really didn't work as well as it does today.

Awhile ago I broke away from the "norm" in Firefox/SeaMonkey theming and started using a nice even 30x30px grid for large icons and a 20x20px grid for small icons and that dramatically reduces the work (and maths) of defining the image regions.
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/

Frank Lion

User avatar
 
Posts: 19425
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted December 3rd, 2014, 10:05 am

patrickjdempsey wrote:Looks nice Frank! Yes, unfortunately Modern needs a ton of work. Even if you compare the current state to the original Netscape Modern, it's lost some of it's "charm" along the way... mostly due to switching over to CSS-drawn buttons and tabs in a time back when that really didn't work as well as it does today.

Trouble is, SM users seem to generally be an uncomplaining lot, which is great, especially for us, but it doesn't raise the bar very high for the general standard. It's not even a 'function over form' thing either, otherwise how could a browser in 2014 still not even have tab close buttons on the tabs by default?

Having said that, in all other respects that laid back approach has actually made a far better browser than some I can think of.

Anyway, I quickly used the new template code/images on ML S M just now. Slotted straight in and it greys the Component Bar and does the Email buttons in the new style. I had actually forgotten how rough it looked on EMail with those default buttons. Yeah, it looked better with the styled toolbar background, but not really a great look. Here's how it was -

http://franklion.co.uk/GEN-LINKS/Sn0824.png

and now after 10 minutes swinging that latest code/images into place -
http://franklion.co.uk/GEN-LINKS/Sn0823.png

Done. :)


Oh, I know what I was going to ask you. I'm not going to touch the Composer buttons (I bet only about 10 people use it anyway) but do you think this look has any mileage? -
http://franklion.co.uk/GEN-LINKS/Sn0825.png

I've seen complaints about the size of the default set there (which I agree with), so I've reduced the size and put text alongside. As you know, it's only a few lines, but I don't want to add them to ML SM and Silver SM by default, if I'm going to make a rod for my own back and get the 'form over function' brigade all screaming at me. :P
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted December 3rd, 2014, 11:11 am

Yeah I do prefer that look in Composer. But again, I'm not sure how many actually use it anymore since it's very behind on updates.
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/

Frank Lion

User avatar
 
Posts: 19425
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted December 3rd, 2014, 7:24 pm

patrickjdempsey wrote:But again, I'm not sure how many actually use it anymore since it's very behind on updates.

Hmm, you're probably right. Like you (?) I don't really use the non-browser SM stuff much, so it's difficult to judge how far to theme this stuff. I had read enough SM Email Support questions though to figure out that people were using that and that I ought to smarten up that side.

It's really the story of every themer's/extension writer's life - lack of feedback. Not sure why, but that side did used to be a lot better back in the day and you had a pretty fair idea of what people wanted.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

LoudNoise
Moderator

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

Post Posted December 3rd, 2014, 7:55 pm

I would suspect that most folks who use SeaMonkey use at least the browser and the email client. Composer could likely be ignored.
Post wrangler
"Choose between the Food Select Feature or other Functions. If no food or function is chosen, Toast is the default."

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 0 guests