Article
Firefox 3: What's New, What's Hot, and What's Not
JavaScript Goodies
Firefox 3 supports JavaScript 1.8, which includes a few interesting new advantages, such as:
- expression closures; we can now write
function(x) x * xinstead of the more verbosefunction(x) { return x * x; } - generator expressions; it’s no longer necessary to create custom generator functions like we did in JavaScript 1.7
- the
reduce()andreduceRight()methods; these let arrays run a function over all elements of an array, collecting results from previous calls
Head over to the Mozilla for Developers web site for more details.
What really makes the difference, though, is the number of new APIs and interfaces that have been released by Mozilla developers.
The Firefox User Extension Library (FUEL) includes a set of very useful objects that will simplify the life of those who want to develop Firefox extensions, such as:
- the
Annotationobject, to store custom data about a web page - the
Bookmark,BookmarkFolderandBookmarkRootobjects, to handle bookmarks - the
BrowserTabobject, to control browser tabs, their state and contents - the
Consoleobject, to send messages to Firefox Error Console - the
Events,EventItemandEventListenerobjects to manage browser events - the
ExtensionandExtensionsobjects, to access the currently-installed extensions - the
PreferenceandPreferenceBranchobjects, to access Firefox options - the
Windowobject, to manage browser windows and their tabs - the
SessionStorageobjects, to manage storage items
Additionally, quite a few new public interfaces have been released:
nsIJSON—to encode and decode JSON strings.nsIIdleService—to monitor user (in)activity.nsIZipWriter—to compress data into ZIP files.nsIThreadManager—to create and manage threads and dispatch events to them.nsIParentalControlService—to access Windows Vista’s build-in parental control.nsILoginManagerandnsILoginInfo—to access the password manager.- Last but not least, a new shiny
PlacesAPI to access the new bookmarking and history features.
Offline Applications Made Easier
The HTML 5 Working Draft has been around for a while, and although it doesn’t yet qualify as a new, standardized HTML specification, it’s on its way to doing so. A clear sign of this possibility is the increasing support browsers are rolling out, tag by tag, as time goes on.
Firefox 3 puts into practice quite a few interesting HTML5 features, and offline caching is definitely one of them. Imagine being able to use your favorite web applications offline as well! In fact, Google Gears was created for that very purpose. But what we have here is a more standardized, native form of support for offline applications, which could potentially change the way such applications are developed (for instance, they might not require a third-party API).
Firefox 2 already offered support for DOM storage, which provides a way to overcome the most annoying limitations of browser cookies. In a nutshell, DOM storage allows developers to programmatically store resources on the client machine without having to worry too much about their size or making sure that they’re secure. The idea behind DOM storage is to provide storage via an easy-to-use and standardized API.
Firefox 3, on the other hand, actually makes DOM storage support useful, by providing a few other “missing pieces” necessary to develop offline applications. The first one is a way to identify offline resources via a cache manifest file, which may look something like this:
CACHE MANIFEST
# v1
# Comments must be preceded by a hash symbol
http://www.example.com/index.html
http://www.example.com/figure1.png
http://www.example.com/figure2.png
http://www.example.com/figure3.png
http://www.example.com/effects.js
http://www.example.com/ajax.jar
This manifest file is linked directly in the <html> tag:
<html manifest="http://www.example.com/cache-manifest">
In this way, you can tag resources for offline use: static HTML pages, images, and scripts! Furthermore, by using the JAR: protocol, it’s also possible to compress scripts to save space (and download time).
Note that as of Firefox 3, offline resources must be listed within the cache manifest, rather than being included in the page header using <link rel="offline"> or similar. This decision was taken in order to make Firefox compliant with the actual WHATWG specification.
At the moment, Firefox 3 support for offline caching lacks:
- resource versioning
- fallback entries
- opportunistically cached entries
Other than that, everything seems to be on track.
Finally, the navigator.onLine event has been added, which allows a page’s JavaScript code to determine when the browser is online or offline. One way to make sure you’re offline is to select File > Work Offline, but it should also be fired when the network connection is lost or not available.
Success stories? Well, there’s at least one for now: Chris Double added offline support to the Zimbra email client (a screencast is available).
Now all we need is other browsers to fully embrace the Web Application 1.0 specification and offer similar support …
Additional HTML 5 and Web Application 1.0 Support
Besides partial support for offline resources, Firefox developers hand-picked a few other interesting HTML 5 features which have been implemented in Firefox 3.
Did you ever try to develop a cross-browser WYSIWYG HTML editor? If you did, chances are that you know that Firefox offers Midas, a JavaScript rich-text editor. In particular, a collection of DHTML commands (the same used by IE) have been implemented to perform the most usual editing operations like making text bold, italic, and so on.
The problem with Firefox versions up to 2 was that we had to display the portion of the page we wanted the user to edit inside an IFrame, because only the designMode property of the document object was implemented, allowing users to edit a whole document, rather than just a section of it.
But we don’t have to do that any more: it’s now possible to set the contentEditable property of a particular HTML element to true to make that element editable. This means, for example, that you can make even a single div element editable, as shown in the demo by Mark Finkle. The good news is that this functionality now works in all major browsers (including Firefox, IE, and Opera).
Other features implemented in Firefox 3 concerning HTML 5 and Web Application 1.0 drafts include:
- support for
document.activeElementanddocument.hasFocusto determine whether an element has focus or not - support for
draganddragendevents to monitor drag-and-drop operations (check out the demo) - native support for
getElementsByClassName - enhanced
<canvas>support with new methods to perform transformations and draw text - support for cross-document messaging via window.postMessage to send string messages across browser windows (as outlined in a tutorial by John Resig)
- support for the ping attribute for anchors and area elements. Darin Fisher explains: “When a user follows a link via one of these tags, the browser will send notification pings to the specified URLs after following the link.”
Unfortunately, the most hyped HTML 5 elements, <video> and <audio>, didn’t make the cut. Chris Double has reported that he’s still working on them, and that they’re likely to be shipped later on, as they are marked as a top-priority feature scheduled for Gecko 1.9.1.
Still, it must be noted that video and audio support will only be offered for free codecs, like Theora and Ogg/Vorbis, mainly because of the patent issues associated with proprietary formats like MPEG-4 and MP3.