Mike's Musings » firefox

Interactive Themes

admin — Fri, 16 Jul 2010 20:20:03 +0000

So you may wonder why we called it Personas Interactive.

If you were go to the Brand Thunder Gallery, you would see what we specialize in – creating customized browser experiences for different sports teams, websites, musicians and more.

These browser experiences have evolved over the years in their design, their technology and even their name. But regardless of the technology change, these browser experiences always required the installation of a Firefox add-on and the restart of the browser for every one that you wanted to install.

One of the reasons we created Personas Interactive was to address this issue. With the advent of Personas in Firefox 3.6, we saw the opportunity to take our browser experience to the next level. So one of the core features of Personas Interactive is Interactive Themes.

Interactives Themes take the Enhanced Personas we talked about last time and add interactivity like clickable logos, sidebars, toolbars, feedreaders and more. So instead of just providing people with a picture of your website or brand, you can provide a way for them to connect with you in the browser.

Before we continue, I have to make a disclaimer. Up to this point, we’ve talked about things that anyone can do (set up their own Personas gallery, create Enhanced Personas) but at this point in time, an Interactive Theme can only be created by Brand Thunder. We’re working on expanding the technology so it is available to anyone. That doesn’t mean that you can’t have an Interactive Theme, though. Brand Thunder would love to work with your band, sports team, website or company to create an Interactive Theme. Just send an email to info@brandthunder.com.

So let’s look at a diagram that shows the differences between Personas, Enhanced Personas and Interactive Themes.

	Persona	Enhanced Persona	Interactive Theme
Background Image	X	X	X
Change Text Color	X	X	X
Multiple Background Images		X	X
Position Background Images		X	X
Resize Background Images		X	X
Repeat Background Images		X	X
Clickable Logos			X
Sidebar			X
Toolbar			X
Integrated Search			X
Feed Reader			X
Sponsorships			X
Advertising			X

So what does this mean in practice?

If you were to go to the Personas Interactive page with Personas Interactive installed, you would see some of our Interactive Themes in action.

Are you a fan of the Goblins Web Comic? There’s an Interactive theme that keeps your favorite web comic close at hand. If you need your daily fix of The Daily Beast, you can install an Interactive Theme that gives you links and news from The Daily Beast as well as the top story of the day updated in your browser. Is your team the Indianapolis Colts? You can connect with them right in your browser. Or maybe you like movies? The Movie Premiere Interactive Theme is updated with a new movie poster every 15 minutes. Can’t get enough of CollegeHumor? Install the Interactive Theme and your favorite links will be one click away.

And we’ve got over a hundred more Interactive Themes coming in the next few months. Besides porting our existing themes over to Personas Interactive, we’re working with great brands like the CBS Sports College Network to bring your favorite college sports teams to the browser.

So what should you do? Install Personas Interactive. Setup your own Personas gallery. Create an Enhanced Persona. And stay tuned, because we’ve got some great stuff coming your way.

Enhanced Personas

admin — Fri, 09 Jul 2010 16:34:12 +0000

In explaining exactly what a Persona was in my last post, I mentioned that a Persona contains two images – a header and a footer. I also indicated that these images are very large – 3000 pixels wide. You may wonder why that is. Personas is designed to do one thing; take an image and put it in the upper right corner of the browser. It doesn’t resize or scale the image. If you resize your browser very wide, you just see more of the image on the left hand side. That 3000 pixels number is a completely arbitrary number that is designed to be the maximum you will resize your browser.

This architecture creates problems.

The file sizes of the images can be very large.
If you have a repetitive image, you have to cut and paste it to make it 3000 pixels wide.
If you want to use an existing image, you’ll have to do something to convert it to 3000 pixels wide.
You can’t guarantee that anything appears in the upper left corner.
You can’t have more than one background image.

All of these problems have already been solved by CSS, but none of the CSS to do anything to background images is available in Personas. That’s where the Enhanced Personas feature of Personas Interactive comes in.

Enhanced Personas adds additional attributes to the Personas JSON that gives you all the things that CSS backgrounds have to offer. This includes multiple background images! Here are the attributes we’ve added:

