Mozilla Labs

One of the cool new features coming in Firefox 3 is support for a new animated image format. Browsers have supported animated GIFs for more than a decade, but the GIF image format has a number of limitations and is overdue for replacement. The PNG image format is now widely accepted as a superior replacement for static GIF images, but for animated GIFs there has not yet been a clear successor. The new Animated PNG format (APNG) is a simple extension to PNG, making it superior for animations too.

The problem

So, what’s wrong with GIFs? The two most apparent problems are that GIF images can only contain 256 colors, and lack support for partially-transparent pixels. This results in images which often look grainy or rough, and which do not smoothly blend into their background. A clever designer can somewhat mitigate these problems, but the tricks used don’t always work well in different situations — especially if the image is animated. Let’s look at an example of this problem…

Example: the Firefox “throbber”

In Firefox 2, the animation used to indicate that a page is still loading (affectionately known as a “throbber“) is an animated GIF. Here’s the actual image used on OS X, placed against some different backgrounds:

You can see that when used on a light gray background (OS X’s default color), the throbber looks just fine. But against any other background, it looks terrible. Why? To antialias the image, in order to make it look smooth, pixels must be blended to a fixed color (the expected background). If partial transparency was supported, the antialiased pixels could be made appropriately transparent, and the animation would look fine against any background.

Here’s the throbber, now rendered as an APNG: [If you’re viewing this page with Gran Paradiso, the development version of Firefox 3, you’ll see the images below as they, uhh, throb. If you’re not, you should just see the static first frame — APNG is backwards compatible with existing PNG viewers.]

The APNG version clearly looks better against different backgrounds. And that’s useful to have in practice, as it allows Firefox themes and extensions (like Chromatabs :-) to change the browser’s chrome while reusing the existing throbber, and not end up with an ugly mess.

A chicken and egg…

A spiffy new animation format is nice, but without an authoring tool no one will use it. But who’s going build such a tool before anyone is using the format? Chicken, meet egg.

Luckily, here at Mozilla Labs we have the technology to build both the chicken and the egg! The Mozilla platform can encode as well as decode APNG images, runs on multiple platforms, and has familiar environment for dealing with UI/scripting/graphics. So, yadda yadda, I wrote a Firefox extension to make creating APNGs easy. It’s called “APNG Edit.” Not the most creative name, but it’ll do. Here’s what it looks like:

My goal was to create a simple editor; the primary workflow being to load up a series of images (one for each frame), adjust the various settings for each frame, and then encode and save the finished animation as an APNG file.

The red dinosaur head shown in the screenshot above is “Chompy,” who serves as an amusing interstitial while Bugzilla processes a user’s search query. Chompy looks a little rough as an animated GIF; problems similar to the GIF throbber above are visible, and it also shows some dithering artifacts.

I obtained the individual frames as PNGs from Klowner, the Mozilla community member who originally rendered Chompy, and was able to quickly load them into APNG Edit and save the resulting animation. Here’s Chompy as a high-quality APNG:

…with a side of bacon

Oh, and “one more thing”!

I quickly realized that while a simple editor to assemble frames was a good first step, a Mozilla-based editor could be a lot more powerful with some minimal effort. Why not take advantage of Javascript and <canvas>, so that animations can be dynamically created and modified? Instead of drawing each frame in Photoshop or Gimp (over and over, as you fine-tune how you want the animation to look), it’s far easier to script the drawing tools provided by <canvas> so that the animation can be generated automatically with the parameters you specify.

For example, to make the OS X throbber, I wrote a script to draw lines with the appropriate shape, color, and rotation for each frame. I was curious what a larger version might look like, so I basically just changed the X and Y size specified in my script, and ran it again:

Here’s an existing <canvas> demo, which I easily converted into a script for generating an APNG:

The first version of the clock animation resulted in a rather large file (about 450K) because each frame was a complete rendering. I wrote another script to optimize each frame by only encoding interframe differences, which knocked the size down to 79K. I could also make easy adjustments to the dimensions or frame count, by simply adjusting the script parameters and re-rendering the animation .

