The most important goal of SPDY is to transport web content using fewer TCP connections. It does this by multiplexing large numbers of transactions onto one TLS connection. This has much better latency properties than native HTTP/1. When using SPDY a web request practically never has to wait in the browser due to connection limits being exhausted (e.g. the limit of 6 parallel HTTP/1 connections to the same host name). The request is simply multiplexed onto an existing connection.

Many web pages are full of small icons and script references. The speed of those transfers is limited by network delay instead of bandwidth. SPDY ramps up the parallelism which in turn removes the serialized delays experienced by HTTP/1 and the end result is faster page load time. By using fewer connections, SPDY also saves the time and CPU needed to establish those connections.

The page-load waterfall diagram below tells the story well. Note the large number of object requests that all hit the network at the same time. All of their individual load times are comprised exclusively of network delay and by executing them in parallel the total page load time is reduced to a single round trip.

Generally speaking, web pages on high latency connections with high numbers of embedded objects will see the biggest benefit from SPDY. That’s great because its where the web should be going. High latency mobile is a bigger part of the Internet every day, and as the Internet spreads to parts of the world where it isn’t yet common you can count on the fact that the growth will be mobile driven. Designs with large numbers of objects are also proving to be a very popular paradigm. Facebook, G+, Twitter and any avatar driven forum are clear examples of this. Rather than relying on optimization hacks such as sprites and data urls that are hard to develop and harder to maintain we can let the transport protocol do its job better.

Beyond better page load time, there is good reason to think this approach is good for the web’s foundation. The way HTTP/1 uses large numbers of small and parallel active connections creates a giant networking congestion problem. This inhibits the deployment of real time applications like WebRTC, VOIP, and some highly interactive games. SPDY’s small number of busier connections fit the congestion control model of the Internet much better and enables the transport of classic web content to cooperate better with these real time applications. Web browsers have only managed to keep the congestion problem in check with HTTP/1 through arbitrary limits on its parallelism. With SPDY we can have our parallel-cake and eat it in low latency conditions too. This property is what I find most promising about SPDY, and I’ve written about it extensively in the past.

There is a great transition path onto SPDY. It is a new protocol, but it uses the old https:// protocol scheme in URIs. No changes to markup are needed to use SPDY. Generally SPDY servers support both SPDYand HTTP/1 for use with browsers that are not SPDY capable. The protocol used is silently negotiated through a TLS extension called Next Protocol Negotiation. The great news here is that upgrading to SPDY is just a matter of an administrative server upgrade. No changes to content are needed and things like REST APIs continue to work unmodified. Indeed, a SPDY site is not visually different in any way from an HTTP/1 site.

Google did a lot of work to launch this technology and to evolve it in the open, but it isn’t a Google only project any more. Since the implementations in Chrome and various Google web services were introduced we have seen either code or commitments regarding SPDY from many other products and groups including Amazon’s tablet, node.js, an Apache module, curl, nginx, and even a couple CDNs along with Mozilla. In my opinion, that kind of reaction is because engineers have looked at this and decided that it is solves several serious problems with HTTP’s connection handling and that this is a technology well positioned for us all to cooperate on. There is also discussion and preliminary movement in all the right standardization forums such as the W3C TAG and the IETF. Open standardization of the protocol is a key condition of Mozilla’s interest in it, but it is not a precondition to using it. Gathering operational experience instead of just engineering on whiteboards, is a valuable part of how the best protocols are made. The details of SPDY can be iterated based on that experience and the standardization process. The protocol is well suited to that evolution at this stage.

SPDY needs to be explicitly enabled through about:config in Firefox 11. Go to that URL and search for network.http.spdy.enabled and set it to true. Future revisions hope to have it enabled by default.

At the end of this blog post, you also have all the Developer Engagement team members and what they work on, if you are interested in discussing more, contributing or taking part of our work.

Weekly links

If there is anything you think we should read or know about, don’t hesitate to post a comment, contact us on Twitter or through any other means.
The picks this week are:

• Layout paint flashing in Firefox – Detect when a region of the web browser requires repainting.
• James Long shows just how simple it is to use a Wii controller and CSS transitions to change web sites in Firefox.
• The Case for Browser ID – A thoroughly clueful analysis supporting BrowserID as a pragmatic solution for identity on the Web, including key ingredients and current issues.
• Slide decks are little by little moving from dedicated Powerpoint-like applications to the web. Among the numerous slide engines around, impress.js is really visually appealing, but, beware!, you need a browser supporting CSS3 Transforms, both 2D and 3D, and Transitions (For Firefox, it is from Firefox 10 or later…)
• Comb looks like a nice toolbox of utilities for creating node.js applications, including helpers for logging, collections and flow control.
• Peter Lubbers HTML Offline Web Apps Presentation. HTML5 “Off line”" can be as tricky as it is powerful. Check out this great introduction!
• If you use Sublime Text 2 for programming then you’ll love this huge list of packages that extend the code editor in various ways.
• This article is not directly to Web development, but to something close to our hearts and even closer to our wallets: monetization. Everything for free, always: how Facebook ads show us the sad state of the Internet. In short, close to one billion people are willing to leave a large organization know everything about them in order to access a service that costs roughly 3 dollars a year. It says a lot about the monetization issue on the Web. Aiming to fix this, Mozilla’s working on Mozilla Labs Apps Preview, which could also become useful for games!
• 10 Usability Crimes You Really Shouldn’t Commit – A collection of ten simple but important usability tips for web developers young and old.