backgroundImage

Specifies the URL of an image or multiple images that will be used for the background. Multiple images are separated by a comma. The images are drawn from right to left, so the left most image appears on top. We aren’t using the actual CSS syntax here, so don’t put url(‘…’) around the images.

backgroundPosition

Specifies the position of the images in backgroundImage using standard CSS rules. These rules are separated by a comma.

backgroundSize

Dpecifies the size of the images in backgroundImage using standard CSS rules. These rules are separated by a comma.

backgroundColor

Whereas accentcolor in the original Personas specification is used for both the titlebar and the background of the browser, we allow you to specify just the background color. It is never used for the titlebar. If you specify both a backgroundColor and an accentcolor, accentcolor is used for the titlebar, and backgroundColor is used for the background of the browser.

textShadow

One of the other areas that causes problems with Personas is the area of text shadows. We’ve provided an additional attribute to let you control the text shadow. Personas determines the color of the text shadow to use for your Persona by computing the luminance of the textcolor specified in your Persona.


let luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;

If the luminance is less than or equal to 110, it makes your text shadow light, otherwise it makes your text shadow dark. We’ve made textShadow an attribute that you can specify, and you can give it three values: dark, bright or none. You can experiment with these three values to see which one makes your text look good on your Persona.

Summing it all up

So what does all this give us? The ability to create a Persona that takes full advantage of CSS. If you hover over the preview images below with Personas Interactive installed, you’ll see examples of Enhanced Personas in action. Each of these Enhanced Personas has an image on the left, an image on the right and a repeating image for the background. If you install them, you can resize the browser and see that the images stay in both corners of the browser. I’ve deliberately placed breaks in the background image so you can see the repeat. You’ll also notice that I’ve used a different text shadow option for each of the Personas. See if you can figure out which value I used.

Here are some other things to keep in mind with Enhanced Personas.

backgroundImage is a required attribute. This means that even if you use the other attributes, if backgroundImage isn’t specified, they won’t be honored. The only exception to this is textShadow.

You can create an Enhanced Persona that works with Firefox out of the box. Just specify both a headerURL and a backgroundImage. Personas Interactive users will get the Enhanced Persona.

For our next installment, we’re going to talk about the hallmark of Personas Interactive, Interactive Themes and Interactive Personas.

This is part three in my series about Personas Interactive from Brand Thunder. If you missed the first two, they are Introduction to Personas Interactive and What is a Persona?

Personas Interactive

admin — Wed, 07 Jul 2010 17:20:01 +0000

Brand Thunder released a new theme for the Goblins web comic today. While it’s a great theme and I’m excited to have it out there, I’m more excited about how we’re delivering it. Goblins is the first theme we are delivering on our new Personas Interactive platform.

Personas Interactive is a new add-on that allows us to deliver all of our interactive themes with one click in the same way that Personas works. In the next week or so, it will be available as a standalone download. Right now you can get it by downloading the Goblins theme.

But Personas Interactive isn’t just about interactive themes. It provides major enhancements to Personas within Firefox and adds support for Enhanced Personas (more on that later). I’d like to take a few posts to talk about what we’ve done with Personas Interactive. First we’re going to talk about what we’ve done to Personas; then we’re going to talk about Enhanced Personas and Interactive Themes/Interactive Personas. We’ll finish the series up by going into details about how web developers can use our new features.

Let’s start with what we’ve done to Personas within Firefox.

We’ve removed the limits

Firefox currently has a limit of eight Personas. We’ve completely removed that limit. You can have as many Personas installed as you would like.

We’ve removed the limitations

Firefox prevented Personas from working with any theme but the default theme. We’ve removed that limitation. They don’t always work right, but at least you can try.

We’ve removed the lock-in

Firefox uses the same permission model for Personas that it does for the installation of extensions. What this means is that if you give a site permission to install Personas, you’re also giving it permission to install extensions. For this reason, Firefox does not make it easy for you to enable other sites to provide previews and host Personas. We’ve created a new permission model for Personas so you can give a site permission to preview Personas knowing that all they can do is preview and install Personas. Now any site can host a Personas gallery! We’ll be providing more detail in the next week on how to do this or if you want to get started now, send me an email. And if you want to see this in action, check out design noir.

