Personas Interactive

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.

How to Write on Glass

When I first saw the Glass add-on for Firefox, I was in awe of how well their overlays onto any web pages worked. I tried to look through the code, but couldn’t quite get a handle on what they were doing. So I pinged one of their developers, Ryan Wolf, and he spilled the beans.

This post is a must read for any add-on developer. Gives great insight into a really cool Firefox add-on technique.

Customizing the Firefox Installer on Windows

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.

Chick-Fil-A and QBQ

My kids and I were supposed to go spend the day (and night) at the new Chick-fil-A in Kyle, Texas for a chance to win free Chick-fil-a for a year. To get the chance to compete, you either have to be one of the first 100 in line, or if more than 100 people show at 6:00 AM the day before, there is a raffle for the 100 spots. In this case, there were more than 100 people (175) and we arrived at 6:05 AM due to some navigation issues. So we were out of luck. We had planned to make a fun day and night out of this, so needless to say the kids were pretty disappointed.

As I began processing why we were late, I immediately started looking for ways to shift the blame. Why did Google Maps have the exit number wrong? Why doesn’t Chick-fil-A have the location of new restaurants in its restaurant finder? Why wasn’t there a giant cow on top of the building to make it easy to spot? And suddenly it occurred to me that I had fallen into the blame game. I was asking the wrong questions.

In his incredible book, QBQ, John G. Miller talks about asking the The Question Behind the Question®. So I started asking the right question. What could I have done differently? I could have left earlier. I could have double checked the directions. I could have contacted the Kyle Chick-fil-A to make sure I knew where it was. And I realized that it wasn’t Google Maps’ fault. And it wasn’t Chick-fil-A’s fault. It was my fault. I could have done something. I needed to practice personal accountability.

Whenever we choose to practice personal accountability, we’re going completely against the tide of our culture. Articles like this one about blame shifting the BP oil spill make it abundantly clear – we’re not interested in solving the problem, we’re interested in finding someone to blame. That prevents us from finding the failures in ourselves (and gives us a person for the lawsuit).

When you are faced with situations in your life that don’t go the way you want, ask yourself, what could I have done differently? And what can I do in the future to make sure this doesn’t happen to me (or anyone else) again? And then fix it. Because it’s your problem now.

So what did I do? I sent email to Chick-fil-A suggesting that they add maps to their restaurant opening pages. And I did some research and found out that all the major mapping software has the wrong exit for Kyle, Texas. So I’m going to contact Kyle and let them know since they have more clout than me to try to fix it.

And I’m taking the kids to Chick-fil-A for dinner. We didn’t make the grand opening. But we can still have a great meal.

POSTing Multipart/Form-Data from an XMLHttpRequest

I’m working on an add-on where I have a need to POST JSON data to the server. Unfortunately that JSON contains ampersands, so in order to use POST, I would have to encode the data in some way that the server could decode. This seemed like extra unnecessary work to me. I decided to use the “multipart/form-data” header which would allow me to send the data unmodified. Unfortunately, documentation on this was lacking. So this post is just to put up sample code on how to do this in case someone else needs it. In this case, I am simply passing data=foo where foo is the JSON.

var xhr = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"].createInstance(Components.interfaces.nsIXMLHttpRequest);

xhr.open("POST", url, true);

var boundary = '---------------------------';
boundary += Math.floor(Math.random()*32768);
boundary += Math.floor(Math.random()*32768);
boundary += Math.floor(Math.random()*32768);
xhr.setRequestHeader("Content-Type", 'multipart/form-data; boundary=' + boundary);
var body = '';
body += '--' + boundary + '\r\n' + 'Content-Disposition: form-data; name="';
body += "data";
body += '"\r\n\r\n';
body += JSON.stringify(JAVASCRIPT OBJECT);
body += '\r\n'
body += '--' + boundary + '--';
xhr.setRequestHeader('Content-length', body.length);
xhr.onload = function() {
}
xhr.send(body);

There were no server changes required at all. The PHP handled the data the same way it would have if it was an “application/x-www-form-urlencoded” POST.

Belorussian provided by Patricia

Submitting a DMCA Takedown for a Persona

Update: I did eventually find the terms of service. You have to be logged in to getpersonas.com in order to see them. Also, the DMCA information is linked at the bottom of getpersonas.com as “Legal Notices”.

Although I couldn’t find the terms of service for submitting a Persona to getpersonas.com, the FAQs indicates that you must agree to the following:

  1. You either own all the elements of your design OR you are authorized worldwide to reproduce and distribute them (and allow others to do so) by the owner or the law.
  2. Your design does not contain provocative, offensive, or sexual content (i.e., it is G or PG-rated).
  3. Your design does not include identifiable elements of any non-celebrity person(s) other than yourself or individuals who have given you permission to do so.
  4. Your design does not depict violence or Nazi imagery, nor is it discriminatory or hateful.
  5. Your design does not relate to gambling.
  6. Your design does not violate any applicable law or regulation or the rights of any person or entity.

    It’s pretty clear from through the Personas inventory, that a lot of people are simply ignoring these restrictions, and Mozilla doesn’t have the volunteer capacity to enforce them.

    So if you discover an image that is a violation of your trademark or copyright, you must submit a DMCA takedown notice in order to get it removed. I was unable to find this information on getpersonas.com, but I did find it on the main Mozilla website, so I wanted to share it with anyone who needs it.

    Be aware, though, that based on the information at the end of that section, Mozilla might post your DMCA request to the Chilling Effects website.

    New CCK Wizard on AMO

    My latest CCK Wizard is now officially available on AMO.

    As noted in previous posts, this version primarily focused on coexistence of multiple CCKs, as well as updating the proxy configuration to match Firefox 3.6. I also added some usability enhancements, including the ability to open an existing configuration.

    The most interesting feature I brought back is the ability to hide a CCK so that it can’t be uninstalled. Here’s some background.

    With Firefox 3.5 and previous, there were two options you could add to your extension that only affected it if it was installed in the same directory as the EXE – hidden and locked. Locked preventing the extension from being uninstalled (but it could still be disabled – so kind of useless) and hidden preventing it from being seen at all (which of course prevented it from being disabled or locked). Mozilla removed hidden for Firefox 3.6 but left locked behind. What I’ve done is made it so that if you specify locked, it means hidden. This was the easiest way to make this work and has the nice side effect that if in your deployment, you need to hide other extensions, just mark them as locked.

    Support for the CCK Wizard is provided through Google Code.

    Enjoy!

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

    Weather Boom by Brand Thunder

    I’m really excited about the latest thing we’ve built at Brand Thunder. It’s an interactive browser theme that changes based on the weather.

    We’ve partnered with WeatherBug to give you all the weather information you could ever want. Forecasts, severe weather alerts, current conditions.

    We even use geolocation to try to figure out where you are.

    Give it a try – I think you’ll like it.

    Hiding the CCK

    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

    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.