The Developer Engagement team

Mozilla’s Developer Engagement team work with writing articles, documentation – such as MDN (Mozilla Developer Network) – public speaking and generally helping and informing about open technologies and Mozilla products. If you are interested in following our work, here are the team members:

Remember when web sites gave you instructions how to configure your web browser with hiding toolbars and more, just to get a slightly better user experience? Or maybe it’s just me… :-)

Either way, some time ago we got fullscreen support in web browsers where the user could choose to view the current web site in fullscreen. That’s all good and well, but as an extension to that, as web developers we want to be able to trigger that. Either for the entire web site or just a specific element.

And now we can!

Requesting fullscreen

We now have access to a method called requestFullScreen, so far implemented in Firefox, Google Chrome and Safari. Therefore, to make it work at the moment, we need this code:

Please note that the Fullscreen standard in the W3C specification uses a lowercase ‘s’ in all methods, whereas Firefox, Google Chrome and Safari use an uppercase one.

What the code above does is just getting a reference to the documentElement and request for it to be displayed fullscreen. Naturally, you could also make just a certain element fullscreen, for instance, a video, with the same method called for the element you wish.

Cancelling fullscreen

If you want to cancel the fullscreen state, you need to call it on the document element:

Note here that W3C has decided to call it exitFullscreen, but in all existing web browser implementations it’s about cancelling the state.

Detecting fullscreen state change

The user could, for instance, exit fullscreen, something that might be good for you to know. For that we have a fullscreenchange event, that you can apply both to the element that requested fullscreen, but also to the document. Then we just detect the fullscreen state and take act accordingly, like this:

document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
}, false);

Styling fullscreen

In CSS, we get a number of pseudo-classes for styling fullscreen elements. The most reliable one is for full-screen and automatically gets triggered when the document/element is in fullscreen mode:

html:fullscreen {
background: red;
}

Notice here that the W3C approach doesn’t use a hyphen between the word ‘full’ and the word ‘screen’.

It should also be added that Firefox is the only web browser that applies a width and height of 100% to the element that is requesting fullscreen, since we believe that is the desired behavior. This can of course be overridden with the above CSS.

Full screen with key input

For security reasons, most keyboard inputs have been blocked in the fullscreen mode. However, in Google Chrome you can request keyboard support by calling the method with a flag:

docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);

This does not work in Safari, and the method won’t be called.

With Firefox, we are discussing and looking into various ways of how we we could add keyboard input support without jeopardizing the end user’s security. One suggestion, that no one has implemented yet, is the requestFullscreenWithKeys method, which in turn would trigger certain notifications for the user.

Web browser support

This feature is currently available in Firefox beta, but it’s due to land in the official release of Firefox, version 10, tomorrow! It has also been available in Google Chrome since version 15 and Safari since 5.1.

Play with fullscreen!

I have a Fullscreen API demo available for you to play with, and all the code is available in the Fullscreen repository on GitHub.

Highlights

• To quickly edit the outerHTML of an element, we have now added support for element.outerHTML.
• The Battery API
• Storing files in IndexedDB
• Support for loop attributes for media elements
• SPDY (off by preferences)
• WebSockets no longer needs a prefix when you call them

All new features

Below is a list of all the new improvements in Aurora 11, grouped by category together with a link to each bug in bugzilla if you are interested in reading up more about it and its process.

DOM

• Support element.outerHTML property
• SVGSVGElement.getElementById not implemented
• IndexedDB: support indexedDB.cmp
• IndexedDB: multientry indexes
• IndexedDB now support all key types, including floating point numbers, dates and arrays!
• Battery API
• Support HTML parsing in XMLHttpRequest per XMLHttpRequest Level 2
• Remove the no-argument form of requestAnimationFrame
• requestAnimationFrame callback function name should be “sample”, not “onBeforePaint”
• Allow mozRequestAnimationFrame requests to be cancelable
• Use cancelRequestAnimationFrame where appropriate instead of boolean flags
• Add mozCancelAnimationFrame
• Implement Event constructors
• Implement HTML event ctors
• Implement MouseEvent and UIEvent ctors
• Enable storing files in IndexedDB
• IndexedDB: Allow passing an array as keypath

GFX

• Add Graphite2 to gecko

Layout

• -moz-text-size-adjust CSS property
• [css3-conditional] allow @-rules inside of @media and @-moz-document

Media

• Implement the looping attributes in media elements

Network

• SPDY (Preffed off)
• Enable Extended Protection (channel and service binding) for NTLM authentication
• add workaround for broken Outlook Web App (OWA) attachment handling
• HTTP content type charset parameter accepts single quotes
• XMLHttpRequest can fire an abort event after a load event, but should not
• Disallow responseType and withCredentials for sync XHR
• Allow Cross-Origin URLs in EventSource (Server-Sent Events)
• Support unprefixed responseType == “json” in XMLHttpRequest
• Implement Binary Messages for Websockets
• Add HSTS support for websockets
• No longer dispatch incoming WebSocket messages in CLOSING state
• Set WebSocket message size limit to 2 GB
• Tracking bug: unprefix WebSockets

Performance

• Lots of animated gifs swamp us with paint events