We’ve updated the look (on Windows)

Personas on Windows just don’t look right. With the gray tab and the extra dark tab strip, they just don’t pop like they do on the Mac. We’ve updated the Personas look on Windows to be more consistent.

We’ve given you the choice

We’ve added additional configuration options so that you can make your Personas look the way you want them. If you wish you could see just a little more of your Persona, add some space. If you don’t want the titlebar to change color on Mac, turn it off. If text shadows make your Persona look bad, turn them off.

We’ve added some really cool stuff

We’ve enabled site specific Personas. Any website can put one line in their HTML so that people see a Persona when they viewing that site. Of course they have to ask your permission! If you want to check this out, you can load my blog with Personas Interactive installed.

In my next post, I’ll be covering Enhanced Personas. The best analogy I can give is that Personas are like a bumper sticker on your browser. For the artist, Enhanced Personas give you a palette so you can size, position and repeat any number of images on the background to create a design that’s exactly what you want and that resizes with the browser. I think you’ll like it.

One more note – Brand Thunder brings you VERY cool themes and extensions for FREE, but each takes a team of designers and developers. Brand Thunder themes include Bing as the default search engine since our primary revenue source is our search partners, Bing and Ask, so please give them a try.

And before you ask, we’re hard at work on Firefox 4 support. We hope to have something in the next few weeks.

Customizing the Firefox Installer on Windows

admin — Fri, 18 Jun 2010 16:23:57 +0000

One of the questions I get asked a lot is how to customize the Firefox installer on Windows and how to bundle extensions with it. I’ve spent the past few days learning a great deal about this subject, so I thought I would take this opportunity to provide a refresher on working with the Firefox installer on Windows. I’m going to do it as a Q&A so hopefully folks will get answers to the common questions they have.

Standard disclaimer: Under no circumstances should you use this information to create a custom Firefox install and redistribute it to anyone outside your organization. If you want more information, you can consult the Mozilla Foundation Trademark Policy.

What tools do I need to work with the Firefox installer?

The primary tool you need is 7-Zip. I install the MozillaBuild package which gives me all the tools I need. Even though the Firefox Installer is NSIS based, we will not need to use NSIS for most customizations. I’ll talk a little bit about the end about what kinds of things you would need NSIS to do.

How do I unpack the Firefox installer?

The Firefox installer is created using 7-Zip. So you can grab any of the Windows installers that end in EXE and unpack them. Any of the Windows installers on the Firefox download page will work. Once you’ve downloaded the EXE, create a temporary directory and type:

7z x "Firefox Setup 3.6.3.exe"

This will unpack the contents of the installer so we can modify it.

How do I bundle my extension with the Firefox installer?

Bundling your extension with the Firefox installer is just a matter of putting it in the right place. Then when we package up the installer at the end, it will get installed along with Firefox. For most extensions, the right place is nonlocalized/extensions. Inside that directory, create a subdirectory that corresponds to the ID of the extension you want to preinstall with Firefox. Then unzip the XPI into that directory. You can find the ID by looking at the install.rdf file inside the XPI. You can add as many extensions as you want into the installer.

What are some useful extensions I can bundle with Firefox

I’ve created two extensions that create interesting things to bundle with Firefox. The first is the CCK Wizard. The CCK Wizard can be used to change various defaults in Firefox so that you can customize it for deployment in your organization. The second is Rebrand. Rebrand allows you to change the internal branding used in Firefox.

Can I change the names used in the installer?

Yes, you can change the names used in the installer. To do this, you need to create a directory called distribution inside the localized directory that was created when you unpacked the installer. Create a file called setup.ini in this directory. Here’s what it looks like:


[Branding]
BrandFullName=Mike's Browser
BrandShortName=Browser

BrandFullName will be used to replace “Mozilla Firefox” and BrandShortName will be used to replace “Firefox”.

Can I change the images used in the installer?

