mozilla

Revision 113083 of Firefox 3 for developers

  • Revision slug: Firefox_3_for_developers
  • Revision title: Firefox 3 for developers
  • Revision id: 113083
  • Created:
  • Creator: Mvent2
  • Is current revision? No
  • Comment /* DOM */
Tags: 

Revision Content

New developer features in Firefox 3

Firefox 3 is far from being released, but there are already a number of interesting changes implemented. Below is an incomplete list of some of the features. Feel free to add more things and edit the list.

For web site and application developers

see also Gecko 1.9 Changes affecting websites.

Web Applications 1.0

  • Experimental <a ping> support ({{template.Bug(319368)}}, current spec)
  • Online/Offline events support ({{template.Bug(336359)}}, current spec)
  • APIs for alternate style sheets ({{template.Bug(200930)}}, current spec)
  • getElementsByClassName() method support ({{template.Bug(357450)}}, current spec)
  • <canvas> element's transform() and setTransform() methods support ({{template.Bug(357450)}}, current spec)
Web Applications 1.0 (HTML5, XHTML5) is still a working draft, not final.

CSS

  • inline-block and inline-table values of {{template.Cssxref("display")}} were implemented. ({{template.Bug(9458)}}, {{template.Bug(18217)}})
  • {{template.Cssxref("font-size-adjust")}} now works on all platforms ({{template.Bug(130473)}})
  • rgba() and hsla() color values support ({{template.Bug(147017)}})
  • :default pseudo-class support ({{template.Bug(302186)}})

DOM

JavaScript

XSLT/XPath

  • node-set support ({{template.Bug(193678)}}, spec)
  • Regular Expressions support ({{template.Bug(354886)}}, spec)

SVG

  • foreignObject element support ({{template.Bug(326966)}}, spec, see also)
  • pattern element support (spec)
  • mask element support (spec)
  • SVG filters support (spec)
    • filter
    • feBlend
    • feComponentTransfer, feFuncR, feFuncG, feFuncB, feFuncA
    • feComposite
    • feFlood
    • feGaussianBlur
    • feMerge, feMergeNode
    • feMorphology
    • feOffset
    • feTurbulence
  • a element became the nsSVGAElement instead of XBL binding.
  • various DOM functions for texts were implemented

For XUL and extension developers

New XUL Elements

XUL in Firefox 3 supports a number of new elements:

  • a <scale> element is added for creating sliding scales used to select between a range. This widget would typically be used, for example, to create a volume control. {{mediawiki.interwiki('wikimo', 'XUL:Slider_Tag', 'More information about scale')}} ({{template.Bug(290255)}})
  • a new value 'number' for the type attribute of textboxes creates a textbox in which only numbers may be entered. In addition, arrow buttons appear to one side which may be used to step through values. {{mediawiki.interwiki('wikimo', 'XUL:Specs:NumberBox', 'More information about numeric textboxes')}} ({{template.Bug(345510)}})
  • a <dropmarker> element is added which is useful when creating menu-like widgets using XBL bindings. ({{template.Bug(348614)}})
  • a <spinbuttons> element is added which can be used when creating widgets using XBL bindings. ({{template.Bug(155053)}})
  • two widgets, <datepicker> and <timepicker>, can be used to allow the entry of dates and times. The datepicker is available in a number of styles by setting the type attribute, to allow entry with textboxes or a calendar grid.{{mediawiki.interwiki('wikimo', 'XUL:Specs:DateTimePickers', 'More information about date pickers')}}

Tree Improvements

  • trees now support scrolling horizontally. A horizontal scrollbar will appear if the columns don't fit into the available width. This will occur if the columns have specified widths which add up to more than the space available. ({{template.Bug(212789)}})
  • a new selection style allows cells to be selected individually, instead of entire rows. This may be used by setting the seltype attribute on a tree to 'cell'. ({{template.Bug(296040)}})
  • trees now support editing of individual cells. Double-clicking on an editable cell will display a text field in which the user can edit the contents of the cell. {{mediawiki.interwiki('wikimo', 'XUL:Tree', 'More details')}} ({{template.Bug(201499)}})
  • <treecol> elements now support an overflow attribute which may be set to true to allow the text of cells within that column to expand to neighbouring blank cells if the text is too large to fit into that single cell.