Last month, I wrote a post for Hacks introducing the new tools in Firefox 10 Aurora. Those features have now moved to beta. Thanks for all of the great feedback so far!

In a dramatic turn at the end of that blog post, I foreshadowed that we had “more to come”. And, indeed here I am to tell you about the new developer tools features now in Firefox Aurora. What you see here is slated for final release in March, 2012.

Free-form Style Sheet Editing

In the last Firefox release, we introduced the Style Inspector. You can use the Style Inspector’s rules view to make changes to the CSS properties for an element. With this release, we’re adding a free-form Style Editor to the mix.

Select the Style Editor from the Web Developer menu, and you’re presented with a view that lists the style sheets for the page in one pane, and gives you an editor to make changes in another:

The Style Editor provides a friendly environment for working on your style sheets. Any changes you make are reflected instantly on the page. Once you’ve made your changes, you can save the file on your computer.

There are also a number of handy additional features. Click on the “eye” icon next to the style sheet and you can toggle the entire sheet on and off. If you’re working on a new page, you can create new style sheets on the fly or load a style sheet from disk.

If you want to take a look at how other sites on the web are styled, you can use the Style Editor to view the style sheets on any site. On public sites, the style sheets are often minified to reduce download time. The Style Editor will automatically prettify style sheets that it detects have been minified, but it will leave your source style sheets alone.

“Tilt” 3D View of Web Page Structure

Open up the Page Inspector (Web Developer->Inspect from the menu, or Inspect Element in the context menu on the page), and you’ll see a new 3D button on the toolbar if your computer is compatible with WebGL. Click that, and you’re presented with a whole new perspective on web page structure.

This 3D view (which was previously available in an add-on called Tilt), stacks elements as they are nested in the DOM and lets you see elements that are hidden or off the page. You can zoom in and out, rotate and pan the view to see the page from any angle that is helpful to you.

The 3D view is fully integrated with the rest of the Page Inspector functionality. You can open the HTML view or the Style Inspector for more information about the element you’ve clicked on in the 3D view. You can also change selected elements using the breadcrumbs on the toolbar.

The controls for the 3D view are easy:

Dozens of Other Improvements

Since the last release, we’ve landed dozens of refinements to our other developer features. A growing number of contributors are making the tools they use better by getting involved.

The Web Console, Scratchpad and Style Inspector have all had improvements since the last Firefox. Take a look, and let us know what you think!

Get it Now!

You don’t need to wait until March to get these great new features. Download Firefox Aurora today and see these and other improvements that are coming to final release soon.

Updates+Screencast

Since I wrote this article, we’ve landed some fixes and improvements to these tools. I added the way to pan the Page Inspector 3D view (right-click and drag). Also, there is now a screencast for these features. Be sure to opt-in to YouTube’s HTML5 video option.

Firefox has a few features up its sleeve when it comes to HTML5 video playback you might not be aware of:

• Firefox‘s seeking is now accurate to millisecondsmicroseconds, there is visual feedback when the video has stalled and clicking the whole video pauses and plays it
• Firefox Beta has specialised controls when you watch video on small devices and watching HTML5 video shows a pleasing background rather than a brutal grey
• Firefox Aurora has fullscreen, statistics overlay, saving of snapshots and controls appearing when the video ended
• Firefox Nightly has a full-screen button, fading video controls after 2 seconds of non-interaction, no loading throbber on audio, error reporting when a video could not be loaded on the video, loop attribute support, and resizing of videos larger than the browser window when you watch them directly

Planned features for Firefox are an overlay play button like YouTube when the video is not set to autoplay and turning off screensavers during fullscreen playback.

Check out Jared’s post for more information.

Weekly links December 8th 2011

If there is anything you think we should read or know about, don’t hesitate to post a comment, contact us on Twitter or through any other mean.
The picks this week are:

Christian Heilmann

The 3D CSS Tester is a small tool I put together yesterday to make it easier to understand 3D transforms in CSS3.

If you want to read more tips or discuss the web with Christian, he’s available on Twitter as @codepo8.

Eric “Sheppy” Shepherd

Linux developers should look at switching to clang for building Firefox. Check out ehsan’s blog post on how to do this.

If you want to read more tips or discuss the web with Eric, he’s available on Twitter as @sheppy.

Havi Hoffman

The New Game Conference for HTML5 game developers took place in San Francisco early last month. Now you can watch key presentations on the NewGameConference Youtube channel, including a talk about Paladin, Mozilla’s 3D gaming framework.

Havi can be found on Twitter as @freshelectrons

Jay Patel

As more mobile devices become “HTML5 enabled”, with a forecast of 1 billion by 2013, the future of apps built on Web technologies is looking bright.

If you want to read more tips or discuss the web with Jay, he’s available on Twitter as @jaybhai

Jean-Yves Perrier

Learn about the practical problems of @font-face and how to solve them thanks to this well-written article by Ryan DeBeasi: How to bulletproof @font-face web fonts?

If you want to read more tips or discuss the web with Jean-Yves, he’s available on Twitter as @teoli2003.

Jeff Griffiths

csg.js, enabling even guys like me to make cool webgl cubes and spheres with simple JS code.

If you want to read more tips or discuss the web with Jeff, he’s available on Twitter as @canuckistani.

Rob Hawkes