Yes, you can change the images used in the installer. In that same directory where you put the setup.ini, you can put two files, modern-wizard.bmp and modern-header.bmp. The first images corresponds to the large image on the first page of the installer. The second image corresponds to the small image that is used on later pages of the installer. You can use the linked images as a reference to know what size to make these images.

How do I repackage the installer?

To repackage the installer, first you need to zip up the changes that you made. Type:


7z a -r -t7z app.7z -mx -m0=BCJ2 -m1=LZMA:d24 -m2=LZMA:d19 -m3=LZMA:d19 -mb0:1 -mb0s1:2 -mb0s2:3

This will create a file called app.7z that has all the changes we made. Now we need to package that file with some other files to create the final EXE. We’ll need the file 7zSD.sfx which you can download from Mozilla. And we’ll need a file called app.tag which you can create. It looks like this:


;!@Install@!UTF-8!
Title="Mozilla Firefox"
RunProgram="setup.exe"
;!@InstallEnd@!

Once we have these files, we can run the command:


copy /B 7zSD.sfx+app.tag+app.7z our_new_installer.exe

to package them all as an EXE. Don’t forget the /B. It indicates that the files are binary so Windows won’t put an EOF marker on them.

Can I change the defaults that are set in the installer like the install directory or the checkboxes?

At this time, there is no way to change the defaults in the installer without rebuilding the installer. There’s a bug open on this with a patch, so hopefully this will be fixed for Firefox 4.

Can I make my totally rebranded Firefox coexist nicely with an existing Firefox?

There are a couple ways to do this. The easiest way is to use the -no-remote parameter when you start Firefox. This causes the Firefox you are starting to not connect to the Firefox that is currently running. When you do this, you have to specify a different profile using the -P parameter. Alternatively, you can change the internal identifiers that Firefox uses. Then it will be considered to be a completely different browser. If you choose to do this, you should be aware that you will not receive updates and there will be other side effects. This is not a decision that should be taken lightly. Also, your profiles will be stored in different locations as well. If you want to do this, check out the file application.ini in the nonlocalized directory. The variables you want to change are Vendor and Name. Again, you do this at your own risk.

What can I do if I’m willing to rebuild the installer with NSIS?

If you are willing to rebuild the installer, you can change things like the name of the entry in the Add/Remove programs list, as well as the install directory and other defaults. This is a nontrivial exercise because some of the required files are built as part of the Mozilla build proces and are not available in the build tree. If you’re really interested in doing this, you can contact Kaply Consulting and we can talk about it.

I hope this answered some questions folks have. If anyone has any more questions, please don’t hesistate to ask.

Hiding the CCK

admin — Tue, 23 Mar 2010 14:48:24 +0000

In previous versions of the CCK, I provided the ability to hide and or/lock the CCK that is generated. Locking prevents the user from uninstalling the add-on, but it is rather useless since the user can still disable it. Hiding preventing the user from disabling or uninstalling.

Unfortunately Mozilla removed the ability for an add-on to hide itself in Firefox 3.6.

Luckily working around this is very easy and will be included in the next version of the CCK Wizard. In order to make this work, I’m going to provide one option that hides the add-on. Lock and hide will no longer be separate. This seems rather logical since the lock option is pretty useless by itself.

Note that none of these options work unless the add-on is installed in the same directory where the Firefox executable is located.

CCK Wizard Update and FAQs

admin — Wed, 03 Mar 2010 16:32:55 +0000

I’ve updated the CCK Wizard for Firefox 3.6. It’s available here. It will be on AMO once the translations are done and if no one finds any major issues. Here’s a summary of the changes:

Updated for new Firefox 3.6 proxy panel
Two CCKs can now coexist (Company Identifiers must be unique to each CCK)
Bundling XPIs and JARs no longer uses XPI bundles – they are explicitly installed upon first run of the CCK (please test this if you bundle multple XPIs)
All translated CCK Wizards should now be working
First run screen added to CCK Wizard install
A few bugs fixed

Some other items of note:

As I mentioned before, I’ve moved CCK Wizard development to Google Code. Please feel free to open up bugs there.

Going forward, I’m going to add the ability to do more locking down of functionality in Firefox. If you have specific needs, please open bugs in Google Code.

