Some small issues I’ve noticed with Mozilla Jetpack

I’ve been have a great time building my first Jetpack add-on for Firefox 4. The add-on framework has been EASY to use, and FAST at allowing me to build a powerful extension. However, with any new system (that’s still in beta) there are a few things that I ran into that slowed me down. Hopefully you will find some of the following content useful.

Communication:

Communication between different parts of your add-on can sometimes be confusing. There are good examples in the Jetpack docs, but they are quick examples that don’t illustrate a robust communication system that spans through all parts of your add-on that you would actually need. I’ve written a separate post about Jetpack communication that will hopefully get you started.

Panels:

I love the panel! It’s a floating palette populated by HTML/JS of my choosing. For instance, in the add-on I’m working on, the panel looks as such:

Screen_shot_2011-03-16_at_6

To style that was a NIGHTMARE. I would have to edit the HTML/CSS, save, reload the add-on in the browser. It would be nice if I could firebug my panel (and maybe I can, anyone know how?) for CSS tweaks.

One thing I tried to make this easier is to copy all of that HTML into a file on my desktop, load that in a browser and make my edits, then copy/paste them to the online editor. Of course, you might have to do some tricks to get it working, like contain everything in a div that represents your panel (with the overflow style set to hidden and such).

I would say that, at this point with the add-on I’m working on, tweaking it’s visual design has now taken more time than writing the functionality. We need to improve this.

Also, a little annoyance, the panel, by default, gives us nice rounded corners. If you notice in my panel screenshot above, I’m missing the rounded corners… they should look like:

Screen_shot_2011-03-16_at_6

The reason seems to be happening is one or more of the following:

  • The body (of the panel’s HTML) has a background color on it (of a fade, image, etc).
  • The divs near the corners (in my example above, the header and footer divs) have background fades on them

It would be nice if this did not affect the panels nice corners.

Old add-on code stuck in browser memory?

Please note that I’ve only seen this in the online add-on builder and have brought it up here.

If you do something like this:

var tabs = require(“tabs”);
tabs.on(‘activate’, function(tab) {
  console.log(‘this is a test.’)
});

In the online builder, test it, then jump to a tab, you get the log message you expect. However, if you stop testing, change that log message to something else and rebuild, you click on another tab with report the new log message AND the old message. It seems like the old build is still in the browser memory and running. This can be confusing when fixing an error and trying to log results. Restarting the browser will fix this issue.

Along these lines as well is another issue I’ve noticed. If I edit/test an add-on over and over, then get ready to stop for the night and stop testing (by clicked the activated “test” button in the builder), the add-on will unload. Now if I jump over to another tab, I get the spinning pinwheel (on a mac) and it takes a good 60 seconds for the tab to switch. If I yet again switch to another tab, I’ve yet to see it recover from the pinwheel loading… forcing the browser closed is the only option here.

Online Builder Header:

Ok, I’m just being really picky on this one, and I know someone spent a lot of time on that Jetpack logo, but with the online builder, that whole top blue area takes up too much space. The first thing I do when arriving there via Firebug is:

document.getElementById(“app-header”).style.display = “none”;
document.getElementById(“app-body”).style.top = “0”;

So you see:

Screen_shot_2011-03-16_at_6

 

and I see:

Screen_shot_2011-03-16_at_6

 

The links on the right could easily be moved into the gray area… I’m using this as an app, my TextMate app doesn’t have a banner across the top with a logo in it. It’s distracting.

Finally:

Those are the issues I’ve run into while developing my first Jetpack add-on (to be released soon!). Overall, using Jetpack has been a BLAST, especially compared to the old system for developing Firefox add-on. If you are developing a Firefox 4 add-on and need a bit of help, stop by the dev group and someone surely can help you out.

Advertisements