Firefox 4, which shipped on March 22, 2011, enhances performance, adds more support for HTML5 and other evolving Web technologies, and further improves security. This article provides information about this release and what features are available for Web developers, add-on developers, and Gecko platform developers alike.
Features for web developers
- Meet the HTML5 parser
- A look at what the HTML5 parser means to you, and how to embed SVG and MathML into your content inline.
- Forms in HTML5
A look at improvements to web forms in HTML5. Among these changes are added input types in the
<input>element, data validation, and more.
- HTML5 Sections
Gecko now supports the new HTML5 elements related to sections in a document:
- HTML5 hidden attribute
- This attribute, common to all elements, is used to hide content in a webpage that is not currently relevant to the user.
- Other HTML5 elements
Gecko now also supports the following new HTML5 elements:
- A guide to using the new WebSockets API for real-time communication between a web application and a server. Note that WebSockets as implemented in Firefox 4 is not compatible with the final standard, and should not generally be used.
- Specifying a negative radius when calling
arc()now correctly throws an
- Specifying non-finite values when calling
miterLimitto a negative value no longer throws an exception; instead, it properly ignores non-positive values.
lineWidthto a negative value no longer throws an exception; instead, it properly ignores non-positive values.
putImageData()method now supports the optional parameters
Miscellaneous HTML changes
<textarea>elements are now resizable by default; you can use the
resizeCSS property to disable this.
canvas.toDataURLno longer throw an exception when called with unrecognized arguments.
<canvas>element now supports the Mozilla-specific
mozGetAsFile()method, which lets you obtain a memory-based file containing an image of the canvas's contents. See
canvas2dcontext.lineJoinno longer throw an exception when set to an unrecognized value.
canvas2dcontext.globalCompositeOperationno longer throws an exception when set to an unrecognized value, and no longer supports the non-standard
- Support for the obsolete
<spacer>element, which was absent in all other browsers, has been removed.
<isindex>element, when created by calling
document.createElement(), is now created as a simple element with no properties or methods.
- Gecko now supports calling
<input>elements to open the file picker. See the example in the article Using files from web applications.
<input>element supports a new
mozactionhintattribute, which lets you specify the label for the enter key on virtual keyboards.
<noframes>elements now get executed, which they weren't in previous versions of Firefox. This is in compliance with the specification, and matches the behavior of other browsers.
- CSS transitions
- New CSS transitions support is available in Firefox 4.
- Computed values in CSS
-moz-calchas been added. This lets you specify
<length>values as mathematical expressions.
- Selector grouping
:-moz-anyto group selectors and factorize combinators.
- Background image subrectangle support
-moz-image-rectfunction makes it possible to use subrectangles of images as a
- CSS touch properties
- Support for touch properties is added. Details, and real article names, to come later.
- Using arbitrary elements as CSS backgrounds
You can use the
-moz-elementCSS function and the
document.mozSetImageElement()DOM function to use arbitrary HTML elements as backgrounds.
- Privacy and the :visited selector
- Changes have been made to what information can be obtained about the style of visited links using CSS selectors. This may affect some web applications.
New CSS properties
||Lets you customized advanced features of OpenType fonts.|
||Specifies the width in space characters of a tab character (U+0009) when rendering text.|
||Lets you control the dimensions in which an element may be resized.|
New CSS pseudo-classes
||Used to style elements whose plugins have crashed.|
||Applied to placeholder text in form fields.|
||Applied to the submit button on forms when one or more of the form's fields doesn't validate.|
||Applied to elements in inactive windows.|
||Automatically applied to
||Automatically applied to
||Automatically applied to
||Automatically applied to
New CSS pseudo-selectors
||Lets you specify the appearance of an element when Gecko believes it should have a focus indication rendered.|
New CSS functions
||Lets you group selectors and factorize combinators.|
||Lets you use an arbitrary element as a background for
||Lets you use a subrectangle of an image as a
Renamed CSS properties
|Old Name||New Name||Notes|
||The old name is supported for a limited time to allow you time to update your sites. Rendering changes have also been made to match the latest version of the specification.|
Miscellaneous CSS changes
text-shadowproperty now caps the blur radius to 300px for sanity and performance reasons.
overflowproperty no longer applies to table-group elements (
-moz-appearanceproperty now supports the
-moz-win-borderless-glassvalue, which applies a borderless Aero Glass look to an element.
-moz-device-pixel-ratiomedia feature has been added, allowing the use of the device pixels per CSS pixel ratio to be used in Media Queries.
- Gecko's handling of CSS units has been revised to better match other browsers, and to more accurately translate absolute lengths into screen pixel counts based on the device's DPI.
Graphics and video
- The developing WebGL standard is now supported by Firefox.
- Optimizing graphics performance
- Tips and tricks for getting the most out of graphics and video performance in Firefox 4.
- Support for WebM video
- The new open WebM video format is supported by Gecko 2.0.
- SVG animation with SMIL
- Support for SMIL animation of SVG is now available.
- Using SVG as images and as CSS backgrounds
You can now use SVG with the
<img>element, as well as a CSS
<audio>elements is now supported, letting you determine which ranges of a media file have been buffered. The
TimeRangesDOM interface has been implemented to support this.
preloadattribute from the HTML5 specification has been implemented, replacing the previously-implemented (and no longer supported)
autobufferattribute. This affects the
<audio>elements, as well as the
- SVG text positioning improvements
You can now specify lists for the values of the
dyproperties on SVG
<tspan>elements. This lets you control the positioning of each character in a string individually.
- Obtaining boundary rectangles for ranges
Rangeobject now has
- Capturing mouse events on arbitrary elements
Support for the Internet Explorer-originated
releaseCapture()APIs has been added. See bug 503943.
- Manipulating the browser history
The existing document history object, available through the
window.historyobject, now supports the new HTML5
- Animations using MozBeforePaint
A new event has been added which, in concert with the
window.mozAnimationStartTimeproperty, provides a way to create animations that are synchronized with one another.
- Touch and multi-touch events
- Support has been added for touch and multi-touch events.
HTML elements' DOM interfaces have changed
Several HTML elements have had their DOM interfaces changed to the ones required by the HTML5 specification, as shown below.
|Interface in Firefox 3.6||Interface in Firefox 4||HTML Element|
Miscellaneous DOM changes
- The wrapping of a
<textarea>element can now be controlled via the DOM, via the
wrapDOM attribute. bug 41464
<script>elements created using
document.createElement()and inserted into a document now behave according to the HTML5 specification by default. Scripts with the
srcattribute execute as soon as available (without maintaining ordering) and scripts without the
srcattribute execute synchronously. To make script-inserted scripts that have the
srcattribute execute in the insertion order, set
fileobjects now offer a
- FormData support for XMLHttpRequest.
element.isContentEditableproperty has been implemented.
document.currentScriptproperty lets you determine which
<script>element's script is currently executing. The new
element.onafterscriptexecuteevents are fired before and after a script element executes.
- Added the
mozSourceNodeproperty to the
- Added the
selection.modify()method to the
Selectionobject; this lets you easily alter the current text selection or cursor position in a browser window.
- Support for the
window.directoriesobject and the
window.open, which are not supported in any other browser, has been removed. Use
personalbarinstead. bug 474058
event.mozInputSourceproperty has been added to DOM user interface events; this non-standard property lets you determine the type of device that generated an event.
document.onreadystatechangeevent has been implemented.
document.createElementmethod no longer accepts
>around the tag name in quirks mode.
document.releaseCapture()methods have been added, allowing elements to continue tracking mouse events even while the mouse is outside their normal tracking area after a
mousedownevent has occurred.
window.mozPaintCountproperty has been added; it lets you determine how many times a document has been painted. This can be useful when testing performance of your web application.
- The language token has been removed from
window.navigator.languageor the Accept-Language header instead. bug 572656
- Mouse events now include a
mozPressureproperty indicating the amount of pressure on supported pressure-sensitive input devices.
window.URL.revokeObjectURL()methods let you create object URLs which reference local files.
DOMImplementation.createHTMLDocument()method lets you create a new HTML document.
Node.mozMatchesSelector()now throws a
SYNTAX_ERRexception if the specified selector string is invalid, instead of incorrectly returning
- You can now set an element's SVG properties' values using the same shorthand syntax as with CSS. For example:
element.style.fill = 'lime'. See
- The document root now has a
privatebrowsingmodeattribute that describes the state of private browsing mode, including an indication of whether private browsing is temporary or permanent for the session.
- The second parameter of the
window.getComputedStyle()method is now optional, as it is in every other major browser.
- The DOM
StorageEventobject now matches the latest version of the specification.
- The minimum allowed delay for the
window.setTimeout()method is now a preference,
MozAfterPaintevent is no longer sent by default, due to a potential security issue. It can be re-enabled by setting a preference.
- Content Security Policy (CSP)
- Content Security Policy (CSP) is a Mozilla proposal designed to help web designers and server administrators specify how content on their web sites interacts. The goal is to help detect and mitigate attacks including cross-site scripting and data injection attacks.
- HTTP Strict Transport Security
- HTTP Strict Transport Security is a security feature that lets a web site tell browsers that it should only be communicated with using HTTPS, instead of using HTTP.
- The X-FRAME-OPTIONS response header
- The X-FRAME-OPTIONS HTTP response header introduced in Internet Explorer 8 is now supported by Firefox. This allows sites to indicate whether or not their pages can be used in frames, and if so, whether or not to restrict that to the same origin.
- User Agent string changes
- As a means to reduce the amount of data and entropy sent out in HTTP requests (see bug 572650), the crypto strength and language tokens have been removed from the user agent string.
- Using the Web Console
- The Web Console tool is a useful debugging aid for web developers and extension developers alike.
Note:The Error Console is disabled by default starting in Gecko 2.0. You can re-enable it by changing the
devtools.errorconsole.enabled preference to
true and restarting the browser.
Changes for Mozilla and add-on developers
For helpful tips on updating existing extensions for Firefox 4, see Updating extensions for Firefox 4. There are several key changes that break compatibility with existing add-ons, so be sure to read that article.
If you're a theme developer, you should read Theme changes in Firefox 4 to understand some critical changes you'll need to be aware of.
Services.jsmcode module provides getters that make it easy to obtain references to commonly-used services, such as the preferences service or the window mediator, among others.
- JS-ctypes API
- The JS-ctypes API makes it possible to call C-compatible foreign library functions without using XPCOM.
- Add-ons Manager
- The new Add-ons Manager provides information about installed add-ons, support for managing them, and provides ways to install and remove add-ons.
- The new popup notifications module makes it easy to present attractive, non-modal notifications to the user. You can see how to use this API in Using popup notifications.
- Loading code modules from chrome: URLs
DownloadLastDir.jsmcode module provides the
gDownloadLastDirglobal variable, which contains a string you can use to learn the path of the directory into which the last download occurred. This module handles issues related to private browsing for you.
- Measuring performance using the PerfMeasurement.jsm code module
Miscellaneous changes to code modules
NetUtil.jsmcode module now offers the
readInputStreamToString()method, which lets you read arbitrary bytes from a stream into a string, even if the stream includes zeroes.
- A new type of worker for privileged code; this lets you use things like js-ctypes from workers in extensions and application code.
- Touch events
- Support for (non-standard) touch events has been added; these let you track multiple fingers moving on a touch screen at the same time.
Other DOM changes
- The new "document-element-inserted" notification is sent when a document's root element is created, but before any scripts are executed on it.
Changes to the tabbrowser element
Several changes were made to the
tabbrowser element that impact extensions that interact with tabs. In addition to supporting app tabs, these changes also change the tab bar into a standard toolbar, which lets the user drag toolbar buttons into it.
TabOpenevents no longer bubble up to the
gBrowser). Event listeners for those events should be added to
gBrowser.tabContainerrather than to
- The tab context menu is no longer an anonymous child of the
gBrowser.tabContextMenu. See this blog post for more details.
- The new
visibleTabsproperty was added to let you get an array of the currently visible tabs; this lets you determine which tabs are visible in the current tab set. This is used by Firefox Panorama, for example.
- Added the new
showOnlyTheseTabsmethod; this is used by Firefox Panorama.
- Added the new
getIconmethod, which lets you get a tab's favicon without having to pull up the
- Added the new
tabbrowser.tabsproperty, which lets you easily get a list of the tabs in a
- The new
unpinTabmethods let you pin and unpin tabs (that is, switch them between being app tabs and regular tabs).
- Added the
tabmodalPromptShowingattribute to the
tabbrowserto support tab-modal alerts.
Changes to popups
popupelement is no longer supported; you should use
menupopupinstead. (If you continue using
popup, you will encounter glitches, since the element has no special meaning anymore. For example,
menuseparatorcan appear transparent when used in a
menupopupXUL element now has a
triggerNodeproperty, which indicates the node on which the event occurred that caused the popup to open. This also required the addition of a trigger event parameter to the
openPopupmethod. Also, the
anchorNodeproperty has been added; it returns the anchor specified when the popup was created.
panelelement now offers
flipattributes, which are used to configure the behavior of new "arrow" style notification panels.
Remote XUL support removed
Remote XUL is no longer supported; this affects XUL documents being served through HTTP; also, you can no longer load XUL documents using
file:// URLs unless you create the preference
dom.allow_XUL_XBL_for_file and set it to
true. There is, however, a whitelist feature that can be used to allow specific domains to load remote XUL. The Remote XUL Manager extension lets you manage this whitelist.
Miscellaneous XUL changes
readonlyattribute now correctly works for XBL fields.
resizerelement now lets you use the
elementattribute to specify an element to resize, instead of resizing the window.
resizerelement now has an
typeattribute that lets you specify that the resizer is for a window instead of an element, to prevent the window resizer from being drawn twice.
- The "active" attribute no longer gets set on active XUL windows. Instead, you can use the new
:-moz-window-inactivepseudoclass in order to assign different styles to background windows.
emptytextattribute is now deprecated; you should use
windowelement now offers a
acceleratedattribute; when true, the hardware layer manager is permitted to accelerate the window.
stackelement now supports the
- Events are now fired during
toolboxcustomization, allowing you to detect changes to toolbars.
treeelements is no longer supported; you can use the
- The Bookmarks Toolbar overflow button with anonid chevronPopup is no longer anonymous; it has an ID of "PlacesChevron".
tabselement now has a
tabboxproperty, replacing the old
_tabboxproperty, which has been deprecated (and was never documented).
windowelements now have the
drawintitlebarattribute; if this is
true, the window's content area includes the title bar, allowing drawing into the title bar.
TabUnpinnedevents are available, allowing you to detect when tabs are pinned and unpinned.
- The new
TabAttrModifiedevent is sent when a tab's
tabelements now have a
pinnedattribute, letting you determine whether or not a tab is currently pinned.
treeelements hasn't done anything for some time now; now it's not used at all anymore.
windowelement now has a
chromemarginattribute that lets you set the margin between chrome and content on each side of a window; you can use this to draw into the title bar, for example.
windowelement now has a
disablechromeattribute; this is used to hide most of the chrome in a window when it's being used to display in-browser UI, such as
windowelement now has a
disablefastfindattribute, which lets you disable the find bar in a window when the content doesn't support it. This is used, for example, by the add-ons panel.
- Toolbars can now be external to toolboxes, while still being considered a member of the
toolbox, by setting the
toolboxidproperty of the
toolbar. Also, the
toolboxelement now has a
externalToolbarsproperty, which lists all the toolbars that are considered members of the toolbox.
- Support has been added for logging XUL templates for debugging purposes.
UI changes affecting developers
- The add-on bar
- The status bar has been removed in favor of the new add-on bar. You'll need to update your extension to use this if you've been adding UI to the status bar in the past.
- Hiding browser chrome
You can now hide the browser's chrome when it's desirable to do so; for example,
Miscellaneous storage API changes
mozIStorageBindingParamsArrayinterface now has a length attribute that indicates the number of
mozIStorageBindingParamsobjects in the array.
mozIStorageStatement.bindParameters()now returns an error if the specified
- Added the
mozIStorageConnection.clone()method, which lets you clone an existing database connection.
- Added the
mozIStorageConnection.asyncClose()method, which lets you close a database connection asynchronously; you specify a callback to be notified when the close operation is complete.
- Added the
mozIStorageConnection.setGrowthIncrement()method, which lets you specify the amount by which a database file is grown at a time, in order to help SQLite reduce fragmentation.
SQLITE_CONSTRAINTerror is now reported as
NS_ERROR_STORAGE_CONSTRAINTinstead of as
In addition to the specific changes referenced below, it's important to note that there are no longer any frozen interfaces. All interfaces are now unfrozen, regardless of what the documentation may say. We'll update the documentation over time.
- XPCOM changes in Gecko 2.0
- Details about changes to XPCOM that impact compatibility in Firefox 4.
This new method returns the global object with which an object is associated; this replaces a common use case of the now-removed
- Places query results may now be observed by multiple observers, and queries may be executed asynchronously. This means there have been some changes to the
nsINavHistoryContainerResultNodeinterfaces. More significantly, the
nsINavHistoryResultViewerinterface has been renamed to
- Some new notifications have been added to enable the browser to track the shutdown process of the Places service more reliably. Of these, most are for internal use only, but the
places-connection-closednotification is available to know when the Places service has completed its shutdown process.
- The array size output parameter on several Places methods is now optional.
- Support for
<menupopup type="places">has been removed. Instead, you need to create and populate a menu with Places information manually, instead of having it done for you. See Displaying Places information using views: Menu view for details.
nsIWebBrowserinterfaces now have a new
isActiveattribute, which is used to allow optimization of code paths for documents that aren't currently visible.
nsIMemory.isLowMemory()has been deprecated. You should use "memory-pressure" notifications to watch for low memory situations instead.
- The API for handling redirects on HTTP channels has changed to let them be processed asynchronously. Any code that implements redirect handling using
nsIChannelEventSink.onChannelRedirect()needs to be updated to use
nsIChannelEventSink.asyncOnChannelRedirect()instead. This accepts a callback handler that must be called when a redirect is successfully completed.
nsINavHistoryResultObserver.batching()method has been added, providing a way to group Places operations into batches, reducing the number of update notifications delivered, which can improve performance when observers are performing relatively involved tasks (such as refreshing views).
- The long-obsolete
nsIPrefinterface has finally been removed. If you haven't already switched to
nsIPrefService, now is the time.
nsISessionStartupinterfaces received changes to support on-demand session restore. See the
nsIPrincipal.checkMayLoad(), as well as its
URIattributes, are now available from script; previously they were only available from native code.
nsIPromptinterface now supports tab-modal alerts; see Using tab-modal prompts for details.
nsIEffectiveTLDService.getPublicSuffixFromHost()method now correctly rejects host name starting with a period (".").
mozIJSSubScriptLoader.loadSubScript()method now has an optional argument allowing you to specify the character set of the script; if one is not provided, ASCII is assumed (as was always assumed previously).
nsIAccessProxyinterface has been removed. It was an implementation detail that has outlived its usefulness.
nsIContentViewManagerinterfaces have been added for Firefox Mobile. It represents a scrollable content view whose contents are actually drawn by a separate process.
nsIDiskCacheStreamInternalinterface has been added.
nsIExternalURLHandlerServiceinterface has been added.
nsISyncJPAKEinterface has been added. See bug 601645.
- Infallible memory allocation
- Mozilla now provides infallible memory allocators that are guaranteed not to return null. You should read this article to learn how they work and how to explicitly request fallible versus infallible memory allocation.
- Most of the resources contained within Firefox have been combined into a single JAR archive,
omni.jar, which improves startup performance by reducing I/O. For details, read About omni.jar.
accessibility.disablecachepreference is no longer supported; it was only exposed for debugging purposes and is no longer used.
- Addons whose GUID changes from one version to another can now be updated properly.
- As a side effect of the removal of platform-specific directories in add-on bundles, you can no longer provide different default preferences for each platform.
- By default, extensions are no longer unpacked when they are installed, but are instead run directly from the XPI file. Extensions can use the unpack property in the install manifest to choose the old behavior. Extensions that use binary components, DLLs loaded using js-ctypes, search plugins, dictionaries, and window icons must specify that they need to be unpacked. Extensions that create SQLite database, or do copy things from the filesystem relatively to the extension's directory, may also need to change their code.
- You may now include extensions that automatically get installed at application startup within a customized Firefox.
- Only the root chrome.manifest file is loaded
Only the root
chrome.manifestfile is loaded now; if you need secondary manifest files to be loaded, you can use the
manifestcommand in your root
chrome.manifestto load them.
- Gopher support removed
- The Gopher protocol is no longer supported natively. Continued support is available via the OverbiteFF extension.
- Content process event handling
- In order to support out-of-process plugins and other multiple-process features, a new API has been introduced to support sending messages across processes.
- Bootstrapped extensions
- You can now create extensions that can be installed, uninstalled, and upgraded (or downgraded) without requiring a browser restart.
- Default plugin removed
- The default plugin has been removed. The application plugins folder has also been removed by default, however support for installing plugins via this folder still exists. See bug 533891.
- Extension Manager replaced by Addon Manager
nsIExtensionManagerhas been replaced by AddonManager.
- Child HWNDs no longer used
- Firefox no longer creates child HWNDs for its internal use on Windows. If you've written an extension that uses native code to manipulate these HWNDs, your extension will not work on Firefox 4. You'll need to either stop using HWNDs or wrap your code that relies on HWNDs in an NPAPI plugin. That's a lot of work, so if you can avoid using HWNDs directly, you should.
- Gesture changes
The three finger up and down swipe gestures on trackpads have been changed to, by default, open and close Firefox Panorama view (neé TabCandy). To change these back to the previous scroll-to-top and scroll-to-bottom commands, open about:config and set