This article gave an overview of some of the developer features of Firefox 3. Let’s now take a closer look at some of these features and how they work.
Drag and Drop
Dragging occurs when the user moves the mouse around while holding down the mouse button. The action is stopped when the user lets go of the button. Firefox 3 implements two new events: drag and dragend, to determine the start and end of a drag session. These two events are part of the evolving HTML 5 specification.
The list of various events that can be called is available here.
This functionality is supported with two interfaces; nslDragService and nslDragSession. The former starts and ends a drag session, while the latter can retrieve and change the state of the drag.
Online and Offline Events
Online and Offline events, which are also part of the developing HTML 5 specification, have been introduced in Firefox 3. This allows applications and extensions to know if an Internet connection exists and when the status of the connection changes to online or offline.
They can be used by:
|> attaching an event listener to window, document or document.body
|> attaching ononline or onoffline attributes to the <body> tag.
The combination of the HTML 5 <canvas> tag and Mozilla’s own API enable drawing of text on canvas.
The following Mozilla methods handle text drawing on canvas:
|> void mozDrawText(in DOMString textToDraw); : draws the text specified in textToDraw parameter to canvas. The text style can be set using the mozTextStyle attribute.
|> float mozMeasureText(in DOMString textToMeasure); : measures the width in pixels of the string passed in the textToMeasure parameter.
|>void mozPathText(in DOMString textToPath); : with this method you can stroke text. The textToPath parameter is the string whose strokes will be added to the current path.
|>void mozTextAlongPath(in DOMString textToDraw, in boolean stroke); : draws the text in the textToDraw parameter along the path. If the stroke parameter is true the text is drawn along the path and if it’s false the text is added to the path.
Furthermore, the transform () and setTransform() canvas methods are supported now. These methods let you make modifications to the matrix directly.
Mozilla provides a tutorial on how to use the different canvas features.
Scalable Vector Graphics (SVG) is a XML-based language for describing two-dimensional graphics, developed by the World Wide Web Consortium. Firefox 3 provides more support for SVG than previous versions. The improvements include support for new filters, elements and attributes.
The list of added features can be found here.
Two new attributes of the HTML 5 draft specification have been implemented: activeElement and hasFocus.
The activeElement returns the element with the focus within the document. For example,
var element = document.activeElement;
The hasFocus returns true if the focus is anywhere in the document. For example,
focus = document.hasFocus();
For the full list of developer features in Firefox 3, see http://developer.mozilla.org/en/docs/Firefox_3_for_developers.
Those are some of the developer features of Firefox 3. The improved graphics support and implementation of various aspects of HTML 5 will probably come in handy to most developers. Test them out for yourself.