Menu Improvements

Several improvements in the <menu> and <menulist> elements have been made ({{template.Bug(333023)}}):

  • the image attribute is used consistently for setting images
  • menulists fire the select event when selecting an item
  • inputField and editable properties have been added to menulist
  • the <menu>, <menuitem> and <menuseparator> elements now have a readonly selected property which retrieves whether the item is selected in a <menulist>
  • the <menu>, <menuitem> and <menuseparator> elements now have a readonly control property which returns the enclosing <menulist>
  • the <menu>, <menuitem> and <menuseparator> elements now support the accessKey, disabled, crop, image and label properties which set the corresponding attribute
  • supports an editor property to get the internal nsIEditor for the text field of an editable menulist.({{template.Bug(312867)}})
  • menus may now be made translucent on platforms that support it. ({{template.Bug(70798)}})

Textbox Improvements

  • setting the spellcheck attribute to 'true' on a textbox will enable inline spellchecking for that textbox. ({{template.Bug(346787)}})
  • the <textbox> now has a reset() method to reset the value of the textbox to the default value. The defaultValue property may be used to retrieve and modify the default value of the textbox. ({{template.Bug(312867)}})
  • supports an editor property to get the internal nsIEditor for the text field. ({{template.Bug(312867)}})
  • textbox now supports a newlines attribute which specifies how line breaks in pasted text are handled. ({{template.Bug(253481)}}) Possible values are:
    • pasteintact - paste everything as is
    • pastetofirst - (default value) paste only up to the first line break
    • replacewithspaces - replace line breaks with spaces
    • replacewithcommas - replace line breaks with commas
    • strip - strip out all line breaks
    • stripsurroundingwhitespace - strip out all line breaks and surrounding whitespace

Improvements to Other Elements

  • the type attribute on a <button> may be set to 'repeat' to create buttons which fire their command event repeatedly while the mouse button is held down. ({{template.Bug(331055)}})
  • the buttondisabledaccept attribute can now be used on the <dialog> element to have the accept (OK) button initially disabled. ({{template.Bug(247849)}})
  • the <titlebar> element now supports the allowevents attribute to allow events to be passed to the children of the titlebar. ({{template.Bug(361425)}})
  • the <splitter> now supports an additional value for the collapse attribute of 'both' which indicates that the splitter can collapse elements on both sides of it when dragged. The substate attribute will set to either before or after when one is collapsed. ({{template.Bug(337955)}})
  • The <richlistbox> element now supports multiple selection. Set the seltype attribute to 'multiple' to enable this.

Template Changes

Templates have been significantly improved in Firefox 3. The key improvement allows the use of custom query processors to handle other types of datasources besides RDF. A new query syntax makes this possible. A full description of the new features available for templates {{mediawiki.interwiki('wikimo', 'XUL:Template_Features_in_1.9', 'is available')}}. ({{template.Bug(285631)}})

Other template improvements:

  • relational conditions have been added to allow for more precise control over what results match a rule. This allows, for example, matching of results that start or end with certain strings, or that are before or after other values.
  • a flag 'dont-recurse' has been added to prevent recursion for happening such that only one level of results are generated
  • APIs have been added to the template builder to retrieve a result object representing an output item.
  • the XUL sort service is more robust and sorts both content and non-content trees better. It also allows sorting of non-template built content. ({{template.Bug(335122)}})

Idle Service

A new service has been added to determine how long the user has been idle, that is, has not moved their mouse or typed on the keyboard. This service implements the nsIIdleService interface. ({{template.Bug(343416)}})