Try it, extend it

Try out the editor for yourself. You’ll need:

• Gran Paradiso Alpha 7 (or newer). APNG Edit does not work on Firefox 2.
• The APNG Edit extension from the Mozilla Addons site.
• (Optional) Some sample scripts and images to experiment with.

There are still some rough spots in the editor which need improved, and there are a lot of interesting possibilities for new features. Unfortunately I anticipate most of my time will be spent working on Firefox 3; however I would welcome patches and scripts from anyone interested. Here’s some ideas for future directions:

• Add the ability to edit frames in an existing APNG or animated GIF (needs changes to imgIDecoder)
• Reorder frames by drag’n'drop
• Save APNGs as color mapped 8-, 4-, or 2-bit images (for decreased file size)
• Scripts to perform more kinds of frame manipulations.
• Sandboxing of scripts to prevent malicious code
• Cropping frames
• Scaling frames
• Animated text with the new <canvas> drawString() API
• SVG-based frame rendering

Gratuitous spinning logo

Just a few years ago, one of the most popular uses of the internet was to send jokes, cute pictures, and news stories to friends and family (social networks) via email. Fast forward to today, and you’ll find that not a lot has changed except the medium. Now one of the most common uses of instant messenger services and social networking sites is to send people links to jokes, cute pictures and interesting news stories.

This behavior isn’t at all surprising - it’s friends sharing experiences, the very backbone of social interactions and friendships. It’s also unsurprising that most “Web 2.0″ services have a feature that makes it easy for you to build a social network so that you can share things more easily, or subscribe to a friend’s activity as a way of keeping in touch.

What is surprising, however, is how little of this type of functionality has made it into today’s web browsers. The result is that when people think of tools for social interaction, email and instant messenger are at the top of their list, not web browsers.

Enter “The Coop”, a Mozilla Labs project to experiment with adding social tools to the web browser. We want to create a fun and easy way to share links with your friends, and to browse the set of links that friends have shared with you. We also want to make it easy to “subscribe” to a friend in order to make it easy to keep track of the pictures, movies, blog posts and status information that they might be posting on a variety of services. There’s a project page that describes The Coop in a bit more detail, and also has some mockups of how it might look (my favorite is the idea for a view that shows a stream of recently shared material.)

Myk Melez has also made an initial prototype available. (Note that you’ll have to allow add-ons to be installed from labs.mozilla.com in order to install The Coop.) This first build uses Facebook’s “Share” feature as the data transport layer for now, and allows you to share web content by dragging it onto your friend’s picture. As the project page indicates, we’re thinking of several different data transport mechanisms, as well as how we want to expose various interactions. This prototype really helps to get a feeling of what The Coop might become over time.

If you’re interested in an easier way to share your cool online experiences with your friends, we encourage you to check out the project page and the prototype (one cool feature of the new AMO sandbox is that you can browse the code), and then come join us in the forums and help us iterate on the design and code.

Update! We have made The Coop available at a new location here and have updated the original link above. Note that you will have to allow add-ons to be installed from labs.mozilla.com in order to install this prototype.

Introducing Operator, a Microformat Detection Extension for Firefox 2

Today Mozilla Labs is releasing Operator, a microformat detection extension developed by Michael Kaply at IBM. Operator demonstrates the usefulness of semantic information on the Web, in real world scenarios.

Here are some examples of things you can do with this release of Operator, and with the Web as it exists today.

Yahoo! Local Your Address Book

With Operator you can send the phone number of your favorite pizza place from Yahoo! Local to your address book, without having to type anything. Click through for the full image:

Upcoming.org Calendar Maps

If you view an event at Upcoming.org you can easily add the event to your calendar to see if you are free, or map the location of the event to see where it will take place.

Blog Post Tag Flickr

Let’s say you are viewing Fred’s post about the Mozilla lanyards given out at the Firefox Summit, and you decide you want to view more photos of the Firefox Summit. With Operator, you can easily navigate from Fred’s post to the “Firefox Summit” tag on Flickr.

