What’s New in Firefox 19

Another six weeks has passed so it’s time for a new Firefox release. Version 19 appeared on February 19, 2013. If it hasn’t automagically installed, look at Help > About Firefox or head over to getfirefox.com. Let’s take a journey through the new features…

Native PDF Viewer

I never quite understood the necessity for native PDF viewing. Plugins can be slow, unstable and unavailable on some platforms, but I generally download or avoid PDF documents where possible. That said, Mozilla has made a great job of the built-in viewer. It’s faster than Adobe’s rendering and converts documents to HTML5 which you can inspect (not that you’ll want to — it’s a mess).

CSS3 Viewport Percentage Support

Firefox 19 now supports the new vh, vw, vmin and vmax elements. Refer to The New CSS3 Relative Font Sizing Units for more details.

The units now have full support in Firefox, Chrome, Safari and IE10 with partial support in IE9. Opera’s recent switch to WebKit will inevitably include the feature.

@page Support for Printed Documents

@page allows you to target the margins or page breaks of printed pages, e.g.

@page
{
	margin: 30mm 50mm;
}

Note that @page can be followed by :first, :left or :right to target specific pages, but that has not been implemented in Firefox yet.

Export canvas Content to an Image

The generated graphical content of a canvas element can now be exported to an image blob using the toBlob method:

toBlob(callback [, imagetype]);

The export occurs asynchronously so it requires a callback function to handle the resulting image. By default, images are exported to lossless 24-bit PNG but you can specify JPG if necessary, e.g.

// JPEG at 90% quality
toBlob(callback, "image/jpeg", 0.9);

This simple example copies the canvas to a new image element on the page:

var canvas = document.getElementById("canvas");
canvas.toBlob(function(blob) {
	var newImg = document.createElement("img"),
		url = URL.createObjectURL(blob);
	newImg.onload = function() {
		// revoke blob after use
		URL.revokeObjectURL(url);
	};
	newImg.src = url;
	document.body.appendChild(newImg);
});

Updated Developer Tools

While it’s difficult to out-do Firebug, Mozilla has added a range of great developer tools to Firefox. The JavaScript debugger now permits pausing on exceptions and you can hide non-enumerable properties. In addition, CSS links in the Web Console now open in the Style Editor.

An experimental remote web console has also been added which can connect to Firefox Mobile on Android or Firefox OS. It must be enabled in about:config — set devtools.debugger.remote-enabled to true.

Miscellaneous Improvements

There are a number of smaller updates under the hood:

• faster start-up performance
• theme support is back
• the CSS calc() function can now be used in gradient color-stops.
• support for text-transform: full-width which is mainly of use for Asian character sets
• The canvas isPointInStroke method tests whether a point lies inside the filled and stroked area of a path.
• CSS page-break-inside support to control breaks in printed documents
• CSS Flexbox has been unprefixed but remains disabled by default
• XForms has been removed, but you weren’t using it anyway.
• the minimum CPU requirement has been lowered to 600MHz, and
• several hundred bugs have been eliminated

Firefox has been losing ground to Chrome but the browser is more than a match for Google’s offering. It certainly works well on Windows but is anyone still having trouble on Mac or Linux?