Notable Bugs Fixed

  • if an error occurs parsing an overlay, the overlay is not applied. Parse errors are logged to the error console. ({{template.Bug(355755)}})
  • bug fixed where <menupopup> elements can be placed inside a binding when attached to a menu or menu-like element. ({{template.Bug(345896)}})
  • the button's dlgType property now works properly. ({{template.Bug(308591)}})
  • the canBubble argument to event.initEvent now works properly so that events can be fired which don't bubble. ({{template.Bug(330190)}})
  • the DOMAttrModified event now handles namespaced attributes properly. ({{template.Bug(247095)}})
  • XML processing instructions, such as <?xml-stylesheet ?>, are now added to a XUL document's DOM. This means document.firstChild isn't guaranteed to be the root element, use document.documentElement instead. Also, <?xml-stylesheet ?> and <?xul-overlay ?> processing instructions now have no effect outside the document prolog. ({{template.Bug(319654)}})
  • getElementsByAttributeNS functions have been added to XUL elements and documents. ({{template.Bug(239976)}})
  • event listeners are maintained when moving or removing an element from a XUL document. ({{template.Bug(286619)}})
  • mutation events are now fired for non-displayed documents. ({{template.Bug(201238)}})
  • various issues with elements drawing in the wrong order are fixed. ({{template.Bug(317375)}})

Places

  • History and Bookmarks API comparison to Fx2
  • Annotations
  • Querying History, Bookmarks and Annotations
  • History and Bookmarks Events
  • Sync
  • Places Widgets

See also

{{ wiki.languages( { "fr": "fr/Firefox_3_pour_les_d\u00e9veloppeurs", "ja": "ja/Firefox_3_for_developers", "pl": "pl/Firefox_3_dla_programist\u00f3w", "ko": "ko/Firefox_3_for_developers" } ) }}

Revision Source

