Firefox 10 arrives with new dev tools and full-screen API

Mozilla has released version 10 of the Firefox Web browser. The update …

Mozilla has officially released Firefox 10. The new version of the open source Web browser includes a handful of improvements and new features. The browser's built-in tools for Web developers got a particularly significant boost in this release. The new version also offers better support for a number of Web standards.

Firefox's developers decided last year to transition the browser to a time-based, six-week release cycle. The new release management strategy ensures that performance improvements and support for new Web standards reach users as soon as possible. The faster release cycle posed challenges, however, for enterprise adopters and other users who require a longer a longer support period. In order to address that issue, Mozilla has decided to offer an annual extended support release with a full year of updates. Firefox 10 is the first official extended support release.

A minor adjustment to the browser's navigation bar is the biggest user-facing change in Firefox 10. The forward arrow button is no longer persistently visible by default in the navigation toolbar. It will only appear when the user navigates back a page. That means the button only shows when it can be activated. When the user clicks the forward arrow button and returns to the front of the history stack, the button will disappear again.

The distinctive keyhole shape that is formed by the back and forward buttons in Firefox's navigation toolbar has been characterized in the past by Mozilla designers as an important part of the browser's visual identity. Much like the angular tabs in Chrome, it's an aesthetic characteristic that is uniform across platforms and helps make the browser recognizable.

The user interface change in Firefox 10 will make it so that the keyhole shape is only visible when the user navigates back. The feature worked predictably in our tests and didn't pose any problems in practice. It's worth noting, however, that it doesn't appear to be available when the user has toggled the preference for small toolbar icons.

Another major change in Firefox 10 is the introduction of new developer tools. Previous versions of the browser have included a Web console, a JavaScript scratchpad, and a simple tool for inspecting the Document Object Model (DOM). Firefox 10 has a new tightly-integrated developer panel with a richer DOM inspector and a tool for viewing, toggling, and modifying CSS properties.

The DOM inspector follows your cursor as you move it over elements of the page and will lock in on an element when you click. An HTML pane at the bottom of the screen will show you the markup for the target element and allow you to modify the values of element attributes. The HTML inspector pane also has a slick breadcrumb bar that makes it easy to see the position of the target element in the page hierarchy.

The CSS inspector will show you a list of CSS properties associated with the selected element, including inherited properties. Each one has a checkbox that you can click to toggle visibility. You can also click one of the values to replace it on the fly.

These built-in development tools in Firefox are simpler and less intrusive than more sophisticated alternatives such as the Firebug add-on. There are a number of additional features under development that will be included in the inspector panels in future versions of the Web browser. One of the most intriguing is a tool that uses WebGL to show the user a three-dimensional representation of the page DOM. That feature wasn't ready for inclusion in Firefox 10 and will potentially appear in the next major release.

In addition to the new inspector, Web developers can also look forward to improved support for Web standards. An addition of particular significance is a new full-screen API, which makes it possible for an individual HTML element to break out of the browser window and stretch itself to cover the entire screen. This feature is going to be especially useful for videos and games. You can see it in action by visiting Mozilla's fullscreen demo page.

We first wrote about the full-screen API in November, when the feature originally landed in nightly builds. Mozilla carefully considered potential abuse scenarios when implementing the feature. It's designed so that an element can only switch into fullscreen mode in response to a direct user action. The browser ensures this by using a technique similar to the one used to block unwanted popup windows.

Another addition in this release is support for 3D CSS transforms. This feature, which was originally created by Apple, offers a declarative mechanism for applying animated three dimensional transformations to individual HTML page elements. It's important to note that 3D CSS transforms are entirely distinct from WebGL, which is a low-level JavaScript API for 3D programming.

Support for 3D CSS transformations is a welcome addition to the browser. Developers are already using the feature in the wild, but most of the existing 3D CSS content was authored with WebKit-specific prefixes and consequently won't work in Firefox yet.

Firefox 10 is a solid release that expands the browser's capabilities. Although the lineup of new features is slim, it's a respectable update by the standards of the rapid release model. The new version will be pushed out through the Firefox update system shortly. Firefox 10 can also be downloaded directly from the Mozilla website. For more details, you can refer to the official release notes.