The creator’s of Canabalt talk about how open-sourcing the game while it’s still popular has been a win-win situation for them. It’s nice to hear success stories about open game development rather than the (usually unfounded) fears about IP and easily-accessible code.

If you want to read more tips or discuss the web with Rob, he’s available on Twitter as @robhawkes.

Robert Nyman

Jake Archibald’s article on Adaptive Images for Responsive Design is quite interesting from a hacking perspective, but also very important in displaying the lack of options in web browsers today when it comes to building more versatile designs.

If you want to read more tips or discuss the web with Robert, he’s available on Twitter as @robertnyman.

Tristan Nitot

As the Web is becoming the platform of choice for mobile development, it needs to be able to do things that were not possible in the past, such as accessing the battery charge, the vibrator and send text messages. Let’s see the recently landed Web APIs for Firefox.

If you want to read more tips or discuss the web with Tristan, he’s available on Twitter as @nitot.

Mozilla is building a collection of stable, fast and usable developer tools that ship with the browser. I’d like to introduce a collection of improvements that are scheduled to be released in final form on January 31, 2012.

But, you can get them now by downloading the Firefox Aurora channel. I personally find Aurora builds to be quite stable and usable for general browsing and web development. Give it a try and see what you think. You can install Aurora alongside your stable release of Firefox.

The New Page Inspector

Using built-in tools, you can now peek into your page’s structure and layout. Choose “Inspect” from the “Web Developer” menu, or press the handy ctrl-shift-I (cmd-shift-I on Mac) keyboard shortcut, and you can visually select the page element that is of interest to you.

You’ll also find a new “Inspect Element” context menu item that lets you immediately select the element that’s under your cursor.

When you’re inspecting a page, you’ll see something like this:

We overlay the page to highlight the element that you’re working with ⁽¹⁾. The highlighter also shows you the tag, ID and classes associated with the page element you’re viewing.

At the bottom of the window, there’s a toolbar that gives you options for changing or working with the selected element. Starting from the left, there’s a close button to close the page inspector and return to normal browsing. The “Inspect” button toggles visual selection mode so that you can highlight another element. ProTip: pressing the ESC key also switches modes.

Breadcrumbs

We call the next part of the toolbar the “breadcrumbs”. They show you where you are in the HTML structure and let you quickly switch to another element. The selected element is the dark “pushed” button. To the left of it are its parents, and to the right one of its children. Just click one of the buttons to move between the page elements. If you click and hold a button, you get a menu that lets you select from the siblings of the element listed on the button. The breadcrumbs make navigation quick without taking up much of your screen.

HTML

Sometimes looking at the HTML representation of a page is the quickest way to figure out what’s going on. Click the HTML button and that’s the view you’ll get. There’s a resizer on the right side of the toolbar to set just how much space you want for the HTML view. Also, clicking on a node in the HTML view will select that element for further inspection. ProTip: ctrl-H toggles the HTML view.

Styles

Last, but definitely not least, is the Style view. This lets you dive in, explore and experiment with your CSS. It offers two separate views of the CSS attached to the selected element: a CSS rules-based view (left, above), and a properties-based view (right, above).

The rules view is organized much like your stylesheets, showing all of the rules that apply to the element and all of those properties that those rules give you. Properties that are overridden are crossed out. You can toggle any single property easily using the checkbox to the left of it. A single click on a property name or value lets you edit it and see the results immediately on the page. If you click anywhere on the line with the brace at the bottom of the rule, you can add a new property there.

On a page with lots of styles, you sometimes just want to find out what the font-size is set to. That’s where the property view comes in. You can expand the “font-size” property and see how its set and which stylesheet set it. By default, only styles that are set in your stylesheets will be displayed (so you don’t get browser defaults listed). If you have a lot of properties listed, as you might if you use a reset stylesheet, you can quickly find what you’re looking for by typing in the search box.

ctrl-S toggles the Style view.

Web Console + Page Inspector: Great Together

The Web Console is available whenever you want it, even when you’re using the page inspector. If you have an element selected, that element is available to JavaScript in the console using the variable $0.

Scratchpad

The Scratchpad feature, which we released in August, gives you a very friendly way to experiment with JavaScript. Rather than being confined to a small input box, you get a whole editor window to work with. Now, Scratchpad uses the Orion code editor to provide syntax highlighting, better indentation and other features you’d expect from a modern code editor.

Scratchpad is now wired into Firefox’s “session restore” feature. This means that you can try out a bunch of code in Scratchpad and if you restart Firefox, restoring your session will also bring back your Scratchpad. Of course, you can always save and reload your Scratchpad files, just as you could before.

If you are only doing web development, we’ve streamlined the user interface. If you’re doing Firefox add-on development, you owe it to yourself to set devtools.chrome.enabled to true in about:config. That setting allows Scratchpad to run code in a privileged browser context and not just against the current web page.

The console Object

We’ve been building out the console object that you call from your JavaScript code or use at the Web Console’s JavaScript input. It is now in line with the de facto standard, implementing the methods that are standard across browsers. Firebug has a couple of others that we don’t implement yet (console.table, console.profile, console.dirxml), but the commonly used methods are there.

More Is On The Way

All of these features are available now in Firefox Aurora builds. We’re working on getting more new features together for you for the next Aurora.

Check out our Get Involved page to see how you can provide feedback and help make these tools even better.

Footnotes:

1. Other web developer tools make changes to your page (for example, adding a class) to make the selected element visible. Firefox’s highlighter does its work without making any changes to your content .↩

In additional to the normal improvements that you’ve come to expect like performance, security and bug fixes, Aurora 10 focuses in HTML5 enhancements.

New additions

• HTML5 Visibility API
• createProcessingInstruction
• WebGL antialiasing
• 3D Transforms
• Visibility API
• Document.mozFullScreenEnabled\

Developer Tools

• Code Editor
• CSS Rules View
• Page Inspector/Highlighter
• Console Object Completion
• Style Inspector

Aurora 10 also implements incremental enhancements like IndexedDB setVersion API changes. Ongoing detailed attention to evolving specifications help to keep Firefox at the front of the Web revolution. (Read more about IndexedDB on MDN.)

DOM

• We now fire a “load” event on stylesheet linking when the sheet load finishes or “error” if the load fails.
• We turn the POSTDATA prompt into an information page (when navigating in session history).
• We only forward event attributes on body/frameset to the window if we also forward the corresponding on* property.
• We no longer allow more than one call to window.open() when we allow popups.
• We fixed a bug where a success callback never fired when a position update is triggered after getCurrentPosition().
• We removed replaceWholeText().
• We fixed an error with createPattern(zero-size canvas).
• We now handle putImageData(nonfinite) correctly.
• We now throw INVALID_STATE_ERR when dispatching uninitialized events.
• We’ve made Document.documentURI readonly.
• We fixed document.importNode to comply with optional argument omitted.

Web workers

• We now allow data URLs.
• We implemented event.stopImmediatePropagation in workers.
• We made XHR2 response/responseType work in Web Workers.

Graphics

• We implement the WebGL OES_standard_derivatives extension.
• We implement minimal-capabilities WebGL mode.

JavaScript

• The function caller property no longer skips over eval frames.
• We fixed E4X syntax so that it is not accepted in ES5 strict mode.
• weakmap.set no longer returns itself instead of undefined.
• We implemented the battery API.

Offline: IndexedDB enhancements

• IndexedDB setVersion API changes
• Added support for IDBObjectStore/IDBIndex.count
• Various methods accept both keys and KeyRanges.
• Added support for IDBCursor.advance.
• Implemented deleteDatabase.
• objectStoreNames are no longer updated on closed databases when another connection adds or removes object stores
• IDBObjectStore.delete and IDBCursor.delete now return undefined.
• No longer throws an error if there are unknown properties in the options objects to createObjectStore/createIndex.
• We now the errorCode to “ABORT_ERR” for all pending requests when IDBTransaction.abort() is called.
• Fixed the sort order for indexes.

Layout

• We have updated the current rule for handling malformed media queries.
• We now support the HTML5 <bdi> element and CSS property unicode-bidi: isolate.
• The CSS3 implementation now supports unicode-bidi: plaintext.

Media

• Implemented Document.mozFullScreenEnabled.
• Enabled the DOM full-screen API on desktop Firefox by default.

You can see them in action in this demo of a rotating HTML5 logo and the screencast below:

This means now that we need your support in trying out CSS 3D examples in Firefox and add other extensions than -webkit- to your CSS 3D products and demos. To show that this is possible, we took the well-known webkit-only “poster circle” demo and made it work with Firefox nightly by adding the -moz- (and of course the other prefixes and one set of instructions without browser prefixes). Here is a slight excerpt:

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;

You can see this in action in the screencast below alongside Chrome and you try the demo out yourself. The slight jerkiness is actually my MacBook Air impersonating a starting jet every time I use ScreenFlow and not the browser.

To celebrate the release and to show how CSS 3D can be applied as subtle effect, have a game of pairs using your favourite browsers (and a cat) :

Oleg Romashin also spent some time to convert a few CSS 3D demos to work with Mozilla and you can check the 3D city for more “wow”.

If you are new to CSS 3D transformations here’s a good beginner course and a tool to create them.

The rotating HTML5 logo demo also shows how you can check if the currently used browser supports 3D transforms. Instead of repeating the animation frames for all the prefixes we test in JavaScript and create the CSS on the fly:

function checksupport() {
  var props = ['perspectiveProperty', 'WebkitPerspective',
               'MozPerspective', 'OPerspective', 'msPerspective'],
      i = 0,
      support = false;
  while (props[i]) {
    if (props[i] in form.style) {
      support = true;
      pfx = props[i].replace('Perspective','');
      pfx = pfx.toLowerCase();
      break;
    }
    i++;
  } 
  return support;
}
if (checksupport()) {
  var s = '';
  styles = document.createElement('style');
  s += '#stage{-'+ pfx +'-perspective: 300px;}'+
       '#logo{-'+ pfx +'-transform-style: preserve-3d;position:relative;}'+  
       '#logo.spin{-'+ pfx +'-animation: spin 3s infinite linear;}'+
       '@-'+ pfx +'-keyframes spin {'+  
       '0% {'+ 
       '-'+ pfx +'-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);'+   
       '}'+
       '100% {'+   
       '-'+ pfx +'-transform: rotateX(0deg) rotateY(360deg)'+
       ' rotateZ(360deg);'+ 
       '}}';
  styles.innerHTML = s;
  document.querySelector('head').appendChild(styles);
}

For more information on creating your own pages that use 3D transformations, take a look at the draft specification