To close this post out, I want to answer a couple questions about CCK Wizard that are asked a lot.

What is the right way to install the CCK?

There are multiple ways the CCK can be installed based on your needs. I’ll go through all those ways.

Standard install – The XPI that is created by the CCK Wizard is just a Firefox extension, so as such it can be placed on a web page and users can simply click to install. You can get more information on how to do this from the Mozilla developer center.

In the Firefox directory – Extensions can be installed directly into the Firefox directory. Inside of the directory where the Firefox executable is located, there is a directory called extensions. Inside this directory, you can create a directory with the same ID as your CCK and then unzip your CCK into that directory. This is the only location where you can hide the add-on.

As part of a Firefox install – I’ve previously documented how to bundle the CCK in the installer and how to package the installer on Windows. These instructions still hold true.

Globally – There are designated locations in different operating systems where extensions can be installed and they are picked up by Firefox. You can get more information on these locations at the Mozilla Developer Center. This involves unzipping the CCK package in a specific location on the users hard drive into a directory that is named the same as the ID of the CCK. Using this method, you can manage the CCK package centrally and the user cannot uninstall the CCK from Firefox.

Via the Windows Registry – If you are on Windows, extensions can be installed via the Windows registry. This is documented at the Mozilla Developer Center. This involves unzipping the CCK package that you created to a central location and then adding a registry key that tells Firefox where to find the CCK. Using this method, you can manage the CCK package centrally and the user cannot uninstall the CCK from Firefox.

What do the options “Do not show this extension in the extension manager” and “Prevent the uninstall of this extension” do? They don’t seem to work for me.

These options only work if your CCK is located in the extensions directory where the Firefox executable is located.

If you have any more questions, feel free to ask in the comments.

Do you need to do even more customization of Firefox for your organization? That’s what we do. Contact Kaply Consulting.

Addoncon Userpoints Idea

admin — Thu, 25 Feb 2010 15:53:37 +0000

At Addoncon, there was a lot of talk about how to compensate Firefox add-on developers. One of the ideas mentioned was some sort of user point system where points could be allocated to add-on developers by users and also based on usage and then the add-on developers could either donate it to a cause, turn it into merchandise, or turn it into real money.

What this does is provide a way to compensate add-on developers for the contributions they are making to the overall Firefox brand equity.

I have a longer summary of this idea on the Addoncon blog and would love to get feedback.

CCK Wizard Status

admin — Thu, 28 Jan 2010 14:25:13 +0000

With the release of Firefox 3.6, people are already asking me about a new CCK Wizard. I am working on an update. You can get a beta of that here. Primary changes are more information on the proxy page, ability to open an existing CCK and better coexistence of multiple CCKs.

Most interesting news on the CCK front is that I’ve decided to move it to Google Code instead of maintaining in the Mozilla trees. The URL is http://code.google.com/p/ff-cckwizard/. My primary reason for doing this is honestly that I’m not really contributing to Mozilla/Firefox proper anymore and messing with Mercurial isn’t worth it for me (I know, lame excuse.) It has some other advantages, though, like having my own bug reporting system and not having to get any reviews/approvals for checkins.

So if you have ideas/suggestions/bugs for the CCK Wizard, please open them in Google Code.

Also note that CCK Wizard is something I do on the side, so my time is limited. Contributions help. I know there are a lot of folks who depend on this for the business. Any and all love is appreciated.

Extensions, Personas and Jetpack! Oh, My!

admin — Mon, 11 Jan 2010 15:20:52 +0000

As a result of Mike Connor’s post, there’s lots of discussion about extensions, theming, Personas and Jetpack. This is my livelihood, so I definitely have to jump in.

First, let’s talk about Personas. I hate to burst everyone’s bubble, but:

Personas is not lightweight theming. Personas is wallpaper.

We’ve had it since Windows 3.0 (may be even before). It’s pretty wallpaper, but it’s still wallpaper.

Lightweight theming is a different beast. Lightweight theming is the ability to theme the browser window WITHOUT theming the rest of the browser. So lightweight theming might involve changing things like browser background images (more than one), toolbar buttons, and possibly the URL bar or the tabs. I’ll be a little self serving and say that everything Brand Thunder does is lightweight theming. You can see examples at the gallery.