The faster release cycle posed challenges, however, for enterprise adopters and other users who require a longer a longer support period. In order to address that issue, Mozilla has decided to offer an annual extended support release with a full year of updates. Firefox 10 is the first official extended support release.

Crap. This means that Ubuntu will be even slower to update Firefox now. I honestly can't see them not jumping onto the long term support version with all the proprietary crap they load into Firefox.

What about memory footprint? How does it make sense that without opening more tabs somehow memory creeps from 300 mb to over 1G ? Until more security oriented extensions come to Chrome my preference remains Firefox but god the experience is like holding a 15 minute chair pose (utakasana), it doesn't get easier with time.

Open about:memory and take a look for yourself to see what's taking up all that memory. My Firefox 10 has been open for a while now, and it's been hovering between 200MB and 300MB of ram the whole time--not bad imo.

1) No, it hasn't been a decade since 64-bit computing has gone mainstream.2) Going 64-bit isn't going to make your program faster.3) Mozilla would do a 64-bit if there was a good business reason to do so.4) Creating a 64-bit version of Firefox would quite possibly make it slower.5) Compile it yourself if it's that big a deal to you.

"Firefox's developers decided last year to transition the browser to a time-based, six-week release cycle."

I wonder how many developers want their tools changing every six weeks.

I suspect most web developers are used to (and appreciate) their tools being updated regularly, particularly if it's a stream of constant improvements. We do 3 week releases of our software (web stuff). Six weeks is positively slooooow.

Egad, that disappearing button thing is horrid. When moving between tabs, or forward and back things are just sliding all over. NOT an improvement at all. There is something to be said for only showing necessary tools, but the greying of the button is perfectly sufficient. This is breaking something that didn't need to be fixed.

"Firefox's developers decided last year to transition the browser to a time-based, six-week release cycle."

I wonder how many developers want their tools changing every six weeks.

What does that have to do with tools? They are talking about the code base. If their tools were changing that frequently, there's little chance they'd be able to get code updates out on the same frequency.

What about memory footprint? How does it make sense that without opening more tabs somehow memory creeps from 300 mb to over 1G ? Until more security oriented extensions come to Chrome my preference remains Firefox but god the experience is like holding a 15 minute chair pose (utakasana), it doesn't get easier with time.

This. I'd like to see FF's development team patch the leaky memory before doing anything else.

As for the Transforms - are we going to have to add a MOZ Prefix or simply use the non-prefix tags ?

Muon wrote:

Is it finally compiled for x64 processors?

Get with the times! It's been a decade since we've gone to 64-bit!

So Muon - do you really understand the difference between 32-bit and 64-bit processing ? Why do you think FF needs 64-bit processing ? OR are you simply jumping on the "64-bit" bandwagon because that's the latest buzzword everyone is talking about ?

wangstramedeous wrote:

What about memory footprint? How does it make sense that without opening more tabs somehow memory creeps from 300 mb to over 1G ? Until more security oriented extensions come to Chrome my preference remains Firefox but god the experience is like holding a 15 minute chair pose (utakasana), it doesn't get easier with time.

I agree. I am in Safari (on a Mac) most of the time. I use FF for very specific tasks. Otherwise it bogs down and I end up waiting for a long while before it decides to bother doing anything. Yay - JS runs faster than previous versions - but not anything noticeably different than Chrome or Safari. Maybe FF v9 vs v4.

What about memory footprint? How does it make sense that without opening more tabs somehow memory creeps from 300 mb to over 1G ? Until more security oriented extensions come to Chrome my preference remains Firefox but god the experience is like holding a 15 minute chair pose (utakasana), it doesn't get easier with time.

This. I'd like to see FF's development team patch the leaky memory before doing anything else.

Open about:memory and take a look for yourself to see what's taking up all that memory. My Firefox 10 has been open for a while now, and it's been hovering between 200MB and 300MB of ram the whole time--not bad imo.

I haven't found the about:memory window to be very useful in identifying where memory is going. When I start I'll be using about 200MB, then within a week or two it will have grown to 800MB, with most of the memory being taken up by the System Principal compartment (60%) and heap-unclassified (20%).

