Pixel Perfect is a Firefox extension that enables web designers to overlay a web page with semi-transparent images (layers). The designer can then tweak the page’s content until it exactly matches the layer.

This extension was originally introduced for Firebug back in 2008 but has not been maintained for several years. Many of its existing users asked us to bring the feature back, and the Firebug Working Group got the opportunity to build it again from scratch using the Remote Debugging Protocol that’s built into Firefox. This enabled us to support new features like multiprocess Firefox and remote debugging. The extension also integrates with Firebug 3 (aka Firebug.next), but Firebug isn’t required.

We had two goals in mind when building the extension:

• Make the Pixel Perfect feature available again
• Show how to build a real world extension on top of the Remote Debugging Protocol and other Firefox APIs

This post is about the feature, but if you are an extension developer interested in learning how to build developer or designer tools using the latest Firefox APIs, you might want to read about its internal architecture.

Getting started with Pixel Perfect 2

The latest Pixel Perfect 2 (PP2) release can be installed from addons.mozilla.org (you need to have at least Firefox 36 installed). After installation, you should see a new item in the main Firefox toolbar, with a button on the left and an arrow on the right.

Clicking the button opens PP2, and clicking the arrow shows a menu with links to online resources.

If you have Firebug 3 (currently alpha) installed, you can also open PP2 from the Style Editor panel.

The PP2 UI consists of one floating window that is used to add and remove layers. This is how it looks after installation.

Add the first layer using the Add Layer button. Click the button and pick an image file from your hard drive.

The new layer should be visible inside the floating popup window as well as in the page.

You can change its properties, such as location and opacity. You can also drag the layer in the page.

The screenshot shows a page with the text Form Editor: Contact Us and one layer, shown with a blue dashed border, that shows how the page should look. Now you can use the Developer Toolbox to tweak the page to pixel perfection!

Jan ‘Honza’ Odvarko