Personas is not a suitable replacement for Firefox theming. It doesn’t even come close. And looking at the designs for future versions of Firefox, Personas becomes irrelevant – there’s very little browser chrome to even see the background images. (Clue to Firefox developers – make the new tab window transparent like Chrome).

People point to Personas and say “look how popular it is – people must want theming that way.”

Personas’ success is about marketing.

Personas is the only extension that Mozilla markets. They market it on first run pages, download pages and home pages. It has a dedicated domain. It has special privileges for being installed without the add-on security warning. It was a recommended add-on from day one. They even have a custom bundle of Firefox that includes Personas!

So please don’t tell me that Personas is the future. Personas is the present. Clearly a completely new solution will be needed for future Firefox versions.

Now let’s talk about Jetpack.

Jetpack is like giving me an Erector set when I used to have a Home Depot.

Let’s look at the problems that Jetpack attempts to solve and see if a new programming model was necessary to solve them.

Install without restart -
If extension developers were given a specific set of APIs that they could use that didn’t require restart, then extensions could be marked as “doesn’t need restart” and this problem would be solved. All Jetpack does is pre-grab parts of the Firefox UI so that when things are placed there, Jetpack handles their placement, not Firefox. This could be done with any extension API. It doesn’t require Jetpack.

Ease of creation -
A learning curve is a learning curve. I don’t know jQuery, so Jetpack has a learning curve for me. Jetpack is simply trading one programming model for another. I’ve been to presentations where HTML developers were shown how extensions work and within one hour they could create extensions. Doing very interesting things with extensions might be difficult to learn, but that’s why you create an API. And that API does NOT have to be Jetpack specific. Packaging can be a little tricky, but again solvable outside of the context of Jetpack.

API -
If the extension API isn’t very user friendly, fix it. Isn’t that what FUEL was trying to accomplish? If you want a stable API that doesn’t change from release to release, create one. There’s no need this API needs to be created as a part of Jetpack.

Forward compatibility -
Extensions break from release to release of Firefox. That’s just a fact of life. The only way to prevent this is to give extension developers a very tiny sandbox in which to play. We don’t want this. Give us a big sandbox and if we break, we break.

The problem is not that you break us. The problem is short release cycles

Right now, the Firefox team is aiming for six month release cycles. For an extension developer, the last two months of that cycle are when we can really start checking out things and it’s only in the last month that we can actually release addons that have the correct version in install.rdf (due to AMO restrictions.). Most extension developers have multiple extensions and probably a day job. Updating five or 10 or even hundreds of extensions can be quite problematic.

Jetpack simply creates a new set of problems and a new context to solve those problems. We should try to fix those problems in the existing context.

I think the core problem here is a disconnect between Mozilla Labs and the rest of the Mozilla community. Mozilla Labs operates in a very closed community, completely contrary to the way other Mozilla projects are done (at least for the initial phases of a project). I think that contributes to their myopic vision of the future of the browser. I’d much rather see Mozilla Labs work with the community to propose ideas and foster those ideas to create a real open source lab versus coming up with ideas and then trying to force those ideas on me.

And incidentally, Internet Explorer is a great example of what happens when you give people a limited set of APIs to work with. They come up with elaborate hacks in order to make things work. And those definitely break from release to release. If you limit people, they will come up with ways around those limits. Please don’t limit me.

New Rebranding Wizard

mkaply — Mon, 21 Dec 2009 17:13:13 +0000

I’ve just uploaded a new version of my add-on Rebrand to AMO. Until it is approved, you can download it using this URL. This new version adds support for SeaMonkey as well as Firefox 3.6.

Rebrand is a fun add-on that lets you change the name and branding images of Firefox, Thunderbird and SeaMonkey. It walks you through the rebrand process and then generates an add-on. Disclaimers apply, and they are shown during the startup of Rebrand.

To celebrate this release of Rebrand, I’ve created a very special rebrand package – the Netscape rebrand. If you long for the good old days, you can install this add-on in Firefox or SeaMonkey and relive the good old days.