As always, If you find any bugs, please report them at bugzilla.mozilla.org!

So please reward our hard work bringing the third dimension to Firefox’s CSS engine by supporting and testing. Cheers!

To be clear, this is not the canonical list of changes, just highlights. As always, we’ve created a page to track the changes that web developers will care about. For the full list please see the Firefox 7 for developers page.

Firefox now supports text-overflow: ellipsis

Firefox now supports the ellipsis mode for the text-overflow property. This property is supported in other browsers which means developers should be able to start using it in the wild. Here’s an example of how text-overflow ellipsis works:

HTML:

<html>
<body>
      <div class="inner">I am some very long text!</div>
</body>
</html>

CSS:

div.inner {
    width: 120px;
    text-overflow: ellipsis;
    white-space:nowrap;
    overflow:hidden;
 
    color: red;
    border: 1px dashed #333;
    margin: 20px;
    padding: 10px;
}

Result:

As you can see, it’s pretty easy to make text that cuts off in a sane way with this new property. Our developer page for the property also contains sample syntax for other browsers.

WebSockets: Updated protocol and available on mobile

First, WebSockets is now enabled by default for Firefox for Mobile. For mobile networks that are high-latency and have high connection setup-up costs, WebSockets offers an opportunity to create a much better experience than is available with polling HTTP.

Second, we’ve updated to the most recent draft version of the WebSockets protocol from the IETF. Somewhat confusingly, this is version 8 of the protocol, but is draft version 10. This will be mostly of interest to people who are building applications on top of WebSockets and tool vendors, but is worth calling out since it affects backwards compatibility.

Since the WebSockets work is ongoing, the namespace for WebSockets remains moz-prefixed to indicate that it’s not yet finalized.

An even faster Canvas element

The canvas element in Firefox 7 is even faster. We’ve revised our code for Canvas based on what we learned in previous Firefox releases and how people are using Canvas in the wild. Based on that you are likely to see much snappier performance on many demos when drawing to canvas elements. For an example, see our Runfield demo.

Web sites can no longer resize your main browser window

It’s no longer possible for a web site to change the default size of a window in a browser, according to the following rules:

1. You can’t resize a window or tab that wasn’t created by window.open.
2. You can’t resize a window or tab when it’s in a window with more than one tab.

Support for the new Navigation Web Timing Spec

Firefox Update 7 now supports the Navigation Timing spec. This allows a web page author to monitor parts of web page performance in the page itself. For people who are interested in page load and navigation performance, they can send that back to the server which can give them a better view into real-world performance.

There are a couple of other specs in this space – the User Timing and Resource Timing – but those are still under discussion in working groups and as such we have not yet implemented them.

Firefox 7 marks a turning point in how we measure Firefox performance. Traditionally we measured Firefox performance on individual developer machines and our build & release infrastructure. However it turns out synthetic benchmarks do not correspond to real-world Firefox usage: it is difficult to model a “typical” computer in a lab environment. Surprisingly slow consumer hardware, changes in usage patterns, preinstalled bloatware all affect Firefox performance in surprising ways.

Firefox 7 telemetry will prompt users to opt-in to reporting performance data to Mozilla. This data will supplement our existing benchmarking infrastructure to help us optimize future Firefox releases. Telemetry performance metrics are very lightweight and will not negatively impact Firefox performance.

In addition to transmitting data via SSL, Mozilla privacy team worked tirelessly to ensure that no personally-identifiable information is sent via telemetry. Whereas many other software projects stamp this kind of data with a unique per-user id, we opted for a per-session id which is reset every time the browser restarts. Telemetry is also disabled while in private-browsing mode.

The following telemetry data will be gathered in Firefox 7:

Memory usage
CPU core count
Cycle collection times
Startup speed

Use the about:telemetry extension to check on your browser performance. The following screenshot shows how to enable telemetry:

I’m very excited that Firefox finally joins the ranks of cars, airplanes and other software projects in making performance decisions based on real evidence gathered in the wild.

Hrm, Azure, what’s that again?

You can find out all about Azure other blog posts, there’s an introduction from Joe Drew and there’s several more in detailed posts discussing the Direct2D Azure backend and the performance implications to be found on my blog. The bottom line is that we’re working on a new graphics API that will be used for rendering in Gecko.

What does that mean for Firefox 7?

Well, we’re currently only using it with Direct2D and when using canvas. This allows us to stress test it, although a wide array of tests has been run, and it has been in use by our Aurora and Beta testers for a while now, there might still be issues we might have missed. If these issues show in the final release we’ll only have caused a regression in Canvas and for a limited subset of our users, rather than in all browser rendering. The bottom line is you should generally see a speed improvement using 2D Canvas in Firefox 7 when using Windows 7 or Vista with a sufficiently powerful graphics card.

So what’s next, what’s the status?

We’re currently working hard on both a Cairo and a Skia backend for the Azure API, this means we’ll be able to use the Azure API on all platforms. Possibly getting some quick performance benefits on platforms where Skia outperforms the cairo backends we’re currently using. At the same time we’re working on creating a layer that will allow controlled migration of all our content drawing code from the current ‘Thebes’ API’s to the new Azure API. Once that is done webpage rendering in general can start taking advantage of all the latest work!

That’s about all I have for you right now, enjoy!