Flickr Maps

Now let’s say you want to know where the above picture was taken. Because the photograph is geotagged, you can use Operator to quickly push its’ coordinates to Google maps.

This works for any of the millions of geotagged pictures on Flickr.

Operator requires information on the Web to be encoded using microformats, and since this method for semantically encoding information is relatively new, not all sites are using microformats yet. However, Operator works great with any blog that uses rel-tag, and the sites Yahoo! Local, Flickr, and Upcoming.org, all of which contain millions of pieces of information expressed using microformats. As more sites begin to semantically encode data with microformats, Operator will automatically work with them as well.

If you are not familiar with microformats, Alex Faaborg has been posting about microformats throughout the week. These posts serve as a good introduction:

• Part 0: Introduction to Microformats
• Part 1: Structured Data Chaos
• Part 2: The Fundamental Types

Operator isn’t the first microformat detection extension for Firefox, previously microformat detection in Firefox was possible with the Tails Export extension by Robert de Bruin. Operator builds on Tails Export by having a user interface that is based around actions the user can take, instead of data types. Operator also includes support for the microformats geo and rel-tag, and is compatible with Firefox 2.

After using Operator for awhile, you will find yourself quickly transferring structured data to your favorite applications without typing a single letter, you will be hoping around the Web without navigating on hyperlinks, and you will be remixing services in ways that are really useful.

The combination of microformated content on the Web and the Operator extension for Firefox results in a kind of data cross pollination that we think is very exciting.

Operator as Tool for Adding Microformated Content to Your Web Site

[Update: Additional technical information about Operator can be found on Michael Kaply’s blog]

In addition to demonstrating why microformats are important to end users, Operator can also be used as a tool for testing microformated content you have added to your Web site. Operator’s creator Michael Kaply explains:

In creating Operator my goals were to create something that was useful to microformat developers as well as users looking to explore microformats. As such, the Operator Toolbar can be displayed in two modes: Microformats mode and Actions mode.

In Microformats mode, each button on the toolbar represents a microformat. When you select an individual entry from the submenu on the button all the handlers available for that microformat are displayed. You can also change the options so that the default handler for that microformat is invoked when an individual entry is selected, as opposed to displaying all the handlers. In addition, you can choose to use a more descriptive name (for instance Contact(s) instead of hCard).

I have added some other useful features for developers. When you hold down the Shift key and select an entry in a microformats submenu, it displays the internal representation of the selected microformat item. When you hold down the Ctrl key and select an entry in a microformats submenu, it displays the source of the selected microformat item. Also, if debug mode is turned on in options, when an invalid microformat is detected, the menu text is changed to “Invalid - select for more details.” If you select the menu item, it will give you a message indicating what we believe is incorrect about the entry.

The Operator extension is also very extensible, allowing for not only the creation of additional microformats, but also the addition of handlers to existing microformats. There are sample files provided in the directory where the extension is installed for both of these cases. To use the new microformat or handler, place it in a directory called “microformats” in your profile directory.

I know I will get a few questions about some things, so I thought I’d handle them here as well.

Q: Why didn’t you use the XSLT transforms from Brian Suda to export to iCal and vCard?

A: Brian has done some great work, and I did take a look at those in the beginning but decided against them mainly because I needed more flexibility in my code to access the individual items in the microformats. Because of this, I parse the microformats myself and store the data in Javascript. Also, I wanted all the code in the extension to be original. I realize my export is not anywhere near as complete as Brian’s – that’s being worked on.

Q: Aren’t the Tails and Tails Export extensions good enough? Why do we need more extensions in the microformat space?

A: The Tails and Tails Export extensions are great and they provided my first glimpse at using microformats in the browser. I quickly discovered though that the interfaces they provided (sidebar and status bar) were not what I was looking for and it was not easy to add custom handlers and microformats. My goal with this new work was to make it easy to tailor the microformat concept for the end user as well as provide more options for developers working on microformats.

