What’s New in Firefox 22

Firefox 22 was released on June 25, 2013 — a little under six weeks after Firefox 21. That was slightly underwhelming when compared with previous releases so let’s see what version 22 has to offer…

WebRTC Support

Firefox has joined Chrome with native WebRTC support.

WebRTC allows you to make video calls, audio calls and share files without plug-ins or third-party software such as Skype. The API is relatively new and experimental — use it at your own risk.

Once Opera moves to Blink, IE will be the only major browser without WebRTC. Microsoft owns Skype so the company has less urgency to enable WebRTC but I suspect it will appear at some point.

Useful WebRTC links:

• Embed WebRTC in your site
• Talky.io
• Cosassium remote interviews
• Open.tok

asm.js

asm.js is a strict subset of JavaScript which permits dynamic compilation and significant performance improvements. If the compiler recognizes asm.js code, it can optimize and run it at near-native speed. However, it’ll still run in a standard JavaScript engine which doesn’t support asm.js.

asm.js is an interesting idea which has been adopted for several game demonstrations. I suspect it could overshadow Google’s Dart project which requires learning a new language and is only supported in Chrome.

CSS3 Flexible Box

Flexbox is a CSS3 layout mode which allows you to define how elements behave when the page adapts to different screen sizes. There’s too much to explain here so look out for flexbox articles on SitePoint soon.

Flexbox is supported in Firefox, IE11 and Opera without a prefix (unfortunately, it seems Opera will revert to a -webkit prefix following its migration to the Blink rendering engine). Chrome and Safari require the -webbit prefix. IE10 requires the -ms prefix.

Developer Tools Updates

Ever wondered what font a page was using? Open Firefox’s Inspector (Menu > Web Developer > Inspector) and it’ll tell you…

While you’re there, click the “Highlight painted area” icon:

Colors will be overlaid on the page as elements are redrawn. This is very useful; repaints are one of the most expensive browser activities and the tool will help identify performance issues.

You’ll also notice a new “Dock to side” icon which docks the tools to the right of the browser window.

The Firefox developer tools haven’t replaced Firebug entirely, but they’re faster and I find myself using them increasingly often.

HTML5 Audio and Video Playback Speed

Right-click any media playing in the native player and you can select a playback speed: slow motion, normal, high and ludicrous. You’ll be able to listen to tedious podcasts in half the time!

Display Scaling

Firefox 22 supports scaling options to adjust the text size on high-resolution displays. This is currently available on Windows only (wouldn’t it would be more useful on Mac?)

The scaling is controlled by layout.css.devPixelsPerPx in about:config. The default is -1 — you can enter any value from 0.05; a number greater than 1.0 will increase the text size.

Miscellaneous Updates

A few minor changes caught my eye…

• support for the HTML5 <time> and <data> elements
• CSS3 @supports is enabled by default
• the new Web Notifications API is implemented
• the Pointer Lock API can be used outside of full screen
• plain text files are word-wrapped (this seems so obvious — why wasn’t it implemented in browsers back in 1995!)
• WebGL performance improvements
• improved memory usage when rendering images
• a social services manager
• Mac OSX: file download progress is displayed on the dock icon
• Firefox mobile: support for smaller-screen tablets

Firefox may be losing market share but version 22 is impressive. Even if you’ve switched to Chrome, Firefox remains an essential application for web developers.