tl;dr
Firefox 7 now uses much less memory than previous versions: often 20% to 30% less, and sometimes as much as 50% less. This means that Firefox and the websites you use will be snappier, more responsive, and suffer fewer pauses. It also means that Firefox is less likely to crash or abort due to running out of memory.

These benefits are most noticeable if you do any of the following:
- keep Firefox open for a long time;
- have many tabs open at once, particularly tabs with many images;
- view web pages with large amounts of text;
- use Firefox on Windows
- use Firefox at the same time as other programs that use lots of memory.

Background
Mozilla engineers started an effort called MemShrink, the aim of which is to improve Firefox’s speed and stability by reducing its memory usage. A great deal of progress has been made, and thanks to Firefox’s faster development cycle, each improvement made will make its way into a final release in only 12–18 weeks. The newest update to Firefox is the first general release to benefit from MemShrink’s successes, and the benefits are significant.

Quantifying the improvements
Measuring memory usage is difficult: there are no standard benchmarks, there are several different metrics you can use, and memory usage varies enormously depending on what the browser is doing. Someone who usually has only a handful of tabs open will have an entirely different experience from someone who usually has hundreds of tabs open. (This latter case is not uncommon, by the way, even though the idea of anyone having that many tabs open triggers astonishment and disbelief in many people. E.g. see the comment threads here and here.)

Endurance tests
Dave Hunt and others have been using the MozMill add-on to perform “endurance tests“, where they open and close large numbers of websites and track memory usage in great detail. Dave recently performed an endurance test comparison of development versions of Firefox, repeatedly opening and closing pages from 100 widely used websites in 30 tabs.

[The following numbers were run while the most current version of Firefox was in Beta and capture the average and peak “resident” memory usage for each browser version over five runs of the tests. “Resident” memory usage is the amount of physical RAM that is being used by Firefox, and is thus arguably the best measure of real machine resources being used.]

The measurements varied significantly between runs. If we do a pair-wise comparison of runs, we see the following relative reductions in memory usage:

Minimum resident: 1.1% — 23.5% (median 6.6%)
Maximum resident: -3.5% — 17.9% (median 9.6%)
Average resident: 4.4% — 27.3% (median 20.0%)

The following two graphs showing how memory usage varied over time during Run 1 for each version. Firefox 6′s graph is first, with the latest version second. (Note: Compare only to the purple “resident” lines; the meaning of the green “explicit” line changed between the versions and so the two green lines cannot be sensibly compared.)
Firefox 7 is clearly much better; its graph is both lower and has less variation.

MemBench
Gregor Wagner has a memory stress test called MemBench. It opens 150 websites in succession, one per tab, with a 1.5 second gap between each site. The sites are mostly drawn from Alexa’s Top sites list. I ran this test on 64-bit builds of Firefox 6 and 7 on my Ubuntu Linux machine, which has 16GB of RAM. Each time, I let the stress test complete and then opened about:memory to get measurements for the peak resident usage. Then I hit the “Minimize memory usage” button in about:memory several times until the numbers stabilized again, and then re-measured the resident usage. (Hitting this button is not something normal users do, but it’s useful for testing purposes because causes Firefox to immediately free up memory that would be eventually freed when garbage collection runs.)

For Firefox 6, the peak resident usage was 2,028 MB and the final resident usage was 669 MB. For Firefox 7, the peak usage was 1,851 MB (a 8.7% reduction) and the final usage was 321 MB (a 52.0% reduction). This latter number clearly shows that fragmentation is a much smaller problem in Firefox 7.
(On a related note, Gregor recently measured cutting-edge development versions of Firefox and Google Chrome on MemBench.)

Conclusion
Obviously, these tests are synthetic and do not match exactly how users actually use Firefox. (Improved benchmarking is one thing we’re working on as part of MemShrink, but we’ve got a long way to go. ) Nonetheless, the basic operations (opening and closing web pages in tabs) are the same, and we expect the improvements in real usage will mirror improvements in the tests.

This means that users should see Firefox 7 using less memory than earlier versions — often 20% to 30% less, and sometimes as much as 50% less — though the improvements will depend on the exact workload. Indeed, we have had lots of feedback from early users that the latest Firefox update feels faster, is more responsive, has fewer pauses, and is generally more pleasant to use than previous versions.

Mozilla’s MemShrink efforts are continuing. The endurance test results above show that the Beta version of Firefox already has even better memory usage, and I expect we’ll continue to make further improvements as time goes on.

So, what is the Geolocation API? In essence it allows you to detect where the user of your product is at the moment. The location data is found by different means: GPS location, mobile phone masts or wireless hub location. If you turn off wireless on your laptop and you have no G3 connectivity, the API will not be able to get any data.

Using geolocation is incredibly simple. You ask the browser to tell you what the current location is with a method on the navigator.geolocation object:

navigator.geolocation.getCurrentPosition( 
  success,
  failure, 
  { parameters } 
);

Where success is the function that is called when the browser found a location, failure is the function called when there was an error and properties is an object that can contain a few parameters. The parameters are the Boolean enableHighAccuracy, the maximumAge of the location before the browser should ask for a new one and the timeout in milliseconds after which the browser should stop trying to find a location.

Each function (success and failure) get a parameter with which to do your coding magic. The success function will get a location object when everything went well. This location object has the following properties: A timestamp telling you when the reading was done and a coordinates object with the following properties: accuracy, altitude, altitudeAccuracy, heading, latitude, longitude and speed.

