Revision 27562 of Firefox 3.6 for developers

<p><a class=" external" href="https://www.firefox.com/" title="https://www.firefox.com/">Firefox 3.6</a> offers support for new and developing web standards, increased performance, and an overall better experience for web users and developers. This page provides links to articles covering the new capabilities of Firefox 3.6.</p>
<h2>For web site and application developers</h2>
<h3>CSS</h3>
<dl> <dt><a href="/en/Using_gradients" title="en/Using gradients">Using gradients</a></dt> <dd>Firefox 3.6 adds support for the proposed {{ cssxref("-moz-linear-gradient") }} and {{ cssxref("-moz-radial-gradient") }} properties  for {{ Cssxref("background") }}.</dd> <dt><a href="/en/CSS/Multiple_backgrounds" title="en/CSS/Multiple backgrounds">Multiple backgrounds</a></dt> <dd>The {{ cssxref("background") }} property (as well as {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, and {{ Cssxref("background-attachment") }}) now supports multiple backgrounds. This lets you specify multiple backgrounds that are rendered atop one another in layers.</dd> <dt><a href="/En/CSS/Media_queries#Mozilla-specific_media_features" title="En/CSS/Media queries#Mozilla-specific media features">Mozilla-specific media features</a></dt> <dd>Media features have been added for Mozilla-specific system metrics, so that <a href="/En/CSS/Media_queries" title="En/CSS/Media queries">media queries</a> can be used to more safely check on the availability of features such as touch support.</dd> <dt><a href="/en/CSS/Scaling_background_images" title="en/CSS/Scaling background images">Scaling background images</a></dt> <dd>The <code>background-size </code>property from the <a class="external" href="https://dev.w3.org/csswg/css3-background/" title="https://dev.w3.org/csswg/css3-background/#the-background-size-property">CSS 3 Backgrounds and Borders draft</a> is now supported under the name {{ cssxref("-moz-background-size") }}.</dd> <dt><a href="/en/About_WOFF" title="en/About WOFF">WOFF font support</a></dt> <dd>{{ cssxref("@font-face") }} now supports the WOFF downloadable font file format.</dd> <dt><a href="/en/CSS/pointer-events" title="en/CSS/pointer-events">Pointer events</a></dt> <dd>The {{ cssxref("pointer-events") }} property lets content specify whether or not an element may be the target of mouse pointer events.</dd>
</dl>
<h4>Miscellaneous CSS changes</h4>
<ul> <li>The <a href="/en/CSS/length#Relative_length_units" title="en/CSS/length#Relative length units"><code>rem</code></a> length unit from <a class="external" href="https://www.w3.org/TR/css3-values/#lengths" title="https://www.w3.org/TR/css3-values/#lengths">CSS3 Values and Units</a> is now supported. {{ bug("472195") }}</li> <li>{{ Cssxref("image-rendering") }} is supported for images, background images, videos and canvases. {{ bug("423756") }}</li> <li>{{ Cssxref("text-align") }}:end is now supported. {{ bug("299837") }}</li> <li>DOM changes to elements using the table {{ Cssxref("display") }} types now work much better.</li> <li>Added {{ cssxref(":-moz-locale-dir(ltr)") }} and {{ cssxref(":-moz-locale-dir(rtl)") }} to make it easier to customize layouts based on whether the user interface is being displayed using a left-to-right or a right-to-left locale. {{ bug("478416") }}</li> <li>Added support for the {{ cssxref(":indeterminate") }} pseudo-class, which matches <code>checkbox</code> <a class="internal" href="/en/HTML/Element/Input" title="en/HTML/Element/input"><code>input</code></a> elements whose <code>indeterminate</code> attribute is <code>true</code>.</li> <li>Windowed plugins are no longer displayed in CSS transforms, because they can't be transformed properly by the compositor.</li>
</ul>
<h3>HTML</h3>
<dl> <dt><a href="/en/Using_files_from_web_applications" title="en/Using files from web applications">Using files from web applications</a></dt> <dd>Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the <code>input type="file"</code> HTML element's new <code>multiple</code> attribute.</dd> <dt>HTML5 video supports poster frames</dt> <dd>The <code>poster</code> attribute is now supported for the <a class="internal" href="/En/HTML/Element/Video" title="En/HTML/Element/Video"><code>video</code></a> element, allowing content to specify a poster frame to be displayed until the video begins to play.</dd> <dt>Checkboxes and radio buttons support the <code>indeterminate</code> property</dt> <dd>HTML <a class="internal" href="/en/HTML/Element/Input" title="en/HTML/Element/input"><code>input</code></a> elements of types <code>checkbox</code> and <code>radio</code> now support the indeterminate property, which allows a third, "indeterminate" state.</dd> <dt>Canvas image smoothing can be controlled</dt> <dd>The new <a class="internal" href="/en/Canvas_tutorial/Using_images#Controlling_image_scaling_behavior" title="en/Canvas tutorial/Using images#Controlling image scaling behavior"><code>mozImageSmoothingEnabled</code></a> property can be used to turn on and off image smoothing when scaling in <a class="internal" href="/en/HTML/Element/canvas" title="en/HTML/Element/canvas"><code>canvas</code></a> elements.</dd> <dt>Asynchronous script execution</dt> <dd>By setting the <code>async</code> attribute on a <a href="/En/HTML/Element/Script" title="En/HTML/Element/Script"><code>script</code></a> element, the <code>script</code> will not block loading or display of the rest of the page. Instead the <code>script</code> executes as soon as it is downloaded.</dd>
</dl>
<h3>JavaScript</h3>
<p>Gecko 1.9.2 introduces JavaScript 1.8.2, which adds a number of language features from the <a href="/En/JavaScript/ECMAScript_5_support_in_Mozilla" title="https://developer.mozilla.org/En/JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5 standard</a>:</p>
<ul> <li><a href="/en/JavaScript/Reference/Global_Objects/Date/parse" title="en/Core JavaScript 1.5 Reference/Global Objects/Date/parse"><code>Date.parse()</code></a> can now parse ISO 8601 dates like YYYY-MM-DD.</li> <li> <p>The <a href="/en/JavaScript/Reference/Global_Objects/Function/prototype" title="en/Core JavaScript 1.5 Reference/Global Objects/Function/prototype"><code>prototype</code></a> property of function instances is no longer enumerable.</p> </li>
</ul>
<dl> <h3>DOM</h3>
<dl> <dt>Web workers can now self-terminate</dt> <dd><a href="/En/Using_web_workers" title="En/Using web workers">Workers</a> now support the {{ ifmethod("nsIWorkerScope", "close") }} method, which allows them to terminate themselves.</dd> <dt>Drag and drop now supports files</dt> <dd>The <a href="/En/DragDrop/DataTransfer" title="en/DragDrop/DataTransfer"><code>DataTransfer</code></a> object provided to drag listeners now includes a list of files that were dragged.</dd> <dt>Checking to see if an element matches a specified CSS selector</dt> <dd>The new {{ domxref("Node.mozMatchesSelector", "element.mozMatchesSelector") }} method lets you determine whether or not an element matches a specified CSS selector. See {{ bug("518003") }}.</dd> <dt><a href="/en/Detecting_device_orientation" title="en/Detecting device orientation">Detecting device orientation</a></dt> <dd>Content can now detect the orientation of the device if it has a supported accelerometer, using the <a href="/en/DOM/MozOrientation" title="en/DOM/MozOrientation"><code>MozOrientation</code></a> event. Firefox 3.6 supports the accelerometer in Mac laptops.</dd> <dt><a href="/en/DOM/Detecting_document_width_and_height_changes" title="en/DOM/Detecting document width and height changes">Detecting document width and height changes</a></dt> <dd>The new <code>MozScrollAreaChanged</code> event is dispatched whenever the document's <code>scrollWidth</code> and/or <code>scrollHeight</code> properties change.</dd>
</dl>
<h4>Miscellaneous DOM changes</h4>
<ul> <li>The <code>getBoxObjectFor()</code> method has been <strong>removed</strong>, as it was non-standard and exposed even more non-standard stuff to the web. See {{ bug("340571") }}. Also affects <a class=" external" href="https://mootools.net/" title="https://mootools.net/">MooTools</a> which uses this call for Gecko detection; this has been fixed in the latest version of MooTools, so be sure to update.</li> <li>The new <a class="internal" href="/en/DOM/window.mozInnerScreenX" title="en/DOM/window.mozInnerScreenX"><code>mozInnerScreenX</code></a> and <a class="internal" href="/en/DOM/window.mozInnerScreenY" title="en/DOM/window.mozInnerScreenY"><code>mozInnerScreenY</code></a> properties on DOM windows have been added; these return the screen coordinates of the top-left corner of the window's viewport.</li> <li>The new <code>mozScreenPixelsPerCSSPixel</code> attribute on the {{ interface("nsIDOMWindowUtils") }} interface, accessible only to chrome, provides a conversion factor between CSS pixels and screen pixels; this value can vary based on the zoom level of the content.</li> <li>When the page's URI's document fragment identifier (the part after the "#" (hash) character) changes, a new <code>hashchange</code> event is sent to the page. See <a class="internal" href="/en/DOM/window.onhashchange" title="window.onhashchange">window.onhashchange</a> for more information. {{ bug("385434") }}</li> <li>The attribute <a class="internal" href="/en/DOM/document.readyState" title="en/DOM/document.readyState"><code>document.readyState</code></a> is now supported. {{ bug("347174") }}</li> <li>Support for HTML5's <code><a class="internal" href="/en/DOM/element.classList" title="element.classList">element.classList</a></code> to allow easier handling of the class attribute. {{ bug("501257") }}</li> <li><code>localName</code> and <code>namespaceURI</code> in HTML documents now behave like they do in XHTML documents: <code>localName</code> returns in lower case and <code>namespaceURI</code> for HTML elements is <code>"<a class=" external" href="https://www.w3.org/1999/xhtml" rel="freelink">https://www.w3.org/1999/xhtml</a>"</code>.</li> <li><a href="/en/DOM/element.getElementsByTagNameNS" title="en/DOM/element.getElementsByTagNameNS"><code>element.getElementsByTagNameNS</code></a> no longer lowercases its argument, so upper-case ASCII letters in the argument make matches against HTML elements fail.  The same is true for <a href="/en/DOM/document.getElementsByTagNameNS" title="en/DOM/document.getElementsByTagNameNS"><code>document.getElementsByTagNameNS</code></a>.</li> <li>Support has been added for addresses in geolocation via the {{ interface("nsIDOMGeoPositionAddress") }} interface and a new field added to {{ interface("nsIDOMGeoPosition") }}.</li> <li>The {{ domxref("window.getComputedStyle") }} function now returns quotes within <code>url()</code> values.</li>
</ul><h3>XPath</h3> <dl> <dt>The choose() XPath method is now supported</dt> <dd>The <a href="/en/XPath/Functions/choose" title="en/XPath/Functions/choose"><code>choose()</code></a> method is now supported by our implementation of <a href="/en/XPath" title="en/XPath">XPath</a>.</dd> </dl> <h2>For XUL and add-on developers</h2> <p>If you're an extension developer, you should start by reading <a class="internal" href="/en/Updating_extensions_for_Firefox_3.6" title="en/Updating extensions for Firefox 3.6">Updating extensions for Firefox 3.6</a>, which offers a helpful overview of what changes may affect your extension. Plug-in developers should read <a class="internal" href="/en/Updating_plug-ins_for_Firefox_3.6" title="en/Updating plug-ins for Firefox 3.6">Updating plug-ins for Firefox 3.6</a>.</p> <h3>New features</h3> <dl> <dt><a href="/en/Detecting_device_orientation" title="en/Detecting device orientation">Detecting device orientation</a></dt> <dd>Content can now detect the orientation of the device if it has a supported accelerometer, using the <a href="/en/DOM/MozOrientation" title="en/DOM/MozOrientation"><code>MozOrientation</code></a> event. Firefox 3.6 supports the accelerometer in Mac laptops.</dd> <dt><a href="/en/Monitoring_HTTP_activity" title="en/Monitoring HTTP activity">Monitoring HTTP activity</a></dt> <dd>You can now monitor HTTP transactions to observe requests and responses in real time.</dd> <dt><a href="/en/Working_with_the_Windows_taskbar" title="en/Working with the Windows taskbar">Working with the Windows taskbar</a></dt> <dd>It's now possible to customize the appearance of windows in the taskbar in Windows 7 or later. <em>This has been disabled by default in Firefox 3.6.</em></dd> </dl> <h3>Places</h3> <ul> <li>Places queries can now use the <code>redirectsMode</code> attribute on the {{ interface("nsINavHistoryQueryOptions") }} interface to specify whether or not to include redirected pages in results.</li> <li>Added the new {{ ifmethod("nsIFaviconService", "expireAllFavicons") }} method to the {{ interface("nsIFaviconService") }} interface.</li> </ul> <h3>Storage</h3> <dl> <dt><a href="/en/Storage#Collation_(sorting)" title="en/Storage#Collation (sorting)">Locale-aware collation of data is now supported by the Storage API</a></dt> <dd>Gecko 1.9.2 added several new collation methods to provide optimized collation (sorting) of results using locale-aware techniques.</dd> <dt><a href="/en/mozIStorageStatementParams#Enumeration_of_properties" title="en/mozIStorageStatementParams#Enumeration of properties">Properties on a statement can now be enumerated</a></dt> <dd>You can now use a <code><a class="internal" href="/en/JavaScript/Reference/Statements/for...in" title="En/Core JavaScript 1.5 Reference/Statements/For...in">for..in</a></code> enumeration to enumerate all the properties on a statement.</dd> <dt>mozIStorageStatement's getParameterIndex changed behavior between 3.5 and 3.6.</dt> <dd>See {{ bug("528166") }} for details.</dd> <dt>Asynchronously bind multiple sets of parameters and execute a statement.</dt> <dd>See {{ bug("490085") }} for details. Documentation coming soon.</dd> </dl> <h3>Preferences</h3> <ul> <li>The {{ interface("nsIContentPrefService") }} interface has two new methods: {{ ifmethod("nsIContentPrefService", "getPrefsByName") }} and {{ ifmethod("nsIContentPrefService", "removePrefsByName") }}.</li> </ul> <h3>Themes</h3> <p>See <a class="internal" href="/en/Updating_themes_for_Firefox_3.6" title="en/Updating themes for Firefox 3.6">Updating themes for Firefox 3.6</a> for a list of changes related to themes.</p> <dl> <dt><a href="/en/Themes/Lightweight_themes" title="en/Themes/Lightweight themes">Lightweight themes</a></dt> <dd>Firefox 3.6 supports lightweight themes; these are easy-to-create themes that simply apply a background to the top (URL bar and button bar) and bottom (status bar) of browser windows. This is an integration of the existing <a class=" external" href="https://www.getpersonas.com/" title="https://www.getpersonas.com/">Personas</a> theme architecture into Firefox.</dd> </dl> <h3>Miscellaneous</h3> <ul> <li>Firefox will no longer load third-party components installed in its internal components directory. This helps to ensure stability by preventing buggy third-party components from being executed. Developers that install components this way must <a href="/en/Migrating_raw_components_to_add-ons" title="en/Migrating raw components to add-ons">repackage their components as XPI packages</a> so they can be installed as standard add-ons.</li> <li><code>contents.rdf</code> is no longer supported for registering chrome in extensions. You must now use the <a class="internal" href="/en/Install_Manifests" title="en/Install manifests"><code>chrome.manifest</code></a> file instead. See {{ bug("492008") }}.</li> <li>Added support for hiding the menu bar automatically. See {{ bug("477256") }}.</li> <li>Added support for the <code>container-live-role</code> attribute to objects. See {{ bug("391829") }}.</li> <li>The <code>tabs-closebutton</code> binding has been removed. See {{ bug("500971") }}.</li> <li>Added support to {{ interface("nsISound") }} for playing sounds based on events that have occurred. See {{ bug("502799") }}.</li> <li>The syntax for the {{ interface("nsITreeView") }} methods {{ ifmethod("nsITreeView", "canDrop") }} and {{ ifmethod("nsITreeView", "drop") }} has changed to support the new drag &amp; drop API introduced in Gecko 1.9. See {{ bug("455590") }}.</li> <li>Added support to snap the mouse cursor to the default button of dialog or wizard on Windows, see {{ bug("76053") }}. This is processed automatically by dialog and wizard element. But if a XUL application creates a window using the <code>window</code> element and it has a default button, it needs to call {{ ifmethod("nsIDOMChromeWindow", "notifyDefaultButtonLoaded") }} during the window's <code>onload</code> event handler.</li> <li>The {{ interface("nsILocalFileMac") }} interface has had two methods removed: <code>setFileTypeAndCreatorFromMIMEType()</code> and <code>setFileTypeAndCreatorFromExtension()</code>.</li> <li>The new <a class="internal" href="/en/JavaScript_code_modules/NetUtil.jsm" title="en/JavaScript code modules/NetUtil.jsm"><code>NetUtils.jsm</code></a> code module provides an easy-to-use method for asynchronously copying data from an input stream to an output stream.</li> <li>The new <a class="internal" href="/en/JavaScript_code_modules/openLocationLastURL.jsm" title="en/JavaScript code modules/openLocationLastURL.jsm"><code>openLocationLastURL.jsm</code></a> code module makes it easy to read and change the value of the "Open Location" dialog box's remembered URL while properly taking private browsing mode into account.</li> <li>On Windows, the {{ interface("nsIScreen") }} interface now reports 24 bit per pixel color depths when the graphics driver claims 32 bits, since 24 more accurately represents the actual number of color pixels in use.</li> <li>Menu bars can now be hidden on Windows, using the new {{ XULAttr("autohide") }} attribute on the {{ XULElem("toolbar") }} XUL element.</li> <li>The {{ xulmeth("loadOneTab") }} and {{ xulmeth("addTab") }} methods now accept a new <code>relatedToCurrent</code> parameter and, in addition, allow the parameters to be specified by name, since nearly all of the parameters are optional.</li> <li>The "<a href="/en/Install_Manifests#hidden" title="en/Install Manifests#hidden">hidden</a>" property is no longer supported in install manifests; it's no longer possible to prevent the user from seeing add-ons in the add-on manager window.</li> <li>The <code>@mozilla.org/webshell;1</code> component no longer exists; you need to use <code>@mozilla.org/docshell;1</code> instead.</li> <li>You can now register with the update-timer category to schedule timer events without having to instantiate the object that the timer will eventually call into; it will instead be instantiated when it's needed. See {{ ifmethod("nsIUpdateTimerManager", "registerTimer") }} for details.</li> <li>The <a href="/en/NPN_GetValue" title="en/NPN GetValue"><code>NPN_GetValue()</code></a> function no longer provides access to XPCOM through the variable values <code>NPNVserviceManager</code>, <code>NPNVDOMelement</code>, and <code>NPNVDOMWindow</code>. This is part of the work toward making plugins run in separate processes in a future version of Gecko.</li> <li>Plugins are no longer scriptable through XPCOM (IDL) interfaces, <a href="/en/Gecko_Plugin_API_Reference/Scripting_plugins" title="en/Gecko Plugin API Reference:Scripting plugins">NPRuntime</a> is the API to use for making plugins scriptable, and <a href="/en/NPP_GetValue" title="en/NPP GetValue"><code>NPP_GetValue()</code></a> is no longer called to with the value <code>NPPVpluginScriptableInstance</code> or <code>NPPVpluginScriptableIID</code>. This is part of the work toward making plugins run in separate processes in a future version of Gecko.</li> </ul> <h2>For Firefox/Gecko developers</h2> <p>Certain changes are only really interesting if you work on the internals of Firefox itself.</p> <h3>Interfaces merged</h3> <p>The following interfaces have been combined together:</p> <ul> <li><code>nsIPluginTagInfo2</code> has been merged into <code>nsIPluginTagInfo</code>.</li> <li><code>nsIPluginInstanceInternal</code>, <code>nsIPPluginInstancePeer</code>, <code>nsIPluginInstancePeer1</code>, <code>nsIPluginInstancePeer2</code>, and <code>nsIPluginInstancePeer3</code> have all been merged into <code>nsIPluginInstance</code>.</li> <li><code>nsIWindowlessPlugInstPeer</code> has been merged into <code>nsIPluginInstance</code>.</li> <li><code>nsIPluginManager</code> and <code>nsIPluginManager2</code> have been merged into <code>nsIPluginHost</code>.</li> </ul> <h3>Interfaces removed</h3> <p>The following interfaces have been removed entirely because they were unused, unimplemented, or obsolete:</p> <ul> <li><code>nsIFullScreen<br> </code></li> <li><code>nsIDOMSVGListener<br> </code></li> <li><code>nsIDOMSVGZoomListener<br> </code></li> <li><code>nsIInternetConfigService<br> </code></li> <li><code>nsIDKey<br> </code></li> <li><code>nsIEventHandler<br> </code></li> <li><code>nsIJRILiveConnectPIPeer<br> </code></li> <li><code>nsIJRILiveConnectPlugin<br> </code></li> <li><code>nsIScriptablePlugin<br> </code></li> <li><code>nsIClassicPluginFactory<br> </code></li> <li><code>nsIFileUtilities</code></li> </ul> <h3>Interfaces moved</h3> <p>The following interfaces have been relocated from their previous IDL files into new ones:</p> <ul> <li><code>nsIDOMNSCSS2Properties</code> is now located in its own IDL file (<code>dom/interfaces/css/nsIDOMCSS2Properties.idl</code>).</li> <li>{{ interface("nsIUpdateTimerManager") }} is now located in its own IDL file.</li> </ul> <p>A large number of interfaces have been moved. See <a href="/en/Interfaces_moved_in_Firefox_3.6" title="en/Interfaces moved in Firefox 3.6">Interfaces moved in Firefox 3.6</a> for a complete list.</p> <h3>Other interface changes</h3> <p>The following assorted changes have been made:</p> <ul> <li>The <code>nsIPlugin</code> interface now inherits from {{ interface("nsISupports") }} instead of {{ interface("nsIFactory") }}.</li> <li>The <code>nsIPluginHost</code> interface now inherits from {{ interface("nsISupports") }} instead of {{ interface("nsIFactory") }}.</li> <li>The <code>nsIFrame</code> interface now inherits from <code>nsQueryFrame</code> instead of {{ interface("nsISupports") }}.</li> <li>The {{ interface("nsIDeviceContext") }} method <code>getPaletteInfo()</code> has been removed, as it was never implemented.</li> <li>The {{ interface("nsIScriptContext") }} method <code>reportPendingException()</code> has been removed, since it was no longer being used.</li> </ul> <h3>Changes in accessibility code</h3> <ul> <li>The <span style="font-family: monospace;">EVENT</span><code>_REORDER</code> <a href="/en/XPCOM_Interface_Reference/nsIAccessibleEvent" title="en/XPCOM Interface Reference/nsIAccessibleEvent">accessibility event</a> is now sent when the children of frames and iframes change, as well as when the main document's children change. See {{ bug("420845") }}.</li> <li>The {{ ifandmethod("nsIAccessibleTable", "selectRow") }} now correctly removes any current selection before selecting the specified row.</li> </ul> <h2>See also</h2> <ul> <li><a href="/en/Firefox_4_for_developers" title="en/Firefox 4 for developers">Firefox 4 for developers</a></li> <li><a class="internal" href="/En/Firefox_3.5_for_developers" title="En/Firefox 3.5 for developers">Firefox 3.5 for developers</a></li> <li><a class="internal" href="/en/Firefox_3_for_developers" title="en/Firefox 3 for developers">Firefox 3 for developers</a></li> <li><a class="internal" href="/en/Firefox_2_for_developers" title="en/Firefox 2 for developers">Firefox 2 for developers</a></li> <li><a class="internal" href="/en/Firefox_1.5_for_developers" title="en/Firefox 1.5 for developers">Firefox 1.5 for developers</a></li> </ul> <p>{{ languages( { "fr": "fr/Firefox_3.6_pour_les_développeurs", "ja": "ja/Firefox_3.6_for_developers", "pt": "pt/Firefox_3.6_para_desenvolvedores"} ) }}</p></dl>