<h2 name="New_developer_features_in_Firefox_3">New developer features in Firefox 3</h2>
<p>Firefox 3 is far from being released, but there are already a number of interesting changes implemented. Below is an incomplete list of some of the features. Feel free to add more things and edit the list.
</p>
<h3 name="For_web_site_and_application_developers">For web site and application developers</h3>
<p>see also <a href="en/Gecko_1.9_Changes_affecting_websites">Gecko 1.9 Changes affecting websites</a>.
</p>
<h4 name="Web_Applications_1.0">Web Applications 1.0</h4>
<ul><li>Experimental <code>&lt;a ping&gt;</code> support ({{template.Bug(319368)}}, <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#ping">current spec</a>)
</li><li>Online/Offline events support ({{template.Bug(336359)}}, <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#scs-offline">current spec</a>)
</li><li>APIs for alternate style sheets ({{template.Bug(200930)}}, <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">current spec</a>)
</li><li><code>getElementsByClassName()</code> method support ({{template.Bug(357450)}}, <a class="external" href="http://whatwg.org/specs/web-apps/current-work/#getelementsbyclassname">current spec</a>)
</li><li><code>&lt;canvas&gt;</code> element's <code>transform()</code> and <code>setTransform()</code> methods support ({{template.Bug(357450)}}, <a class="external" href="http://whatwg.org/specs/web-apps/current-work/#transform">current spec</a>)
</li></ul>
<div class="note"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a> (HTML5, XHTML5) is still a working draft, not final.</div>
<h4 name="CSS"><a href="en/CSS">CSS</a></h4>
<ul><li><code>inline-block</code> and <code>inline-table</code> values of {{template.Cssxref("display")}} were implemented. ({{template.Bug(9458)}}, {{template.Bug(18217)}})
</li><li>{{template.Cssxref("font-size-adjust")}} now works on all platforms ({{template.Bug(130473)}})
</li><li><code>rgba()</code> and <code>hsla()</code> color values support ({{template.Bug(147017)}})
</li><li><code>:default</code> pseudo-class support ({{template.Bug(302186)}})
</li></ul>
<h4 name="DOM">DOM</h4>
<ul><li>IE extensions <code><a href="en/DOM/element.clientTop">clientTop</a></code> and <code><a href="en/DOM/element.clientLeft">clientLeft</a></code> have been implemented ({{template.Bug(111207)}}).
</li></ul>
<h4 name="JavaScript">JavaScript</h4>
<h4 name="XSLT.2FXPath">XSLT/XPath</h4>
<ul><li><code>node-set</code> support ({{template.Bug(193678)}}, <a class="external" href="http://www.exslt.org/exsl/exsl.html">spec</a>)
</li><li>Regular Expressions support ({{template.Bug(354886)}}, <a class="external" href="http://www.exslt.org/regexp/index.html">spec</a>)
</li></ul>
<h4 name="SVG"><a href="en/SVG">SVG</a></h4>
<ul><li><code>foreignObject</code> element support ({{template.Bug(326966)}}, <a class="external" href="http://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement">spec</a>, <a class="external" href="http://weblogs.mozillazine.org/roc/archives/2006/06/the_future_is_now.html">see also</a>)
</li><li><code>pattern</code> element support (<a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#PatternElement">spec</a>)
</li><li><code>mask</code> element support (<a class="external" href="http://www.w3.org/TR/SVG11/masking.html#MaskElement">spec</a>)
</li><li>SVG filters support (<a class="external" href="http://www.w3.org/TR/SVG11/filters.html">spec</a>)
<ul><li><code>filter</code>
</li><li><code>feBlend</code>
</li><li><code>feComponentTransfer</code>, <code>feFuncR</code>, <code>feFuncG</code>, <code>feFuncB</code>, <code>feFuncA</code>
</li><li><code>feComposite</code>
</li><li><code>feFlood</code>
</li><li><code>feGaussianBlur</code>
</li><li><code>feMerge</code>, <code>feMergeNode</code>
</li><li><code>feMorphology</code>
</li><li><code>feOffset</code>
</li><li><code>feTurbulence</code>
</li></ul>
</li><li><code>a</code> element became the <code>nsSVGAElement</code> instead of XBL binding.
</li><li>various DOM functions for texts were implemented
</li></ul>
<h3 name="For_XUL_and_extension_developers">For XUL and extension developers</h3>
<h4 name="New_XUL_Elements">New XUL Elements</h4>
<p>XUL in Firefox 3 supports a number of new elements:
</p>
<ul><li>a <code>&lt;scale&gt;</code> element is added for creating sliding scales used to select between a range. This widget would typically be used, for example, to create a volume control. {{mediawiki.interwiki('wikimo', 'XUL:Slider_Tag', 'More information about scale')}} ({{template.Bug(290255)}})
</li><li>a new value <code>'number'</code> for the <code>type</code> attribute of textboxes creates a textbox in which only numbers may be entered. In addition, arrow buttons appear to one side which may be used to step through values. {{mediawiki.interwiki('wikimo', 'XUL:Specs:NumberBox', 'More information about numeric textboxes')}} ({{template.Bug(345510)}})
</li><li>a <code>&lt;dropmarker&gt;</code> element is added which is useful when creating menu-like widgets using XBL bindings. ({{template.Bug(348614)}})
</li><li>a <code>&lt;spinbuttons&gt;</code> element is added which can be used when creating widgets using XBL bindings. ({{template.Bug(155053)}})
</li><li>two widgets, <code>&lt;datepicker&gt;</code> and <code>&lt;timepicker&gt;</code>, can be used to allow the entry of dates and times. The datepicker is available in a number of styles by setting the <code>type</code> attribute, to allow entry with textboxes or a calendar grid.{{mediawiki.interwiki('wikimo', 'XUL:Specs:DateTimePickers', 'More information about date pickers')}}
</li></ul>
<h4 name="Tree_Improvements">Tree Improvements</h4>
<ul><li>trees now support scrolling horizontally. A horizontal scrollbar will appear if the columns don't fit into the available width. This will occur if the columns have specified widths which add up to more than the space available. ({{template.Bug(212789)}})
</li><li>a new selection style allows cells to be selected individually, instead of entire rows. This may be used by setting the <code>seltype</code> attribute on a tree to <code>'cell'</code>. ({{template.Bug(296040)}})
</li><li>trees now support editing of individual cells. Double-clicking on an editable cell will display a text field in which the user can edit the contents of the cell. {{mediawiki.interwiki('wikimo', 'XUL:Tree', 'More details')}} ({{template.Bug(201499)}})
</li><li>&lt;treecol&gt; elements now support an <code>overflow</code> attribute which may be set to true to allow the text of cells within that column to expand to neighbouring blank cells if the text is too large to fit into that single cell.
</li></ul>
<h4 name="Menu_Improvements">Menu Improvements</h4>
<p>Several improvements in the <code>&lt;menu&gt;</code> and <code>&lt;menulist&gt;</code> elements have been made ({{template.Bug(333023)}}):
</p>
<ul><li>the <code>image</code> attribute is used consistently for setting images
</li><li>menulists fire the select event when selecting an item
</li><li><code>inputField</code> and <code>editable</code> properties have been added to menulist
</li><li>the <code>&lt;menu&gt;</code>, <code>&lt;menuitem&gt;</code> and <code>&lt;menuseparator&gt;</code> elements now have a readonly <code>selected</code> property which retrieves whether the item is selected in a &lt;menulist&gt;
</li><li>the <code>&lt;menu&gt;</code>, <code>&lt;menuitem&gt;</code> and <code>&lt;menuseparator&gt;</code> elements now have a readonly <code>control</code> property which returns the enclosing &lt;menulist&gt;
</li><li>the <code>&lt;menu&gt;</code>, <code>&lt;menuitem&gt;</code> and <code>&lt;menuseparator&gt;</code> elements now support the <code>accessKey</code>, <code>disabled</code>, <code>crop</code>, <code>image</code> and <code>label</code> properties which set the corresponding attribute
</li><li>supports an <code>editor</code> property to get the internal <a href="en/NsIEditor">nsIEditor</a> for the text field of an editable menulist.({{template.Bug(312867)}})
</li><li>menus may now be made translucent on platforms that support it. ({{template.Bug(70798)}})
</li></ul>
<h4 name="Textbox_Improvements">Textbox Improvements</h4>
<ul><li>setting the <code>spellcheck</code> attribute to <code>'true'</code> on a textbox will enable inline spellchecking for that textbox. ({{template.Bug(346787)}})
</li><li>the <code>&lt;textbox&gt;</code> now has a <code>reset()</code> method to reset the value of the textbox to the default value. The <code>defaultValue</code> property may be used to retrieve and modify the default value of the textbox. ({{template.Bug(312867)}})
</li><li>supports an <code>editor</code> property to get the internal <a href="en/NsIEditor">nsIEditor</a> for the text field. ({{template.Bug(312867)}})
</li><li>textbox now supports a <code>newlines</code> attribute which specifies how line breaks in pasted text are handled. ({{template.Bug(253481)}}) Possible values are:
<ul><li><code>pasteintact</code> - paste everything as is
</li><li><code>pastetofirst</code> - (default value) paste only up to the first line break
</li><li><code>replacewithspaces</code> - replace line breaks with spaces
</li><li><code>replacewithcommas</code> - replace line breaks with commas
</li><li><code>strip</code> - strip out all line breaks
</li><li><code>stripsurroundingwhitespace</code> - strip out all line breaks and surrounding whitespace
</li></ul>
</li></ul>
<h4 name="Improvements_to_Other_Elements">Improvements to Other Elements</h4>
<ul><li>the <code>type</code> attribute on a <code>&lt;button&gt;</code> may be set to <code>'repeat'</code> to create buttons which fire their command event repeatedly while the mouse button is held down. ({{template.Bug(331055)}})
</li><li>the <code>buttondisabledaccept</code> attribute can now be used on the <code>&lt;dialog&gt;</code> element to have the accept (OK) button initially disabled. ({{template.Bug(247849)}})
</li><li>the <code>&lt;titlebar&gt;</code> element now supports the <code>allowevents</code> attribute to allow events to be passed to the children of the titlebar. ({{template.Bug(361425)}})
</li><li>the <code>&lt;splitter&gt;</code> now supports an additional value for the <code>collapse</code> attribute of <code>'both'</code> which indicates that the splitter can collapse elements on both sides of it when dragged. The <code>substate</code> attribute will set to either before or after when one is collapsed. ({{template.Bug(337955)}})
</li><li>The <code>&lt;richlistbox&gt;</code> element now supports multiple selection. Set the <code>seltype</code> attribute to <code>'multiple'</code> to enable this.
</li></ul>
<h4 name="Template_Changes">Template Changes</h4>
<p>Templates have been significantly improved in Firefox 3. The key improvement allows the use of custom query processors to handle other types of datasources besides RDF. A new query syntax makes this possible. A full description of the new features available for templates {{mediawiki.interwiki('wikimo', 'XUL:Template_Features_in_1.9', 'is available')}}. ({{template.Bug(285631)}})
</p><p>Other template improvements:
</p>
<ul><li>relational conditions have been added to allow for more precise control over what results match a rule. This allows, for example, matching of results that start or end with certain strings, or that are before or after other values.
</li><li>a flag 'dont-recurse' has been added to prevent recursion for happening such that only one level of results are generated
</li><li>APIs have been added to the template builder to retrieve a result object representing an output item.
</li><li>the XUL sort service is more robust and sorts both content and non-content trees better. It also allows sorting of non-template built content. ({{template.Bug(335122)}})
</li></ul>
<h4 name="Idle_Service">Idle Service</h4>
<p>A new service has been added to determine how long the user has been idle, that is, has not moved their mouse or typed on the keyboard. This service implements the <code><a href="en/NsIIdleService">nsIIdleService</a></code> interface. ({{template.Bug(343416)}})
</p>
<h4 name="Notable_Bugs_Fixed">Notable Bugs Fixed</h4>
<ul><li>if an error occurs parsing an overlay, the overlay is not applied. Parse errors are logged to the error console. ({{template.Bug(355755)}})
</li><li>bug fixed where <code>&lt;menupopup&gt;</code> elements can be placed inside a binding when attached to a menu or menu-like element. ({{template.Bug(345896)}})
</li><li>the button's <code>dlgType</code> property now works properly. ({{template.Bug(308591)}})
</li><li>the <code>canBubble</code> argument to <a href="en/DOM/event.initEvent">event.initEvent</a> now works properly so that events can be fired which don't bubble. ({{template.Bug(330190)}})
</li><li>the <code>DOMAttrModified</code> event now handles namespaced attributes properly. ({{template.Bug(247095)}})
</li><li>XML processing instructions, such as <code>&lt;?xml-stylesheet ?&gt;</code>, are now added to a XUL document's DOM. This means <code>document.firstChild</code> isn't guaranteed to be the root element, use <code>document.documentElement</code> instead. Also, <code>&lt;?xml-stylesheet ?&gt;</code> and <code>&lt;?xul-overlay ?&gt;</code> processing instructions now have no effect outside the document prolog. ({{template.Bug(319654)}})
</li><li><code>getElementsByAttributeNS</code> functions have been added to XUL elements and documents. ({{template.Bug(239976)}})
</li><li>event listeners are maintained when moving or removing an element from a XUL document. ({{template.Bug(286619)}})
</li><li>mutation events are now fired for non-displayed documents. ({{template.Bug(201238)}})
</li><li>various issues with elements drawing in the wrong order are fixed. ({{template.Bug(317375)}})
</li></ul>
<h4 name="Places"><a href="en/Places">Places</a></h4>
<ul><li> History and Bookmarks API comparison to Fx2
</li><li> Annotations
</li><li> Querying History, Bookmarks and Annotations
</li><li> History and Bookmarks Events
</li><li> Sync
</li><li> Places Widgets
</li></ul>
<h3 name="See_also">See also</h3>
<ul><li> <a class="external" href="http://www.squarefree.com/burningedge/releases/trunk-for-firefox-3.html">More detailed list of changes in Firefox 3 at squarefree.com</a>
</li><li> <a href="en/Firefox_2_for_developers">Firefox 2 for developers</a>
</li><li> <a href="en/Firefox_1.5_for_developers">Firefox 1.5 for developers</a>
</li></ul>
{{ wiki.languages( { "fr": "fr/Firefox_3_pour_les_d\u00e9veloppeurs", "ja": "ja/Firefox_3_for_developers", "pl": "pl/Firefox_3_dla_programist\u00f3w", "ko": "ko/Firefox_3_for_developers" } ) }}
Revert to this revision