Some of these are dependent on having more than one reading as for example heading and speed are calculated from the distance in latitude and longitude from reading to reading.

On Firefox you have an extra object called address which is the result of reverse geocoding the latitude and longitude. Reverse geocoding is normally done with an API but in the case of Firefox we have it baked in. When I currently do a call to getCurrentPosition I get the following result on Firefox:

Timestamp: 1315378919289
Coordinates:
    Accuracy: 18000
    Altitude: 0
    AltitudeAccuracy: 0
    Heading: NaN
    Latitude: 50.06465
    Longitude: 19.94498
    Speed: NaN

Address:
    City: Kraków
    Country: Poland
    CountryCode: PL
    County: Kraków County
    Postal Code: null
    Premises: null
    Street: Lubicz
    Street Number: 1

You can Run this test for yourself and see the code here on JSFiddle:

The failure function gets an error object with a code property. This property can have three values: 1 is a permission denied error, 2 is a position unavailable error and 3 is a timeout.

In addition to the getCurrentPosition method you also have a watchPosition method which keeps firing when a new location was found. The parameters are the same and when you keep reading (for example on a mobile device) then you will get values for the heading and the speed. You can stop watching the position change using the clearWatch method.

Using watchPosition is very cool when you are on the go. Check the Geolocation demo page and turn the watch position on and off with the button on the bottom.

In essence, this is what the map app on your mobile phone does.

What can you do with this?

Well, what you get is a latitude and longitude of your end user. This can be used with all kind of geo platforms like for example GeoNames to find places of interest around you.

You could also allow people to set markers for their friends on a map, collaboratively paint with them, find photos, tweets or foursquare checkins around you – a lot is possible when you come from lat/lon.

Resources

• Geo API Specification of the W3C
• Geo API on MDN
• Another simple Geo Demo by Remy Sharp
• Geolocation in Firefox
• Using geolocation on MDN

We will also soon run a webinar on geolocation, stay tuned!

Happy hacking!

Download Firefox 6

What’s new in Firefox 6?

The most notable addition to this new release are the <progress> element, touch events, Server-Sent Events as well as the return of WebSockets.

The <progress> element

This element can be used to give a visual cue of something in progress in the page. System progress bars are being used, which means that users of MacOS and Linux will see something different than what is pictured here.

Touch events

The standard Touch events are now available on both Firefox “desktop” and mobile, enabling users to interact with web pages using their fingers on a touch screen.

Try this minimalistic touch demo.

Server Sent Events

Server Sent Events are a mean for a server-side script to generate client-side events accompanied with data.

Messages generated on the server-side with a text/event-stream mime-type and consist of a list of events data.

data: data generated by the server

data: this line will generate a second event

Have a look at the Twitter-like timeline built with server-sent events.

WebSockets are back!

WebSockets can be used to create an interactive communication channel between a browser and a server. They are already used to build “HTML5” chats, multiplayer games, and much much more.
Note that this API will be temporarily namespaced in prevision of upcoming changes to the specification.

Other changes

You can help us improve those changelogs by telling if you find the level of details appropriate.

Firefox offers users complete control over the look and functionality of their Web browser with a gallery of hundreds of thousands of add-ons. With the launch of Add-on SDK and Add-on Builder Beta, web developers  need only knowledge of HTML, JavaScript and CSS to create great add-ons for Firefox that are restartless by default.

The Add-on SDK enables local development of add-ons through a command line interface, while the Firefox Add-on Builder Beta provides a hosted online build environment.

To find out more, head over to the Add-ons blog or the new Add-on SDK & Add-on Builder page.

CSS3 Animations

CSS Animations (check out the documentation) are a new way to create animations using CSS. Like CSS Transitions, they are efficient and run smoothly (see David Baron’s article), and the developers have a better controls over the intermediate steps (keyframes), and can now create much more complex animations.

Notable changes

• You can now pass an image as a parameter to createImageDatato copy its dimensions.
• setTimeout and setInterval will only be able to execute callbacks once per second in inactive tabs. This follows the behavior of requestAnimationFrame to save CPU and power consumption.

Other Bug Fixes and Performance Improvements:

However, there is a compatible version of Firebug (v1.8) available for you: get it here.

Now you can get the latest Firefox goodness and still debug your code.

Firefox Aurora is a preview of the next version of Firefox, released every six weeks. It provides a safe way to play with the latest Web technologies the Mozilla team is working on.

What is Aurora?

Aurora is a new preview version that fits between the Nightly builds and Betas:

• Firefox Nightly (firefox.com/channel) is released every day and includes the latest (potentially unstable) features and patches.
• Firefox Aurora (firefox.com/channel) is released every six weeks and includes the newest features not known to cause problems.
• Firefox Beta (firefox.com/channel) is released every six weeks and includes the features that are ready to be used and be tested by a large audience.

Should I use Aurora?

Amongst other things, Aurora already lets you play with CSS3 Animations and the new tabs management of Firefox. You can help us debug and test these features simply by installing Aurora from firefox.com/channel.

Switching between channels

Once you have downloaded and installed Aurora, you can switch to other channels at will. Simply click on the Help menu and open the About window.

Update: The channel switcher will be removed from future versions of Aurora as explained by Johnathan Nightingale on the channels blog.

Start using it right away and let us know what you think about it.