Get Operator

You can download Operator at addons.mozilla.org.

Comments

If you are interested in commenting, please use this thread in mozilla.dev.apps.firefox, or comment below.

Technorati Tags: microformats

Myk Melez has been working on some innovative ideas related to persistent site-specific preferences and their control. His current prototype is a Firefox extension which can be downloaded through the Firefox Add-ons site (here), or directly from his website, here. Currently the extension only includes a text size control, but Myk will be adding more features over time.

For more information about Myk’s experimentation with this concept, see his weblog post. If you have thoughts or feedback, Myk has suggested using the dev.apps.firefox list/group, or just email him directly at myk-at-mozilla-dot-org.

Today we are featuring a Firefox extension that Justin Dolske just whipped up called Chromatabs. It colorizes each browser tab to provide a strong visual indication of which site is loaded. Here’s a screen shot of it in action:

Let’s first take at the fundamental principle of why colors are useful. In the image below, try to do these two things:

1) Find all the red letters

2) Find all the K’s

You likely found the first task an order of magnitude easier than the second task [1]. This is because of difference in the way our visual system processes color compared to the way that it processes shapes. You can view all of the red letters with a single glance, or even spot them with your peripheral vision. Finding all of the K’s requires a close visual scan.

What does this have to do with tabbed browsing? Well, tabs use the same two visual variables (color and shape) to differentiate themselves from each other. Favicons provide a small amount of color, and the title text of the page consists of a series of shapes. Unfortunately some sites don’t have a favicon, or the favicon they do have isn’t sufficiently unique. Without favicons, you have to do a visual scan to find the correct tab — you can’t spot it with your peripheral vision.

This problem has attracted some interest from the community already. Many of you may be familiar with the popular Firefox extension Colorful Tabs. Its solution is to simply assign each new tab a color from a fixed list, in sequence. First example, the first tab will be blue, the second is yellow and the third green. The tab remains that color until it is closed. Each time you browse the web, you’ll have to remember what a particular color means at the moment:

Chromatabs’ approach to coloring tabs is different. Instead of assigning an essentially-random color to a tab when it is opened, a color is derived from the site currently loaded in the tab. For instance, this means that blog.mozilla.com will always be red, and engadget.com will always be purple:

So, how does it do that? Well… It takes the hostname from the URL, converts it to a number via a simple hash function, and then uses the number as a hue in HSL colorspace to obtain a final color. Justin has a blog entry discussing this and other technical details of Chromatabs’ operation in greater detail.

By keeping each site’s tab color consistent, the user can build up a mental model of what colors are associated with their favorite sites.

Future Work

Chromatabs was built as an experiment to test a concept. There are a number of directions someone could take this prototype to improve it and try new ideas. Here’s a few possibilities that might be interesting:

• It might be more intuitive if Chromatabs analyzed each page to determine the most prominent color on the page, and then used that color for the tab. You would then see Slashdot tabs in their distinctive green, Fark tabs in purple, and Zombo.com tabs in, uhhh… oooooo….
• Unfortunately not everyone likes rainbows and unicorns. In the process of converting a domain name into a RGB value, perhaps Chromatabs should also base the color on an aesthetically pleasing color pallet. Does anyone know a good algorithm to create beautiful color pallets?
• A similar problem area is coloring groups of tabs. Here the focus would be on coloring groups of tabs in a unique color, which could be ephemeral and not based on the site’s address.
• Give the user greater control over their browsing experience by allowing them to customize the color for a site. This might have some anti-phishing benefits as well (for example, expecting your bank’s web site to have the bright green color you assigned to it).

The Chromatabs extension is open source, so it’s a good starting point for anyone wanting to try out their own variation.

Discussion Topics

• What if instead of just providing a favicon.ico, Web designers were able to design the surface of the tab?
• What other ways could the browser provide a richer and more dynamic tabbed interface? For instance, Aging Tabs is really creative, bringing temporal information into the mix.

[1] From an HCI lecture (PDF) by professor Rob Miller