Firefox 20 Beta Adds JS Profiler, CSS Flexbox and getUserMedia by Default

There are only a couple of additions for developers in the new Firefox 20 Beta, Mozilla spent a lot of time on its developer tools recently so it's perhaps understandable that it's focusing on other areas for a change.

Still, there's a new JavaScript Profile tool which should help developer optimize their sites.

While that's the only new tool, Mozilla has revamped the Developer Toolbox, everything is now built into a single window. The changes should make it easier to switch between the dev tools built into Firefox.

Firefox 20 is the first to offer full support for the new CSS Flexbox model by default. The Flexbox has seen several iterations, but the latest draft spec seem to be the final ones and most major browsers are implementing them.

The new CSS Flexbox model should make it easier to design more flexible websites, hence the name, writing one code that works on anything from phones to desktops.

GetUserMedia is also being graduated, it's now enabled by default in Firefox 20. It's one of the major components of WebRTC, it handles the webcam and mic, but can be used for all manner of interactive apps.

Just like the CSS Flexbox, it's been available in Firefox for many months, but is only now enabled by default.

One entirely new thing though is support for Canvas Blend Modes. Normally, apps that rely on the HTML5 Canvas for graphics can only overwrite portions of the canvas, or the entire thing.

Currently, images are "written" on top of whatever the canvas displays at that moment. With blend modes, developers will be able to define how the new image interacts with the existing one, creating interesting effects in the process. Most of the basic blend modes are supported.

Mozilla also boasts about improvements for the HTML5 Audio and Video tags.