Which makes sense. The MemShrink developers have already done a good job of decreasing memory waste in the parts of Firefox for which they have good metrics, so it is the portions that don't have good metrics at the time of a release that waste the most memory.

I'm really looking forward to the improved tools they are providing plugin developers to help them decrease their memory waste.

What about memory footprint? How does it make sense that without opening more tabs somehow memory creeps from 300 mb to over 1G ? Until more security oriented extensions come to Chrome my preference remains Firefox but god the experience is like holding a 15 minute chair pose (utakasana), it doesn't get easier with time.

This. I'd like to see FF's development team patch the leaky memory before doing anything else.

It seems like a lot of people who are concerned about the memory footprint aren't aware of this, so I've added it to my list of things to write about this week.

A lot of people concerned with Firefox's memory also seem to be unaware of how chrome splits it's processes. I feel like they just open Task manager, look at Firefox taking up 500mb of RAM -> look at Chrome taking up 180mb of RAM for a similar amount of tabs -> fail to notice the 6 or 7 other chrome processes lower down in the list -> conclude Firefox is vastly less efficient than Chrome.

Using the built in memory tool in Chrome; it seems that Firefox no uses less RAM than Chrome for a similar amount of tabs (for anyone who doesn't know, Chrome's built in tool sums up the memory usage of all its individual processes).

Open about:memory and take a look for yourself to see what's taking up all that memory. My Firefox 10 has been open for a while now, and it's been hovering between 200MB and 300MB of ram the whole time--not bad imo.

I haven't found the about:memory window to be very useful in identifying where memory is going. When I start I'll be using about 200MB, then within a week or two it will have grown to 800MB, with most of the memory being taken up by the System Principal compartment (60%) and heap-unclassified (20%).

Which makes sense. The MemShrink developers have already done a good job of decreasing memory waste in the parts of Firefox for which they have good metrics, so it is the portions that don't have good metrics at the time of a release that waste the most memory.

I'm really looking forward to the improved tools they are providing plugin developers to help them decrease their memory waste.

I guess some of the disconnect for me is related to how others seem to utilize the browser. To me, keeping a browser open for a week is a totally foreign concept. I'm opening and closing my browser several times an hour under normal circumstances. Except if I'm listening to grooveshark or pandora all day, in which case it'll likely be closed at least once or twice a day, long before any leaks have accumulated into an unmanageable clump of lost resources.

So Muon - do you really understand the difference between 32-bit and 64-bit processing ? Why do you think FF needs 64-bit processing ? OR are you simply jumping on the "64-bit" bandwagon because that's the latest buzzword everyone is talking about ?

Depending on what you're trying to accomplish, you might want to check out the Stylish addon.

In the past, you used to be able to save your tweaked CSS file using the developer tools (you could then upload it to your server). In some cases this workflow was easier than tweaking your CSS in Firebug, then trying to remember what changes you made as you manually mirror those changes in your text editor/IDE.

The disappearing button trick doesn't seem to carry over to Windows-land.Fx 10.0 running happily, default settings, with a forward button and no forward pages.

Seconded. XP, work machine. Tried it with tabs on top and no menu bar, same.

Do you guys have the 'use small icons' setting enabled on your FF toolbar?

I do. And I just tested flicking that checkbox off, and lo and behold, the forward button has disappeared! I think I'm going to put it back. The lack of a forward button doesn't bother me. But the larger toolbar does.

I wonder how many developers want their tools changing every six weeks.

What does that have to do with tools? They are talking about the code base. If their tools were changing that frequently, there's little chance they'd be able to get code updates out on the same frequency.

Ohhhh... I just realized what you must have thought - you're talking about the new developer tool functionality in Firefox, whereas I originally thought for some reason that you were talking about the programming tools used by the Mozilla staff (can you tell I'm a programmer and not a web designer?). However, that still doesn't explain why you think the web development tools provided in Firefox would be changing every 6 weeks.

I do. And I just tested flicking that checkbox off, and lo and behold, the forward button has disappeared! I think I'm going to put it back. The lack of a forward button doesn't bother me. But the larger toolbar does.

The Article wrote:

The distinctive keyhole shape that is formed by the back and forward buttons in Firefox's navigation toolbar has been characterized in the past by Mozilla designers as an important part of the browser's visual identity. Much like the angular tabs in Chrome, it's an aesthetic characteristic that is uniform across platforms and helps make the browser recognizable.

The user interface change in Firefox 10 will make it so that the keyhole shape is only visible when the user navigates back. The feature worked predictably in our tests and didn't pose any problems in practice. It's worth noting, however, that it doesn't appear to be available when the user has toggled the preference for small toolbar icons.

You should have never pointed out "about:memory". Anal-retentive folks are now going to constantly keep that window open, and keep clicking on the "minimize memory usage" button every minute. I'm sure it's the same folks that use "rambooster" programs to flush their ram every 30 seconds to "increase performance".

Can I just say that I'm glad browser development isn't being hobbled by legacy/insecure/we-won't-support-the-standards browsers anymore, and nowadays pretty much any modern browser is a no-lose choice? It's just such a relief from The Dark Times of five or so years ago to see people bickering about millisecond-level JavaScript performance, aesthetics of the UI, or built-in web developer tools instead. That basically means that it's down to personal preference rather than how much of the Web you're allowed to use anymore.

Curious Segphault, is Open Ended officially dead? The last few Linux/Open Source posts you've made have been under "Uptime" instead...

We are preparing to reorganize some of our sections, but we aren't ready to reveal specific details yet. For now, all of the Linux and open source coverage is going to be published in Uptime and cross-posted to Open Ended.

So Muon - do you really understand the difference between 32-bit and 64-bit processing ? Why do you think FF needs 64-bit processing ? OR are you simply jumping on the "64-bit" bandwagon because that's the latest buzzword everyone is talking about ?

You should have never pointed out "about:memory". Anal-retentive folks are now going to constantly keep that window open, and keep clicking on the "minimize memory usage" button every minute. I'm sure it's the same folks that use "rambooster" programs to flush their ram every 30 seconds to "increase performance".

I'm running 64-bit Firefox on Windows 7 right now using 64-bit Adobe Flash and the 64-bit Java Plugin.It's called Pale Moon from Moonchild Productions.The 9.1 version has back-ported many Firefox 10 features.The 10.0 version is usually available shortly after Firefox.

1) No, it hasn't been a decade since 64-bit computing has gone mainstream.2) Going 64-bit isn't going to make your program faster.3) Mozilla would do a 64-bit if there was a good business reason to do so.4) Creating a 64-bit version of Firefox would quite possibly make it slower.5) Compile it yourself if it's that big a deal to you.

64bit gives you access to twice as many registers, allows for certain extra CPU security features that are 64bit mode only, allows certain algorithms to run faster as a 64bit. I'm sure there are some more, but the move to 64bit should be continual until we're there. It doesn't need to be high priority, but it should always be a primary goal.

1) No, it hasn't been a decade since 64-bit computing has gone mainstream.2) Going 64-bit isn't going to make your program faster.3) Mozilla would do a 64-bit if there was a good business reason to do so.4) Creating a 64-bit version of Firefox would quite possibly make it slower.5) Compile it yourself if it's that big a deal to you.

Firefox has had nightly releases for x64 on Windows for quite a while. With the recent release of Silverlight x64, and the official release version of Flash(non-beta) for x64 there is nothing holding you back from running x64 Firefox. Other than, you'd be running the nightly. I've noticed some hiccups with it, but that's probably because it's a nightly release, though memory usage is quite a bit higher than it would be on the x86 version.

Though, the only reason to run x64 Firefox is to attempt to run as little x86 software as possible. That's basically the only reason why I use that, and x64 Putty

The disappearing button trick doesn't seem to carry over to Windows-land.Fx 10.0 running happily, default settings, with a forward button and no forward pages.

Seconded. XP, work machine. Tried it with tabs on top and no menu bar, same.

Do you guys have the 'use small icons' setting enabled on your FF toolbar?

That box is unchecked. Menu Bar and Nav bar are checked, Tabs on Top is unchecked. I seem to recall having moved the home button on this installation to be where I want it, top left with the other nav buttons. Maybe that does it.